teleren/devto huggingface dataset:
The globalThis keyword in JavaScript
Tags: javascript
Published: 2021-01-20 00:00:00

---
  title: The globalThis keyword in JavaScript
  published: true
  tags: JavaScript
  date: Wed Jan 20 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/globalthis-keyword-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-f142ba25d1988226239ff44b2402f48a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/globalthis-keyword-javascript)
  
If you have worked with JavaScript in different environments such as in browsers, Node.js, or web workers, you might have the headache of accessing the global object.

This is because in different environments the global object is different.

For example, in browsers, the global object is the `window` object, but in Node.js the global object is the `global` object, and in web workers it the `self` object.

This is a pure headache since we had to check for all the possible variations in different environments to access the global object.

But no more headaches. 🤯

The ES2020 `globalThis` keyword has come to the rescue. 🚀

Now you can use the `globalThis` keyword in javascript and it automatically points us to the environment's global object.

```js
// Get the global object in
// different JavaScript environments 🦄
console.log(globalThis);
```

So in browsers accessing the `globalThis` will point to the `window` object, in Node.js it will point to `global` object and in web workers, it will point to the `self` object.

- Run the above code in Node.js using [repl.it](https://repl.it/@melvin2016/globalthis-keyword-nodejs#index.js) to see the global object in Node.js.
- And also run the above code in Browser using [JSBin](https://jsbin.com/napicuyuvi/2/edit?js,console) to see the global object in the browser.

### Feel free to share if you found this useful 😃.

---
Generating SSH Certificate in Windows
Tags: ssh, sftp, openssh, putty
Published: 2021-01-19 23:54:27

## Software Requirements

Download and install [Open SSL](https://www.openssl.org) 

Download and install [Putty Gen](https://www.puttygen.com/download-putty)

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

## Configuration

Find the OpenSSL installation folder such as:
C:\Program Files\OpenSSL-Win64\bin\

Create a folder named 'cert' inside bin folder.

Open the command prompt as administrator and navigate to the OpenSSL bin folder

```
cd C:\Program Files\OpenSSL-Win64\bin\
```

Generate the private key and the CRT in the cert folder:

```
openssl req -x509 -sha256 -nodes -days 365 -newkey rsa:2048 -keyout cert/privateKey-example.key -out cert/certificate-example.crt
```

Generate the PFX certificate:

```
openssl pkcs12 -export -out cert/certificate-example.pfx -inkey cert/privateKey-example.key -in cert/certificate-example.crt
```

At this poin 3 files should be generated in the cert folder:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2rx0sg6713ezwi37sfol.png)

Generate a PKCS#1 Private key
```
openssl pkcs12 -in cert/certificate-example.pfx -nocerts -out cert/privateKey-example.pem
```

Decrypt the private key to generate the ppk

```
openssl rsa -in cert/privateKey-example.pem -out cert/teste-privateKey-example-decrypted_key.pem
```

Execute the Putty Gen program and load the decrypted private key
Save the new private and public key as ppk.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4lz65oiy9rntmpqpeagc.png)


At this point the public and private key could be used for SFTP authentication.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lhgsp1p6gpaxw2rycvpc.png)
Deploy websites via git without conflicting with ftp. how to do? 
Tags: help, discuss, git, ftp
Published: 2021-01-19 23:26:50

![Hello there!](https://dev-to-uploads.s3.amazonaws.com/i/pm5k94slajguwcfxavc0.gif)
premise, I develop sites with the Kohana php framework (it was used before my hiring in the company, I hate it!) and from the next I will start using Laravel. And I would like to use git and delete filezilla from my workflow.

I finally managed to get the choice on the framework to use, and I was given the freedom to use other technologies, as long as they don't alter too much the usual workflow we have had up to now.

So we would have this situation (i tried to show it in the cover image)
* I work in the office with a macbook, at home with a desktop with windows 10.
* My boss is not a developer, but he is the html and css designer. he needs to keep uploading and downloading individual site files via ftp with filezilla.
* We have our own server running with ubuntu

I would like to use git for the deployment, but need it not to conflict with my boss's filezilla uploads.
is it possible to do this with git? could there be conflicts? do you have alternative solutions to recommend? or advice on how to set up git for my needs? I took a first look at git-ftp, can it be a viable solution for me?
thank you all for your attention :)

PS: sorry if my english is not perfect. I'm italian and english is not my native language
C# value type variables and reference type variables (Question)
Tags: csharp
Published: 2021-01-19 23:25:03



Question: why is the new operator not used when initializing predefined class type variables(such a variable of type string) or predefined struct type variables(such as a variable of type int)?
For example:
string name = "Richard";
int number = 36;

The new operator was never used when assigning such values to variables name and number. But are such values still considered instances of the respective predefined type.

Reason why I am asking this is because if I were to define a custom class type(say custom class type Person) or custom struct type(say custom struct type Dog). And if I were to declare a variable of such custom class type and such custom struct type, the value assigned to such variables would be an instance of their types created via the use of the new operator.
For example:
Person person1 = new Person( );
Dog dog1 = new Dog( );

Thus, is string type value(string literal) Richard an instance of predefined class type String(alias: string) just like how new Person( ) is an instance of user-defined class type Person?
And is in type value(integral literal) 24 an instance of predefined struct type Int32(alias: int) just like how new Dog( ) is an instance of user-defined struct type Dog?

Leave you comments down below answer the above.
Day 290 : Thank God
Tags: hiphop, code, coding, lifelongdev
Published: 2021-01-19 23:13:24

_liner notes_:
- Saturday : Wooo... that was a while ago. Don't remember what I did aside from planning out the framework I want to use to build out the inside of the van, but I did do the radio show! haha The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of Martin Luther King wearing a MF DOOM mask in front of a crowd of people in front of the Lincoln Monument in Washington, DC](https://dev-to-uploads.s3.amazonaws.com/i/sq3pgtp8fpoe97ja5j29.jpg)

- Sunday : Pretty much spent the day working on the post radio show promo work. Did some coding. Worked on a presentation I'll be giving soon. Also reviewed the materials list for the pieces to build out the van. Wanted to make sure I got all the measurements right because the parts can get pretty expensive.

- Monday : It was Dr. Martin Luther King, Jr. Day. It's a National holiday in the States so I had the day off. I still did the weekly live stream I do at work. I figure that Dr. King and so many others fought and gave their lives so people like me could do what we love and I really like coding and doing the live stream show. Thanks God for those folks that came before me. So to pay my respects, I took the day to do what I love. Also, I put in the order for the parts to build out some of the van. Yup, it was pretty expensive, haha.

- Professional : Today was pretty busy. Had a couple of meetings through the day. Also jumped on a ticket and knocked it out so I could get it out of the way. Also helped out with a Community Slack question about React. Spent the rest of the time working on my presentation slides. I got asked to do another talk in February. I've been wanting to do more talks this year so I'm going to take any opportunities I can.

- Personal : Also, on Monday, I attended an Orlando Developers meetup online. It was cool to be at a meetup where I recognized some faces.

![The orange mountains of Buckskin Gulch, UT, USA in the background with the plains in the foreground under a blue sky with large clouds](https://dev-to-uploads.s3.amazonaws.com/i/x4rqihkewockyno7dis9.jpg)

So I noticed that since events have been online only, the events section of my personal site hasn't been working properly. The map wasn't showing up which makes sense but it was also causing the click to the next and previous events not to work. Took some time to dive in and get it fixed. Going to work some more on my presentation slides and maybe watch an anime. There's also a Texas VueJS meetup happening tonight. I'm going to tune in. That's one cool thing about doing the events online is seeing what's happening in other programming scenes. Can't wait till we can travel safely again. 

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube JK3CkB5Tbps %}
quick internet search in terminal
Tags: lynx, terminal, linux, archlinux
Published: 2021-01-19 23:10:30

Do you ever need to do a quick search but don't want to open a browser just to find something and you already on a terminal?

The solution is quite easy actually. Just download lynx browser which is a CLI browser in your terminal.

in your shell (I use zsh) and I just put this code in there
```
urlencode(){
  declare str="$*"
  declare encoded=""
  declare i c x
  for ((i=0; i<${#str}; i++ )); do
    c=${str:$i:1}
    case "$c" in
      [-_.~a-zA-Z0-9] ) x="$c" ;;
      * ) printf -v x '%%%02x' "'$c";;
    esac
    encoded+="$x"
  done
  echo "$encoded"
}

duck(){
  declare url=$(urlencode "$*")
  lynx "https://duckduckgo.com/lite?q=$url"
}

alias "?"=duck
```

now when I go in my terminal I just type 
```
? keywords
```

Enjoy!
Dica rápida: Maneiras de apresentar seu código
Tags: productivity, braziliandevs
Published: 2021-01-19 22:38:07

Utilizando redes sociais, você já deve ter se deparado com algumas imagens contendo código fonte, que parecem familiares, possuem formatação de sintáxe mas, não são screenshots de nenhum editor de código que você conheça.

![example](https://raw.githubusercontent.com/mesaquen/blogposts/master/06-code-presenting/example.jpeg)

Existem algumas ferramentas que permitem você gerar essas imagens de maneira simples e rápida.

1. [carbon.now.sh](https://carbon.now.sh/)
1. [codeimg.io](https://codeimg.io/)
1. [Rust playground](https://play.rust-lang.org/)
1. [Silicon](https://github.com/Aloxaf/silicon) (CLI)
1. [Polacode](https://github.com/octref/polacode) (Extenção VSCode)

Agora você já sabe. É só escolher uma das ferramentas e sair compartilhando seu código de uma maneira mais chamativa.
Understanding Rendering in Next.js
Tags: nextjs, react, javascript, performance
Published: 2021-01-19 22:32:49

Next.js is a React framework for developing single page Javascript applications. There are quite a lot of  benefits when it comes to choosing this framework, one of the highlights being how **incredibly performant** Next.js is. This is due to its Server Side Rendering (SSR).

# Understanding pre-rendering in Next.js

React uses client-side rendering by default, and the user is required to have JavaScript enabled on their browser.

With Next.js, HTML is generated for each page in advance, instead of having it all done by client-side JavaScript. _I must admit I initially found this odd not seeing any HTML files in my codebase!_

This results in better performance and a more indexable and crawlable website, essential for Search Engine Optimisation (SEO).  It pre-renders the application into static HTML, allowing the user to see the UI without having to run JavaScript. 

It also only loads the Javascript and CSS files that are needed for that specific page, which is called **automatic code splitting**. This gives the users a much faster experience with a nearly instant page load. Because there is less for the user’s browser to download, it increases performance.

As soon as a page is loaded by the browser, the JavaScript will run on the client-side to give it full interactivity. This process is called hydration.

# Two forms of pre-rendering
In fact, Next.js gives us two methods of pre-rendering:
**Static Generation** and **Server-side Rendering**. The difference lies in when the HTML is generated for a page.

With Static Generation the HTML is generated at build time. As it's been pre-rendered, the HTML is then reused on each request.

We also have the option of Server-side Rendering is the pre-rendering method that generates the HTML on each request.

This choice can be done on a per-page basis, meaning you can create a hydrid Next.js project by choosing which pages will use Static Generation and which ones will use Server-side rendering.

Although we have that option, Static Generation is the recommended method by Vercel since your page can be built once and served by CDN, resulting in a much faster experience. This would be the best option for when you have static content, as you won't have to wait for the server to render the page on every request.
Time to try HarperDB. $1000 Credit?
Published: 2021-01-19 22:23:25

Seems crazy to me but these coupon codes gave me a total of $1000 credit.
Guess it's time to build something...

Codes:
LAUNCHTOUR
codeSTACKr
TWEETHDB
SamHDB
FASTIFYEVENT
CASSIDY


I hope they work for everyone else.

https://studio.harperdb.io/sign-up
Layout with Flexbox - Codecademy PRO version
Tags: tutorial, webdev, css, beginners
Published: 2021-01-19 22:22:39

**TL;DR:** I completed a **Layout with Flexbox** course in **Getting More Advanced with Design** module on Codecademy. This is a part of the 🔗 [**Codecademy Web Development Career Path**](https://youtube.com/playlist?list=PL7K3igiHYVk1_ulFuHesiv7BP_ALn82o8) series.



You can find the video on YouTube below ⬇️
{% youtube V02liwZPI2g %}



*If you like the video, don't forget to smash that like icon* 👍 *and subscribe* ❤️*. It will help a lot! Thanks!* 🙏



⏱️ Chapters:
🔗 [0:00](https://www.youtube.com/watch?v=V02liwZPI2g) Intro
🔗 [0:30](https://www.youtube.com/watch?v=V02liwZPI2g&t=30s) What is Flexbox?
🔗 [3:50](https://www.youtube.com/watch?v=V02liwZPI2g&t=230s) display: flex
🔗 [6:12](https://www.youtube.com/watch?v=V02liwZPI2g&t=372s) inline-flex
🔗 [9:42](https://www.youtube.com/watch?v=V02liwZPI2g&t=582s) justify-content
🔗 [15:50](https://www.youtube.com/watch?v=V02liwZPI2g&t=950s) align-items
🔗 [22:27](https://www.youtube.com/watch?v=V02liwZPI2g&t=1347s) flex-grow
🔗 [28:16](https://www.youtube.com/watch?v=V02liwZPI2g&t=1696s) flex-shrink
🔗 [33:36](https://www.youtube.com/watch?v=V02liwZPI2g&t=2016s) flex-basis
🔗 [39:20](https://www.youtube.com/watch?v=V02liwZPI2g&t=2360s) flex
🔗 [47:17](https://www.youtube.com/watch?v=V02liwZPI2g&t=2837s) flex-wrap
🔗 [52:25](https://www.youtube.com/watch?v=V02liwZPI2g&t=3145s) Align-content
🔗 [59:05](https://www.youtube.com/watch?v=V02liwZPI2g&t=3545s) flex-direction
🔗 [1:05:28](https://www.youtube.com/watch?v=V02liwZPI2g&t=3928s) flex-flow
🔗 [1:07:31](https://www.youtube.com/watch?v=V02liwZPI2g&t=4051s) Nested Flexboxes
🔗 [1:11:51](https://www.youtube.com/watch?v=V02liwZPI2g&t=4311s) Review: Flexbox
🔗 [1:17:04](https://www.youtube.com/watch?v=V02liwZPI2g&t=4624s) Flexbox: To-Do App
🔗 [1:23:10](https://www.youtube.com/watch?v=V02liwZPI2g&t=4990s) Tea Cozy
🔗 [1:25:20](https://www.youtube.com/watch?v=V02liwZPI2g&t=5120s) Flexbox Quiz



📚 Materials/References:
🔗 [Layout with Flexbox cheatsheet](https://www.codecademy.com/learn/paths/web-development/tracks/getting-more-advanced-with-design/modules/layout-with-flexbox/cheatsheet)

Thanks for reading! I hope you find it useful.
Angular Splash Screen
Tags: angular, javascript, webdev
Published: 2021-01-19 22:20:02

When an Angular application first loads, visitors may see a blank white screen. Depending on the visitor’s network speed, that white screen could be there a little longer than expected. Let’s display something for the visitor indicating something is happening before they decide to leave!

## Splash Screen Image

Within the index.html file of your Angular application, you’ll see the app-root element. You can put anything you want inside that element and it will appear as the splash screen prior to the app loading! Don’t worry about removing it later. Angular will take care of that for you, removing any content inside of **app-root** after successfully loading the app.

```html
<app-root></app-root>
```

Let’s display an image that’s centered on the page and animates! Define an id called **splash** on the image, which will be used to help position and animate the image with CSS.

```html
<app-root>
  <img id="splash" src="./assets/pokeball.png">
</app-root>
```

## Splash Screen Image CSS

Create a keyframes animation called **spin** that will rotate from 0 to 359 degrees.

```css
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
```

The **splash** id uses the spin animation over a duration of 5 seconds and plays in an infinite loop with the same speed from start to finish. The image is positioned in the exact center of the page.

```css
#splash {
  animation: spin 5s infinite linear;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
```

The CSS can be placed within the **app-root** element as well.

```html
<app-root>
  <style>
    #splash {
      animation: spin 5s infinite linear;
      margin: auto;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
 
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(359deg);
      }
    }
  </style>
  <img id="splash" src="./assets/pokeball.png">
</app-root>
```

## Splash Screen

The splash screen can be tough to see if you have a very fast network. Luckily, browsers have some helpful developer tools that can help with that.

If you’re using Google Chrome, you can open the Developer Tools by right clicking anywhere on the page and choosing Inspect. Select the **Network** tab and change the **Throttling** option from Online to Slow 3G.

![Network Speed](https://dev-to-uploads.s3.amazonaws.com/i/00ydut6kacmlrjgu9lsr.png)

Refresh the page and it will reload but much slower than before. You can easily see the splash screen at that point!

To see a demo of a splash screen, visit our [Pokemon](https://nightwolf.dev/demos/pokemon) application and use the steps from above!

---
#### Visit our website at [https://nightwolf.dev](https://nightwolf.dev) and follow us on [Facebook](https://www.facebook.com/NightWolfDevelopment) and [Twitter](https://twitter.com/nightwolfdev)!
---
Create new laravel project via docker with one liner.
Tags: laravel, docker
Published: 2021-01-19 21:49:27

## Just run follow command.

```zsh
% docker run --rm -i -t -v $PWD:/app composer create-project --prefer-dist laravel/laravel (YOUR PROJECT NAME HERE)
```

- * `- i` and `-t` is not requirement, it's just a prettier.
- * Also `--rm` too, it's to remove unnecessary containers.

## Requirements

- Installed docker(ex. Docker desktop for mac, windows or just Docker for linux)

## What's doing this command?

1. Fetch composer(latest) image from docker hub.(https://hub.docker.com/_/composer)
2. Mount $PWD path of host to `/app` of container directory.
3. Run `create-project --prefer-dist laravel/laravel (YOUR PROJECT NAME HERE)` in fetched container.
4. Finally, you can see laravel project files in `(YOUR PROJECT NAME HERE)` directory.

## Why mount `/app` directory?

The `/app` directory is specified working directory, from composer image via https://github.com/composer/docker/blob/582c6f4e10b6b8fbf9bc1c5b02d6ec24694fe8d4/2.0/Dockerfile#L60.

So, if composer's Dockerfile updated, then we must change mount directory path.

## Specific version for laravel

If you want use specific version laravel, then you can use  "laravel/laravel=6.*" statement in your command.
Integrating CoreUI with Laravel 8
Published: 2021-01-19 21:49:06

[CoreUI](https://coreui.io/) is a free admin template built on top of Bootstrap 4. It's modern, beautiful and very clean. In this post, I'll show you how one can integrate & theme this amazing kit.
If you'd like to see it in action you can have a look at their [live demo](https://coreui.io/demo/free/3.4.0/).

Since this is just a tutorial, let's keep things simple and to the point. I'll list the steps here and if you'd like to take a look at a more structured way to do this, you can have a look at [my repo on GitHub](https://github.com/zaxwebs/ex-l8-coreui).

#Import CoreUI Package
Import the CoreUI package using NPM.
`npm install @coreui/coreui@ --save`

#Create a Layout with Starter Code
```html
<!doctype html>
<html lang="en">
 <head>
 <!-- Required meta tags -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- CoreUI CSS -->
 <link rel="stylesheet" href="https://unpkg.com/@coreui/coreui/dist/css/coreui.min.css" crossorigin="anonymous">

 <title>CoreUI</title>
 </head>
 <body class="c-app">

 <script src="https://unpkg.com/@coreui/coreui/dist/js/coreui.bundle.min.js"></script>
 </body>
</html>
```

#Setup SASS
Create `resources/scss/app.scss`.
```scss
// CoreUI
// - Variables
@import "./variables";
// - Main
@import "~@coreui/coreui/scss/coreui";
```
Create `resources/scss/_variables.scss`.
```scss
// CoreUI Variable Overrides
```
Update `webpack.mix.js`
```js
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/scss/app.scss', 'public/css', [
        //
    ]);
```
Compile to CSS
`npm run dev`

#Update Previously Created Template
```html
<!doctype html>
<html lang="en">
 <head>
 <!-- Required meta tags -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- CSS -->
 <link rel="stylesheet" href="{{ asset('css/app.css') }}">

 <title>@yield('title')</title>
 </head>
 <body class="c-app">
  @yield('content')
 <script src="https://unpkg.com/@coreui/coreui/dist/js/coreui.bundle.min.js"></script>
 </body>
</html>
```
#Theming
You can now update CoreUI variables by setting them in `resources/scss/_variables.scss` and get your admin template set as per your desired branding.

#That's All, Folks!
I hope this article helps people out there. Feel free to reach out in the comments about any concerns.

☕ [Buy me a Coffee?](https://www.buymeacoffee.com/zaxwebs)