teleren/devto huggingface dataset:
Object destructuring in Javascript | Real time example | Good Practice
Tags: javascript, programming, destructure, destructuring
Published: 2021-09-21 17:11:45

I was working on my project and got a review comment from my colleague to put the default value for the nested object, as it could break the app.

Below was the response object structure that I was getting from an API call.


```javascript
response = {
  data:
   someData: {
     name: 'Ashish',
     number: 9876543210
    }
  }
}
```
only `name` and `number` were getting used in the code. The code I had written previously for which I have received the comment looked as below.

```javascript
const { name, number } = response.data.someData;
```
###PROBLEM
Now the problem with above code is, 
1. if Backend doesn't share the data object. Then JS the engine will try to find someData in `undefined`. This could have broke the application
2. I wanted to write everything in one line, instead of destructuring multiple times

So to avoid the above problem, I had to google and search for a good practice for javascript multilevel destructuring with default values. And here is what I got

###SOLUTION
```javascript
const { data: { someData: { name, number } } = { someData: { name: '', number: null } } } = response;
```
* code doesn't break, as we are setting default values for the response object in the frontend.
* Clean code
* Readable (This point is argued, depends on developer perspective)

###EXPLANATION

If you haven't tried multilevel destructuring, above code might look little confusing, let's break the above code into multiple statements

##### 1. Destructuring Multilevel  

```javascript
const { 
  data: 
    { someData: 
      { 
        name,
        number
       }
     }
   } = response;

//OR
// In one line

const { data: { someData: { name, number } } } = response;
```

This is how we destructure a multilevel object. With parent object `data` outside pointing to the child object `someData` and then the child object `someData` referring to the child object having values  `name`and `number`.

##### 2. Assigning default value 

if `data` doesn't exist in the response object, assign a default value to it

```javascript
const { data = {} } = response;
```
If `data` doesn't exist in response, then data with empty object is created inside the response

###### Note:
Default values go to the right hand side and `=` is used to assign the value.

```javascript
const {
        data: { 
           someData: { 
             name,
             number
           }
       } = { someData: { name: '', number: null } } } = response;
// OR
// in 1 line

const { data: { someData: { name, number } } = { someData: { name: '', number: null } } } = response;
```
This creates an object with `someData` with `name` default value is `''` empty string and `number`'s default value as `null`.

###### Note:
`''` empty string and `null` are falsy values.
Removing the ‘middle man’ — enabling full blockchain API access
Tags: blockchain, ethereum, dapp, api
Published: 2021-09-21 17:01:08

The problem in accessing of Ethereum blockchain , the 'gatekeepers' for writing on the blockchain, proposed solution which enables device (no OS) access ...

https://paulars.medium.com/removing-the-middle-man-enabling-full-blockchain-api-access-4df11dfd9322?sk=c581f7aa8aabca24cac0e8427edc662f
Easy Nodejs installation in Elementry OS (LINUX)
Tags: beginners, node, installation, linux
Published: 2021-09-21 16:46:26

We will be using the distribution source from the <a href="https://github.com/nodesource/distributions/blob/master/README.md">Offical Source</a>

If you are using Ubuntu, then just run this command in your terminal

```
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
```

It will ask fro your password, provide your password and then press `Enter`. 

After some time it will install nodejs in your system. 

To check that nodejs is installed in your system, paste below command into your terminal.

```
node -v 
```

If it will give you some number, then your nodejs installation is complete.

![node version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jbqn03etcnuot6n6q9y.png)
Alacritty-Themes release 4.1.2 🌈😍
Tags: alacritty
Published: 2021-09-21 16:28:23

Today, was released alacritty-themes 4.1.2

Bug Fixes
* stop removing existing comments on the alacritty file [#42](https://github.com/rajasegar/alacritty-themes/pull/42) [98a5d68](https://github.com/rajasegar/alacritty-themes/commit/98a5d68d4be76eb8a7e9ccd9277ada5a44ef71e6), closes [#30](https://github.com/rajasegar/alacritty-themes/issues/30)

test it here [Themes for Alacritty: A cross-platform GPU-accelerated Terminal emulator](https://github.com/rajasegar/alacritty-themes)
How Much Salary Do Junior Software Engineers Really Earn With An Entry Level Job?
Tags: salary, interview, career, codenewbie
Published: 2021-09-21 16:05:19

{% youtube FkB78x7r3DU %}

If you have any questions about using data to discover your fair market rate salary and negotiating based on your actual worth reach out to us [on LinkedIn or](https://linkedin.com/company/coding-career-fast-lane) leave a comment below. 

## Video Summary

- Depending which bootcamp you ask, the average salary for a programmer who is just starting their coding career is between $65,000 and $75,000.

- Most entry-level software engineers in the United States are paid in the range of $52,500 and $79,500 per year. 

- But junior developers working in certain industries, including health and fintech, could earn as much as $90,000 to $100,000 per year. 

### Bonus Pro Tip

Don't listen to anyone who tells you it's impossible to earn great money on your first engineering job.
Authenticating Rails API with JWT.
Tags: rails, ruby, rspec, ror
Published: 2021-09-21 16:01:57

---
title: Authenticating Rails API with JWT.
published: true
description: This is the fifth part of the series "Building API with Rails" where we will be authenticating our Rails API with JWT (JSON Web Token)
tags: rails, ruby, rspec, ror, rspec
cover_image: https://developerblogs.github.io/assets/img/post9/jwt.gif
---
This is the fifth part of the series "Building API with Rails" where we will be authenticating our Rails API with JWT (JSON Web Token)

<a href="https://developerblogs.github.io/blogs/rails_api_series/05" target="_blank">**:five: Buidling API in Rails Part 5 :lock:​** </a>.
Best Coding Apps to Learn Anywhere and Anytime
Tags: learncoding, codenewbie, firstpost
Published: 2021-09-21 15:59:37

Coding is something that requires effort, time, dedication, and the zeal to learn something new. Because it's a dynamic field that requires a passionate person. And if you're a passionate one looking for ways to learn coding remotely without paying those gurus heft amount of money. Then here are some free coding apps that are available for android and iOS to help you become a pro coder in months.

1. Mimo
2. Code Hub
3. Encode
4. Enki
5. Grasshoper

For more free coding apps with in-depth analysis, check out the following link
https://techynickk.com/best-apps-to-learn-coding/
Speed up switching between opened windows using Autohotkey shortcuts
Tags: autohotkey, windows, script
Published: 2021-09-21 15:51:33

Usually our OS runs quite many application at one time and it could be quite hard not to get lost in so many opened windows. If you are using Windows, you usually have several built-in possibilities how to switch between open apps.

1. Select an app from taskbar.
2. Use `Alt+Tab` or `Win+Tab` shortcut to switch the app. (Least recently used apps are displayed first, which helps your orientation. You can also use arrow keys to navigate between suggested apps and `Delete` to close an app.)
3. Use `Win+<n>` shortcut to open an app, whose icon is the `n`th icon on the taskbar. (You usually have several apps pinned to the taskbar, so their position is unchanging and therefore you remember their hotkey. For example, if you have web browser pinned as a first app on your taskbar, you regularly use `Win+1` shortcut to open browser window. If the app doesn't run at all, OS will run it.)

Using `Win+<n>` shortcut saves me much time as I don't have to search between opened windows, I just use one exact hotkey instead and the window gets displayed. The problem is that it is possible to use this hotkey only for 10 apps (corresponding to 0-9 keys on your keyboard).

For this reason I installed **[Autohotkey](https://www.autohotkey.com/) program** and created a simple script which shows an app based on its window title text. I always use `Win+Shift+?` shortcut (`#` means `Win`, `+` means `Shift` in Autohotkey scripts). With the script running, Visual Studio window shows up upon pressing `Win+Shift+V`, Postman shows up upon pressing `Win+Shift+P` and so on.

```
SetTitleMatchMode, Regex
SetTitleMatchMode, Slow

#+v::
WinActivate, .*Visual Studio
return 

#+p::
WinActivate, Postman
return

#+o::
WinActivate, .*LibreOffice
return

#+c::
WinActivate, .*Calc
return
```

If you save the script with `.ahk` extension you can run it manually by double clicking it. Alternatively you can place it into your startup folder (`%APPDATA%\Microsoft\Windows\Start Menu\Programs\Startup`) so as it will run automatically every time you use your computer.

Now you can switch to almost every running app so fast with just one keyboard shortcut.

You can do many other useful things with Autohotkey, like remapping keys you lack on your current physical keyboard or creating shortcuts for multimedia features (start/resume playing, volume up/down...), all of this achieved with standard keyboard layout without the need to buy specialized keyboard with additional keys.
I made an android app that has JS quizzes and you can write and run answers inside 
Tags: showdev, javascript, android
Published: 2021-09-21 15:30:11

Do you know websites like Confingbat? I really like that kind of websites and spent a lot of time to solve programming quizzes there.

But, after solving many quizzes there, I wondered if there is an android app where you can do something like that. It would be better if I could solve quizzes on android app. You know, it would be more relaxing if I could do it on sofa or bed with my phone.

Well, as far as I searched, I could not find any android app like that.

So I made such android app by myself. On this Android app, with Javascript, you can solve quizzes by writing and running the answer directly on the app. 

https://play.google.com/store/apps/details?id=com.notesoneverythin.jsprogrammingprac
LeetCode 344. Reverse String
Tags: algorithms, javascript
Published: 2021-09-21 15:22:36

題目連結：[LeetCode 344](https://leetcode.com/problems/reverse-string/)

&nbsp;

一開始沒有多想，想說在迴圈裡儲存字串，
然後把字串中第 i 個字母跟倒數第 i 個字母值對調就做出來了~

```javascript
/**
 * @Time Complexity : O(n)
 * @Space Complexity : O(n)
 */

var reverseString = function(s) {
   for (let i = 0; i < s.length / 2; i++) {
      let temp = s[i];
      s[i] = s[s.length - i - 1];
      s[s.length - i - 1] = temp;
   }
   return s;
}
```

&nbsp;

後續看見題目的 **Follow up** 寫說需要達成 O(1) 的空間複雜度，
因此想到了迴圈裡的每個 temp 並不需要被儲存，只是一個過渡而已，
所以可以把他拉到迴圈外

```javascript
/**
 * @Time Complexity : O(n)
 * @Space Complexity : O(1)
 */

var reverseString = function(s) {
   let temp;
   for (let i = 0; i < s.length / 2; i++) {
      temp = s[i];
      s[i] = s[s.length - i - 1];
      s[s.length - i - 1] = temp;
   }
   return s;
}
```

&nbsp;

就可以完成 **Follow up** 的需求了
What is stateful logic sharing and why do we need it?
Tags: react, hoc, hooks, render
Published: 2021-09-21 12:59:11

Stateful logic is any code that uses the state. The stateful logic sharing is sharing stateful logic between multiple react components.

I believe the best way to understand this is with an example.

Let's say you want to create a component which has a button that increments a counter on click. We can implement that using a class component as below.

{% gist https://gist.github.com/sivantha96/8b04c763753e98f02c9d00cbf96cfb69 file=ButtonCounter.js %}

This will result a view like this, the counter increments with each button click.

![Button counter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1o80qfyklseyuq2ddbmy.gif)

Now, let's say we want another component which increments a counter on hover over a div. We can implement that using a class component as below.

{% gist https://gist.github.com/sivantha96/8b04c763753e98f02c9d00cbf96cfb69 file=HoverCounter.js %}

This will result a view like this. The counter increments when the mouse is hovered over the div.

![Hover counter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11tp2ar4qwibx0l6tegn.gif)

Now, let's say we want another component which increments a counter on each key press. We can implement that using a class component as below.

{% gist https://gist.github.com/sivantha96/8b04c763753e98f02c9d00cbf96cfb69 file=InputCounter.js %}

This will result a view like this. The counter increments on each keypress.

![Input counter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9i7fkzfxjydsfbxfzcc.gif)

Now, let's backup for a minute. We can see that, in each of these scenarios we duplicated some logic. Specifically this part,

```js
constructor(props) {
    super(props);

    this.state = {
        count: 0,
    };
}

increment = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
};
```

This part uses the component's local state, therefore this is a stateful logic. And in each component it stayed basically the same, since the logic is the same.

Although in this example we only had to duplicate a simple few lines of code, this situation can occur in more complex scenarios as well. 

So, how can we avoid this duplication?

The immediate thought (At least in my mind😉) is to "lift the state up". 

We can declare the state and the increment handler in the parent component and pass down the state and the handler to children as props.

But this can be done only when we can create the same parent for the children. If the components are scattered throughout the react component tree, lifting the state up is not gonna be the current solution,

In that case, we need another solution to share this stateful logic between each component to avoid duplication.

That's where HOCs (Higher Order Components) and render props comes into the rescue. We will discuss about HOCs and render props in the upcoming articles.
The nightmare of Coding without coffee
Published: 2021-09-21 14:53:09

At the same skill level a well rested programmer completes a project faster than a tired one.

Sometimes some external pressure leads programmer to overwork. It’s often a consequence of bad management, or commitment on overconfident objectives or even true market pressure, but it’s rare. In such case coffee or other drugs may help, but avoid psycho active drugs as it’s important to be clear minded for a programmer. Even though most people do preffer drugs such as Clonazepam to help keep them awake, Coffee or Caffein seems to be a popular goto by many programmers.

I know a lot of programmers who rather take Clonazepam as it keeps them awake and it is easy to get online even without a prescription from websites like https://nightmaresolution.com

Whatsoever the coffee is usually not the best option, having a nap could be more efficient. 

When not overtired neither coffee or tobacco makes much difference. About tobacco: some smoking people use to say that it helps them to focus. My understanding is that they have lost the ability to focus and get into the flow without their drug. As ability to focus is very important for a programmer, I don’t believe that relying on external products (be it coffee or tobacco) makes you a very good programmer.

All that being said, I drink much coffee. The catch is that going to the coffee machine and walking instead of staying behind keyboard is much more important to help me think that the coffee itself. Coffee is a mere excuse for walking around. Social hacking really.
Java Quickie. Nested classes
Tags: java, tristan
Published: 2021-09-21 14:49:44

#Introduction
- This series is going to be dedicated to the basic understanding of Java. When ever I find myself asking, "How does this work ?". I will create a blog post and put it here. This series will not be in order so feel free to read what ever post you find most relevant. All the resources for this post can be found [HERE](https://docs.oracle.com/javase/tutorial/java/javaOO/nested.html)


###Why use nested classes?
- Well there are 3 main reasons for using a nested class

**1)** It is a way of logically grouping classes that are only used in one place. If a class is only useful to one other class the it is logical to embed it in that class

**2)** It increases encapsulation. The nested class still has access to private members of the outer class but remains hidden to the outside world.

**3)** It can lead to more reliable and maintainable code. Nesting small classes within top-level  classes places the code closer to where it is used.

###Static nested classes
- A static nested class is associated with its outer class. Like static methods, a static nested class cannot refer directly to instance variables or method defined in it enclosing class. It can only use them through an object reference.

- So essentially a nested static class behaves as a normal top-level class that has been nested in another top-level class for packaging convivences.

#Conclusion
- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/TristAndroidDev).
Supabase/Postgres SQL Cheatsheet - Curated List of SQL
Tags: supabase, postgres, showdev, vue
Published: 2021-09-21 14:48:36

## Hey!

If you are  a **PostgreSQL** user, you are missing out on Big Thing!!! You could spin up a Backend Server, with PostgreSQL as Database in just 2 minutes! How? That is using [Supabase](https://supabase.io/). Supabase has raised [30 million](https://techcrunch.com/2021/09/09/supabase-raises-30m-for-its-open-source-insta-backend/) as an Open Source Backend-as-a-Service (BaaS) startup. Mind blown!!!! 🤯

![Supabase raised 30 million](https://supabase.io/new/images/blog/2021-august/supabase-series-a.png)

<p>&nbsp;</p>
## Built on Top, problem?

![Postgres 13 with Supabase](https://supabase.io/new/images/blog/pg13/postgres-13-og.jpg)
Supabase is indeed build on top of Postgres, and thus enabled developers to utilize all the awesome and stable [extension](https://supabase.io/docs/guides/database/extensions)/scripts that has been around the industry for years! You agree with me... right? 😂

Because of the continuous updates by Postgres (and I heard [v14](https://www.postgresql.org/about/news/postgresql-14-beta-1-released-2213/) is drawing near!), many of the scripts on **Stackoverflow** has outdated, and causes Supabase users, including *myself* (which switch from Firebase - NoSQL) to encounter some problem when running SQL query. Thus, we need Postgres expert like **you** to give Supabase a try, and join the Supabase community, [Discord](https://discord.com/invite/AYybku5cUz) and most importantly make Open Source better! 

<p>&nbsp;</p>
## Solution - Cheatsheets

[![Supabase SQL](https://database.dev/og.png)](https://database.dev)

Due to the reason mentioned previously, I've curated some of the SQL scripts, to aid Supabase users, or Postgres users in finding the relevant, up-to-date, and tested SQL scripts. 

Where's the list, here it is!!!! -> [Supabase SQL](https://database.dev/) 🎉🙌


If you - find it useful, please spare a 🌟 at the [Github Repo](https://github.com/supabase-community/supabase-sql)
If you - found any issue/bug, create `issues` is much appreciated.
If you - wanted to contribute the SQL scripts, PR is even more welcomed!

<p>&nbsp;</p>
## That's it

That's all the good news I wanna share with you today. If you are a Supabase user, hope you'll like it. If you are a Postgres user, I hope you'll give [Supabase](https://supabase.io) a try. If you are none of the above, then you are really missing out on **GREAT** things! 

Until next time, bye! 👋

<p>&nbsp;</p>
## Follow me

🐤 Bird app - [@zernonia](https://twitter.com/zernonia)

{% twitter 1438767175515271176%}
Git Hotfix Branches : The Final Guide
Tags: github, codenewbie, tutorial, git
Published: 2021-09-21 14:19:27

Hotfix branches are very much like release branches in that they are also meant to prepare for a new production release, albeit unplanned. They arise from the necessity to act immediately upon an undesired state of a live production version. When a critical bug in a production version must be resolved immediately, a hotfix branch may be branched off from the corresponding tag on the master branch that marks the production version.

The essence is that work of team members (on the develop branch) can continue, while another person is preparing a quick production fix.

![hotfix branches](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5q79ahvk2fntry4w42t.png)

## Creating the hotfix branch
Hotfix branches are created from the master branch. For example, say version 1.2.1 is the current production release running live and causing troubles due to a severe bug. But changes on develop are yet unstable. We may then branch off a hotfix branch and start fixing the problem:
```
$ git checkout -b hotfix-1.2.1 master
Switched to a new branch "hotfix-1.2.1"
$ ./bump-version.sh
Files modified successfully, version bumped to 1.2.1.
$ git commit -s -a -m "Bumped version number to 1.2.1"
[hotfix-1.2.1 41e61bb] Bumped version number to 1.2.1
1 files changed, 1 insertions(+), 1 deletions(-)
```
Don't forget to bump the version number after branching off! Again, the bumpversion. sh script will automatically determine the new version number starting from the branch name.
Then, fix the bug and commit the fix in one or more separate commits.
```
$ git commit
[hotfix-1.2.1-2 abbe5d6] Fixed severe production problem
5 files changed, 32 insertions(+), 17 deletions(-)
```

## Finishing a hotfix branch
When finished, the bugfix needs to be merged back into master , but also needs to be merged back into develop , in order to safeguard that the bugfix is included in the next release as well. This is completely similar to how release branches are finished.
The one exception to the rule here is that, when a release branch currently exists, the hotfix changes need to be merged into that release branch, instead of develop .
Back-merging the bugfix into the release branch will eventually result in the bugfix being merged into develop too, when the release branch is finished.(If work in develop immediately requires this bugfix and cannot wait for the release branch to be finished, you may safely merge the bugfix into develop now already as well.)

Finally, remove the temporary branch:
```
$ git branch -d hotfix-1.2.1
Deleted branch hotfix-1.2.1 (was abbe5d6).
```

______________________________________________________

*For More "The Final Guide" see the [Index Page](https://dev.to/zigrazor/the-final-guide-index-4954)*