teleren/devto huggingface dataset:
Day 18/30 : Animated Login and Sign Up Form using HTML and CSS
Tags: html, css, webdev, tutorial
Published: 2021-06-06 12:16:34

Welcome to Day 18 of this [Challenge](https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1). This is what I created today. 

**➜ Here is the Demo :**
![Animated Login and Sign Up Form using HTML and CSS](https://1.bp.blogspot.com/-U7fB9pAonSk/YKi0d8BtuHI/AAAAAAAAAGE/wN_Zpkd9SuIicxWtcU02cF9SVKmFYarOQCLcBGAsYHQ/s600/18.gif)

**➜ Video Tutorial :**

{% youtube au9dLf9IMQ0 %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/06/animated-login-and-signup-form-using.html


**➜ Instagram Post and Reel for Day 18 :**
[See Post and Reel](https://www.instagram.com/future_coderss/)

------------------------------------------------------------------

Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

{% link https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1 %}

**Support Me :**
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)

------------------------------------------------------------------
Full Tutorial #13: Setting Up Private Routes in React Router | Microservices Chat App Using React, Node and GraphQL
Tags: react, node, webdev, javascript
Published: 2021-06-06 12:13:07

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

Part 13 of the Microservices Chat App is here! In this episode, I show how we can create a custom `<PrivateRoute />` component to conditionally grant access to certain routes from within the React app.

{% youtube S8h_P8gbiHQ %}

Happy coding!

Source code: [https://github.com/lucaschen/microservices-chat-demo](https://github.com/lucaschen/microservices-chat-demo)
Daily Developer Jokes - Sunday, Jun 6, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-06-06 12:00:02

---
title: "Daily Developer Jokes - Sunday, Jun 6, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Jun%206%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12598468df3.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Who used the internet before it was cool?

___A:___ Httpsters
 -->
Software Requirements
Tags: functionalrequirements, stakeholder, nonfunctionalrequirements
Published: 2021-06-06 11:48:39

Requirements are gathered before developing a system, to deliver the final working product to the client. A developed system should have the capability to fulfil the requirements requested. The requirements may differ from one system to another depending on its stakeholders.

Stakeholders

Stakeholders having a relationship with the product, which is going to be developed by the developers. They can directly or indirectly involve in the project. Stakeholder of a system can be project manager, system administrator, end user, developer, maintainer, and security manager. 

It is very important to gather information from each stakeholder who have an involvement with the project. The reason behind this is each stakeholder may come up with different requirements. It is the responsible of the person who is capable to analyse the requirements and prioritize them according to the needs and wants.

Software business analyst of an organization in the IT industry is responsible to analyze the requirements and document them properly. Software architect is the person who is responsible to identify the architectural significance requirements. They check whether the final product developed meets the requirements which is supposed to be.
Requirements are two types as functional requirements and non-functional requirements. They are different from each other. Let us look a brief introduction about the functional requirements and non-functional requirement of a system.

Functional requirements
 
* These are the requirements which are based on specified functionalities.

more...
https://thavarajahpraveena.medium.com/software-requirements-9ca2335f8b0b
Do you know React Hooks Flow?
Tags: react, javascript, programming, webdev
Published: 2021-06-06 11:47:27

Understanding "Hooks Flow" is very important and sometimes even experienced React developers miss a few points.

Thanks to "Donavon" for sharing the beautiful flow diagram.

![React Hooks Flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qckkq831tb6gffm4juzi.png)

React Hooks flow includes:
1. Mount
2. Update (when state changes based on any event)
3. UnMount

Mount:
1. Run the lazy initializer (functions passed to useState or useReducer)
2. Continue the rest of the render function
3. React updates the DOM
4. It runs LayoutEffects
5. Browser paints the screen to reflect 
6. Runs the effects

Update: (When the user make any event it update the state)
1. Runs the render phase
2. React updates DOM
3. Cleanup LayoutEffects first
4. Run LayoutEffects
5. Browser paints the screen
6. Cleanup the effects first
7. Run the effects in the render

Unmount: Component gets removed from the screen (navigate to other screen or from user event)
1. Cleanup LayoutEffects
2. Cleanup Effects

Note: Never confuse them with lifecycle methods in Class Components.

Let's share more about hooks in the comments below.
Solve: There is no Brightness button on my new keyboard ヽ( 〇 )ﾉ
Tags: powershell, windows, logitech, tutorial
Published: 2021-06-06 11:43:00

As the title says, I bought a new keyboard for my laptop, unfamiliar with world of keyboards, I went with the safest option, approved by many, the Logitech G213 Prodigy. 

Much to my suprise, I was not able to control brightness with this new keyboard.
- No function keys were mapped to brightness settings
- There was no specific keys for that
- Even G Hub software had no System Action for brightness

So, the dev inside me said, lets tackle it with software!
<br>
By the help of stack-overflow and powershell docs, I wrote a simple powershell script, to adjust my brightness...
{% gist https://gist.github.com/ra101/c2060ade52280b4fcbe3291331caf1e0 %}

```powershell
.\brightness.ps1 <# No agrs will increase brightness (+10) #>
```
```powershell
.\brightness.ps1 desc <# desc as arg will decrease brightness (-10) #>
```

<br>
Now I compiled this file to `.exe`, to replicate that,

- First Install ps2exe module in powershell (as admin)
```powershell
Install-Module ps2exe
```

- Simply use this module to convert ps1 to exe
```
Invoke-ps2exe .\brightness.ps1 .\brightness.exe -noConsole
```

<br>
First I thought of using AutoHotKey, but i couldn't utilise any function key there. So, settled with G-Hub instead

Now, head over to G-Hub add this file as application, **twice** , one for +10 and other for -10, remember to add `desc` there and then change whatever Function keys you want map to brightness.

FYI: I used F6 key to change to G-shift mode. and F7 to increase brightness and F8 to decrease brightness in G-shift mode. No updation made in default mode.

<br>
Please comment, for any suggestion regarding this keyboard, or any wonderful hack you have in mind.
Make Responsive Website Using HTML CSS JavaScript Step By Step
Tags: javascript, webdev, html, css
Published: 2021-06-06 11:41:30

Hi there 👋,

Have a look at my recently made responsive gym website.

In this responsive website i have added Home section, about section, feature section, pricing section, contact form with map & footer. Also have made this complete website responsive using media query.

For this project I have used these libraries,
▶️ HTML
▶️ CSS
▶️ JavaScript

Here is the tutorial for this ecommerce website!
Part 1:

{% youtube aF1sv6AsDFE %}
Part 2:

{% youtube 8_h4LCRpqkc %}

**Feel free to visit my YouTube channel:
[@Tech2etc](https://www.youtube.com/c/Tech2etc/)**

**Follow me on Instagram where I'm sharing lots of useful resources!
[@fahimulkabir.chowdhury](https://www.instagram.com/fahimulkabir.chowdhury/) 😉**
MVT Pattern Of Django
Tags: django, python, programming, webdev
Published: 2021-06-06 11:23:14


In this post, we will discuss the MVT pattern on Django.

The MVT (Model View Template) is a software design pattern. It is a collection of three important components Model View and Template. Although Django follows the MVC pattern but maintains its own conventions. So, control is handled by the framework itself.

# Model

Basically Model act as Meditator Between the Website Interface and the Database. In Django, We use Python Classes To make Models Which is nothing but a Table in a Database. Class Attributes is Columns of the Table in the database and on these attributes we can set constraints like primary key, foreign key, Many to Many Relation, one to many Relation, etc. So using Models in Django makes it easy to connect with the database. or we can say that model is the whole logic of your project or business.

# View

The View is used to execute the business logic and interact with a model to carry data and renders a template. The view can be a function-based view or can be Class-based view. when the user requests something there is basically a function or class is written to handle those requests. for example when the user request ‘www.yoursitename.com/home’. so basically here user requested for the home page of your site and after this, the view you have written to handle this particular request will return the response to the user in the form of an HTML file or we can say that HTTTP response.

# Templates

In Django, Templates are nothing but the HTML file which handles the User Interface part completely. These Templates rendered when the user requests these templates. So basically templates are returned response by the view to the user requests.

So let's look at this in Picture


![django MVT.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1622978296088/EZgO4i74X.png)

Here you can see that user requests to your Django site. user has written some URL (Uniform Resource Locator) like “www.yoursite_name.com/page_name” after this, URL will match to the specified View, Now View will check the request object if there are any attributes related to Database it will fetch from or save those attributes to the database. If there are no Attributes related to the Database simply it will look for an HTML page (templates) to return a response but if it doesn’t found any templates it will show the error “404 pages nor found”.

Thank You for Reading🙂. If you have any Suggestions or Query then let me know in the comment section.
When we should use useMemo hook in React?
Tags: react, javascript, hooks, usememo
Published: 2021-06-06 11:21:52

When we have some slow function and we don't want our whole app to suffer this problem. Then we wrap that particular slow function in useMemo hook, which has a dependancy array  like our useEffect does. In that array we have to enter the dependancy of our slow function and now we knows that for every same input that function returns the same output. So it will not rerun that function but it just store that result and use instead of runing the function again and again.
How to add Ckeditor5 in your Next JS, react App
Tags: webdev, ckeditor5, nextjs, react
Published: 2021-06-06 11:08:43

I am creating a fresh CRA & here is my project directory

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

Before we going started, you need to add this npm package first, to install please paste the below code into your terminal.

```
npm i @ckeditor/ckeditor5-react
npm i @ckeditor/ckeditor5-build-classic
```

create a components folder under src folder and create a Editor component under components/Editor.js & use this code
```
import React, { useEffect, useRef } from "react";

function Editor({ onChange, editorLoaded, name, value }) {
  const editorRef = useRef();
  const { CKEditor, ClassicEditor } = editorRef.current || {};

  useEffect(() => {
    editorRef.current = {
      CKEditor: require("@ckeditor/ckeditor5-react").CKEditor, // v3+
      ClassicEditor: require("@ckeditor/ckeditor5-build-classic")
    };
  }, []);

  return (
    <div>
      {editorLoaded ? (
        <CKEditor
          type=""
          name={name}
          editor={ClassicEditor}
          data={value}
          onChange={(event, editor) => {
            const data = editor.getData();
            // console.log({ event, editor, data })
            onChange(data);
          }}
        />
      ) : (
        <div>Editor loading</div>
      )}
    </div>
  );
}

export default Editor;



```

Now go to your app.js or wherever you want to use this editor just import Editor Component and use this

```
import React, { useState, useEffect } from "react";
import "./styles.css";
import Editor from "./Editor";

export default function App() {
  const [editorLoaded, setEditorLoaded] = useState(false);
  const [data, setData] = useState("");

  useEffect(() => {
    setEditorLoaded(true);
  }, []);

  return (
    <div className="App">
      <h1>ckEditor 5</h1>

      <Editor
        name="description"
        onChange={(data) => {
          setData(data);
        }}
        editorLoaded={editorLoaded}
      />

      {JSON.stringify(data)}
    </div>
  );
}


```

visit ckEditor5 documentation to add more features - https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html

you can clone repo 
{% github apuchakraborty/ckEditor5-implement %}


You can use this code in codesSandbox
Here is your editor -

{% codesandbox 76ftq %}
Facebook Wav2vec-U for Unsupervised Speech Recognition
Tags: machinelearning
Published: 2021-06-06 10:57:18

Speech recognition is a significant application of Natural Language Processing. But, it should not advantage only for people who are fluent in one of the world’s most widely spoken languages. One way to expand access to these NLP applications is reducing the dependence on annotated data.

Few weeks ago Facebook announced that it developed an AI model using wav2vec Unsupervised (wav2vec-U). This is a way to build speech recognition systems that require… [read more](https://techzdudes.com/facebook-wav2vec-u-for-unsupervised-speech-recognition/)
Building a compiler – what we are aiming for
Published: 2021-06-06 10:39:17

> Check out the [previous post](https://dev.to/siddharthshyniben/building-a-compiler-basic-setup-43de) for some basic setup

First things first, sorry for delaying the code again!

Now, before we start, I wanted to clear up what exactly we are aiming at creating. I like to call it EnglishScript. The main things I want to convert are:

- Primitives (`"strings"`, `123` numbers)
- Variable declarations
  ```js
  // Normal js style
  let x = 12;
  // "English" style™
  let x be 12
  let the variable x be 12
  ```
S3 Replication with CDK, KMS, and StackSet
Tags: aws, cdk, tutorial
Published: 2021-06-06 10:38:18

AWS has everything you need for secure and reliable data storage. With Amazon S3, you can easily build a low-cost and high-available solution.

Together with the available features for regional replication, you can easily have automatic multi-region backups for all data in S3.

![S3 Replication](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mozyc4e8jo8ig3lybmgt.png)

This uses the **AWS Cloud Development Kit** to create an **AWS CloudFormation** template to create an **AWS CloudFormation** stack. The **AWS CloudFormation** stack creates an **Amazon S3** bucket, an **AWS Identity & Access Management** role, an **AWS Key Management Service** key and an **AWS CloudFormation** StackSet. The **AWS CloudFormation** StackSet uses an **AWS CloudFormation** template to create an **AWS CloudFormation** stack in all AWS regions. The **AWS CloudFormation** stack in every region creates an **Amazon S3** bucket and an **AWS Key Management Service** key. You're welcome. 🤯

[Read More »](https://sbstjn.com/blog/aws-cdk-s3-bucket-reginal-replication-kms/)

[View Code on GitHub »](https://github.com/sbstjn/archive)
Relational Database Model
Tags: database, computerscience
Published: 2021-06-06 10:15:37

**What is RDBMS ?**
It is an organized set of tables to store information so that we can access the information efficiently.
It is called as **Relational** because the values of each table are related with the value of every other table.

**Examples of RDBMS are:**
1) MySQL
2) Oracle
3) DB2
4) MS-Access
5) SQL Server

**What is Table in RDBMS ?**
-> It is a set of records that contains rows and columns.
-> It is a collection of data elements represented in a structured format in terms of rows and columns.
-> Each table is assigned a specific name.

**Records and Fields**

**Record** is a tuple/row and it is composed of attributes and contains data.

**Field** is also known as column/attribute. Each row is broken down into smaller entities(element) known as Fields.

**Degree**
It is the number of Fields(Attributes) in a relation.

**Cardinality**
It is the number of Rows(tuples) in a relation.

**Cardinality in RDBMS is different from Cardinality in ER-Diagram.**

**Domain of a Field(Attribute)**
It is all the possible values that a field can take.
Example: Month -> Jan to Dec

**Null Value** - It specifies that no value is associated with the attribute. It is represented by a blank space.

Thank You!
Building a compiler – basic setup
Published: 2021-06-06 10:14:29

# Building a compiler – basic setup

> Be sure to check out the [previous part](https://dev.to/siddharthshyniben/building-a-compiler-basic-concepts-1j1d) to learn the basics

Now that you have a general overview on a compiler, let's setup a few files so you can start creating one!

I'm gonna code this using nodejs, but you can choose any environment you like, as there is nothing nodejs specific in here.

You only _**have**_ to create a single JS file, and you can safely skip this part of this series if you like. But I recommend doing this.

--------

You still here? Alright let's start!

## The files
I like to divide everything up, so I am going to create 
- The main index file
- The tokenizer
- The parser
- The traverser
- The transformer
- The code generator

Plus a few more files
- A simple cli which parses input and logs it to the console, just made for testing purposes
- A test file which compiles some code and checks if the code is compiled correctly

So I am going to put all the boilerplate code here, which you can just copy and paste. Also, I am using [`.mjs`](https://stackoverflow.com/questions/57492546/what-is-the-difference-between-js-and-mjs-files) because I prefer the import/export statements more than require.

### `index.mjs`

```js
import {tokenizer} from './components/tokenizer';
import {parser} from './components/parser';
import {transformer} from './components/transformer';
import {codeGenerator} from './components/code-generator';


export function compiler(input) {
	const tokens = tokenizer(input);
	const oldAST = parser(tokens);
	const newAST = transformer(oldAST);
	const output = codeGenerator(newAST);

	return output;
}
```

### `components/tokenizer.mjs`

```js
export function tokenizer(input) {
	
}
```

### `components/parser.mjs`

```js
export function parser(tokens) {
	
}
```

### `components/traverser.mjs`

```js
export function traverser(ast, visitor) {
	
}
```

### `components/transformer.mjs`

```js
export function transformer(ast) {
	
}
```

### `components/code-generator.mjs`

```js
export function codeGenerator(node) {
	
}
```

### `cli.mjs` 

```js
import {compiler} from "./index";

const argv = process.argv.slice(2);

argv.forEach(codeBlock => {
	console.log(`\`${codeBlock}\` compiles to\n\n${compiler(codeBlock)}\n`)
});
```

### `tests.mjs`

```js
import assert from 'assert';
import {compiler} from './compiler';

function itCompiles(codeBlock, expectedOutput) {
	assert.strictEqual(
		compiler(codeBlock),
		expectedOutput
	)
}

// No tests now
```

--------
That's all, and see you in the next part!
for in && for of Loops
Tags: javascript, reactnative, react
Published: 2021-06-06 10:11:57

So everyone is found of for loops , so the idea of Publishing this article is to make clear my understanding on for in && for of loops,
let us begin the story , When I was going through my basics on JavaScript  found an interesting concept called as For in Loop …hmm interesting why it is interesting ?? does it make magic , Yeah it actually, Does  consider an Object in an world like an car what 

  var Car = { 
             Engine Type: Twin Cylinders , 
             Speaker System: Ac, 
             Color: Red  
            }
 so if you want to by an new Car and if you approach an Sales Robot and ask him what are the Properties of the Car is , and the developer Behind the Robot is Going to help him through , guess what an For in loop , So Wtf are you trying to say Lets apply the loop to the Object ,

 Var Car = {
            EngineType: Twin Cylinders , 
            SpeakerSystem: Ac, 
            Color: Red  
           }
   
      for (const property in Car) {
          console.log(property);
         }

OutPut: 
   > "EngineType"
   > "SpeakerSystem"
   > "Color"
    
So What about an For in .. in an Array , Hmm... That's an 'A' Grader's  Question , So developer takes it as Challenge and Code them
 
 Consider an Array which a Mom gives you for items in an Fridge,
    Var Fridge = ['Eggs', 'Cola', 'Abounded Cheese' ,'Chocolate'];

    So if  Developer Applies an For in.. Loop on the array,
          for (const property in Fridge) {
                  console.log(property);
              }
OutPut :
   > "0"
   > "1"
   > "2"
   > "3"
     
So its going to Give the Indexes of the items inside the Array fine, So the Title consists of Two topics , So yeah u guys Guessed it its just Lead for the Second one ('Weird Smile on My Face')...
 So to find the items , We can use For of Loop....

       Lets Loop the question..('Looping is nothing but Copying and Pasting the Same Stuff...#Philoshper')

 Consider an Array which a Mom gives you for items in an Fridge,
    Var Fridge = ['Eggs', 'Cola', 'Abounded Cheese' ,'Chocolate'];

    So if  Developer Applies an For of.. Loop on the array,
          for (const property of Fridge) {
                  console.log(property);
              }
OutPut : 
  > "Eggs"
  > "Cola"
  > "Abounded Cheese"
  > "Chocolate"

Basically the Moral of Story is  just an Simple grammar
 'in'  Stands for indicate 'inclusion, location, or position' and 
 'of' Stands for  'expressing the relationship between a scale or 
  measure and a value'.

So Basically What will Happen When the loops used for Array of Objects ?? 
 
   Comment it Out ….