teleren/devto huggingface dataset:
🔍Visualizing the Calling Hierarchy of React Components in the Browser😊
Tags: react, typescript, plugin, diagram
Published: 2022-01-04 16:46:00

## Introduce
It is very difficult to grasp the whole picture of a component just by looking at the code such as vscode. We often use tools such as Figma to create diagrams and sequences, but this is a very costly process. In order to solve this problem, we have created and released a library to visualize react components as diagrams in a browser. It is still a work in progress, so many considerations may be missing.

[Demo](https://hardcore-fermat-22326b.netlify.app/)

[react-component-analyzer](https://github.com/activeguild/react-component-analyzer) is a library that is useful when exchanging PR or design discussions with friends, as it allows you to visualize the component tree as a diagram and discuss it based on a common understanding. It will also help you to understand the scope of impact when you modify the implementation.
I hope it helps you to design better components.

## Point
- Using the popular library, [@typescript-eslint/typescript-estree](https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/typescript-estree) AST to do the analysis.
- By using VSCode's schema in the Browser, you can quickly check the implementation of components you are interested in.
- If you are using vite without setting it in the config file, you can resolve the alias from vite.config.ts.
- It uses [prismjs](https://github.com/PrismJS/prism/), which allows for code reading that is more like an IDE.

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

## Install
```bash
npm i -D visualize-react-component
```

## Usage

By specifying the React root file and the component files, it will parse them and output the `stats.html` file.

```
npm run rca ./src/main.tsx
```

I'm waiting for your feedback.
Beautify Your GitHub Profile README
Tags: github, profile, readme, beginners
Published: 2022-01-04 16:37:44

Have you ever seen a beautiful [profile README](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme) while browsing the GitHub profiles of someone?

You may be wondering how to make it look like that. Here are some tips:

## Use HTML Elements

Because README uses Markdown syntax, there are some features in the layout that HTML Elements can do that Markdown cannot, such as centering blocks and resizing images.

## Use Tools

There are many tools that can help you make your README more beautiful. The idea is to use the GitHub API to dynamically generate SVG charts that show your GitHub data, such as contribution amount, cost used languages or total star earned, total PRs... etc.

### For Badges

For badges, try [**shields.io**](https://shields.io/), it helps you create many different kinds of badges, and there are many parameters to create the badge you want to show.

[![repo-link](https://github-readme-stats.vercel.app/api/pin/?username=badges&repo=shields)](https://github.com/badges/shields)

Here is an example:

![badge-example](https://img.shields.io/badge/Example-black?logo=dev.to&style=for-the-badge)

### For Stats

For stats, try **github-readme-stats**, it helps you create SVG for all kinds of your GitHub stats.

[![repo-link](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)

Here is an example:

![stats-example](https://github-readme-stats.vercel.app/api?username=wst24365888&border_radius=0&icon_color=0aa&bg_color=000&text_color=ccc&title_color=FCE928&show_icons=true&count_private=true&hide_border=true&include_all_commits=true&hide_title=true)

### For Commit/Contribution Graph

For commit/contribution graph, try **github-contribution-graph**! 

It's an awesome tool for dynamically generating contribution graphs that show your GitHub contributions.

It's beautiful, it has SLIM animation, and it supports custom background image (even `.gif` !)

[![repo-link](https://github-readme-stats.vercel.app/api/pin/?username=ez4o&repo=github-contribution-graph)](https://github.com/ez4o/github-contribution-graph)

Here is the demo:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ucxf4y60oi8go5cwf6p.gif)

Okay, that's all about today's tips!

If you have any ideas or questions, please feel free to share them with me in the comment section!

If you like any of the above tools, don't forget to leave a star in their GitHub repo!
How to use .map() in javascript? React
Tags: javascript, react, tutorial, beginners
Published: 2022-01-04 16:20:14

This is a tutorial for begginers where you will learn how actually use map and how it works. 
If you just want to see how to use it go to the bottom.

Let's talk about how .map() works, first of all if you did not know it yet it is a for loop, where it iterate every time there is another object.

What i mean when i said it is a for loop? 
I mean that you can actually make a for loop to interate the array or the object you want to iterate.

The map() function basically create a new array with the results of calling a provided function on every element in the calling array.

Let's show an example

```
let arr = [1,2,3,4,5]
```

Now let's map it

```
let mapVar = arr.map(data => data * 2)
```

Now if we console.log the result we should see all the values multiplied by 2

[2, 4, 6, 8, 10]

Now let's talk about how to map an array of objects which was one of the questions i first had.

First we declare or most commonly will be data from an api which will come in json format but for simplicity i will declare a variable in a 'json format'.

```
let firstArray = [{
  name: 'uno',
  surname: 'dos'
},{
  name: 'valentina' ,
  surname: 'Gutierrez'
},{
  name: 'Thor',
  surname: 'Suarez'
},
]
```

```
console.log(firstArray.map(data => data.name))
```

That will iterate over every object looking for a name parameter.
In this case the console will print the following

['uno', 'valentina', 'Thor']

Well so that's it for this short article i hope someone find it helpfull
Cheers Lautaro
Top 10 Datasets For Machine Learning Practitioners With Notebook Solutions
Tags: machinelearning, python, programming, datascience
Published: 2022-01-04 16:16:44

Machine learning is the study of computer algorithms that can improve automatically through experience and by the use of data, as per Wikipedia. It is a branch of Artificial Intelligence. It is used for time series forecasting, fraud detection, spam filtration, Recommendations, Marketing, Healthcare, etc.

Datasets work as roots for machine learning projects. a dataset is a collection of rows and columns where each column represents a different variable and each row represents a record for the variables. Every Machine Learning Project Start and End Because of Datasets. In This Blog, I am Going To Share With You Over 20 Datasets From Different Domains Like Computer Vision, Time Series, Natural Language Processing, Predictive Analysis, and More.

> “The Goal Is To Convert Data Into Information and Information Into Insights” — Carly Fiorina

1. The IRIS Dataset
2. The Mall Customer Dataset
3. The Boston House Prices Dataset
4. IMDB Reviews Dataset
5. Wine Quality Dataset
6. Titanic Dataset
7. Spam SMS Dataset
8. Movie Lens Dataset
9. MNIST Dataset
10. German Traffic Sign Recognition

Get a Sneak Peak of Datasets and Notebook Links [Here](https://medium.com/pythoneers/top-10-datasets-for-machine-learning-practitioners-with-notebook-solutions-d89c0c1adfe9).
Managing Your Lows
Published: 2022-01-04 16:11:19

As someone in a management role at a large, multi-national, software engineering firm, I've come across many diverse individuals for whom it's my goal to make work approachable, flexible, and supportive. Today, I wanted to share something that was affecting one of my team members earlier this year and often affects me.

[Watch on YouTube](https://www.youtube.com/watch?v=HJp14HBB5a4)

## Having A Bad Day
My team member said they were having a down day. This is definitely something a lot of us hear from others and feel
ourselves, especially with the limited social interactions that we've had since the onset of COVID-19. This "low" may have been just how they were feeling for some unknown reason, how productive they were that day, or anything really where they felt they didn't meet their own expectations for what success or happiness felt like.

## Sometimes, We All Get A Little Down
However, you need to remember that having an off day is really just that - one day. Sometimes, you feel like you’ll
never recover or that you’ve made a mistake that’s going to haunt you forever. Fortunately, though, our mistakes are not unique. Someone else likely made that exact mistake before we did, and they were able to move on. Maybe the anguish lasts a few days or weeks, but you can generally find a modicum of happiness somewhere in there.

## What Do I Do To Deal With A Bad Day
For me, if I can’t find that happiness, I try to or at least find a vision of what happiness looks like to me. This has a two-fold effect. One is that it gets my mind off of whatever is making me feel not quite like myself that day. The second is that it helps me re-frame my state of mind to think through how I can achieve that state of happiness that I envisioned. This plan isn't always eating healthier, working out more, or studying harder. We don't always need to strive to achieve and fall into some sort of glorified hustle culture.

Sometimes it's just deciding I need time off from work or social interaction to stay home and read or play video games. Maybe it's to catch up on TV or post memes about how mad I am at Game of Thrones.

## What To Say To Someone Having A Bad Day
The way I try to look at it is somewhat like the stock market. It has a long history of highs and lows, but in
general, its more recent lows are higher than its past lows. This isn't always the case, but as long as we aim to grow over time, hopefully, we can achieve the same level of higher lows. There are going to be days when we bottom out. There are going to be days when those around you bottom out. No one really has it together - not all the money, fame, or success can help that. All we can do is aim to be better - whatever we ourselves define better as.

## Conclusion
The most important thing to me as a manager, a friend, and someone random on the internet is your ability to succeed in the long term. Today doesn't define you. It's everything you've done until today and what you will do tomorrow that I look for. I hope you can do the same for yourself.
How To Find Linux System Installation Date
Tags: linux, ubuntu, syslog, tips
Published: 2022-01-04 16:05:39

Several methods exist to find out the possible system installation date and time. The first method we use is the Debian Installer log. It should work on all Debian based distributions such as Ubuntu. The following command will show the content of the log with timestamps. Scroll up to find the earliest timestamps.

```
cat /var/log/installer/syslog
```

Or otherwise, instead of printing the complete log with the `cat` command, just print the first few lines using the `head` command. The following command will print the same Debian Installer log but only the first 10 lines.

```
head -10 /var/log/installer/syslog
```

Also, go to the `/var/log/installer` directory and inspect the creation dates of the files inside that directory.

```
ls -l --full-time /var/log/installer/
```

Another approach is finding the oldest file in the system. This method should work on almost all the systems regardless of their distribution. Run the following command.

- `--full-time` will display the date and time in long format.
- `-talc` display files as a list, sorting by the modified time from newest to oldest.
- `tail -1` display only the last line.

```
ls --full-time -talc / | tail -1
```

It should display the date and time of the `lost+found` directory. If you need, you can also directly get the date and time of the `lost+found` directory with the following command.

```
ls -ld --full-time /lost+found
```

Feel free to visit [devtonight.com](https://devtonight.com?utm_source=dev&utm_medium=questions&utm_campaign=how-to-find-linux-system-installation-date) for more related content.
Lets Dive in React
Published: 2021-12-22 17:05:28


1. PropTypes
In big applications, developers can get a lot of bugs with type checking. For that, they use some javascript extensions like TypeScript to check the type of their whole application. Even if they don’t use javascript extensions react js has a buil-in type checking program. To start type checking on the props of a component we could use prototype property to know the type.
Prop types use to make sure the data we get is valid and for that its exports a range of validators. Using Prototype. string, if unreasonable data send from the prop then react will show a warning in the console. This type-checking process only happened in development mode.
2. State-props
In react component, we can send data by using props. In the parent component, our state can be shared through the props on the child component. Using state hooks if we share data to other components and change the data from anywhere the state will change everywhere.
3. JSX
The Javascript XML is the JSX. it’s neither string nor Html Its gives us access to writing directly HTML in react. By JSX it’s so easy to create a template.
4. Component Lifecycle
Every component in React has several lifecycle methods that we can override to run code at specific times in the process. There are three phases Mounting, Updating, and Unmounting. If shouldComponentUpdate() returns false then render() will not be invoked.
Mounting is the process of putting elements into the DOM. There are four react built-in methods to do mounting a component. Constructor(), GetDerivedStateFromProsp(), render(), ComponentDidMount().
5. Hooks
To have access to state or any necessary thing we use hooks. It’s a way to write code without repetition of code and we can do our job. There are several hooks in React like useState, useEffect, use context, useReducer, use callback, useMemo, useRef etc.
 
6. custom hooks
In react we can also create our own custom hooks that make our life easier. To create react hooks we just need to name our file start with use. For custom hooks, we can easily reuse stateful login
 
7. context API
To manage the state in React it’s hard to send data through the component at the down level of the component. Here is context API come. We can create context API and manage data from all components. Its help to use data from all level of the component. Context API can be created with react built-in hooks useContext. Nowadays developers are too happy with redux than context API.
8. Virtual DOM and diffing- algorithm
React works with diff algorithm and use virtual dom to make faster render on-site. Its detect state and only rerender the component that has been changing its state.
grid column percentage 
Published: 2022-01-04 16:01:32

```css
.container{
    display:grid;
    grid-template-rows:repeat(3,100px);
    /*grid-template-columns: repeat(2,100px);*/
    /*🔅*/
    grid-template-columns: 30% 70%;
    border: 3px solid lightgray;
    height:100vh;
}


.box{
    background-color:gold;
}
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>

<!-- 💛 -->
<div class="container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <div class="box">D</div>
</div>


</body>
</html>
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opcrz1xkur623s5htjhu.png)
Our favorite javascript one-liners
Tags: javascript, snippet, webdev, programming
Published: 2022-01-04 15:53:17

These are our favorite one-liners that we've used and forgot existed because they work so well 😁.

## Generate a random hex color

```js
const color = () => '#' + Math.floor(Math.random() * (0xffffff + 1)).toString(16).padEnd(6, '0');
```

## Remove array duplicates

```js
const removeDuplicates = arr => [...new Set(arr)];
```

## Reverse a string

```js
const reverseString = str => [...str].reverse().join()
```

## Clear all cookies
Note: This will not always work because cookies can be set to not be changed from the front-end. (Thanks @lukeshiru!)

```js
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, '=;expires=${new Date(0).toUTCString()};path=/'));
```

## Remove falsy values from an array

```js
const removeFalsyValues = arr => arr.filter(x=>x)

/** OR **/

const removeFalsyValues = arr => arr.filter(Boolean)
```

## Get the value of a query parameter from a url
Pass in the url and the parameter that you're looking for the value of, and this function will return the value to you

```js
const getQueryParam = (url, param) => new URL(url).searchParams.get(queryParam);
```

## Copy to clipboard

```js
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
```

## Get selected text

```js
const getSelectedText = () => window.getSelection().toString();
```

## Scroll to Top

```js
const scrollToTop = () => window.scrollTo(0, 0);
```

## Scroll to Bottom

```js
const scrollToBottom = () => window.scrollTo(0, document.body.scrollHeight);
```

## Toggle a Boolean

```js
const toggleBool = bool => !bool;
```

## Convert Fahrenheit / Celsius

```js
const cToF = (celsius) => celsius * 9/5 + 32;
const fToC = (fahrenheit) => (fahrenheit - 32) * 5/9;
```

## Check if a property exists on an object
I know this seems like more than a one-liner, but given an object already exists, checking for properties on that object is definitely a one-liner 😁

```js
const myObject = {
  id: 1,
  name: 'Tron',
  group: 'decepticons'
};

const isGroupExists = 'group' in myObject;
console.log(isGroupExists); // true

const isMusicExists = 'music' in myObject;
console.log(isMusicExists); // false
```

### Thanks
Special thanks to Fernando, José, @patricia_br, @lukeshiru, @lionelrowe and @jonrandy for adding to this list and optimizing!
Kwik Theme für den Thrive Theme Builder: Für superschnelle Websites!
Tags: wordpress, thrivethemebuilder, thrivethemes
Published: 2022-01-04 18:43:13

---
title: Kwik Theme für den Thrive Theme Builder: Für superschnelle Websites!
published: true
date: 2022-01-04 15:49:00 UTC
tags: WordPress,thrivethemebuilder,ThriveThemes
canonical_url: https://bloggerpilot.com/kwik-theme/
---

![Kwik Theme für den Thrive Theme Builder](https://bloggerpilot.com/wp-content/uploads/2021/11/kwik-theme.png)

Wenn du auf der Suche nach einem WordPress-Theme bist, mit dem du einen eigenen Blog erstellen kannst, ist dieses Theme genau das Richtige für dich! Das Design dieses Themes ist darauf ausgerichtet, dir ein hervorragendes Benutzererlebnis zu bieten, zusammen mit einer breiten Palette von Funktionen, die sicherstellen, dass du einen Blog erstellen kannst, der professionell, effektiv und umwerfend aussieht.

Der Original-Artikel erschien auf [Kwik Theme für den Thrive Theme Builder: Für superschnelle Websites!](https://bloggerpilot.com/kwik-theme/).
How to Create A Beautiful Navbar Using NEXTJS & Tailwind CSS like STRIPE.COM.
Tags: javascript, tailwindcss, react, stripe
Published: 2022-01-04 15:45:29

Learn how to build a custom navbar like stripe.com using React (Nextjs) and tailwind CSS like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2esb2gxh21j5euwv1td0.gif)

the video of our project can be found here
{% youtube JBs7pxCsAcc %}
608/708 captions out OBS?
Tags: obs
Published: 2022-01-04 15:21:31

Using the "Cloud Closed captions" plug in (ratwithacompiler/OBS-captions-plugin) it does a pretty good job of captioning but looking for a way to output those captions in the video as VANC on SDI (decklink) or NDI or UDP or SRT or HLS..  Any suggestions?  Thanks!
16 basic commands to get started with GIT
Tags: git, beginners, webdev, codenewbie
Published: 2022-01-04 15:03:54

As a beginner knowing all the git commands could be overwhelming, but you can get away with some basic git commands at the start.

In this article, we will go through these 16 basic git commands that you should know as a new developer.

1. git clone
2. git init
3. git checkout
4. git branch
5. git config
6. git status
7. git diff
8. git add
9. git commit
10. git push
11. git remote
12. git pull
13. git log
14. git rm
15. git stash
16. git fetch

Find more details on the original post: 
 https://www.novicedev.com/blog/16-basic-commands-get-started-git
A Simple 🤓 yet Powerful 🚀 Server with Python 🐍
Tags: python, webdev, programming, javascript
Published: 2022-01-04 14:55:53

Python is very well known for it's simplicity 🤩. Which is a plus point if you are just getting started in the programming world.

In this post, you'll be learning how to create a simple [FastAPI](https://fastapi.tiangolo.com/) 🚀 server in Python 🐍.

FastAPI is really handy to get started with `backend development` in python. In this post, you'll see a simple code demo of FastAPI.

So let's get started 🚀

---

## Setup Python Environment

Open a directory, open terminal or cmd and write the following command to create a virtual environment with `Python v3`

```bash
$ python3 -v venv env
```

Activate the Virtual Environment

> Windows

```
$ .\env\Scripts\activate
```

> Linux or Mac

```bash
$ . env/bin/activate
```

---

## Install the Dependencies

Install FastAPI and other dependencies

```bash
(env) $ pip install fastapi "uvicorn[standard]"
```

---

## Code 🚀

Create `main.py` file

> Import FastAPI

```python
from fastapi import FastAPI
```

> Create FastAPI instance, `app`

```python
app = FastAPI()
```

> Write a `route`, on which you will be hitting the server (Requesting for some `Resource`).

```python
@app.get("/")
```

This is a root route (eg. http://127.0.0.1:8000/)

> Now, Write a function, which will be trigerred when you hit this `API end-point`

```python
def index():
    return {"msg": "Hello, World!"}
```

---

## Full Code 🤓

Combining the above script will result the `main.py` a this-

```python
from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def index():
    return {"msg": "Hello, World!"}
```

---

## Spin up the FastAPI Server 🚀

```bash
(env) $ uvicorn main:app --reload

INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     Started reloader process [28720]
INFO:     Started server process [28722]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
```

Now, open [http://127.0.0.1:8000/](http://127.0.0.1:8000/) in your browser, you'll se your first server serving the clients.


![Hello, World!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75zoomra5xlrdqyh9bjo.png)

---

## Explore FastAPI 🚀

Now, you have your first server running. You can walk through the [FastAPI Docs](https://fastapi.tiangolo.com/). and explore the possibilities.

---

Hurray! You just learned how to setted up **A Simple 🤓 yet Powerful 🚀 Server with Python 🐍**.

---

I hope, you guys liked this quick tutorial. If so, then please don't forget to drop a Like ❤️

And also, help me reach **1k Subscribers** 🤩, on my [YouTube channel](https://www.youtube.com/channel/UCCO4jIqmQVFDmVeeaAO5obA).

Happy Coding! 😃💻