teleren/devto huggingface dataset:
What is Zustand? How to Use in React || React Native
Tags: react, reactnative, javascript, typescript
Published: 2022-11-02 10:36:54

A **small**, **fast** and **scalable** state-management solution using simplified flux principles. Has a comfy api based on hooks

- **small**
Zustand is one of the smallest state management libraries with a bundle size of just 1.13kb.

- **fast**
Zustand is fast, thanks to its small size, making us have instantaneous UI updates on changes to our state.

- **scalable**
With Zustand, we can create a store, which is a central point of truth where all our global app state resides in. Our store is simply a hook, which we can easily import and use where needed. making Zustand very scalable.


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


Let's go over a basic store example with Zustand using Typescript.

**Step 0:** Install zustand
```bash
yarn add zustand
```

**Step 1:** Import and Create your Store (ex: Authentication)
```js
// authStore.ts
import create from 'zustand';
import getToken from './utils';

interface AuthStateType {
  status: 'idle' | 'signOut' | 'signIn';
  token: string | null;

  signIn: (token: string) => void;
  signOut: () => void;
  hydrate: () => void;
}


export const useAuth = create<AuthStateType>((set, get) => ({
  status: 'idle',
  token: null,

  signIn: token => {
    set({ status: 'signIn', token: token });
  },

  signOut: () => {
    set({ status: 'signOut', token: null });
  },

  hydrate: () => {
      const token = getToken();

      if (token !== null) {
        get().signIn(token);
      } else {
        get().signOut();
      }
  },
}));
```

![zustand+react+native+tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3bxg5htiuzzwi870jto.gif)


**Step 2:** Use your auth store (Inside of a React Component).
    
- Check **status**
```js
const { status } = useAuth();
console.log(status); // idle
```
- **SignIn**
```js
const { signIn, status } = useAuth();
signIn("user token");
console.log(status); // signIn
```
- **SignOut**
```js
const { signOut, status } = useAuth();
signOut();
console.log(status); // signOut
```
- **Hydrate**
```js
const { hydrate } = useAuth();
hydrate();
```

**Step 3:** Use your auth store (Outside of a React Component)

```js
// authStore.ts

export const useAuth = create<AuthState>((set, get) => ({
...
}))

// add this line
export const hydrateAuth = () => useAuth.getState().hydrate();
```
now you can use `hydrateAuth` Outside of a React Component.

```js
import { hydrateAuth } from "./authStore.ts"
hydrateAuth()
```
Gartner hype cycle
Published: 2022-11-02 10:16:37


![Gartner hype cycle in graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3c89zrmhuamh2hsswfkf.png)


Gartner hype cycle is a graphical of apresentation developed.

Represent the maturity, adoption, and social application of specific technologies.

The hype cycle claims to provide a graphical and conceptual presentation of the maturity of emerging technologies through five phases. 

The model is not perfect and research so far shows possible improvements for the model.
How to find the folder location of a command in linux?
Tags: linux, command, location
Published: 2022-11-02 10:07:07

---
title: How to find the folder location of a command in linux?
published: true
description: Lets say you want to find where is the command ls is located in your system?
tags: linux, command, location
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-02 09:58 +0000
---
To find all the folder locations where `ls` command is found:
```
type -a ls
```
Returns
```
ls is aliased to `ls --color=auto'
ls is /usr/bin/ls
ls is /bin/ls
```
Suppose there is a command by name `ffbn` and you want to know more about it:
```
type -a ffbn
```
Returns
```
ffbn is aliased to `find_file_by_name'
```
```
type -a find_file_by_name
```
Returns
```
find_file_by_name is aliased to `find_file_by_name'
find_file_by_name is a function
find_file_by_name () 
{ 
    find . ! -readable -prune -o -type f -name "$1" -print
}
```
Indeed `type` command is super useful to know about a command. 
[Documentation](https://linuxcommand.org/lc3_man_pages/typeh.html)
[Further help](https://linuxize.com/post/linux-type-command/)
Wednesday Links - Edition 2022-11-02
Tags: java, jvm, kafka, graalvm
Published: 2022-11-02 10:05:55

Pre-Allocated Methods for HashMap and HashSet (1 min)🥤
https://inside.java/2022/10/24/sip069/

ObjectInputFilter (10 min)🚰
https://www.javaspecialists.eu/archive/Issue304-ObjectInputFilter.html

Selectively Shifting and Constraining Computation (12 min)🚏
https://openjdk.org/projects/leyden/notes/02-shift-and-constrain

Push-based Outbox Pattern with Postgres Logical Replication (8 min)📬
https://event-driven.io/en/push_based_outbox_pattern_with_postgres_logical_replication/

xq - like jq but for XML (30 sec)🧰
https://twitter.com/maciejwalkowiak/status/1587562549565956100

3 Java Patterns that died in 2022 (6 min)🐾
https://springbootlearning.medium.com/3-java-patterns-that-died-in-2022-2896e2f35773

Kafka Transactions with Spring Boot (9 min)🤝
https://piotrminkowski.com/2022/10/29/kafka-transactions-with-spring-boot/

Dear JetBrains. Don't mess with your UI. (2 min)⚠️
https://neil.computer/notes/dear-jetbrains-dont-mess-with-your-ui/

GraalVM 22.3 (9 min)🏆
https://medium.com/graalvm/graalvm-22-3-is-here-jdk-19-builds-jlink-support-new-monitoring-features-and-more-f6e2b2eeff95

Whiskey Clustering with Groovy and Apache Ignite (3 min)🥃
https://blogs.apache.org/groovy/entry/whiskey-clustering-with-groovy-and
Remember To Forget About Your Long Term Goals Every Day
Published: 2022-11-02 09:40:44

One of the problems of having a long term goal and strategy is that it becomes overwhelming when you think and plan too much. 

For example, for my startup Proxies API one of the long-term goals is to write 100 articles in the year. 

All this overwhelm means that when I wake up, I find it difficult to “get down to” the daily tasks that lead me to my goal in the first place. It is like my brain. Once it starts to think about long term goals and strategies, it can’t switch to doing simple tasks and tactics.

So every day, I wake up and revise my goals and strategies and get them out of the way. Once my brain is reassured that I am on the right track, I try to forget them altogether. Just try shaking it off with the promise of returning to it in the evening. Till then, no re-strategizing, no making sure we are on the right track. I am not even going to remember them.

It might be pronounced by some of you and is probably weird that I need to do it to myself, but hey, that’s how my brain is designed, and it’s a big deal for me now that I have discovered this works for me.

The author is the founder of Proxies API, a proxy rotation api service.
Coaches don’t play
Published: 2022-11-02 09:27:11

I remember the first time I was promoted to a leadership position. I was thrilled, looking forward to all the new challenges this new position would bring. But I also remember the week after, how I found myself trying to complete the same tasks as before, but now also juggling additional meetings and management tasks.

Clearly, something was wrong; becoming a leader shouldn't be "doing the same work but having more meetings".

And it’s definitely not. I was seeing it from the wrong angle. I was about to learn that being a leader means you are not a player anymore.


## You are not a player anymore.

Imagine for a second that you are a soccer player and you're promoted to be the team's coach. Can you imagine yourself on the pitch, trying to score during the match?

Yeah, it sounds ridiculous! Coaches are not supposed to play the match, but to guide the team. The same applies to any leader. **Your goal is to guide your team to achieve the best results, not to do their job.**

As a leader, you should focus on defining the strategy, clarifying goals, setting the right expectations, providing your team with the tools to succeed, and then letting them play the match.

You should interiorize this concept because you'll find a lot of challenges that will test your leadership skills, like the delivery trap.


## The delivery trap

All projects have milestones and deadlines; the closer the deadline, the more conscious you become about the performance gaps in your team. In these situations, you might feel tempted to jump in and start doing their work.

You'll find a lot of good reasons to jump in, "I want to lead by example", "It will be faster if I do it myself", "I want to support my team"...

They are all excellent reasons, but it’s also the wrong decision. **Everybody loses if you jump in and start working on your team's tasks.**

By jumping in, you are:

1. Removing the opportunity for your team to face the challenge and learn from it.

2. Losing the opportunity to improve your leadership skills, because you’ll only be polishing the skills you already had from your old position.

**You should focus on improving your leadership skills to help your team.**
With the pressure of a deadline, you should focus on redefining the plan, ensuring the expectations are clear, figuring out what's blocking your team, and helping them to perform at their very best.

That way, iteration by iteration, your team will become better. Your ultimate goal should be to make your team grow to the point that they don't need you. The goal is to make yourself redundant.


## Make yourself redundant

One of the many good things about being in a leadership position is that it allows you to help people grow and develop their potential. If you do it well, after some time, your team will reach a point where they will be able to do their job without needing you; that's the ideal scenario.

Once your team doesn't need you, you'll have the opportunity to join a different team and continue helping there. That is one of your key goals as a leader, to help people grow, and in doing so, help the company grow.
NETMARK
Tags: javascript, programming, webdev, python
Published: 2022-11-02 09:21:20

[NETMARK](https://netmark.no) er et ledende digitalt byrå som spesialiserer seg på å bygge kraftige samtalenettsteder, mobilapper og programvare. Vi samarbeider med bedrifter i alle størrelser for å skape engasjerende og personlig tilpassede opplevelser som hjelper dem å nå sine markedsføringsmål.
Vi brenner for å hjelpe bedrifter med å vokse, og teamet vårt har erfaring fra en rekke bransjer, inkludert detaljhandel, helsevesen, reiser og mer.                                                                                    
          Visit My Site: https://netmark.no

NETMARK har hovedkontor i Atlanta, GA og har kontorer over hele verden.
Sort all JSON files in the directory as alphabetically
Tags: json, sort
Published: 2022-11-02 09:16:52

---
title: Sort all JSON files in the directory as alphabetically 
published: true
description: 
tags: json, sort
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-02 08:50 +0000
---

## Installation

```bash
npm i -g json-sort-cli
```

## Usage

```bash
jsonsort directory
```


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



> SOURCE: 
- https://codsen.com/os/json-sort-cli
- github: https://github.com/codsen/codsen/tree/main/packages/json-sort-cli
Comment utilise le moteur de modeles Pug dans une applications Node/Express
Tags: javascript, node, pug, webdev
Published: 2022-11-02 08:54:10


**Qu'est-ce que pug ?**

Anciennement connu sous le nom de **JADE**,Pug.Js ou encore Pug est une bibliothèque Javascript,servant comme moteur de temmplete pour générer du code HTLM dynamique,avec une synthaxe proche comme celui de selecteur Css mais basé sur les identations.

**Comment se servir de pug ?**
Avant d'aller dans cet article et pour nous permettre de tester les exemples veillons voir comment installer Pug.js dans notre environnement de travail :
-premierement creons notre dossier `pugApp` et ouvrons le sur le terminal  nous allons taper cette ligne de commande : `npm install pug` ou `yarn add pug`


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

on peut installer d'une maniere globale avec la commande `npm install -g pug`

**Synthaxe de pug**
Les balises dans Pug sont représentés par des sélecteurs inspirés de la syntaxe du CSS. la syntaxe dépendante des indentations la rend plus condensée.

**Exemple**

essayons d'affiche une page html avec hello word

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

Alors commençons les choses serieuse après avoir vu comment installer pug.js et sa synthaxe dans l'étape suivante nous allons voir comment utiliser Pug.js dans une application **Node/Express.js**
ouvrer le terminal et taper la commande `npm install express` ou `yarn add express`

**Configuration de notre server.js**

dans notre dossier pugApp essayons de creer un fichier app.js  c'est dans ce fichier que nous allons configure notre server 

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

Dans notre dossier pugApp,creons un autre dossier qu'on va appele views et dans celui-ci on va cree un fichier home.pug et dans notre fichier nous allons cree un formulaire d'inscription 

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

Si on essayer de lance notre server et ouvrir la page home.pug nous aurons une page une page vierge avec la mention Cannot GET /home

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

Pour remedier a cette erreur on doit reconfigurer notre fichier `app.js` pour permettre au server de lire les fichiers.pug mais aussi disponibiliser les ressources **(les dossiers)**

voici le fichier `app.js` après reconfiguration 

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

et pour le resultat sa donne sa 

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

Nous voici a la fin de notre article,nous avions parcouri quelques points importants pour travailler avec `pug.js` dans une application `node/express.js`,il sied de signaler que cet article n'est pas  exhaustif. Vous pouvez consulter site officiel, si vous souhaitez en apprendre plus sur ce sujet (https://pugjs.org/api/getting-started.html)
Get User Current Region With Geolocation API
Tags: javascript, webdev, beginners, tutorial
Published: 2022-11-02 08:21:20

### Problem

A few weeks ago, one of my clients required me to implement geolocation detection on their site. They want to show different content and store user form submission to a different API endpoint depending on their location (ex: if a user is currently in the Singapore region, the site will show Singapore content only & POST the user form submission data to the Singapore endpoint). In this article I'll show different cases of handling this kind of feature.


### Geolocation

Officially modern browsers already exposed their own native official geolocation feature (read this [https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)), BUT ,since it is quite a hassle to set it up in the project, I found a great alternative which is [https://geolocation-db.com/](https://geolocation-db.com/json/) that only require an API call

### Geolocation-DB
---
**_NOTE:_**

ℹ️  If you open the home URL it will show 502 Bad Gateway, insted open https://geolocation-db.com/json/

---



https://geolocation-db.com/json/ will result in this :

``` javascript
{
  "country_code":"ID",
  "country_name":"Indonesia",
  "city":"Denpasar",
  "postal":null,
  "latitude": "coordinate",
  "longitude": "coordinate",
  "IPv4":"IP Address",
  "state":"Bali"
}
```

### Usage

Since I will be using Javascript with axios, here is the function that I wrote to GET the endpoint result

``` javascript
// getLocation.js
import axios from "axios";

export const getLocation = async () => {
  const API_URL = `https://geolocation-db.com/json/`;
  const response = await axios.get(API_URL);

  return response.data;
};
```

To check whether the function/API works, you can utilize your favorite VPN 😏. You can manipulate it into a standalone library or include it in the component/customize it as a react hook (maybe useLocation hooks or something)

![The Simpsons VPN Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc0s4ateh49ucu8a5ztl.png)

If you have any question feel free to ask in the comment section below ⬇️
How to copy lots of data fast?
Tags: copy, files, filesystem, disk
Published: 2022-11-02 08:21:15

The best way to copy a lot of data in Linux fast is using `tar`. It's much faster than `cp` or copying in any file manager. Here's a simple command with progress bar (`pv` needs to be installed) that needs to be executed inside a folder that you want to copy recursively:

`$ tar cf - . | pv | (cd /destination/path; tar xf -)`
Jotai — new state management library for React
Tags: webdev, programming, react, javascript
Published: 2022-11-02 08:06:53

## 5 things about Jotai to get in depth understanding

Jotai
Recently I found this new state management library for react applications.

Primitive and flexible state management library for React. Primitive is because at the core level meaning very basic and unsophisticated.

The reason behind this is that Jotai deals with atomic level with a bottom-up approach inspired by Recoil.

In simple words, most of the libraries and state management libraries for React deal with the top-bottom approach.

**Top-Bottom Approach** — Wrap the provider with the root component and pass the centralised states of the entire application via props.

**Bottom-Top-Approach** — Each and every component has its individual states at the atomic level.

## First
Lightweight with just 3Kb in size and has 10K github start at the time of writing.

[Jotai npm package](https://www.npmjs.com/package/jotai)

[Introductory video](https://www.youtube.com/shorts/XOdawVSgzdg)

## Second
Jotai is different from other state management libraries because it follows a bottom-to-top approach rather than a top-to-bottom approach.

Basically, we don’t wrap the root of the application with the provider in jotai instead we create each component level state and combine them to create the entire application state using atoms.

## Third
Jotai is easy to install with just one line of code and no other dependency is required.

```
yarn add jotai
```

No need to install other loaders or wrapping of the provider.

## Fourth
Jotai provides hooks and methods to deal with managing states. Hooks such as -

- useAtom
- useAtomValue
- useSetAtom

and a method called atom to create states exactly like useState.

If you are familiar with hooks you will easily work with Jotai.


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

## Fifth
Jotai is compatible with the following -
1. Next.js
2. React
3. React Native
4. Typescript
5. Redux
6. Xstate
7. TanStack Query

[Jotai docs link](https://jotai.org/)

## Conclusion
Here is the list of code samples of projects using Jotai - [Code samples](https://jotai.org/docs/basics/showcase)

**Keep developing
Shrey
[iHateReading](ihatereading.in)**
A Quick 10-Second Programming Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-11-02 08:00:12

---
title: "A Quick 10-Second Programming Joke For Today"
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/5e1258bb6df5f.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:___ What did the spider do on the computer?

___A:___ Made a website!
 -->
📗Looking for blog site design feedback - Home page (draft 1)
Tags: discuss, showdev, design, help
Published: 2022-11-02 07:56:40

Hi all, I'm in the progress of building a new self-hosted blog site. I'm not really well-versed in web design, so I figured it will be better to gather feedback from the community. The first draft is shown below.

![hungvu.tech - Home page - rough draft](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2ro02s0se8adup492pz.png)

**For context:**
1. This is my first (serious) try using Figma.
2. My goal is to have a minimalistic website, while not being so bland. I'm not fond of excessive effects or animation.
3. This is my first draft.

**Here is some information regarding the current design:**
1. Font is Roboto.
2. Font sizes are 32, 24, 16, and 12 depending on the content.
3. Border radius is 24.
4. Spacing is based on a 4 pt. grid. The common gap distance is 16, and 32. 

**Here are some of my questions/concerns:**
1. I use Roboto because it is a de facto choice for the initial design, but it is a bit generic to me. What are other alternatives?
2. Is the _Hero_ section kind of bland (waste of space)?
3. What would be a way to make a smooth transition between sections (e.g., from _Hero_ to _All Articles_)? At the moment, I feel like they are visually disconnected.
4. I feel like the article section is clustered, or is it?
5. For the article filter, how should the _choices_ be presented when there are multiple of them (for visual, and a11y)? For example, 10-choice is 10-row, or drop box, or something else (like _Tags_ filter)
6. I prefer a website with a neutral theme, so there is no light/dark mode. Or do I still consider a light/dark version of a neutral theme?

These are on top of my head at the moment, any other feedback is greatly appreciated!
We Turn The Perfect Design Into A Thriving Brand Image!
Tags: webdev
Published: 2022-11-02 07:37:40

Our digital marketing services are driven by thorough market research and industry analysis that provide a comprehensive understanding of your business. It helps them identify the key elements and value-additions to swiftly upraise the overall brand reputation. At  Brand Boosters, we plan, develop, and execute discrete digital marketing strategies that bring better search engine rankings, extended target audience reach, and exceptional returns.
Whether you want to improve your website’s search engine rankings, boost your keywords on top of the list, and outpace your competitors in today’s digital business environment or looking to engage and indulge your target audience into your brand, Elite Brand Makers is your ultimate solution. We will integrate the best practices and boost your online reputation

We’ve risen to the top of the social media marketing industry in the United States and the United Kingdom because to our strategic and creative expertise. As per the needs of our clients, we have been offering them with precise Social Media Marketing Solutions. Individuals are free to screen, interact with, or ignore a brand as necessary. Have you, however, ever pondered what it is that makes your advertisement stand out and attract customers? It’s crucial to communicate with your target demographic at the optimal time and location. The marketing of goods and services is an area where most large businesses invest heavily