teleren/devto huggingface dataset:
React beginners tutorial Part -1 Playing
Tags: react, typescript, webdev, javascript
Published: 2022-07-26 14:06:00

React is one of the most popular technologies in web development. Many of the world's best firms use it. This is post is for for the beginners in the field of web development who are foreign to this library.

## What is React? why react?

React is frontend library which you can use to create interactive user interfaces. It can help you create apps where users integration is necessary. It is lightweight and cost effective as well.

## Getting up and ahead

To get started with react you first need a quick setup tool. A tool that will provide you with essential config for your react app. You can pick between many different such tools but the two most popular once are.

- create-react-app -> The official and slow
- vite -> the unofficial and fast

Even more beginner friendly are online code editors such as [stackblitz](stackblitz.com), [codesandbox](codesandbox.io) and others.

I prefer codesandbox here, you can signup and start doodling around to get a feel of it.

When you start a new react template you will see something like this.

![React Template as on codesandbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58z6kj3qill9j6i98976.png)

The file structure looks like this

|-public
|----index.html
|-src
|----App.js
|----index.js
|----styles.css
|-package.json

The public contains things publicly accessible as you can see the function visible gets exported, then the index.js imports it and plunges it into a div. All the app in a single div!!

So, src (short for source ) is where the actual magic happens. All your stylesheets, code and actual stuff

#Doodling

As you can see there is something like html over the function the function is actually returning html or more precisely jsx.

**Jsx** or  Javascript XML (something like Javscript markup) is actual javascript code that you write but with the help of babel it is transformed into actual javascript (the one you see in static files. You can have dynamic properties and a lot of other superpowers in there. Try changing the code in the App function to this. 

```javascript
export default function App() {
  const hi = "hi alex"
  return (
    <div className="App">
      <h1>{hi}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
``` 

yes you can actually just plunge values in there. Just open up curly brackets and throw the stuff in it.

Moreover you can assign jsx as values to a variable. Come on do something with it.

## Styling up

You can give your elements a className (not class because it is a reserved keyword in javascript).

```javascript
export default function App() {
  const hi = "hi alex"
  return (
    <div className="App">
      <h1>{hi}</h1>
      <h2 className="boring">
          Start editing to see some magic happen!
      </h2>
    </div>
  );
}
``` 
give boring a style in styles.css You can see that it is imported on top; that is just it! Import stylesheets. 

##Conclusion
That was all for this post, read the second part to get a feel of the dynamicness with user interaction. Till then keep playing
Document Object Model
Tags: javascript, jsdom, webdev, programming
Published: 2022-07-26 14:01:42

The words “the DOM” are used all over developer documentation sites and tutorials on writing interactive JavaScript code

When you request a website, no matter what backend language is powering that website, it will respond with HTML. The browser receives a stream of HTML. The bytes are run through a complicated (but fully documented) parsing process that determines the different characters (e.g. the start tag character, an attribute like `href`, a closing angle bracket like >). After parsing has occurred, a process called tokenization begins. Tokenization takes one character at a time and builds uptokens. The tokens are:

`DOCTYPE
start-tag
end-tag
comment
character
end-of-file`
Let’s take a break for a second. At this state, the browser has received the bytes that’ve been sent by a server. The browser has converted the bytes to tags and has read through the tags to create a list of tokens.

This list of tokens then goes through the tree construction stage. The output of this stage is a tree-like structure — this is the DOM!

I want to point out two important quotes that Illya said in the video:

a tree structure that captures the content and properties of the HTML and all the relationships between the nodes the DOM is the full, parsed representation of the HTML

So the DOM is a model (representation) of the relationships and attributes of the HTML document that was received. Remember that DOM stands for “Document Object Model”. Something that I’ve found to be true as I’ve been learning is that to break something down, just read the thing backwards:

Document Object Model

…would become…

Object Model of the Document!

Remember that a JavaScript object is a tree-like structure that has properties and values. So the DOM can be accessed using a special object provided by the browser: document

Try this:

open the console on this page
type out the word document
careful not to declare it (const document)
careful not to wrap it in quotes ("document")
press enter


Console Tab
Viewing the document object in the DevTools' Console pane.

The document the object is provided by the browser and is a representation of the HTML document. This object is not provided by the JavaScript language. ECMAScript is the language specification that JavaScript is based on, and it only references the document object model in one place, in its "Global Object" section:

In addition to the properties defined in this specification the global object may have additional host defined properties. This may include a property whose value is the global object itself; for example, in the HTML document object model the window property of the global object is the global object itself. (source)

Basically, this says that the document object is not part of JavaScript, but is expected to already exist and be freely accessible to JavaScript code.

The DOM is standardized by the W3C. There are a number of specifications that make up the DOM, here are a few:

1. Core Specification
2. Events Specification
3. Style Specification
4. Validation Specification
5. Load and Save Specification
CentOS 7 裝 NGINX
Tags: centos, nginx
Published: 2022-07-26 13:58:35

 CentOS 是選用 CentOS 7.4 Minimal with Webmin (HVM)，它已經幫我們設定好一些常用的 CentOS EPEL。 <3

抄一下這篇〈[於CentOS7安裝 Nginx + php7 + php-fpm + Laravel5.6](https://ivanagyro.medium.com/%E6%96%BCcentos7%E5%AE%89%E8%A3%9D-nginx-php7-php-fpm-laravel5-6-df8631681acf)〉。

裝下去：

```sh
> sudo yum install nginx
```

設定開機執行 NGINX：

```sh
> sudo systemctl enable nginx
```

啟動 NGINX：

```sh
> sudo systemctl start nginx
```

`systemctl` 指令的解說可以讀一下 [Arch Linux 的主題文章](https://wiki.archlinux.org/title/Systemd_(%E6%AD%A3%E9%AB%94%E4%B8%AD%E6%96%87))。

以上做完，試開一下應該就可以看到 Ｗelcome to nginx 的頁面了。注意到這個頁面檔案放在 /usr/share/nginx/html/。
Introducing fancy open source terms
Tags: opensource, upstream, downstrem, git
Published: 2022-07-26 13:57:00

If you are like me who never really worked in a real opensource community, then there is a possibility that you might not know what exactly some of the terms I am going to elaborate below mean. Or maybe it happened to me because my limited access to English vocabularies. But first, let me take the definition of open source and paste it here.

> Open source is source code that is made freely available for possible modification and redistribution. [Wikipedia](https://en.wikipedia.org/wiki/Open_source)

To add on that, it is worth mentioning that anyone can use the code, modify for personal or business purpose.

Okay, let's dive deep into the first term which is **upstream**. Upstream, in the context of IT/open source world, defines the original destination of project/code available on the Internet. The most common example is the public git repositories on GitHub, GitLab or any version control tools. If we further dive into any of the upstream repository (public repository), we are likely to see a number of contributors working on that certain project. Those contributors are not paid. They do it voluntarily. Contribution means are varied ranging from writing features, fixing bugs, raising issues, writing documentation...etc. 

On the contrary, there is another term **downstream**. Downstream refers to a copied version of upstream which could include any slightly changes but not abandoning the identity of the upstream. An individual programmer or company who would like to add specific feature on top of the existing upstream project absolutely can copy the whole upstream and add the changes need to use for their own purposes.

Most of us might know the **fork** functionality in version control tool like GitHub already. That serves the purpose for open source workflow.
Now visualize the public repository for cupcake recipes. That repository contains ton of different of cupcake recipes. As a baker myself, I want to share my own recipe to people out there. So, I fork the repository (creating downstream), create my own branch for the recipe, create request to merge that to the upstream and wait for approval. Then, if any authorized maintainer of the repo thinks that my recipe is good, he/she can merge it to the upstream. So now, my recipe is available worldwide. 
Now let's look into another case when I see the good recipe in the upstream. I have a cool idea to add one more ingredient that could light up the cupcake. So, I fork the recipe and create a branch for my changes. But, in stead of merging it into the upstream repo, I only make it available in my own repo (downstream) and only me and my team can access it. Therefore, my little cupcake shop now has a unique menu that no one else has. 

Up until this point, I hope you learn something and most importantly the concept of open source. I think open source is beautiful. It starts from community of people who dedicates their time and effort for the community and it even allows business derivation from the community.
Don't let websites steal your data🕵️
Published: 2022-07-26 13:52:30

Website: [df.itsvg.in](https://df.itsvg.in)
GitHub repo: [GitHub](https://github.com/VishwaGauravIn/digital-fingerprint)

![image](https://user-images.githubusercontent.com/81325730/181014738-706f1aef-0360-428b-b6fe-526e31d3fff7.png)

# 🪄 Features
Check your data which may be stolen every time you visit a site.

## 🌎 Geographical Data
- IP Address
- City
- Region
- Country
- ISP
- Timezone
- Org
- Live location on map

## 💻 Device Details
- Browser
- Browser Version
- CPU arch
- Browser Engine
- Operating System
- Installed Fonts
- Device Model
- Device Type
- Operating System
- Installed Fonts

## Our Social Links
[![LinkedIn](https://img.shields.io/badge/linkedin-%230077B5.svg?style=normal&logo=linkedin&logoColor=white)](https://linkedin.com/in/VishwaGauravIn)
[![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=normal&logo=Twitter&logoColor=white)](https://twitter.com/VishwaGauravIn)

## PageSpeed Insights
![](https://raw.githubusercontent.com/VishwaGauravIn/Images/f13849bc9989d66c67085313dd606ea978eff0f8/psi-gprm.svg)

## Tech Used
![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white)
![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white)
Glimmer DSL for LibUI Basic Child Window
Tags: ruby, desktop, gui, libui
Published: 2022-07-26 13:44:04

[Glimmer DSL for LibUI](https://github.com/AndyObtiva/glimmer-dsl-libui) v0.5.14 has been released with the following changes:

- [Basic Child Window](https://github.com/AndyObtiva/glimmer-dsl-libui#basic-child-window) example: a sample demonstrating how to spawn a child window from the main window
- Modify default window closing behavior to autodetect if the window is a child window (not the main window), and if closed, ensure that does not quit the app.
- Accept true and false as return values for on_closing window listener as aliases to 1 and 0

## Basic Child Window Code

```ruby
# From: https://github.com/AndyObtiva/glimmer-dsl-libui#basic-child-window

require 'glimmer-dsl-libui'

include Glimmer

window('Main Window') {
  button('Spawn Child Window') {
    on_clicked do
      window('Child Window') {
        on_closing do
          puts 'Child window is closing'
        end
      }.show
    end
  }
  
  on_closing do
    puts 'Main window is closing'
  end
}.show
```

## Basic Child Window Screenshots

![screenshot1](https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-libui/master/images/glimmer-dsl-libui-mac-basic-child-window.png)

![screenshot2](https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-libui/master/images/glimmer-dsl-libui-mac-basic-child-window-open.png)

Happy [Glimmering](https://github.com/AndyObtiva/glimmer-dsl-libui)!
Amazon Prime Day 2022
Published: 2022-07-29 18:36:04

---
title: Amazon Prime Day 2022
published: true
date: 2022-07-26 13:39:27 UTC
tags: 
canonical_url: https://venkatesh111.hashnode.dev/amazon-prime-day-2022
---

A look at how different AWS services were utilized during Amazon Prime Day 2022 (US) (10th July - 16th July 2022)

**Preparations** :  
A multitude of two-pizza teams worked together to make sure that every part of AWS infrastructure was **scaled** , **tested** , and **ready to serve** end users who were eager to shop during US Amazon Prime day sale (10th July - 16th July)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658838521665/nDGD6SaPH.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658839053889/Iy02PsfWi.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658839296524/GNJr1BsC6.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658839338158/l7t0aQy5s.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658839369182/Ac9BdkvT2.png)

for more details please check below AWS News Blog[https://aws.amazon.com/blogs/aws/amazon-prime-day-2022-aws-for-the-win](https://aws.amazon.com/blogs/aws/amazon-prime-day-2022-aws-for-the-win)

Follow me on [LinkedIn](https://www.linkedin.com/in/venkatesh111/) and [Twitter](https://twitter.com/venkatesh111) for more such articles in cloud tech
Golang: Unit tests with test gin context
Tags: go, github, webdev
Published: 2022-07-26 12:44:10


How to write tests in [Golang](https://blog.canopas.com/1-min-guide-to-golang-development-best-practices-in-2022-b50d846fd6c)?

Let’s explore why you should never miss automation tests and how to get started with [unit tests in Golang](https://blog.canopas.com/unit-testing-in-go-with-mysql-8db449d86722).

While listening to the word test, junior developers get too many things in their minds. Most of the time they skip tests intentionally thinking of it as a time-wasting thing.

Of course! Testing can be time-consuming sometimes, but it can be a life savior proportionally.

Here's what you will learn in the post.

Should you write unit tests or E2E(End-To-End) tests for your project?
How to get started writing unit tests for gin handlers in [Golang](https://blog.canopas.com/golang-utility-functions-you-always-missed-ebeabae6b276)?
Create a test gin context
Preparing requests

To read full version of this article, navigate to the [canopas blog](https://blog.canopas.com/golang-unit-tests-with-test-gin-context-80e1ac04adcd).
Any developer up for roasting my landing page?
Published: 2022-07-26 13:35:12


https://csvbox.io

I don't want to reveal too much about it so as not to bias but would love some feedback specifically on:   

1. What you think of the value proposition?
2. Whether you feel like you have a good idea of what the product would be providing you?
3. What objections you would have to using something like this?
4. Anything else?
Sign in using your web3 wallet, authenticate & authorize
Tags: opensource, tooling, webdev, javascript
Published: 2022-07-26 13:32:12


![w3auth Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/483rm1nm0gme7vfdeqdg.png)


https://github.com/Devzstudio/w3auth

**Integration Example:**

https://github.com/Devzstudio/w3auth_demo

**Documentation:** 

https://w3auth.devzstudio.com/

The authentication and authorisation parts are handled by w3auth.

## Features

⛓ **Multiple Chain Support:**  The ability for multiple chains enables users to connect to the ETH and Solana blockchains. Support for the Flow blockchain and Polkadot is planned.

👤 **User Management:**  include the ability to block users and access both their basic and personalised profile information.

🖼️ **NFT Gating** Only permits NFT holders to log in.

🎟️ **Token Gating** Allow token holders with a minimum number of tokens to log in 

✨ **Custom JWT Claim** The JWT Claim can be formatted to meet your needs. To pass the user profile information, you can use a custom template.

🧩 **Custom Profile Fields** To store those details, you can add custom profile fields and use the profile api.

🪪 **KYC** Support BlockPass's KYC features

Hit ⭐️ on Github 

I'd love to hear your feedback.
[FIXED FOR NOW] Need help with flexbox
Tags: css, help, beginners, webdev
Published: 2022-07-26 13:26:00

I need help with flexbox. I need the flexbox "grid" to be in 2x2 squares. I have no idea how to make it that there are only 2 boxes per "row". All what I have been able to do is to have them all in a row or column. 

Image of the idea that I have:
![flexbox rough draft](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jr5elyrv02224vflh48y.jpg)

In this image I have 2x2 grid of boxes that are responsive and the boxes have something inside. I have been able to center the elements inside the boxes.

I am also using grid on the website for the other layout but I feel like using flexbox for these type of elements is more convenient. 

Thank you for reading and helping out!
openGauss Is First Rated as an Advanced Trustworthy Open-source Community
Published: 2022-07-26 12:44:00

Today, open-source has become the most important software building and management model in the global software industry, and has a profound impact on the development of the digital industry. On May 20, 2022, the OSCAR Open Source Pioneer Day was successfully held. The conference is led by China Academy of Information and Communications Technology (CAICT) and China Communications Standards Association, supported by the Cloud Computing Standards and Open Source Promotion Committee, hosted by the Open Source Cloud Alliance for Industry (OSCAR), and co-hosted by the Financial Industry Open Source Technology Application Community (FINOC), ICT Open Source Community (ICTOSC), technology manufacturing open-source community (TMOSC), and Trustworthy Open-source Community (TWOS).
Adhering to the principle of "Openness + Transparency + Compliance + Security = Trustworthiness", CAICT has established a series of trustworthiness open-source standard systems based on the open-source lifecycle and implemented evaluation tests to standardize the market, help enterprises reduce the risks of using open-source software, and promote the establishment of a trustworthy open-source ecosystem.
According to the standards, the openGauss community is first rated as an advanced trustworthy open-source community in terms of community governance, operation, and development.
The Z-Index Property Tutorial
Tags: css, writing, tutorial, beginners
Published: 2022-07-26 12:53:00

In CSS, each box has a position in three dimensions. In addition to the x-axis (horizontal) and y-axis (vertical) positions, boxes also have a “z-axis” where they stack on top of each other.

The `z-index` property defines the **stacking order** of the elements on the **z-axis**. It only works on elements that have a [position](https://dev.to/rembertdesigns/css-positioning-tutorial-1kb5) defined (anything apart from the default `position:static;`).

So when you have multiple overlapping elements on a page, `z-index` lets you decide which one is visible (or nearer to the user), as well as the order of any element(s) that sit behind it.

For example:
```css
.element1 {   
   /* other styles ... */
   position: absolute;
   z-index: 1; 
}
.element2 {   
   /* other styles ... */
   position: absolute;
   z-index: 2; 
}
```
![Z-Index-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bttayks94zla84fp53b8.png)
And rather intuitively, if we swap our order values like so:
```css
.element1 {   
   /* other styles ... */
   position: absolute;
   z-index: 2; 
}
.element2 {   
   /* other styles ... */
   position: absolute;
   z-index: 1; 
}
```
The stacking order will change:
![Z-Index-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gisfesnhhmb39wpngnc4.png)
Negative numbers can also be used.

And when no `z-index` value is set, elements stack in the order that they appear in our HTML.

A good rule of thumb is to allow for number gaps when working with `z-index`. So using “10” then “20” for example. This way there is plenty of room to place an element within your stacking order, without having to re-number every element!

It should also be noted that nested elements behave differently. For example, a child element of element A will **never** be higher than element B, if B has a lower `z-index` value (and therefore a higher stacking order!).

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)
Working with multiple python and pip version on one machine with virtual enviornment.
Published: 2022-07-26 12:45:00

Based on python requirment you can first instal python version you want. Just time of virtual environment creation mention python version. Below have provided example with python3.7. if you want to use create python3.8 or any other version, replace python3.7 with your python version.

- Create python virtual environment without pip
```shell
$ python3.7 -m venv myenv_python37 --without-pip
```

- Activate python virtual environment you created above
```shell
$ source myenv_python37/bin/activate
```

- Now, install pip inside virtual environment
```shell
$ curl https://bootstrap.pypa.io/get-pip.py | python
```

**If you get error while installing pip:**
```shell
ModuleNotFoundError: No module named 'distutils.cmd'
```
install below distutils package
```
$ sudo apt-get install python3.7-distutils
```


### Install all requirement for python 3.7 inside virtual enviornment
```shell
$ pip install -r requirements.txt
```

- After your work is done, close virtual environment

Note: 
- This helps maintaining multiple python and pip version on one system and using python and its supported package based on your requirement.
- All packages from requirements.txt would be accesible inside virtual environment only, not global on your system for python3.7