teleren/devto huggingface dataset:
5 React.js UI Component libraries.
Tags: react, ui, components, webdev
Published: 2021-08-11 13:13:05

## What is a React.js UI Component library?
These are pre-designed building blocks for projects where you need to construct things quickly and don't need much customization.
We will look over my favorite top 5 libraries here.

### [Material UI](https://material-ui.com/)
It is an implementation of Google's design language which is [Material Design](https://material.io/design).
It is easily the most popular component library in the React eco-system.
Has a lot of components & good community support.
They also offer some paid themes & components.
In terms of drawbacks, I found the design language to be too boring. Although they do state that you can implement your own design system but I find the customization methods to be not so developer friendly.

### [Ant UI](https://ant.design/)
It is based on the Ant design language. It is a pretty looking design system. They offer > 60 high-quality components.
They also have a professional version for enterprise applications. My experience with customization has been decent. You can utilize LESS variables to customize design tokens based on the appearance and feel of your brand.

### [Chakra UI](https://chakra-ui.com/)
If [Tailwind CSS](https://tailwindcss.com/) and React CSS-in-JS had a child it would be Chakra.
It is entirely customizable, has excellent community support, and all of the components are designed with composition in mind, allowing you to easily construct your own components.
One of the things I admire about it is that it does not make concessions in terms of accessibility. They also provide premium components to help you construct things even faster.

### [Base Web](https://baseweb.design/)
It is created, managed, and utilized by Uber.
It includes a wide range of attractive components, with accessibility as the top focus.
It is quick since it is built with the [Styletron](https://www.styletron.org/) engine. Style overrides can be used to tweak themes, but in my experience, I've never required them because the design vibe they're trying for is precisely what I want.

### [Geist UI](https://react.geist-ui.dev/)
It is based on the design language of [Vercel](https://vercel.com/).
It is without a doubt the most visually appealing library I have ever encountered.
The components are well-made, however they are limited in quantity & I have noticed some accessibility issues. It is quite underappreciated and has a small community.
You may use it for small projects that require a aesthetically pleasing look and feel.

Here are some more to checkout:
- [React Suite](https://rsuitejs.com/)
- [Braid Design System](https://seek-oss.github.io/braid-design-system/)
- [Grommet](https://v2.grommet.io/)
- [Rebass](https://rebassjs.org/)
- [React Bootstrap](https://react-bootstrap.github.io/)
Webinar Recap: Modern Search Solutions for the Jamstack with MeiliSearch
Tags: jamstack, headlesscms, meilisearch
Published: 2021-08-11 13:09:20


We recently wrapped up our webinar series covering different elements of Jamstack in collaboration with key partners in the rapidly evolving ecosystem.

Our first webinar covered the Modern Search Solutions in the Jamstack . If you missed the webinar, check out a recap of it below including the video recording, and some questions from the audience! 


In this webinar, Charlotte Vermandel, Software Engineer at MeiliSearch, joined Daniel, our Devrel star to showcase how to implement Search experiences into Jamstack Apps!!

## By the numbers: 
#### 📝 133 registrants 

#### 👥 +60 attendees 

#### 🔊 +100 messages

#### 💬  14 questions ❓

&nbsp;

<iframe width="560" height="315" src="https://www.youtube.com/embed/mO_I02ZAfmM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

&nbsp;

## Audience Questions


**I am using strapi as a backend with flutter, where is the best place to store the strapi jwt?**


There are packages that provide a secure storage API for flutter apps like this one: https://pub.dev/packages/flutter_secure_storage


**How to add a Dynamic Zone under component?**

I believe your problem is that the Content Type Builder won't let you create a Dynamic Zone inside of a component. That's because it's not recommended for performance reasons. However, you can do it manually by modifying the JSON file that holds your model's setting: https://strapi.io/documentation/developer-docs/latest/development/backend-customization.html#models

&nbsp;

#### Join our [Newsletter](https://strapi.io/email-updates) & and follow us on [Twitch](https://www.twitch.tv/strapijs) for more exciting webinars!
clean up tmux status-bar
Tags: cli, linux, tmux
Published: 2021-08-11 13:04:28

---
title: clean up tmux status-bar
tags: ['cli', 'linux', 'tmux',]
series: tmux
canonical_url: https://waylonwalker.com/tmux-status-bar/
published: true
---


The tmux status bar can be a handy tool to remind yourself where you are within tmux.  It can also include a bunch of system information like battery status, cpu, mem, whatever you can get from the command  line.  Honestly I like to keep
it minimal, and actually keep it turned off most of the time.  I find that it helps a little bit for others to follow along if I keep it on in certain circumstances.

##  show the status bar

You can set a hotkey to show or hide the status bar.

``` bash
bind s set-option -g status
bind C-s set-option -g status
```

## setting the background transparent

I really want a minimal status bar with very little bling, I want it to get out of the way an not draw too much attention, so step one is to set the background to transparent.

``` bash
# default statusbar colors
#――――――――――――――――――――――――――――――――
set-option -g status-bg default
set-option -g status-fg colour240
```

## setting default colors

I want my status bar to somewhat match the rest of my theme, so I set the default foreground as magenta and the default background as transparent.

``` bash
# default window title colors
#―――――――――――――――――――――――――――――――
set-window-option -g window-status-style fg=magenta
set-window-option -g window-status-style bg=default
```

## my status bar

Honestly I set this up quite awhile ago, and it does everything I need it to for now.  It shows me the current session that I am in on the left and lists out the windows for the session in the middle.

``` bash
set -g status-left-length 85
set -g status-left "working on#[fg=colour135] #S"
set -g window-status-current-format "#[fg=black,bold bg=default]│#[fg=white bg=cyan]#W#[fg=black,bold bg=default]│"
set -g window-status-current-format "#[fg=black,bold bg=default]│#[fg=colour135 bg=black]#W#[fg=black,bold bg=default]│"
set -g status-style bg=default
set -g status-right "#[fg=magenta] #[bg=gray] %b %d %Y %l:%M %p"
set -g status-right '#(gitmux "#{pane_current_path}")' 
set -g status-justify centre
```

For more format options search for FORMATS in the tmux manpage.

Be sure to check out the full YouTube playlist and subscribe if you like it.

[![tmux playlist on youtub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4cgo76y53s1hwykajo1.png)](https://www.youtube.com/playlist?list=PLTRNG6WIHETB4reAxbWza3CZeP9KL6Bkr)

{% post https://dev.to/waylonwalker/how-i-navigate-tmux-in-2021-2ina %}
Top 10 Best VPN Services for Free and Paid [2021]
Tags: free, vpn, top10
Published: 2021-08-11 13:01:49

#What is the VPN and how it works?
VPN stands for "Virtual Private Network" and describes the opportunity to establish a protected network connection when using public networks. VPN encrypts your internet traffic and disguises your online identity. This makes it more difficult for third parties to track your activities online and steal data. The encryption takes place in real-time.  

Choosing a VPN,  You need to know the server locations before connecting to the internet through a Secure VPN unit. You can get a faster connection by selecting the servers closest to your country. This article also covers some free VPNs. Before buying a VPN, consider the Number of servers, security protocol, internet connection speed, VPN tunnels.

#What is a Kill Switch?
Kill Switch is a security feature that protects your IP in case you unexpectedly lose connection to any VPN server. In case the connection is interrupted, Kill Switch blocks all external network traffic to and from your IP until it automatically re-establishes a connection to the same VPN server...[Read More](https://ilabacademy.blogspot.com/2021/08/top-10-best-vpn-2021.html)
Now deploy no-code projects using provided templates in Graftini
Tags: nocode, react, webdev, design
Published: 2021-08-11 13:01:10

It can be tedious to create a new project from scratch and to work on it. As a solution for that, we have introduced creating projects from templates. 

The following video highlights how you can get started with templates.

{% youtube K0_V5mjTk7I %}

We will be adding more templates for the most popular use-cases that you have. So, stay tuned.

**Graftini is an no-code SaaS to design and deploy dynamic web apps without having to write a single line of code.**
Elixir Überauth: how to keep state between request and callback?
Tags: elixir, ueberauth, oauth, authentication
Published: 2021-08-11 13:00:01

[Überauth](https://github.com/ueberauth/ueberauth) is probably the go-to OAuth login extension for Elixir projects. 

The team behind the library has recently improved its security against [CSRF attacks](https://github.com/ueberauth/ueberauth_google/pull/82). Unfortunately, the security improvement comes at a cost for the end user, as it is now impossible to keep state between the *request* and *callback* phases of the OAuth process.

## Background

Most OAuth providers (e.g. *Google*) allow developers to pass custom state inside a `state` query parameter as part od the *request* URL. The OAuth provider then passes the state back when calling our *callback* endpoint.

Überauth now uses the `state` query parameter to pass the CSRF token, overwriting whatever custom state developers put in the request URL.

## Workaround
Luckily, there is another way. We can put our custom state in a session cookie in the [request phase](https://github.com/ueberauth/ueberauth#request-phase) and retrieve it from the session in the [callback phase](https://github.com/ueberauth/ueberauth#callback-phase).

### Code example
The following code snippet shows how to save some custom state in the session cookie and retrieve in the *callback* phase of the OAuth flow.

```elixir
defmodule MyAppWeb.AuthController do
  use MyAppWeb, :controller
 
  plug(Ueberauth, providers: [:google_custom])

  @provider_config {Ueberauth.Strategy.Google, [default_scope: "email profile"]}

  def request(conn, %{"provider" => "google", "custom_state" => custom_state) do
    # Store custom state in the session
    conn
    |> put_session(:auth_custom_state, custom_state)
    |> Ueberauth.run_request("google", @provider_config)
  end

  def callback(conn, params) do
    %{assigns: %{ueberauth_auth: auth}} =
      conn
      |> Ueberauth.run_callback("google", @provider_config)

    # Get custom state back from session
    auth_custom_state = get_session(conn, :auth_custom_state)

    IO.inspect(auth_custom_state, label: "Auth custom state")
  end
end
```

With that code, I am able to start the OAuth flow passing some custom state in the URL (e.g. `https://localhost:4000/auth/google?custom_state=some_values_here`) and then take it back from the session in the `callback` function.
What Is a CRUD App?
Tags: beginners, webdev, firstyearincode, frontend
Published: 2021-08-11 12:59:25

This is a common interview question for Jr. Developer roles and honestly just something all developers should know. Here's a secret though, interviewers aren't looking to see if you know the definition. They want to see *how* you explain it. This question test your technical communication skills. The interviewer wants to know, "Can you clearly present a project to developers **and** clients?" Here's how you can knock this question out.

### Basic Definition Is the Roadmap

> A CRUD App is an application that lets users Create, Read, Update, and/or Delete content.

Simple and sweet but only the beginning. At this point the interviewer knows you can memorize a Google definition. Now you need to show understanding.

### Tell A Story. Paint a picture.

> So let's say you have a blog. You as a user can Create/Publish a post, Read/Show your post, Update/Edit your post and Delete your post. Blogs are classic CRUD apps.

Now the interviewer knows you understand the concept but we can take this one step further to make the answer more complete.

### Tie It Back To The Job

> In web development CRUD functionality is tied to API calls that updates the user's information in a database. Create is tied to a POST request, usually through a submit or publish button. Read ties to GET requests. Update ties to PUT and PATCH requests. Delete ties to DELETE requests.

There you have it. Now we have answered the question, shown that we understand our answer, and shown that we know why it was asked in the first place. If you have an interview coming and don't understand something I've written here, feel free to leave a comment and I'll discuss this with you.
Basics in HTML
Tags: html
Published: 2021-08-11 12:54:10

*How to write a blog using HTML*

1.To Add a title to your blog we use h tag
      ![Reference1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvdto9ug8ooq06ldzqcf.png)

To add more than one title we can use h number(number refers to the title of the number)
![Reference2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmsoe5csi4x4h3qu7xjv.png)

2.To express your content in paragraphs we use p tag
![Reference3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/820cxeeb4jl2cl5jdesb.png)
There can be any number of paragraphs by specifying the number of the paragraph

3.To embed a image we use

![Screenshot 2021-08-11 180043](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpza0htb00wct0xpsefr.png)
   

4.To embed a link we use <a href = "Your Link">
![Reference4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhuq78pdr35n45riju5m.png)

To know more 
Visit the page for a [sample blog](https://Blog.monishkumar2.repl.co)
How to build Responsive Designs Blazingly Fast using Layouts!
Tags: lowcode, design, nocode, layouts
Published: 2021-08-11 12:25:28

Traditionally, app development for different devices requires different configurations to set it up and make it work across end-user devices. Layouts in DronaHQ eliminate the extra steps involved by ensuring the app you build once stays responsive and works across screens of all sizes! In [this video](https://www.youtube.com/watch?v=fOAitkRl86U), we deep dive into the mechanics of layouts, show how to design and build a responsive application, and fine-tune it to get the best results across all devices.

Watch and learn how to use layouts to make your app responsive and work with mobiles, desktops, tablets & more!
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2021-08-11 12:00:22

---
title: "Today's Daily Dose of Programming Humor"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258e3bbae5.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why don't bachelors like Git?

___A:___ Because they are afraid to commit.
 -->
How do I manage States in React Apps?
Tags: react, javascript
Published: 2021-08-11 11:30:11

In this article, Let's go through, how do i manage local, global states When building react applications.

I try to follow up with, keep the states as low as possible, 

App Level State:
1. Local State 
2. Lift State
3. Global State

## 1. Local State:

### Example:
```
const App = () => {
    const [theme, setTheme] = useState("light");

    const pickTheme = theme === 'light' ? 'dark' : 'light';
    
    const toggleTheme = () => {
        setTheme(pickTheme)
    }

    return (
        <div>
            <h4>Theme: {theme}</h4>
            <button onClick={toggleTheme}>Change</button>
        </div>
    )
}
```

## 2. Lift State: 

when components grows like 2, 3 levels deeper, it is fine.. 


### Example:

```
function App() {
    const [theme, setTheme] = useState("light");
    const pickTheme = theme === 'light' ? 'dark' : 'light';
    const toggleTheme = () => {
        setTheme(pickTheme)
    }

    return <DirectChild theme={theme} toggleTheme={toggleTheme}  />
}

function DirectChild({ theme, toggleTheme }) {
    return <div>
        <div>Hello Child</div>
        <DeeperChild theme={theme} toggleTheme={toggleTheme} />
    </div>
}

function DeeperChild({ theme, toggleTheme }) {
    return <div>
        <h2>Hello Child</h2>
        <h4>Theme: {theme}</h4>
        <button onClick={toggleTheme}>Change Theme</button>
    <div>
}
```

But when components nested with N level deep, will lead to prop drilling, which causes performance issues, in those cases, we should think Global State Management..


## 3. Global State:

When dealing with Global States, I try to follow up with React Context API hooks, Let us go through, how to integrate with an example.

But When deal with Global State Management, can use any 3rd party libraries most comfortable with like Redux, Mobx, Recoil etc.. or just stick with useState hook..



### Example:

```
import React from 'react';
const MyContext = React.createContext({});
const MyProvider = ({ children }) => {
    const [theme, setTheme] = React.useState('light');
    const nextTheme = theme === 'light' ? 'dark' : 'light';
    const value = {
        theme,
        nextTheme,
        toggleTheme: () => {
            setTheme(nextTheme);
        }
    }

    return <MyContext.Provider value={value}>{children}</MyContext.Provider>
}

function App() {
    return <MyProvider>
        <DirectChild />
    </MyProvider>
}

const DirectChild = () => {
    return <DeeperChild />
};

const DeeperChild = () => {
    const { nextTheme, toggleTheme } = React.useContext(MyContext);

    return <div>
            <p>Theme : {nextTheme}</p>
            <button onClick={toggleTheme}>Change Theme</button>
    </div>
}
```

## External Data Fetching:

Often I try to use with Next.js's **SWR** or **React Query** libraries, which are powerful with many features.
on GraphQl fetch, can use **Apollo Client**.


Hoping this article have given some idea on managing states with React applications.

Thanks.
🔥JavaScript Interview Questions for Machine Coding rounds⚡
Tags: javascript, coding, interview
Published: 2021-08-11 11:25:27

Hello everyone,👋

In this article we'll discuss about JavaScript Interview questions that will be asked in the Machine Coding Rounds or Code Assignment Rounds.

🔥 I've listed out some of the questions which may ask in the UI interviews. 

1. **Comments Widget:**
   👉 We need to develop a comments widget with functionality as shown below:
       * Able to comment.
       * Edit the comment.
       * Delete the comment.
       * Like the Comment.
       * Nested Comments. 
2. **Todo App:**
   👉 We need to develop a Todo App with functionality as shown below:
       * Create, Edit, Delete Lists.
       * DND (Drag and Drop Cards ) feature.

3. **Food Ordering App:**
   👉 We need to develop a Food Ordering App with functionality as shown below:
      * Able to display Restaurants information using an API or create a JSON.
      * Display menu of Food Items.


### We'll discuss this questions one by one in this Blog only. Stay tuned for it.😎




{ .....
..
... to be continued.
}
How Can You Make Money With HTML And CSS Only
Tags: html, css, webdev, codenewbie
Published: 2021-08-11 11:22:37

**What can I do with HTML and CSS?**

New web developers ask repeatedly, how can we make money with just HTML and CSS skills? That is the million-dollar question that came to mind of every developer. 

Yes! Everyone can make money with HTML and CSS knowledge. In this article, I will share the 10 steps, how can you make money with your HTML and CSS knowledge?

**If you have skills and deep knowledge of HTML and CSS, here are the [10 ways to Make Money with HTML And CSS Only](https://www.hmablogs.com/can-you-make-money-with-html-and-css/)**
 
To earn money from HTML and CSS, follow these 10 ways:

1. **Create websites for small local businesses around your area.**
2. **Start working as a freelancer in the freelance marketplace such as [Fiverr](http://www.fiverr.com/s2/b259857e3c) and [Upwork](https://www.upwork.com/ab/find-work/recommended).**
3. **Start a YouTube channel and start teaching your HTML and CSS skills.**
4. **Build a blog website and post articles about HTML and CSS for code newbies.**
5. **start learning WordPress**
6. **Work as a junior web developer.**
7. **Offer your services to create HTML email templates.**
8. **Create website templates and landing pages and start selling templates on Themeforest, marketplace to earn money.**
9. **Build a portfolio website to display your experience and skills.**
10. **Learn further to boost your earning potential.**

I have explained these 10 points in detail that will be helpful to **[make money with HTML and CSS knowledge only](https://www.hmablogs.com/can-you-make-money-with-html-and-css/).**
🔥 Advanced JavaScript Concepts.😎
Tags: javascript, programming
Published: 2021-08-11 11:19:09

Hello everyone,👋


If you are new to JavaScript, it can be little bit of challenging to understand some core and Advance topics 🤷‍♂️. But don't worry keep your fingers crossed🤞 because in this article you'll get full information regarding Advanced JS Topics😁.

⚡ 1. **Closures:**

👉 **MDN Def:** A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

Doesn't sound great to you???🤔 Don't worry. Stay tuned.🔥

So, Basically a function bind together with its lexical environment or lexical scope is known as **Closer**. Let's see what exactly is lexical scope.
![closure1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xtltz0ggv4sjgpdnbnh.png)

⚡The word lexical refers to the fact that lexical scoping uses the location where a variable is declared. Nested functions have access to variables declared in their outer scope.


![closure2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7ok1tij50m18gkbpt4c.png)

⚡ Running this code has exactly the same effect as the previous example of the x() function above.
⚡ What's different (and interesting) is that the displayName() inner function is returned from the outer function before being executed. The reason is that functions in JavaScript form closures. A closure is the combination of a function and the lexical environment within which that function was declared.

✅ Every closure has three scopes:

* Local Scope (Own scope).
* Outer Functions Scope.
* Global Scope.

✅ Let's say a function can access some variables of it's lexical environment or parent scope, the function actually remembers the reference of variable but it's value. 

Let's look at the code:

![closure3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8joldv7l384qd4e3qqj0.png)


Now you might have a bit understanding of Closures right.😎

✅ let's see some of uses of Closures:

* Module design pattern.
* Currying.
* Functions like once.
* Memoize. 
* Maintaining state in Async World.
* setTimeouts.
* Iterators.
* and so on.......!.



{ .....
..
... to be continued.
}