teleren/devto huggingface dataset:
Free React Admin Dashboard with Recharts Template
Tags: html, react, css, javascript
Published: 2021-10-18 15:47:18

## You can get the template from the link proivided in the description of the video.

### Technologies Used :-
+ REACT
+ SASS

### Libraries and Assets Used :- 
+ Node Sass
+ React Icons
+ Recharts
+ Google Fonts

## To learn how to create this template watch the complete video. You can get the template for free from the link provided in the description of the video.

{% youtube 6xlE2togA5A %}

## Please do like the video and subscribe to the channel. It helps and motivates me to create more content like this.
Blog Post #4
Published: 2021-10-18 15:43:54

Week of October 11th-15th-I had a chance to start the week off with "The Zen of Ruby" which ran about 20 lessons/exercises that included the following, Ternary Conditional Expressions, Case Languages, .updownto & .downto methods, Concatenations, Implicit Returns.  Again it was another week where I was trying to understand the language, syntax and overall exercise.  Sometimes I find myself asking, "how do people do it with coding and language of understanding?" I saw a bit of improvement in understanding how to replace + and << with .to_s for non string values. What I value is time and patience...which is what I have in understanding this.
How to Install And Uninstall Alacritty Terminal Emulator on Ubuntu
Published: 2021-10-18 15:40:48

The terminal emulator is one of the most controversial applications in Linux. There are many emulators, but in this post, I will show you `Alacritty Terminal` - the fastest terminal emulator for Linux.

## What is Alacritty?

According to [Alacritty](https://github.com/alacritty/alacritty) is a cross-platform, GPU-accelerated terminal emulator works on macOS, Ubuntu, BSD, and Windows. It’s free and open-source software that strongly focus on simplicity and performance. And it features Vi mode, search, Vi search etc.

## Prerequisites?

* Operating system: Linux - Ubuntu 16.04 to 20.10 with 2GB RAM (4GB preferable)
* You can use a terminal to run Linux script
* A user account with sudo privileges

Read more: [How to Install And Uninstall Alacritty Terminal Emulator on Ubuntu](https://linuxtus.com/install-alacritty-terminal-emulator-ubuntu/)
How A Simple 500-Word Memo Changed the Way We Talk About the Internet
Tags: worldstandardsday
Published: 2021-10-18 15:35:26

---
title: How A Simple 500-Word Memo Changed the Way We Talk About the Internet
published: true
description: The unlikely trio MUST, SHOULD, and MAY in internet standards
tags: WorldStandardsDay
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1tzumw9fjzegw9bu1d1.png
---
In March of 1997, Scott Bradner penned a short memo titled “Key Words For Use in RFCs to Indicate Requirement Levels”. It is more commonly referred to as simply RFC 2119. The entire document fits comfortably on two pages of paper.

That memo would go on to become the single most referenced document of the Internet Engineering Task Force (IETF).

Some things may be allowed, some things may not. Some things should be accommodated, other things should not. Some things are required and simply must be present in a certain form, other things must never be present.

Scott Bradner and his 500-word memo (RFC 2119) gave us a way to succinctly specify all of the above, without ambiguity, by defining these five imperatives: MUST, MUST NOT, SHOULD, SHOULD NOT, MAY.

Nearly every RFC written in the past 25 years has referenced RFC 2119 and used these imperatives to be explicit about what is mandatory, what is advisable, and what is allowed but not required.

Interestingly, RFC 2119 itself has only ever been updated once, to clarify that when these imperatives are not capitalized, they have their normal English meanings.

A longer version of this was posted to [The unlikely trio MUST, SHOULD, and MAY in internet standards](https://levelup.gitconnected.com/2021-043-how-a-simple-500-word-memo-changed-the-way-we-talk-about-the-internet-c625cbadff86).
Blog post #3
Published: 2021-10-18 15:34:50

Week of October 4th saw me dive deeper into Ruby with accessing Hash Values, Iterating over Multidimensional Arrays, Iterating over a Hash, Creating a Histogram, Creating Frequencies, Sorting the Hash, Methods of Blocks & Sorting, Parameters & Arguments, Splat Arguments, How Blocks differ from Methods. What I enjoy about CodeCademy is how you can type in the editor and see if the code is successful or if I need additional assistance I can click on the hint section to give me a bit of a review in terms of what syntaxes and examples I may use to execute the code.
Blog post #2
Published: 2021-10-18 15:28:10

Week of September 27th-October 2nd was frustrating for me.  I started out with Loops & Iterations and Infinite Loops.  There was an example like this:

i = 0
loop do
  i += 1
  print "#{i}"
  break if i > 5
end
This particular syntax was a bit difficult to understand because of the language, I am trying to get use to. 

I also learned about Redacting, .Split method, Control Flow, and data structures.

As my Mentor Gino says, "Relax Erik and take a break, then come back to it."  I am trying.
How To Create Dynamic Line Chart In Laravel
Tags: laravel, javascript, beginners, linechart
Published: 2021-10-18 15:22:46

In this tutorial we will see how to create dynamic line chart in laravel. A dynamic line chart or line plot or line graph or curve chart is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments. It is a basic type of chart common in many fields.

For creation of dynamic linechart example you need to create route, controller, blade file and database, So if you will follow my tutorial step by step then definitely you will get output.

```
Step 1 : Install Laravel
Step 2 : Create Migration Table
Step 3 : Add Resource Route
Step 4 : Create Controller And Model
Step 5 : Add Code In Controller
Step 6 : Create Blade File
```

After follow all steps you will get output like below screen print.

![How To Create Dynamic Line Chart In Laravel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpy6yvr6ez064v99m01g.png)

---

> **_[Read More : How To Create Dynamic Line Chart In Laravel](https://techsolutionstuff.com/post/how-to-create-dynamic-line-chart-in-laravel)_**
simple example of Closures in JavaScript
Tags: javascript, devops
Published: 2021-10-18 15:20:25

**Closures** are a fundamental and powerful property of Javascript
``` 
//we have an outer function named walk and an inner function named fly

function walk (){
  
  var dist = '1780 feet';
  
  function fly(){
    console.log('At '+dist);
  }
  
  return fly;
}

var flyFunc = walk(); //calling walk returns the fly function which is being assigned to flyFunc
//you would expect that once the walk function above is run
//you would think that JavaScript has gotten rid of the 'dist' var

flyFunc(); //Logs out 'At 1780 feet'
//but you still can use the function as above 
//this is the power of closures
```
JavaScript:     Number.isNaN() vs isNaN()
Published: 2021-10-18 14:41:14

This is a quick tutorial about `Number.isNaN` and `isNaN()` from Javascript.

**Number.isNaN**
`Number.isNaN` is a JavaScript method which simply finds out if whatever value passed is a number or not (`NaN`).

```
'use strict'
console.log(Number.isNaN(420));   // false, IT IS a number
console.log(Number.isNaN('NaN')); // true, it is NOT a number
```

`Number.isNaN` is usually used in functions to determine if a value passed to a function is a number and is able to process or pass that number on to other functions. The following function is a simple `if` statement that uses both `Number.isNaN` and `isNaN` in order to determine if the passed value is a number and then prints out which type of of `NaN` is used.

```
'use strict'

let numberNaNvsNaN = function (yourValue) { 
    if (isNaN(yourValue)) { 
        return yourValue + ' isNaN determines it is NOT number';
    }
    if (Number.isNaN(yourValue)) { 
        return yourValue + ' Number.isNaN() determines it is NOT a number';
    }
}

console.log(numberNaNvsNaN(NaN));
console.log(typeOfNaN('5dogs'));

```

*It is important to remember that both Number.isNaN and isNaN will always return a boolean value, `true` or `false`.*

**isNaN**

`isNaN` is also used to determine if a value is a number or not, but doesn't always behave the same way when it is passed non-numeric values because it tries to convert non-numeric values, this makes it less useful than Number.IsNaN.

```
// List of arguments that are NOT numbers but isNaN fails to recognize this.
console.log(isNaN(undefined));
console.log(isNaN('cat')); 
```
Can I access Airtable data from Firebase in my react app?
Tags: airtable, javascript, react, help
Published: 2021-10-18 14:40:12

I have my data being created in Airtable, and I have my user login using firebase.

I want users to be able to “save” data to their profiles of products that’s from Airtable.

To save products they use or want to buy again.

But, how can I access those products to display?
5 Steps to add Google Analytics to NextJS Application🙌
Tags: javascript, webdev, nextjs, tutorial
Published: 2021-10-18 14:26:26

Hey Guys 👋👋

In this blog post, We'll be adding Google Analytics to our NextJS application.

I recently migrated my website [Vulnerable.Live](www.vulnerable.live)from [CRA](https://reactjs.org/docs/create-a-new-react-app.html)(Create React App) to [NextJS](https://nextjs.org/) and while integrating Google Analytics with NextJS Application I faced multiple issues so I decided to do a quick guide to add Google Analytics in NextJS.

## How to add Google Analytics in NextJS Application?🔥


### Step 1 - Starting with Google Analytics

Create a Google Analytics account and create a property. After creating property you will a **Measurement ID**.

![Google Analytics Measurement ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj2ph26sd6719afl5jbw.png)

### Step 2 - Creating Helper Functions

Now we have the Measurement ID, Let's start coding. Navigate to code editor and create a new folder `lib` and create a new file `analytics.js` and add the following code.

```
export const pageview = (url) => {
    if (window && window.gtag) {
        window.gtag('config', 'G-Y0*******', {
            page_path: url,
        })
    }
}

export const event = ({ action, params }) => {
    window.gtag('event', action, params)
}
```

***Replace G-Y0******* with your Measurement ID***

### Step 3 - Adding GA to `_app.js`

Now it's time to add `useEffect` in our `_app.js`. You can find use below mentioned boilerplate code.

```
import Router from "next/router"
import { route } from 'next/dist/server/router';
import { useRouter } from 'next/router'
import { useEffect } from 'react';
import * as ga from '../lib/analytics'

function MyApp({ Component, pageProps }) {

  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url) => {
      ga.pageview(url)
    }
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])


  return (
      <Component
        {...pageProps}
        key={route}
      />
  )
}

export default MyApp

```

### Step 4 - Creating `_document.js` File

Now all we need to do is to edit our `_document.js` file. If you don't have one, all you need to is to create a `_document.js` file in the `pages` directory. You can use this below mentioned code as a boilerplate.

{% gist https://gist.github.com/theinfosecguy/491238e0cec75c543f74aa0562201e65 %}

[More about `_document.js`](https://nextjs.org/docs/advanced-features/custom-document)

### Step 5 - Test the Code

We are done with everything. All you need to do is to deploy your code and check Google Analytics. Although it takes 24-48H for GA to populate data but you can navigate to `Realtime` tab and check users.😁🚀

![Google Analytics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5xvc1il2grgnki3r1bv.png)

That's all for this post. Hope you guys liked it.
Developer Diaries : Hacktober fest 2021
Tags: hacktoberfest, java, github, opensource
Published: 2021-10-18 14:23:54


Because its always fun. Keep coding and plant more trees!!!
2 years in a row now. I like this energy of participation, where you feel like contributing repositories making a difference.

Feel free to reach out to me or comment for more info.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l02bk7s7xqpr5wdz1uvd.png)  

Hacktober fest is here!!! Where are you? Just get started..
Attributes of good REST APIs
Tags: programming, architecture, beginners, codenewbie
Published: 2021-10-18 14:16:01

APIs are the backbone of a successful application architecture and REST APIs are the most popular way of creating web services.

![The genie says there are 3 rules - no wishing for death, no falling in love and no bring back dead people. The person asks, "I want to create a perfect backend without creating good APIs". The genie replies, "There are 4 rules"](https://pbs.twimg.com/media/FB_DkddVUAMq2UN?format=jpg&name=medium)

Below is a concise list of best practices to use while designing REST APIs.


### 1. Consistency of HTTP methods


- `GET /api/v1/threads`  - to get a list of all threads
- `GET /api/v1/threads/14`  - get a single thread with id 14
- `POST /api/v1/threads`  - add a new thread to collection
- `PUT /api/v1/threads/14`  - update thread with id 14
- `DELETE /api/v1/threads/14` - update thread with id 14

### 2. Versioning

- Version is part of the endpoint 
- This gives the possibility to support multiple live versions of the same API. E.g. Twitter has API versions 1.1 and 2.0 - both are live and accessible.
- Enables easy switching and rollback for consumers of the API


### 3. Use standard HTTP error codes 
- HTTP response codes were created to describe the semantics of an API response.
- Return standard error codes and let the consumer handle the errors in their own way. Always include a message in your errors for troubleshooting purposes.

![Drake says no to 200 OK with and error message embedded in response. He says yes to 401 Unauthorized or any other semantic HTTP error code with an error detail embedded.](https://pbs.twimg.com/media/FB_Dk_CUYAIRKTZ?format=jpg&name=medium)

### 4. Endpoint conventions

- Plural nouns for collections and no verbs
E.g. "threads" is used instead of using verbs like /getThread, /updateThread

- Resource nesting is visible in the endpoint
E.g. 
    - `GET /api/v1/threads/14/tweets`
    - `GET /api/v1/threads/14/tweets/2`


### 5. Security

- Use TLS/SSL
- Use authentication and authorization to avoid malicious requests
- Set up rate limiting and caching to prevent against DoS attacks


### 6. Performance
- Use caching(in-memory or CDN) to provide fast results for repeated GET requests

- A good API has pagination and filtering capabilities to reduce the amount of data being transferred. Data transfer objects should not include unnecessary fields.


### 7. Documentation
- The least requirements of a method documentation - description, request parameters, response, error scenarios.

- Definitely include request/response samples to provide the full picture.

Also check - https://swagger.io/specification/ 


My final suggestion is to make API designing process the starting point of your backend architecture and build other architectural components around it.

---

Thanks for reading. 

I hope this was useful in providing a checklist of points to take care of while designing APIs. 

If you want to connect with me, you can find me on [Twitter](https://www.twitter.com/abh1navv)
Browser hacks for Dark Mode in PDFs! 🦉
Tags: javascript, hack, browser, pdf
Published: 2021-10-18 14:15:56

Dear dark mode lovers,
In this article I present a few hacks to view PDFs in dark mode on any browser! :fire:

To get started, open any PDF in your favorite browser. Then open the dev tools by using the shortcut `ctrl + shift + I` or `f12` and run one of the following in the *console* based on your browser:

## New Microsoft Edge/Google Chrome/Brave/Opera
```js
document.embeds[0].style.filter = 'invert(0.95)';
```

## Firefox
```js
document.getElementById('viewerContainer').style.filter = 'invert(0.95)';
```

This is the original image:
![Original Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87jsm45m5j74qr92hqs8.png)
 
Here is the result after running the script:
![Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3x7zsmjh5eq5ax0hka4u.png)

:bulb: You can change 0.95 to any number between 0 and 1.

If you found this useful, like the post and share it with your friends!
Thanks!
Image as text background in CSS
Tags: webdev, beginners, programming, css
Published: 2021-10-18 14:13:43

Image as text background looks really awesome right? However doing this doesn't really work
```css
.text{
    background-image: url("./img/img.jpg");
}
```

But we can achieve our desired effect by adding just two more lines of code
```css
.text{
    background-image: url("./img/img.jpg");
    color: transparent;
    background-clip: text;
}
```

To ensure better reliability we can use some browser prefixes. eg
```css
.text{
    background-image: url("./img/img.jpg");
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}
```
⚡️ Free Next.js responsive landing page template for SaaS products made using JAMStack architecture.
Tags: react, webdev, nextjs, jamstack
Published: 2021-10-18 14:11:59

✨ Free Next.js marketing website template for SaaS startups ✨

Everything you need to build a **great landing page** / marketing website for your startup. Great SEO metrics, Green WebVitals, 🚀 Performance, Clean & Pragmatic Codebase out of the box.

## 🤩 Features

- ⚡ **Next.js** - React framework for static rendering
- 🤩 **Best SEO setup** - Meta Tags, JSON-LD and Open Graph Tags
- ✅ **Optimized for Web Vitals**
- 📜 **Blog with MDX**
- 📫 **Mailchimp Integration** - for newsletters
- 🗳 **Sendgrid Integration** - for sending emails
- 🌃 **Dark mode** - and customizable themes!
- 🧽 **No UI library** - just styled components, so you don't have to learn any new syntax
- 🖱 **One click deployment** - with Vercel or any other serverless deployment environment
- 🔍 **Eslint** - with Next.js's recommended settings and imports sorting rule
- 🕯 **Prettier**


  <a href="https://github.com/Blazity/next-saas-starter" >
    <img src="https://i.imgur.com/lHdWWLN.png">
  </a>

Checkout the source code https://github.com/Blazity/next-saas-starter (stars are greatly appreciated :D).
It contains far more pages and components than the ones showed on homepage, so please checkout other pages too :D

Features: https://next-saas-starter-ashy.vercel.app/features
Pricing: https://next-saas-starter-ashy.vercel.app/pricing
Contact: https://next-saas-starter-ashy.vercel.app/contact
Privacy policy: https://next-saas-starter-ashy.vercel.app/privacy-policy
Blog index: https://next-saas-starter-ashy.vercel.app/blog
Blog post: https://next-saas-starter-ashy.vercel.app/blog/test-article-2

(and try clicking `Sign up` button :D)

## 🧰 Built With

- Statically generated pages with [**Next.js** ](https://github.com/vercel/next.js)
- [Styled components](https://github.com/styled-components/styled-components/)
- [MDX](https://github.com/mdx-js/mdx)
- [TypeScript](https://github.com/Microsoft/TypeScript)
Functional Dependencies Database
Tags: database, functionaldependency, ermodel, data
Published: 2021-10-18 13:48:15

In order to design a good database Functional Dependencies in Database is an important concept. In order to ensure the integrity of data and a good performance of a database functional dependencies plays an important role. Definition of Functional Dependency on Wikipedia HERE.

Suppose we have a relation in database where there are only two attributes X and Y:

Functional Dependency Def.

X –> Y

if t1.X = t2.X then t1.Y = t2.Y

To read more visit https://hecodesit.com/functional-dependencies-database/
Hey bro, you online?
Tags: javascript, webdev, programming, tutorial
Published: 2021-10-18 13:44:14

Sometimes the user might a have a bad internet connection which may cause your site to not function properly. So it sounds like a good idea to let your user know when the internet goes off.
And guess what? It is really easy to do using **navigator.connection**. Here is a basic example.
```js
navigator.connection.onchange = function(){
    if(navigator.onLine){
        alert("Your internet connection is back");
    }else{
        alert("Your currently offline");
    }
}
```
Use your B̶R̶A̶I̶N̶ GPU
Tags: javascript, webdev, beginners, programming
Published: 2021-10-18 13:33:41

Website nowadays have high end graphics and requires a lot of processing power so it might be a good IDEA to utilize the power of GPU.
It might sound complicated but its really simple actually. Because there are many library out there to help you out. For example [GPU.js](https://gpu.rocks/). It also switch backs to regular mode if the user device don't have a GPU so no worries there.
So get started now by reading the [DOCS](https://github.com/gpujs/gpu.js/#readme)
How would you refactor this JS function?
Tags: discuss, javascript, refactoring, webdev
Published: 2021-10-18 12:45:01

During the weekend, I found the following small JS function in a [blog post](https://dev.to/luigizaccagnini/refactoring-code-in-octo-3397):

```javascript
const lineChecker = (line, isFirstLine) => {
  let document = ``;

  if (line !== "" && isFirstLine) {
    document += `<h1>${line}</h1>`;
  } else if (line !== "" && !isFirstLine) {
    document += `<p>${line}</p>`;
  } else if (line === "") {
    document += "<br />";
  }

  return document;

};
```

I refactored it and was thinking that it could be an excellent beginner-level refactoring kata.

How would you refactor it?
Olansi, best-in-class healthcare products factory from China
Tags: beginners
Published: 2021-10-18 12:29:16

Olansi Healthcare Co., Ltd is located in Guangzhou,China.
Olansi company is a professional air purifier OEM manufacturer, products contain china air purifier, home air purifier, hepa air purifier,negative ion air purifier, ionizer air purifier,pm2.5 air purifier, car air purifier, room air purifier, smart air purifier and so on.
Over the pasted 10 years, Olansi focuses on research and development, design, production and sales of health and environmental protection equipment of household air purification, water purifiers, hydrogen-rich water machine,  humidifier, and beauty healthy care products.
Air purifier for home, purifying air and keep away from pollution, Quiet operation, comfortable sleep, high efficiency HEPA filter, remove PM2.5
 With proven ability to kill viruses and bacteria and filter out contaminants, Olansi Water Purifier provides the best source of water to your home.
RO Hydrogen Strontium Water 3s Rapid Heat Water Dispenser, Hydrogen and oxygen separation technology for hydrogen production Higher.
Source: <a href="https://olansichina.com/">OLANSI CHINA</a>