teleren/devto huggingface dataset:
The Best Way To Learn JavaScript – 100Days of JavaScript
Tags: javascript
Published: 2021-05-13 19:01:36

Hello, my name is zino and I am a web developer.
I started learning JavaScript a few years back and at first, I didn’t like the language. It seemed like there was too much theory to understand before one could really understand JavaScript enough to build decent projects.
So, I got discouraged and left it.
But a few months later, I heard someone say that the best way to learn JavaScript is to first learn the fundamentals and then, start building projects.
I decided to try this approach to learning JavaScript.
Initially, it was hard because I didn’t yet know how to think like a programmer and break problems into small pieces, but after a while, I started to gain clarity with JavaScript

Since then I have built 100’s of projects with JavaScript.
Here is a list of JavaScript Projects you can build:
1.	Counter App
2.	Random Hex Color Generator
3.	Random Number Generator
4.	Modal/Popup
5.	Palindrome Checker
6.	Vowel Counter App
7.	Click to Copy
8.	Google Drive Download Link Generator
9.	Weather App
10.	Input Field Character Counter
11.	Lyrics Search App
12.	Internet Connection Status Detector
13.	Quiz App
14.	Music player
15.	HTTP Request Project
16.	Random Quote Generator
17.	List Search Project
18.	Date Countdown
19.	Time Countdown
20.	Tip Calculator
21.	Smooth Scroll Effect
22.	Sticky Nav Bar on Scroll
23.	Active Menu Switcher
24.	Responsive Mobile Menu
25.	Responsive Mobile Menu with Submenu
26.	Page Scroll Indicator
27.	Newsletter Form on Scroll
28.	Password Generator
29.	Simple ToDo App
30.	Todo App with Local Storage
31.	Notes App
32.	BMI Calculator
33.	Calculator
34.	Digital Clock
35.	Weight Converter
36.	Temperature Converter
37.	Running Game
38.	Word Count Tool
39.	Accordion
40.	Async Await - Random Joke Generator
41.	Speech to text app
42.	GitHub Profile Search App
43.	Wikipedia Search App
44.	Image Slider
45.	Lyrics App
46.	Product Filter
47.	Product Carousel Slider
48.	Vertical Tabs
49.	Count Up App
50.	Form Validation
These are some projects you can try out.

I created a course titled 100 Days of JavaScript that can help you sharpen your JavaScript skills by building a project everyday for 100Days.

Feel free to check it here -  [100 Days of JavaScript](https://www.udemy.com/course/100-days-of-javascript/?referralCode=9FB1A91BA3B143B2A261)

Thanks for reading.
There are infinite Prime Numbers
Tags: algorithms, math, proof, programming
Published: 2021-05-13 18:57:37


**Consider the below statement**
> 
There is an Infinite number of Prime Numbers.

I know you guys will think that it is obvious. 
But if you think deep, you will notice that it is not straightforward because as the number increases, the density of the prime number decreases. If the number is large enough, then we may not get any prime number after that. Moreover, for large numbers, the chances that it has a factor are more because more numbers are candidates for its factor.

### How to prove the infiniteness of prime numbers?


There are many methods, but the one I love most is **Euclid's method**. It is based on the **Proof By Contradiction** method.

It follows as following.



- Assume there is a finite number of prime numbers. Then We can list down all the prime numbers as 
```{p1, p2, p3 ... pn} ```, where pn is the largest prime number.  Note that the size of the list is finite.

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

- Now consider a new no. N as
```N = p1 * p2 * p3 ... * pn + 1``` 


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

- We can see that N is greater than ``` pn ```, (largest prime number in the above list). 
- **For N, either of the two cases is true**

    1. It is a prime number
    2. It is a composite number



- **If N is a prime number**:  We got a new prime that was not included in the list.
- **If N is a composite number**: We can express it as the product of primes. But we can see N is not divisible by either of p1 or p2 .... or pn. So, if N is a composite number, then there must exist a prime factor of N which is not already in the list.

In both cases, we can get new prime numbers that are not on the list.

So our assumption that prime numbers are finite is wrong.

**So there are an infinite number of primes**

*Thanks for Reading. Follow me for amazing content.*
I'm looking for readings, blogs, books, opinions about PMing software meant for developers/engineers
Tags: question, product, management
Published: 2021-05-13 18:45:28

---
title: I'm looking for readings, blogs, books, opinions about PMing software meant for developers/engineers
published: true
description: Looking for resources and well thought out opinions! Thanks :)
tags: question, product, management
cover_image: https://miro.medium.com/max/4000/1*EIY95KElcimEmMc9yI7dig.png
---

I was thinking about this excellent article called [Product Management for the Enterprise by Blair Reeves](https://medium.com/@BlairReeves/product-management-for-the-enterprise-f1118798376f).

Is there something like this for when your customers look a lot yourself? Or when they know what great software looks like? Or when they have strong opinions about features?

How is building software for engineers and software teams different to other customers? What are the nuances?

Thanks for any help/direction!
Apple’s AirTag Security Concerns, a Deep Neural Network Hack, & more on DevNews!
Tags: news, podcast
Published: 2021-05-13 18:37:33

---
title: Apple’s AirTag Security Concerns, a Deep Neural Network Hack, & more on DevNews!
published: true
description: Listen to S4E4 of the DevNews pod!
tags: news, podcast
series: DevNews Season 4
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zoxvbu0494gq3sxtjp4v.png
---

@saronyitbarek and I are back for another episode of hot tech takes and developer news demystification...

{% podcast https://dev.to/devnews/s4-e5-apple-s-airtag-security-concerns-a-deep-neural-network-hack-an-oil-pipeline-cyber-attack-and-a-shortage-of-semiconductors %}


### **In this episode, we cover...**
- Apple’s AirTag security concerns (the anti-stalking features you've heard about might not be cutting it)
- A US oil pipeline cyberattack and shutdown (ransomware attacks affect all industries, unfortunately) 
- A shortage in semiconductors (semiconductors, MEGA short supplies)

We also chatted with [Sanghyun Hong](twitter.com/sanghyun_hong) and [Yigitcan Kaya](twitter.com/yigitcankaya1) — Ph.D. students in Computer Science at the University of Maryland College Park, and co-authors of a research paper about how hackers could make AI networks consume much more energy than they already do.
 

Thanks for tuning in!


_You can [follow DevNews](dev.to/devnews) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## **Quick Listening Links**
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s4-e5-apples-airtag-security-concerns-deep-neural-network/id1525581923?i=1000521592596)
- [Spotify](https://open.spotify.com/episode/7s3kj5xtQmio9EIHigaADW)
- [Google](https://podcasts.google.com/feed/aHR0cDovL2ZlZWRzLmNvZGVuZXdiaWUub3JnL2Rldm5ld3NfcG9kY2FzdC54bWw/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZuZXdzLzI5?sa=X&ved=0CAQQkfYCahcKEwiwrbzHo8fwAhUAAAAAHQAAAAAQCA)
- [Stitcher](https://www.stitcher.com/show/devnews/episode/s4-e5-apples-airtag-security-concerns-a-deep-neural-network-hack-an-oil-pipeline-cyber-attack-and-a-shortage-of-semiconductors-83928383)
- [Listen Notes](https://www.listennotes.com/podcasts/devnews-dev-fH8hvsClkWp/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevNews-p1352512/?topicId=163027033)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [Transcript](https://devpods.dev/podcasts/devnews/episodes/162)

_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- Our season four sponsors, [Scout APM](https://scoutapm.com/devnews) and [Rudderstack](https://rudderstack.com/) ❤️ 

![Valerie Cherish Newsflash](https://media.giphy.com/media/5xaOcLyzuYxpQyCgy9G/giphy.gif)
Laravel 8 Custom Login and Registration Example
Tags: laravel, login, registration
Published: 2021-05-13 18:35:12

Hello, how are you doing? Today, I am going to teach us how to do user authentication in Laravel 8. As you all know, the Laravel team released the latest version last week which is Laravel 8, and as expected, there is some difference between the previous Laravel 7 and this present version. Some of the difference is highlighted in my previous post on how to create a CRUD application with, Laravel 8, it is a step by step guide in creating a CRUD Project Management app.
Previously, in Laravel 7 and Laravel 6 in other to do user authentication, we use an artisan command composer require laravel/ui while from Laravel 5.9 downwards uses php artisan make:auth

In Laravel 8, there is a major change in that area in the sense that many things are introduced and a lot of configurations have been done to get you started and not minding the boilerplate of your application, one of those changes is the introduction of Jetstream, Laravel Jetstream is a beautifully designed application scaffolding for Laravel. A major shift from the legacy authentication UI of Laravel.

Click on my profile to follow me to get more updates.

Without saying much, let’s dive into the new features of Laravel 8.

Step 1: Install a new Laravel app
composer create-project laravel/laravel projectapp --prefer-dist

The command above only install Laravel, however, if you want to install Jetstream together then either

Laravel new projectapp --jet

or

composer require laravel/jetstream

we are going with the first of only installing Laravel, I want to explain other things in the process.

I highlighted some changes noticed in the installation of Laravel 8 from the previous Laravel versions, you can check them out in my previous post Laravel 8 CRUD.

[Laravel 8 Custom Login and Registration Example](https://www.codecheef.org/article/laravel-8-custom-login-and-registration-example)
Accessing private repositories for Composer using Docker
Published: 2021-05-13 17:31:26

---
title: Accessing private repositories for Composer using Docker
published: true
date: 2021-05-13 17:30:43 UTC
tags: 
canonical_url: https://adithya.dev/accessing-private-repositories-for-composer-using-docker/
---

When I run `docker-compose run --rm composer update`, it always tries to pull in the latest version of my package from Github. Since `--rm` automatically remove the container when it exits, Composer cannot store the token in `/tmp/auth.json`

On your docker-compose.yml, include a volume mapping for your /tmp location under volumes:

`- ./composer:/tmp`

Create a file named `auth.json` and include this:

```
{
  "http-basic": {
    "github.com": {
      "username": "",
      "password": ""
    }
  }
}

```

Make sure you version control it at this point and you can ignore the composer/cache\* folders as well. Now insert your username and [Personal access token](https://github.com/settings/tokens). Running the update statement should no longer ask for your credentials every time.
[Storyblok, Gatsby] ERROR #98124 WEBPACK Generating SSR bundle failed Can't resolve 'prop-types'
Tags: gatsby, storyblok, npm, webpack
Published: 2021-05-13 17:26:20

Hi there!

I'm Arisa, a DevRel from this June living in Germany🇩🇪 (Big announcement is coming this June, stay tuned😎)

I have a free online programming learning community called [Lilac](https://note.com/frontendlifeinde/m/m9b8feda1d547), with [free hands-on Frontend e-books](https://zenn.dev/arisa_dev/books)👩‍💻

# Who is this article for?

- Anyone got the error - "ERROR #98124 WEBPACK Generating SSR bundle failed Can't resolve 'prop-types'"
- Anyone uses Gatsby.js project with npm
- Anyone who enjoys [Storyblok: "Add a headless CMS to Gatsby.js in 5 minutes" hands-on tutorial blog post](https://www.storyblok.com/tp/add-a-headless-cms-to-gatsby-5-minutes)

> [Storyblok: "Add a headless CMS to Gatsby.js in 5 minutes" hands-on tutorial blog post](https://www.storyblok.com/tp/add-a-headless-cms-to-gatsby-5-minutes)

# What was the error?

Well, actually, it looks very similar to my previous blog post.

> [[Gatsby, Storyblok] "Can't resolve 'fs' in x"](https://dev.to/arisa_dev/gatsby-storyblok-can-t-resolve-fs-in-x-4f4m)

![gif](https://media.giphy.com/media/1dPbC5UqbiQd0K8rRg/giphy.gif)

No no no, it's not😅

This time is "prop-types" instead of fs.

```
 ERROR #98124  WEBPACK

Generating development SSR bundle failed

Can't resolve 'prop-types' in '/Users/.../gatsby-storyblok-project/node_modules/gatsby-react-router-scroll'

If you're trying to use a package make sure that 'prop-types' is installed. If you're trying to use a
 local file make sure that the path is correct.
```

My environment is here👇

- npm: 6.14.11
- Node.js: 14.16.0

```javascript
  "dependencies": {
    "gatsby": "^3.4.1",
    "gatsby-plugin-gatsby-cloud": "^2.4.1",
    "gatsby-plugin-image": "^1.4.0",
    "gatsby-plugin-manifest": "^3.4.0",
    "gatsby-plugin-offline": "^4.4.0",
    "gatsby-plugin-react-helmet": "^4.4.0",
    "gatsby-plugin-sharp": "^3.4.1",
    "gatsby-source-filesystem": "^3.4.0",
    "gatsby-source-storyblok": "^3.0.1",
    "gatsby-transformer-sharp": "^3.4.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "storyblok-js-client": "^4.0.9",
    "storyblok-react": "^0.1.2"
  },
  "devDependencies": {
    "prettier": "2.2.1"
  },
```

# How this error occurred?

Installed by npm was the gotcha in this case.

I didn't realize that until I saw the solutions below.

# A solution

It was dead simple.

![gif](https://media.giphy.com/media/l2SqewO5AYDfST99C/giphy.gif)

Install with yarn instead of npm as Gatsby suggested in these sources.

It works totally fine as you find in Gatsby GitHub issue below👍

> [ERROR #98124 WEBPACK Generating SSR bundle failed Can't resolve 'prop-types' in 'C:\Users\MYNAME\node_modules\react-typography\dist'](https://github.com/gatsbyjs/gatsby/issues/26637)

> [Error: Cannot find module 'react' - after installing Plugin
](https://github.com/gatsbyjs/gatsby/issues/18048)

Hope you found some relevant info from what you're looking for!
¿Como hacer un Deploy a Firebase Hosting?
Published: 2021-05-13 17:13:41

1. Ir a [https://console.firebase.google.com](https://console.firebase.google.com/u/0/?hl=es-419&pli=1) e iniciar sesión, si no posees una cuenta, debes registrar un usuario con tu correo gmail.

2.  Una vez accedas a Firebase console podrás observar las apps que tienes disponible, si deseas crear otra app, ve a la opción crear aplicacion. En nuestro caso usaremos “ThanosLanguages”
    
3.  Ir a la terminal del sistema operativo e instalar las Firebase Tools con el siguiente comando: `npm install -g firebase-tools`, si en caso usas yarn, debes usar `yarn add -g firebase-tools`
    
4.  Luego debes iniciar sesión desde tu terminal con el comando: `firebase login,` si en caso ya estás logeado, verás un mensaje similar a “**you are logged as 'correo**’”, caso contrario te abrirá el navegador, e inicias sesión con tu cuenta de Firebase. (si en caso estás logueado y deseas cerrar sesión usa: `firebase logout`).
    
5.  Inicializar el proyecto en la ruta raíz con el comando: firebase init.
    
6.  Se listara serie de opciones en nuestro caso usaremos la opción hosting (con arrow up/arrow down mover entre opciones y space key para seleccionar opción, luego enter).
    
7.  Se listara los proyectos disponibles a tu usuario Firebase, en nuestro caso debemos seleccionar CocomioLanguages, y luego enter
    
8.  Opciones:

- What to you want to use as public directory: dist

- configure as a single page app(y/N) y

1.  Se creará la carpeta dist (puedes borrarla es opcional).
    .
2.  Compilar la app desde la raíz del proyecto, usando uno de los siguientes comandos:

*   `npm run build`
*   `yarn build`

1.  Se debe subir lo que esta en la carpeta build, por lo tanto debemos abrir el archivo “firebase.json” y dejar con una estructura como:

```
{“hosting”:{

   “public”: “build” /*solo cambiar dist por build */,

     …

  }

}
```

1.  Ejecutar el comando: `firebase deploy`

Recibirás un mensaje de éxito, y podrás ver la Url e ir a la Url y listo
#hacktoberfest2020
Published: 2021-05-13 16:37:09

#+8PR 

8 months later our #contribution to #openSource @darjyo donated the proceeds to plant a tree and the developer in me chose the limited edition swag🙊

@github @thedigitalocean @intel @thepracticaldev @jetbrains @cockroachdb @circleci >>> Creating a better software ecosystem.

Help me ofset our CO2 emmisions here: https://tree-nation.com/seeds/view/1568927 @treenation_org
Laravel 8 Admin Panel With Login & Registration
Tags: laravel, bootstrap, php, tutorial
Published: 2021-05-13 16:34:18

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98d1x19auc2npz8xetqq.png)

## SB2 - Admin Panel

Today I am going to explain a simple and beautiful Admin Panel Integration in Laravel 8.

In This, I Have Used [Laravel 8 With Auth Scaffolding](https://dev.to/shanisingh03/laravel-8-authentication-7fb) and Free [SB2 Bootstrap Admin Templates](https://github.com/StartBootstrap/startbootstrap-sb-admin-2).

I have Explained every step in this video you can watch and try this out, 

{% youtube DLU8YF2WrWk %}

The Final Implementation [Github Repository](https://github.com/TechTool-India/ExampleProject/tree/sb2-admin-installation) you can download this and can use it for any project.

Some Final Output Screens are here

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2apj20g05trqnm22iwf.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cxiqf3jakua6m94kky4.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cn80gq98naqckuaj2vb3.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9m8qknkqa2zml5r9k1xd.png)

Thank You for Reading

Reach Out To me.
[Twitter](https://twitter.com/shanisingh03)
[Instagram](https://www.instagram.com/shanisingh03/)
[TechToolIndia](https://youtube.com/techtoolindia)
Why C++ is most preferred for competitive programming?
Tags: codenewbie, watercooler, computerscience, programming
Published: 2021-05-13 16:27:16

### Competitive coding is like a mind sport where you run your brain and apply logic for solving questions.

**But I guess you always struck with a questions that why maximum programmers preferred *C++* for doing so**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5a0vnuw8ozrd6i7zvdrt.jpeg)

#### Here are the reasons.
* It offers a library called STL (Standard Template Library). STL is a collection of C++ template classes that provides common data structures and functions.
* C++ is a Object Oriented Programming language as well as Procedural Oriented Programming language. Which make it so easy to use on given conditions. 
* C++ is little faster as compare to others languages like **Python** or **Java**.
* Writing functions in C++ is more easy and efficient as compare to java , while writing functions in Python is also efficient but major factor to analyse is speed.
* Implementing *Data structures* is quite easy.


#### C++ is totally a beginner friendly language which seems to be very addictive once you fall in love with it.

### That's a short introduction about it hope you find it useful.

**Thank you**
**Rishabh Dwivedi**
**3 star codechef.**
View Counter - Rails 6
Tags: rails, ruby, tutorial
Published: 2021-05-13 16:20:38

## Introduction

Having a view counter is a common thing when it comes to blog posts, tutorials, videos, etc... I wanted to have a view counter for a simple blog post app. I did some quick googling and found out about a gem called [punching_bag](https://github.com/biola/punching_bag). It is a very easy gem to use, I will be saying that a lot. Let's get started on showing you how to have a simple view counter for your rails application.

## Installing Punching Bag

Installing this gem is very easy to do. It all starts with you adding the gem to your gemfile:

```gem “punching_bag”```

After you have the gem in your gemfile you will need to run three commands in your terminal:

To start off, you need to run `bundle install` as usual. After you run bundle you need to run the generator for punching_bag:

`rails g punching_bag`

This will generate a table in your database called punches, which means you need to run `rails db:migrate`.
Once you got your database migrated, go into your Post Model and add this line of code:

```
acts_as_punchable
```

Adding this will allow you to get the amount of hits/views on your posts. One last step, and that is to go into your PostController under the show method and have a punch with a request like so:

```
@post.punch(request)
```

Congrats you have successfully installed punching_bag and configured it to work with your views. Sweet, let’s add a view counter to your views.

## The Views

Using the gem in your views is very simple as well. To be honest, using the gem is very simple. For you to see a view counter in your views you need to call the hits like so:
```
Views: @post.hits
```
That’s it you can now see how many views a Post has. That’s it, simple right? If you want to have your index for the posts to show the most viewed post at the top, that would be in your controller under the index method:
```
@posts = Post.most_hit
```
Now on your index posts page you can see that the post with the most views will be at the top. It’s like adding a scope but the punching bag gem already does that for you.

## Conclusion

The punching bag gem is easy to use and works like a charm. Personally, using this gem is the best way to show views. I hope this helped you for your application. If you need any more information about the gem please visit the github link, [Punching Bag](https://github.com/biola/punching_bag).
Accessible Content
Tags: a11y
Published: 2021-02-08 14:10:11

When I was first learning about accessibility on the Web, I stumbled across [WebAIM](https://webaim.org) (Web Accessibility In Mind), a fantastic resource for all things accessibility.

They have a ton of great articles focusing on different aspects of web accessibility, but one of my favorites I keep going back to is [Constructing a POUR Website](https://webaim.org/articles/pour/). It helps unravel the [Web Accessibility Guidelines principles of accessibility](https://www.w3.org/WAI/WCAG21/Understanding/intro#understanding-the-four-principles-of-accessibility) and helps shift the focus away from *how* to make content accessible to *why*.

In summary, the WCAG guiding principles state that **accessible content is perceivable** (people can perceive the content with any of their available senses), **operable** (people can interact with the content as needed), **understandable** (people can understand the content and how to navigate it), **and robust** (the content can be interpreted by an array of technologies). These principles form the acronym POUR, which is an easy way to remember them.

To explore these principles in more depth, check out the article. And if you have any questions or would like to discuss it, feel free to [reach out to me on Twitter](https://twitter.com/therealboone).