teleren/devto huggingface dataset:
Angular 11 Firestore CRUD example | AngularFireStore
Tags: angular, firebase, javascript, webdev
Published: 2020-12-30 03:02:57

In this tutorial, I will show you how to build Angular 11 CRUD App with Firebase Cloud Firestore that uses `AngularFireStore` service to get/add/update/delete documents in a collection.

Full Article: [https://bezkoder.com/angular-11-firestore-crud-angularfirestore/](https://bezkoder.com/angular-11-firestore-crud-angularfirestore/)

## Angular 11 Firestore CRUD Overview
We’re gonna build an Angular 11 Firestore App using `@angular/fire` library in which:

Each Tutorial has id, title, description, published status.
We can create, retrieve, update, delete Tutorials.
Here are the screenshots:

– Create a new Tutorial:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/do2joah3vvg3y7kpi7au.png)

Cloud Firestore after the Create Operations:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/egng122g8agagaamptqt.png)

– Get all Tutorial documents:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1rfx91ny3r73bsqa6ene.png)

– Change status to Published/Pending using **Publish**/**UnPublish** button:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fqhzix3gtcifm47a0bqb.png)

– Update the Tutorial details with **Update** button:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qzrzoszxd7vy1e4miope.png)

– Delete the Tutorial document using **Delete** button:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f1n9s3jwwuooe8nnq622.png)

## Technology
- Angular 11
- firebase 8
- @angular/fire 6
- rxjs 6

## Project Structure

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7bhvjubefnaawyvjvfjk.png)

For more details, implementation and Github, please visit:
[https://bezkoder.com/angular-11-firestore-crud-angularfirestore/](https://bezkoder.com/angular-11-firestore-crud-angularfirestore/)

## Further Reading
Related Posts:
- [Angular 11 Firebase CRUD Realtime DB | AngularFireDatabase](https://bezkoder.com/angular-11-firebase-crud/)
- [Angular 11 Firebase Storage: File Upload/Display/Delete Files example](https://bezkoder.com/angular-11-file-upload-firebase-storage/)
- [Angular 11 CRUD Application example with Web API](https://bezkoder.com/angular-11-crud-app/)

Fullstack CRUD Application:

*   [Angular + Node.js Express + MySQL example](https://bezkoder.com/angular-11-node-js-express-mysql/)
*   [Angular + Node.js Express + PostgreSQL example](https://bezkoder.com/angular-11-node-js-express-postgresql/)
*   [Angular + Node.js Express + MongoDB example](https://bezkoder.com/angular-11-mongodb-node-js-express/)
*   [Angular + Spring Boot + MySQL example](https://bezkoder.com/angular-11-spring-boot-crud/)
*   [Angular + Spring Boot + PostgreSQL example](https://bezkoder.com/angular-11-spring-boot-postgresql/)
*   [Angular + Spring Boot + MongoDB example](https://bezkoder.com/angular-11-spring-boot-mongodb/)
*   [Angular + Django example](https://bezkoder.com/django-angular-11-crud-rest-framework/)
*   [Angular + Django + PostgreSQL example](https://bezkoder.com/django-angular-postgresql/)
Amend "Journal has been rotated since unit was started..."
Tags: linux, ubuntu
Published: 2020-12-30 02:59:28

## Summary

`systemctl status xxx` shows the message:

```
Warning: Journal has been rotated since unit was started. Log output is incomplete or unavailable.
```

## The cause

In my case, `the disk usage of the log files for journald` was maxed out.

- `du -sh /run/log/journal` let you see the disk usage.

- The default maximum usage is 10% of the disk size.

  + It depends on your situation, but if `/run` is in a different partition from the one for `/`, you must refer the disk size for `/run` instead.

## Amendment

### Step 1

Amend the file `/etc/systemd/journald.conf`.

- `SystemMaxUse` for `/var/log/journal`.

  + My machine did not have the directory so I did not apply this setting.

- `RuntimeMaxUse` for `/run/log/journal`.

```
/etc/systemd/journald.conf
==========
SystemMaxUse=100M
RuntimeMaxUse=100M
```

### Step 2

Shrink the disk usage by deleting old archived log files:

```
journalctl --vacuum-time=2weeks
# OR
journalctl --vacuum-size=20M
```

### Step 3

Restart `journald`.

I am actually not sure if it is OK to use `systemctl restart` as it may lose some logs, but I could not have found a better way (Restart instead?):

```
journalctl --rotate && \
systemctl restart systemd-journald
```

## Useful Commands

```
journalctl --disk-usage
# OR
du -sh /run/log/journal
```

```
journalctl --verify
```

```
ls -l /run/log/journal/*
```

```
systemctl status systemd-journald
```

## References

- [How can I see previous logs with systemd?](https://unix.stackexchange.com/questions/288139/how-can-i-see-previous-logs-with-systemd/288141)

- [journalctl log file size](https://bbs.archlinux.org/viewtopic.php?id=202390)

- [systemd/Journal](https://wiki.archlinux.org/index.php/Systemd/Journal)

- [How to tell journald to re-read its configuration?](https://unix.stackexchange.com/questions/253203/how-to-tell-journald-to-re-read-its-configuration)

- [How to clear journalctl](https://unix.stackexchange.com/questions/139513/how-to-clear-journalctl)
Download YouTube videos with Chrome Dev Tools
Tags: network, requests, youtube, download
Published: 2020-12-30 02:24:34

Did you know you can download YouTube videos by inspecting the network requests when you toggle the device toolbar?

Just open the dev tools with `Ctrl + Shift + I` and select the `Network` tab. Then toggle the device toolbar with `Ctrl + Shift + M` and reload the page. Filter by the heaviest network request and open it in a new tab, there you will be able to download your video.

You can see me in action here: https://www.youtube.com/watch?v=_eZeBg0jLy4&ab_channel=DavidArmend%C3%A1riz
Install and configure docker and Postgres on Linux
Tags: docker, database, postgres, linux
Published: 2020-12-30 02:08:51

This tutorial use Ubuntu/Debian base systems. If you use another system, you can adapt.

First open your terminal and run
```sh
sudo apt update && apt install docker.io
```
Now, docker is installed on your machine.

To enable and start docker services, run
```sh
sudo systemctl start docker && sudo systemctl enable docker
```
If you want to stop the docker,
```sh
sudo systemctl stop docker && sudo service docker stop
```
Now we're going to install Postgres docker image, for this, run the follow command on terminal:
```sh
sudo docker run --name container_name -e POSTGRES_PASSWORD=badatabse_password -p 5432:5432 -d postgres
```
Note, if you already installed Postgres database in your system, the port 5432 is already booked, then you can change to another number port for example,

`5434:5432`

If everything goes well, docker is running in your machine.

#Helpful commands

Show all docker containers running:
```sh
sudo docker ps
```
Show all docker containers:
```sh
sudo docker ps -a
```
Start docker container by name:
```sh
sudo docker start container_name
```
Stop docker container by name:
```sh
sudo docker stop container_name
```

That`s all folks!
TIL: React Server Components
Tags: todayilearned, react
Published: 2020-12-30 02:04:07

---
title: TIL: React Server Components
published: true
description: 
tags: todayilearned, react
//cover_image: https://direct_url_to_image.jpg
---
After being late to the party I've finally watched [the React Server Components introduction from the React team](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html). Here are my thoughts.

In recent months I felt a need to explore more "traditional" ways of doing web apps. More server rendering, less client-side logic. In my case mostly the Phoenix framework and Phoenix LiveView (it's great). It's really good to see more and more movement in that direction in the React community (with recent additions to Next.js) and from the React Core team itself.

I think current React development is really complex and requires a lot of work with separate backend and frontend "services" and REST/GraphQL API to connect both. If you're using a framework like Next.js and/or your team is full-stack it's much easier because you probably share the same codebase and technology you work in. But that doesn't reflect your application. Still, only the first render of the page happens on the server. With React Server Components you'll get more tools at your disposal to create a better experience for your users.

Knowing that I'm also kind of worried about the complexity of those things. "With great power comes great responsibility" right? For example, React Hooks were a great addition to React and made hard things easy, but also made easy things hard. With React Server Components we won't be talking only about React components and their state or effects but also about their runtime. If this is a shared/server/client component? Will there be a different behavior on server and client? And I'm 100% sure devs will do weird things with direct Node access inside server components. For sure TypeScript and the ungodly amount of Eslint config will make it work great but that's a good thing to keep in mind.
Remote Debug Django3(Docker) with VSCode
Tags: django, docker, vscode, python
Published: 2020-12-30 01:31:50

#### sample github
https://github.com/katsuya-n/pub_docker_django

#### environment
mysql 5.7
python 3.9
django 3

# install Python extension for Visual Studio Code
Install VSCode [python library](https://marketplace.visualstudio.com/items?itemName=ms-python.python). Reopen VSCode after install.

# docker-compose
Django project needs to allow port 3000 to use remote debug, so write `- "3000:3000"`.

```yaml
 web:
    build: .
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
      - "3000:3000"
    depends_on:
      - db
```

[my sample docker-compose.yml](https://github.com/katsuya-n/pub_docker_django/blob/main/docker-compose.yml)

# launch.json
Create file `.vscode/launch.json`. Port sets `3000`. `[your docker project remote root path]` changes yourself.

```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Django",
            "type": "python",
            "request": "attach",
            "port": 3000,
            "host": "localhost",
            "pathMappings": [
                {
                    "localRoot": "${workspaceRoot}",
                    "remoteRoot": "[your docker project remote root path]"
                }
            ],
            "django": true
        }
    ]
}
```

※When request change from `attach` to `launch`, you may not success remote debug.

```
...
"request": "launch",
"program": manage.py",
...
```

[my sample launch.json](https://github.com/katsuya-n/pub_docker_django/blob/main/.vscode/launch.json)

# Dockerfile(Django)

Install python library called [ptvsd](https://pypi.org/project/ptvsd/). It has been developed by Microsoft company, but [github's star](https://github.com/Microsoft/ptvsd/) is few...

```yaml
RUN pip install ptvsd
```

[my sample Dockerfile](https://github.com/katsuya-n/pub_docker_django/blob/main/Dockerfile)

# start project

```
$ docker-compose up -d
```

# enable ptvsd
Edit manage.py

```python
# add
import ptvsd
...
# add, port=3000
ptvsd.enable_attach(address=('0.0.0.0', 3000))
```

[my sample manage.py(remove comment out L23)](https://github.com/katsuya-n/pub_docker_django/blob/main/manage.py)

*Attention! Docker container can't seem to start if you enable ptvsd before start docker container.*

# start debug
Enter `fn + F5`(Mac OS). Under bar color changes from blue to orange.

![exec_debug_mode](https://dev-to-uploads.s3.amazonaws.com/i/vyw0r31u2uvmmruyhlb9.png)
 

# check break point
![break_point](https://dev-to-uploads.s3.amazonaws.com/i/f9z7vx2v374z97ado8hl.png)
 

*Attention! Break point can't seem to use some of other files(etc. polls/url.py, manage.py ...). Sorry, I don't know the reason.*

# access URL
Access your project url(etc. http://127.0.0.1:8000/polls/), and program will stop break point.

# stop break point
![stop_break_point](https://dev-to-uploads.s3.amazonaws.com/i/offd7sqljpjka0q5i6ad.png)
Introductions are Needed
Tags: firstpost, devjournal
Published: 2020-12-30 01:09:54

Hello Reader,

My name is Joshua, and I am excited (like being on the upside-down loop part of our local amusement park ride) to be here! All jokes aside, I am happy to be here and to contribute to the community.

I am currently an Associate QA Engineer, at an amazing company. It has taken many long hours, sweat, and even some tears to get to where I am today. I acknowledge, and express my gratitude to all those who have helped me along the way.

Educationally, I am working towards my bachelor's degree in Computer Science at Western Governors University. It's been a great school, and I would highly recommend it. Previously, I had attended Utah Valley University and also received some certifications in my home state of Washington.

My goal here is to pay it forward, by sharing the knowledge, and experience I gain with others as well as continuing forward in my own developmental journey.
Super Mario Stack Overflow!
Tags: watercooler
Published: 2020-12-30 01:09:51

![Super Mario Stack Overflow](https://dev-to-uploads.s3.amazonaws.com/i/lx38vxpp0l9yf329aea2.jpg)

If Super Mario was a developer instead of a plumber, he'd have to fix this stack overflow! 

Can you come up with other ideas following this theme?!
Visual Studio Code Cheatsheet
Published: 2020-12-30 01:05:33

![ikysur95osy0deokuuji.webp](https://cdn.hashnode.com/res/hashnode/image/upload/v1609279212601/8JzFYsBPy.webp)

Website: https://code.visualstudio.com

VSCode Documentation: https://code.visualstudio.com/docs


### Install Visual Studio Code

```
brew cask install visual-studio-code
```

### Verify the Installed Visual Studio Code Version

```
code -v
```

### Visual Studio Code CLI Help

```
code --help
```

### Add Visual Studio Code to PATH

```
cat << EOF >> ~/.bash_profile
# Add Visual Studio Code (code)
export PATH="\$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"
EOF
```

### Open Project in Visual Studio Code

```
cd my_dev_project_directory
```

If this is a existing folder then it will load all the project files present in this directory in VS Code

```
code .
```

### Opens a New Session of Visual Studio Code

```
code -n
```

### Open a File in Visual Studio Code

This command will create the file if the file is not existing with this name in the current directory.

```
code filename
```

### Open a File in Visual Studio Code with Cursor at a particular line

```
code -g filename:line
```

### Open a diff in Visual Studio Code

```
code -d filename1 filename2
```
Homebrew Cheatsheet
Published: 2020-12-30 01:02:28

![homebrew-256x256.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609192465449/cAuCKSxfr.png)

# [Homebrew](https://brew.sh) 
The Missing Package Manager for macOS (or Linux)

Brew Documentation - https://docs.brew.sh

### Pre-requisite
First we need to install XCode command line tools, this we can do by opening a terminal and executing below command:

```
xcode-select --install
``` 

### Installing Homebrew
We can now install the homebrew by opening a terminal and executing below command:

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

### Verifying Homebrew Install

```
brew doctor
```

### Listing Homebrew Commands

```
brew commands
```

### Homebrew Help

```
brew help [COMMAND]
```

### List installed Formulas

```
brew list
```

### Search for a Formula

```
brew search tree
```

### Describe a Formula

```
brew desc tree
```

### Install a Formula

```
brew install tree
```

### Show Detail Information on a Formula

```
brew info tree
```

### Show a Installed Formula's Dependencies

```
brew deps tree
```

### Show the homepage of an Formula 

```
brew home tree
```

### Upgrade a Particular Formula

```
brew upgrade tree
```

### Uninstall a Formula

```
brew uninstall tree
```

### Clean Old Formulas

```
brew cleanup
```

### Search for a Cask

```
brew cask search visual-studio-code
```

### Installing Desktop/GUI Application

```
brew cask install visual-studio-code
```

### Uninstalling Desktop/GUI Application

```
brew cask uninstall visual-studio-code
```

### Update Homebrew Catalog

```
brew update
```

### Upgrade Homebrew 

```
brew upgrade
```

### Uninstall Homebrew 

We can uninstall the homebrew by opening a terminal and executing below command:

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall.sh)"
```

### GUI Search Options

* Go to the https://brew.sh

![Screen Shot 2020-12-29 at 2.49.04 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609278678151/qK0Z6NeFa.png)

* Put the name of the application you are searching for in the search field, for example here we will write tree, as you type it will search and show results in a pop up

![Screen Shot 2020-12-29 at 2.49.22 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609278756999/nHg88xX3O.png)

* Select the name of the application in the pop up for example here we will select tree which will show further details about tree like description, brew command to install it, its homepage, license  and version information etc.

![Screen Shot 2020-12-29 at 2.49.40 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609278854722/VQ3Fv_mcG.png)
Typescript: How I passed from find it useless to love it
Tags: typescript, javascript, webdev
Published: 2020-12-30 00:48:04

 I started my journey into programming in the Christmas of two years ago, I wanted to learn JavaScript because we would see it in class and I wanted to be prepared.
So my intention was just give the basics, no frameworks or anything like that, innocent me didn't know that I would fall in love with programming and web development.
The start was hard, it was my first programming language so it was a lot of new concepts in my mind,but with time and patience (I recognize I got frustrated a few times during the way,but the support of my girlfriend made a difference) I could learn it and then after that my ideas of stop there were totally gone.
I wanted more so I went to Nodejs and then React but it had a thing that was getting every time more trendy that was Typescript, I never touched any programming language that wasn't JavaScript so my experience with typed languages was null.
So my mind was like 

>¿ Why would I need to indicate the types ?
>¿ Why would I take that effort and extra time ?

I just couldn't find the sense.
This changed one day that I started to learn Dart for Flutter, I wanted to create a mobile app for a project of school and even though I could have go for React Native I wanted to try a different thing to take some rest of JavaScript.
 Dart is the language that made me start to appreciate the benefits of the Typed languages even do not being strongly typed It was perfect for me since I was doing it because I was having a more comfortable experience programming.
Then I did myself the magical question that started the trip that ended with me here writing this.
¿Why do not give a chance to Typescript?
And oh boy, It was like discover the fire.
I started using Typescript in my Node-Express Projects and it felt awesome, in the client side I took more time to give the Jump, but now I can say that both my Node and React code is written in Typescript and I don't have any regrets.
With this I don't want to say that Typescript is a obligatory thing and you are outdated and not a good programmer if you are still using JavaScript, not at all.
I want to share my experience so maybe someone read this and get the motivation necessary to give a try and maybe he finds as useful as I did , and in case that no, at least you tried a different thing that is always good.

My favorite things of Typescript are:

1. Detect errors while coding not while running
2. Autocomplete
3. You know in every moment what you are doing and with what you are working

So I hope someone find my experience useful and didn't get too bored with this long post

Thank you for read!
Sticker Swap!
Tags: stickers, watercooler
Published: 2020-12-30 00:28:41

---
title: Sticker Swap!
published: true
description: I've got stickers.  Who wants to swap?
tags: stickers, watercooler
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4uho4slj51903sd9fwsp.jpg
---

Hi!  I just got some DEV stickers and I've got some duplicates that I can't think of anywhere to stick them, but I don't want them to go to waste.  I'd love to send them to a new home and do a sticker swap with somebody or multiple somebodies.

If you see a sticker above that speaks to you, and you want to trade for one of the stickers that you have (coding-related preferred 😊), shoot me a DEV message and we'll get a mail swap going.
PixAI Dev Log: Day 1
Tags: dohackathon, digitalocean, react
Published: 2020-12-30 00:06:57

# ...Beginning & stuff

I'm new to writing blogposts but lets see how this goes...

So I heard about this hackathon a few days ago and I figured it was  good an excuse as any to try out some fun ideas. The plan going forth is to submit as many apps as I can for the sake of it...(doing well might also be nice😉😂).

I'm mainly going to be using react for the projects and any other stack as needed.

# PixAI
Sounds real cringe but oh well 🤷‍♀️...PixAI is being created to showcase the beautiful and creative things that can be done on photos using AI. There's gonna be cartooning, illustrations, some style transfer and the classic black&white photo colorization. 

All the AI used are API based and no I didn't make any of them I'm simply calling them ( though I created an AI API for another project to also be submitted for the Hackathon, [Stay tuned](https://dev.to/aperson101/cartoonate-pic-to-short-cartoon-video-1-5djn). Anyway, after deciding what AI features needed I went on with the design on paper then moved to coding after the draft.

Spent a couple of hours...(more than I'd like to admit 😢) getting the images used for the examples  and also coding the front page.
A screenshot of the top half is my cover image, hope you like it.

Hopefully by tomorrow I can get the second page and the use of the APIs done, wish me luck 🤞.

Later✌.
How to undo the last commit in Git?
Tags: git
Published: 2020-12-30 00:00:00

---
  title: How to undo the last commit in Git?
  published: true
  tags: Git
  date: Wed Dec 30 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/undo-last-commit-in-git
  cover_image: https://melvingeorge.me/_next/static/images/main-f8b7ae5d8e46da9de5f9019a5cc1ef33.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/undo-last-commit-in-git)
  
To undo the last commit in Git, you can use the `git reset` command.

You have 2 ways to undo the last commit:

- The first is the

```bash
git reset --soft HEAD~1
```

this command will undo the last commit. For most cases, this command can be used and safe to use. This command will also make sure to preserve the changes in uncommitted files.

- The second one is the

```bash
git reset --hard HEAD~1
```

Will also undo the last commit but will not preserve the changes to uncommitted files and resets everything. Be cautious when using the above command.

### Feel free to share if you found this useful 😃.

---