teleren/devto huggingface dataset:
Everything you need to know about var, let and const.
Tags: javascript, webdev, programming, beginners
Published: 2022-01-05 04:31:09


## Key points used in this article
**Scope:** Refers to a lexical environment at which variables and functions (be it expression or statement) are declared and made accessible as precedence.

**Hoisting:** A mechanism used by the JavaScript engine to take all variables and function declarations to the top of their respective scopes. If an engine supports JIT compilation, then it's in the JIT compilation phase that hoisting happens else during interpretation.

### Things to know about var

- var is global and function scoped based only, e.g:

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

- var allows variable redeclaration(which doesn't make sense) and redefinition(which makes sense) within a singular scope, e.g:

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

- during hoisting, if a variable is accessed before its declarations as var variable, the compiler will hoist the var variable to the top of its scope with an implicit value of undefined, e.g:

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

- var variables declared inside block scope like if-statement, loops are not scoped meaning they can be accessed outside the block. e.g:

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

### Things to know about let
- let is global, and block(anything with { }) scoped e.g:

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

- let doesn't allow redeclaration within a singular scope but allows redefinition, e.g:

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

- during hoisting, if a let variable is accessed before the declaration, the compiler throws a Reference error, unlike the var where an undefined value will be implicitly assigned, e.g:

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

### Things to know about const
- const has the same features as the let above. The only difference is that its read-only and doesn't allow redefinition, but allows mutation for objects(e.g obj.propertyOrMethod =newValue ) if not frozen(Object.freeze(obj)) e.g:

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

In conclusion, var, let and const is not bad in my opinion it just depends on how you understand your program, but rarely do we use var this day.
Github repositories from large enterprises for every javascript developer
Tags: javascript, github, react
Published: 2022-01-05 04:29:11

As a software developer in general, it's really important to make sure we do our coding tasks effectively and efficiently. This means that for every task we have to try to use the best tools available to us.

But to use the best tools, we have to know them first. I this post I introduce some the most valuable Github repositories that large companies have made public and are used by many developers across the globe and can be interesting particularly to javascript developers. Worth mentioning, I also have included javascript-based technologies, such as React, too.

#1. Airbnb JavaScript Style Guide by Airbnb

Described as "A mostly reasonable approach to JavaScript", this repository has become the de-facto javascript style guide in many developers' opinions.

You can find the repository [here](https://github.com/airbnb/javascript).

This repository is so popular that it has popular npm packages to configure your ESLint according to this guide:
* eslint-config-airbnb
* eslint-config-airbnb-base

`eslint-config-airbnb` contains ESLint rules, including ECMAScript 6+, React and more.
`eslint-config-airbnb-base` provides Airbnb's base JS .eslintrc (without React plugins) as an extensible shared config.

#2. Typescript by Microsoft

Yes, the famous Typescript. Described as "a language for application-scale JavaScript", Typescript is one of the most popular choices specially for javascript developers as a next step in their learning path or career.

The repository can be found  [here](https://github.com/microsoft/TypeScript).

#3. react-vis by Uber

When it comes to visualising your data, usually finding an open source library to give you ability to draw charts and graphs becomes the first decision to make.

react-vis described as "A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps" is one of the most popular options for react developers.

The repository can be found  [here](https://github.com/uber/react-vis)  and is definitely worth taking a look.

#4 https://github.com/airbnb/visx

Again another repository specific to React for visualization, visx described as "a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM" shines when it comes to finding a library to add some data visualisation to your application.

You can find the repository  [here](https://github.com/airbnb/visx).

Soon I'll add more libraries to this repository and will show you how to easily host an application built with these tools can be hosted on utopiops.com.

Please let me know if you think there is a repository that should be added to this list in the comments.
Deep Copy vs Shallow Copy in JavaScript
Tags: javascript, deepcopy, shallowcopy, web
Published: 2022-01-05 04:29:02

## Shallow Copy

A new object is created that has an exact copy of the values in the original object. If the original object points to another object, a separate copy of that object is not created, rather a reference to that object is passed.


```
const a = {
    name: 'S. Sahu',
    addr:  {
        city: 'Behrampur',
    }
}
const b = {...a}; // shallow copy using spread operator
b.addr.city = "Sambalpur"; // Shallow Copy

b.name = "A. Panda"; // Deep Copy

console.log(a.name, b.name); // separate references for name is created here
console.log(a.addr, b.addr); // a.addr and b.addr point to the same object reference
```

_Output_:

```
Sambalpur Sambalpur
S. Sahu A. Panda
```

## Deep Copy

A deep copy copies all fields, and makes copies of dynamically allocated memory pointed to by the fields. A deep copy occurs when an object is copied along with the objects to which it refers.

```
const a = {
    name: 'S. Sahu',
    addr:  {
        city: 'Behrampur',
    }
}

const b = {
    name: a.name,
    addr: {
        city: a.city
    }
};

b.addr.city = "Sambalpur";
b.name = "A. Panda";

console.log(a.addr.city, b.addr.city);
console.log(a.name, b.name)
```

_Output_ :

```
Behrampur Sambalpur
S. Sahu A. Panda
```

## Create Reference

A reference of the original object is created. Any changes made in the new object is reflected in the original object.

```
const a = {
    name: 'S. Sahu',
    addr:  {
        city: 'Behrampur',
    }
}

const b = a;

b.addr.city = "Sambalpur";
b.name = "A. Panda";

console.log(a.addr.city, b.addr.city);
console.log(a.name, b.name)
```

_Output_ :

```
Sambalpur Sambalpur
A. Panda A. Panda
```
5 Website To Help You Create Beautiful JavaScript Code Snippets For Your Medium Articles
Tags: javascript, programming, medium, webdev
Published: 2022-02-22 21:36:15

---
title: 5 Website To Help You Create Beautiful JavaScript Code Snippets For Your Medium Articles
published: true
date: 2022-01-05 04:22:48 UTC
tags: javascript,programming,medium,webdevelopment
canonical_url: https://javascript.plainenglish.io/5-website-to-help-you-create-beautiful-javascript-code-snippets-for-your-medium-articles-e37ee4afaff
---

[![](https://cdn-images-1.medium.com/max/1500/1*qQxNLTV0cKebcEVRVRAMuw.jpeg)](https://javascript.plainenglish.io/5-website-to-help-you-create-beautiful-javascript-code-snippets-for-your-medium-articles-e37ee4afaff?source=rss-1282c85b5cbc------2)

If you are writing articles on Medium that contain code blocks, I have 5 different websites that will help you to beautify them

[Continue reading on JavaScript in Plain English »](https://javascript.plainenglish.io/5-website-to-help-you-create-beautiful-javascript-code-snippets-for-your-medium-articles-e37ee4afaff?source=rss-1282c85b5cbc------2)
Rock Paper Scissors in Python
Tags: python, challenge, codenewbie
Published: 2022-01-05 04:18:31

I just want to share with the world my code.

Which I build for the **Code Academy Challenge** as the final project of the course **"CS101: Introduction to Programming"**

It is written in Python.

And the code **emulates the classic game "Rock Paper Scissors"**

It request the user to select between any of the 3 items and the randomly generates an item for the computer and compare the 2

I really enjoy putting this together.

Hope someone sees it as an inspiration that is never to late to start.

Repository is the following:

https://github.com/esbasti/rock_paper_scissors
FLATIRON SCHOOL FINAL BLOG POST
Published: 2022-01-05 04:18:01

Everything that has a beginning has an end, and so has my journey in Flatiron School's software engineering bootcamp come to and end. This was by far the bravest decision I ever made in my life to transition into tech and the journey was nothing short of amazing.

In the beginning, things progressed pretty smoothly in the bootcamp due in part to the fact that the earlier courses were more introductory in nature and as such easier. As things progressed however, I started encountering some stumbling blocks.
The first major hurdle I had to overcome was in phase 3 when we started with Rails. The library felt easy to use but at the same time pretty complex, which I would attribute to the fact that Rails is significantly larger than Sinatra which we had used in the phase before. Thankfully, there was no shortage of support at Flatiron and the difficulties I faced were addressed accordingly.

Fast forward, Javascript was pretty enjoyable but React/Redux seemed to present the some of the same problems I faced with Rails. The resources provided by flatiron which include but is not limited to one on one sessions with a cohort lead etc. helped me overcome any difficulties I faced. 
Also, and maybe more importantly, I learned throughout this bootcamp that the one, sure-fire way to get good at programming is to keep coding and building projects. That's how you learn new concepts and get older concepts to stick.

Overall, as with everything, there were some ups and down but I do firmly believe that I made the best decision to attend Flatiron School and if I had to do it all over again I wouldn't choose anywhere else to help me transition into tech.
100 Days of Learning - Days 2 and 3
Tags: 100daysofcode, codenewbie, javascript
Published: 2022-01-05 04:08:57

---
series: 100 Days of Learning

---

Hello everyone, welcome to my #100DaysOfLearning challenge. I started this post on 12/30/21 with Day 2 and forgot to wrap up and post it, so here's Days 2 and 3 together.

## My learning goals today are:
- For Day 2,
  - Complete section 25 "Introducing the World of the DOM" in Colt Steele's [Web Developer Bootcamp](https://www.udemy.com/course/the-web-developer-bootcamp/) course
  - Review FCC frontend projects and start one
- For Day 3,
  - Keep making progress on section 25 (somehow my progress wasn't saved from my last session, so I'm reviewing lessons I already watched)
  - Complete the HTML for the Survey Form project


## What I completed:
- For Day 2,
  - I made progress on section 25 of the Udemy course
  - I started the Survey Form project HTML- [link to CodePen](https://codepen.io/lfosgett/pen/abLYZjw?editors=1100)
- For Day 3,
  - I made progress on the Survey Form project HTML
  - I made progress on section 25. I remember watching more of the lessons than were marked off in Udemy, but it doesn't hurt to review the material again. -UPDATE: I was accidentally watching a different course by the same author that covers similar material LOL. Still it was a good review :)


## What I learned:
- Introduction to click events and addEventListener()
- getAttribute() and setAttribute()
- Re-familiarized myself with HTML forms

## My goals for next time:
- Figure out how to turn these posts into a series here on DEV (is that something I can only do with the jekyll front matter? I'm using the rich text editor...)
- Settle on a convention so these posts are more consistent
- Wrap up the Survey Form project html + css
- Work through section 25 and complete the section code-along

-----
Photo by <a href="https://unsplash.com/@afgprogrammer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mohammad Rahmani</a> on <a href="https://unsplash.com/collections/xj3Y8-lHOXo/dev-blogs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
2 Fractions and a Prime
Tags: perl, python, theweeklychallenge
Published: 2022-01-05 04:01:55

## Weekly Challenge 146

[Challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-146/)
[My solutions](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-146/sgreen)

## TASK #1 › 10001st Prime Number

### Task

Write a script to generate the 10001st prime number.

### My solution

Easy peasy. [Search](https://duckduckgo.com/?q=what+is+the+10001+prime&ia=web) it, print 104743 and we are done. Well not quite, but still a valid solution :)

This is a relatively straight forward task. Create a method called `is_prime` to determine if a number is a prime. Then have a counter to find the 10,001st prime number.

The Perl solution is transliteration of the Python code.

### Examples

```
$ ./ch-1.py 
104743

$ ./ch-1.pl 
104743
```

## TASK #2 › Curious Fraction Tree

## Task

Consider the following Curious Fraction Tree:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nci8upab8r4aevckt9p9.png)
 
You are given a fraction, member of the tree created similar to the above sample.

Write a script to find out the parent and grandparent of the given member.

## My solution

Python has an [fractions](https://docs.python.org/3/library/fractions.html) method. My original though was to create each level of the tree, and find out if we have a match.

However, looking at the tree, there is an obvious pattern to work out what the parent value is. If the fraction is greater than 1, we reduce the numerator (top value) by the value of the denominator (bottom value). If it is less than 1, we reduce the denominator by the numerator.

Using this theory, I have a method called `get_parent` that will return the parent Fraction value given a Fraction value. It will return None if it has no parent (either -1/1 or 1/1). I also have a method called `f` that generates a string to display as the Fractions str method, will not show the denominator if it is 1.

The Fraction method will automatically normalize the fraction. If we supply 6/-4, it will automatically become -3/2.

For the Perl solution, Dave Cross (a former Team PWC member) has written the [Number::Fraction](https://metacpan.org/pod/Number::Fraction) CPAN module, which acts the same as the Python equivalent. Regular readers of my blog posts will know that I tend not to use non-core Perl modules. I've decided to ease up on this, as it seems pointless to reinvent the wheel.

The Perl solution has the same underlying logic as the Python version.

## Examples

```
$ ./ch-2.py 3/5
parent = '3/2' and grandparent is '1/2'

$ ./ch-2.py 4/3
parent = '1/3' and grandparent is '1/2'

$ ./ch-2.py 1/2
parent = '1/1' and grandparent is None
```
How to Animate an Emoji with CSS
Tags: beginners, css, design, webdev
Published: 2022-01-05 03:45:11

If you go to the home page of [this website](https://anthonydellavecchia.com), you might find some hidden "easter eggs" around the page. One of which is an emoji that is animated using CSS. 👋 is the emoji. It's just a waving hand, that doesn't actually wave. There is no animation, so I wanted to make it move. It's actually pretty easy!

### Step 1: Create HTML


`<div class="waving" data-hover="👋">Hi</div>`


All I've done here is create a simple div with the text, "Hi". Then I've given it 2 HTML attributes, `class` and `data-hover`. The contents within `data-hover` ( 👋 ) is what will be animated.

### Step 2: Create CSS

`.waving:before {
  content: attr(data-hover);
}

.waving:hover {
  animation-name: wave-animation;
  animation-duration: 3.0s;
  animation-iteration-count: infinite;
  transform-origin: 70% 70%;
}

@keyframes wave-animation {
  0% {
      transform: rotate( 0.0deg)
  }
  10% {
      transform: rotate(14.0deg)
  }
  20% {
      transform: rotate(-8.0deg)
  }
  30% {
      transform: rotate(14.0deg)
  }
  40% {
      transform: rotate(-4.0deg)
  }
  50% {
      transform: rotate(10.0deg)
  }
  60% {
      transform: rotate( 0.0deg)
  }
  100% {
      transform: rotate( 0.0deg)
  }
}`

`.waving:before` defines the content of which is to be displayed ( 👋 ).

`.waving:hover` defines what action happens when we hover over that element. In this case we have an `animation-name` which is defined below in `@keyframes wave-animation`. We also give it an animation-duration of `3 seconds` and tell it to `animate infinitely`.

`@keyframes wave-animation` is where we create the actual animation. In this case, I wanted to make the hand wave, so to do this I just want the hand to rotate back and forth. I add different keyframes and tell it to rotate a certain number of degrees in certain intervals. This mimics 👋 actually waving!

You can apply this basic template to any emoji. Be creative! For example, you can try to animate a rocket 🚀 using CSS. Just think of what type of animation you want it to do (possibly translate up and down).

For more articles check out my blog @ [anthonydellavecchia.com](https://anthonydellavecchia.com)
How to add sass to your create-react-app in 2022
Tags: react, css, webdev, javascript
Published: 2022-01-05 03:31:24

Hey y'all! Here is a quick guide how to use sass inside your create-react-app projects in 2022! 

In the past, I see most tutorials using something like watch or node-sass (which uses LibSass and is [deprecated](https://sass-lang.com/blog/libsass-is-deprecated)), so here's an alternative!

First step is to create a React project using the following command:

```
npx create-react-app hello-sass
```
Side note if you're new to React: The hello-sass parameter is what I decided to name the project it creates, feel free to use whatever name you want.

Then, create a Sass file in the src directory of your React app, we'll call ours main.scss 

Inside that file we can take inspiration from the [code](https://sass-lang.com/guide) on the Sass Basics guide just to see if it works:

./src/main.scss
```
$font-stack: Helvetica, sans-serif;
$primary-color: red;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
```

For the next step, just make sure to add your new Sass file into the top of your App.js with `import './main.scss`. When you run your React app with `npm run start`, you should see your beautiful sass changes appear onto the screen!

I hope you found this helpful! I'm going to try and create more technical content this year to strengthen my writing and creativity skills so hopefully I can make cooler guides like this in the future!

PS: If you find ANYTHING wrong with the code or implementation above, let me know! I'm happy to make sure people are learning the correct things from my posts :)
Code Smell 113 - Data Naming
Tags: oop, webdev, database, refactoring
Published: 2022-01-05 03:16:15

*Use entity domain names to model entity domain objects.*

> TL;DR: Don't name your variables as Data.

# Problems

- Readability

- Bad Naming

# Solutions

1. Use role suggesting names.

2. Find names in the [Bijection](https://dev.to/mcsee/the-one-and-only-software-design-principle-3086).

# Context

We use 'data' a lot in our variables.

We are used to doing it.

Using this kind of name favors the anemic treatment of objects.

We should think about domain-specific and role-suggesting names.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/0c0c6b9e9e8a5b2aa4dfe32828c9cbc5)
```javascript
if (!dataExists()) {
  return '<div>Loading Data...</div>';
}
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/945e6a64fd3167637ff1e1eb872ff179)
```javascript
if (!peopleFound()) {
  return '<div>Loading People...</div>';
}
```

# Detection

[X] SemiAutomatic 

We can check for this substring on our code and warn our developers.

# Tags

- Readability

- Naming

# Conclusion

Data is everywhere if you see the world as only data.

We can never see the data we manipulate. 

We can only infer it through behaviour.

We don't know the current temperature. We observe our thermometer pointing at 35 Degrees.

Our variables should reflect the domain and role they are fulfilling. 

Naming them as 'data' is lazy and hinders readability.

# Relations

{% post https://dev.to/mcsee/code-smell-01-anemic-models-4dg2 %}

{% post https://dev.to/mcsee/code-smell-65-variables-named-after-types-9da %}

# More Info

{% post https://dev.to/mcsee/what-exactly-is-a-name-part-ii-rehab-20gd %}

* * *

> Twenty percent of all input forms filled out by people contain bad data.

_Dennis Ritchie_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}