teleren/devto huggingface dataset:
Roadmap To Learn JavaScript 👇
Tags: javascript, codenewbie, tutorial, career
Published: 2020-07-30 14:22:07

#Roadmap to learn JavaScript 👇

I tweet below roadmap on twitter a few days back & people give thumbs up to this tweet, so I thought to put this roadmap in this post. 

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

Hope you like this one 👍 

>Any code newbies can follow below roadmap to learn javascript 👇

- Introduction to JavaScript
- The JavaScript Glossary
- JavaScript syntax
- Lexical Structure
- Expressions
- Types
- Variables
- Math Operators
- Functions
- Immediately-Invoked Function Expressions IIFE
- this
- Arrow Functions
- Loops
- Loops and Scope
- Arrays
- Regular expressions
- Template Literals
- Semicolons
- Strict Mode
- JavaScript Dates
- Math Object
- Asynchronous programming and 
- Callbacks
- JavaScript Timers
- Promises
- Async and Await
- JavaScript Event Loop
- Events
- UI Events
- Forms, controls
- Document and resource loading

#Advanced Topics 👇
- Functional Programming in JS
- Advanced Working With Functions
- Closures
- Regular Expressions
- Unicode in JS
- Storing data in the browser

I recommend these courses if you would like to checkout 

[MyLinkTree](https://linktr.ee/TheAnkurTyagi)

[Follow me on Twitter](https://twitter.com/TheAnkurTyagi)

[Join us on WETESTERR Community](https://www.facebook.com/groups/WETESTERR)

[Subscribe to our YouTube for Tech podcast](https://www.youtube.com/channel/UCPXix_SMwG_RwYhEqJE3G9A/featured?view_as=subscriber)

If you like this article chances are you will like my other article as well :point_down:
:rocket:https://dev.to/tyaga001/generate-stub-test-data-using-jfairy-in-selenium-2c2m
:rocket:https://dev.to/tyaga001/chropath-is-no-more-a-xpath-finder-tool-it-has-evolved-a-lot-now-13fd
:rocket:https://dev.to/tyaga001/all-about-cypress-episode-1-0-12jl
Daily Challenge #276 - Unwanted Dollar Signs
Tags: challenge
Published: 2020-07-30 14:19:20

---
title: Daily Challenge #276 - Unwanted Dollar Signs
published: true
series: Daily Challenge
description: Turn a string of a number into a float. 
tags: challenge
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jpife8r6fsgl8regrbre.png
---

If you're faced with an input box, like this:
```
                                           +--------------+
  Enter the price of the item, in dollars: |              |
                                           +--------------+
```
Do you put the $ sign in, or not? Inevitably, some people will type a $ sign and others will leave it out. The instructions could be made clearer - but that won't help those people who never read instructions anyway.

A better solution is to write code that can handle the input whether it includes a $ sign or not.

So, write a simple function that converts a string representing a number into the number itself. Your function should be able to handle negatives!

**Examples:**

money_value("12.34") => 12.34
money_value("-0.89") => -0.89
money_value("   .11") => 0.11
money_value("007") => 7

**Tests:**
money_value("-$ 0.1")
money_value("12.34")
money_value("$-2.3456")
money_value("$.2")

Good luck!

***
_This [challenge](https://www.codewars.com/kata/587309155cfd6b9fb60000a0) comes from geoffp on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
11 side project ideas to try 🔥
Tags: sideprojects, projects, ideas
Published: 2020-07-30 14:18:21

---
title: 11 side project ideas to try 🔥
published: true
description: side project ideas to create SaaS or pet projects
tags: sideproject, projects, ideas
---

Hi! Here are the ideas to try in your new projects. I post them daily in this [community](https://t.me/startupsi).

Use any technology you want for that!
![ideas](https://cdn.icon-icons.com/icons2/1713/PNG/512/iconfinder-lightbulbideaimaginationcreativity-3993864_112658.png)

#### Color palette generator
But where you type a word or mood, e.g. "ocean", "happiness". The tool could combine properly "ocean" with "forest". A problem with current color palette generators is it's hard to pick good colors by non-designers. It is much easier to describe a palette you want with words.

#### Journey notes
An app allows you to take notes, attach media to places you visit on a map. Kind of a visualized travel diary.

#### Telegram channels catalog
One universal platform which is a huge catalog of Telegram channels/groups/bots. It's a go-to service to submit a channel as an owner and a go-to service to search channels as a user.

#### Chat by interests
The app connects you with a random person for a few minutes to discuss a topic proposed by the app. You can choose text or video chat. There is should be a strict moderation, so a reporting system should be perfectly configured.

#### Trip helper
An app where you make a list of things to do before going somewhere, and the list of things to bring with you. It could be a bot that reminds you of such stuff.

#### Curated YouTube playlists
I didn't find any good app that provides me YouTube playlists for something. Especially for music. It could be an app where you can like YouTube videos and the system choose playlists for you based on others' likes.

#### Performance monitoring
A service that monitors a list of websites to analyze their performance metrics. Such as page loading time, size of bundle files, API stability, etc. This kind of data can be accumulated to keep track of competitors, for example.

#### Car recognizer
Take a car photo and the app will tell you related info: model, year, average car's cost, etc.

#### Audio messages transcribed
A feature to include in the popular messengers to transcribe voice messages. Sometimes people don't want to listen to them or don't have the ability to.

#### Positive news
An app that shows users only positive news. AI?

#### Movies picker
An app collects movies or series to watch for you on weekends. Based on your preferences. Thus, you don't need to spend time searching for new movies, or old ones based on a genre and plot you like.

#### Smart anti-spam bot
A bot that can detect a primary goal of a message and conclude whether it's spam, flood, advertising of something, self-promotion, etc. The bot should be configurable to be triggered to particular primary and secondary goals of messages.
It can be created for different platforms like Telegram, Slack, whatever.
That *One* Thing That Unlocks the Secret of Learning to Code
Tags: devjournal, codenewbie, womenintech, beginners
Published: 2020-07-30 14:07:55

_This post was originally published on July 30, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

As we're progressing in learning to code, I think we have this conscious or unconscious belief that maybe there’s just *one* thing we’re not aware of in the overall coding journey and that if we only just unlocked that special knowledge, we’d be expert programmers in half the time.

The thing is - that one little thing that unlocks the secrets of the coding universe actually doesn’t exist.

What exists is trial and error, consistent effort, being temporarily uncomfortable in not knowing the answer or how to do something, and ultimately putting one foot in front of the other in learning and eventually getting better and better at it.

I used to love perusing all kinds of different articles and blog posts from all kinds of different writers about the best path to take as a self-taught developer.

It felt great to get that instant rush of dopamine when I could think of all the skills I’d acquire *one day* when I’d designed the perfect blueprint for what topics to learn and when.

But when it came down to it, I don’t think I followed through on those designed plans.

So I learned to not overthink it. To take my time and to keep building one learning block upon another.

There is no blueprint. It can feel nice to try to plan it all out - the books we’ll read and when, the tutorials we’ll follow and when, the targets we’ll hit and when.

But what feels even better looking back after a few months at all the progress you’ve made instead of looking forward to all of the imagined progress in your mind as it follows your too-good-to-be-true plan.

----------

Thanks so much for reading along! [Now let's be friends over on Twitter >>] (https://twitter.com/alexlsaltt)

P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen [right over here >>] (https://www.ladiescodecollective.com/podcast)

P.P.S. Have a coding project you want to work on in a supportive environment of other creative coding women? Come apply for a spot in my upcoming Ladies Code Collective Cohort (space is limited!) >> [More info here] (https://www.ladiescodecollective.com/cohorts)
Cmus-analytics
Tags: cmus, elm
Published: 2020-07-30 14:07:00

---
title: Cmus-analytics
published: true
description: Visualize data about your music listening habits
tags: Cmus,elm 
---
## What is [Cmus-analytics] (https://rafapaezbas.github.io/cmus-analytics/docs/index.html)?
A small web application for data visualization extracted from a Cmus log file. Click on the example link and then import it.You will see something like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/onic87qjq9xl3vgbeuil.png)
## How can I get a Cmus log file?
[Cmus](https://cmus.github.io/) is a very powerful music player with a lot possibilities. One of them is using a hook script for actions when the player status changes. With this script, you can create your own Cmus log file.
## How do I set the script in Cmus?
First, you will have to modify the script (the one in the tools folder) in order to make it work in your computer. Change the path of the log file.
```sh
if [[ "$is_playing" = true ]] && [[ "$is_logging" = true ]]
then
    echo $entry >> {path_to_the_log_file}
fi
```
In Cmus use
```
:set status_display_program {path_to_the_script}
```
## Can I use this code somehow?
Yes, of course! Please be so kind to do it. This application has been developed as a learning project of the Elm programing language. It also uses this awesome Elm [linear charts library](https://github.com/terezka/line-charts/).
jouney to front-end
Tags: webdev, learner, help
Published: 2020-07-30 14:03:06

Beginners suggestion guide journey to front-end developer!!!

can anyone please suggest me how to start codeing (a guy who never done the codeing before). which all languages are neccesary to learn and which are best resources to guide through the journey to become a front-end developer.

thank you 👍
How are you keeping up with your hobbies?
Tags: watercooler
Published: 2020-07-30 14:02:35

What are your hobbies? And how are you guys keeping up with them during this pandemic? 

![](https://toggl.com/blog/wp-content/uploads/2018/10/productive-hobbies-940x588.jpg)

Personally I just love watching Movies —  so this pandemic is kinda working out to be in my favour w.r.t. my hobby.
Coding with No Code
Tags: codenewbie, webdev, beginners
Published: 2020-07-30 13:54:13

I'm working through an intense React.js course and I decided to take a break and check out some of the no-code platforms which have come into prominence again thanks to the recent launch of [AWS Honeycode](https://www.honeycode.aws/). I signed up for Bubble.io thanks to [its tutorials](https://bubble.io/academy) and had my preconceptions shattered about what a no-code app could do.

One of the first projects of the React.js course I'm doing was the creation of a Giphy clone, so I was amused to find that creating a Giphy clone was actually one of Bubble.io's [3-minute tutorials](https://bubble.io/lessons). When I worked on this further as [my own project](https://bubble-giphy-clone.bubbleapps.io/) I only had to spend a few more minutes to get the images to be properly sized for mobile:

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

A separate to-do list app that I worked on showed that no-code apps can have CRUD functionality. Indeed, Bubble.io's collection of tutorials include how-tos on creating [no-code versions of major apps](https://bubble.io/how-to-build) like AirBnB.

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

So what is the no-code experience like? As promised, there is no code -- you just wireframe and fill out how you want your app to look -- the inputs, buttons, images, etc. -- and then you click on each component to specify the back-end logic of how they should connect with the database, with one another, or with external plugins. Instead of code you use a GUI to describe the internal logic of your app.

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

In that sense no-code programming is a natural extension of coding, since a successful no-code app will still need to have a consistent internal logic. Instead of a programming language, the coder's pseudocode will be implemented through the no-code platform's GUI. No-code can hence be seen as just a further abstraction rather than a radical break from coding.

While it's as yet unclear how far the no-code movement will go, given how quickly apps can be created and deployed on no-code platforms, this is definitely a tool that coders should have in their toolkits.
How to: Get Netlify Bandwith Usage Programatically For Free
Tags: netlify, python, javascript
Published: 2020-07-30 13:51:28

## Using Python

### Explanation

*In the script below, replace the following variable's values*

Setting                     | Explanation
--------------------------- | ---
**ACCOUNT_NAME**            | The account name associated with the account.
**SITE_NAME**               | The site name can be found in 'Site information' in the project's settings, or at the top in the overview.
**EMAIL**                   | The email used during account registration.
**PERSONAL_ACCESS_TOKEN**   | Created at https://app.netlify.com/user/applications

### Full Python script

```python
import requests

# Edit these
ACCOUNT_NAME = 'youraccountname'
SITE_NAME = 'projectsitename'
EMAIL = 'name@example.com'
PERSONAL_ACCESS_TOKEN = "longlonglongstringgeneratedbynetlify"

# Leave the rest
bandwidth_api_url = 'https://api.netlify.com/api/v1/accounts/{}/bandwidth'.format(ACCOUNT_NAME)

auth_string = "Bearer " + PERSONAL_ACCESS_TOKEN

response = requests.get(bandwidth_api_url, headers = {
    'User-Agent': '{0} ({1})'.format(SITE_NAME, EMAIL),
    "Authorization": auth_string
})
response = response.json()

# Optional printing to console. Can be removed
print('Raw response: ', response)

def calculate(key):
    return int(response[key]) / 1000000

print_list = {
    "Included in plan": calculate("included"),
    "Used": calculate("used"),
    "Remaining":  calculate("included") - calculate("used"),
}
print('Human readable:')
for item in print_list.items():
    print(item[0], ': ', round(item[1], 2), ' MB')
```
*Note: The returned usage will be a bit higher than how Netlify calculates it.*

## Using Javascript
### Netlify Bandwidth Checker Tool

If you are comfortable pasting your **Personal Access Token** in a web form, try [this tool](https://lybekk.tech/guide/get-netlify-bandwidth-usage#netlify-bandwidth-checker-tool), which does the same as the Python script, only in JavaScript.
One way to mitigate risk is to create a token, and revoke it just after using this tool.

[Source code](https://github.com/lybekk/lybekk.github.io/blob/source/src/components/tools/netlifyBandwidthUsage.js)
Do Vue 3 refs admit a monad instance?
Tags: vue, javascript, composition, monads
Published: 2020-07-30 13:48:44

---
title: Do Vue 3 refs admit a monad instance?
published: true
description: After an initial overview about the possibility of Vue 3 refs admitting a monad instance, I present useSwitchMap: a rxjs-like switchMap for refs.
tags: vue, javascript, composition, monads
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/q0c0b6fax1s74032nrcb.png
---

Hi, nice to meet you 😄!
You can find this article in my personal blog [here](https://andreasimonecosta.dev/posts/do-vue-3-refs-admit-a-monad-instance/).
(Quick tip) Easy debugging styled-component with CRA
Tags: quicktip, react, babel, javascript
Published: 2020-07-30 13:35:04

*(This is a just quick tip not an elaborated post sorry)*

**Thanks to Babel Macro, we don't need to eject our CRA project.**

1. Use `import styled from 'styled-components/macro'`
2. Install `npm install babel-plugin-macros`
3. Create `.babelrc` in your project root
4. Then add this to your .babelrc

```js
{ 
   "plugins": ["babel-plugin-styled-components"]
}
```

This option enhances the attached CSS class name on each component with richer output to help identify your components in the DOM without React DevTools.

It also allows you to see the component's displayName in React DevTools.

Voilà, enjoy!

More info: https://styled-components.com/docs/tooling#babel-macro
VSCode GitLens Plug-in
Published: 2020-07-30 13:30:23

Do not pass go, do not collect $200.00, go directly to [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) and install this immediately.

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

When we need to merge our branches with the master branch after we've neglected to do this every day. The amount of work when looking at all conflicts can be overwhelming. 

- First try to resolve all conflicts in fastest way possible.
- Compile and rerun tests and visually inspect potential areas of concern.
- When we spot down-leveled behavior, we open up GitLens. It will show us all changes and commits for all branches.
- We are easily able to find the commit to fix the 'downleveled code' and just cut and paste into current code. 
- Save changes re-inspect and immediately commit.
- Push when ready. 

Time saved because of a bad merge? Can be days or weeks, without Gitlens.

JWP 2020
Integrate Allure Reporter in WebdriverIO
Tags: testing, javascript, webdev, tutorial
Published: 2020-07-30 13:28:22

Allure allows you to generate beautiful test reports that can be easily be integrated with WebdriverIO. Let's take a look at how to do that:

#### Installation:
`npm install @wdio/allure-reporter --save-dev`

#### Configuration:
```javascript
exports.config = {
    // ...
    reporters: [['allure', {
    // test results will generate in the directory mentioned below
        outputDir: 'allure-results', 
    }]],
    // ...
}
```

#### Run tests
`npx wdio` - This will generate a new directory `allure-results` containing all the test results as a bunch of `JSON` files

#### Display the report
To display the report, you need to first install [Allure command line tool](https://www.npmjs.com/package/allure-commandline) - `npm install -g allure-commandline --save-dev`.

Once installed run the following command to process the results - `allure generate allure-results && allure open`

This will open up a new browser window and will display all the results in a beautiful HTML format. 🙌

***
#### Check out this video to see a detailed explanation on how to generate and customize Allure reports:

{% youtube eIVud4f0fac %}

***

#### To learn more about WebdriverIO, check out my free tutorial series here - 
https://www.youtube.com/watch?v=e8goAKb6CC0&list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN.

***

I hope this post helped you out, let me know in the comments below! 

Happy testing! 😄 

...

Follow [@automationbro](https://twitter.com/automationbro) on Twitter
Subscribe to my [YouTube](https://www.youtube.com/channel/UCjugV5pnY6WjvTGYm7U1ucg?sub_confirmation=1) channel
2 Quick Ways to Convert Values to Boolean in JavaScript 💻
Tags: javascript, webdev, tutorial, beginners
Published: 2020-07-30 13:27:56

---
title: 2 Quick Ways to Convert Values to Boolean in JavaScript 💻
published: true
description: Learn how to easily change values into booleans with as little as 2 characters.
tags: javascript, webdev, tutorial, beginners
cover_image: https://imgur.com/sXSlo9f.png
---

The video version of this article. 📹
{% youtube jv8-P12b40o %}

---

Every so often you will find a situation where you will want to convert values to booleans. 

This is more usual these days where most linters stop `==` comparisons by default. 

### Just as a quick note 📝
In JavaScript, we have "truthy" values and "falsy" values. These are values that are considered true or false in the context of booleans. 

Here are the falsy values
```js
// 0, -0 "", 0.0, null, undefined, NaN
```
And for truthy, it's pretty much everything else including empty Array and Objects.

Let's show you the easy ways to convert:
```js
const falsey = NaN;
const truthy = "truth";

Boolean(falsey); // returns false
Boolean(truthy); // returns true
```

We can use `!` (not) operator to invert a value into it's inverted state. So `!truthy === false`. So if we invert it twice we get the original value a boolean.

```js
const falsey = NaN;
const truthy = "truth";
// bang bang, problem solved! 🥳
!!falsey; // returns false
!!truthy; // returns true
```

---

[Follow me on Twitter](https://twitter.com/nialljoemaher)

Subscribe on [Codú Community](https://www.youtube.com/c/Cod%C3%BACommunity)
CSS Mastermind
Tags: html, css, showdev, codepen
Published: 2020-07-30 13:24:28

---
title: CSS Mastermind
description: Mastermind is a challenging code-breaking game. This version was developed using CSS and HTML, without a single line of JavaScript.
published: true
tags: html, css, showdev, codepen
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vg77y2ro6ktt64o9gk5d.png
---

<p><a href="https://en.wikipedia.org/wiki/Mastermind_(board_game)">Mastermind</a> is a challenging code-breaking game that turns 50 this year. There are 6 colors and a 4-length code to decypher. Can you break the code?</p>

<p>This Mastermind game was developed using <strong>only CSS and HTML (no JavaScript)</strong>, and it has 4 different codes to guess.</p>

<p>Here is <a href="https://codepen.io/alvaromontoro/full/YzwbgwE">the game on CodePen</a>:</p>

{% codepen https://codepen.io/alvaromontoro/pen/YzwbgwE %}

<hr>

<p>Thanks to <a href="https://twitter.com/racascou">@racascou</a> for the design suggestions, and <a href="https://codepen.io/fionnachan">@Fionna</a> for a great confetti effect (that I modified a little 😳)</p>
Top 10 Linux Commands Beginners Should Know: As Analysed from my Bash History of 30 thousand lines
Tags: productivity, programming, tips, linux
Published: 2020-07-30 12:59:22

---
title: Top 10 Linux Commands Beginners Should Know: As Analysed from my Bash History of 30 thousand lines
published: true
description: Top 10 Linux Commands
tags: productivity, programming, tips, linux
cover_image: https://assets.mkdev.me/posts/covers/000/000/012/original/mkdev_article.png
---
mkdev CTO Kirill Shirinkin took the Bash history from three different laptops he used over last year and analysed it with a Ruby script. The result is top 10 Linux (or MacOS) commands that he uses most frequently and that you should probably know and use as well.

{% youtube uJ5kJG0mw7g %}

***

*You can always hire [our mentors](https://mkdev.me/en/specializations) and learn directly from them!*