teleren/devto huggingface dataset:
How to create Sidebar navigation menu in ReactJS with react router and framer-motion
Tags: react, javascript, webdev, beginners
Published: 2021-05-26 10:31:50

Hi there 👋,

Checkout this cool sidebar.

Here is the Demo Link:
https://react-sidebar.vercel.app/

I have created this using Styled-components, react-router and framer-motion for page transition. You can use this kind of sidebar in creating Dashboards.

For this project I have used these libraries,
▶️ reactjs
▶️ Styled-Components
▶️ react-router-dom
▶️ Framer-motion for page transition 

Here is the tutorial for this Sidebar menu! 

{% youtube 6HfMm9D4jpU %} 

> You can use this to learn or for your portfolio.

I haven't added drop-down menu yet but if you want it then you can add it and feel free to create more sections.  

Any suggestions are welcomed!

### Thanks For Reading😄

Feel free to visit my youtube channel: 
####[@CodeBucks](https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA)

### You might also like these website templates:

- A beautiful portfolio template in ReactJS => [here](https://codebucks.gumroad.com/l/hsTPD)
- NFT collection landing page in ReactJS => [here](- A beautiful portfolio template in ReactJS => [here](https://codebucks.gumroad.com/l/hsTPD))

Follow me on Instagram where I'm sharing lot's of useful resources!
####[@code.bucks](https://www.instagram.com/code.bucks/) 😉
useEffect with and without dependency array in react
Tags: react, webdev, womenintech, beginners
Published: 2021-05-26 10:22:32

When I was just starting with react, the *issue* I faced was, **useEffect** hook of *react* got called every time state or props got changed.

``` javascript

import React, { useState } from "react";
export default function App() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(0);
  React.useEffect(() => {
    console.log("useEffect called!");
  });
  return (
    <div className="App">
      <label>count </label>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        {count}
      </button>
      <hr />
      <label>data </label>
      <button
        onClick={() => {
          setData(data + 1);
        }}
      >
        {data}
      </button>
    </div>
  );
}

})
```
In the above snippet, there is no *dependency array* so this will be called *every time* if *state or props changes*.
To resolve this we can use *dependency array*.
``` javascript
//rest of the code is same 
 React.useEffect(() => {
    console.log("useEffect called!");
  },[data]); //adding dependency array
```
In the above snippet, there is a *dependency array* so this will only be called first when the component is being *mounted* and second if the dependency in that array, which is data, changes.
And also, there could be more than one dependency.
React useState hook is asynchronous!
Tags: webdev, react, hooks, javascript
Published: 2021-05-26 10:17:30

# Hello Developers 👋

#### I would like to share something I recently got to know, so the background is, in my project I was using **useState** value right after updating it and I was getting previous value(not updated value) and to my surprise I found out that **useState hook is asynchronous**

## what it is?
Basically, the thing is you don't get update value right after updating *state*.

## What is the work around/solution?
We can use the **useEffect** hook and add our state in the dependence array, and we will always get the updated value.

## Show me the code 🤩🤩🤩 

```jsx
import { useState } from "react";

export default function CountWithoutEffect() {
    const [count, setCount] = useState(0);
    const [doubleCount, setDoubleCount] = useState(count * 2);
    const handleCount = () => {
        setCount(count + 1);
        setDoubleCount(count * 2); // This will not use the latest value of count
    };
    return (
        <div className="App">
            <div>
                <h2>Count Without useEffect</h2>
                <h3>Count: {count}</h3>
                <h3>Count * 2: {doubleCount}</h3>
                <button onClick={handleCount}>Count++</button>
            </div>
        </div>
    );
}

```

* Here we have very simple and stright forward component.
* On button click we are updating two states and one state is dependent on other state.
* The *doubleCount* will be one step behind *count*.
* Check out the [Live Demo](https://use-state-is-async.vercel.app)

## Solving this issue 🧐🧐🧐

This can be easily solve with *useEffect* hook, let's see the code

```jsx

import { useState, useEffect } from "react";

export default function CountWithEffect() {
    const [count, setCount] = useState(0);
    const [doubleCount, setDoubleCount] = useState(count * 2);
    const handleCount = () => {
        setCount(count + 1);
    };

    useEffect(() => {
        setDoubleCount(count * 2); // This will always use latest value of count
    }, [count]);

    return (
        <div>
            <h2>Count with useEffect</h2>
            <h3>Count: {count}</h3>
            <h3>Count * 2: {doubleCount}</h3>
            <button onClick={handleCount}>Count++</button>
        </div>
    );
}

```

* Here, when ever count changes we are updating **doubleCount**
* Check out the [live Demo](https://use-state-is-async.vercel.app)

Closing here 👋👋👋
> This is **Shareef**.
> [Live demo](https://use-state-is-async.vercel.app/)
> [GitHub repo of this blog](https://github.com/shareef99/blogs/tree/master/react-usestate-is-async)
> [Stackover flow link](https://stackoverflow.com/questions/53898810/executing-async-code-on-update-of-state-with-react-hooks) for more info
> My [Portfolio](https://portfolio.shareef.vercel.app/)
> Twitter [ShareefBhai99](https://twitter.com/shareefBhai99)
> [Linkedin](https://www.linkedin.com/in/nadeem-shareef-7a8394182/)
> My [other Blogs](https://dev.to/shareef)
Automating my Portfolio
Tags: automation, github, react, portfolio
Published: 2021-05-26 10:15:45

---
title: Automating my Portfolio
published: true
description: How did I create my portfolio and automate hosting with GitHub
tags: automation, github, react, portfolio
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwxzcesytwapxk3113bm.png
---
# Goal

So, I've been thinking to showcase my skills in a single go and I've been meaning to use various new features of GitHub like actions, projects, static hosting, etc., and doing all these together in creating my own portfolio seems like a good idea to me.

> “Talk is cheap. Show me the code.” ― Linus Torvalds

[Source Code](https://github.com/immnk/immnk.github.io)

## Process
I have written a React application with custom `webpack` config, tests that can verify code on every pull request to make sure nothing breaks, automated release on main(develop) branch to `gh-pages`(`master` branch as this default repository).

Since Github can host static content for <gituser>.github.com on master, my deployment was made to the master branch.

I made sure my CI reports to Coveralls, code factor, and integrate `dependabot` to raise automatic PRs for updating dependencies. Each PR runs test cases using GitHub Actions and a dispatcher workflow that can deploy code to master branch after building the code. I also run `semantic release` to automate much of release management(generating tags, changelogs, source code etc.,)

## End Result
Overall it is a fun project for me to use so many tools to do something cool.

[![GitHub source](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygvec660xm8vnd0x0mrb.png)](https://github.com/immnk/immnk.github.io)
Why MEAN Stack is the Most Preferred Choice for Web & Mobile App Development?
Tags: angular, node, javascript, android
Published: 2021-05-26 10:15:43

In this digital era, the importance of customized web and mobile apps has increased significantly. But as competition intensifies, it is necessary for companies to come up with feature-rich apps to match world-class standards and attract more people. Therefore, if you want to develop an app from scratch, the [website development company](https://www.suriainternational.com/)

needs to use a consistent software stack. All you need to have the right set of tools, resources, and a standardized development process to build a customized and user-friendly application.

MEAN stack is such a stack that can meet your business needs effectively while offering the benefits of advancing technology in customized web and mobile apps. MEAN acronym stands for MongoDB (a database), Express (backend framework), AngularJS (Front-end framework), and Node.js (backend runtime environment). Though all these four technologies were developed separately, they form one of the strongest technology stacks together as MEAN stack.

Every reputed [AngularJS development company](https://www.suriainternational.com/angularjs-development-company/) and Node.js development services provider offer MEAN stack technology. Let’s understand why MEAN stack is ideal for a web app or mobile app development project. But, before moving to the benefits of the MEAN stack, let’s go through the importance of its various technologies.

Importance of MEAN Stack for Web and Mobile App Development

JavaScript binds all four technologies in the MEAN stack. Here are the key features that make this technology stack highly popular among developers and entrepreneurs alike.

Same Language

One of the most important benefits of choosing MEAN stack for web app development is it offers the same language JavaScript for both front-end and back-end development. Developers can write neat codes in the MEAN stack. Node.js takes care of the server-side coding, and AngularJS is useful for the client-side coding. This also makes it possible for developers to reuse the codes from backend to frontend.

Cost-effectiveness

When companies hire MEAN stack developers, they need not go for hiring multiple developers, because MEAN stack includes all the aspects of development, and the team of Java developers can do a better collaboration for accomplishing the web and mobile app projects on time. This can enable companies to save bucks on app development costs and developers’ charges on an hourly basis. In a way, MEAN stack development remains cost-effective for the companies.

Read More: https://www.suriainternational.com/mean-stack-is-the-best-technology-for-web-development/
IT lessons from the aviation industry
Tags: devops, video, podcast, incidentresponse
Published: 2021-05-26 10:10:38

{% youtube -i-zRZ8nRao %}

John Goerzen is a staff engineer at Fastly, and an amateur pilot. In this episode, we talk about some of the parallels between aviation and IT, as it relates to risk management, incident response, and the mentalities that can lead to problems.  We discuss the concept of an accident chain; the idea that most incidents don't have a single cause, but a long list of contributing causes. We discuss the importance of blameless postmortems for improving how we respond to failures, and the human aspect of incident prevention.
React Instant Chat App Using Node.js and Socket.io
Tags: react, node, socketio, webdev
Published: 2021-05-26 10:00:07

Hi, I published a post and shared my 9 hours free social media application tutorial for free. But I decided to separate the application part and the chat server part. That because some of you people have already known how to create a MERN Stack application but struggle with web socket applications.

🔥 [visit the full tutorial post](https://dev.to/safak/social-media-app-using-mern-stack-4ic6)

and, for those who finished the application part or just interested in the messenger part:

# React Chat App Using Socket.io
In this section, we are going to design a React messenger component and some additional routes in Node.js to get and post chat messages. And finally you are going to learn how to use Socket.io to send instant messages and notifications.

{% youtube HggSXt1Hzfk %}

I hope it was useful. If you want to learn more about web development and practice with real-world projects, you can check my channel out.

🔥 [Lama Dev Youtube Channel](https://www.youtube.com/c/lamadev)
⚡️ [Lama Dev Facebook](https://www.facebook.com/lamaWebDev)
👾 [Source Code](https://github.com/safak/youtube/tree/chat-app)
Catch before it burst.
Published: 2021-05-26 09:47:27

## Redis TTL monitoring and alerting Service

The Service to monitor Redis keys created without any Time To Live (TTL) and alerts based on different configurations 
provided by different teams is always better. 

_Note_:
**NOT FOR PRODUCTION ENVIRONMENTS**. Preferred only on Testing/Staging environments.

### Motivation

To stop or try to alert developers before persisting keys to Redis with no TTL.

Most of the time, the reason will be keys with no Time to live(TTL). That means, the data exists forever until we delete it explicitly.

## How to use

1. Duplicate `env.sample` file and fill with values.
2. Move this file to `services` folder.
3. Run `sh run_from_bash.sh`

## How it works

1. Crontab runs once a day. Can be configured in the file called `crontab`.
2. Each file in `services` folder is picked.
3. Evaluate TTL missing keys based on configuration.
4. Notify teams about the TTL missing keys.

## Run Using Docker
1. ```docker build --build-arg env_host=hostname --build-arg env_port=30363  -t redis-ttl-missing-alert-service.```
2. ```docker run redis-ttl-missing-alert-service:latest```

## Start Container Using Docker
1.```docker build --build-arg env_host=hostname --build-arg env_port=30363  -t redis-ttl-missing-alert-service.``` 

2.```docker container create redis-ttl-missing-alert-service:latest```

3.```docker start #container_name```

[Developed with :love](https://github.com/jango89/redis-ttl-missing-alert-service)
6 Different Color Properties in CSS that you must know 
Tags: css, html, webdev, programming
Published: 2021-05-26 09:38:39

The colour property is used to set the text context and foreground colour of an element.
The color property can be specified in **6 different ways** . Each one of them provides has some difference from the other.
### Example : Following Code

![h2 style=colororangered;orangeredh2 h2 style=color#ff6347;#ff6347h2 h2 style=colorrgb(255, 99, 71);rgb(255, 99, 71)h2 h2 style=colorhsl(9, 100%, 64%);hsl(9, 100%, 64%)h2 h2 style=colorrgba(255, 99, 71, 0.7)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0oqxr5yo1yu9bc8p8r7p.png)
### Following Output 
![Untitled design (3)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7d9370ptjpklkf5oxevt.png)
## 1. By  using name
The color keywords all represent solid, plain colors, without transparency. Eg. red, blue, light grey, etc.
## 2. Using rgb
**RGB stands for Red, Green and Blue** . It is a color model where combination of red, green and blue form a color. The intensity of each color has value ranging from **0 to 255**. This provides very large number of colors dataset.
**Eg. the RGB value for red is: rgb(255, 0, 0) and for voilet is: rgb(238,130,238).**
## 3. By hex code
The colors can be represented by 6 digits hexadecimal code. The codes are made using the **3 colors(Red, Green and Blue)**. First 2 digits are red, next 2 are green and last 2 are blue. So, the syntax for **Hex Code is: #RRGGBB**.
For each hexadecimal value between 00 - FF is similar to 0 - 255.
**Eg. #000000 is black and #FFFFFF is white.**
##4. Using hsl
The color can also be specified using the **HSL (Hue, Saturation and Lightness)** components.
* Hue, is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and
240 is blue.
* Saturation, represents the amount of saturation in the color. It is a percentage value, 0% means a shade of grey, and 100% is the full color.
* Lightness, represents the amount of light in the color. It is also a percentage,
0% is black, 50% is neither light or dark, 100% is white.

## 5. Using rgba
**RGBA (Red, Green, Blue, Alpha)** is an extension of RGB, provided with alpha
transparency. This alpha value determines the opacity of the RGB defined color.
The alpha parameter is a number between 0.0 (transparent) and 1.0 (opaque).
**Eg.rgba(255, 0, 0, 0.6) is a red color, with 0.6 opacity will have the color.**
## 6. Using hsla
**HSLA (Hue, Saturation, Lightness, Alpha)** is also an extension of HSL, provided with alpha transparency. The alpha value and property is same as that in RGBA.
**Eg. hsla(0, 100%, 50%, 0.6) is also a red color with 0.6 opacity and have same color.**
Follow me on Twitter https://twitter.com/haarsh01 to get more web development related content .
Why do I keep getting this weird error when trying to load an image?
Tags: go, c, gamedev, help
Published: 2021-05-26 09:25:29

So I'm trying to make a game in GoLang using [Raylib Go (Go bindings of a C library with the same name)](https://github.com/gen2brain/raylib-go).

I'm using a temporary variable to test if I can load a texture (I'm only gonna show the one line, as that's the only thing that makes the program crash):
```golang
var _ rl.Texture2D = rl.LoadTexture("./rsrc/textures/logo.png");
```
Yes, the path "`./rsrc/textures/logo.png`" exists (relative to the executable's default directory).
After putting that in, I ran two commands in Command Prompt (Windows 10)
```
C:\Users\Administrator\Desktop\Projects\Go\games\RuntDeale>go build ./rsrc/code
C:\Users\Administrator\Desktop\Projects\Go\games\RuntDeale>code
```
<br/>
After running that last command, no window appeared, and the program had seemed to have ended.
But I got this lovely jumble of text printed to me:
```
INFO: FILEIO: [./rsrc/textures/logo.png] File loaded successfully
INFO: IMAGE: [./rsrc/textures/logo.png] Data loaded successfully (76x17)
Exception 0xc0000005 0x8 0x0 0x0
PC=0x0
signal arrived during external code execution

github.com/gen2brain/raylib-go/raylib._Cfunc_LoadTexture(0x14d740b1bb0, 0x0, 0x0, 0xc000000000)
        _cgo_gotypes.go:4223 +0x54
github.com/gen2brain/raylib-go/raylib.LoadTexture(0x972c59, 0x18, 0x0, 0x0, 0x14d00000000)
        C:/Users/Administrator/go/pkg/mod/github.com/gen2brain/raylib-go@v0.0.0-20210227124741-9d258bad6516/raylib/textures.go:69 +0x95
main.main()
        C:/Users/Administrator/Desktop/Projects/Go/games/RuntDeale/rsrc/code/main.go:28 +0xa5
rax     0x700000001
rbx     0x2a527ffaf0
rcx     0xde1
rdi     0x11
rsi     0x4c
rbp     0x7
rsp     0x2a527ff978
r8      0x11
r9      0x7
r10     0x0
r11     0x246
r12     0x1
r13     0x978368
r14     0x37
r15     0xffffffffffffffff
rip     0x0
rflags  0x10246
cs      0x33
fs      0x53
gs      0x2b
```
It says the file loaded successfully, but then it has some kind of error, and doesn't really make any sense.

What does this mean, and how can I fix it?
<br/>
<br/>
Thanks!
Cheers!
Laravel Notification Message PopUp Using Toastr Js Plugin Tutorial

Tags: laravel, php, programming, tutorial
Published: 2021-05-26 09:17:19

Hi Friends,

Today, i will learn you how to integrate toastr js plugin notification popup in any laravel version from scratch. toastr plugin provide us success message notification, info message notification, warning message notification, error message notification that way we can integrate notification with good layout.

Laravel have also provide different different package for notification but i use toastr js plugin, that provide nice layout and so much pretty interesting.

We need to integrate one time toastr jquery code for notification, then we can manage utilizing session. In this example you can easily understand how to implement and use.

In this article we create route,UserController and blade file let's implement and here we go jump to full example follow my bellow step

So let's start to the example and follow to the my all step.
more..

https://codingtracker.blogspot.com/2021/05/laravel-notification-message-popup.html
5 Reasons why we chose to transpile to SolidJS instead of React
Tags: showdev, javascript, solidjs, react
Published: 2021-05-26 09:02:03

Choosing a relatively young framework with a limited support over Facebook's giant may seem like craziness. As a core developer at [GlueCodes Studio](https://www.glue.codes), I was the one pushing towards taking the risk. The decision has been mainly driven by [Solid's](http://solidjs.com/) build-time DOM diffing flavoured with a very simple API. I really believe it's a natural replacement of Virtual DOM. I always believed that taking the compromise of re-rendering the whole tree when the app state changes just for a "developer's convenience" is a matter of time. There was [Svelte](https://svelte.dev/) on radar, but I'm rather in favour of JSX, especially because we already provide an abstraction layer for templating using HTML with our meta-framework specific directives. So, I thought it would be awesome to write UIs with this higher level of abstraction and export to more flexible JSX and if you wish, continue development out of our tool. Check out the [docs](https://www.glue.codes/docs-templating-htmlDirectives.html) for more info.


Here are the 5 points:

1. It does DOM diffing at build-time.

2. It's function-first and it has a very clean API. Much of it is similar to [React](https://reactjs.org/).

3. It doesn't recursively call the component every time the app state changes. I mean the body of the function which returns JSX is called just once, making local state management simpler and more natural.

4. It is primary made for JSX, but there is also HyperScript available which can be handy if you need DOM diffing at run-time. In our case, it was useful for Live Preview without compilation.

5. A component returns a DOM element!

:muscle: Bonus: It's owned by the community and the core team is very open and responsive.


Links: 

[SolidJS](http://solidjs.com/)

[GlueCodes Studio](https://www.glue.codes)


Let me know what you think.
Đơn vị đóng tủ bếp tại Đà Nẵng chuyên nghiệp
Published: 2021-05-26 08:53:17

Bạn đang muốn tìn đơn vị <a href="http://noithatgodn.com/noi-that-phong-bep/dong-tu-bep-go-cong-nghiep-dep-tai-da-nang-voi-gia-tot-nhat-34.html">thi công tủ bếp tại Đà Nẵng</a> cho nhà mình?
Bạn không biết bắt đầu từ đâu?
Và khi bạn tình cờ xem được bài viết này thì bạn đừng nên bỏ lỡ đơn vị đóng tủ bếp đẹp tại Đà Nẵng được nhiều khách hàng ưa chuộng và tìm đến như Nội Thất ĐN chúng tôi
Vì sao ư?
1.Thi công tại xưởng không qua trung gian nên giá hợp lý
2.Thiết kế chuyên nghiệp,có thể thiết kế mẫu theo ý của khách hàng muốn gì
3.Thợ có tay nghề chuyên môn cao,nhiều năm kinh nghiệm qua nhiều đơn hàng từ chung cư đến nội thất văn phòng,hay showroom,nhà phố
4.Lên kế hoạch bản vẽ thi công rõ ràng thống nhất với khách hàng mới thi công điều này sẽ tốt với cả hai bên khi thực thi và sau khi hoàn thành sẽ tránh được trình trạng giao hàng mà khách không vừa ý.
Đấy cũng là lý do vì sao chị khách hàng mới bên em tâm sự."Giá như chị biết đến đơn vị mấy em sớm thì chị không bị điên cái đầu vì bị mất tiền mà khi nhận hàng thì không giống mẫu trả về một ít,1 số giữ lại thì cũng sữa đi sữa lại mấy lần".
Cũng cảm ơn chị đã chia sẽ và tin tưởng đơn vị chúng em.Nội Thất ĐN lấy làm động lực để chúng em tiếp tục phát triển hơn .
Quý khách nào có nhu cầu làm tủ bếp có thể liên hệ