teleren/devto huggingface dataset:
What’s your alternative solution? Challenge #32
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-05-01 21:08:58

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Print the distance between the first 100 prime numbers

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge29

printDistances(100);

// Print distances between the first n prime numbers
function printDistances(n)
{
    var lastPrime = 2;
    var i = lastPrime + 1;
    var foundPrimes = 1;
    
    while(foundPrimes < n)
    {
        if (isPrime(i))
        {
            println(i - lastPrime, "\t", i, " - ", lastPrime);

            foundPrimes++;
            lastPrime = i;
        }
        
        i++;
    }
}

// Returns true if number n is prime
function isPrime(n)
{
    if (n < 2)
        return false;
        
    if (n == 2)
        return true;
    
    var maxDiv = Math.sqrt(n);
    
    for(var i = 2; i <= maxDiv; i++)
    {
        if (n % i === 0)
        {
            return false;
        }
    }
    
    return true;
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
How to get the date in Spanish, with the format name of the month, day and year
Tags: sql, date, mysqli, mysql
Published: 2020-05-01 20:57:15

It's normal that on a web page we want to print the date showing the name of the month, because normally what we do is print a date style 01/05/2020 and it is not ideal, since to view events in a program, blogs, among others the ideal format is to have the name of the month and in Spanish, since by default in Mysql the date appears in us format.

The following code was implemented within PHP and can be implemented for your programs:


$ res = mysqli_query ($ link, "SET lc_time_names = 'es_ES';");
$ res = mysqli_query ($ link, "SELECT id, title, DATE_FORMAT (date, '% M% d% Y') as date FROM table order by id desc limit 3");
Alternatives of man in Linux command line
Tags: linux
Published: 2020-05-01 20:46:11

When we need help in Linux command line, `man` is usually the first friend we check for more information. But it became my second line support after I met other alternatives, e.g. `tldr`, `cheat` and `eg`.

# tldr

[tldr](https://github.com/tldr-pages/tldr) stands for **too long didn't read**, it is a simplified and community-driven man pages. Maybe we forget the arguments to a command, or just not patient enough to read the long `man` document, here `tldr` comes in, it will provide concise information with examples. And I even contributed a couple of lines code myself to help a little bit with the project on Github. It is very easy to install: `npm install -g tldr`, and there are many clients available to pick to be able to access the `tldr` pages. E.g. install Python client with `pip install tldr`, 

To display help information, run `tldr -h` or `tldr tldr`.

Take `curl` as an example
![](https://www.chuanjin.me/images/tldr.png)



# tldr++

[tldr++](https://github.com/isacikgoz/tldr) is an interactive tldr client written with go, I just steal the gif from its official site.

![](https://www.chuanjin.me/images/tldrpp.gif)


# cheat

Similarly, [cheat](https://github.com/cheat/cheat) allows you to create and view interactive cheatsheets on the command-line. It was designed to help remind *nix system administrators of options for commands that they use frequently, but not frequently enough to remember. It is written in Golang, so just download the binary and add it into your `PATH`.

![](https://www.chuanjin.me//images/cheat.png)


# eg

[eg](https://github.com/srsudar/eg) provides useful examples with explanations on the command line.

![](https://www.chuanjin.me//images/eg.png)

So I consult `tldr`, `cheat` or `eg` before I ask `man` and Google.
What Did You Learn This Week --May 1?
Tags: todayilearned, discuss
Published: 2020-05-01 20:33:51

---
title: What Did You Learn This Week --May 1?
tags: todayilearned, discuss
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--TpOOUw4B--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/67bb72156h4y13zl5cio.png
series: this-week-i-learned
---
#help window.matchMedia Javascript to remember user selection on page change
Published: 2020-05-01 20:13:21

Hi, I'm having trouble trying to make my own dark-mode-toggle using javascript. So far I have the site working with a custom toggle, but when a user first lands on the site I want my javascript to be able to detect whether or not the user has an OS theme pref (white/black) and then if the user chooses to toggle to the opposite and changes pages that the local storage remembers there choice, and override's matchMedia. 

{% stackoverflow 61478423 %}
What's your ratio between direct and transient NPM dependencies?
Tags: discuss, javascript, npm
Published: 2020-05-01 19:50:37

Run the following commands and share the two numbers.

1️⃣ `npm ls --parseable --depth 0 | wc -l`
2️⃣ `npm ls --parseable | wc -l`

Also, it'd be great if you shared your tech stack. I'm curious to see if certain patterns emerge.

For example, a Sapper (https://sapper.svelte.dev) app out of the box:

1️⃣ 19
2️⃣ 263
All my Wade Wilson simple 777 symbol configures with all my Wade Wilson meanings.
Published: 2020-05-01 19:37:04

All my Wade Wilson simple 777 symbol configures is put onto all devices systems Root Actions all systems actions and all host devices systems Root Actions all systems actions also all host all layers of all brains and all bodies Root actions all outer Root actions with all my Wade Wilson meanings this device that I Wade Wilson am wording actions commands on is connected to all me Wade Wilson and I'd put forth all my Wade Wilson meanings to all worded actions commands constantly forever always reconstruct 100% perfect for all of God as known by all me Wade Wilson per each individually in 100% perfect actions ways of all of God as known by all me Wade Wilson constantly forever always in all full of all powers use all known needed to carry out all these actions constantly forever always perfectly cleansed constantly forever always no bad actions can't damage can't remove invincible indestructible invisible as unknown actions in all the quickness all at once all these actions sre constantly forever always!
Streamline Workflow
Tags: webdev, productivity, coding
Published: 2020-05-01 19:21:48

---
title: Streamline Workflow
published: true
series: Streamlined Workflow
description: It is fun to learn new developing technologies. As you try these new systems, most provide an installation bundler to get the new end user started. This bundler's work well for the beginner and help facilitate more suers trying out new technologies, or to become more interested in a specific technology.
tags: webdev, productivity, coding
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/v4j52cedpopabv84uwd9.jpg
---
It is fun to learn new developing technologies. As you try these new systems, most provide an installation bundler to get the new end user started. This bundler's work well for the beginner and help facilitate more users trying out new technologies, or to become more interested in a specific technology.

## The Problem
There is a problem? It depends. If you are working on live projects, you may want a more robust environment. Or think about the first task you do as you begin a project. For instance here is what I was doing each time I started a new React project using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html):
- Create project `npx create-react-app project-name`
- Create `src/components` directory
- Create `src/assets` directory for styles and images.
- Import my `scss`
- Delete `header` section from `App.js`
- Remove default styles
- Install `node-sass`
- Move `eslint` configuration fromm the `package.json` to a dotfile.
- Install `prettier` and import my configuration
- Import my `LICENSE` and my Renovatebot configuration (if I am deploying to a public repository).

Again, this is my workflow, and we each have our preferences. Would it not be nice to, I don't know, just start coding?

## Idea of Boilerplates
This is the idea behind using Boilerplate's &mdash; a method where our entire environment is setup to our preferences. This will be a series of articles centered around setting up a good starting environment for different project types. This series will include:

- Intro: Streamlined Workflow
- HTML with SCSS Boilerplate
- React Boilerplate

This may develop into long term series of articles that I will build over time. If you have a specific task you want to include, please send me a message on [Twitter](https://twitter.com/EclecticCoding) or an [Email](mailto:chuck@eclecticsaddlebag.com).
Setup a Blog With Hugo and GitHub Pages
Tags: hugo, blog, github, codenewbie
Published: 2020-05-01 18:55:41

If you want to share your thoughts with the world, starting an online blog is a good idea. You can use a static site generator and a free static hosting service to host your blog for free.

*Note: My experience with SSGs is not very good, I am looking for something better than Hugo for blogging.*

In this post, I will show you how I setup my blog using **Hugo** and **GitHub pages**.

## Workflow

1. Write posts in markdown.
2. Convert to a static website using hugo.
3. Commit and push to GitHub to deploy.

## Install Hugo

To build the site, hugo must be installed on your system. 

Use your package manager to install Hugo.

On macOS use [Homebrew](https://brew.sh/)

```
brew install hugo
```

On Arch linux

```
pacman -S hugo
```

For other distros and Windows, [this](https://gohugo.io/getting-started/installing/)

To check if hugo is installed, run

```
hugo version
```



## Create and Configure Site

Create a new site named 'blog'

```
hugo new site blog
```

Hugo will generate files required for a site in a new folder called blog.

Initialize an empty Git repository.

```
git init
```



A theme is required for a hugo site. Visit https://themes.gohugo.io/ and select a theme. For this tutorial, I am using notepadium. To use a theme, it should be in themes directory of hugo site. It is recommended to add theme as a [Git Submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules) because it makes easier to update themes.

```
git submodule add https://GitHub.com/cntrump/hugo-notepadium.git themes/hugo-notepadium
```

To use installed theme, add these lines to `config.toml`

```
theme = "hugo-notepadium"
```



## Write Some Content

To write a post, you can manually create a markdown file in content folder or use the Hugo cli.

```
hugo new posts/first-post.md
```

The above command will create a new file in `content/posts/` directory called `first-post.md`.

Open this file in your text editor of choice and write your first post.

Preview your site before deploying by running

```
hugo server
```

Your website will be available at http://localhost:1313/.

## Build and Deploy on GitHub Pages

Types of GitHub Pages:

- User Pages: [username].GitHub.io
- Project Pages: [username].GitHub.io/[project]

I recommend using Project Pages for blog.

In `config.toml`, add

```
publishDir = "docs"
```

This will output generated static files to docs folder. GitHub pages will deploy from this folder.

Also set `baseURL` and `title`.

Create a new repository in your GitHub account and copy its URL.

In your hugo site directory,  run

```
git remote add origin <URL-of-new-Repo>
```



Build your site by running

```
hugo
```

Then run following to deploy

```
git add .
git commit -m "First Post"
git push origin master
```

Go to GitHub repository Settings > GitHub pages. Select /docs in **Source**.

Navigate to your site at [username].GitHub.io/blog

Profit.



## To-Do

- [ ] Automate build and deploy.


---

*This is my first post on dev.to and I need your feedback, Thanks*
Top 10 VScode Extensions that I use as a mern developer
Tags: vscode, react, javascript, node
Published: 2020-05-01 18:51:50

Hi, I am a MERN developer now but I was a LAMP developer before. But now most of the time I work with React & Express. This post is about my code editor. I tried a lot of code editors & IDE’s. But finally, I am sticking with vscode for more than 1year. Today I’ll describe the extensions I use with vscode.

First I want to mention about eslint which really really helps to write better code. But it comes built-in with vscode nowadays. So it doesn’t need to mention but this is a helpful one to writing better JavaScript codes.

Second I love prettier extension which helps me to auto-format my codes and this saves a lot of time. If multiple people work on the same code then I’ll suggest using a config file for prettier. I mostly work alone on my projects so I don’t use it.

I work with react so I need a react extension for making coding easier. I use ES7 React/Redux/GraphQL/React-Native snippets which gives me a lot of benefits and I use .jsx file format so my vscode gives the jsx super easily!

About the CSS part of React JS I normally use sass or styled component. To do it in a better way I use the vscode-styled-components. This just works as exactly I wanted. So this is a daily extension for me.

Sometimes I make some basics websites too. Because Some of my clients need normal landing pages and I don’t use any extra thing over here. Just HTML CSS & vanilla JS. When I work with the HTML I use the live server extension because it really helps with the changing in real-time and really easy to work with!

About the CSS most of the time I use SCSS so I downloaded live sass compiler which works fine and easy to work with!

Now let’s talk about the theme and icon pack. I use SynthWave ’84 for theme and Helium Icon as icons. I tried a lot of different themes but honestly, I didn’t like anything that much. I like SynthWave ’84 because it’s a really cool vibe. Let me know if you use it too!

This is the most used vscode extensions from my end.

Another one I want to mention is a debugger for chrome. But I use it less.

Also if you are just working with the JavaScript then I’ll suggest using jshint too!

# Recap
- Eslint
- Prettier
- ES7 React/Redux/GraphQL/React-Native snippets
- vscode-styled-components
- live server 
- live sass compiler
- SynthWave ’84
- Helium Icon
- Debugger for chrome
- jshint

Vscode is amazing and I love to use it.

Let me know which ones you use?

See the instagram version

{% instagram B_FBIS3ARVC %}


I’ve started a programming community on discord. Click to join [Discord Channel](https://discord.gg/uDj2JtH)

I've two free PDF for you
- [Learn JavaScript in 30 Days](https://blog.nerdjfpb.com/javascript-in-30-days-free-pdf/)
- [Node JS In 30 Days](https://blog.nerdjfpb.com/node-js-in-30-days-free-pdf/)

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/top-10-vscode-extensions/).

You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) or [instagram](https://www.instagram.com/nerd_jfpb/)  !
How to Safely use Google Application Credentials on Heroku
Tags: heroku, git, security
Published: 2020-05-01 18:06:35

---
title: How to Safely use Google Application Credentials on Heroku
published: true
description: Google expects credentials in a json file. Any file to be deployed to heroku must be in git. But credentials are sensitive info that should never be in git. So what do we do ? 
tags: heroku, git, security
canonical_url: https://learnings.desipenguin.com/post/goog-cred-heroku/
cover_image: https://images.unsplash.com/photo-1562813733-b31f71025d54?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=600&fit=crop&ixid=eyJhcHBfaWQiOjF9
---

*This was originally posted on my blog, [here.](https://learnings.desipenguin.com/post/goog-cred-heroku/)*

## Problem ##

If you have deployed an app on heroku, you know that the **only** way to get any files there is via git.
Normally this is fine, but Google API expects an environment variable `GOOGLE_APPLICATION_CREDENTIALS` that points to a json **file**.

If you google, you might come across tutorials like [this](https://towardsdatascience.com/tutorial-google-vision-api-with-python-and-heroku-3b8d3ff5f6ef) or even [SO answer](https://stackoverflow.com/questions/57126545/how-to-authenticate-google-vision-api-credentials-on-heroku-using-node-js)

Essentially they tell you to commit the `json` file downloaded from Google into git. Since heroku does not have a *file system* per se, there is no way to get the json file to heroku.

**But** ..... this file should **never** be in git. The file contains your
security credentials, and it is (indirectly) linked to your credit card.

Even if hacker does not get (direct) access to your credit card, if they use *your* credentials, *your* account will get billed (once you go over quota) and google will charge *your* credit card.

So putting the credentials json file in git is a bad idea.

So what should a developer to do ?

## Solution ##

The *workaround* is to store the contents on json file in an environment variable, and at runtime, create the json file on-the-fly by reading the environment variable.

But there is better option, use this [Custom Build pack](https://elements.heroku.com/buildpacks/elishaterada/heroku-google-application-credentials-buildpack)

Even better, Create `.profile` file in your repo, and create the json file from the environment variable. [No buildpack required.](https://github.com/elishaterada/heroku-google-application-credentials-buildpack/pull/5#issuecomment-547896688)

### Commands ###


* On your local machine, where you have downloaded the `credentials.json`
  * Store the JSON contents in environment variable :  `heroku config:set GOOGLE_CREDENTIALS="$(< credentials.json)"`
* Create a `.profile` and put this in it : `echo ${GOOGLE_CREDENTIALS} >
  /app/google-credentials.json`
  * This will create the file on heroku's ephemeral file system each time a dyno
    is booted.
  * Commit this `.profile` in the root of your git repo
* Point to the file as Google API expects.
  * `heroku config:set GOOGLE_APPLICATION_CREDENTIALS=/app/google-credentials.json`
* 🎉
Animated curves in SVG
Published: 2020-07-01 05:37:57

---
title: Animated curves in SVG
published: true
date: 2020-05-01 17:42:00 UTC
tags: 
canonical_url: 
---

```html
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" style="cursor:pointer;" viewBox="0 0 200 200">
  <style>
    path {
      fill: black;
      stroke-width: 1px;
      stroke: #000;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: 2s;
    }
    path:hover {
      d: path("M 10 170 C 42.5 170, 42.5 170, 95 170 S 137.5 170, 180 170 L 180 180 H 10 Z");
    }
  </style>
  <path d="M 10 80 
           C 40 10, 65 10, 95 80 
           S 150 150, 180 80
           L 180 180
           H 10
           Z"></path>
</svg>
```

{% jsfiddle https://jsfiddle.net/annoyingmouse/mzunqtsd/ result %}

The animation is triggered on hover over the path above.

A mate asked about animating an SVG yesterday and it got me thinking about how to do it using CSS.

The original is [here](https://jsfiddle.net/annoyingmouse/bkoq5mvj/), but I like this version as the points also move. After reading a lot from the [MBN web docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) I figured out that the **S** stole a control point from the preceding **C**.

```html
<svg width="100%" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 200">
  <style>
    #curve-holder {
      cursor: pointer;
    }
    #curve-holder rect {
      fill: #fff;
      stroke: none;
    }
    #curve-holder path {
      fill: #000;
      stroke-width: 1px;
      stroke: #000;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: 2s;
    }
    #curve-holder:hover path {
      d: path("M 0 180 Q 50 180, 100 180 T 200 180 T 300 180 T 400 180 T 500 180 T 600 180 L 600 200 H 0 Z");
    }    
  </style>
  <g id="curve-holder">
    <rect x="0" y="0" width="600" height="200"></rect>
    <path d="M 0 100 Q 50 -50, 100 100 T 200 100 T 300 100 T 400 100 T 500 100 T 600 100 L 600 200 H 0 Z"></path>
  </g>
</svg>
```

{% jsfiddle https://jsfiddle.net/annoyingmouse/74rq6e30/ result %}

Then I got to playing with quadratic curves. The result is above.
Learn, unlearn and relearn
Tags: learn, unlearn, relearn
Published: 2020-05-01 17:08:18

---
title: Learn, unlearn and relearn
published: true
canonical_url: https://ganesshkumar.com/2013/09/01/learn-unlearn-relearn.html
description: Learn, unlearn and relearn
tags: learn, unlearn, relearn
---

> The illiterate of the 21st century will not be those who cannot read and write, but those who cannot learn, unlearn, and relearn - Alvin Toffler

Schools and Colleges play a vital role in teaching us. These institutions often tend to force their students to learn more and more, without mastering the fundamentals. Students who love their subjects and enjoy their books are becoming hard to find day by day. Industries view degree holders as an abstracted and tuned resources for their need.

So, “learning” has not been given the due respect by all the players: students, educational institutions and industries.

What about unlearning and relearning? Do they really make sense in our existing system?

Unlearning and relearning are tightly coupled and usually happens together.

Unlearning and relearning do not mean that one should forget the things he had learnt and learn it again at some point of time in his life. This is a very common misinterpretation I find among the people who know this quote. I have even seen people quoting “Tower of Hanoi” as an example where you have to decouple the things you have built to arrive at the final solution. I call this as a fictional example where they try to unlearn by demolishing something that is there.

Unlearning happens when you are open to new prospective to the things you already know. Relearning happens when you accept a new perspective and appreciate your knowledge from that perspective. Together they will help you to overcome your misconception and misunderstanding that was there from the time you learnt something new.

When we learn something for the first time, we will be focusing to get a bigger and abstracted view of it. We ignore small and important features. After learning something, a small discussion with friends or teaching someone or trying to summarize your learning will make you realize the minute details that you have missed when you learnt it.

Unlearning and relearning applies not only for education; but also to any form of knowledge or skill that we acquire. Our knowledge and skill can to be improved day by day.

Be open to thoughts. Keep learning, unlearning and relearning.

**TL; DR**: Be open to new perspective – clear out your misunderstandings – improve your understanding.