teleren/devto huggingface dataset:
React Components
Tags: react, beginners
Published: 2022-03-16 18:43:52

Yesterday I passed my final assessment at Flatiron School on React. I personally found this section to be tough as there was a lot of material to review beforehand. I spent a lot of time mastering the differences between various components, so I thought I would outline it in a blog post.

**What is a component and what are the different types of components?**
The [official React documents](https://reactjs.org/docs/components-and-props.html) on components define it as so:

> Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

> Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Components contain functions and create presentation of the code. There are two types of components, **container** and **presentational** components. There are also two ways to write components, as either **functional** or **class**.

**Container vs. Presentational**

**Container** components deal with function rather than presentation. They tend to be stateful, and will use the redux store to send data to other containers or presentational components.

**Presentational** components are used to render views on the frontend. They are stateless and do not have access to redux.

**Functional vs. Class**

**Functional components** are written as JavaScript functions an explicitly use return. The return value of the function depends on the props that are passed in. Functional components are used when you are coding presentational components without their own state or access to lifecycle methods.

**Class components** are a JavaScript class that extends React. Class components have lifecycle methods that are used to fetch data and create objects. They are stateful components that control how state changes.
What are Modules in Angular?
Tags: javascript, webdev, beginners, angular
Published: 2022-03-16 18:28:07

**Angular doesn't scan automatically all your components and services .
You have to tell Angular what all component, service,directives you have or you are using**

Modules does that for you.
**Every Angular app must have at least one module (i.e.AppModule)**

**Modules are basically a place in angular where you group together your components,directives,services etc.**

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

Here you can see appModule.

**_1. @NgModule_**-
Angular analyzes ngModules to understand application and it's features.You can't use a feature without including it in @NgModule.

**2.Imports-**
_Imports are important to import other modules into our module like **FormsModule,RoutingModule etc**.We cannot add every single feature from nodemodule so we import collectively a whole module which contain most of it._

**3.Providers**
_It defines all services we are providing in our angular app.All the services declared in angular must be inside the **_providers of AppModule.**

Or you have one other method if you don't wanna write in providers


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

you have to use
 **@Injectable({
  providedIn: 'root'
})**

**4. Bootstrap[]**
Bootstrap is important for starting your app.It defines which component is available straight in your app **(i.e app-root) **at first. 
You can include other components also that's why it's array . But it is not likely to add other component other than AppComponent.
Theming AgnosticUI with open-props is easy peasy!
Tags: frontend, css, components, webdev
Published: 2022-03-16 17:57:09

---
title: Theming AgnosticUI with open-props is easy peasy!
published: true
description: More explorations on awesome open source tooling for frontend projects
tags: frontend, css, components, webdev
//cover_image: https://direct_url_to_image.jpg
---

## agnostic-svelte + open-props === easy theming 🎨

My blog uses [svelte-kit](https://kit.svelte.dev/) and so I've been testing my [AgnosticUI](https://agnosticui.com/) Svelte package ([agnostic-svelte](https://www.npmjs.com/package/agnostic-svelte) on NPM) there. I'm quite happy to report that [Vest](asdf) and [open-props](https://open-props.style/) both work quite well with AgnosticUI!

[Vest](https://vestjs.dev/) is a declarative form validation library that is inspired by unit testing libraries like Mocha or Jest.

You can see my experiments with integrating with Vest [here](https://developtodesign.com/agnosticui-examples).

![AgnosticUI and Vest signup form experiment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tacizqkxsqgiy2x01u8n.png)

___

 
[open-props](https://open-props.style/) Supercharged CSS variables that give you a nice head-start on your CSS custom properties and/or theming efforts.

You can see my experiments with open-props [here](https://developtodesign.com/agnosticui-examples) (just click the Theming tab once you get there and then select from the theme radio buttons)

![open-props and AgnosticUI theming experiments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bl65vs2i0am6bal08juo.png)
 
___

And if that's not enough, I did some experiments with CSS Grid too! All the examples have links to the GitHub source code in case you wanna snag a Grid layout:

![CSS Grid experiments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khag7uwmek0ykck2lymg.png)

The [layout experiments](https://developtodesign.com/agnosticui-examples) provided are:
* Simple Header & Footer
* Sidenav
* Sidenav Full Height
* Holygrail
* Holy Sidbars (basically holy grail but the sidebars on both side extent full height)

I hope y'all can go have a look at these experiments and find them useful!
INTRODUCTION TO HTML
Tags: beginners, html, webdev, tutorial
Published: 2022-03-16 18:02:13

HTML stands for Hyper Text Markup Language and it is used for creating web pages.
Let's dive in directly to a simple HTML code.

```
<!DOCTYPE html>
<html>
<head>
<title>First Program</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first HTML paragraph.</p>

</body>
</html>
```
You can write the above code on a simple text editor or on Notepad. Text editors you can code on include Sublime Text Editor and VS code. 


## **Tags**
Referring to the above code, 

```
<!DOCTYPE html>
```
Describes the type of document above, in our case, it is an HTML type of document.

```
<html></html>
```
Describes the beginning and the end of an HTML document.

```
<head></head>
```
Contains the information about the HTML page.

```
<title></title>
```
Contains the title to our web page and is located at the browser's page tab.

```
<body></body>
```
This is where all the contents about the web page are put.
Major difference between Web3 and Web2
Tags: web3, web2, blockchain
Published: 2022-03-16 17:47:30

Web3 have been the talk of the town, but what exactly is the difference between web3 and web2?
Conceptualizing the World wide web, it is just like a remote village with different household (Families), each family can define is own structure, let say family A need something from family B. family A need to send a request to family B showing their intent and purpose.(HTTP request in web2) 
Some families have a messenger that help convey and respond to message from other family.(API Calls).

Now let's say the Head of Family A refuse to oblige request of other family due to some internal crisis, no information can get through to the members of family A. When Family finally resolve the internal crisis, they miss out on some tangible information. This is how Web2 works. You can visualize some other scenarios which can prevent this setting from scaling. that is what web3 is solving.

Web3 ensures all nodes(families) are up to date with the required information anytime the node is back online. It has a lot of application in supply chain, Domain Name System and management, Art Collections and verification of ownership. These among other numerous is what Web3 provides a scalable and secured  solution to.

Some of the top organization who  is embracing blockchain technology are [Blockgames](https://blockgames.gg/), [Nestcoin](https://nestcoin.com/) and [Zuri](https://zuri.team/). They all ensure you learn and understand how to solve problems with Web3.
Day-45 Training At Ryaz
Tags: webdev, beginners, cloud, database
Published: 2022-03-16 17:33:53

Date:16/03/2022
Day:Wednesday

Today, I started at about 11:00 am as my aim was to do with crud app operations as I was stuck with an messy thing that I was not able to connect my app with my db as I started working to trouble shoot it but when I started firstly the brew install did not worked and after it worked for a specific version like it worked for mongodb-community@4.4 so I installed for it but as I proceeded further I got stuck with the command not working i.e mongod as it is mongodb demon command to initiate the use of mongodb so, after this as it does not worked for me so, I decided to work with mongodb cloud services as to solve this problem I watched some random videos on YouTube which helped me to solve my problems soothes way in a whole day I was able to connect the db with my node app now as I am done with db connection so, I would try my best to finish it off by tomorrow.so,this way my day ended up.
How to set up Laravel with PostgreSQL? 💡
Tags: webdev, laravel, productivity, postgres
Published: 2022-03-16 17:29:21

**DECK** has separate images for **Laravel** and **PostgreSQL**. So let's look at how we can set it up in just two clicks. 

### First, choose an image for Laravel
You can select either Nginx-PHP or apache-PHP or Laravel image, add details like project name, PHP version, Select PostgreSQL extensions, and select project path.
Hit save, and now you are done with the Laravel project setup.

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

### Second, choose the PostgreSQL stack.
Enter a project name and add database details. Hit save, and now you are ready to add database environment variables in your Laravel project .env file, like `DB_HOST`, `DB_CONNECTION`, `DB_PORT`, `DB_DATABASE`, `DB_USERNAME`, `DB_PASSWORD`. 

### I got you. Where can you find those environment variables values? 🤔
Start the PostgreSQL stack and open the Actions & Insights panel and check the Postgres stack.🌟

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

We will love to know your feedback about this quick setup 😊. [Install DECK today](https://get-deck.com) 💜
How do I get flutter to run correctly in VS Code on win10
Tags: help
Published: 2022-03-16 17:25:56

{Use the questions/pointers below to gu

I've installed flutter and dart sdk but I get the above errors when I run flutter doctor. I've even added to path in environment variables but nothing seems to work.

I've installed Android studio and downloaded emulator images. 

When I run flutter doctor on cmd as admin it runs but without admin privileges it returns an error. 

I've tried answers on stackoverflow and the flutter documentation on flutter.dev but still the same. 

Running cmd and windows powershell without admin privileges returns the error "where is not a recognized command ..."
If you’re interested in WebAssembly, and don’t get enough depth here on DEV, read this…
Tags: webassembly, rust, go, meta
Published: 2022-03-16 17:20:43

---

series: Forem Community Highlights

---

**[WASM Builders](https://www.wasm.builders/) is the new Forem in town.** If you click that link, you’ll find the new WebAssembly Forem run by a consortium of deeply engaged companies looking to expand the impact of WebAssembly.

It will always be our goal to help people keep up with software trends and level up here on DEV, but it’s not always conducive to _going deep on the topics you care about_. That’s why we are encouraging other developer-focused Forems to get up and running with this form factor.

If you're in to this space, you're probably keeping up with it in a variety of places, but we expect this to ultimately be a really important **async-first, community-driven knowledge base for the world of WebAssembly**.

We believe a healthy web is a distributed one. The software world is community-driven, and curation and community leadership needs to be pushed closer to the edge.

If you are interested in going deeper with WebAssembly and keeping up with the bleeding edge in the space, we highly encourage you to [join WASM Builders](https://www.wasm.builders/enter).

DEV has a lot to offer on WASM, but we feel that we’ll be the most helpful  by letting technology stakeholders own their  outcomes via dedicated Forems.

_For a great intro to WebAssembly…_ 


{% link https://dev.to/dorin/webassembly-is-easy-a-hello-world-example-3dbb %}

Congrats to [WASM Builders](https://www.wasm.builders/) and happy coding!

---


_A lot of work has gone into generalizing the Forem ecosystem and we’re starting to get rolling with our support of partner Forems. There’s still a limited number of Forems that we’re able to hostt, but progress is beginning to speed up! We would love to host more specific developer ecosystem Forems that allow people to go deeper on a subject than we’re able to offer with DEV. For example, [Zig.news](https://zig.news/) is a (self-hosted) Forem that offers this for the Zig programming language._ 

_If you are part of an open source project or developer platform that wants to empower the broader community to co-blog and share in discussions alongside the official maintainers or DevRel, get in touch with us on [forem.com](http://forem.com/) — we’d love to partner on this work to make the internet a smaller and more helpful place for software communities, in particular. ._

***

One last thing. You’ll notice **“Sign up with Forem”** as an option alongside GitHub and email. This is a service we now offer to most seamlessly navigate the ecosystem and manage your identity. We want you to be able to bring your full self without having to bring your full data, so making this distributed ecosystem as straightforward as possible in the long run is really important. Create a [Forem Account](https://account.forem.com/) and connect it with your DEV account via settings. 🙂

Happy coding!
AWS Play Game
Tags: aws, learning, cloud, cloudquest
Published: 2022-03-16 17:11:21


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nz5whqzt16iprzcraosb.png)
I am really excited to share a news that made me awestruck! I still remember the fun and excitement  I had while playing GTA Vice city during my childhood days. What if I say you will gonna have the same fun and excitement while learning cloud.

Off-course I am not kidding. AWS has started first of such free initiatives, a 𝐧𝐞𝐰 𝐠𝐚𝐦𝐞-𝐛𝐚𝐬𝐞𝐝 𝐫𝐨𝐥𝐞-𝐩𝐥𝐚𝐲𝐢𝐧𝐠 𝐞𝐱𝐩𝐞𝐫𝐢𝐞𝐧𝐜𝐞, 𝐜𝐚𝐥𝐥𝐞𝐝 𝐀𝐖𝐒 𝐂𝐥𝐨𝐮𝐝 𝐐𝐮𝐞𝐬𝐭: 𝐂𝐥𝐨𝐮𝐝 𝐏𝐫𝐚𝐜𝐭𝐢𝐭𝐢𝐨𝐧𝐞𝐫. This is going to be an absolute treat for the new cloud learners. With AWS Cloud Quest, you can learn the fundamentals of cloud computing concepts like you play a game. Expecting more such initiatives in all level which makes the learning very simple and engaging.

AWS also introduced yet another free initiative, an 𝐞𝐧𝐡𝐚𝐧𝐜𝐞𝐝 𝐀𝐖𝐒 𝐄𝐝𝐮𝐜𝐚𝐭𝐞 𝐩𝐫𝐨𝐠𝐫𝐚𝐦 𝐨𝐟𝐟𝐞𝐫 𝐟𝐫𝐞𝐞 𝐡𝐚𝐧𝐝𝐬-𝐨𝐧 𝐥𝐞𝐚𝐫𝐧𝐢𝐧𝐠. More details on https://www.aboutamazon.com/news/aws/two-new-free-aws-initiatives-help-build-foundational-cloud-skills

I would like to request all the new and upcoming cloud learners to enrol and explore this cool game on https://explore.skillbuilder.aws/learn/public/catalog/view/51
Welcome Thread - v167
Tags: welcome
Published: 2022-03-16 16:53:38

---
title: Welcome Thread - v167
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Angela from The Office saying "Hay"](https://media.giphy.com/media/gVnqn7XhCUKYg8A4yI/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
React Hook: useEffect simplified flow
Tags: react, hooks, useeffect, diagram
Published: 2022-03-16 16:47:07

For people who like diagrams😊- I have prepared my own diagram showing useEffect flow:

![diagram useEffect flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z09lyqv6pv7hm3y1ghz3.png)
Lesson 01 | Variables
Tags: variables, datatype, settingvariable, variablecasting
Published: 2022-03-16 16:38:16

## C Variable Names
In C variable names must follow specific rules:
- Names can only be composed of upper and lower case letters, numbers, and underscores.
- The first character must be a letter (upper or lower case).
- No keywords are allowed as the full name (`int` is not allowed but `int_count` would work).

## Data Types in C
The main data types in C are: `int`, `float`, `double`, and `char`.
## Setting Variables in C
Variables in C can be initialized with values at their declaration or have their values set later in the code.
## Variable Casting in C
In C a variable can be cast explicitly or implicitly from one data type to another. They can then be used directly or stored in another variable.
How to lift a banana: a guide to motors in robotics
Tags: robotics, motor, opensource, robots
Published: 2022-03-16 16:38:14

Every motor has a specific function. Go back to basics with this article and learn more about motorization and control in robotics.
www.luos.io/blog/how-to-lift-a-banana-a-guide-to-motors-in-robotics

If you’re wondering what the relationship is between a banana and a motor, ask Simon (FR)#2786 on [Luos Discord](https://discord.gg/luos)
Building a dialog(Material) service in angular
Tags: angular, typescript, programming, material
Published: 2022-03-16 16:29:05

In angular development, the typical way we open a dialog is by injecting MatDialog directly into a component.

![MatDialog injected into a component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9ghob5ogju5h30bcfs3.png)
 

![First scenario diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qji0ro6x1s63tot66ns3.png)

This implementation will be okay for a dialog that will be opened by a single component. 
But in the case of a kind of dialog that will be used by many components that belongs to different modules in the application, This approach won't work.

One of the solutions can be a dialog service whose responsibilities will be:

1. Take the inputs from the component(Which invokes the opening of the dialog).

2. Opens the dialog and passes the inputs to the dialog or stores the inputs as its member variable.

3. Returns the dialogRef to the component(Which invokes the opening of the dialog).


![Dialog service based solution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b704649rlwq8631yy7k6.png)
 
* A dialog module needs to be created which will hold the dialog Component and other modules that are required in the dialog component. 

* The components that require to open the dialog will need to import the dialog module first.

![Dialog Service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecrc08bj33d6rxe1zwns.png)
 
The Dialog Module

![Dialog Module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11enzt369q4x06ki6j4u.png)

Importing the dialog module to the dedicated module that the component which will open the dialog resides in (In my case the app module)

![App Module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anox23pldcae7ymzq4pu.png)
 
The implementation of the open procedure in a component.
 
![App component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gn3f5e6mkd69kly062j.png)
 
We can also send out the data through the method parameter that we have defined in the service for the DialogConfig.

![Another way to send data to dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsusljlnxkc4fnnfvcn3.png)
 
The entire source code is available on: https://github.com/devashishSarmah/dialog-service

Thanks for checking out. 
Please feel free to comment for any queries
🏗 Structure of browser rendering engine
Tags: javascript, beginners, performance, frontend
Published: 2022-03-16 16:24:36

> You can not fix your car, if you don't know about car...
> by me 😝

→ yeah you should know about browser at first

## 👍 Two important components on Browser

### 1. Rendering engine
Read files like HTML,images,css,Javascript and paint on browser

### 2. Javascript engine
Execute Javascript, simple.

| browser | rendering engine | javascript engine |
| --------- |:---------:| :---------:|
| Chrome | Blink | V8 |
| Firefox | Gecko | SpiderMonkey |
| Safari | Webkit | Nitro |
| Edge | EdgeHTML | Chakra |
| opera | Blink | 

*V8 is used in Node.js as well

## 🌐 Flow of rendering on Browser

Roughly speaking, flow is structured by these 4 steps
![flow of rendering](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrdk6zntuomso0ggechh.png)

### 1.Loading
![loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0o39ly16lipfbrp587m.png)
- getting data(html, css, javascript, image files...) from server

↓
- parse (creating DOM tree, CSSOM tree)

▼ DOM is created like this
[From google developer article "Constructing the Object Model "](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=en)
![create DOM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4g22w0n6wxg2eqsyrv7.png)

▼ CSSOM is like DOM of css version
![CSSOM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdcu3wsylzw62gg9r1d7.png)
 
### 2. Scripting (executing Javascript by JS engine)
![scripting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zggq8vzq1bzuc60sklud.png)

**create AST(abstract syntax tree) which is possible to compile. it's similar to DOM,CSSOM**
[from this website](https://v8.dev/blog/background-compilation)
![AST](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0nm6etnuwvhfmynboae.png)

↓
**compile (transform to machine code, then CPU can understand what javascript wants to do)**
▼ types of compiles
- JIT(Just in time)  

    compile script when code is executing. Javascript is JIT
- AOT(Ahead of time)  

    compile before executing like Java,C
 
↓
**execute**
Javascript can handle DOM tree which is created before via DOM API.

### 3.Rendering (calculating layout)
![calculating layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/js4z2lvf1b7wilx69gqt.png)
**find css properties for all DOM elements**
- background-color: green; for btn-success class
- border-radius: 5px: for header id
...

↓
then **layout**
- width, height
- margin
- padding
- position
- z index
...
 
### 4.Painting (finally we see something on browser!)
**Paint**
order to 2D graphic engine
↓
**Rasterize**
paint on actual pixel on your display by using order which was created by graphic engine

---

### 😥 Re-rendering
We've done it !!! yeah....
unfortunately no... 
Because of javascript event or some action on browser, it's necessary to render again.

↑ This is one of the important problem of javascript no matter what kinda library you use like React,Vue,Angular