teleren/devto huggingface dataset:
Hoisting in Javascript
Tags: javascript, frontend, webdev, beginners
Published: 2023-05-16 08:14:57

---
title: Hoisting in Javascript
published: true
series: Javascript core concepts
date: 2021-12-15 07:53:28 UTC
tags: #javascript #frontend #webdevelopment #beginners
canonical_url: 
---
![Hoisting In Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69ebrp0tyu9fkqfrvqrz.png)

First, let's get it clear that hoisting is not any concept but it's a phenomenon in javascript. It tells you how javascript behaves while accessing the variables during the runtime. Hmm... Now let's take an example below-

```
console.log(x);
var x = 10;

```

What must be the output for this code? The answer is

> undefined

But Why? This is because of hoisting. The variable **x** is being hoisted. That means it is accessed before its initialization. Now let's understand how javascript runs behind the scene for the above code.

## Execution Context

The javascript code execution has 2 phases. First one is called as **memory allocation phase** and the second is the **code execution phase**. When the code gets compiled it forms a _global execution context_ where all the code will get executed. All the variables are allocated some space in memory and are assigned a placeholder as _undefined_ during the **memory allocation** phase.

By this, we can now say from the above code that variable **x** has been allocated memory and got a placeholder as _undefined_ in the memory allocation phase. Now that the memory is assigned to the variable **x** , it's time to execute the code inside the code execution phase.

Javascript will point to the first line of the code to execute. Here, x is still not been assigned any value and has a placeholder as 'undefined'.

```
console.log(x);

```

so, it will execute it and give the output as _undefined_ in the console. This is why we have our output as _undefined_. And this is what hoisting is.

Now, the next line is executed, and here variable **x** gets assigned with value 10. But it will just reside inside the memory.

```
var x = 10; // x is assigned a value as 10

```

When you print the value of x after this, you can see the value is now 10.

```
console.log(x);
var x = 10;
console.log(x);

```

> undefined
> 
> 10

**Note** - _let_ and _cost_ cannot be accessed before its initialization. It is stricter than the _var_ and has a separate scope from the global scope. During the memory allocation phase _let_ and _const_ variables still get _undefined_ as a placeholder and are hoisted but they are in a different scope and cannot be accessed before initialization. The time between the memory allocation of _let_ or _const_ variables till their assignments to any value is called a **Temporal Dead Zone**!

I hope this has helped you understand hoisting in a simpler way. If you have any doubt please comment on the article or connect with me on Linkedin. Also, any feedback is welcomed for improvements.
React Strict Mode - Good Parts Only
Tags: react, strictmode
Published: 2021-12-15 07:50:54

`StrictMode` is a tool for highlighting potential problems in an application. Like `Fragment`, `StrictMode` does not render any visible UI. It activates additional checks and warnings for its descendants.

Example:

```jsx
import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}
```

In the above example, strict mode checks will *not* be run against the `Header` and `Footer` components. However, `ComponentOne` and `ComponentTwo`, as well as all of their descendants, will have the checks.

<aside>
💡 **Note:**
Strict mode checks are run in `development` mode `only`; *they do `not` impact the `production build`*.

</aside>

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

- Class component `constructor`, `render`, and `shouldComponentUpdate` methods
- Class component static `getDerivedStateFromProps` method
- Function component bodies
- State updater functions (the first argument to `setState`)
- Functions passed to `useState`, `useMemo`, or `useReducer`

By intentionally double-invoking methods like the component constructor, strict mode makes patterns like this easier to spot.

<aside>
💡 The double invocation is the reason why we see double logs in the console when we do not expect them at all.

</aside>

<aside>
💡 **Note:**

Starting with React 17, React automatically modifies the console methods like `console.log()` to silence the logs in the second call to lifecycle functions. (`Not the function bodies`) However, it may cause undesired behavior in certain cases where [a workaround can be used](https://github.com/facebook/react/issues/20090#issuecomment-715927125).

</aside>

### References

[Strict Mode - React](https://reactjs.org/docs/strict-mode.html)
Advent of PBT 2021 - Day 15
Tags: challenge, testing, webdev, javascript
Published: 2021-12-15 06:23:29

---
title: Advent of PBT 2021 - Day 15
published: true
description: Advent of Property Based Testing - Day 15
tags: challenge,testing,webdev,javascript
//cover_image: https://direct_url_to_image.jpg
---

> _Advent of PBT 2021 — Learn how to use property based testing and [fast-check](https://github.com/dubzzz/fast-check) through examples_

Our algorithm today is: **racePodium**.
It comes with the following documentation and prototype:

```ts
type RaceParticipants = [number, number, number, number, number];

/**
 * 25 Horses Puzzle
 * >  Let’s say that you have 25 horses, and you want to pick the
 * >  fastest 3 horses out of those 25. In each race, only 5
 * >  horses can run at the same time because there are only 5
 * >  tracks. What is the minimum number of races required to find
 * >  the 3 fastest horses without using a stopwatch?
 *
 * Find the podium!
 * See https://matt-croak.medium.com/google-interview-25-horses-c982d0a9b3af for more details.
 *
 * @param runRace - Run a race with the received participants.
 * Outputs the final ranking. In case of equality the participant
 * with the smallest id wins.
 *
 * @returns
 * Ordered top three.
 */
export function racePodium(
  runRace: (...participants: RaceParticipants) => RaceParticipants
): [number, number, number]
```

More details on this subject at: https://matt-croak.medium.com/google-interview-25-horses-c982d0a9b3af

We already wrote some examples based tests for it:
```ts
it("should find the right podium for a given race", () => {
  // Arrange
  const speeds = [
    14,  1,  8, 19, 23,
    13, 17, 10,  3,  5,
     2, 21, 22,  9, 11,
    20,  7, 16, 24, 18,
     0, 15, 12,  6,  4
  ];
  const compareParticipants = (pa: number, pb: number) => {
    if (speeds[pa] !== speeds[pb]) return speeds[pb] - speeds[pa];
    else return pa - pb;
  };
  const runRace = (...participants: RaceParticipants): RaceParticipants => {
    return participants.sort(compareParticipants);
  };

  // Act
  const podium = racePodium(runRace);

  // Assert
  expect(podium).toEqual([18, 4, 12]);
});
```

How would you cover it with Property Based Tests?

In order to ease your task we provide you with an already setup CodeSandbox, with examples based tests already written and a possible implementation of the algorithm: https://codesandbox.io/s/advent-of-pbt-day-15-xvst7?file=/src/index.spec.ts&previewwindow=tests

You wanna see the solution? Here is the set of properties I came with to cover today's algorithm: https://dev.to/dubzzz/advent-of-pbt-2021-day-15-solution-5ako

---

[Back to "Advent of PBT 2021"](https://dev.to/dubzzz/advent-of-pbt-2021-13ee) to see topics covered during the other days and their solutions.

More about this serie on [@ndubien](https://twitter.com/ndubien) or with the hashtag [#AdventOfPBT](https://twitter.com/search?q=%23AdventOfPBT).
A11y tips: the Accessibility Tree
Tags: a11y, tips, html
Published: 2021-12-15 07:31:26

With HTML, CSS and JS we give the browser the necessary information to build the Document Object Model (**DOM**), which is **the tree that represents the structure of the document** and that will serve to display the information on the screen.

In addition to the DOM, **the browser builds a second tree, the Accessibility Tree**, which is the equivalent used by assistive technologies (screen reader, voice recognition software...) to navigate our website. This tree **needs certain information** to be able to offer a complete representation of the document, and it obtains it from the `name`, `role` and `value` parameters of each node.

If any of these parameters is not present, **the node will not be reflected in the Accessibility Tree**, it cannot be represented by the software and therefore it cannot be used by the user.

This is especially important for interactive elements such as links, buttons, or form elements. For example, if to simulate a link we use a `<div>` with an associated `onclick` event, the `role` will be `text` instead of `link` and the `name` and `value` will be empty, so the element cannot be activated using a screen reader.
Or if we use an SVG within a `link` (as is usually done with header logos), as it does not contain any text or title inside, the element will not have a `name` in the Accessibility Tree and it cannot be activated either.

Therefore, **it is very important to pay attention to the representation that our document generates in the Accessibility Tree** to make sure that all the important elements contain the necessary information to be represented in a useful way for the user.
To do this, it is best to learn to use [each of the elements that HTML5 offers](https://developer.mozilla.org/en-US/docs/Web/HTML) us and make correct use of them and their attributes.
Facade Pattern | Design Patterns in Java
Tags: java, programming, beginners, codenewbie
Published: 2021-12-15 07:27:34

Structural design pattern: Watch a Java implementation of the Facade Pattern which provides a simplified interface to a complex subsystem of classes. In this example the subsystem is related to document handling e.g. writing a document to different output formats. The facade is for creating these documents and hides the whole configuration and writing process through a simple write method.

{% youtube xSukIVQyKFc %}
Saç Ekimi
Tags: hair, transplant, sac, ekimi
Published: 2021-12-15 07:19:11

Saç ekimi uygulamaları birçok uygulama yöntemiyle farklı kök sayılarında uygulanabilmektedir. Bu sebeplerden dolayı bir saç ekimi operasyonu için tek bir fiyat belirlenmesi mümkün olmamaktadır. Saç ekimi fiyatlarının belirlenmesinde etkili olan madde tekniktir. Örneğin zaman alan ve zorlayıcı bir teknik olan fue, fut tekniğine göre daha pahalıdır. Fakat daha kısa sürede iyileşme olanağı sunan fue tekniği kişiler tarafından daha etkin olabilmektedir. İstanbul Bağcılar’daki hastanemizde alanında uzman doktorlar ile hijyenik hastane ortamında saç ekimi imkanı sunmaktayız. Saç ekimi operasyonu, **[saç ekimi fiyatları](https://www.kastipmerkezi.com.tr/bizden-haberler/medikal-estetik/sac-ekimi-fiyatlari-hangi-kriterlere-gore-belirlenmektedir/)** ve saç ekimi yöntemleri hakkında ayrıntılı bilgiyi hastanemiz medikal estetik servisinde bulabilirsiniz.
About Oladoyinbo Vincent
Tags: beginners, career, discuss
Published: 2021-12-15 07:16:28

Hello, Am Oladoyinbo Vincent, Am Currently The CEO at [Devone](https://devone.com.ng) And [Mzik](https://mzik.cloud),[Wiki Express](https://wikiexpress.org) Please Feel Free To Review My Website.

`<?php echo"Love You All" ?> `
Who is a Freelance Web Developer?
Tags: javascript, webdev, beginners
Published: 2021-12-15 07:00:13

At first, a web developer may appear to be someone who develops a website in a vague term. However, the web developer job description needs more understanding beyond the assumed meaning. A programmer specializing in World Web Applications based on the client-server model, using in hand expertise of HTML, CSS, JAVAScript, PHP, and many more, is termed as a Web developer. The simple website we see on the screens has hands-on expertise behind it. 

Majorly all the industries, namely service industry or e-commerce industry, very much rely on web development, since it caters to the need of reaching out to the customers, far and wide. Since every business is now at the click of a button, the need for the websites to be both user-friendly as well as mobile-friendly has increased. The revolutionary shift of the users from personal computers to mobile users has increased the demand for mobile UI design and app design. The process and demand both have become complex over the period. A large number of potential web developers work with Eiliana, which cater to the needs of almost every sector of the economy.

Some of the core responsibilities of a web developer to ensure career growth and generate good business include:

Deep knowledge and hands-on expertise rise in the field of web applications and programming languages.

Strong understanding of the security principles and their e-commerce application.

Regular update on changing market demands and be adjusting to it in terms of expertise needed.

Deep functional knowledge of UI, cross-browser compatibility, and changing dynamics.

Stress Management and compatibility in complying with the deadlines.

Smart enough to apply expertise to solve technical problems.

Being a web developer at Eiliana you have the complete choice of working as a freelancer.


How To Become A Web Developer?

Not many formal certifications are needed as a  Web Developer Prerequisite, but an in-depth and advanced understanding of the skill takes one beyond boundaries. We should be familiar with the web development jobs offered to become one. In general, there are three choices to choose
DBD::MariaDB - a Perl Database Driver for MariaDB
Tags: perl, mariadb
Published: 2021-12-15 06:55:29

DBD::MariaDB is a Perl Database Driver for MariaDB.

[DBD::MariaDB](https://metacpan.org/pod/DBD::MariaDB)

```
use DBI;
 
my $dsn = "DBI:MariaDB:database=$database;host=$hostname;port=$port";
my $dbh = DBI->connect($dsn, $user, $password);
 
my $sth = $dbh->prepare(
    'SELECT id, first_name, last_name FROM authors WHERE last_name = ?'
) or die 'prepare statement failed: ' . $dbh->errstr();
$sth->execute('Eggers') or die 'execution failed: ' . $dbh->errstr();
print $sth->rows() . " rows found.\n";
while (my $ref = $sth->fetchrow_hashref()) {
    print "Found a row: id = $ref->{'id'}, fn = $ref->{'first_name'}\n";
}
```
Weekly web development resources #100
Tags: weekly, webdev
Published: 2021-12-15 06:50:21



______

##[Floating UI](https://floating-ui.com/)
[![Floating UI](https://wweb.dev/weekly/content/100/floatingui.jpg)](https://floating-ui.com/)
A library to position all types of floating elements, like tooltips, popovers, dropdowns and more.

______

##[Deta](https://www.deta.sh/)
[![Deta](https://wweb.dev/weekly/content/100/deta.jpg)](https://www.deta.sh/)
A free and developer friendly cloud platform.

______

##[Dracula](https://draculatheme.com/)
[![Dracula](https://wweb.dev/weekly/content/100/dracula.jpg)](https://draculatheme.com/)
A dark color scheme for 227+ code editors and terminal emulators.

______

##[Web Browser Engineering](https://browser.engineering/)
[![Web Browser Engineering](https://wweb.dev/weekly/content/100/web-browser.jpg)](https://browser.engineering/)
A book that explains how to build a basic but complete web browser.

______

##[ SuperSEO Tips](https://superseo.tips/)
[![ SuperSEO Tips](https://wweb.dev/weekly/content/100/superseotips.jpg)](https://superseo.tips/)
SEO Tips that will help you rank higher and drive more organic traffic.

______

##[Defensive CSS](https://ishadeed.com/article/defensive-css/)
[![Defensive CSS](https://wweb.dev/weekly/content/100/css.jpg)](https://ishadeed.com/article/defensive-css/)
A list of defensive CSS techniques to avoid potential future issues.

______

##[uBlacklist](https://github.com/iorate/uBlacklist)
[![uBlacklist](https://wweb.dev/weekly/content/100/uBlacklist.jpg)](https://github.com/iorate/uBlacklist)
A browser extension prevents blacklisted sites from appearing in Google search results.

______

##[ffflux](https://fffuel.co/ffflux/)
[![ffflux](https://wweb.dev/weekly/content/100/ffflux.jpg)](https://fffuel.co/ffflux/)
A SVG generator for fluid gradient backgrounds.

______

##[Remix](https://remix.run/)
[![Remix](https://wweb.dev/weekly/content/100/remix.jpg)](https://remix.run/)
A framework for building better websites using modern web standards and best practices.

______

##[The 2021 Web Almanac](https://almanac.httparchive.org/en/2021/)
[![The 2021 Web Almanac](https://wweb.dev/weekly/content/100/almanac.jpg)](https://almanac.httparchive.org/en/2021/)
HTTP Archive’s annual state of the web report.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
what algorithm do you use to store your passwords?
Published: 2021-12-15 06:48:38

Yes, technically, you should be using Argon2 or Bcrypt or PBKDF2.

Argon2 is actually really secure. 
> ​Argon2 is modern ASIC-resistant and GPU-resistant secure key derivation function. It has better password cracking resistance (when configured correctly) than PBKDF2, Bcrypt and Scrypt (for similar configuration parameters for CPU and RAM usage).


If anyone here uses md5, sha512, sha256, or any weird hashing algorithms, I'll be upset.


This was me when i started PHP:

```php
$password = md5(md5(md5(md5($_GET['password']))));
```

The correct way: 
```php
$password = password_hash($_POST["password"], PASSWORD_ARGON2I);
```
Simple loader with CSS and HTML
Tags: html, css
Published: 2021-12-15 06:23:19

Here is a simple loader.

**HTML**
```
<div class="center">
  <div class="loader1">.</div>
  <div class="loader2">.</div>
</div>
```
**CSS**
```
.center {
  display: grid;
  place-items: center;
  height: 90vh;
  font-size: 7rem;
  color: #acf;
}

.loader1 {
  position: absolute;
  animation: motion 1s linear infinite;
}

.loader2 {
  position: absolute;
  animation: motion 1.5s linear infinite;
}

@keyframes motion{
  0%   {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}
```
also you can see at [codepen](https://codepen.io/mohsenet/pen/xxXgvEY)
Thank you your attention
Load component in a section with clicking on other buttons
Tags: react, javascript, beginners, webdev
Published: 2021-12-15 06:09:02

I'm beginner in ReactJS development.

I'm creating an app where one is login page and one is home page, and that works perfect, but in home page i've a list of buttons at left side and clicking on which i want to render component attached to that button at center. But not getting how to do it. So can anyone please help!!!
Adding a launch screen to an iOS app
Tags: apple, swift, reactnative, ios
Published: 2021-12-15 05:29:06

Link to the story: https://levelup.gitconnected.com/adding-a-launch-screen-to-an-ios-app-ac197075b25b

Get the basic app: https://github.com/mmafrar/swift-ios-wkwebview-demo

This tutorial shows how to add a launch screen using Xcode for an iOS app. In order to get started with this video you need to have an app, if you don't have one clone the app from GitHub repository in the description.

Cover Image: Photo by [CoinView App](https://unsplash.com/@coinviewapp) on [Unsplash](https://unsplash.com)
data-analytics enthusiast.
Tags: beginners, python, data, analytics
Published: 2021-12-15 04:56:38

Hello,
I am Mayowa. I am new here and I really want to be active.

I am a graduate of Mathematics who has passion for Data Analytics.
I would really love to have friends who would walk with me through the journey of data Analytics.

I also would appreciate mentorship and guide needed to make this journey easy.

I am happy to be here.😊
Mapquest driving directions

Tags: mobile
Published: 2021-12-15 04:11:38

**The  [mapquest driving directions](https://mapdrivingdirections.io) is a free tool that will provide you with correct routing while traveling from one city to another.**

Your can use mapquest directions to identify an address, a site of interest, reverse search for GPS coordinates, explore our surroundings, or simply surf and enjoy the view from a satellite. 

However, when traveling, trip planners are also useful tools for avoiding mishaps and traffic congestion.

The folding maps are nearly extinct nowadays; the online routing tool mapdrivingdirections.io, which is available for free in more than 220 countries worldwide, makes it quick, convenient, and environmentally friendly to receive driving directions.

You want to find the fastest way from Texas to Chicago or 
What is the best driving route from Dallas to Chicago? or
Houston to Chicago drive - plan a road trip. Just visit: https://mapdrivingdirections.io/
10 reasons you MUST have a RDP VPS
Tags: server, programming, productivity, testing
Published: 2021-12-15 04:08:29

RDP VPS is a service that allows you to connect from a remote place to your Windows VPS system and take full control of that virtual machine.

VPS is a server on its own while having a dedicated IP and administrator access. But Remote Desktop Protocol (RDP) is a Microsoft protocol designed to facilitate application, data transfer, security and encryption between client users, devices and a virtual network server.

**In a simple language**, it allows you to access a virtual private server with GUI from any corner of the world.

The RDP technology now enables global businesses across the world to access shared applications easily and securely without necessarily hiring the service of an IT specialist. 

![Remote Desktop VPS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndp5lf49i1ml4rfnswhx.png)

## Why use Remote Desktop Protocol VPS?

The major advantages of Remote Desktop Service are

### Secure Connection

RDP allows for safe and secure access to files and documents. 

All connections to your remote desktop are encrypted which ensures that your data are safe and secure. 

Therefore, there is no fear of losing any data through physical or cyber theft.


### Freedom to Work from Anywhere:

The RDP gives you the freedom to work from almost everywhere in as much as you have a computer with an internet connection. You can work from anywhere and at any time.

### Cost Effective

With RDP, you no longer need to purchase licenses for multiple computers. 

All connected computers and remotely access and make use of single software on the host computer.
Of course, everything comes with its own downside.

## My personal fav VPS provider
I have been using [Veeble](https://www.veeble.org/vps/windows?r=1992) for long time and it's quite good. The customer care service, the dashboard and the panel are good. And mainly, the VPS they provide are smooth in performance, and extremely cost effective.
Cambiar el idioma de MagicaVoxel
Published: 2021-12-15 04:01:00

Por defecto la interfaz de MagicaVoxel por defecto esta en ingles para poder cambiar el idioma se debe ingresar al sitio oficial de MagicaVoxel (https://ephtracy.github.io/) ,presionar en el menú superior MagicaVoxel y el botón Language:

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

Se abrirá un repositorio en el cual tendrás que buscar la carpeta del idioma que quieras cambiar , en este caso el idioma es en español ,seleccionamos la carpeta Spanish

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

En esa carpeta hay un archivo llamado dict.txt ,le damos click y podremos ver su contenido ,copiamos el contenido del archivo

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

Ahora hay que dirigirse a la carpeta donde este descargado Magicavoxel y accedemos a la carpeta config ,dentro de esta carpeta hay un archivo dict.txt ,lo abrimos y reemplazamos su contenido con el que copiamos previamente. Al abrir de nuevo MagicaVoxel estará en español.

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