teleren/devto huggingface dataset:
How to Integrate React Redux + Nodejs/Express RestAPIs + Mongoose ODM – MongoDB CRUD example
Tags: react, node, mongoose
Published: 2021-03-29 16:00:57

https://grokonez.com/frontend/react/how-to-integrate-react-redux-nodejs-express-restapis-mongoose-odm-mongodb-crud-example

How to Integrate React Redux + Nodejs/Express RestAPIs + Mongoose ODM - MongoDB CRUD example

In this tutorial, we will build React Redux Http Client & Nodejs/Express RestAPIs Server example that uses Mongoose ODM to interact with MongoDB database and React as a front-end technology to make request and receive response.

Related posts:
– <a href="https://grokonez.com/node-js/crud-restapis-with-nodejs-express-mongodb">Crud RestAPIs with NodeJS/Express, MongoDB using Mongoose</a>
- <a href="https://grokonez.com/frontend/how-to-connect-react-with-redux-react-redux-example">How to connect React with Redux – react-redux example</a>

<!--more-->
<h2>Technologies</h2>
– Webpack 4.4.1
– React 16.3.0
– Redux 3.7.2
– React Redux 5.0.7
– axios 0.18.0

– Node.js/Express
– Mongoose ODM

– MongoDB
<h2>Overview</h2>
<img src="https://grokonez.com/wp-content/uploads/2019/01/react-redux-http-client-nodejs-restapi-express-mongoose-mongodb-overview-1.png" alt="react-redux-http-client-nodejs-restapi-express-mongoose-mongodb---overview-1" width="395" height="611" class="alignnone size-full wp-image-16438" />
<h3>1. Nodejs/Express Server</h3>
<img src="https://grokonez.com/wp-content/uploads/2019/01/react-redux-http-client-nodejs-restapi-express-mongoose-mongodb-backend-architecture.png" alt="react-redux-http-client-nodejs-restapi-express-mongoose-mongodb---backend-architecture" width="701" height="325" class="alignnone size-full wp-image-16439" />
<h3>2. React Redux Client</h3>
<img src="https://grokonez.com/wp-content/uploads/2019/01/react-redux-http-client-nodejs-restapi-express-mongoose-mongodb-react-redux-client.png" alt="react-redux-http-client-nodejs-restapi-express-mongoose-mongodb---react-redux-client" width="695" height="408" class="alignnone size-full wp-image-16440" />

For more details about:
– Redux: <a href="https://grokonez.com/frontend/introduction-to-redux-a-simple-practical-redux-example">A simple practical Redux example</a>
– Middleware: <a href="https://grokonez.com/frontend/react/react-redux-firebase-crud-operations-example#Redux_Thunk">Middleware with Redux Thunk</a>
– Connecting React with Redux: <a href="https://grokonez.com/frontend/how-to-connect-react-with-redux-react-redux-example">How to connect React with Redux – react-redux example</a>
<h2>Practice</h2>
<h3>1. Node.js Backend</h3>
- Project structure:

<img src="https://grokonez.com/wp-content/uploads/2019/01/react-redux-http-client-nodejs-restapi-express-mongoose-mongodb-nodejs-project-structure.png" alt="react-redux-http-client-nodejs-restapi-express-mongoose-mongodb---nodejs-project-structure" width="199" height="336" class="alignnone size-full wp-image-16441" />

https://grokonez.com/frontend/react/how-to-integrate-react-redux-nodejs-express-restapis-mongoose-odm-mongodb-crud-example
From Director to Engineer
Tags: webdev, management
Published: 2021-03-29 15:55:35

I recently made the personal choice to change positions. At [MURAL](https://dev.to/mural), I joined as Director of Engineering for the Platform Pillar. I've been Director of Engineering at [MURAL](https://mural.co) for just over 9 months and I love the job, and it's super rewarding. My team and I built a whole pillar and everyone is delivering. There is much work to do, but we got some serious shit done. I can't really express it any other way. We got shit done.

To be honest, I'll have to be terse, but if you read this and you have questions feel free to reach out on [Twitter](https://twitter.com/jakecodes).

The reason to join startups vs big co is because you can have a bigger impact. There are bigger companies out there, and I selfishly desire to be a very large part of the success of a something, even if it's small. I also desire to be one of the team, where the task may ambitious and the goals ambiguous, but we all are working our hardest to figure it out. As if others don't do that at Big Co's! I am sure they do.

A Director position is a sought after position, so you might think I'm nuts for switching roles. Ultimately I see things that need to fixing, and I want to have an even more direct impact.

I've been given the opportunity to work on the biggest problems at MURAL as an Engineer. This is really my dream job. To see problems, know the solution and have the freedom to fix them. At other companies, blockers may stand in your way of fixing big problems. It can kill a company if you can't execute quickly with high quality. I've been super lucky to have great mentors over the years. I've gained one often overlooked skill:

It's one thing to know how to solve a problem, it's a completely different and (in my opinion) harder to execute big problems in a way that both brings people together and drives things forward. It's even harder to do all this with urgency. You can always bring people together by moving half the speed of smell, but who has time to move that slow?

My new title is officially title is Principal Engineer, but really I see it as a way to use my skills as a solid dev to get shit done right away. 

Anyways. Back to work.
Create simple and stylish notifications in React using react-toastify
Tags: react, javascript, tutorial, webdev
Published: 2021-03-29 15:52:26

## Intro

While working on my latest side project, [Code Anagrams](https://code-anagrams.netlify.app), I wanted to display a notification whenever a user correctly answered an anagram as well as to display error messages a little more elegantly. At my current job, we use [react-toastify](https://www.npmjs.com/package/react-toastify) for notifications and alerts, so I decided to reach for this package again and document my journey of configuring and implementing this particular solution.

## Tutorial

Let's get started then. 

More often than not, we need to implement notifications/alerts in multiple places within our codebase, so this is a perfect use case to create a util - let's call it "toast" - that we can simply import and use in various components.

In a `utils` folder, create a folder called `toast` and add an `index.js` file. For our first step, we will need to install our npm package:

```
npm i react-toastify --save
```

and import it (along with associated CSS) to our `index.js` file:

```
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

```

Fortunately, react-toastify provides you with a ton of versatility and you can configure your notifications in various ways, which is great. But for the purposes of this tutorial, I'll just set a couple of defaults for `autoClose` and `position`:

```
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

toast.configure({ autoClose: 2000, position: toast.POSITION.BOTTOM_CENTER });

```

Next, let's create our functions that render a successful notification (green) and an error alert (red):

```
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

toast.configure({ autoClose: 2000, position: toast.POSITION.BOTTOM_CENTER });

// add more config via the options object
const successToast = (message, options = {}) =>
  toast.success(message, {
    ...options,
  });

const errorToast = (message, options = {}) =>
  toast.error(message, {
    ...options,
  });

export { successToast, errorToast };

```

And there we have it! You can now import this util into your component like this:

```
import { successAlert, errorAlert } from "./utils/toast";

successAlert("Hey there!");
errorAlert("Oops, something went wrong!");

```

## Conclusion

In this post, we created a simple, stylish and shareable toast util that should help with implementing notifications and alerts in our web applications. 

If you feel like using `react-toastify` in your app after reading this post, I strongly recommend heading over to the [demo page](https://fkhadra.github.io/react-toastify/introduction/) and playing around with the different configurations. 

Thanks for reading! 👋
Publicando aplicações serverless com github actions
Tags: serverless, node, aws, github
Published: 2021-03-29 15:52:18

Publicar uma aplicação serverless framework com github actions é uma tarefa bem simples, basta você criar um arquivo de deploy na raiz do seu projeto

Ok mas como fazer isso?

Primeiro você deve criar uma pasta chamada .github na raiz do seu projeto
```sh
mkdir .github
```
Depois navegar até essa pasta e criar outra chamada workflows onde vão ficar seus arquivos de deploy
```sh
cd .github
mkdir workflows
```
Dentro da pasta você tem que criar um arquivo .yml que vai ter os as configurações para publicação do seu projeto, no meu caso criei um arquivo chamado serverless-publish.yml
```sh
touch serverless-publish.yml
```
Dentro do arquivo você vai copiar as seguintes configurações

```yml
name: serverless-deploy

on:
  push:
    branches:
      - master

jobs:
  deploy:
    name: deploy
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm ci
    - name: serverless deploy
      uses: serverless/github-action@master
      with:
        args: deploy --stage devel
      env:
        # SERVERLESS_ACCESS_KEY: ${{ secrets.SERVERLESS_ACCESS_KEY }}
        # or if using AWS credentials directly
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
```

Depois de criado o arquivo serverless-publish.yml dentro de .github/workflows

Agora é só configurar as variáveis de ambiente 

![Config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bu0qlfnob9kdthlobn0.PNG)

Pronto sempre que fizer um commit na master sua aplicação vai ser publicada na AWS automaticamente 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ieomv14sjwq9u8bt9u3w.PNG)
Polishing your GitHub profile landing page 🧹
Tags: github, webdev, portfolio
Published: 2021-03-29 15:49:43

I've had a GitHub account since 2014 and I had no idea until now you could create a secret repo by typing your username to get a pretty nice readme on the landing page of your GitHub profile.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87xmb1j8oy6svq9qkavl.jpeg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5lnod9tv98l8f1ietsy.PNG)
Azure Devops Branching Policies
Tags: devops, azure, git, azuredevops
Published: 2021-03-29 15:39:20

{% youtube 2nukM2TzD1Q %}

Heres a introductory video to Branching Policies in Azure Devops. 

I briefly cover all the options given to you in Branching Policies. This way you can learn what you need to know and build the policy rules that makes most sense for your project.
Pausing Rust By Example
Published: 2021-03-29 15:36:42

I want to thank everyone who has been kind enough to follow this series on learning Rust through Rust by Example. 

The amount of time I want to put into making a quality blog series is at odds with my main goal of getting better at HTML, CSS, and Javascript. I need to dedicate more time to those languages instead of learning a new one. 

I look forward to coming back to this series in the future when I have more time!
Day 90 Of #100DaysOfCode: Overfitting and Underfitting
Tags: womenintech, codenewbie, 100daysofcode, beginners
Published: 2021-03-29 15:35:56

Today, is my 90th day of #100daysofcode and #python learning journey. 29th march pass out by writing blog for project, pushing to the GitHub. Did some some random works. 

And at the end of the day grasp knowledge from Datacamp regarding to the topic overfitting and underfitting and train test split. I really take joy with following image recognition code.
#Code
```python
# Import necessary modules
from sklearn import datasets
import matplotlib.pyplot as plt
# Load the digits dataset: digits
digits = datasets.load_digits()
# Print the keys and DESCR of the dataset
# Print the shape of the images and data keys
print(digits.keys())
print(digits.DESCR)
print(digits.images.shape)
print(digits.data.shape)

``` 
```python
# Display digit 1010
plt.imshow(digits.images[1010], cmap=plt.cm.gray_r, interpolation='nearest')
plt.show()

```
Output of above code is,
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nph00kzmg926xprsm9tm.png)
 <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 90 Of <a href="https://twitter.com/hashtag/100daysofcode?src=hash&amp;ref_src=twsrc%5Etfw">#100daysofcode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>Overfitting and Underfitting From [DataCamp](<a href="https://t.co/iA9NKAytnl">https://t.co/iA9NKAytnl</a>)<a href="https://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://t.co/2DVFtvfN8q">pic.twitter.com/2DVFtvfN8q</a></p>&mdash; Durga Pokharel (@durgacodes) <a href="https://twitter.com/durgacodes/status/1376553790451503106?ref_src=twsrc%5Etfw">March 29, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Sinatra Project
Published: 2021-03-29 01:00:27

It's the end of the second month of my online software engineering class, which means there's a final project due. This time I had to build a Sinatra application and, much like my last project, I had no idea what I would be designing it around. After much deliberation, I decided I would be making an application where a user can store their favorite wrestlers.

The process began with creating my users and wrestlers table, where users had a username and a password, and wrestlers had names, birthdates, belts, and special moves. Then I set up models for both tables, declaring their relationship: users have many wrestlers and wrestlers belong to users. 

Up next were the controllers. I created them for the wrestlers and users, as well as a session controller, all of which inherited from the application controller that had my helper methods and a route for my home page. I coded in the routes for logging in and out in my sessions controller, and the routes for signing up in my users controller. The wrestlers controller had the routes for creating, reading, updating and deleting wrestlers (good old CRUD). 

All that was left were the views to complete my requirements. I created the ERB files that pertained to each route I coded in. The new file has a form where a user can create a new favorite wrestler by inputting their information. After they submit their form, they're taken to the wrestlers route, which has a list of all the wrestlers a user has created. If you click on a wrestler, it shows all the information about them, which is generated from show ERB file. On this same page, a user can choose to edit information about that particular wrestler or delete them completely. 

I finished doing what I was required to do for my project, which did not take as long as it did for me to complete my CLI project last month. However, the page looked a little boring, so I decided to style it. I used a combination of Bootstrap and a CSS stylesheet to make my Wrestlr page (that's the name of the website) look much prettier. I spent most of my time stylizing the project than I did in doing the requirements. I had such a terrible time trying to make my create and edit forms look good that I decided to give up on it and submit as it was. The important thing is that it works right? All in all, this project was much easier to complete than my previous one and I had a good time doing it.
A simple configmanager program for assigning values to variables from a custom config file | Golang
Published: 2021-03-29 15:10:35

[GitHub Repo - configmanager](https://github.com/rrrcode9-golang-util/configmanager.git) 

This program `configmanager` reads a configuration file (*.conf) and assigns values to a struct defined by the user. This comes in handy when you want to assign some variables in golang program from a custom configuration file. The process is simple: import `configmanager`, create your struct with **exported** fields, create a `*.conf` file or a `default.conf` file in PWD, define the variables in the config file, pass the struct reference to `AssignConfiguration` method in `configmanager`; you are good to go.

### Configuration File Format

- Comments shall start with `#`

  ```bash
  # this is a comment
  Val = 5 # this is a comment
  ```

- All variables in the configuration file must start with `Caps Letter`

- Variable must be defined with a `field name` and a `value` separated with `=`

- If a variable is defined multiple times in a single configuration file, the bottom-most value of the corresponding variable is assigned

### Struct Definition

Each field of the user-defined struct shall be exported (First letter must be in caps), so that the same can be accessed by `configmanager` program to assign values to struct fields from config file.

Following types are supported for struct fields:

> - int64
> - float64
> - string
> - bool 

```go
type config struct {
	Val1 int64
	Val2 string
	Val3 bool
	Val4 float64
}
```

### configmanager usage

let's first create a file `main.go` .  Import `configmanager` from GitHub. We define a struct config with four fields: `Val1, Val2, Val3, Val4`. 

```go
package main

import (
	"fmt"
	"github.com/rrrcode9-golang-util/configmanager"
)

type config struct {
	Val1 int64
	Val2 string
	Val3 bool
	val4 float64
}

func main() {
	c := config{}
	configmanager.AssignConfiguration(&c)

	fmt.Printf("%+v\n", c)

}
```

`AssignConfiguration` method takes the reference of struct variable, and then the fields will be assigned with the values from the config file.

Now create a config file `default.conf` in the present directory. 

>Note: Alternatively, `*.conf` file can be created anywhere in the system and the same can be specified while running your program passing arguments as mentioned in `Notes` below.

```conf
# file: ./default.conf

Val1 = 40
Val2 = hello
Val3 = true
Val4 = 80.7
```

Now, run the following command:
```bash
$ go run main.go 

```

Output: `{Val1:40 Val2:hello Val3:true Val4:80.7}`

Notes: 


> Alternatively, the config file location can be specified using arguments with "--config-file-path" or "-f" and with path of config file.

```bash
$ go run main.go --config-file-path <path of config file>
or
$ go run main.go -f <path of config file>
```


> In case no config-file is specified, the `configmanager` program will search for `default.conf` file in the present working directory.





Thanks. I would appreciate your feedback/suggestions/comments.

### Follow Me :
[YouTube CodeFuture](https://www.youtube.com/channel/UCMat0Hlx67xwLrhIKRWMjEw)

#golang
connect microsoft dynamic365 using nodejs and axios
Tags: node, microsoftdynamic365, axios, crm
Published: 2021-03-29 14:57:50

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

# node-crm
connect microsoft dynamic365 using nodejs and axios

# packages
1. `adal-node`: Windows Azure Active Directory Authentication Library (ADAL) for Node.js. This library makes it easy for node.js applications to authenticate to AAD in order to access AAD protected web resources.
2. `axios`: Promise based HTTP client for the browser and node.js
3. `dotenv`: Dotenv is a zero-dependency module that loads environment variables from a `.env` file. To get the value use `process.env.VARIABLE_NAME`

# how to use
1. Download the zip files
2. add a `.env` file
3. add below variable with proper value
```
API_VERSION=version_of_your_api
APPLICATION_ID=your_api_application_id
AUTHORITY_HOST=your_api_host_url
CLIENT_SECRET=your_api_secret
TENANT=your_api_tenant
RESOURCE=your_api_url
```
4. Now, `npm i`
5. then, `npm start`

check on my git [repo](https://tinyurl.com/yz9p8kj9)
404 Error Page Design In Tailwind CSS
Tags: uiweekly, tutorial, tailwindcss, webdev
Published: 2021-03-29 14:54:00

404 Error pages are mostly used to show some errors like URL broke or page not found view side. So here we made a 404 error page in Tailwind CSS with the help of the Utility class.

On this page we used 2 buttons for home and contact us & also we used Gradient background colors. Also, we modify padding and margin classes to the responsive side. This is fully responsive for mobile and tablet views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/404-error-page-design-in-tailwind-css/)
GOlang URL shortener service using postgres, redis, bulma
Tags: go, showdev, gorm, redigo
Published: 2021-03-29 14:53:53

---
title: GOlang URL shortener service using postgres, redis, bulma
published: true
description: 
tags: golang, showdev, gorm, redigo
cover_image: https://raw.githubusercontent.com/adhocore/urlsh/main/tmpl/urlsh.png
---

You can use it via the mobile friendly web UI or automate it with API already provided. I'm also thinking of building a browser extension to shorten any URL in a click (context menu for example).

## Usage
Just visit [urlssh.xyz](https://urlsh.xyz). You can also integrate API for programmatic usage.

PS: https://urlssh.xyz/6OTMTS is short link to this article 😎

{% github adhocore/urlsh %}
Kruskal + Weave Maze
Published: 2021-03-29 14:51:44

Maze Generation.

I am adding an "impenetrable" maze around the main game that players may stumble onto.

I thought this would be straight forward. I implemented the easiest algorithm (back tracking) and then added code to solve the maze. That is when I discovered the easiest solution does not produce the branching variety I want.

So then I went on a deep dive into maze generation algorithms. This is a deep rabbit hole.

I've settle on the most interesting (and likely most difficult) algorithm: Kruskal + Weave.

You can see it in action here:
https://weblog.jamisbuck.org/2011/3/17/maze-generation-more-weave-mazes.html

Now I just need to graft the ruby logic into my existing c++ maze logic...
Part 1 video of live-coding in Perl and Mojolicious; Part 2 coming up
Tags: programming, perl, meetup, mojolicious
Published: 2021-03-29 16:08:00

---
title: Part 1 video of live-coding in Perl and Mojolicious; Part 2 coming up
published: true
date: 2021-03-29 14:35:58 UTC
tags: Programming,Perl,meetup,Mojolicious
canonical_url: https://phoenixtrap.com/2021/03/29/part-2-of-live-coding-in-perl-and-mojolicious/?utm_source=rss&utm_medium=rss&utm_campaign=part-2-of-live-coding-in-perl-and-mojolicious
series: Live-coding a web app in Perl and Mojolicious
---

Sunday’s live pair programming session with Gábor Szabó was a blast, so we’re doing it again **this Sunday, April 4**. Watch the video below, and [learn all about it and register here](https://perlmaven.com/course-management-app-in-mojolicious).

{% youtube _AInPp-dneQ %}

_(I really need to do a better job of looking at the camera.)_