teleren/devto huggingface dataset:
Hyper QuickStart to MySQL
Tags: mysql, note
Published: 2021-12-29 08:34:34

Be straight, just do it.
# MySQL  
MySQL is a SQL Database.  
To connect to a MySQL Database you need:  
- The server address  
- A username  
- A password  
- A database

# Admin the MySQL  
To enter the admin console you have 2 options.  
## mysql  
As root, use mysql:  
```bash
mysql
```  
As user:  
```bash
mysql -u=my_username -p
```  
__-p__ means a password is required, you need to have a user account on the
MySQL server to use it. 
To exit the shell, use:  
```SQL
exit;
```  
## MySQL Workbench  
A very good tool you can download with a GUI to remote control any MySQL
server.  
Using your user account you can manage everything with few clicks.  
# Users

## Create a user  
When you create a user account, it doesn't have any right, you have to add them
to use a database or anything.  
```SQL
CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';
```  
_% as domain allow a connexion from anywhere  
localhost as domain restrict the usage to a local connexion only._  
## Grant a user  
```SQL
GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';
FLUSH PRIVILEGES;
```  
### Grant Different User Permissions  
Common possible permissions users can enjoy.  
- __ALL PRIVILEGES__ - as we saw previously, this would allow a MySQL user full
access to a designated database (or if no database is selected, global access
across the system)  
- __CREATE__ - allows to create new tables or databases  
- __DROP__ - allows to them to delete tables or databases  
- __DELETE__ - allows to delete rows from tables  
- __INSERT__ - allows to insert rows into tables  
- __SELECT__ - allows to use the SELECT command to read through databases  
- __UPDATE__ - allow to update table rows  
- __GRANT OPTION__ - allows to grant or remove other users’ privileges  
 
You can use this template to grant a permission to a user:  
```SQL
GRANT type_of_permission ON database_name.table_name TO 'username'@'localhost';
FLUSH PRIVILEGES;
```  
## Update a password  
```SQL
ALTER USER 'user-name'@'localhost' IDENTIFIED BY 'NEW_USER_PASSWORD';
FLUSH PRIVILEGES;
```
## Delete a user  
```SQL
DROP USER 'user'@'localhost';
```  
# Databases  
## Add a database to a specific user  
```SQL
CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';
CREATE DATABASE my_database;
GRANT ALL PRIVILEGES ON my_database TO 'newuser'@'localhost';
```  
## Delete a database  
```SQL
DROP DATABASE db_name;
```  
Alternative:  
```SQL
DROP SCHEMA db_name;
```  
Both commands do the same.  
You don't like dev.io? No problem, [bookmark this](https://blog.cgifl300.com/mysql-memo.html)
Simulate Different API status code using Requestly
Tags: requestly, frontend, guidesandtutorials, httpstatuscode
Published: 2021-12-29 19:37:27

---
title: Simulate Different API status code using Requestly
published: true
date: 2021-12-29 09:53:10 UTC
tags: requestly,frontenddevelopment,guidesandtutorials,httpstatuscode
canonical_url: https://requestly.com/blog/simulate-different-api-status-code-using-requestly/
---

This article explains how to use [Requestly](https://requestly.com) to simulate different API status codes and test your app.

[Requestly Browser Extension](https://chrome.google.com/webstore/detail/requestly-modify-headers/mdnleldcmiljblolnjhpnblkcekpdkpa) can simulate different status codes on an API by redirecting the actual API to a mock API.

The mock API simulating the desired status code is hit instead of the actual API. It is done using the redirect rule of requestly.

![](https://cdn-images-1.medium.com/max/1024/0*IvSeBfG37l19VF97.png)

### Create a mock API using Requestly

Requestly has a Mock Server capability to create a Mock API response.

_Requestly mock server handles the_ [_CORS_](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) _headers automatically so that the browser does not block the cross-origin requests._

### Redirecting the actual API endpoint to the Mock Server endpoint.

![](https://cdn-images-1.medium.com/max/1024/0*GL8ZCNa96bSQk4jT.png)
_Redirect Blinkit Search API to a mock API simulating 404 status code_

### Removing Content-Security-Policy Headers

Sometimes redirection to mock API won’t work due to [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)- [connect-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directive, which restricts the URLs loaded using script interfaces.

You can use the [Requestly marketplace](https://app.requestly.io/marketplace) rule to bypass this, which is a prebuilt rule to remove the content-security-policy header.

![](https://cdn-images-1.medium.com/max/1024/0*gimpNz-JNdhfhz8Z.png)
_Requestly Marketplace_

I hope this empowers you to do robust testing of your frontend by simulating different API behaviours.

Further Resources:

- [Simulating 500 when Tweeting](https://dev.to/requestlyio/simulating-500-http-status-code-in-create-tweet-api-on-twitter-2b7d)
- [Simulating 404 on Blinkit Search](https://dev.to/requestlyio/simulating-404-http-status-code-in-blinkit-search-api-2mgh)

This feature will soon be available on the desktop app. Stay Tuned.

Happy Debugging!

By [@nafees87n](https://www.linkedin.com/in/nafees87n/)

_Originally published at_ [_https://requestly.com_](https://requestly.com/blog/simulate-different-api-status-code-using-requestly/)_._
Drawing app that records your actions
Tags: css, javascript, webdev, html
Published: 2021-12-29 09:49:40

## Drawing app that records your actions

Checkout the deployed project here: https://drawingplayback.netlify.app/

Hello, and welcome to my blog! 😊

## --What is this?--

This is a normal pixel art drawing board. But wait is it!?

No, that would be kinda boring, so I added a feature where you can record your actions and then playback those actions. To do this.

1. Press Record
2. Draw stuff
3. Stop Recording
4. Click on Play
5. You can draw while your previous drawing is playing back
6. Click exit play

If you were to have some problems, just reload the page. Also it only properly works on a computer, it won't display correctly on a phone.

## --How it works--

The way the recording works is by using an array of objects, keeping track of all the changes when you change the color of a square, and when the change occurred in milliseconds after you pressed record. 

It looks something like this:

```javascript
changes = [
{
    target: "pixel-53",
    property: "backgroundColor",
    value: "red",
    timestamp: 3200 //(ms)
},

{
    target: "pixel-323",
    property: "backgroundColor",
    value: "green",
    timestamp: 4500 //(ms)
}
]
``` 


It then plays back those changes. And thus, you can live interact with the drawing board, whilst your recording is playing back!

You can chain recordings together to create multiple recordings playing back at the same time.

About the drawing board itself, it uses css grid to create 3000 squares. When the user is holding the mouse down it starts to draw the selected color (which you can choose by clicking on the black sqaure in the right bottom). If you want to erase, you can click on eraser, and it will delete all of the squares you've drawn when you hover over them.

You can view the code on github: https://github.com/SebCodesTheWeb/drawingplayback

## --About me--

Hello! My name is Sebastian, and I'm a high-school student from Sweden. I have dabbled with some front-end development for the past few months. And since Christmas brake finally arrived, I've decided to start a challenge for myself! I'm going to code for the coming 20 days.

I'm following the front-end career path at Scrimba and I'm currently at module 8 (Flexbox, Grid and Fetch)

By the end of the 20 days I'm hoping to have finished the front-end career path and have started with some backend Node.js development. I will be documenting my progress for the coming days, and filming myself on my Youtube-channel, so feel free to follow along my journey and learn with me!

--Social Media--

- Youtube: www.youtube.com/channel/UCikWIcChAOSwoc2qpbZ6iIA
- Blog: https://sebcodestheweb.hashnode.dev/
- Github: https://github.com/SebCodesTheWeb

Peace.
[BTY] Day 4: Event Driven Architecture behind NGINX
Tags: betterthanyesterday, ngnix
Published: 2021-12-29 08:33:02

*Most of these contents are taken from this blog: https://www.nginx.com/blog/inside-nginx-how-we-designed-for-performance-scale/.*
 
Many web servers and application servers use a simple threaded or process‑based architecture, NGINX stands out with a sophisticated event‑driven architecture that handles multiple connections within a single process. 🤭
 
The mentioned article describes:
- Why is architecture important?
- How Does NGINX Work? 
- Inside the NGINX Worker Process
- Scheduling the State Machine
- Updating Configuration and Upgrading NGINX

Some key notes I found very exciting about NGINX after reading this article:
1. The state machine is essentially the set of instructions that tell NGINX how to process a request.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nugrwv8scbuk2b5q7c7.png)


2. Most web servers and web applications use a process‑per‑connection or thread‑per‑connection model. It mean each process or thread contains the instructions to process the request through to the end. During the time the process is run by the server, it spends most of its time ‘blocked’ – waiting for the client to complete its next move.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwm075qawrk8u7mwyllz.png)
 The important point to remember is that every active HTTP connection requires a dedicated process or thread (a grandmaster). However, there’s a huge imbalance: **<u>the rather lightweight HTTP connection, represented by a file descriptor and a small amount of memory, maps to a separate thread or process, a very heavyweight operating system object. It’s a programming convenience, but it’s massively wasteful.</u>**

3. NGNIX has solved this problem by an event driven architecture: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8as2vsyx19r8xamn82ie.png)
(Figure out the reason why it's aster than a Blocking, Multiprocess Architecture [here](https://www.aosabook.org/en/nginx.html)).
With **appropriate system tuning**, NGINX can scale to handle hundreds of thousands of concurrent HTTP connections per worker process, and can absorb traffic spikes without missing a beat.

4. Updating Configuration and Upgrading NGINX on the fly, without any dropped connections, downtime, or interruption in service!

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

You can find a brief of all things I have mentioned about in [this infographic](https://www.nginx.com/wp-content/uploads/2015/04/nginx_architecture_thumbnail.png).
Microsoft Loop New Product in Office 365 - Looks stunning
Published: 2022-07-05 10:45:22

---
title: Microsoft Loop New Product in Office 365 - Looks stunning
published: true
date: 2021-12-29 09:19:28 UTC
tags: 
canonical_url: https://lkgforit.com/microsoft-loop-new-product-in-office-365-looks-stunning
---

# Introducing Microsoft Loop

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640769476587/03pGk83I7.png)

## Think, plan, and create - together

[https://www.microsoft.com/en-us/microsoft-loop?ms.url=microsoftcommicrosoft-loop](https://www.microsoft.com/en-us/microsoft-loop?ms.url=microsoftcommicrosoft-loop)

Microsoft Loop is a new app that combines a powerful and flexible canvas with portable components that stay in sync and move freely across Microsoft 365 apps.

[https://youtu.be/BkhaV46HM2E](https://youtu.be/BkhaV46HM2E)

### Work together, even when youre apart

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640769282718/Ha7njUpfZ.png)Cocreate, build on each others ideas, and add a little personality. Loop is an entirely new way to work togetherdesigned for the hybrid world.

### See everything in one place

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640769288806/WoHw8S5IL.png)Organize what you need for your project, such as files, links, and data from other apps, in a single workspace. Work in chat, meetings, or documents using portable components that are always up to date.

### Stay in sync and on track

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640769296559/kPp-2u9PJ.png)Jump in, catch up, and get going with Loop. Connect naturally with emojis and expressions. Easily collaborate and track progress with notifications, highlighted changes, status labels, and task lists.

## Microsoft Loop meets you where you are

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640769785219/28Az0Ernr.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1640769802072/G-Z5J3m_J.png)

## Loop components

Collaborate in the flow of work with Loop components. Work together on lists, tables, notes, or even a customer sales opportunity from Dynamics 365 on a Loop page or in a chat, email, meeting, or document. Loop components in Microsoft 365 apps are rolling out now.
Top 5 CRYPTOCURRENCIES That Could Dominate In 2022
Tags: webdev, productivity, beginners, programming
Published: 2021-12-29 09:15:57

**Top 5 CRYPTOCURRENCIES 2022**
In this Blog i have discussed about Top 5 CRYPTOCURRENCIES That Could Dominate In 2022. You can invest in any of these Cryptocurrencies in 2022. Lets start The Blog:-
[Top 5 CRYPTOCURRENCIES That Could Dominate In 2022](https://codexashish.com/2021/12/top-5-cryptocurrencies-that-could.html)

##New & Trending Topics:👇
[Top 10 Trending Technologies to Learn in 2022](https://codexashish.com/2021/12/top-10-trending-technologies-to-learn.html)
[Top 10 Programming Languages You Must Know In 2022](https://codexashish.com/2021/12/top-10-programming-languages-you-must.html)
[Machine Learning Complete Roadmap 2022](https://codexashish.com/2021/12/complete-roadmap-of-machine-learning.html)

##Complete Roadmap 2022:-👇
[Python Complete Roadmap 2022](https://codexashish.com/2021/12/complete-roadmap-of-python-programming.html)
[Machine Learning Complete Roadmap 2022](https://codexashish.com/2021/12/complete-roadmap-of-machine-learning.html)
[C++ Complete Roadmap 2022](https://codexashish.com/2021/12/complete-roadmap-of-c-programming.html)
[Java Complete Roadmap 2022](https://codexashish.com/2021/12/java-complete-roadmap-2022.html)
[Data Structure Complete Roadmap 2022](https://codexashish.com/2021/12/complete-roadmap-of-data-structure.html)


##Some Laravel Tutorial for developer:👇
[Laravel 8 Interview Questions and Answers in 2022 (Part #1)](https://codexashish.com/2021/12/laravel-8-interview-questions-and.html)
[Laravel 8 Interview Questions and Answers in 2022 (Part #2)](https://codexashish.com/2021/12/laravel-8-interview-questions-and_22.html)
[Advance Laravel 8 Interview Questions and Answers 2022](https://codexashish.com/2021/12/advance-laravel-8-interview-questions.html)
[Everything About Laravel 8 Composer 2022 | Composer in Laravel 8](https://codexashish.com/2021/12/everything-about-laravel-8-composer.html)
[Laravel Jetstream vs Laravel ui  vs Breeze](https://codexashish.com/2021/12/laravel-jetstream-vs-laravel-ui-vs.html)

##Python Concept and Projects:-👇
[10 Best Python Libraries For Machine Learning](https://codexashish.com/2021/12/10-best-python-libraries-for-machine.html)
[Alarm Clock in Python with GUI](https://codexashish.com/2021/07/alarm-clock-in-python-with-gui.html)
[Tic Tac Toe Game Using Pygame in Python](https://codexashish.com/2021/06/tic-tac-toe-game-using-pygame-in-python.html)

**Thankyou for reading my blogs.**
#####My Website:👇
[CodexAshish](https://codexashish.com/)
FAQ In Tailwind css and JavaScript
Tags: css, javascript, tailwindcss, webdev
Published: 2021-12-29 09:15:49

Previously, we made faq in HTML and CSS with the help of JavaScript. So here we try to make the same thing in tailwind CSS with a new utilities class and the same JavaScript we used.

Also Read:- [Pricing Table In Tailwind CSS](https://w3hubs.com/faq-in-tailwind-css-and-javascript/)

In this element, we used utilities for font, color, and alignment classes. This is 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/faq-in-tailwind-css-and-javascript/)
Here's what inside Stan Lee's Chakra The Invincible NFTs collection

Published: 2021-12-29 08:48:56

Chakra The Invincible, an animated superhero that is the co-creation of Stan Lee, will soon be available as NFTs. Yes, BeyondLife.club is bringing Stan Lee’s Chakra The Invincible NFTs to be live this December. 

**Chakra The Invincible NFTs collection comprises the following.**

**Collection 1 - Chakra Artpunks Loot Box**

It consists of a limited collection of 6865 distinctive artpunks, and its buying price is $25 per artpunk. 

**Collection 2 - Chakra Artpunks**

It features a wide range of chakra characters with signature attributes. It has 15 editions with a minimum bid price of $200. 

**Collection 3 - Animated Living Comic Book Cover**

The animated living comic book cover NFT will hold on to the essence of the originality of the [chakra the invincible](https://chakra.beyondlife.club/?fsz=home). It has 2 editions with a minimum bid price of $500 each.

**Collection 4 - The Jumbo Juke Box**

**This collection includes the following exciting ones.**

Common and uncommon edition of the book cover of Chakra The Invincible
Rare edition of the comic book cover
Ultimate rare comic book cover edition
Secret silver age rare comic book cover
Animated Chakra The Invincible videos

**It consists of 5400 items and its buy price is $25.**

**Collection 5 - Seven Chakra’s Powers**

It consists of 3D animations of Chakra, indicating 7 different powers. The number of editions available is 7, and the minimum bid price of $1000.

**Collection 6 - Stan Lee’s bday special NFT**

Last but not least, on the commemoration of Stan Lee’s 99th birthday, the special edition of NFT is dropping, a minimum bid price of $100,000.

**Above all, the one who buys more than 5 NFTs could get access to the Treasure Box.**
HTML→ the horns of the links
Tags: webdev, html, beginners, programming
Published: 2021-12-29 08:48:14

Hello friends, today we are going to talk about links in html! YES because they exist! and they are an incredible tool to keep the information more connected without the need to search for it on our own. Creating something like a spider web.🕸️🕷️

How does it work ?🤔 
Very simple!! using the tag:

```html
<a href="..." >Link Text</a>
``` 

This way we create a "hyperlink" similar to a word or google document.

We can classify them in :

- **Internal**  links  👉 inside the website 
- **External** links 👉 within another website of the same domain.
- **Position** links 👉 inside a section of the website. 

Let's look at some examples 😎:

### Position Links: 
When we create internal links inside the page,  the links are called ✨***anchors***✨ and allow us to move in the page:

```html
<ul>
  <li>
    <a href="open">link 1</a>
  </li>
  <li>
    <a href="close">link 2</a>
  </li>
</ul>

<div id="open" class="section"></div>
<div id="closed" class="section"></div>
``` 

### External Links
The navigation menus of websites, which are an essential component, are built with links too! :

```html 
<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto: myemail@example.com">Email</a></li>
  <li><a href="tel: +75 19864321495">Phone</a></li>
</ul>
``` 


That's not all! Links can be camouflaged between the different elements of the website! From an image to the logo almost everything can be a link but it is important to always keep the necessary ones because links are related to the SEO of a website.

Alright guys! I think we'll call it a day, I hope you like today's post! Remember guys always be the best version of you!  😎
What is the difference between TypeScript and PropTypes
Tags: react, typescript, javascript, webdev
Published: 2021-12-29 08:46:48



If you've been working with React for a while, you probably heard about the term PropTypes.

PropTypes helps us check if the props we are passing to our components are in the type we expect them to be(string, number, object, etc.).

```
export function DisplayTitle({ title = 'Hello' }) {

 return (
  <div>
   <H2>{title}</H2>
  </div>
 );
}

DisplayTitle.propTypes = {
 title: PropTypes.string.isRequired
};

```

We can perform the same action with TypeScript using an Interface or a Type.

```
export type DisplayTitleProps = {
 title: string
};

export function DisplayTitle({ title = 'Hello' }: DisplayTitleProps) {

 return (
  <div>
   <H2>{title}</H2>
  </div>
 );
}
```

One might think that PropTypes was invented to serve the poor JavaScript developers. "At least let them have their props typed!".

But there is a significant difference between typing our props with PropTypes and TypeScript.

TypeScript checks for errors in the compilation process. While generating the JavaScript files, TS will check for any errors. TS will cancel the compilation process and yield an error if any are found.

PropTypes, however, checks for errors on runtime. Your prop types will be checked when you run your app in the browser. If anything is wrong, an error in the console will appear:

```
Warning: Failed prop type: Invalid prop `id` of type `string` supplied to `sum,` expected `number.`
```

When will we prefer using PropTypes over TypsScript for our props? 

A typical use case for preferring PropTypes over TypeScript is receiving data from a server. TypeScript has no way to find out if the data we receive from the server is in the type we expect it to be (unless you're getting the data on build time when statically building the site).

For such a case, we will have to use PropTypes to check that the data we get from the server is in the correct type.

There is another solution, however. You can create a ["Type component"](https://blog.bitsrc.io/sharing-types-between-backend-and-frontend-with-the-bff-pattern-553872842463) using [Bit](https://bit.dev/). Now that your Types are components, you can install them in both the backend and the frontend. By doing so, we prevent the possibility of getting the wrong type of (without having to type-check on runtime). 

Another great advantage with this method is that now we have only a single source of truth. Every time we want to add a property, we update the Type component. After updating our component, we can install the new version in the back and frontend, and we're all set! 

---

- For more posts like this [follow me on LinkedIn](https://www.linkedin.com/in/nitsan-cohen/)

- I work as frontend & content developer for [Bit](bit.dev) - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).