teleren/devto huggingface dataset:
Single Page Application Library in Vanilla JS
Tags: flyght, showdev, javascript, spa
Published: 2021-03-20 19:18:11

---
title: Single Page Application Library in Vanilla JS
published: true
description: Flyght is the SPA library in Vanilla JS
tags: Flyght, showdev, javascript, spa
cover_image: https://github.com/aj1thkr1sh/flyght/blob/main/flyght.png?raw=true
---

# Flyght
Hi, library for making Single Page Application (SPA) in Vanilla JavaScript library

Flyght works based window.loction.hash whenever the hash changes, the configured URL will be triggered and page will be loaded

One can easily make Single Page Application using the Flyght

Simple, yet powerful

Note : Single Page Application might affect SEO, choose appropriate case to use

## Usage
```
<script type="text/javascript" src="https://unpkg.com/flyght"></script>
```
Simple right?

Yes, Simple yet powerful

## Configuration

You need to init the Flyght with required parameter, then your webpage will turn into SPA, like the Flyght way

```
Flyght.init({
  idElement : "idElement",
  urlConfiguration : [ {
    hash : "#about",
    url : "/about.html",
    type : "GET"
  }, {
    hash : "#contact",
    url : "/contact.html",
    type : "GET"
  }, {
    hash : "#team",
    url : "/team.html",
    type : "GET"
  } ],
  requestHeader : [ {
    header : 'Content-type',
    value : 'application/json'
  } ]
});
```
### Configuration Parameters

1. idElement : Is the id of the DOM Element, where the loaded page is rendered

2. urlConfiguration : Is the Array of Object that has, url, hash, and request type
      1. hash : The hash we provided
      2. url : For the given hash respective URL will be called and response will be attached to the idElement content
      3. type : The request type URL to be called
3. requestHeader : The header to be attached to the request
      1. header : The header value to be attached to the header
      2. value : The value to the request header

[:star: on GitHub](https://github.com/aj1thkr1sh/flyght) if you love

Follow Me on 
[Twitter](https://twitter.com/ajith2krishna)
[Intsagram](instagram.com/ajith_raghavan/)
[LinkedIn](https://www.linkedin.com/in/ajith-raghavan/)
vmmen process consuming too much memory (Docker Desktop)
Tags: docker, wsl
Published: 2021-03-20 19:01:13

Clean Docker Desktop install, starts WSL 2, no container running. Let's check the memory usage:

![t](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gf9yfrxuunjezurmx1vk.png)

Ouch, that's too much for having (literally) nothing running. I don't know why it eats so much RAM, but there's a quick fix.

Create the file `C:\Users\<username>\.wslconfig` like the example below:

```ini
[wsl2]
processors=1
memory=1GB
```

Run `wsl --shutdown` from a terminal, try it again, and there you have it:

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

In the meanwhile I suggest you to stay tuned to [this issue](https://github.com/microsoft/WSL/issues/4166), hopefully there will be a proper fix in the future.

P.S.:

Even when limiting the memory, `vmmen` still hungry, when set to `512MB` I get an error:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kws3qdpmpvilz1t2vm1.png)
The Tale Of 7
Tags: geekweeklocal, programming
Published: 2021-03-20 19:01:01

What to start with? This week has been nothing but an exciting adventure at the start of my career in computer science. From writing a simple 'Hello World' program at the start till programming Data-Structures towards the end. It has helped me to learn a lot.

Let's start with the best thing the organizing team has done for us:
It was giving tasks not only to be a computer geek, but also to become a socially active and cultural geeks too. The tasks were never always to write a code and bore yourself for the whole day, but also to take a break and enjoy yourselves with the music and memes too. The task were not only to learn the specials of computer science, but also to learn how to work as a team.

The outcomes of this week challenge has been great. I have learnt how to code without stressing yourselves. I have learnt how to enjoy whether by going live on the mini-event or by playing with the teammates. I have learnt that taking a break from daily work and listening to music or doing what you love can never be a distraction, it is always a relaxation. I have learnt that being a complete stranger does not mean you cannot be open and be yourself to your stranger teammates; after all, they too are your friends just that you haven't met them until now. And lastly, I have also learnt, it is fun competing to get on top by putting extra efforts.

Honestly speaking, this week has been a challenge as well as a perfect learning opportunity I grabbed in my whole life. A disease outbreak can never be a hindrance to what we want to learn. We are united by the internet, and ladies and gentlemen that unity gave us the chance to a very cool learning opportunity.
Building a Productivity Timer using Azure Functions and Twilio
Published: 2021-03-20 18:44:32

WorkSpace was built to help young kids stay engaged while learning online. The web app uses a Pomodoro timer and guides kids through breaks and work time. Parents also have the option to fill out a contact form which is used to send them a report of their child’s activity at the end of each session using an Azure function and the Twilio API.

Visit WorkSpace: https://lively-bush-0e9bdb91e.azurestaticapps.net/

**About Me**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lq6zv7meccykzwmukwye.jpg)

Hello! My name is Tessa Nishida, and I am a sophomore studying computer science at the University of Utah. I am originally from Honolulu, HI and I enjoy running, hiking, and traveling!

**About Workspace**

While helping to tutor young students during the pandemic, I noticed that kids had difficulties staying focused and motivated while learning online. Created WorkSpace to help kids develop good time management skills and help parents better idea of how their child learns. 

**How it Works**

Below is a diagram of the basic structure of the web app...

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84fwkn7wmn3wnlcph19m.jpg)

Here is a general outline of how to connect the frontend and backend..

1. Create a Azure Static Web App
2. Call Azure Function from frontend (Remember to use async functions!)
3. Call the Twilio API in the backend

Done!

**Thank you!**

This project was built as a part of the Bit Project Serverless BitCamp cohosted by Microsoft. I would like to thank my mentor Marie Hoeger for helping me throughout this process, as well as Emily, Evelyn, and Julia for leading our cohort.
Braces Validator with Javascript: Stacks
Tags: javascript, programming, codenewbie
Published: 2021-03-20 18:29:57

Link to original article with code snippets (recommended): https://gabriellazcano.com/blog/braces-validator-with-javascript-stacks/

Today I was messing around doing some CodeWars challenges and some problem got my attention. It was to make a braces validator. The rules are simple, given a string we have to determine if all braces are matched with the correct brace. You can check out the complete kata here.

"(){}[]" // True
"([{}])" // True
"(}"     // False
"[(])"     // False
"[({})](]"  //False

So I started trying different ways. But none seemed to work. Then I remembered there were this magical data structures called stacks.

Stacks are a data structure that work by pushing and poping elements.

In this particular example I am first defining if the stack is empty or not, if it is I have to push the first element. And from then start comparing the current element to the last pushed element. For the comparison I am using a functionality of JavaScript, whose name I don’t know, which basically works by indexing an object with a string.

So in an object I just have to define the counterpart of the brace and it’s has an access time of 1.

If the current brace is not equal to the last one in the stack it will get pushed into the stack. If it is it will not push the current brace and it will pop the last element in the stack. So if there is any element left in the stack it means that the string is not valid either because some brace has no counterpart or because some brace is opened and closed in between other.
Reactive Variables are the BEST feature in Svelte
Tags: javascript, webdev, svelte, programming
Published: 2021-03-20 18:28:09

Link to original article with code snippets (recommended): https://gabriellazcano.com/blog/reactive-variables-are-the-best-feature-in-svelte/

Well, maybe I’m exagerating a little bit. But for real, reactive variable are such a good feature I don’t know how other frameworks haven’t copied it to it’s full extent yet.

They work like this, you declare a variable and if the variable changes it triggers another variable to change it’s value if it’s related to the initial variable. 

You can see a similar example in the docs . But what this basically does, is that every time we change the value of the input it would change the double variable to be times 2 the a variable.

And you could do lots of things with it.

Changing the document title.

And even calling functions. For this I have the perfect example, making an svg triangle with the sides being reactive. And also using the reactive variables feature to get the hypotenuse with a neat one liner

https://codesandbox.io/s/brave-einstein-2hfx4

Thanks for reading. If you’ve got any other example of how reactive variables could be used feel free to let me know :))
Why I Use Quokka.js for prototyping?
Tags: javascript, webdev, programming, productivity
Published: 2021-03-20 18:26:40

Link to original article (recommended): https://gabriellazcano.com/blog/why-i-use-quokka.js-for-prototyping/

I’ve been doing some learning with typescript, and I’m really liking it but setting it up is a little messy mainly because you have to compile the program into a JavaScript file. And for a simple test I don’t find this convenient.

For example, if I’m doing some challenge for Codewars, or any other competitive programming platform using typescript is completely out of the way. You can work around this using nodemon but still the results are not as good as you could get with Quokka.js.

In my case I have it installed in VSCode and you get to see the results of the code you are writting as you are writting it and in a non intrusive way, without having a terminal opened.

And it’s pretty easy to install, you just have to search it in the extensions tab in VSCode.

To start Quokka.js on a file just type ctrl+k q or press f1 and type Quokka and you’ll see the options.

There’s to be noted that there’s a Pro version but I only use the community, because it has all the features I need really.

Once you start using it, you’ll see your code like this:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09521xiqa200innldwid.png)
 
This is just something I learnt today and felt like sharing :))
AI 
Published: 2021-03-20 18:10:24

There was a time, not so long ago, when artificial intelligence, machine learning, and natural language processing were only found in science fiction novels. Artificial intelligence, on the other hand, has been around for over 70 years. We were still working on a model of the most basic component of artificial intelligence at the time: artificial neurons. Artificial intelligence (AI) and machine learning had crept into the public's blind spot for a long time after that, all the while becoming smarter. It wasn't until IBM's Deep Blue defeated Garry Kasparov in 1997 that AI technologies gained traction and the data race began.

Of course, today's digital imperative includes AI, machine learning, and natural language processing. The benefits of using AI technologies in all shapes and sizes have prompted companies to invest heavily in their growth and application. Transportation, entertainment, and manufacturing operations have all seen tremendous growth and result of AI adoption.

AI's ability to automate sales and marketing activities has shown great promise in terms of lowering human effort and costs while still boosting top-line growth. Artificial intelligence (AI) reduces the time spent on administrative tasks, improves a brand's ability to provide customised services to consumers, and creates previously untapped revenue streams. This is why AI is at the heart of the most promising marketing automation initiatives.
Summarizing Namaste 🙏 JavaScript EP06,07,08 (Scope chain, lexical env, let and const )
Tags: javascript, help, namastejs, scopechain
Published: 2021-03-20 18:07:48

Thank you Akshay Saini for this beautiful series. Just summarizing your lessons for whenever I need a quick recap. Same for others. Hope it helps.

###What is undefined?
Undefined doesn't means empty. It acts like a placeholder until variable is assigned with some value. 

###Lexical environment
Whenever an execution context is created, a lexical environment is also created alongside.
Lexical environment is the local memory along with the reference to its lexical environment of its parent.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxmx8fgeohl85arapj3a.png)
In the above image, you can see the orange block in the memory part along with key value pairs in execution context.
This orange block refers to its lexical environment of its parent.
**c** is referring to **a** lexical environment.
**a** is referring to **Global execution context** lexical environment.
**GEC** is referring to **null**

**Lexical stands for hierarchy or in sequence**

This whole chain of lexical environments is called **scope chain.** 

### Are let and const declarations are hoisted?
Answer is yes. Lets learn how?

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/518bzdiowiwi2o5469fh.png)

In the above image when logging **a** to console, reference error is thrown. Then, how hoisting is possible?

So, let and const are assigned value of undefined **but they are not stored along with global object. They are stored in a seperate object.**
**You can't access these memory spaces until you have initialised or assigned some value to it.**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y69m1qldyvtm828fhzi3.png)

That is the reason why ReferenceError was thrown stating cannot access **a** before initialisation.

###Temporal dead zone
It is the time since the **let** variable is hoisted till it is initialised some value. Whenever you try to access any variable inside temporal zone, it gives ReferenceError.

**To avoid temporal zone, push every declaration and initialisation at the top.**

###Syntax error
If Js finds any duplicate declarations or redeclaration, it immediately rejects the code and gives **syntax error**.
**In case of syntax error, no code is executed**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flquk673v87bkiodyr7h.png)
Keyoxide proof
Published: 2021-03-20 18:05:45

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/fe4b8e3c1ebfeca9359d22bd4eafaf039839b334) to [this dev.to account](https://dev.to/mrey). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:FE4B8E3C1EBFECA9359D22BD4EAFAF039839B334]
Simple way to use dev.to article API to show your articles on your portfolio website.
Tags: react, javascript
Published: 2021-03-20 18:01:18

Do you want to set your dev.to articles to appear on your portfolio website? 
Let me show you how I used the article API to get my dev.to posts on my portfolio website in just two steps.

1. Just add your username at the end of this API-link: "https://dev.to/api/articles?username=yourUserName"
2. Use axios to get your posts and then render it on the frontend.

simple example:```   const getDevToPosts = () => {
    axios
      .get("https://dev.to/api/articles?username=usaidpeerzada")
      .then((res) => {
        setBlogState(res.data);
      });
  }; ```
Geek Week Local Journey
Published: 2021-03-20 17:53:22

What to start with? This week has been nothing but an exciting adventure at the start of my career in computer science. From writing a simple 'Hello World' program at the start till programming Data-Structures towards the end. It has helped me to learn a lot.

Let's start with the best thing the organizing team has done for us:
It was giving tasks not only to be a computer geek, but also to become a socially active and cultural geeks too. The tasks were never always to write a code and bore yourself for the whole day, but also to take a break and enjoy yourselves with the music and memes too. The task were not only to learn the specials of computer science, but also to learn how to work as a team.

The outcomes of this week challenge has been great. I have learned how to code without stressing yourselves. I have learned how to enjoy whether by going live on the mini-event or by playing with the teammates. Furthermore, I have learned that taking a break from daily work and listening to music or doing what you love can never be a distraction, it is always a relaxation. I have learned that being a complete stranger does not mean you cannot be open and be yourself to your stranger teammates; after all, they too are your friends just that you haven't met them until now. And lastly, I have also learned, it is fun competing to get on top by putting extra efforts.

Honestly speaking, this week has been a challenge as well as a perfect learning opportunity I grabbed in my whole life. A disease outbreak can never be a hindrance to what we want to learn. We are united by the internet, and ladies and gentlemen that unity gave us the chance to a very cool learning opportunity.
Day 33
Tags: 100daysofcode, programming, javascript
Published: 2021-03-20 17:51:14

Day 33/100 of #100DaysOfCode

codewars

Hours coded: 1.7
Lines of code: 184
Keystrokes: 2960

I'm now a 4 kyū blue belt on 
@codewars

via @software_hq's #vscode extension https://www.software.com/100-days-of-code
Planet Search Series
Tags: javascript
Published: 2021-03-20 17:40:43

I'm working on a series called Planet Search, so first there's Planet Search, then Helix's Adventure (Planet Search 2) you can play them both here: https://prolighthub.itch.io/planet-search and here: https://prolighthub.itch.io/helixs-adventure

Now I'm working a 3rd game (called Planet Search 3 for now) and it's huge! I can't do it by myself. So I'll need help. You can contribute in many ways (pixel art, music, ideas, playtesting level making with Tiled, programming, etc) and the Github repo is here: https://github.com/prolight14/PlanetSearch3

After you've gone and looked at that repo, it's time to run it, here's more info on it: It's a game with a space ship you can control and land on planets (to see the closest planet just keep on heading up) which will result in a platform level.

Stop Talon from destroying the core of each planet, by collecting (you've collected 3 crystals (3 crystals = 1 orb) before in Helix's Adventure (Planet Search 2) ) 7 orbs then taking on Talon in ship. While freeing 7 heroes and getting new abilities. Find Princess Isabella. Ok I think I've said enough. 

If you want to help contact me at ExoPhantomFalcon@gmail.com. My Khan Academy profile is: https://www.khanacademy.org/profile/prolightHub
and finally my Github is: https://github.com/prolight14

Hopefully that should get you all setup. Though we really do need a chatroom somewhere. If you have any ideas let me know, I'm thinking Gitter, also I can't do Discord or Reddit.

That should get you up to speed on what's happening in the Planet Search series. Also I highly recommend playing Helix's Adventure if you want to expand on the series canon.
Publish your Storybook components on npm
Published: 2021-03-20 17:37:24

## Storybook and Library setup

1.  Create a new Angular Library using the steps from Angular.io
   
```
ng new my-workspace --create-application=false

cd my-workspace

ng generate library storybook-library
```

  

After these run the storybook installation simply by running:
```
npx sb init
``` 
This will install storybook, the required dependencies and update the scripts. 

2.  Once done run npm run storybook to launch it. There’s some existing boilerplate code when you run storybook for the first time to get you started with it.
    

  

## Publish configuration

If you intend to publish your packages to a private or public repository you’ll need to change the configuration a little to include the registry url for the repository you’ll be using.

  

1.  Open package.json from the projects folder of your workspace.
    

It’s important to add configuration to the right package.json. You now have two package.json files one in the root of your workspace and another under the projects folder.

2.  Add the below configuration to enable publishing of your packages
```
"publishConfig": {
	"registry": "http://myprivaterepo.com/repository/private/"
}
```

If you’re using a public npm repository, you might need to create and account if you don’t have one. You’ll also need to login by using command npm login and then you can use npm publish from the build directory to publish your packages.

3.  To build your storybook components or modules, you can run
```
npm run build
```

This will build your project and will put the final contents inside a directory similar to
```
dist / yourProjectName
```
You can now run npm publish from this directory to publish your packages.
Save your million dollar idea with notepad++ backups
Tags: editor, notepad
Published: 2021-03-20 17:30:27

I'm guilty of overusing notepad for note-taking, notepad++ more specifically (when I'm on Windows). I'm not proud of it, but having some important `notes.txt` on my desktop it's not a rare occasion.

Do you know those stories on incredible ideas that started on the back of a napkin? An unsaved `new 1` tab on notepad++ is my back of a napkin.

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

But what if notepad++ crashes or the machine runs out of power? Backups to the rescue!

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

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

That way you can always reach `C:\Users\<username>\AppData\Roaming\Notepad++\backup\` for getting the million dollar idea back.
Welcome | Rookie Week of Python Day 01
Tags: python, beginners, projects
Published: 2021-03-20 16:57:44

Python. The first and last love of most newbie programmers. Love it or hate it (does anyone really?) almost everyone has been drawn to it at one time or another. Recently I have started coding in python once again, and if like me, you too are a bit more than a little rusty at it, or maybe just hungover from the move to Python 3 from Python 2 in your time away from the language, this series of beginner level python projects is for you. Yes, I am bringing you a week straight of python projects, in varying difficulty levels, from around the web (I, in no way claim that these are the most original idea). Follow along and get back on the horse.
For Day 1 we will be creating a very simple Email splitter program.
# Email Splitter
The concepts we will use in it are strings, strip() functions, and basic input methods. Easy enough right?
We will start with a very basic variable input and use a strip() function to split it.

`email = input("Enter Email:").strip()`


Next we will declare two variables, each to hold the username and the domain name respectively. We will be splitting the string at the '@' like so.

`userName = email[:email.index("@")]
domainName = email[email.index("@")+1:]`


Now that we have our two values stored in separate variables, we need to be able to use them independently, In this case, being able to print them.

`output = "Username: '{}'    Domain Name: '{}'".format(userName,domainName)`


If you want the code used here you can also check it out on my GitHub repository [here](https://github.com/thehannankhan/A-Simple-Email-Splitter). feel free to make it more complex.
Now that you have started your first project, stay tuned for more tomorrow.