teleren/devto huggingface dataset:
ES2020, and what it brings to the table.
Tags: javascript, webdev, beginners, programming
Published: 2022-01-07 09:17:29

##Here are 6 new JavaScript features that you should be using


###BigInt

Currently, the largest number you can store in an integer is `pow(2,53)-1`. 

Now you can even go beyond that.

But for this to work properly, you need to append `n` at the end of the integer.

The `n` denotes that this is a **BigInt** and should be treated differently.

![BIGINT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bq1pwrznzlsfqjx58s67.png)
 
###Dynamic Imports

This gives you the option to import JS files dynamically as modules that you import natively.

This feature will help you ship on-demand-request code, better known as code splitting, without the overhead of webpack or other module bundlers.
![DYNNAMIC IMPORTS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx1ltowrf0uk5kzciqi0.png)
 
###Nullish Coalescing

The symbol for Nullish Coalescing is `??`.

Nullish Coalescing gives you a chance to check for truly **nullish** values rather than **falsey** values.

You might ask what is the difference between these two.

In JavaScript, many values are **falsey**, like empty strings, the number `0`, `undefined`, `null`, `false`, `NaN`, and so on.

There may be times where you have to check whether the variable is **nullish**(*undefined* or *null*), but is okay to have empty strings or false values.

![Nullish Coalescing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldqcwhc1gr1hst5q6mmh.png)
 
###Optional Chaining

Optional Chaining syntax allows you to access *deeply nested objects* without worrying about the property being present or not.

If the value exists amazing!!

Otherwise, it will return `undefined`.

![Optional Chaining](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0khlrrhlav2m5tk8ar1i.png)
 
###Module Namespace Exports

It was already possible to import everything using the `*`. However, there was no symmetrical export syntax.

But now you can do that like this.

![Module Namespace Exports](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egfvt9e0tdvreu1jh64v.png)
 

###globalThis

You have different global object for different platforms, `window` for **browsers**, `global` for **node**, `self` for **web workers**.

But ES2020 brought **globalThis** which is considered as the global object no matter where you execute the code.

![globalThis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wzi919984o64ri6i400.png)
 

###TL;DR

- BigInt - play with very large integers, make sure you append `n` at the end of the integer.

- Dynamic Import - import files conditionally.

- Nullish Coalescing - Check for nullish values rather than falsey values.

- Optional Chaining - check for deep nested objects without worrying about undefined values.

- Module Namespace Exports - export everything using the * symbol

- globalThis - considered global object no matter where you code.



---

You have reached the end of the post. To find more interesting content regarding JavaScript, React, React Native make sure to follow me on [Twitter](https://twitter.com/grover_sumrit)
When the Sunwing plane party meets the WebDev world: Who is James (Kevin) Awad?
Tags: discuss, webdev, question
Published: 2022-01-08 00:17:58

---
title: When the Sunwing plane party meets the WebDev world: Who is James (Kevin) Awad?
published: true
description: The brain behind the infamous Sunwing plane party claims to made its fortune with fishy C++ tech  
tags: discuss, webdev, question
cover_image: https://www.ctvnews.ca/polopoly_fs/1.5730666.1641512450!/httpImage/image.jpg_gen/derivatives/landscape_960/image.jpg
---

The brain behind the infamous [Sunwing plane party]((https://www.reuters.com/world/americas/canada-asks-regulator-probe-maskless-party-airline-covid-cases-soar-2022-01-04/)) claims to made its fortune with fishy C++ tech.

Since I'm from Quebec, Canada - that news is all over the news(indeed), Twitter, Instagram and Reddit and I am trying to dig a little about [this individual and its dark fraud background](https://www.archyde.com/influencers-trip-find-out-who-is-the-organizer-james-williams-awad/).

Here's what bothers me (a lot):
> [James William Awad](https://twitter.com/111jameswilliam), 28, says he invented a new way to program "in C ++ without having to compile the website." He is said to have sold the license to "several national and international companies", which he refuses to name.

Source: [Himself](https://www.lapresse.ca/actualites/2022-01-07/fete-a-bord-d-un-avion-de-sunwing/l-organisateur-s-explique-sur-l-origine-de-sa-fortune.php) 

### The question
Is anybody have heard of him or used that C++ "marvel"?

Here's one of its tweet:
{% twitter 1438279450295214080 %}
JavaScript RPG Game Development | Episode 2: Map- and Character Creation
Tags: rpgjs, html, javascript
Published: 2022-01-08 23:39:58

---
title: JavaScript RPG Game Development | Episode 2: Map- and Character Creation
published: true
description: In this 2nd episode of our series I finally manage to create a custom spritesheet for building the map and characters of our game.
tags: rpgjs, html, javascript
canonical_url: https://www.timo-ernst.net/blog/2022/01/09/lets-code-a-final-fantasy-style-browser-game-with-rpg-js-map-and-character-creation-episode-2/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgiaqo6johfwahyvzhyl.jpg
---

In this 2nd episode of our series I finally manage to create a custom spritesheet for building the map and characters of our game. I struggled quite a lot as the documentation of rpg.js is not the best and some important information is lacking. So, if you're also running into problems getting your spritesheet into the game, try the video below :-)

This is the spritesheet I use: [Tiny 16 Basic](https://opengameart.org/content/tiny-16-basic)

Also, I have 2 questions for you:

1. What do you think about Rumi's proposal for the storyline in [episode 1](https://youtu.be/W4SVdtY6wZs) comments section of the video?
2. What do you think we should name the game?

{% youtube EzSPxNsx9C4 %}

## Links

- My source code: http://github.com/valnub/jrpg
- rpg.js http://rpgjs.dev
- Free 16x16px spriteset (maps + chars) https://opengameart.org/content/tiny-16-basic
- My Blog https://www.timo-ernst.net
- Twitter https://www.twitter.com/timo_ernst
New in CSS
Tags: css, webdev, design
Published: 2022-01-10 10:09:13

## Declare Variable

``` css
:root {
	--global--primary-color: #29313e;
}


a {
	color: var(--global--primary-color);
}

```

## @Supports
It allows you to do the same depending on what CSS properties and values the user browser supports.

```css
@supports (display: grid) {
	.main-content {
		display: grid;
	}
}
```
## content-visibility

It is a really cool new CSS feature to improve site performance. It basically works like lazy loading, only not for images but any HTML element. You can use it to keep any part of your site from loading until it becomes visible.

```css
.sec-viewport {
	content-visibility: auto;
}
```

## Scroll Snap
Scroll snapping gives you the option to lock the user’s viewport to a certain parts or element of your site.

```css
.container {
	scroll-snap-type: y mandatory;
}
```

## :is and :where

It allow you to reduce repetition in CSS markup by shortening lists of CSS selectors.

```css
/* Before */
.main a:hover,
.sidebar a:hover,
.site-footer a:hover {
	/* markup goes here */
}
```

```css
/* After */

:is(.main, .sidebar, .site-footer) a:hover {
	/* markup goes here */
}

:where(.main, .sidebar, .site-footer) a:hover {
	/* markup goes here */
}
```
Installing Pipx on Ubuntu
Tags: python, linux, cli
Published: 2022-01-10 14:56:00

---
canonical_url: https://waylonwalker.com/til/installing-pipx-on-ubuntu/
cover_image: https://images.waylonwalker.com/til/installing-pipx-on-ubuntu.png
published: true
tags:
- python
- linux
- cli
series: til
title: Installing Pipx on Ubuntu
---

I recently paired up with another dev running windows with Ubuntu running in wsl, and we had a bit of a stuggle to get our project off the ground because they were missing com system dependencies to get going.

## Straight in the terminal

Open up a terminal and get your required system dependencies using the apt package manager and the standard ubuntu repos.

``` bash
sudo apt update sudo apt upgrade sudo apt install \
      python3-dev \
      python3-pip \
      python3-venv \
      python3-virtualenv
pip install pipx
```

## Using an Ansible-Playbook

I like running things like this through an ansible-playbook as it give me some extra control and repeatability next time I have a new machine to setup.

``` yaml
- hosts: localhost
  gather_facts: true
  become: true
  become_user: "{{ lookup('env', 'USER') }}"

  pre_tasks:
    - name: update repositories
      apt: update_cache=yes
      become_user: root
      changed_when: False
  vars:
    user: "{{ ansible_user_id }}"
  tasks:
    - name: Install System Packages 1 (terminal)
      become_user: root
      apt:
        name:
          - build-essential
          - python3-dev
          - python3-pip
          - python3-venv
          - python3-virtualenv
    - name: check is pipx installed
      shell: command -v pipx
      register: pipx_exists
      ignore_errors: yes

    - name: pipx
      when: pipx_exists is failed
      pip:
        name: pipx
      tags:
        - pipx
```

## video clip

Here is a clip of me getting pipx running on ubuntu 21.10, and running a few of my favorite pipx commands.

<video autoplay="" controls="" loop="true" muted="" playsinline="" width="100%">
      <source src="https://images.waylonwalker.com/pipx-install-ubuntu.webm" type="video/webm">
      <source src="https://images.waylonwalker.com/pipx-install-ubuntu.mp4" type="video/mp4">
      Sorry, your browser doesn't support embedded videos.
</video>
Compilers, Direct coded scanner
Tags: beginners, programming, codenewbie
Published: 2022-01-11 00:02:23

As i mentioned in the previous posts, i like to learn new thing and share what i learned with others, so i can get feedbacks or at least understand what i learned more, by writing about it.

In a previous [post](https://dev.to/iwashiding/table-driven-scanners-40jd), i tried to explain what i have learned about the basics of a table driven scanner , and how can we generate a one easily after creating  a DFA which is going to be painful.

However, a table driven scanners has some downside like the cost of reading a character, and computing the next transition from the transition table, direct coded scanners handle this by simplifying the implementation of table look ups in both transitions and classifier table, and also by reducing the memory used in both of the previous mentioned operations.

Another thing is that the implementation of a direct coded scanner is a little bit different from the table driven one,
while table driven scanner use a general code or an algorithm to handle different DFAs and REs, the direct code scanners implement a specific code for each state in a DFA and the code in these DFAs differ from an RE to another.

Note that the direct coded scanner use a direct comparison to determine whether this character is a part of a state or not, this is an advantage, but also a disadvantage  when the characters does not occupy and adjacent slots, in such a case a table driven scanner is more efficient, a hybrid approach which uses table lookups in when needed, in a direct  coded scanner  is also suitable.

That's it for now, in the next post i will try to share what i learned about hand coded scanners.
Eco-eCommerce
Tags: atlashackathon
Published: 2022-01-11 12:49:56


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkt2uswcyqks3ej3sa1t.png)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0vhsy16xt4o46o29mkr.png)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rahcmhwmzm737cops2t2.png)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cnq6z6x3yucwkooii1ac.png) 

### This is an e-commerce website named - "better buys". It uses MongoDB Atlas as the database to store users, products data.
[Note]: # (Please make sure the project links to the appropriate GitHub repository and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)

## Submission Category: E-Commerce

## Link to Code:`{%https://github.com/Shruti700/Better-buys%}`

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% Github link_to_your_repo %}` to share a GitHub repository)

## Additional Resources / Info
React, Redux, Node.js, Stripe are used in this project.

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly.)

[Reminder]: # (Submissions are due on January 13th, 2022 @ 11:59 PM PT/2 AM ET on January 14th, 2022/6 AM UTC on January 14th, 2022).
Explain Json Web Token(JWT).
Published: 2022-01-12 00:51:07

JWT stands for Json Web Token. It is the most popular user authorization technique for web applications nowadays, mostly micro web services and it is used to share security information between two sides like a client and a server or a server and a server.It can be used as an authentication mechanism that does not need a database.

There are two authentication system we can follow,

1. Session token
2. JWT token

**JWT Token**: Modern and largest web application has multiple servers. Then multiple servers are maintained by load balancers and also shared redis sessions in the database.



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


But if the shared redis session is crashed or down, then the service will be stopped.
So JWT comes to solve this problem.

The user sends a request to the server,then the server sends the jwt token to the user. Inside this jwt token, the server includes header, payload and signature.

Inside the header, the server is written in which algorithm is used in this jwt token.
Payload is the user information and signature is the secret key.
By the secret key, the server ensures that this is the right user.

In this case, the server does not keep any data from the user. All the data will be sent from the server to the user and the user keeps this jwt token in browser cookies or others.
Blog with Node, MongoDB, and React
Tags: 100daysofcode, react
Published: 2022-01-12 04:46:57

**1.11.22**
It's been awhile since I've coded... yay post-bootcamp burnout. I'm starting my 100 Days of Code challenge to rework the bootcamp assignments using React. 

I read a Twitter thread (which I've lost) but it got me motivated to get back to my code practice. I wrote down "backend headless cms - node, mongoDB, and react."

So, I'll be researching headless CMS which at initial glance looks like a hot topic right now.

**What is a headless cms?** From [Contentful](https://www.contentful.com/r/knowledgebase/what-is-headless-cms/), "A headless CMS is any type of back-end content management system where the content repository "body" is separated or decoupled from the presentation layer "head." Content that is housed in a headless CMS is delivered via APIs for seamless display across different devices... structuring content so that it can be reused across different platforms and channels."

...

Before I go too far down a rabbit hole... I need to get re-familiar with how to set up an app. 

While I go through my notes, I guess the real start of this project is figuring out my objective and a design draft.

## Project Overview
I enjoy spending my time reading and writing about a range of topics, recent adventures, and new findings. I want to build a CMS blog where I can publish blog posts, short stories, notes, and life updates and allow of comments on posts... creating a "Digital Oasis".

### User Story
As a developer who writes
I want a CMS-style blog site
So that I can publish my content

### MVP
1. Home
2. Blog Page
3. Blog Post
4. Login
5. Blog Entry
6. Logged-In Blog Post State

### Road Map
*In no particular order...*
Theming/CSS, Comments, Newsletter Signup, Content Sections, Calendar

*Edit: I started this project with a massive starter pack that we used during the final project of bootcamp. I ended up scrapping most of it and rebuilding from point zero because I needed to work my way back up.*

**1.17.22**
I'm back... a week later, still going strong in the green. I've done a few things. Set up bootstrap and got a few components rendering with React. 

Here are my next steps for this week:
1. Seed the database
2. Pull content from the database into the blog post 

**1.22.22**
So, I still have not seeded the database but I have reworked my server side folders and have done the following:
* Set up server
* Create env file
* Finished setting up models
* Started routes

Right now I just have the scaffolding for the routes but that will be my next couple of days. 

Overall thoughts right now: I definitely learned a lot during coding bootcamp and it's all coming back piece by piece. The reason why I got into coding was because I like the puzzle aspect. It's really nice to get to put this together without the breakneck speed and pressure of the bootcamp.
utilize the power of 
useState and useCallback hooks in React
Tags: react, javascript, webdev, programming
Published: 2022-01-12 07:46:45

What is the right way of using the useCallback and useState hooks in conjunction?

Sometimes we will want to wrap the useState hook with a useCallback hook.

The simple reason for that is to prevent a render cycle when passing the function as props (when the component receiving that prop is wrapped with `React.memo`).

We must remember is that the `setState` function must not be passed to the `useCallback` dependency array. The React team suggests this:

> "React guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list."

For example:

 

```
const [isOpen, setIsOpen] = useState(false); 

const toggle = useCallback(() => setIsOpen(!isOpen), [isOpen]); // We don't have to pass the setState function.
```

But the example above is but practice. Why? Even though we are not passing the setState function, we must pass the `isOpen` variable, as it is being used inside the `useCallback` hook. This will cause the toggle function to be recreated every time the state changes.

You already know the solution, right?

We can use the callback function that receives the previous value and manipulate it. This way, we are not using variables from outside the useCallback function, and we can keep the dependency array nice and clean.

```
const [isOpen, setIsOpen] = useState(false); 

const toggle = useCallback(() => setIsOpen(prevState =>!prevState), []);

```


![Code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yy1oogofa3ll1lncuav.png)

---

- For more posts like this [follow me on LinkedIn](https://www.linkedin.com/in/nitsan-cohen/)

- I work as frontend & content developer for [Bit](bit.dev) - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).
Obsidian.md trouble in paradise
Tags: beginners, watercooler, todayilearned, webdev
Published: 2022-01-12 23:41:54

Not to long ago, I made [this post soliciting](https://dev.to/jasterix/whats-your-favorite-notetaking-app-6mf) recommendations for note taking apps and y'all came through!

My top 3, recommended by the lovely people below were:
1. [RemNote](remnote.com/) by @dgeisz
2. [Obsidian.md](https://obsidian.md/) by @terabytetiger
3. [Bear](https://bear.app/) by @jackkeller
  - _note:_ I should prob mention that Bear is only for Apple devices, my work is 99.99% in a Windows environment, and my phone is Android. But that UI is too. damn. sexy to leave off this list

Since the RemNote desktop was a little glitchy, I decided to keep an eye on it and started using Obsidian as my daily app. Since then, it's pretty much been smooth sailing. I found some great extensions and upped my productivity by with daily notes and rollover to-dos.

Yesterday, things suddenly took a turn. I clicked on one of the shortcuts to open my daily note, and everything was gone. My activity tracking, items for review and follow disappeared. Obsidian had overwritten my daily note with a brand new file.

Today, things got 10x worse when I restarted my computer, opened Obsidian and found that most of the folders had disappeared. I was able to mostly restore them. But the latest files were not in their latest state.

The likely culprit - the new Live Preview editor.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpadgcgyt9azr52eaje4.png)
 
I turned it on this week and it's been chaos since. However I'm not too keen to find out.

And so the hunt for my next best note taking tool continues 🥲

Photo by burak kostak from Pexels
SP-FLAMINGO - SopPlayer Skin Integration - Custom Video Player
Tags: sopplayer, sh20raj, javascript, videojs
Published: 2022-01-13 07:53:13

Documentation Video :- https://www.youtube.com/watch?v=DOxtPWfKWUY

Demo Website :- https://sopplayer.sh20raj.repl.co/flamingo

View on Repl.it :- https://replit.com/@SH20RAJ/SopPlayer#flamingo
<center>

[GitHub](https://github.com/SH20RAJ/Sopplayer/tree/main/flamingo)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mu0stgqfkzq1j2kc5qvb.png)
</center>
### Steps to Import :- 

Steps :- 
 1 . Use `class="sopplayer"` in Your `<video>` Tag .
 2 . And Add `data-setup="{}"`, attribute like this .

---
**HERE IS THE FULL VIDEO CODE**
```
    <video id="my-video" poster="https://i.ytimg.com/vi/YE7VzlLtp-4/maxresdefault.jpg"  
        class="sopplayer" controls preload="auto" data-setup="{}" width="500px">
      <!--Use class="sopplayer" and data-setup="{}" -->
      <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4" type="video/mp4" />
    </video>
```

 3 . Add the JavaScript CDN only before `</body>` Tag

---
**HERE IS THE JAVASCRIPT CDN**
```
<script src="https://cdn.jsdelivr.net/gh/SH20RAJ/Sopplayer/flamingo/sp-flamingo.min.js"></script>
    <!--Here is the JavaScript Library-->
```

Here you have completed your Sopplayer-Flamingo Intgretion. 
<center>
**Before Sopplayer**

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

**After Sopplayer**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2488umn4p1gvxeh2v35b.PNG)


</center>

---
**SEE HOW FULL HTML WILL LOOK LIKE**

```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<center>
  <body>
    <video id="my-video" class="sopplayer" controls preload="auto" data-setup="{}" width="500px">
      <!--Use class="sopplayer" and data-setup="{}" -->
      <source src="sample.mp4" type="video/mp4" />
    </video>
    <script src="https://cdn.jsdelivr.net/gh//SH20RAJ/Sopplayer/flamingo/sp-flamingo.min.js"></script>
    <!--Here is the JavaScript Library-->
</center>
</body>

</html>
```

<center>
## **Visit [GitHub](https://github.com/SH20RAJ/sp-flamingo) View [Demo](https://sopplayer.sh20raj.repl.co/flamingo/)**

**
See Articles :- 

---

https://codexdindia.blogspot.com/2021/02/sp-flamingo-sopplayer-skin-integration.html

---

https://dev.to/sh20raj/sp-flamingo-sopplayer-skin-integration-custom-video-player-4675/
**
</center>