teleren/devto huggingface dataset:
24 days of Javascriptmas
Tags: javascript, javascriptmas, html, css
Published: 2020-12-26 21:11:17

###### Cover Pic Credits: [Reddit](https://www.reddit.com/r/ProgrammerHumor/comments/816p3z/merry_late_christmas_javascript_promises/)


["24 days of #Javascriptmas"](https://scrimba.com/learn/adventcalendar) is a challenge to improve your JavaScript skills by solving one challenge daily from Dec 1, 2020 to Dec 24, 2020.

{% youtube CsoujaMhl4g %}

By the way, [Scrimba](https://scrimba.com) is a platform which provides awesome tutorials on frontend web topics like HTML, CSS, Javascript, React, Vue.js, etc. wherein one can directly interact with the code in the screencast. 

Here are my solutions for all 24 challenges:

Day 1: [🍬 Candies](https://scrimba.com/scrim/co5d64bed8035f11b6ea8fa70)
Day 2: [⭐️ Deposit Profit](https://scrimba.com/learn/adventcalendar/day-2-deposit-profit-challenge-co501407288acb77d916aba19)
Day 3: [🐒 Chunky Monkey](https://scrimba.com/learn/adventcalendar/note-at-0-47-cof59499b979299197972a85e)
Day 4: [Century From Year](https://scrimba.com/learn/adventcalendar/note-at-1-01-co60948bdaefbd084523b506e)
Day 5: [Reverse a String](https://scrimba.com/learn/adventcalendar/solution-for-day-5-of-javascriptmas-co21f418c93ef03bbd80d1bc1)
Day 6: [Sort By Length](https://scrimba.com/learn/adventcalendar/note-at-0-29-co68c4c7f87ccd97f8f78bbb1)

Day 7: [Count Vowel Consonant](https://scrimba.com/learn/adventcalendar/note-at-0-25-cob1b4a0eb7e0f2be99a334ed)
Day 8: [🎲  Rolling Dice](https://scrimba.com/scrim/coa764564a5267e0480d71bdf)
Day 9: [➕ Sum Odd Fibonacci Numbers](https://scrimba.com/scrim/codad4563a02b65f873a1f0b6)
Day 10: [✖️ Adjacent Elements Product](https://scrimba.com/scrim/coc1644b2994dd183ed6b575b)
Day 11: [⚠️ Avoid Obstacles](https://scrimba.com/scrim/coaa941949108f25fc5319d39)
Day 12: [🕒 Valid Time](https://scrimba.com/scrim/co6e04b8f9366ba337b8e2e65)

Day 13: [Extract Each Kth](https://scrimba.com/scrim/co25d4518b3eda92109c15cc2)
Day 14: [Maximal Adjacent Difference](https://scrimba.com/scrim/coc55450a9e515482ccaeb8cf)
Day 15: [Javascript Carousel](https://scrimba.com/scrim/co02647108def942c9f68c2a7)
Day 16: [➖ Insert Dashes](https://scrimba.com/scrim/co0394a10b2bd95d0df6b3cd6)
Day 17: [Different Symbols Naive](https://scrimba.com/scrim/co7114555ba97bc06ff3a082f)
Day 18: [Array Previous Less](https://scrimba.com/scrim/co21b49d8afb00ed34dff5bca)

Day 19: [🔤 Alphabet Subsequences](https://scrimba.com/scrim/coc6e4fc4af84e4ef947af7da)
Day 20: [Domain Type](https://scrimba.com/scrim/co8264e5db18fc73cc1c310fb)
Day 21: [➕ Sum of 2](https://scrimba.com/scrim/cobb146bc90d7ecfa9454fb3d)
Day 22: [:1234: Extract Matrix Numbers](https://scrimba.com/scrim/co1aa4c90a4271ac2db9b56c2)
Day 23: [Twitter Input Component Challenge](https://scrimba.com/scrim/co0924097b631e2c409b67738)
Day 24: [🎯 Test your agility](https://scrimba.com/scrim/co9e545c3a13439b07b0747cf)

I totally enjoyed these challenges especially the ones involving HTML/CSS as well (Day 8, 15 and 23).
Classification Challenge: Where to go out after Corona?
Tags: challenge, machinelearning, datascience, beginners
Published: 2020-12-26 20:49:06

---
title: Classification Challenge: Where to go out after Corona?
published: true
description: Develop a classifier to decide where to go out after a Corona vaccine has been distributed to the whole population. 
tags: challenge, machinelearning, datascience, beginners
cover_image: https://cdn.pixabay.com/photo/2015/07/10/17/53/cheers-839865_1280.jpg
---
Imagine a bright future. A vaccine has been distributed. No more masks, no distancing. Instead, everyone can go out again. But many people will have forgotten where to eat and drink! 

Hence, you feel motivated to leverage your skills and build an app to help them figure that out. There are four options: Visit a people's fair, a bar, just meet at the food stall across the street or visit a proper restaurant. 

To make your app very simple, you decide to base your recommendation only on three parameters: How hungry the users are, how much booze they want to drink and how many friends are going out. 

# The Challenge
Of course, your recommendation shouldn't be entirely based on your personal preference. Therefore, you decide to gather some data. You can find the full data set here: 

{% github bahe007/ClassifierChallenge %}

Now, it's your task to develop a very accurate and robust classifier to fulfil this task. 

You are free to use whatever language you like. Of course, you could use a framework, but it'd be more interesting to write a classifier entirely by yourself. 

On whatever tools you decide, feel free to share you results here! 

## *Happy coding!* 👩‍💻🧑‍💻👨‍💻 

*Title image: [Pixabay](https://pixabay.com/photos/cheers-beverage-drink-booze-839865/)*
Javascript understanding errors part 2 common error examples
Tags: javascript, beginners
Published: 2020-12-26 20:20:02

**Into**

In part 1 we went over some common syntax and reference errors that you may come across as a beginning programmer. In part 2 we will go over some more common errors along with some less common but equally important ones.

**Forgetting to Close Parenthesis on a Function Call**

When you create a function that does not take any arguments, a common error is to forget the parenthesis when you call that function:

```
function printNumberFive(){
  let x = 2
  let y = 3
  return x + y;
}

let notFive = printNumberFive; // will set notFive equal to a function but not 5
let five = printNumberFive(); // will set five equal to return x + y of function
``` 

**Passing Arguments in the Wrong Order**

Another common error when dealing with functions is passing/calling the arguments in the incorrect order:


```
function groceryList (array,name){
  return `Hi my name is ${name} and these are my groceries I need to buy ${array}`
}

groceryList("Dan",["Bacon","Eggs","Milk"])
//'Hi my name is Bacon,Eggs,Milk and these are my groceries I need to buy Dan'
```

Just remember the arguments must be called in the same order that they are passed in: 

```
function groceryList (array,name){
  return `Hi my name is ${name} and these are my groceries I need to buy ${array}`
}

groceryList(["Bacon","Eggs","Milk"],"Dan")

//'Hi my name is Dan and these are my groceries I need to buy Bacon,Eggs,Milk'
```

**Off By One Error When Indexing**

Off by one errors typically occur when looping over indices or targeting a specific index in a string or array. Javascript indices start at zero and a common mistake is to assume they start at 1, leading to the index you are targeting to be off by one:

```
let myArray = [1,2,5,10,20,40]

for(var i = 0; i <= myArray.length; i++){
  console.log(myArray[i])
}

// Loops one to many times at the end because there are only 5 indices but i <= myArray.length will attempt to print out 6 indices.

for(var i = 1; i < myArray.length; i++){
  console.log(myArray[i])
}

// Does not print the first number in the array

for(var i = 0; i < myArray.length; i++){
  console.log(myArray[i])
}

// Correctly prints all the numbers in the array

```

**Conclusion**

Knowing these common errors can be a huge time saver. If there are other common errors I missed feel free to comment below, I would love to hear them.
Resolved !  Error- ENOSPC: System limit for number of file watchers reached.
Tags: react, npm, reactscripts, linuxmint20
Published: 2020-12-26 20:20:00

![react](https://dev-to-uploads.s3.amazonaws.com/i/yyghubn0y2kyqz962c9j.jpeg)

Well well this took me considerable time to resolve this error.


Some Errors are like that you got to dig in for much longer than you would like to. This was one of these for me. I'm sharing my solution here to make it a bit easier for other developers.

When I was trying to run npm/yarn commands which are supposed to watch file changes (e.g. CSS/SCSS or JavaScript files) then it shows <em>Unhandled error</em> problem affects Library React. The related dev- and prod-commands work fine. It's only affecting watch-command and appears to be linked to a file-system incompatibility when watching file changes.

<strong><em>This problem seems to affect especially Linux users like myself. I can't confirm this for sure as I run only Linux- distribution.</em></strong>

```
events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/user_name/chat-app/public'
    at FSWatcher.<computed> (internal/fs/watchers.js:218:26)
    at Object.watch (fs.js:1525:34)
```

####The one of following methods may help you to get out of this error :

###Method $1: 
This happens when you have multiple react projects open. Try to close other projects  and test again. This happens because your changes on the project are watched on the fly.

###Method $2:
Sometimes when this error occurs I used to do ``npm/yarn install`` to update the dependencies and start working. But this may not be handy everytime. Better go with other options.

###Method $3:
```
Visual Studio Code is unable to watch for file changes in this large workspace (error ENOSPC)
```
This this shows on notification bar of VS Code then refer the beautiful explanation and solution of this issue through VS Code Docs i.e. [Solution to issue](https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc)


###Method $4:
[Watch a video](https://youtu.be/_GG9jgLgBXk) by Gaurav if you prefer watching video a lot.



Have a good day 😊 !!!

#### #staysafe😷 #stayhealthy🥗
Can't Map through my nested API React.js
Tags: react
Published: 2020-12-26 20:01:54

The API does not render and it says this.state.weather.map is not a function. I need help, I have tried different ways of mapping through but does not change the outcome. Also I have used the Object.values() to convert the JSON format to array. Any feedback to fix it?


import React from 'react';
import axios from 'axios';


export default class Weather extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
          weather: [],
        
       }
    }



async componentDidMount(){

axios.get("http://api.weatherapi.com/v1/current.json?key=b61abddeaf714b5bba9210052201012&q=nyc").then(res => {
   
    this.setState ([{weather: Object.entries(res.data)}])
    
    });
  }

  renderWeather(){
    console.log(this.state.weather[2])
   this.state.map(weather => (
  
       <p>{weather.location.name}</p>
        
    ))
  }

render (){

return(
<div>
{this.renderWeather()}
</div>

)
}
}
Calculator Progress
Tags: javascript, css, html, codepen
Published: 2020-12-26 19:45:04

Project Completed
If you want to see my work go [HERE](https://dev.to/dominikgorczyca/calculator-174g)


There comes a time when tutorials don't cut it anymore and you have to practice to improve at fast pace so here it is, my first project, calculator.
### **Day 1** 
It was hard to finally start doing things without somebody telling me what to do but after some resistance I made an overall look without any javascript and it's not the worst. 
I used grid, and viewport width and height to make it responsive. Some ideas from famous windows and android calculator and some basic calculator colors. 
### **Day 2**
I made whole design look nicer(at least in my eyes).
Done some ids and spend some time looking how to get each button easily in JS, after that I made numbers, changing sign, decimal, clear and equal work, not in 100% though.
### **Day 3** 
I made the calculator work a little bit better responsively, also noticed that making a calculator is more complicated than I thought and decided to spend some time making things more simple. Spend most of the time dilating on how should this web work so I won't have to spend so much time confused what to do, because of that the calculator didn't improve much. 

### **Day 4** 
After some time I figured out how my calculator should work but when I got to square and root I couldn't figure out how to make it precise and accurate when you first root and then you make the number squared. 

### **Day 5**
Spend the whole day trying to make the root and square work! Somebody told me to use library `Decimal.js` and it's great! But before that I had to get my website on localhost and it took me a lot of time to get this right with `http-server` and then I had to try another hour to understand how I should use it in my calculator but finally it worked! Tomorrow I will try to make appropriate action when the value is too big and the rest of operators. 

### **Day 6**
Today was a very long day, I was trying hours and hours so every calculation would work fine, I also made other things work and spend the rest of the day repairing some bugs and there it is, finally, the hardest project in my life, just a calculator, I thought about giving some animation to it but I'm so exhausted I don't want to even think about it haha. 

Calculator is not so easy to make after all, at least not the one you want to work perfectly, and I still have like half of buttons google calculator has.
Angular 2+ dynamic input width 📏
Tags: angular, typescript, html
Published: 2020-12-26 19:32:14

I've recently had a project where I had to dynamically adjust the width of an input, based on the content size.

It might sound hard to do, but in reality is very simple. We achieve this by taking advantage of the [size](https://www.w3schools.com/tags/att_size.asp)  attribute.


We start by creating a new Angular directive using `ng g directive [path]`

After that, we write our directive as follows:
{% gist https://gist.github.com/razvanstatescu/6fc6fb889b8a54461de04a86067673a1 %}

Now, you can use it like this: `<input type="text" dynamic-input />`
Regular clicking vs Kohi clicking
Tags: gamedev, clickspeedtest, clickper10sec, kohiclicktest
Published: 2020-12-26 19:26:19

regular clicking is an easy way of click the mouse and it is also called slow clicking.It is a strategy that the greater part of us do on an everyday premise while getting to the PC. The method is useful for individuals that need to play the game as a sit back instead of contending. 

Utilizing the technique, players can score a normal CPS of 4–6 ticks for each second. However, individuals who have dominated the method can stretch out their score to even 8 CPS. The lone significant downside is that players can't score higher CPS utilizing the strategy. It is ideal to change to different methods for clicking for gamers that want to score higher CPS.

kohi click test:

Kohi click test is a strategy to decide the proportion of snaps every second. It is like other CPS Test programs, with the solitary huge distinction being that it is included on a Minecraft worker known as Kohi. 

The Kohi worker is famous for Hard Core Factions game modes. While Kohi is a branch of MineHG, the last is a side project of Minecraft PVP (MCPVP). Presently, Brawl Games own the MCPVP however was at first evolved by 'hclewk.' 

A few snap speed programs permit clients to recognize their mouse-clicking speed over a given time span. Much of the time, the Kohi Click Test is utilized by the individuals who play Minecraft. Players step through the exam to improve their mouse-clicking pace to perform better in the game.

Test Your kohi click test speed: [Check this](https://clickspeeder.com/kohi-click-test/)
Why MX Master 3 are very cool
Tags: discuss, webdev, watercooler, productivity
Published: 2020-12-26 19:19:55

Recently I've bought a MX Master 3 "(ed. A very nice mouse created by Logitech)".

First you have the possibilities to connect your mouse : 
Bluetooth and usb with a dongle, work on mac, iPad, Windows and linux.

The keybinding are a real joy, you set a key in a software, and you can bind a mouse key, or bind globally.

And you, did you use MX devices ? What did you think about these devices ?
Building with Vue 3 with tailwindcss
Tags: vue3, vuex, router, tailwindcss
Published: 2020-12-26 19:17:08

This tutorial will be building a full project using Vue 3 and combining it with the magic of Tailwindcss to produce a responsive multipage website 

Below is the landing page of the webpage that will be built

![Vue 3 Webpage](https://dev-to-uploads.s3.amazonaws.com/i/7gxqlvhg42q0urm033nn.png)

Some of the concepts that will be learnt in the process include
* Setting up a Vue project with tailwindcss
* State management with vuex 
* Routing, Composition API in Vue 3
* Creating reusable components
* Persisting state in Vue application
* Interacting with APIs

It promises to be an interesting an exciting journey.

The codebase can be accessed on [GitHub Here](https://github.com/mySuulola/learning-vue). Give it a star if you find it helpful and your pull requests are definitely welcomed.

The choice of tailwind is become of the flexibility the utility library gives - especially for responsiveness and dark/light mode which is something we will implement across the application.

You can check the final product [here as hosted on Netlify](https://vue3x.netlify.app/).

Drop your comment in the comment box and I hope you are as excited as I am to embark on this quest.

Your questions and comments are welcomed in the comment section.

Cheers
Help- android keyboard 
Tags: help, android, keyboard
Published: 2020-12-26 19:09:50

I was made an android keyboard app but the character that I used is like this picture.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uhmdlabhwhtc4r6m0429.png)
when I opened my app these characters were changed to Chinese.
Please Help.
and Thank you
HTML Tables
Tags: webdev, html, beginners
Published: 2020-12-26 18:44:23

HTML tables allow web developers to arrange data into rows and columns.

The `<table>` tag defines an HTML table.

Each table row is defined with a `<tr>` tag. Each table header is defined with a `<th>` tag. Each table data/cell is defined with a `<td>` tag.

By default, the text in `<th>` elements are bold and centered.

By default, the text in `<td>` elements are regular and left-aligned.

This is example of Basic table. 

```
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Megan</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Michael</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
```
BONUS: How to make border.

```
table, th, td {
  border: 1px solid black;
}
```

Thanks for reading :)
Laravel Or Ruby on Rails 2021?
Tags: help
Published: 2020-12-26 18:40:08

Hey everyone,
I would like to know which framework will you choose for 2021 I have no exp with ruby and ruby on rails, I am amazed 🤩 by ruby's syntax but I kinda feel Laravel is more modern and popular. so, can you please inform me about its capabilities comparing with Laravel. Thanks, 🙏
Which is your best project that you want to share?
Tags: showdev, programming, python
Published: 2020-12-26 18:33:36

Its been nearly months since I am active here and I am super glad about being here. I scroll dev feed and forget twitter. And awesome devs sharing their great contents and we can view them for free and get advice is more awesome. 

Everyone here has done projects and how about sharing that which makes us feel proud?
Mine is **[Contour Based Writing System](https://github.com/q-viper/Contour-Based-Writing/)**.
* Where we can write something on canvas by moving our finger in front of camera on open space.
* I wrote that code on Python few months ago and also have written a [blog series from scratch about how I did it](https://dev.to/qviper/contour-based-visually-writing-system-37jj).

**Here is a Demo**
{% youtube 4pTEbBilHhw %}
Calm Breathing #dohackathon
Tags: dohackathon
Published: 2020-12-26 18:33:26

## What I built
I have built a website which offers 3 visually guided breathing exercises to calm ourselves in these troubling times.

### Category Submission: 
Program for the People

### App Link
https://calm-breathing-22hza.ondigitalocean.app/

### Screenshots
![Box Breathing](https://dev-to-uploads.s3.amazonaws.com/i/2dx63l7xektfewxa68jz.png)
![4-7-8](https://dev-to-uploads.s3.amazonaws.com/i/otfh1jc348zf9yu5kk73.png)
![7-11](https://dev-to-uploads.s3.amazonaws.com/i/zwmnexijuowoxkw8na71.png)

### Description
The website shows a circle which expands and contracts to guide inhale, hold and exhale patterns. The color patterns and a rotating pointer guide the user as well. The background image and the colors lie on the cooler side of the color palette to induce a calming effect. The website is built with basic HTML, CSS and Vanilla JS (and a little Bootstrap).

### Link to Source Code
https://github.com/rishikesh1419/calm-breathing-static

### Permissive License
MIT License

## Background
During the pandemic, as we are forced to stay indoors with little or no social interactions, a lot of people are suffering from anxiety and stress. Attending online lectures and tests, and working from home with no social life is tough. One of the easiest and the quickest ways to temporarily feel calm is by breathing properly. 'Box Breathing', '4-7-8' and '7-11' are some of the most popular breathing patterns.

### How I built it 

I was already working on a personal project of Flutter app for guided breathing. Although my work mostly involves ReactJS, for weeks I have been meaning to brush up my basic CSS and Vanilla JS skills. The DigitalOcean App Platform Hackathon provided with me an opportunity to build this website and host it. The DigitalOcean App Platform had an extremely easy method to host this static site. Moreover, automated re-builds when pushing commits to the GitHub repository turned out to be an amazing feature.


### Additional Resources/Info
- [Box Breathing](https://www.verywellmind.com/the-benefits-and-steps-of-box-breathing-4159900)
- [4-7-8 Pattern](https://www.medicalnewstoday.com/articles/324417)
- [7-11 Pattern](https://thewellbeingthesis.org.uk/foundations-for-success/stress/711-breathing/)