teleren/devto huggingface dataset:
Basic react questions??
Tags: react, reactquestions, jsx, state
Published: 2021-06-02 04:23:35

##What is React?

React is a open source library built and managed by facebook used for building user interfaces.
React is declarative, means tell the react what you want and react build the actual ui.

##Why does react need a root element?

Since, react is all javascript it needs an element where it can render it's own dom. and the react is all about javascript not anything related to html and the html tags we used in react called jsx not html.

##Diff between state and props?

State is a way for component to store an internal state and you can store any kind of value in state.

props is where store stuff or value that is going to the next component or can say being passed to the component from the parent component.

##What is context?
Context is a gloally available prop that should only be used on occasions when we need something that is going to be everywhere in application. for e.g user auth.

##Which lifecycle event is the most common?

componentdidmount, componentdidupdate, componentwillunmount are the methods that we use most frequently in class based components but in the case of function based components we only need one hook 
that is able to do the work of all these methods and that is useEffect.

## The purpose of render function
The render function is used to update the user interface
It returns a single React element which is the representation of the native DOM component.
To render a React element into a root DOM node, pass both to ReactDOM.render()

##What is component?
Components are the building blocks of any React application, and a single app usually consists of multiple components. It splits the user interface into independent, reusable parts that can be processed separately.

##What is virtual DOM?
React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, virtual DOM changes only that object in the real DOM, rather than updating all the objects.
6/1 TIL: Unicode utf8mb4, sql COLLATE
Tags: todayilearned
Published: 2021-06-02 03:51:44

Unicode

- A character set that defines different character encodings, like UTF-8, UTF-16, and UTF-32

UTF-8

- encodes common ASCII characters using 8-bits by assigning every character a unique number called a code point
- vs. utf8mb4: a preferred alternative since it stores a maximum of four bytes per code point instead of 3 (utf8 is an alias of utf8mb3)—meaning utf-8 might not support some characters from other languages and symbols

An example of a sql file with the utf8mb4 charset

```

CREATE TABLE IF NOT EXISTS dbName.tableName

(

`id` int NOT NULL AUTO_INCREMENT,

`email`          varchar(40) COLLATE utf8mb4_unicode_ci NOT NULL,

`username`       varchar(20) COLLATE utf8mb4_unicode_ci  NOT NULL,

`password`       varchar(200) COLLATE utf8mb4_unicode_ci DEFAULT NULL,

PRIMARY KEY (`id`),

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

```

- Collation provides the sorting rules, case, and accent sensitivity properties for the data
- You specify the COLLATE where ci stands for 'case insensitive'
🔴 Build NETFLIX Clone using HTML and CSS (RESPONSIVE)
Tags: webdev, beginners, tutorial, html
Published: 2021-06-02 03:37:04

Hello, Everyone. I Built Netflix Clone using just HTML & CSS. I Just Love to build these to practice my HTML & CSS Skills. I made a tutorial video to help beginners to improve there html & css skills to build real world projects.

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

**➜ Tutorial Video:**

{% youtube 9nywQdjKnJI %}

**➜ Github:** https://github.com/somanath-goudar/html-css-projects

**Note:** [Subscribe](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA) to My YouTube Channel, This Week I Will also be building **Twitter and Hulu clone** with just HTML & CSS.

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

**➜ You may also like my other posts:**

{% link https://dev.to/somanathgoudar/facebook-clone-using-just-html-css-beginners-tutorial-2fe5 %} 

{% link https://dev.to/somanathgoudar/build-a-youtube-clone-with-just-html-css-for-complete-beginners-4fk1 %}

{% link https://dev.to/somanathgoudar/build-tiktok-clone-in-just-30-mins-using-html-and-css-213l %}
Noise Proof Curtains and Noise Barrier for Machine Sound Control
Published: 2021-06-02 03:32:06

SoundBlanketCurtain is located in Guangzhou city of Guangdong province, where can be called the hometown of acoustic insulation materials in China. With production capacity of above 100,000 m2 per year, our company specializes in producing fire retardant sound blanket and sound curtain, which are widely used in construction industry as the flexible noise control solution all over the world.

Sound Proof Curtain and Noise Barriers for Machine Noise Control

Products

Outdoor Noise Blanket Sound Absorption High Quality Curtains And Drapes
100% Polyester Cationic Dressing Rooms Curtains for Home And Hotel
Iso Certificate Glass Wool Board/Pipe/Blanket/Brick Manufacturer China
Heat Insulation Sound Insulating Polyester Wool Blanket for Industrial Furnace

Our projects stand all over the word: São José dos Campos Brazil, Des Moines United States, Leipzig-Halle Germany, Kanpur India, Luanda Angola, Shizuoka Japan, Kingston-upon-Hull United Kingdom, Edmonton Canada, Vilnius Lithuania, Lahore Pakistan, Dar es Salaam Tanzania, Greensboro United States, etc.

As a leading acoustical curtains manufacturer, we are currently export 30% of our sound blanket and sound curtain products worldwide. Our well-equipped facilities and excellent quality control throughout all stages of production enable us to guarantee total customer satisfaction. All of our sound blanket and noise curtain products comply with international quality standards and are greatly appreciated in a variety of different markets throughout the world.

They are often used in generators noise, pile drivers noise, condenser enclosure, pressure cleaner noise, impact pile driver noise, event barrier rental service, acoustic absorption curtain, acoustic ceiling insulation blanket, and so on.

Tag: acoustic curtain fabric, blanket on the wall, industrial sound dampening curtains, sound insulation blanket, very thick curtains

Website: https://www.soundblanketcurtain.com/product/acoustical-curtains-manufacturer/
Update postgres to sqlite3 for rails 6 using Docker Compose
Tags: rails, postgres, sqlite3, docker
Published: 2021-06-02 02:54:10

Today I am gonna show how to switch database from postgres to sqlite3 in rails application.

1. Update Gemfile
```
gem 'sqlite3', '~> 1.3', '>= 1.3.3'
```

2. Open Dockerfile and install sqlite3 package
```
FROM ruby:3.0.0

LABEL maintainer="Radin <radin@instedd.org>"

RUN curl -sL https://deb.nodesource.com/setup_14.x | bash - && \
  echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
  curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
  apt-get update -qq && \
  apt-get install -y vim nodejs sqlite3 libsqlite3-dev yarn && \
  apt-get clean && \
  rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

RUN mkdir /app
WORKDIR /app

COPY Gemfile* package.json yarn.lock /app/

RUN gem install bundler -v 2.1.4 && \
  bundle install --jobs 20

COPY . /app
```
3. Update docker-compose.yml
```
version: '3'

volumes:
  bundle:
  db:

services:
  db:
    image: nouchka/sqlite3:latest
    volumes:
      - db:/root/db
    stdin_open: true
    tty: true

  web: &rails
    build:
      context: .
      dockerfile: Dockerfile
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -b '0.0.0.0'"
    volumes:
      - .:/app
      - bundle:/usr/local/bundle
      - ./node_modules:/app/node_modules
    tmpfs: /app/tmp
    depends_on:
      - db
    env_file: app.env
    tty: true
    stdin_open: true
    ports:
      - "3000:3000"
```
4. And finally, Update config/database.yml
```
default: &default
  adapter: sqlite3
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

development:
  <<: *default
  database: db/mydb_development.sqlite3

test:
  <<: *default
  database: db/mydb_test.sqlite3
```

Cheer!
How to deploy Netlify
Published: 2021-06-02 02:12:26

Heeeeey guys, quick tip for those of you who need to deploy your app, there are several ways to deploy your app for free, but what I like the most is Netlify because it's so simple and fast:

1- Once logged in, click on ```New site from Git``` to be able to choose which site you want to upload:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n6ty4jcw31gnepfnvoq.png)

2- Choose where your code is stored:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fisvylffmmmgbib7zf4g.png)

3- Choose your repository (GitHub):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9t74m8zol6tv6cj77e3.png)

4- He will ask to set up your build information in<b>Base directory</b> you must put the path to your main page,, <b>Build command</b> this is where you put the command that will generate your project build, I always put it <b>CI= npm run build</b> ```CI = <b>CI</b> means continuous integration```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gizplmq4x9dkbslxn4o6.png)

5- If everything is ok, it will show this page saying that your application was successfully uploaded.
To change your domain name, click on Domain settings:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijm77pszfp490fg15ozo.png)

6- Click Add custom domain to place a domain you have purchased or click <b>Edit site name</b> to change only the Netlify domain name:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxf595xuo6bdnu6ebvf2.png)

And voila, your application is already online and 100% free.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vgkbp34j7hu4wioz9tk.gif)

Thanks for reading.
Print the raw query from dbo for debugging Joomla
Tags: php, joomla, debugging, programming
Published: 2021-06-02 01:57:12


We can use Joomla's `replacePrefix` function which dumps out the query in a format that can be inserted straight into the likes of phpMyAdmin.

Here's a simple example:

```php
$db = JFactory::getDbo();

$query = $db->getQuery(true);
$query->select($db->quoteName('title'))
      ->from($db->quoteName('#__content'));
$db->setQuery($query);

// Dump the query
echo $db->replacePrefix((string) $query);
```

Will output the following:

```shell
SELECT `title` FROM `jos_content`
```
Renaming a remote on GIT
Tags: github, git, bitbucket
Published: 2021-06-02 01:53:12

Use the `git remote rename`  command to rename an existing remote.


The `git remote rename`  command takes two arguments:

- An existing remote name, for example, `origin`
- A new name for the remote, for example, `destination`



## Example



```shell
# view existing remotes of a repo
$ git remote -v
> origin	git@github.com:itsdanielfelix/my-awesome-repo.git (fetch)
> origin	git@github.com:itsdanielfelix/my-awesome-repo.git (push)

# change remote name from 'origin' to 'github'
$ git remote rename origin github

# Verify it
$ git remote -v
> github	git@github.com:itsdanielfelix/my-awesome-repo.git (fetch)
> github	git@github.com:itsdanielfelix/my-awesome-repo.git (push)
```
Removing a remote from GIT
Tags: github, git, bitbucket, gitlab
Published: 2021-06-02 01:45:21

Use the `git remote rm`  command to remove a remote URL from your repository.


The `git remote rm`  command takes one argument:

- A remote name, for example, `destination`


## Example

```shell
# view all remotes of a repo
$ git remote -v
> origin	git@github.com:itsdanielfelix/my-awesome-repo.git (fetch)
> origin	git@github.com:itsdanielfelix/my-awesome-repo.git (push)
> gitlab	git@gitlab.com:itsdanielfelix/my-awesome-repo.git (fetch)
> gitlab	git@gitlab.com:itsdanielfelix/my-awesome-repo.git (push)

# Remove a remote
$ git remote rm gitlab

# Verify it
$ git remote -v
> origin	git@github.com:itsdanielfelix/my-awesome-repo.git (fetch)
> origin	git@github.com:itsdanielfelix/my-awesome-repo.git (push)
```
Guía de configuración del entorno de desarrollo de Kotlin
Published: 2021-06-02 01:39:12

Para poder dar nuestros primeros pasos con Kotlin, debemos instalar las herramientas que necesitamos, así que aquí está la serie de pasos que debes de seguir:

#1) Instalación de Visual Studio Code
Este editor de código esta disponible para Mac, Windows y Linux. Puedes descargarlo gratuitamente desde su [sitio oficial](https://code.visualstudio.com/#alt-downloads) ahí también encontrarás las instrucciones de instalación para cada sistema operativo.

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

#2)Descargando la extensión: Kotlin Language.
Ya que tenemos instalado Visual Studio Code, vamos a proceder a instalar la extensión para Kotlin. Vamos a dirigirnos a la pestaña de extensiones, para después escribir el nombre de la extensión que deseamos en la barra de búsqueda, este caso “Kotlin Language”, para así ver la extensión en las opciones recomendadas.

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

Finalmente, daremos  instalar y listo, la extensión de Kotlin Language estará exitosamente instalada en nuestro editor de código.

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

#3) Descargando la extensión: Code Runner
De igual forma nos dirigiremos a la pestaña de extensiones y escribiremos el nombre de la extensión de nuestro interés, en este caso Code Runner.

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

Finalmente vamos presionar el botón de instalar y tendremos la extensión instalada en Visual Studio Code. 

#4) Instalando el compilador de Kotlin
Para comenzar a ejecutar nuestro programa de Kotlin, debemos de instalar el compilador, puedes descargarlo desde [este enlace](https://github.com/JetBrains/kotlin/releases/tag/v1.4.32)

Ya descargado el archivo .zip vamos a extraerlo y a colocar la carpeta kotlinc en alguna parte de nuestro sistema de archivos, que no olvidemos.

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

Procederemos a editar nuestra variable de entorno PATH  y pondremos la dirección  donde se encuentre la carpeta kotlinc > bin.

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

Reinicia tu computadora y ya tendrás todo lo necesario para comenzar a desarrollar con Kotlin.
A little history
Tags: devpride
Published: 2021-06-02 01:25:04

[Note]: # (✨This template is only meant to get your ideas going, so please feel free to write your own LGBTQIA+ story in honor of Pride Month! ✨)



I'm proud to be a woman who grew up in the 80s when we had to dodge rocks, eggs and worse, marching in The gay pride parade and parading at Fantasy Fest. We were beautiful inside and out! Sadly, I buried many friends from 1985 to 1995, who died of AIDS. I’m so proud of our community for the genuine love you give to the LGBTQIA community. Blessings 🙏

## Together We Can Change the World
Collab lab team 24 summary

Published: 2021-06-02 00:46:20

The Participants

-Camila Parada
-Juan Pablo Rodríguez
-Ana Mafla
-Karen Rodríguez

The Mentors

-Mike Lambert 
-Fauricio Valencia 
-Lizeth Bañol

On Sunday, May 30, we finished our spring 2021 cohort and we are very happy to see all the effort and commitment of each of our Collabies.

Since we started spring we could see that they were people with advanced technical knowledge, very active and eager to learn from each other. They had an excellent adaptation, communicated assertively and empathetically.
They did everything with a big picture mentality where they thought a lot about things like architecture and state administration. In the end, they were all masters of custom hooks.
PR reviews were a new thing at first, but everyone was quickly adding a lot of value with their ideas.
After we managed to complete the AC project, everyone started learning how to unit test... which is not easy, especially with the task of having to do a mock Firebase.

They did a wonderful job and we are so proud to have been their mentors. 

(In this photo Karen Rodríguez is missing, who could not be present at the last team meeting, but we still recognize her valuable contributions).
Team 18 Recap

Published: 2021-06-02 00:43:21

It has been an incredible few months! Every time a cohort ends up in the Collab lab, we look back and realize the ongoing effort, dedication, and huge learning curve we have with mentoring and collaborations.
This time we were lucky to have Juliana Gomez, Indira Gutierrez Alejandro Ñañez, Lizeth Bañol as mentors for Latin America.
Our participants were:
-Veronica Machado
-Cristina Rueda
-Maria Angel Acosta
-Alejandro Mauricio Coca
All of them are innate researchers, they always look for answers that give them the best for their tasks, they have a good attitude towards the different alternatives that are presented to them to improve their project, they know how to work as a team, they are empathetic and very proactive, they had an excellent management of JavaScript, React and learned about firebase.
They did pair programming, they designed a very good interface in their application.
We loved seeing how they evolved in these months.
[PT-BR] Conheça a Linguagem de programação em Blocos - Scratch
Tags: braziliandevs, showdev, beginners, scratch
Published: 2021-06-02 00:35:39

###1. O que é uma linguagem de programação baseada em blocos?

Resumidamente uma linguagem de programação baseada em blocos funciona como um quebra-cabeça,  no qual cada peça é um comando e quando montamos uma sequência de peças conseguimos escrever um programa.   
 <strong>Exemplos :
    [Scratch](https://scratch.mit.edu/)
    [Blockly](https://blockly.games/)
    [MIT APP Inventor 2](https://appinventor.mit.edu/)
</strong>

###2. O que é o Scratch ?

O Scratch é uma linguagem de programação visual baseada em blocos, desenvolvido pelo grupo Lifelong Kindergarten no Media Lab do MIT com o intuito de ensinar lógica de programação para crianças e adolescentes de 8 a 16 anos de idade. Ele é usado em mais de 150 países, atualmente está disponível em mais de 40 idiomas sendo fornecido gratuitamente para os principais sistemas operacionais (Windows,  Linux  e Mac).

###3. Quem utiliza o Scratch ?

Por ser uma linguagem de rápido aprendizado e muito intuitiva, qualquer pessoa mesmo sem nenhum conhecimento anterior é capaz de programar com o Scratch, ele é muito usado por pais que querem ensinar seus filhos a programarem. Também é utilizado por professores em escolas do ensino Fundamental e Médio para introdução de lógica de programação.

### 4. O que é possível fazer com o Scratch ?

Com o Scratch, é possível criar jogos próprios ou até mesmo recriar jogos famosos, montando personagens com movimentos, vozes, inserindo trilhas sonoras e ambientes diferentes em cada jogo. Você consegue também instalar extensões com kits diferenciados que deixam os jogos ainda mais interativos. 

###5. Exemplo de Codigo feito por mim no scratch:

![scratch code example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/diy33b2fx1zvpbhjiq14.png)

(calculo da área de um retângulo)

Caso queira realizar um projeto comigo (ou até mesmo bater papo), não hesite em me enviar uma mensagem, acesse o link das minhas redes sociais abaixo: ⤵️

[Instagram](instagram.com/celycodes)
[Twitter](twitter.com/celycristhyne)
[GitHub](https://github.com/celenny)
[LinkedIn](https://www.linkedin.com/in/celenny)
[Scratch](https://scratch.mit.edu/users/celennycristhyne/)
Shallow Routing in Next.js
Tags: nextjs, routing
Published: 2021-06-03 15:34:34

---
title: Shallow Routing in Next.js
published: true
date: 2021-06-02 00:00:00 UTC
tags: nextjs, routing
cover_image: https://images.unsplash.com/35/HHEvkhEsQLaNDRkui4fg_fullsize.jpg
canonical_url: https://www.netlify.com/blog/2021/06/02/shallow-routing-in-next.js/
---

Hello!

Normally, I like to go deep with my posts, but let’s not this time: Let’s talk about shallow routing in Next.js!

## What the heck is shallow routing?

Shallow routing is when you change your website’s URL without re-running data fetching methods again. In the case of Next.js, it means you have one page component that covers multiple URLs! This is particularly useful for adding query strings, and routes that might explain the content of your pages as they change to user behavior.

## How do I use it?

If you’d like to use shallow routing in your applications, you don’t do shallow routing with the `<Link>` component built into the framework, which is what you might expect. Use the built-in `useRouter` hook, and add `{ shallow: true }` to your `router.push` commands, like so!

```js

useEffect(() => {
  router.push('/some-other-route', undefined, { shallow: true })
}, [someVariable])

```

Wanna see it in action? In [this Choose Your Own Adventure](https://next-adventure.netlify.app/) app, you can navigate through the story **without** querying the database multiple times for new characters to be a part of it! The code for the routing [is here](https://github.com/cassidoo/next-adventure/blob/master/pages/s/%5B...story%5D.js#L21-L23), and you can see how the entire project was built [in this demo video](https://www.youtube.com/watch?v=mMU-j0WoTCs&t=3020s).

## Can I do this myself?

Heck yeah you can! Here’s a starter project for ya to get building:

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/cassidoo/next-netlify-starter&utm_source=blog&utm_medium=shallownext-cs&utm_campaign=devex-cs)

(Clicking this button will deploy a Next.js starter project to Netlify, and clone it to your chosen Git provider)
Different Staging Environments In Azure Static Web Apps
Tags: azurestaticwebapps, azure, githubactions, deployment
Published: 2024-04-06 20:06:39

---
title: Different Staging Environments In Azure Static Web Apps
published: true
date: 2021-06-02 00:00:00 UTC
tags: AzureStaticWebApps,Azure,GitHubActions,Deployment
canonical_url: https://blog.markoliver.website/Different-Staging-Environments-In-Azure-Static-Web-Apps
---

I have been trying to get the initial load of my blog posts much [faster](https://blog.markoliver.website/Speeding-Up-The-Initial-Load), and during that work, it was annoying me that in order to test certain things like configuration, I had to push my change to production.  
Normally I don't mind a push to production, but as I was experimenting I kept breaking things (the change I was making, was an Azure config change, and does not reflect locally).

This is not ideal.

In reading some more Azure documentation, I came across a reference to a "staging environment", which is also mentioned in the Free tier of the [Azure Static Web Apps plans](https://learn.microsoft.com/en-us/azure/static-web-apps/plans) (now it is GA), and it states there are 3 available!

This finally registered with me, and I went looking for some information on the different staging environments for an Azure Static Web App.

I have had a look around the MS docs, and cannot find much where this is talked about, but I came across this [article](https://learn.microsoft.com/en-us/azure/static-web-apps/review-publish-pull-requests) detailing how they work with Github Actions.

This is amazing!

For up-to 3 branches created, a different staging environment will be automatically created for you to test!

Who knew!

I am not going to recreate the steps here, other than to say, create a branch, create a PR, commit stuff, the PR will get updated by the github action with the Url of the staging env.

Go read the [docs](https://learn.microsoft.com/en-us/azure/static-web-apps/review-publish-pull-requests)

Having now used it, it is seamless within GitHub and means I will no longer break the blog when trialling new ideas!

Awesome!

![Benny from Lego Movie saying Awesome](https://media.giphy.com/media/mXnO9IiWWarkI/giphy.gif)