teleren/devto huggingface dataset:
Why React is UI Library and not a Framework ?
Tags: javascript, react, webdev, programming
Published: 2022-02-14 04:12:12

> **Understanding difference between Library and Framework**

- When we call something as a framework it has flexibility of doing multiple things at a time.

- Library is kind of focus on just one thing and get it done.

- When we use framework , the framework is in charge of the flow.

- When we use library , you are in charge of the library because you will be choosing when and where to call that library.

> **Now let's understand about React**

- React is User Interface Library because react was actually invented or designed coded to solve the problem of User Interface Development.

![Oustide function for React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a03dcy2x2i1tgkkds1xq.png)

- If react would have framework :

1. We would have routing inside built in , but we don't have.
2. We would have testing framework built in , but we use something like jest or react test library.
3. For data fetching we have to use axios or fetch api to achieve that.
4. For Building , we have infrastructure by yourself or web pack.
5. For state management , we have to redux or any other tool to do that.

Notification system or localization or anything , practically anything you want to do in react based application you have to bring it from outside.

React is only meant for doing this , and that's great advantage because you have the liberty of what you want to use versus you don't want to use.

According to your project need , you actually has the ability to choose that's why react is so powerful in terms of giving you the liberty, giving you the flexibility of doing things in you way.

You must just focus on building things and bringing things whatever you need and yes that's why 

## "React is Library and not a Framework"
[SHARING] Caduceus Testnet Trial Event
Tags: webdev, blockchain, testdev
Published: 2022-02-14 03:47:32

Caduceus is the world’s first metaverse blockchain, evolving open-source software and smart contracts; enabling tokenisation, DeFi, NFTs and GameFi. Performance, speed and security are at the core of the ecosystem, with an emphasis on empowering developers and the wider community to build, create and connect. Head to the newly launched testnet to experience the network environment now.
 
A chance to win in three easy steps: register, try it, and submit

**1. Register**
Fill in the [form](https://forms.gle/izSF4PnTHAL5sQ5C8)

**2. Complete the testnet trial**
Check out our helpful tutorials, then try out the testnet

• Testnet link: [https://dev.caduceus.foundation/testNetwork/](https://dev.caduceus.foundation/testNetwork/)

• Caduceus IDE link:  [https://ide.caduceus.foundation](https://ide.caduceus.foundation) 

• Video tutorial: [https://youtu.be/f4fcc9OjdeY](https://youtu.be/f4fcc9OjdeY )

• Developer documentation: [https://dev.caduceus.foundation/](https://dev.caduceus.foundation/)

• Official Demo Link :  Official Demo (Contract and dApp)

[https://github.com/CaduceusMetaverseProtocol/demo-dapps](https://github.com/CaduceusMetaverseProtocol/demo-dapps) 
[https://github.com/CaduceusMetaverseProtocol/demo-contracts](https://github.com/CaduceusMetaverseProtocol/demo-contracts) 

**3. Submit**
Complete your trial, click the link [https://forms.gle/V1M996KnUmaFeGRS8](https://forms.gle/V1M996KnUmaFeGRS8) and fill in the details.
 
***Rewards***
a. Complete your trial and share your thoughts (written or video):
• 10 x 1000 CMP1 
• 20 x 500 CMP1
• 30 x 200 CMP1 
 
b. Or, complete your trial, write a technical article and publish it on a tech blog/forum:
• 20 x 500 CMP1
 
Rewards actioned one week after event closing date

Please note, CMP1 is a Caduceus futures token. When CMP is listed on the first exchange (dex/cex), we’ll announce the conversion ratio and convert CMP1 to CMP

***Event dates***

•	Registration: 11 February 2022 (00:00 GMT)

•	Registration deadline: 18 February 2022 (23:59 GMT)

•	Event ends: 25 February 2022 (23:59 GMT)

***Terms & Conditions***

•  Event ends 25 February 2022 (23:59 GMT)

•  The organiser requires one week from event end date to verify and distribute rewards 

•  Failing to fill in the Google Form will cause disqualification from the event

•  Exiting the Discord group before 4 March 2022 will cause disqualification from the event
Why you need the Cloud Pt3
Tags: cloud, cost, global, itservices
Published: 2022-02-14 03:33:14

**The Cloud **provides on demand IT services over the internet with a pay as you go model, that helps in making services readily available to you when you in need it and in the proportion,capacity or measure you need.More reasons the cloud is so important is:
4.The Cloud enable and enhances right capacity decisions where you do not need to **guess capacity** needed in your infrastructure.Cloud Computing helps in mopping up waste like idle resources or insufficient capacity.
With the Cloud you can access and shut down resources as you need,scaling up or down when and if needed.
5.Cloud Computing provides **increased speed and agility** providing IT resources at the tip of the fingers and a click away.IT resources ordinarily which would have taken weeks or more  to access is made available in minutes.The organisation deploys faster and provides services quicker.
Experimenting,Testing and Innovation have a shorter cycle in the organization.Efficiency and Effectiveness is enhanced.
6.The organisation that embraces Cloud computing will be able to focus on its core business and  solidify its competitive advantage as against building,acquiring and maintaining  data centres facing its main business and focusing on its customer rather than using its resources on keeping the datacenter running.
7.The most beautiful reason why you need the Cloud is that, with the cloud you can go **Global** in minutes because of the infrastructure provided to you in the Cloud, you have access to various geographical regions at the click of a button at a minimal cost.
**_Conclusion_**
Self-Taught Developer Journal, Day 60: TOP Building Rock Paper Scissors UI cont.
Tags: webdev, beginners, codenewbie, devjournal
Published: 2022-02-14 03:19:46

Today...

I finished redoing my layout. First, I commented out my original HTML code up to the grid-container class so I could experiment with using CSS grid. I created some temporary divs to make a 3x3 again to test the grid layout

![3x3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sx4g29hl2zqrjkeij6re.png)

![grid-container code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjrznievz4gmxw7a5g1t.png)

Once I got the grid set up how I wanted it, I uncommented and removed the parent elements I used to group my original classes. Now I have 9 block level classes which equated to my 3x3 grid container instead of redundant groupings.

![Updated Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qeickdeo941b3bxozrm8.png)
 
When I was messing with the mobile view, I got frustrated because grid container not responding to its parent flex container sizing. I wasn't able to figure it out and plan to revisit it at a later time.

Next, I used images for my rock, paper, and scissors buttons I got for free from Pixabay. I added the Orbitron font from Google Fonts to my file and used it to style my text.

![Rock Paper Scissors UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mlg8halosiujl5fafxa.png)

I am almost done with the UI. I just need to do a few more style edits and also have the game use the images when a selection is made.

## Resources
[The Odin Project](https://www.theodinproject.com/paths/foundations/courses/foundations/)
[Revisiting Rock Paper Scissors](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/revisiting-rock-paper-scissors)
https://pixabay.com/images/search/rock-paper-scissors/
React Hooks: useMemo()
Tags: react, javascript, beginners, programming
Published: 2022-02-14 02:45:30

**What are React hooks?**
They are functions in React that allow you to add react functionality to function based components.

**What is the useMemo hook?**
This hook will only run if its dependencies change. This is especially useful in preventing expensive operations from needlessly running. 

- For those that are familiar with Vue.js, the useMemo hook function in React serves the same purpose as computed properties in Vue.

The syntax follows a common pattern:

```jsx
const functionToRun = (value) => return value + 1;
const computedValue = useMemo(() => functionToRun(value),[value]);
```
A few things to note:

- `functionToRun()` needs to return a value.
- `[value]` is the dependency. There can be multiple dependencies ex: `[value1, value2, value3]`. Any time the dependencies change, the useMemo function will run.
- If the dependency array is left empty `[]`, useMemo will only execute the function on the initial component render.

Here is a practicle example using the useMemo hook:


```jsx
import { useState, useEffect, useMemo } from "react";

const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      //Fetches a list of ten users
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      );

      // If the HTTP status code is 200-299
      if (response.ok) {
        const json = await response.json();
        setUsers(json);
      }
    };

    fetchData();
  }, []);

  //Only runs when users changes
  const profiles = useMemo(() => {
    users.map((user) => {
      return <Profile key={user.id} user={user} />;
    });
  }, [users]);

  return <div>{profiles}</div>;
};

const Profile = ({ user }) => {
  return (
    <div>
      <h1>{user.name}</h1>
    </div>
  );
};

export default App;
```
More information about useMemo can be found in the React docs: [https://reactjs.org/docs/hooks-reference.html#usememo](https://reactjs.org/docs/hooks-reference.html#usememo)

Leave comment if you have any questions or feedback.
Leetcode SQL: 175. Combine Two Tables
Tags: sql
Published: 2022-02-14 02:16:40

I decided to practice SQL today. This is a common question encountered during interviews. 

**The problem:**

```
Table: Person

+-------------+---------+
| Column Name | Type    |
+-------------+---------+
| personId    | int     |
| lastName    | varchar |
| firstName   | varchar |
+-------------+---------+
personId is the primary key column for this table.
This table contains information about the ID of some persons and their first and last names.
 

Table: Address

+-------------+---------+
| Column Name | Type    |
+-------------+---------+
| addressId   | int     |
| personId    | int     |
| city        | varchar |
| state       | varchar |
+-------------+---------+
addressId is the primary key column for this table.
Each row of this table contains information about the city and state of one person with ID = PersonId.
 

Write an SQL query to report the first name, last name, city, and state of each person in the Person table. If the address of a personId is not present in the Address table, report null instead.

Return the result table in any order.

The query result format is in the following example.

 

Example 1:

Input: 
Person table:
+----------+----------+-----------+
| personId | lastName | firstName |
+----------+----------+-----------+
| 1        | Wang     | Allen     |
| 2        | Alice    | Bob       |
+----------+----------+-----------+
Address table:
+-----------+----------+---------------+------------+
| addressId | personId | city          | state      |
+-----------+----------+---------------+------------+
| 1         | 2        | New York City | New York   |
| 2         | 3        | Leetcode      | California |
+-----------+----------+---------------+------------+
Output: 
+-----------+----------+---------------+----------+
| firstName | lastName | city          | state    |
+-----------+----------+---------------+----------+
| Allen     | Wang     | Null          | Null     |
| Bob       | Alice    | New York City | New York |
+-----------+----------+---------------+----------+
Explanation: 
There is no address in the address table for the personId = 1 so we return null in their city and state.
addressId = 1 contains information about the address of personId = 2.
```
**The solution:**

To solve this problem, we can use a LEFT JOIN. This will returns all rows from the left table, and the matching rows from the right table. NULL will be returned if there are no matches. 

The code:

```select FirstName, LastName, City, State from Person p left join Address a on p.PersonId = a.PersonId;```
How to find HTML Color Code Of an Image (Image Color Picker)?
Tags: hexcolorpicker, htmlcolorpicker, imagecolorpicker
Published: 2022-02-14 02:11:23

**[Image color picker](https://www.image-colors.com/)** is an online color picker tool that lets you pick colors from images. Using this image color picker, you can get the color code in **RGB, HEX and HSL** formats from any image files. Use the color picker by dragging and dropping any image onto the page, or you can choose any image file by clicking on the 'Choose Image' button. You can then hover or click on any point on the image to highlight the color on the right, and the color codes can be copied by clicking the copy icon next to the code.

**[Image color picker](https://www.image-colors.com/)** lets you easily identify the different colors in an image. While being an online color picker tool, it magically works to let you pick color from images even without an internet. It is easy for users such as graphic designer or web designer to find out the color codes on image or logo.

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

  
## How to use the Image Color Picker tool?

Drag and drop an image onto the page, or click on the 'Choose Image' button to select an image file. You can then hover or click on any point on the image to highlight the color on the right, and the color codes can be copied by clicking the copy icon (  ) next to the color code.
Centralizando as coisas com Flexbox
Tags: css, flexbox, braziliandevs, html
Published: 2022-02-14 01:41:09

## Olá, pessoal 👋🏻

Hoje eu vim com uma dica rápida de como centralizar as coisas no CSS usando o Flexbox. Continua aqui comigo que eu já vou te mostrar como funciona esse tal alinhamento.

## Iniciando com Flexbox

Nesse exemplo usaremos duas div's. A div mais externa de cor cinza, eu vou chamar de "container" ou "elemento pai", já a div mais interna de cor rosa, eu vou chamar de "box" ou "filho imediato" da div pai. 

Dito isso, vamos inicializar o Flexbox **inserindo** a propriedade "**display: flex"** **no container**. Nesse momento, nada mudará visualmente, mas agora todos os filhos imediatos poderão receber os efeitos do Flexbox (No nosso caso, o filho é apenas a box rosa).

![display-flex](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzi7hnq1e2o2x4lox5vb.png)
 

## Centralizando na horizontal

Agora, ainda **no container**, vamos adicionar a propriedade "**justify-content: center**", para alinha a box ao centro horizontal do elemento pai. 

Perceba que as propriedades do Flexbox precisam ser obrigatoriamente definidas no elemento pai, e assim os efeitos serão refletidos nos elementos **filhos imediatos** desse container. 


![justify-content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5y8geke41wpi9zotlg5o.png)

## Centralizando na vertical

 E o último passo para que a nossa box fique perfeitamente alinhada ao centro do container, usaremos a propriedade "**align-items: center;**" também **no container** para centralizar a box na vertical.
 
![align-items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/roqt5shibi3faazyw75b.png)

## Código do projeto

### HTML:

```
<div class="container">
  <div class="box">🤙🏻</div>
</div>
```

### CSS:

```
.container {
  border: 3px solid #888;
  height: 100px;
  width: 300px;
  height: 200px;
  
  display: flex;
  justify-content: center;
  align-items: center; 
}

.box {
    height: 100px;
    width: 100px;
    background-color: #fe46a5;
    margin: 2px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 40px;
    color: white;
  
    display: flex;
    justify-content: center;
    align-items: center;
}
```

## Conclusão 
 O Flexbox facilita demais a nossa vida com as questões de alinhamentos pois, não precisamos mais ficar calculando a distância das bordas do elemento pai até o centro para alinhar o elemento filho. O Flexbox já faz isso automaticamente com apenas 3 definições de propriedades.

Mas fique esperto, essas propriedades de alinhamentos podem ter seus efeitos alterados conforme a definição de direção do Flexbox, pois os alinhamentos são feitos a partir do eixo principal definido por essa direção que por padrão é o "**flex-direction: row**".

[Veja o código desse alinhamento no Codepen.](https://codepen.io/saragomesdev/pen/JjOyGVw?editors=1100)
My current goals
Tags: devjournal, motivation
Published: 2022-02-14 01:19:06

## Introduction

Hello! I'd just thought I'd share my goals for this year! Yes I know it's a little late but I thought that if I write them down somewhere it would motivate me to actually do them.  😗
I know that if I don't write them down I won't actually do them.
So with that being said here are my current goals.  😎

---

## Current goals

* Finish my WebRTC tutorial series - sorry for the lateness, the android tutorial is already in the works.
* Create my own running android app - I like to run at least three times a week and would like to use an app that's unique to me, plus I've thought about this for a while and it would give me an oppurtunity to learn Kotlin.
* Learn how to create more advanced GStreamer/FFmpeg native apps, not just using the commands all the time. - This will give me an oppurtunity to get better at C/C++.
* Play around with GStreamer WebRTC - Would be great to create a simple SFU/MCU.
* Code an side projects for at least 30 minutes a day - Easier said than done sometimes.
* Read at least one technical and non technical book a Month
* Update my blog at least once a week - I know I slipped up but I'll try not to let that happen again.
* Share what I learned with everyone and give back to the community - Hopefully the information I share is useful to you.
* Learn a frontend JS framework - I'm terrible at design but it would be nice to create my own landing page etc. Thinking React/Vue. Any recommendations? Please let me know.

---

## Wrapping up

*phew*, short post but that's basically what my goals are going forward.
Hopefully it inspires someone. What are your current goals?

Happy Coding.  😃

---

Like me work? Any support is appreciated. :)
[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/ethand9999)
Introduction to Modern Javascript
Tags: javascript, webdev, beginners, programming
Published: 2022-02-14 01:14:53

## Table of contents

- Introduction
- What is JavaScript?
- History of JavaScript
- Development Tools to Run JavaScript
- Summary

## Introduction 
JavaScript is the world's most popular programming language on the web. According to [Stack overflows 2020 Developer Survey](https://insights.stackoverflow.com/survey/2020#technology-programming-scripting-and-markup-languages-professional-developers) JavaScript stands as the most commonly-used language in the world by 69.7%. This article is for beginners who are interested in learning JavaScript as their major programming language, it is going to be a series on JavaScript basics to guide you. 

**Below are some of the topics that we will be covering in this series**
*Variables*
_Conditions_
_Numbers_
_Strings_
_Arrays & Objects_
_Functions_
_Scope_
_Method (map, filter, reduce, spread...)_
*Promises*

## What is JavaScript?
JavaScript is a dynamic programming language used for web development. It allows you to add interactive features to your web page that cannot be done with just HTML and CSS like clicking a button to make something appear, submitting forms data, handling pop-up functions, and other complex features.

## History of JavaScript
JavaScript was developed by **Brendan Eich** in 1995. It was developed for Netscape, a popular browser of that time.

![Creator of JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgcitr5dyvis8ehf0m1h.jpg)

## Development Tools You Need to Run JavaScript
To execute JavaScript you can use any text editor of your choice including Visual Studio Code, Sublime Text, or any other one that you are comfortable with to write your code and a browser to display the web pages that you develop. You can use any web browser including Firefox, Google Chrome, etc. to run your code.

## Summary
- JavaSript is a dynamic programming language developed by Brendan Eich and is used to add complex features and interactions on our web pages.
- It can run on any operating system and almost all web browser.
- You need a text editor to write your JavaScript code and browser to display your web page that you develop.

For further reading;
[w3schools](https://www.w3schools.com/js/default.asp)
[javaScript info](https://javascript.info/)
[web platform](https://webplatform.github.io/docs/tutorials/your_first_look_at_javascript/)
How to listen for mouse wheel events in React?
Tags: react, javascript
Published: 2022-02-14 00:52:54

Sometimes, we want to listen for mouse wheel events in React.

In this article, we’ll look at how to listen for mouse wheel events in React.
To listen for mouse wheel events in React, we can set the onWheel prop to the mouse wheel event listener.

For instance, we write:

```
import React from "react";

export default function App() {
  return (
    <>
      <div style={{ height: 600, width: 300 }} onWheel={(e) => console.log(e)}>
        hello world
      </div>
    </>
  );
}
```
We set onWheel to a function that logs the event object.

Now when we scroll up and down with the mouse wheel, we should see the event object logged.
**Conclusion**
To listen for mouse wheel events in React, we can set the onWheel prop to the mouse wheel event listener.
CS101 - Final Project, "Tic, tac but no toe!"
Published: 2022-02-14 00:18:43

I recently completed my final project of CS101 in my progression through the Codecademy Computer Science career path. It required an interactive program using input features, the use of Git version control, and ideally implemented as much as the content as I had covered up until that point.

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

I decided to write a simple code allowing the user to play a game of Tic Tac Toe, accepting input allowing the user to choose where to place their 'X' or 'O'. The initial attempt included exclusively my own work, conducting research on syntax as I required it. I managed to pull together a basic version that accepted input, limited the total turns to 9, and found a winner. It did have a number of limitations:

- error produced when entered text did not match 1-9
- player unable to choose 'X' or 'O'
- did not have a computer player

I sourced a model set of code searching on the internet, and compared it with my own. There were clear similarities, which meant that I was on the right path. The model I found had included a number of additional functions, with the most notable being a computer player. 

Using the model as a guide, I attempted to re-write my own code using the new concepts, which solidified a number of concepts including:

- using randomly generated numbers
- producing computer responses
- using boolean functions like is_board_full

I did have a number of issues re-implementing the code, particularly with calling the user input as integers, and ultimately was not able to successfully run my own modified version of the model, but it did provide a great learning opportunity. 

Link to GitHub: https://github.com/0xTomas/CS101-Final-Project