teleren/devto huggingface dataset:
Check if the Kth bit it set!
Tags: computerscience, codenewbie, programming
Published: 2022-06-19 15:34:31

Example 1:
n= 5
k = 1
binary representation of 5 : 101
1st bit from right is set
therefore output = YES

Example 2:
n = 8
k = 2
binary representation of 8 : 1000
2nd bit from right is not set
therefore output = NO

Solution using Left Shift operator:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q18nhxtbizx91w4ac728.png)

Solution using Right Shift Operator:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5ntb3dxhc7yyzob9u07.png)
Async/Await in JavaScript Tutorial for Beginners
Tags: javascript, tutorial, node, beginners
Published: 2022-06-19 15:07:06


https://youtu.be/7l2-ds_U2Lc

Async/Await syntax allows you to handle the results of JavaScript promises within async functions using the key keyword await.

This beginner-friendly tutorial shows you how to rewrite regular functions using async/await syntax and handle errors using try/catch.
The Java `.boxed()` Method
Tags: java, javastreams, streams, functional
Published: 2022-06-19 14:56:16

In this post I'll be talking about the `boxed()` method of Java streams.  

#### What is the `boxed()` method?

> The method boxed() is designed only for streams of some primitive types (IntStream, DoubleStream, and LongStream) to box each primitive value of the stream into the corresponding wrapper class (Integer, Double, and Long respectively).
[source][https://stackoverflow.com/a/47126809]

what this means is that whenever we use any of the primitive generators the generated values are corresponding primitives to the stream. that is :

IntStream - int
LongStream - long
DoubleStream - double

Although, we can perform intermediary operations on the generated values but we cannot perform some terminal operations on the generated values. 

for example, 
Generate a list of numbers from 1 to 100.

```
List<Integer> numbers = IntStream.rangeClosed(1 , 100).collect(Collectors.toList());
```

The above operation will throw a compile time exception of 
_ java.util.function.BiConsumer )' in 'java.util.stream.IntStream' cannot be applied to '(java.util.stream.Collector ?>,java.util.List >)'_

This is where the _**.boxed()**_ method comes in. 
Notice the generic _List<Integer>_  uses the wrapper class for the primitive _int_ type. What the .boxed() method does is  that it returns a Stream consisting of the elements of the given stream, each boxed to an object of the corresponding wrapper class.

_Or simply put, the .boxed() method puts each value in the stream in its corresponding wrapper class._

IntStream.boxed() - Integer
LongStream.boxed() - Long
DoubleStream.boxed() - Double

So a good solution to the example problem is:

```
List<Integer> numbers = IntStream.rangeClosed(1 , 100).boxed().collect(Collectors.toList());
```

Hope you find this info useful. Thanks.
You are remarkable (just find your story)
Published: 2022-06-19 14:54:55

Too many people I met can't see themselves for who they truly are.

They think nothing about them is interesting or noteworthy, and they struggle coming up with an angle to present themselves from, either in their blog or in their job search.

In this video I talk about how you might start discovering what makes you remarkable.

You already have a story to tell. You just need to uncover it.

{% embed https://youtu.be/rw2gPJjq2Io %}
Building Todo app with Zustand in React
Tags: react, html, javascript, zustand
Published: 2022-06-19 14:42:30

---
title: Building Todo app with Zustand in React
published: true
description: Hello fellow humanoids. In this post we will build a todo app with Zustand in React Js
tags: React, html, javascript, zustand
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rh8i9jqvk5dbxx8xl6m6.png
---

## What is this post about ?
Hello fellow humanoids. Today we will try to implement a basic todo app with Zustand in React Js. This post won't be focused much on the styling rather the bare minimum logic required. 

Check out the app here : [Todo App - Zustand](https://todo-app-zustand.netlify.app/)

![Todo App Zustand](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fnwh2pm3nk7hkejygg8.png)

## Content
* What is Zustand ?
* Zustand store structure
* Todo App - Adding Todos
* Todo App - Adding todo items

Lets go deep dive into each one and explore how it was implemented.

## What is Zustand ?
A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy api based on hooks, isn't boilerplatey or opinionated.

Don't disregard it because it's cute. It has quite the claws, lots of time was spent to deal with common pitfalls, like the dreaded zombie child problem, react concurrency, and context loss between mixed renderers. It may be the one state-manager in the React space that gets all of these right.

Check it out-[Zustand](https://github.com/pmndrs/zustand)

## Zustand store

{% gist https://gist.github.com/vigneshiyergithub/e1419ec99da332cd1f750d68a0b6eaa2 %}

## Todo App - Adding Todos
We would add new Todo using ```Add New Todo``` button

{% gist https://gist.github.com/vigneshiyergithub/5b6daa0a9791887e07c4dee7c4406fb6 %}

## Todo App - Adding todo items
Let's create a basic comment component with basic utility functions

{% gist https://gist.github.com/vigneshiyergithub/44ce38481889eaa1e73f32072bb6a319 %}

{% gist https://gist.github.com/vigneshiyergithub/9e53a228a1dd9fbef2dfe3f475ac418a %}

{% gist https://gist.github.com/vigneshiyergithub/01b3ddd71a591f47796fad5ca641d429 %}

## Conclusion
This app was made as part of learning new components which are used in real life applications. 
Stay safe and lend a hand to another :) 

* [Zustand Todo App](https://todo-app-zustand.netlify.app/)
* [Project Source](https://github.com/vigneshiyergithub/zustand-todo-app)
* [Vignesh Iyer](https://vigneshiyer.netlify.app/)
How to use fetch in JavaScript: GET, POST, PUT and DELETE requests
Tags: javascript, webdev, tutorial, node
Published: 2022-06-19 14:35:04

https://www.youtube.com/watch?v=hOXWY9Ng_KU

In this video tutorial, I cover how to use the Fetch API in JavaScript to make all types of request: GET, POST, PUT and DELETE requests,

Also covered are two ways to handle errors: using a `catch()` statement and query `res.ok` on the response object.
How to deal with errors while coding
Published: 2022-06-19 14:03:49

Errors are the usual thing that occur in our journey of programming.
Beginners are the primary group who are exposed to the hesitation caused by errors.There is also a possibibility of droping programming field due to errors in beginners.But one thing we should remeber is

**The skill of a programmer is not writting a bunch of code
 without error,but finding the optimal solution for error**. 

When we solve a particular error we can understand the core reasons for that error and avoid such 
situations of error later in our code
The usual categories of error that occur are

- syntax error -ocuurs when we violates the rules of a programming language.

- logical error-occurs due to the improper logic in the code.
**How to deal with syntax errors**

- By using the plugins and editors that can detect syntax errors instandly.

- Usual case of syntax errors are missing parenthesis,semicolons etc.So, make sure they are inserted properly.

**How to deal with logical errors**
  It is difficult to detect logical errors at compile time.It can be avoided by

- By using try-catch block for complex code for tracing the error.

- By making a better comprehention in the logic of the code.

**Use Stack Overflow for debugging**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/971bxvxnx8iw9hlidmfz.png
)
                       Stack Overflow is the biggest community of programmer where we can find the solutions for our errors.I usually used to copy paste my error message in stack overflow.Programmers who faced  similar errors might posted their issue and there will be solutions.If no solutions found you can ask for help by mentioning your isuue with your code snippet.
I'm Looking for Beta Readers
Tags: books, request, writing
Published: 2022-06-19 13:58:30

Hi folks, just a short post.

I'm writing a short book about gaining more responsibility in software development, and I'm looking for beta readers.

If you're not sure what a beta reader is, it's someone who reads an early draft of a book and gives feedback.

So if you're interested, let me know by sending an email to the address on my profile.

Apologies if this type of post isn't allowed, but thank you for reading it all the same!
Motivation vs Discipline
Tags: career, motivation, beginners, productivity
Published: 2022-06-19 13:55:57

In this article, I am going to tell about the main differences between motivation and discipline and explain the importance of each. As an example, I will take programmer work, but it is valid for other works.

### Motivation
Motivation gives more reason to work harder and complete tasks as perfectly as possible. Question is - how to get motivation? The answer is - reward. In most cases, people do not work for nothing. The person working in the company always expects to have a salary. Salary is one of the best resources of motivation. Most of us want to buy something, a dream car, a house, etc. Also, after gaining more skills You become more valuable, which means if the employer values Your hard work, he will raise Your salary according to Your value. In this case, You will have more motivation and confidence. This is way better than hearing from someone - nice work.

### Other resources of motivation
Having a good salary is a nice thing, but what about other resources. Not every work can be done remotely. For this reason, it is important to have a comfortable working place. Starting Your working day in a clean and enjoyable environment gives You more positive emotions and wish to work. For those who are working in teams. it is important to have a friendly, or neutral company culture. In most cases, at work, we spend 8 h per day, or even more. Working in a company with negative culture can negatively affect health. In this case, I would recommend changing the company, which has an awful culture.
It will have a lot of advantages: better health, there will be more people who wish to share knowledge and better working experience.

### How to be motivated and why this is important?
At the start of learning something new, it is easy to stay motivated. It gives the excitement of something new, which can boost productivity.
To stay motivated add goals. At the start do not add something insane like making Your own Facebook in one month. Start from something small like choosing and finishing a video tutorial from YouTube. It will give the pleasure of completing a goal. Also, staying motivated is making Your mental health better.

### Discipline
Discipline compared to motivation is consistent. In a long term, disciplined people can get up in the morning easier than motivated. Today You are motivated, tomorrow not. This is why for me discipline is more important than motivation. To reach success in life I would recommend learning self-discipline as soon as possible. Think about Your: habits, health, strengths, weaknesses, temptations, and goals, and plan how to reach them.

### Conclusion
Discipline and motivation are both important for our career and health. Motivation compared to discipline is not consistent. For this reason, I would recommend thinking about self-discipline.

I am available on social media:
[Twitter](https://twitter.com/Oscar_Sherelis)
[LinkedIn](https://www.linkedin.com/in/oscar-sherelis)
[Instagram](https://www.instagram.com/oscar_sherelis)

Support me:
https://www.buymeacoffee.com/oscarWeb
Handling Undo/Redo Functions in Rich Text Editors
Tags: texteditors, javascript, css, html
Published: 2022-06-19 13:32:43

If you’ve ever written a blog or worked with a Content Management System (CMS), there’s a good chance you’ve heard about rich text editors – popularly known as WYSIWYG (What You See Is What You Get) editors. 

A rich text editor allows users to enter text and formatting via a GUI. It converts input into HTML behind the scenes. Why is this important? It enables non-technical users to create web-ready code. Having been on the market since the late 1990s, rich text editors have progressively evolved to support complex features like undo/redo.

Undo and redo operations are a must-have feature in any rich text editor – they’re a user's safety net. For a great user experience (UX), users need to solve their editing problems in a rich text editor.

In this article, you'll find out about the complexity of creating and maintaining the undo/redo functionality, and see how the TinyMCE rich text editor makes it easy.

Read the full blog on [Tiny.Cloud](https://www.tiny.cloud/blog/undo-function-handling/).

Thanks for reading 💜

---

I publish a [monthly newsletter](https://www.ravsam.in/newsletter/) in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing on the web.

Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [Github](https://github.com/ravgeetdhillon) or send me an [Email](mailto:ravgeetdhillon@gmail.com).

— [Ravgeet](https://www.ravgeet.in/), *Full Stack Developer and Technical Content Writer*
The Complete List of OAuth 2 Grants
Tags: api, authentication, auth0, authorization
Published: 2022-06-19 13:29:06

Authorization is necessary to protect resources from malicious use. When the Internet Engineering Task Force (IETF) drafted internet protocols and rules, it also planned out different methods to protect and access resources on a server. These efforts led to OAuth 1.0 and later OAuth 2.0.

The OAuth 2.0 specification is an authorization framework containing a number of methods, or grants, by which a client application can get an access token. The access token can be presented to an API endpoint, which can then examine it to determine validity and permissions levels. Each grant type is designed for a particular use case.

OAuth 2.0 focuses on the authorization. There are other protocols like OpenID Connect (OIDC) that focus on authentication. OIDC allows the software to access login and profile information about the logged-in user.

This article will go through all the different OAuth 2 grant types and explain the flow for each so that you can determine which is the best fit and safely use it in your applications.

Read the full blog on [FusionAuth](https://fusionauth.io/learn/expert-advice/oauth/complete-list-oauth-grants).

Thanks for reading 💜

---

I publish a [monthly newsletter](https://www.ravsam.in/newsletter/) in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing on the web.

Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [Github](https://github.com/ravgeetdhillon) or send me an [Email](mailto:ravgeetdhillon@gmail.com).

— [Ravgeet](https://www.ravgeet.in/), *Full Stack Developer and Technical Content Writer*
Javascript Symbol
Published: 2022-06-19 13:12:05

A symbol is a primitive data type in Javascript, introduced in ES6.
A symbol is created using the `Symbol` constructor.The string is optional.
```
let sym1 = Symbol('xyz');
```
One important behaviour of symbol it return a unique value.
So, the below code will log false
```
let sym1 = Symbol('foo');
let sym2 = Symbol('foo');

sym1 === sym2;  // false
typeof sym1;    // symbol
```
Note: using the `new` operator will throw a TypeError. This is called `incomplete constructor`.
```
let sym = new Symbol('foo');
```
`Uncaught TypeError: Symbol is not a constructor`

---
When symbol-ed keys are used in object, using `for...in` will ignore those keys. Even they would be ignored by `Object.keys`, but `Object.getOwnPropertySymbols` function can be used to get these.
```
let obj = {};

obj[Symbol('foo')] = 'a'
obj[Symbol.for('bar')] = 'b';
obj['c'] = 'c';
obj.d = 'd';

for(let i in obj){
   console.log(i);   // logs c,d
}

Object.keys(obj);     // ['c', 'd']
Object.getOwnPropertySymbols(obj);  // [Symbol(foo), Symbol(bar)]
```

### Symbol.for and Symbol.keyFor
`Symbol.for(string)` is a function that checks for  a symbol in the Global Symbol Registry(GSR) and returns it. If not present, it creates and returns it.

`Symbol.keyFor(symbol)` function is used to retrieve the identifier of the symbol, created using Symbol.for.
```
const foo1 = Symbol.for('foo');  // this one is created
const foo2 = Symbol.for('foo');  // retrieve the already created one
const bar = Symbol.for('bar');   // this one is created


foo1 === foo2;    // true
foo1 === bar;     // false
Symbol.keyFor(foo1)  // "foo"

const empty = Symbol.for();
console.log(Symbol.keyFor(empty));  // "undefined" (string)
```

Note that, since Symbol.keyFor retrieves symbol from GSR, symbol created by the Symbol constructor is not accessible by keyFor and hence return undefined.
```
const Jam = Symbol('jam');
console.log(Symbol.keyFor(Jam));   // undefined
```

---
### Usage in React
Symbol can be used in trigger change detection, generally used in useEffect.
```
const [key, setKey] = useState(Symbol());

const changeKey = ()=>{
  setKey(Symbol());   // new value is set
}

useEffect(()=>{
  // anything to run on change of "key"
},[key]);
```
---
Github tip #2
Tags: github, html, webdev, beginners
Published: 2022-06-19 12:58:37

Você sabia que é possível hospedar seus sites pelo github de forma gratuita?

Não sabia? Então segue o fio

O GitHub possui a ferramenta GitHub pages a partir de qualquer repositório é possível hospedar sua página.

O link da página ficará algo como: http://senhorbento.github.io

Para ativá-lo é bem simples, basta ir no repositório que deseja hospedar, clicar em settings -> pages

Em source basta escolher a branch e a pasta do source, (por padrão é selecionado a pasta root) e clicar em save.

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

Se estiver tudo certo, no seu repositório deverá aparecer um ícone, próximo a descrição do seu último commit, indicando que está tudo certo e no canto inferior direito vai aparecer um indicador do github pages, como nesse [repositório](https://github.com/senhorbento/senhorbento.github.io)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/za1p0doiocndp4re7ict.png)
 
O link de acesso fica disponibilizado na aba pages das configurações do seu repositório, como no exemplo da figura.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2u617sz0pqbm8dw6jtn.png)
Coding Period GSoC'22 | Week 1
Tags: gsoc, testing, opensource, career
Published: 2022-06-19 12:55:16

According to the schedule, the Google Summer of Code 2022 Coding Period began on June 13th. With the completion of 1st week, I'm posting this blog with my accomplishments and future plans.

Checkout my previous blog about [Community Bonding Period GSoC'22](https://dev.to/pulkit30/community-bonding-period-gsoc22-428o)

## About GSoC Coding Period
After a three-week community bonding time, the GSoC coding period begins, during which we (contributors) work on our projects for 11 weeks or longer, completing milestones and receiving feedback from mentors at the halfway and final weeks of the programme.

## Work done this week(13th - 19th June)
Started this week by adding tests for decoders and plexers and then for miscellaneous elements and lastly for Sequential Elements(Flip Flops) for CircuitVerse Simulator. 

**Pull Requests**
- [Added tests for simulator decoders and plexers](https://github.com/CircuitVerse/CircuitVerse/pull/3186)
- [Added tests for simulator misc elements](https://github.com/CircuitVerse/CircuitVerse/pull/3191)
- [Added tests for simulator sequential elements](https://github.com/CircuitVerse/CircuitVerse/pull/3193)

## Learnings
- Gained a better understanding of the JEST-testing library.
- Acquired knowledge of best-practices to follow when writing code.
- While creating the test suite, I learnt a lot about the CircuitVerse simulator, which helped me understand more about circuits and basic ideas.


## What Next
I'll keep working on same, and hoping to finish the simulator testing work by the end of the second week 🎯.

<center> 
<img src="https://www.doge.cyou/2zm00n.gif"/>
</center>

So that wraps up my first week of coding, and I'm excited to continue learning with CircuitVerse. 🚀
Github tip #1
Tags: sql, database, github
Published: 2022-06-19 12:54:44

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyqo3kvhebul82jndd7g.png)
 
Você sabia que é possível adicionar SQL como uma linguagem em seu repositório?

Basta adicionar **" *.sql linguist-detectable=true "** no seu **.gitattributes**, caso não tenha, basta criá-lo.

Repositório de exemplo [aqui](https://t.co/ZP0DbFIMeA)
Installing Git FTP
Tags: github, git, beginners, tutorial
Published: 2022-06-19 12:49:20

Here we will learn how to install git ftp to speedup our deployment. The advantage of the git ftp is we can maintain our project in efficient way. We can keep backup our code at git repository and we can find only the changed code and deploy the files to our server. When setup is done, we can upload files to our server with 2 lines of command.

## How to Install Git FTP
First install [git cmd here](https://git-scm.com/downloads).

Now search gitbash in searchbar and Open GitBash and right click and select run as administrator.

First enter the below command to check which git file we need to install git-ftp

If the response is /bin/git.
```ssh
cd C:\Program Files\Git
git clone https://github.com/git-ftp/git-ftp git-ftp.git
cd git-ftp.git && chmod +x git-ftp
cp C:\Program Files\Git\git-ftp.git\git-ftp C:\Program Files\Git\bin\git-ftp
```
If the response is /mingw64/bin/git.
```ssh
cd C:\Program Files\Git\mingw64
git clone https://github.com/git-ftp/git-ftp git-ftp.git
cd git-ftp.git && chmod +x git-ftp
cp C:\Program Files\Git\mingw64\git-ftp.git\git-ftp C:\Program Files\Git\mingw64\bin\git-ftp
```
Now we will configure the git ftp.

## Configure Git-ftp
Goto your project folder and run below these commands

```ssh
git config git-ftp.url ftp://ftp_host/public_html/
git config git-ftp.user ftp_username
git config git-ftp.password ftp_password
```
ftp_host is hostname like yourwebsite.com, ftp_username and ftp_password you can get these details from hosting provider cpanel, or any other web panel.

## Pushing code to server using git ftp
Goto your project folder.

If pushing For first time use these commands.

```ssh
git add .
git commit -m "my changes description"
git ftp init
git ftp push
```
If already pushed first time and uploading new changes use these commands.
```ssh
git add .
git commit -m "my changes description"
git ftp push
```
Read also [list of github commands](https://www.w3courses.org/list-of-github-commands/) for pushing and commit code.

---

Please like share and give positive feedback to motivate me to write more.

For more tutorials [visit my website](https://www.w3courses.org/category/code-examples/).

Thanks:)
Happy Coding:)
Markdown tip #1
Tags: markdown, github
Published: 2022-06-19 12:41:11

Dica simples sobre markdown, pode ser que você não saiba ainda. Acha chato ficar reorganizando os números toda vez que vai alterar uma lista numerada?

**Basta colocar todos os itens como "00."**

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

Se o primeiro item for colocando como "00." a lista iniciará com 0, exemplo no print da parte de projetos.

Se quiser começar com outro número basta usá-lo na primeira posição, por exemplo temos o módulo básico que começa com 01.

Link do repositório de exemplo [aqui](https://github.com/senhorbento/Arduino4noobs)

Espero que chegue em alguém que ainda não saiba 😊