teleren/devto huggingface dataset:
Angular 11 + Node.js + MongoDB: CRUD example with Express Rest Apis
Tags: angular, node, mongodb, webdev
Published: 2020-12-25 09:28:46

In this tutorial, I will show you how to make Angular 11 CRUD with MongoDB via Node.js Express. We're gonna build a full-stack (MEAN stack) CRUD Application in which, the back-end server uses Node.js + Express for REST APIs, front-end side is an Angular App with HTTPClient.

Full Article: [https://bezkoder.com/angular-11-mongodb-node-js-express/](https://bezkoder.com/angular-11-mongodb-node-js-express/)

## Angular 11 + Node.js + MongoDB CRUD example Overview
We will build a full-stack Tutorial Application in that:
1. Tutorial has id, title, description, published status.
2. User can create, retrieve, update, delete Tutorials.
3. There is a search box for finding Tutorials by title.

Here are screenshots of the example.

- Add an object:

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

- Retrieve all objects:

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

- Click on **Edit** button to update an object:

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

On this Page, you can:

1- change status to Published using Publish button
2- delete the Tutorial using Delete button
3- update the Tutorial details with Update button

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

- Search Tutorials by title:

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

- Check MongoDB Database:

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

## Full-stack MEAN CRUD App Architecture
We're gonna build the application with following architecture:

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

– Node.js Express exports REST APIs & interacts with MongoDB Database using Mongoose ODM.
– Angular Client sends HTTP Requests and retrieves HTTP Responses using HTTPClient, consume data on the components. Angular Router is used for navigating to pages.

## Video
This is brief instruction and demo for Angular + Node.js Express application running with MongoDB database.

{% youtube LXErOsejHdc %}

In the video, we use Angular 10, but the logic and UI are the same as this Angular version 11.

For more details, implementation and Github, please visit:
[https://bezkoder.com/angular-11-mongodb-node-js-express/](https://bezkoder.com/angular-11-mongodb-node-js-express/)

## Further Reading
Security:
[Node.js + MongoDB: User Authentication & Authorization with JWT](https://bezkoder.com/node-js-mongodb-auth-jwt/)

Run both projects in one place:
[How to Integrate Angular with Node.js Restful Services](https://bezkoder.com/integrate-angular-10-node-js/)

Serverless with Firebase:

[Angular 11 Firebase CRUD Realtime DB | AngularFireDatabase](https://bezkoder.com/angular-11-firebase-crud/)
[Angular 11 Firestore CRUD example | AngularFireStore](https://bezkoder.com/angular-11-firestore-crud-angularfirestore/)
CSS Selectors
Tags: css, webdev
Published: 2020-12-25 09:25:52

There are different kinds of css selectors. 

So, what are selectors in css anyway ?

Selectors are simply way of selecting things more like picking clothes in the shops. so, instead of picking clothes we pick or target html elements for styling.

I have listed here some of the most commonly used selectors which are basic.

Feel free to **suggest** more useful css selectors in the discussion below.

Some of the most used css selectors are:

**1. Element selector**

The element selector lets you select and apply styling to all elements with the same specified element name i.e. the actual html element.

eg:
        <code>
	p {
	     color: red;
	     font-size: 24px;
	}
        </code>

You can also group elements which selects all elements. 

eg:
       <code>
       h1,h2,h3 {
	   padding: 20px;
           margin: 20px;
       }
       </code>

**2. #id selector**

Id selectors selects elements based on the id attribute given by the developer to a certain element. Inorder to apply style in css we select the actual id like #idname. Note that # followed by idname.

eg:

   <code>
       #registernumber {
           background-color: green;
       }
   </code>

**3. .class selector**

One of the most commonly used selector is class selector. It applies styling to all class attribute which are specified in the html element. These are generally used when we want to apply similar styles across different pages. eg: nav, footer, header will be similar across the whole website so we can style those using classes.

eg:

   <code>
        .footer{
           background-color: purple;
	   border-top-left-radius: 1rem;
	   border-top-right-radius: 1rem;
        }
  </code>
Ways of Recovering Deleted Files
Tags: database
Published: 2020-12-25 07:51:18

You can lose an important file from your computer without knowing. The feeling is worse when you have to start a process again for you to get what you have lost. Sometimes you can lose something irreplaceable and in, the process, end up being devastated. If you have never gone through that problem, you are lucky. If you go through such a problem now and again, there are a few tips you can follow for you to regain your files. These ones are helpful in the case you need to write an essay but you have a great possibility to ask writers from one of the best <a href="https://usessaywriters.com/essay-writing-website.py" target="_blank">essay writing websites</a>.

Ways of Recovering Deleted Files

You can delete your files accidentally by just touching your mouse pad. You do not have a button that reads undelete on your laptop. If you click delete, you will get rid of the file. You can try to have software that recovers files, but it is not that important. It also comes with risks that can put your machine in great danger. You can be able to regain back your files only if you use the correct tricks. You will have to know where you saved the file and the duration it took after you deleted it. You can get back your document without going through any pressure. If you have deleted the file and immediately look for it in the trash folder, there is a possibility you will get it. When you delete a file by mistake and take so much time without trying to find it, you have no chance of getting it.

Ways of Recovering Files on a PC

PC users are lucky because there is a built-in feature to help them get back their deleted files. File History helps in storing files to another backup tool. For you to have it, you have to go to settings and afterward enable it and make sure you choose a drive that you will use as a backup.  Always make copies of your documents, and do not forget to back them up. The moment you have file history, you will be able to access your lost files by moving to settings.
Ways of Recovering Files on a Mac

You have to go through the same process. The first place to check is the recycle bin. Then afterward, try to use the Apple search and see if you can detect the files. You are supposed to click the icon for you to open the window that will enable you to search. Type any details that you can remember about the file there. If the file is still somewhere on the laptop, there is a chance of getting it. If you cannot track it anywhere on your computer, confirm if you have Apple built-in software. You can then follow the steps you applied in windows and try to see if you will get hold of it in any way.

Get Resourceful

You will be able to get your files faster if you have a backup. What happens if you do not have any backup? You will have to think out of the box and try to find other ways. Think about how the file you have deleted has helped you. Is there a possibility that you emailed it? If you sent it to someone else, you find it in your sent folder. You should also think if you uploaded it anywhere. If you did, it gets easy for you to get it back.
[AOC] 25 days of happiness
Tags: adventofcode, java, spring
Published: 2020-12-25 07:24:58

https://adventofcode.com/

I had pleasure to try solving every day puzzles of advent of code 2020 using java/ spring-boot to develop my app that i used for this purpose :

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

i this app we can select the day to solve and then get the solution in return :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5rp5yk1y4ng6pxfvq8gw.PNG)

And you what you used to achieve this goal ?

Thank you
Lose in the short run to learn for the long run
Tags: productivity, programming, career, discuss
Published: 2020-12-25 07:16:49

   As developers in the workforce, we have deadlines, development practices, and existing company solutions. Our performance dictates our compensation and career progress. This need to meet our expected targets often comes at the cost of growth as developers. We often overlook the unexpected need to look deeper into a problem because we might miss a deadline or overdevelop a solution. These failures seem grand in the short run. However, from these failures, we improve our development abilities and grow as problem-solvers in the long run. I have often failed to meet deadlines starting out because I looked deeper into problems or I couldn't solve the problem. Solutions that were readily available to me seemed to do the job but were not always scalable or dynamic. I tested myself and I pursued better solutions with the encouragement of my colleagues and superiors. I cannot say I always found the optimal solution but I was given an environment to fail and try different solutions.

   Companies know that when they hire a new developer they will have to bear the cost of slow or inefficient software development in the beginning. After working on one or two projects the developer becomes proficient and the company reaps their investment by gaining a faster problem solver that can implement existing solutions over and over. However, something else happens when this developer is given the chance to fail to seek a better solution and grow. They become better problem solvers and superior critical thinkers. If a paradigm shift happens in one developer's problem-solving ability other developers on the team should question and tear apart the new ideas in peer reviews. The programming meritocracy will accept the better solution and the growth from the prevailing ideas will proliferate.

  This is a note to those new developers facing imposter syndrome and developers in a time crunch on deadlines. Do not compromise your solution implementation to win in the short term and look deeper into the problem. Reach for your colleagues, explore unexpected implementations, and read more documentation. The short term losses lead to long term learning experiences. The compounding of knowledge from these learning experiences cannot be understated. Before you know it you are contributing to a more scalable and dynamic development mindset in your team and company.
Mosquitto: Connection lost (32109) - exceeded timeout disconnecting, denied access by tcpd
Published: 2020-12-25 07:05:31

To resolve these issues follow these links:
https://stackoverflow.com/a/48232717/9363206
https://stackoverflow.com/a/39679434/9363206
https://medium.com/@muhammadtriwibowo/set-permanently-ulimit-n-open-files-in-ubuntu-4d61064429a
Feature reveal for my JS library (HotTea); Typed objects.
Tags: javascript, watercooler, hottea, webdev
Published: 2020-12-25 06:44:35

I'm adding typed objects to JS in HotTea (along with the promised "real classes").

This is how they look so far:
```javascript
je = TypedObject({
  "name": String,
  "age": Number
});

je.name // null
je.age // null


je.name = null; // That's fine.
je.name = new Object(); // TypeError: Type Object does not match required type String.
je.name = "John"; // TypeError: Type String does not match required type String.
// Gonna fix the message to account for primitive type names.


je.name = new String("John Egbert");
je.age = new Number(13);

je.name; // John Egbert
```
There also is a way to use primitive types as their `Object` equivalents (using the `strict` parameter):
```javascript
ds = TypedObject({
  "creator": Object,
  "name": String
}, false);

ds.creator = "test"; // Throws an error (because I still need to implement the proper behavior).
ds.creator = new String("Andrew Hussie");
ds.name = "Dave Strider";
```

I also do wanna be able to add a way to add new properties later on, but that's gonna be hard due to the current architecture. But, I hope you all are excited for HotTea!

<div>
##<b><center><b>Thanks for reading!<br/>Cheers!</b></center></b>
</div>
Java: Functions in your own class
Tags: java, tutorial, class, functional
Published: 2020-12-25 06:33:58

The best exmaple of usage of your own _class_ is to work with a database. Moreover, using functions in _class_ is more correct than simple functions anyway.

Let's work on the example of database.

**What is a database?**
Imagine some tour-company website, where you see many tour names, date, price and so on. So a simple _mas_ is not good enough to keep all this information.

**Step 1.**
**Decide which values you have.** 
Here:

Name of tour - _string_
Date - can be _string_ if you don't need to make changes, but better to use _calendar/date_.
Price - _double_

**Step 2.**
**Make a class with this values.** 
As we have a lot of string values, we need a _mas of string_, hopefully, everyone understand it.

`class Tour_Data_Base () {
String[] name = new String[any length];
String[] date = new String[any length];
double[] price = new double[any length];
...
}`

**Step 3.**
**Start making functions below the initialization.**
First function must be _reading_ so to complete our database.
Functions for reading you can find in previous articles, but here there is a little difference.
It is incorrect to write just the name of variable, cause it is in your class, so you must write the "direction"

Instead of `name=...;` write `this.name=...;`


**Step 4.**
**Call functions written in your class correctly.**
Initialize the object of your class.

`Tour_Data_Base data = new Tour_Data_Base();`

If your function is with empty brackets, then when you call it, your brackets are also empty.

`void Read_File () {
... }
`

_In Main:_

`data.Read_File();`

If the brackets are not empty, then in the Main function, when you call a class function, they are also not empty.

`void Read_From_Console (String name, String date, double price) {
... }`

**A small tip:** _name_ that you send to a class function is not the same with _name_ initialized in your class function.
So here you have to initialize this variables (_String name, String date, double price_) in Main to send to the class function.

`Scanner in = new Scanner(System.in);
String name = in.nextLine();
String date = in.nextLine();
double price = in.nextDouble();
data.Read_From_Console(name,date,price);`

I hope it was useful for those, who want to make their first steps. If you have any questions, write me anytime.

Good luck in your job!
Kobi Wine Mastery on masterykobiwine
Published: 2020-12-25 06:33:25

Đến Kobi Wine Mastery, bạn sẽ tới với một xứ sở rượu vang cực kỳ đa dạng,phong phú có chất lượng cam kết tuyệt đối. Của hàng chúng tôi kinh doanh các loại rượu nho đủ mẫu mã, đủ nguồn gốc ở mọi nơi trên toàn cầu. Mỗi chai rượu vang đều được Kobi Wine Mastery lựa chọn và bảo quản cẩn thận trước lúc tới tay người tiêu dùng. Mục đích cam đoan cho quý khách hàng được cảm nhận các loại rượu vang nguyên vẹn chất lượng hoàn hảo nhất có thể.

Xem thêm tại: https://mastodon.top/@masterykobiwine
Best Deep Learning Courses on Coursera in 2021
Tags: deeplearning, machinelearning, datascience
Published: 2020-12-25 06:04:28

**Coursera** has a wide range of **Machine Learning and Deep Learning courses**, but many people get confused while choosing the deep learning course on Coursera. That’s why I thought to list some Best Deep Learning Courses on Coursera. So give your few minutes and find out Best Deep Learning Courses on Coursera for you.

##**Best Deep Learning Courses on Coursera**

But before I discuss the deep learning courses, I would like to tell you **Why Deep Learning is more powerful than machine learning?**

##**Why Deep Learning?**

The main three reasons for using Deep Learning are-

1. Deep Learning gives excellent results on large datasets. But Machine Learning algorithms fail to process **huge datasets.** Machine Learning can work only on **small datasets.** This is the limitation of Machine Learning. But Deep Learning can easily perform operations on large datasets.

2. In Machine Learning, you need to feed all **features manually** to train the model. But Deep Learning **automatically extracts** all the features. This makes Deep Learning much powerful than Machine Learning. Because manual feeding is a time-consuming process, especially if you have a large dataset.

3. Machine Learning can’t solve **complex real-world problems.** But Deep Learning Algorithms can easily solve real-world problems. That’s why many fields are using Deep Learning algorithms over Machine Learning.

I hope now you understood the importance of deep learning. Now without further ado, let’s start finding the **Best Deep Learning Courses on Coursera-**
**[Click to continue reading...](https://www.mltut.com/best-deep-learning-courses-on-coursera/#1-deep-learning-specialization)**
VUE001 Hello World in Vue
Tags: vue
Published: 2020-12-25 05:58:30

# What is Vue.js ?

参考它的官网： cn.vuejs.org

# Hello world

## 引入Vue

最直接的方法还是在html页面中引入js文件：

```html
<head>
  <meta charset="UTF-8" />
  <title>Vue start</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
```

## 初始化Vue

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

使用Vue主要分为两步：

1. 指定Vue的控制区域
2. 指定对应需要渲染的数据
3. 渲染数据到页面

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Vue start</title>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    {{ message }}
  </div>
</body>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        message: "Hello, Vue World!"
      }
    }
  })
</script>

</html>
```

以上代码首先引入了Vue：`var app = new Vue({})`，然后指定了Vue的控制区域：一个id为app的`<div>`标签，然后给定了数据`message: 'Hello Vue!'`，最后，通过插值语法渲染数据到页面上：`{{ message }}`。

注意，很多基础教程中，Vue里面的data的值直接给的是一个对象，如下所示，但是当以后使用Vue组件的时候，data的值一般都是函数，这里我们直接一步到位。

```html
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: "Hello, Vue World!" // 直接使用一个对象
    }
  })
</script>
```
React createContext with useReducer TypeScipt
Tags: react, javascript, webdev
Published: 2020-12-25 05:33:20

---
title: React createContext with useReducer TypeScipt
published: true
description: exploring how to use userReducer with React context APIs.
tags: #react, #javascript, #webdev 
cover_image: https://jdlt.co.uk/images/blog/fishing-hooks.png
---

in this tutorial, I'll be exploring the React Context APIs for state management with `useReudcer` hook. we don't need to install any third-party library or some stuff, this is all the core feature. so let's right get into that!


First create a folder under `src/` named `state` like so `src/state`. and then we need two files `StateProvider.tsx`, and `reducer.ts`. 

![Screenshot from 2020-12-25 05-08-30](https://dev-to-uploads.s3.amazonaws.com/i/72xlnrdu5955cqwtpdlb.png)
 

now, write the below code inside `StateProvider.tsx` file

```ts
import React, { createContext, useContext, useReducer } from "react";
import { reducer, initialState, State } from "./reducer";

const AppContext = createContext<any>(null);

interface Props {
  children: JSX.Element | JSX.Element[];
}

export const StateProvider: React.FC<Props> = ({ children }) => (
  <AppContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </AppContext.Provider>
);

export const useStateValue = () => useContext(AppContext);

```


import the context API and wrapping the child components.


#### Reudcer.ts

```ts
export const actionTypes = {
  INCREMENT: "INCREMENT",
};

export interface State {
  count: number;
}

export const initialState: State = {
  count: 0,
};

export const reducer = (state = initialState, action: any) => {
  switch (action.Type) {
    case actionTypes.INCREMENT:
      return {
        ...state,
        count: state.count + action.count,
      };
    default:
      return state;
  }
};

```

creating reducer function and conditionally checking the Type.


#### Wrapping out <App />

We need to wrap out the `<App />` component so that we can access the state globally.


`/src/index.tsx`
```jsx
  <React.StrictMode>
    <StateProvider>
      <App />
    </StateProvider>
  </React.StrictMode>,
```


#### Access and Dispatch

now you can access the state and dispatch it easily using the `useStateValue` function as a hook

```ts
import React from "react";
import { useStateValue } from "./state/StateProvider";
import { actionTypes } from "./state/reducer";
import "./App.css";

function App() {
  const [state, dispatch] = useStateValue();
  console.log(state);

  const incrementHandler = () => {
    dispatch({
      Type: actionTypes.INCREMENT,
      count: 1,
    });
  };

  return (
    <div className="App">
      <button onClick={incrementHandler}>Add +</button>
      <h2>{state.count}</h2>
    </div>
  );
}

export default App;

````

git repo: https://github.com/lifeeric/react-context-with-useReducer/tree/master

#### Thank

If this post helps you, make sure to share with your friends, family, colleague, and co-worker.

I'm currently Looking for Jobs, If you have an opportunity for me, please consider me.
https://ericgit.me
A tool for managing VS Code code snippets
Tags: vscode, productivity, code, snippet
Published: 2020-12-25 05:20:08

---
title: A tool for managing VS Code code snippets
published: true
description: If you are using VS Code and finding a way for managing your code snippets, you are in the right place!
tags:

//cover_image: https://direct_url_to_image.jpg
---

When you realized you have typed some codes 100 times, you should save it as a code snippet. For example, I made a snippet for hapi route, when I type `hapi:route` it will trigger intellisense and then generate the router boilerplate code for me.

https://dev-to-uploads.s3.amazonaws.com/i/u1zwukev53co6g3pnlma.gif

It hard to write and maintain the VS Code code snippet because the code snippet was in a JSON file. So I wrote a tool to generate this JSON file for me, and I need only write the snippets in a folder.

## The tool

The tool called `snp` (which means snippet). You can install it by curl:

```
$ curl -sf https://gobinaries.com/djyde/snp | sh
```

It is written in Go so it can run on many platforms, include Windows.

## Create your snippets

You can create a folder to organize all your code snippets now:

```
$ mkdir snippets
$ cd snippets
```

Then you can create a file with `.snp` extension. The file name would become the trigger text.

For example, I want to write a hapi route snippet, now I 
create a `hapi:route.snp` file:

```
$ touch hapi:route.snp
```

```js
// hapi:route.snp
---
scope: typescript,javascript
description: hapi route
---

server.route({
  path: '$1',
  method: '${2|GET,POST,PUT,DELETE|}',
  async handler(req, h) {
    $0
  }
})
```

As you can see, `.snp` file is just a file that contains a front matter and the code snippet.

> If you are not familiar about the VS Code code snippet syntax, please see https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax

Run `snp -u`, now go to VS Code and type `hapi:route`, you will see the magic:

![hapi:route snippet](https://dev-to-uploads.s3.amazonaws.com/i/bbsi908ji12xv06364vy.png)

## Conclusion

You can now use `snp` to manage your VS Code **NATIVE** code snippets, instead of using some code snippet manager apps that only help you copy and paste.

See more on https://github.com/djyde/snp

my personal snippets: https://github.com/djyde/snippets