teleren/devto huggingface dataset:
JavaScript Hoisting for beginners
Tags: javascript, node, beginners, tutorial
Published: 2020-01-03 07:17:02

Hoisting might be difficult for you to understand as a JavaScript beginner. Let me simplify that for you!

In simple words, Hoisting is the default behavior of JavaScript of moving variables *declarations* at the top of script or function.

**Note:** JavaScript only hoists the variable declarations at the top, not the initialized variables. It will be clear once we go through examples.

**Important:** JavaScript hoisting only works with variables declared with *var* keyword not *let/const* keywords.

Let's make it clear by examples.

1) Hoisting of variable declarations:

![Example 1](https://thepracticaldev.s3.amazonaws.com/i/bouwndsd0j0c9r67hxam.jpg)

Output:
![Output 1](https://thepracticaldev.s3.amazonaws.com/i/8kcbnrb8x6x7o4oktj3n.jpg)

Look at the above example, the output produced because JavaScript hoists the variable declaration at line 16 to the top of the script. So if you try by putting that declaration of line 16 to line 11, it will produce the same output.

2) Hoisting of variable initializations:

![Example 2](https://thepracticaldev.s3.amazonaws.com/i/mb3qpam5kia5gdms9e92.jpg)

Output:
![Output 2](https://thepracticaldev.s3.amazonaws.com/i/x3f4szkrdq09moc2mmu4.jpg)

As stated in the above note, JavaScript will not hoist variable initializations. So in the output, it gives undefined at line 12 because at line 14 I have initialized variable *x* with value *5* not just declared. 

you might have a question that why *x* is *undefined* instead of giving me an error. look at the below snippet.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/lwc8wxg1gdynmpu9t12b.jpg)

Behind the scene, JavaScript will make the code like the above snippet by hoisting declaration of variable x. That's why it will give the value of *x* *undefined* instead of an error. 

Now I hope, that note makes sense that JavaScript only hoists declarations not the initializations of variables.

Hoisting is the default behavior that might cause unexpected results. And it would be very hard to find this kind of problem. So to avoid this follow below rules:

- Always use new ways of declaring and initializing variables using *let/const* keywords.
- Always declare variables at the top of scope (Global or Function or block Scopes).
- If you really want to use *var* keyword enable *strict mode* in the script. You can refer to this article about *strict mode* in JavaScript: https://www.w3schools.com/js/js_strict.asp

Here Ends, I hope Hoisting makes sense to you. Also, comment down below your thoughts on it. 

Good Luck!
React Native Web Vs React – A Comparison Guide For 2020
Tags: react, reactnative
Published: 2020-01-03 06:47:11

Often many of you are wondering isn’t React already existing for many years now and what is the point of the react-native web? Also, some people are thinking are both React native web and React the same thing?

Let’s check this comparison guide for 2020 for <a href="https://codersera.com/blog/react-native-web-vs-react-a-comparison-guide-for-2020/">React native web and React</a> and find out how “React-native for web” makes it possible to run React native components and <a href="https://codersera.com/blog/learn-api-inside-out/">APIs</a> on the web using React DOM.

It is as simple as that. So, if you have an app and you want to build a web version of it, you should definitely learn <a href="https://codersera.com/blog/react-native-web/">React Native Web.</a>

React Native Web Vs React
React web came before react native and much before react native for web.

Since react used virtual dom concept and there was a code conversion from jsx to html, developers thought of using the same concept for the apps, i.e. Write jsx and convert the code into java and objective c under the hood. And that’s how react native was born.

Also, developers thought of simplifying the code writing process by writing one code instead of two codebases. This way you have to write just one code and let it get converted into html, java, and objective c under the hood. And that’s how React native for web was born.

<B>Is React Obsolete now or can React Native Web And React Together?</B>


Although react native web is a great way to build your website, but I’d say use it only when you have plans to build both web and app versions together, or if you already have an app in react-native and are planning to launch the web version.

But, If you are looking to build only the website, then React is the way to go.
[VIDEO] Getting your Swift API interacting with a MySQL database 💾 (Swift 5.1/Vapor 3)
Tags: thetealpickle, backend, vapor, swift
Published: 2020-01-03 06:45:02

---
title: [VIDEO] Getting your Swift API interacting with a MySQL database 💾 (Swift 5.1/Vapor 3)
published: true
description: 
tags: #thetealpickle #backend #vapor #swift
cover_image: https://thepracticaldev.s3.amazonaws.com/i/la5xro1q8upzfaocak6d.PNG
---

HELLO INTERNET. Continuing our Swift backend takeover 😬 by configuring our API with a popular, powerful database MySQL 🖥

{% youtube vFosIpeUkbU %}


⚡️ Getting our database configured, let's get it! 💪🏾
Check out the other videos in the series! 📺

 
<b>Stay connected with me on the internet @thetealpickle, leave a response or send me a tweet on twitter. Dont forget to share the ❤️<br>
Namaste. Jessica 🥔
</b>
I Built a referral laravel package
Tags: laravel, php, microservices
Published: 2020-01-03 06:44:23

Hello All, this is my first article but bear with me as I am not a pro yet in writing especially technical documentation.

Recently at my work, I encountered a task to create a referral system to be used inside a laravel application we are developing for a client, and I thought hmmm? is a referral system a unique thing? of cause it is....! will I need this functionality in other projects or it may help someone else? after I concluded that this might be someone interested in then I created the package for it.

I wanted something that you can install like ``composer require yegobox/referral`` and be good to go! the package comes with its default layout that you can place anywhere in your app to get a referral button and a dashboard layout to show how much you earned using your referral code.

the package has two referral strategy and you can customize it from config file which strategy you want to use within your app.

I hope my first article as not as boring as it sounds, please give me feedback.

if you are interested in contributing to project please head to https://github.com/yegobox/referral your contribution is welcomed.
zerolog と lumberjack と io.MultiWriter
Tags: go
Published: 2020-01-03 05:31:19

最近 Go で小さなミドルウェアと小さなウェブアプリを書いています。その際に欲しくなるのがログ出力の仕組みとログローテーションの仕組みです。

## ログライブラリに対する要望

- ログ出力は JSON できること
- JSON 出力の場合はログレベルを指定しないでできること
- 独自フォーマットにも対応していること

## ログローテーションライブラリに対する要望

- 組み込みが簡単であること

## zerolog

[rs/zerolog: Zero Allocation JSON Logger](https://github.com/rs/zerolog)

性能は特に求めていないのですが、一通り欲しかった機能があったので zerolog を採用しました。

### 良いところ

- logger.Log() でログレベルなしで出力できる
- logger.Err(err) と err がきれいに出力できる
- logger.Str("abc", xyz).Int("123", 234) とわかりやすく型付きでログを定義できる
- zerolog.ConsoleWriter を使うことで独自フォーマットを定義できる
- タイムフォーマットが気軽に利用可能
- UTC 出力にしようと思った時、簡単にできた

### 良くないところ

- JSON ベースなので仕方ないが key=value の順番指定ができない

## lumberjack

[natefinch/lumberjack: lumberjack is a log rolling package for Go](https://github.com/natefinch/lumberjack)

### 良いところ

- 簡単に組み込める

### 悪いところ

- 特になし

## 使ってみる

stdout と file 両方に出力するように、 MultiWriter を使っています。

[io \- The Go Programming Language](https://golang.org/pkg/io/#MultiWriter)

```go
package main

import (
	"io"
	"os"
	"time"

	"github.com/rs/zerolog"
	"gopkg.in/natefinch/lumberjack.v2"
)

func main() {
	zerolog.TimeFieldFormat = time.RFC3339Nano

	writer := &lumberjack.Logger{
		Filename: "test.log",
		// メガバイト
		MaxSize:    10,
		MaxBackups: 5,
		// 日
		MaxAge: 1,
		// デフォルトは無効
		Compress: true,
	}

	// ここで stdout とファイルの両方に書き出すようにする
	writers := io.MultiWriter(os.Stdout, writer)
	log := zerolog.New(writers).With().Timestamp().Logger()

	log.Log().
		Int("baz", 123).
		Msg("hello world")
}
```
Exploring NestJS Workspace
Tags: javascript, typescript
Published: 2020-01-03 05:26:51


In the previous article, we saw why and how to use NestJS, in this article we will go through the NestJS workspace.

## NestJS Workspace
[NestJS](https://nestjs.com/) supports 2 modes:
* Standard Mode
* monorepo mode

## Standard Mode
When we create a new Application using nest new <app-name> we are using standard mode. In standard mode Typescript's `tsc` will be used as the compiler. Below is how our App looks like in Standard Mode.

![](https://thepracticaldev.s3.amazonaws.com/i/0vmm7pw744nma0d42pnz.JPG)

## monorepo mode
A monorepo mode is where we have more than one application, generally, it's one App and one Library, we already have App, let's add a Library by using the below command. It will add a new Library project.

```shell
nest generate lib shoppingLib
```

Now as we are in monorepo mode, rather than `tsc` webpack will be used as a build tool. You can open the nest-cli.json and notice below lines of code being added. `compilerOptions` has `webpack` value to true.

```json
{
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "projects": {
    "shopping-lib": {
      "type": "library",
      "root": "libs/shopping-lib",
      "entryFile": "index",
      "sourceRoot": "libs/shopping-lib/src",
      "compilerOptions": {
        "tsConfigPath": "libs/shopping-lib/tsconfig.lib.json"
      }
    }
  },
  "compilerOptions": {
    "webpack": true
  }
}
```
And After adding a Library the App structure will look like below
![](https://thepracticaldev.s3.amazonaws.com/i/4yxnefy01itvt4besuat.JPG)

Let's go through some important files:
tsconfig.json: The configuration file to be used while running tsc to transpile your files.
* nest-cli.json: The Nest CLI config file, has a list of projects when we are in monorepo mode, and defines which build tool we are using webpack in monorepo and by default its tsc .
* main.ts: This is the entry file for our NestJS application and has bootstrap() function to bootstrap our app, by default server runs on Port 3000, you can change it and while using on production we can use an environment variable.
* app.module.ts: This is our root module, which has registered all modules, controllers, services.
* app.controller.ts: Our application should have at least one controller defined and this is our default controller.
* app.service.ts: We can have multiple services in our application this is a sample service added as a part of the workspace, this is optional.
* Libraries: Libraries can have reusable code like service, pipes, guards or interceptors.

## Tool for FullStack App with NestJS
If you are building FullStack Application with Angular/ReactJS and want to use NestJS as a backend you should consider Nx Dev Tools which provides a lot of features. 

# Conclusion
We learned about the NestJS workspace and 2 modes which are available and how they differ, and how we can convert our workspace to monorepo mode. We also saw different files are which important and why they are useful. In the next post, we will discuss Controllers and how we can create and configure endpoints.
#Beginner "How To's" written by Beginners? 
Tags: opinion
Published: 2020-01-03 05:25:55

I'm fairly new to reading dev.to articles and I'm seeing something often that is kind of strange and I'm curious to know feedback from people of varying experience levels.

I have 7 years of professional dev experience and was a casual coder before that. I am "self taught" which really means I had a lot of generous mentors and 
other people that I learned from. I mention this info because it will be relevant to the question.

So what are the thoughts about #Beginners articles that are clearly written by a beginner? I'm talking about the ones that as you read the article you pick up on wrong terminology, odd or wrong syntax, etc. that just give that beginneresque feel. Now listen, I have always stuck to the saying "never think you are the smartest one in the room because the moment that you do, you have just become the dumbest one." so with that said, I think there is some grey area where you might be able to tell the different experience levels in the room but as we know experience doesn't equate to intelligence directly. 

So, the problem I see with "beginners" writing How To's or Introduction to ... is that there really isn't anything that tells me whether or not I'm learning the right way to do something which comes from experience from seeing many different ways of doing X thing. Obviously I'm reading the article because X thing is new to me and I want to start at the beginning but I don't want to waste valuable time learning the wrong way or feeling like the person writing it barely has any idea based on how they write about programming.

I really wish there was some badge or area next to the author's name that said what their experience level is or how many years they have been programming or something. Honestly I know it sounds bad but I don't want to read an article where I wanted to learn something and feel like I came out of it needing to teach the author about programming fundamentals that are missing. 

I know I can learn tons from beginners and beginners can have good ideas and I still consider myself somewhat of a beginner in certain areas but the difference between a good idea and executing on the good idea is the person's level of experience with programming fundamentals and the syntax of the given language or framework or whatever the topic is.

I also understand and still experience that happiness when you figure out something new and you want to tell people about it, I get it, they want to teach everyone what they themselves just learned as a beginner but I'm not sure they should be "teaching" without disclosing or somewhere identifying their experience level with the given subject. I know I personally would be skipping articles where the person's years of experience or experience level were below a threshold of 2 years or intermediate just for example but that's because I don't have the time to spend reading articles just to feel like my time was wasted and I still don't know whether what I learned was correct or not. 

There is a lot of grey area on this one and I'm conflicted in certain ways. What are your thoughts?
Show DEV: Hacker News “Add to Homescreen” Web App
Tags: showdev
Published: 2020-01-03 05:07:00

---
title: Show DEV: Hacker News “Add to Homescreen” Web App
published: true
description:
tags: #showdev
---

https://hn-pwa-1.firebaseapp.com/

Killer features:

* It shows the top comment
* Dark mode! Or light mode! Depending on your system settings.

If you’re on an iPhone, add it to your home screen. It will open in its own window, not in Safari.

I was able to pull this off easily by adding the `apple-mobile-web-app-capable` meta tag.

This is what I was able to do in 24 hours. I’ll be working to make it an installable app soon.
Jan. 3, 2020: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-01-03 05:00:17

It's that time of the week again for the first time this year. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

![A hamster taking notes](https://media.giphy.com/media/tHufwMDTUi20E/giphy.gif)

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/jess/what-was-your-win-this-week-3gjl %}

![A contestant excited after winning on Wheel of Fortune](https://media.giphy.com/media/3ohhwtf6F4tpnQ2HpS/giphy.gif)

P.S. If you're interested in checking out last year's batch, check out the [2019 series](https://dev.to/nickytonline/dec-27-2019-what-did-you-learn-this-week-2alo).

{% link https://dev.to/jess/what-was-your-win-this-past-week-4ac4 %}
Run Fast Android Emulators with Intel HAXM
Tags: xamarin, android
Published: 2020-01-03 04:39:43

{% youtube 7I4upqY0H4M %}

Now you can accelerate Android Emulator in Visual Studio using Intel Hardware Acceleration Execution Manager for x86 images!

Steps to follow:

1. Open CMD as administrator
2. Disable Hyper-V by entering “bcdedit /set hypervisorlaunchtype off”
3. Restart your PC
4. Install Intel HAXM from Visual Studio Installer or manually from [here](https://github.com/intel/haxm/releases) 
5. After install, run any Xamarin Android project on x86 based emulator. You will see how fast the emulator will load because now it’s running with Intel HAXM.

###### Note: ***Intel HAXM only work with Intel CPU that supports Intel VT-x.***

[Does My Processor Support Intel® Virtualization Technology?](https://www.intel.com/content/www/us/en/support/articles/000005486/processors.html) 

[Visit Full Guide](https://docs.microsoft.com/en-us/xamarin/android/get-started/installation/android-emulator/hardware-acceleration?pivots=windows#accelerating-with-haxm) 

*****
###### **Keep learning and Enjoy!**
Intro to Mobile App Development Lifecycle
Tags: mobiledevelopment, xamarin
Published: 2020-01-03 04:33:13

This is the first post of my blog LetsXamarin and here we will be learning about Xamarin and the technologies related to it. As we move forward towards learning Xamarin I would like to mention that I will keep my posts as short and minimal as possible so that we all can learn and understand easily. So we will start with the Introduction of Mobile Development Lifecycle or the steps to follow to develop a Mobile application:

1. **Idea**
2. **Design (Wireframe, UX, UI, Prototypes)**
3. **Development**
4. **QA testing and Bug fixes**
5. **Deployment**
6. **Maintenance**

Remember, there are no hard and fast rules to follow these steps in order and usually depend on the SDLC methodology that you or your team is using. Some of the most used methodologies are:


- **Agile**
- **Lean**
- **Waterfall**
- **Iterative**
- **Spiral**
- **DevOps**

You can learn more about the [Software development Lifecycle](https://docs.microsoft.com/en-us/xamarin/cross-platform/get-started/introduction-to-mobile-sdlc) in detail. Also, learn about some commonly used [SDLC Methodologies](https://www.roberthalf.com/blog/salaries-and-skills/6-basic-sdlc-methodologies-which-one-is-best).

*****
###### **Keep learning and Enjoy!**
perfect is the enemy
Tags: advice, entrepreneur
Published: 2020-01-03 04:21:33

---
title: perfect is the enemy
published: true
description: 
tags: advice,entrepreneur
---

I realized that while filling out my tags I spell horribly. Good thing the computer can do better than me.

Perfect is the enemy of good.

That is a great quote. If you are starting a business or releasing a project or finishing a game you should repeat it until you know it by heart.

Any time you think I just need to fix this one more thing. Read that quote. And then release whatever it was anyway. Release things that are good. 

Make them perfect later.

No one can see non-released products... but they can see good enough products. Finish it enough... release it then fix it. Then do it all again.
Angular 8 call component function on button click
Published: 2020-01-03 09:36:23

---
title: Angular 8 call component function on button click
published: true
date: 2020-01-03 03:46:58 UTC
tags: 
canonical_url: https://www.itsolutionstuff.com/post/call-a-function-on-click-event-in-angular-8example.html
---

This article will provide example of how to call component function on button click event in angular 8 application i want to show you angular 8 button click event and call a function example its very simple example of click event call function angular 8If you are new and very beginner with ang
The Misconception of Functional Programming in JavaScript
Tags: javascript, react, functional
Published: 2020-01-03 02:51:59


The term functional programming gets thrown about when developers talk about it in the context of JavaScript and it seems to a term that is very much understood by junior developers. This article is a breakdown of the term itself, how it’s used in JavaScript and how it’s being applied in popular frameworks such as React.

Functional programming, the term has been around since the 1930s and has its origins in lambda calculus. That specific term, “functional programming”, refers to a programming paradigm (classification of programming languages regarding their features and architecture) that refers to the consistent evaluation of mathematical computational models and functions that avoid changing state and mutable data.

Now while JavaScript can be classified as a functional programming language and has the capabilities to be written in that specific structure it supports multiple different programming paradigms and is classified under several. With the introduction of classes in ECMAScript 2015 more individuals start debating overusing object-oriented programming vs functional programming. Now while we have the syntactic sugar of classes it does NOT introduce any new object-oriented inheritance models to JavaScript. Classes are just a thin layer of paint on top of JavaScript’s prototype inheritance. 

In React you can have functional components and class components. Before the introduction of React hooks, only class components had state and functional (stateless) components that could be classified as being written in a functional programming model. Now with hooks, you can use state in functional components and it’s up in the air if you could consider them written in a functional programming architecture now that state is being used in them. The whole point of the functional programming paradigm is avoiding changing state while evaluating functions, with the addition of hooks letting you change state it is void of that.