teleren/devto huggingface dataset:
Nullish-coalescing-operator
Tags: javascript
Published: 2021-06-27 18:08:20

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

## Problem
As explained in the [Optional Chaining Operator](https://dev.to/anu365/javascript-optional-chaining-operator-1o2m)  we can get properties of an object in a way using Short-Circuit Logic
```
const name = response && response.human && response.name;
```
which changed to
```
const name = response?.human?.name;
```

Now if I have to add a fallback value if `name` is not defined to response object

## Solution
First thing came to  fix this is Short-circuit logic again.
To add a default fallback value using the logical OR operator (||)
```
const name = response?.human?.name || 'Dev To';
```

Here the problem arises again. 
`Name` can be *Empty* value. 
Now, Name gives me value as `Dev To`.

This logic would fail when the left hand side of the OR expression evaluates to falsy (e.g. null, undefined, false, 0, empty string, …), the right hand side of the expression will be used. For null and undefined that’s not a problem, but it is for false, 0, empty string, etc too.

### Nullish Coalescing Operator
It serves as an equality check against nullary values (e.g.
null or undefined). Whenever the expression to the left of the ?? operator evaluates to either undefined or null, the value defined to the right will be returned.

```
const name = response?.human?.name ?? 'Dev To';
```
Learn how to build responsive websites with CSS media query
Tags: javascript, webdev, tutorial, beginners
Published: 2021-06-27 17:53:45

Hi, welcome to this tutorial. Today, I will be explaining how to build websites that are fully responsive to all screen sizes with CSS3 media query. 🚀

So sit back, put your seatbelts on, Let's Ride!🚀

<img src="https://media.giphy.com/media/u5bbqJE63sBGM/giphy.gif" alt="Learn how to build responsive websites with CSS media query"/>

### So what is a Media Query?

Media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false.
It is written as 
```
@media screen and (max-width: 768px) {
    body {
       display : none;
    }
}
``` 
The code above, simply means if the screen size is <=768px (less than or equal to 768px), the body of the HTML page should be blank.
 
The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding CSS styles are applied.

> For a website to be fully website, **Breakpoints** are used.

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes. They can be at any point you choose to make them available, but mostly, at the points where your website layout breaks. 

> Breakpoints are the building blocks of a responsive design

Here is an image of breakpoints, you should note, either of the two can be used.
![Screen sizes breakpoints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3ex65nj56kwvezi4398.png)
![Screen sizes breakpoints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gysmy2cpzufnkbek2k8v.png)

 So let's jump right into the practical use of media query and make a website layout fully responsive.😀🚀

I just created a website layout using CSS Flexbox, if you are not familiar with flexbox, you may [check here](https://dev.to/arshadayvid/learn-and-master-flexbox-by-building-commonly-used-web-components-14n8)

##Here is an Exercise for you 😀🚀
🚀 Edit this [code](https://codepen.io/arshadayvid/pen/XWRroXg) on [Codepen](https://codepen.io) 

🚀 Share the link your solution in the comment section 



> My Solution 🚀 : Download the Source code [here](https://github.com/dha-stix/media-query-DEV)

I hope you enjoyed this short tutorial on Media query?
<img src="https://media.giphy.com/media/XbxZ41fWLeRECPsGIJ/giphy.gif" alt="Media Query"/>

Follow and Connect with me on 
🚀 [Linkedin](https://www.linkedin.com/in/david-asaolu234/)
🚀 [Twitter](https://twitter.com/Arshadayvid)
🚀 [GitHub](https://github.com/dha-stix)

You may also view more examples
🚀 [W3Schools](https://www.w3schools.com/css/css3_mediaqueries_ex.asp)
🚀[CSS Tricks](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
🚀 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
Vim that!!
Tags: vim
Published: 2021-06-27 17:17:06

> I vim
> You vim
> He/She vims
> we vim
> You vim
> they vim

# Introduction

Vim's powerful. (I love `vim`)
Vim's easy. (I use `vim` on daily basis)

I bet you agree **JUST** with the first statement, don't you?

Well, let me just explain something and we'll talk about `vim` being easy or hard.

# It's all about understanding the key-parts

In order to leverage the most of `vim` without spending a lot of time, we need to be smart.

## How to talk to vim

Let's get started with an extremely important part.
`vim` has three important things that are surely required steps to master it.

1. Verbs
2. Modifiers
3. Nouns

```
# sample.txt

Line 1 before comma, after comma.
```
I open the file `sample.txt` and I put my cursor on the `f` of `before`.

If I type `dt,`, `sample.txt` will turn into:

```
# sample.txt

Line 1 be, after comma.
```

Let's break `dt,` down:
1. `d` (verb): `d`elete
2. `t` (modifier): un`t`il
3. `,` (noun): comma

It makes a lot more sense now!
`dt,` -> `d`elete un`t`il the next `,`

## What's next ?

I'll leave it there.

You can easily look for vim verbs/modifiers/nouns on google.

# Conclusion
`vim` is about continuous learning on a daily basis, at least from my point of view.
I made my own VS Code theme in less than an hour, here's how? 
Tags: theme, vscode, extension, design
Published: 2021-06-27 16:41:33

In this blog post, I'm gonna tell you how you can make your own vs code theme extension according to your color preference in less than an hour.

## Prerequisites:

- Know the color combination on your head you want!. 😉

**Let's go!! 🚀**

### First of all,
Open your vs code and then your terminal. Go to the path where you want to setup your code base by `cd [YOUR_PATH]`.



> 
First things first you’ll need to have Node.js and Git installed in order to be able to install the necessary packages.

Open a Terminal and guide to the directory where you want to create your theme, and run the following command:

```
npm install -g yo generator-code

``` 

> 


Using npm install yo (yes, that’s the real package name — short for Yeoman)

```
yo code

``` 
This will run the Visual Studio Code Extension (VSCE) generator.
![a.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1624771734188/zfinfkdNa.png)

To make a fresh color theme, you need to follow these steps by navigation using the up-and-down arrow keys and press enter to make a selection.


1. Select New Color Theme
2. Select No, start fresh
3. Enter the name of your extension
4. Enter your extension identifier (ex. of what an identifier is: [publisher-name or author], just press enter and use the default)
5. Write a short description of what the theme represents or what the idea behind the theme is.
6. Enter the name (case sensitive) as you want it to appear in the marketplace (This is the extension display name)
7. Select a base theme to be used as a starting point

You have successfully created a theme project! Now run the following commands to open it and to start working!


```
cd [theme-name] && code .

```
you have successfully completed the setup process 🎉

Now, 

you will find a pre-built JSON file having different properties responsible for different coloring for vs code, all you need is to code that JSON file according to your choice.


... Wait, 


> 
It's so frustrating and time taking to browse all coloring properties in code and implementing the exact what's on Your Mind?

I have a Shortcut for that, you can skip all that lengthy steps, and make your Extension ready to launch within an hour 🚀

Here is How? :

Open your search engine and Go to or Click [Theme Studio for VS Code](https://themes.vscode.one/)

And Follow These Steps:

1. ``Create New Theme``

![Untitled Diagram.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624775264584/vshMCsl43.png)
2.  Start Designing your own theme.
![Screenshot (155).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1624775146301/qoRWxSRY_.png)
  

How to Export theme after you are done, publish it publicly and start using it in your VS Code ``FOLLOW`` my next Blog.😃

My Next Blog Link (Part II): https://dev.to/gauravsinhaweb/i-made-my-own-vs-code-theme-in-less-than-an-hour-here-s-how-part-2-4h2g


>
Here is my VS Code theme Link: https://marketplace.visualstudio.com/items?itemName=GauravSinha.greencloud

``Happy Theming!✨``
What is that you hate about your favorite search engine?
Tags: discuss, startup, productivity
Published: 2021-06-27 16:13:54

This is a tricky question. Before that, let me set a warm and comfortable scene for you before contradicting it.

Search Engines are part of our daily life and it is evolved over the years to improve the user experience. We have muscle memory of Googling (or DDGing) everything with great convenience (on our phone, laptop, home speakers). Now instead of just listing the website URLs, search engines try to answer your questions directly, let you find similar images, and personalize content for your taste - everything for free. So, in a way, you have a favorite search engine that you would use daily.

So,

* What makes you wanna hate the same product you love - probably in specific, recurring situations?

* Have you noticed whether the frequency of these "bad" moments stays the same or increases over time?

* Do you use any other products to overcome this issue? Or you prefer doing it in your head instead?

* How personal you wanted your search results to get optimized in these situations? Or are you concerned with your privacy?
What The Flask
Tags: webdev, fullstack, codeandcocktails, programming
Published: 2021-06-27 16:13:12

עברית למטה

Hi everyone, and welcome to my blog.
So... What the flask am I doing here?

Here we go.
I'm an enthusiastic Mixologist. One of the things I love the most about the cocktail world is that it's a place where science and imagination meet (don't kill your client, also milk and lemon don't mix well). But other than that - everything you can imagine.

I am also a developer. That's what I do. That's what I always knew I wanted to do.

So, I decided to build an app for my home bar. An app that will let me know whether or not I can make a cocktail, help me maintain my bar, and be able to go restocking spontaneously. And I love IOT, so of course - lights under every bottle and to be able to light bottles according to a recipe!

In this blog, I will share my process of Building this App. from the design to a fully working App. including my mistakes, things I've learned on the way, and cool tips I found useful

-------------------------------------------------

היי לכולם וברוכים הבאים לבלוג שלי.
אז... מה אני עושה כאן?

מה שנקרא #התחלנו
אני מיקסולוגית חובבת. אחד הדברים שאני הכי אוהבת בעולם הקוקטיילים הוא שזה מקום שבו המדע והדמיון נפגשים (אל תהרוג את הלקוח שלך, וחלב ולימון לא מתערבבים טוב). אבל חוץ מזה - כיד הדמיון החופשי.

אני גם מפתחת. זה מה שאני עושה. זה מה שתמיד ידעתי שאני רוצה לעשות.

אז החלטתי לבנות אפליקציה לבר הביתי שלי. אפליקציה שתיידע אותי אם אוכל להכין קוקטייל או לא, תעזור לי לתחזק את הבר שלי ולהיות מסוגלת לצאת למילוי מלאי באופן ספונטני. ואני אוהבת IOT, אז כמובן - נורה מתחת לכל בקבוק ולהיות מסוגלת להדליק בקבוקים לפי מתכון!

בבלוג הזה אני הולכת לשתף את התהליך שלי בבניית אפליקציה זו. מהעיצוב ועד לאפליקציה עובדת לחלוטין. כולל הטעויות שלי, דברים שלמדתי בדרך וטיפים מגניבים שמצאתי מועילים
Learn React with this free GitHub book I wrote
Tags: javascript, webdev, react, showdev
Published: 2021-06-27 16:06:34

---
title: Learn React with this free GitHub book I wrote
published: true
description: This is a free book on React meant for completely new developers in React. Even more experienced devs should be able to find something
tags: javascript, webdev, react, showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajt4bxpxypumzxjywich.png
---

Hi all. I moved my free React book to GitHub

> https://github.com/softchris/react-book

can also be read here

> https://softchris.github.io/react-book/

I hope you benefit from it.

[Chris, Twitter](https://twitter.com/chris_noring)

It contains a lot of things like

- Forms
- Routing
- Lazy loading
- Testing with Jest
- Testing Library (E2E)
- Hooks
- Render props
- Context API

Also check ouut these resources from Microsft LEARN
https://docs.microsoft.com/en-us/learn/paths/react/
Creative Approaches in Problem Solving
Published: 2021-06-27 16:00:25

While working on the nQueens problem, my partner and I found ourselves needing to perform a diagonal traversal of a matrix. We thought of a few solutions and waited until some other preliminary steps were completed before implementing them.

Along the way, some confounding bugs led us to the help desk where we were alerted to how the test suite checked for diagonals. It's a nice solution, and I found it really creative.

When the time comes to apply that same trick or something close to it on my next problem, I hope I recognize the opportunity.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nroj754imbd0bnhzbjvu.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvn00iwnjt9x8w0zndfh.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wss7dvmlqg1qdw287ad5.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ap91g85l0tsdvgtm8un8.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfry2gqf81js9bu33adu.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/layc21mc7qjjfeg6irwp.png)
5 awesome GitHub repositories for beginners 🧵👇🏻
Tags: javascript, beginners, codenewbie, tutorial
Published: 2021-06-27 15:29:01

 > this article is generated using (give a ⭐) 
 {% github Manitej66/twlog %} 
 {% twitter 1407585116403257345 %}
{% twitter 1407585117262991362 %}
{% twitter 1407585118445780993 %}
{% twitter 1407585119708254208 %}
{% twitter 1407585120836587521 %}
{% twitter 1407585122015137795 %}
C# Basics - Methods
Tags: codenewbie, programming, csharp
Published: 2021-06-27 15:17:20

So now we've learnt about variables, classes, and the public and private accessors, the next thing to learn is Methods

## Methods

Methods are hugely important to OOP (Obect Orientated Programming), and allow developers to apply logic to the classes properties and fields. Without them we would have no code / functionality.

Methods can range in size from 1 line of code (statement) or multiple lines of code.

They consist of these parts:

| Part           | Description                                                                                                 |
| -------------- | ----------------------------------------------------------------------------------------------------------- |
| Accessor       | Determines the visibility of method to other methods or classes.                                            |
| Return Type    | Determines what type of object is returned from the method (e.g boolean, string, int)                       |
| Name           | The name of the method, method named are always written in Pascal Case                                      |
| Parameter List | Used to pass information from other classes or methods to utilise within the method. These are **optional** |
| Body           | The body of the method, the actual logic statements.                                                        |

Lets take a look.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7ynyo10hqfzgb7c65vd.png)

now lets disect this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gm8jgkxodhkv20o0tci7.png)

This is the basics of methods, we will look them into more detail in future tutorials.

Next up --> Building your first Console Application, the classic "Hello World";
150+ users registered in 24 hours on website created for fun
Tags: showdev, javascript, nextjs, devjournal
Published: 2021-06-27 14:43:41

Hello everyone,

for some days i was working on a simple social media website created using NextJS, TailwindCSS and firebase for learning and fun and yesterday created a Dev post about making that project(website) public to internet.
Dev post Link : [Post](https://dev.to/namanvyas/build-a-social-media-website-with-next-js-tailwindcss-and-firebase-in-8-days-2j65)
Website Link : [noob.study](https://noob.study)

I was not expecting much attention from that post so after writing i did go to sleep, after waking up i was checking my phone as normal and open that website to check how it is going and find out there was around 10-11 new posts which is amazing after that i rush to my Dev post and Firebase console and find out 69 peoples registered on website and 10 stars in my GitHub repo which was too amazing for me, got very good response.

![wowww](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlszd83cdr9w0r3fc8mn.gif)

In the end of day i got **158 users** registered and also some bugs to fix

now main challenge for me is to fix all bugs as fast as possible and optimize Firebase integration because i got around 22,000 read request which is not good for me if website grow like that maybe i will have to close that project because i can't afford to pay for this project right now.

It is a great experience for me. Love Dev community.

{% link https://dev.to/namanvyas/build-a-social-media-website-with-next-js-tailwindcss-and-firebase-in-8-days-2j65 %}
Blockchain Resources
Tags: blockchain
Published: 2021-06-27 14:24:44

Here are some resources that I found very useful for getting started with blockchain development. I will link the resource pages that I have found  very helpful in my journey in learning about development.

Here is Stephen Grider's course on Udemy. It is really long, but I really like how he goes in depth on whatever topic that he discuss.

https://www.udemy.com/course/ethereum-and-solidity-the-complete-developers-guide/

Next, GitHub has a list of resources that you can checkout.

https://github.com/protofire/blockchain-learning-path

The last resource that I have to share is Crypto Zombies. This is a game that teaches you how to write smart contracts.

https://cryptozombies.io/

I hope that you find these resources useful in learning about blockchain development.

Happy coding!
My first React app - A simple Pokédex
Tags: react, javascript, codenewbie, beginners
Published: 2021-06-27 14:20:51

Totally new to React (and webdev), coming from Android background. Went through some HTML/CSS resources in freecodecamp/csstricks, then a couple of YT videos and React docs and built this simple Pokédex. Used React, PokéApi and Material-UI to build this.

Overall, had a great experience working with States, Components, API integration(way easier than Android lol), Material-UI(found it very difficult to customize).

Some of the features implemented in the application:
- View basic details of each Pokémon
- Filter Pokémon based on Region and Type
- Sort Pokémon by ID/Name
- Search Pokémon by its Name/ID
- Dark mode toggle
- Scroll to top
- Lazy loading of images
- Responsive design

Link to the Pokedex : [here](https://pokedex-react-mui.netlify.app/)
Github repo : [here](https://github.com/s1varam/pokedex)

![snapshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsh8y1dcsp1zb4j61t1b.PNG)

I know there is a lot of boilerplate code and my CSS requires optimization, but I hope it will improve with time. I need to know the areas that needs improvement and feedback is highly appreciated!
Day 124
Tags: 100daysofcode, programming
Published: 2021-06-27 14:12:17

Day 124/200 of #200DaysOfCode #100DaysOfCode  

- Solved two problems on Codewars.

1 - Validate Sudoku with size `NxN` (4 kyu)
2 -  Roman Numerals Helper (4 kyu)
GitHub Repositories to improve your Programming Skills
Tags: codenewbie, programming, news, github
Published: 2021-06-27 14:10:01





1. [Free Programming Books] 
(https://github.com/EbookFoundation/free-programming-books)

2. [Awesome]
(https://github.com/sindresorhus/awesome)

3. [Coding Interview University]
(https://github.com/jwasham/coding-interview-university)

4. [Developer Roadmap]
(https://github.com/kamranahmedse/developer-roadmap)

5. [Public APIs]
(https://github.com/public-apis/public-apis)

6. [Awesome Python]
(https://github.com/vinta/awesome-python)

7. [JavaScript Algorithms]
(https://github.com/trekhleb/javascript-algorithms)

8. [Node Best Practices]
(https://github.com/goldbergyoni/nodebestpractices)

9. [Real World]
(https://github.com/gothinkster/realworld)

10. [Tech Interview Handbook]
(https://github.com/yangshun/tech-interview-handbook)

11. [Clean Code JavaScript]
(https://github.com/ryanmcdermott/clean-code-javascript)

12. [Free For Dev]
(https://github.com/ripienaar/free-for-dev)

13. [Awesome For Beginners]
(https://github.com/MunGell/awesome-for-beginners)

14. [JavaScript Questions]
(https://github.com/lydiahallie/javascript-questions)
Enumerating @NamedQuery within @NamedQueries
Tags: java, annotations
Published: 2021-06-27 14:07:44

## Introduction

If you're a Java developer using JPA, chances are that you've declared one or more `@NamedQuery` objects on your entities.

To declare a `@NamedQuery` on a class, the class must simply be annotated with the name of the query and its JPQL, such as:

``` java
@Entity
@NamedQuery(name = "findAllProjects",
			query = "select p from Project p order by p.id")
public class Project
```

If however, we wish to declare multiple `@NamedQuery` annotations, we annotate the class with a `@NamedQueries` annotation which then contains a collection of `@NamedQuery` annotations as follows:

``` java
@Entity
@NamedQueries({
	@NamedQuery(name = "findAllProjects",
				query = "select p from Project p order by p.id"),
	@NamedQuery(name = "findById",
				query = "select p from Project p where p.id=:id")
})
public class Project
```

## Enumerating the `@NamedQuery` annotations

Once you've created an entity with multiple `@NamedQuery` annotations, how can you check what annotations are present on the class?

Fortunately using reflection, its a fairly simple matter to enumerate the annotations on the class and find the details about them as shown in the following code.

``` java
NamedQueries annotation = Project.class.getAnnotation(
											NamedQueries.class
													 );
for (Annotation annot : annotation.value()) {
  System.out.println(annot.toString());
  for (Method method : annot.annotationType().getDeclaredMethods()) {
    if (method.getName().equalsIgnoreCase("name") ||
        method.getName().equalsIgnoreCase("query")) {
		try {
        String result = method.getName() +
	                    " : " +
                        method.invoke(annot,  null).toString();
        System.out.println(result);
      } catch (IllegalAccessException | IllegalArgumentException
			| InvocationTargetException e) {
        // Oops - something has gone wrong.
		break;
      }
    }
  }
}
```

Running the above code produces the following output:

``` bash
@javax.persistence.NamedQuery(lockMode=NONE, hints=[], name=findAllProjects, query=select p from Project p order by p.id)
name : findAllProjects
query : select p from Project p order by p.id

@javax.persistence.NamedQuery(lockMode=NONE, hints=[], name=findById, query=select p from Project p where p.id=:id)
name : findById
query : select p from Project p where p.id=:id
```

## Credits

Photo by [Xavier von Erlach](https://unsplash.com/@xavier_von_erlach?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=medium&utm_medium=referral)