teleren/devto huggingface dataset:
Everything you know about JSON.parse() and JSON.stringify()
Tags: json, javascript
Published: 2020-09-06 08:50:40

####JSON.stringify()
> Transforms a Javascript object to a JSON string.
> A common use of JSON is to exchange data to/from a web server.
> When sending data to a web server, the data has to be a string.
> Convert a JavaScript object into a string with `JSON.stringify()`.

Example:
_Imagine we have this object in JavaScript:_
``` 
const student = {
    name: "Alex",
    age: 20,
    email: "alex@gmail.com"
};

const studentStr = JSON.stringify(student);
console.log(studentStr);

{ "name":"Alex", "age":20, "email":"alex@gmail.com"}
```

#####Stringify a JavaScript Array
> It is also possible to stringify JavaScript arrays.

Example:
_Imagine we have this object in JavaScript:_
```
const arrName = [ "John", "Peter", "Sally", "Jane" ];

const jsonName = JSON.stringify(arrName);
console.log(jsonName);

["John","Peter","Sally","Jane"]
```


####JSON.parse()
> Takes a JSON string and transform it into a Javascript Object.

Example:
_Imagine we received this text from a web server._
We will take the `studentStr` sample above.

```
const jsObject = JSON.stringify(studentStr);
console.log(jsObject);

Object { age: 20, email: "alex@gmail.com", name: "Alex" }
```
Codewars Kata: Counting sheep… with Python
Tags: python, codenewbie, 100daysofcode, codewars
Published: 2020-09-06 08:45:30

{% youtube ExoB1MrBc9A %}

To solve this problem, we’ll take 5 different approaches.
Enjoy the video 😀🙏

Also written version https://losseff.xyz/katas/010-counting-sheep/python/
Understanding Docker step-2
Tags: docker, kubernetes, helm, circleci
Published: 2020-09-06 08:10:57

### **Explain**

Docker is all about containerization. It is an open-source project used to run containerized applications.

Containers are isolated platform in which applications run independently.

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



All the dependencies, npms, environment variables, network ports or anything required to run the application can be added to the container with the help of Dockerfile to run the docker images which is the build image of the application.

The application running in the container can be accessed from outside the container if exposed.



```dockerfile
FROM node:11.8.0-alpine

WORKDIR */usr/src/app*

COPY *package.json* *.*

RUN *npm* *install*

copy *.* *.*

EXPOSE *3100*

CMD "node" "server.js"
```





Dockerfile is a synchronized set of command written in an easy-to-understand syntax that includes the instructions to build a Docker image.

Dockerhub is a public repository and can be used to pull and push images publicly. There are plenty of official images like node. Many private repository/registries are available and GCR is the one which is being used in this series.

To build the image:

```docker build ${url of dockerfile}```



To expose the application running in the container, a mapping of inter-port and external port is required.

``` docker run [OPTIONS] ${internal-port}:${external-port} ${IMAGE ID} ```

After building the image, image id will be available in images list.:

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



After running the container, container id will be available:

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

#### Few docker commands

'docker ps' -  list of running container

'docker' - list of images

'docker run' -  to run the image

'docker rm' - to remove resource image/container

'docker build' - to build for dockerfile

*video of complete setup and implementation of docker*
{% youtube u34-4hybknY %}

For Gcloud setup --> https://www.youtube.com/watch?v=A-3yY594Oko&t=27s
xs:code Developer Spotlight: Matfish2
Tags: opensource, developers
Published: 2020-09-06 07:43:03

We’re proud to have reached an exciting milestone more recently here at xs:code. More than [1000 developers](https://twitter.com/xscode1/status/1299361703306633219) decided to be part of the evolution of open source by monetizing their projects. We’d like to shine a spotlight on some of the innovative and creative developers that make up our community, as well as their projects, with our Developer Spotlight series.

[Find out who our first developer is and what is their open source repository by checking out our blog.](https://blog.xscode.com/1343/xscode-developer-spotlight-matfish2/)
Conversion of SSH2 private key to openSSH format using PuTTYgen
Tags: mercurial, hg
Published: 2020-09-06 07:31:19

### Problem Statement 
While working on mercurial(Version Control System), we need to generate different public/private keys for windows & Linux, which leads to have multiple keys for single user.


### Solution

If we want to access mercurial through Linux with your same key as Windows, then instead of generating a new rsa key pair ,we can reuse same public/private key pair to access mercurial from linux.
Hence same repository you can access via windows or linux without creating separate public/private key pair for both.

### STEPS :

Pre-requisite: There must a key pair existing in SSH2 format to access mercurial`

```
1. Open the PuTTY Key Generator
2. On the menu bar, click "File" -> "Load private key"
3. Select your <filename>.ppk file
4. On the menu bar, click "Conversions" -> "Export OpenSSH key"
5. Save the file as <filename> (without an extension) e.g. mercurial_rsa
```


You are all done. Same private key on windows can be reused(with above steps) with Linux.
Toast Messages Using CSS
Tags: css, html, weeklyui, design
Published: 2020-09-06 07:27:35

Toast is mostly used for a show message on website users for error or success purposes. So here made simple and attractive Toast Messages Using CSS and HTML tags.

In this Toast message, we used simple icons and HTML tags for heading and for descriptions used paragraph tag. Also, we used CSS flexbox properties and for responsive we used CSS media quires.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/toast-messages-using-css/)
Generate your asp.net core application with JHipster.NET 
Tags: csharp, dotnet, jhipster, opensource
Published: 2020-09-06 07:00:34

JHipster is a well-known platform for generating modern application in java world.

JHipster provides a blueprints system that allows to override default behavior of the generator 

## JHipster.NET 
https://github.com/jhipster/jhipster-dotnetcore

JHipster.NET is a blueprint that overrides the back-end part, originally generated in spring boot, by back-end in asp.net core. For the front-end all the common language can be used (angular, react)

## Generate your first application :

Installation of the blueprint 

```bash
npm install -g generator-jhipster-dotnetcore
```

Call the generator

```bash
jhipster --blueprints dotnetcore
```

After running this command you have few questions to answer, as Application name, authentication mode, client framework etc 
Once it's done, you can build and run your application.

```bash
dotnet run --verbosity normal --project ./src/YourAppName/YourAppName.csproj
```

Your first application is ready and you can now use it with default user like JHipster (admin admin or user user)

Ok now you have an application but without entity. 
JHipster allow you to add entity with cli or with jdl file (add link)
JHipster.NET have the same behavior.

```bash
jhipster entity <entity-name>
```

Or with jdl 

```bash
jhipster import-jdl my_file.jdl
```
You can edit jdl with https://start.jhipster.tech/jdl-studio/

You have now an application with CRUD operations on each new entities with potentially link between entities (one-to-one, many-to-one or many-to-many)

Default configurations are availables in the generated project. As an example, a docker compose file is generated with monitoring solutions (influxdb telegraf and chronograf or grafana)

The repository : https://github.com/jhipster/jhipster-dotnetcore
Sample project : https://github.com/jhipster/jhipster-sample-app-dotnetcore
Easy Automatic File Backups with Borg | Ubuntu 18.04
Tags: linux, ubuntu, bash, automation
Published: 2020-09-06 06:35:34

> "And when they ask us what we're doing,
> you can say, We're remembering.
> That's where we'll win out in the long run."
> -- Ray Bradbury (Fahrenheit 451)

Cross post from [my blog](https://isaiahnixon.com/automatic-file-backups/).

# The Problem

Have you ever deleted a file and two days later needed to download it again? Have you ever done this with files that take forever to re-download? Me too...

# The Solution

Create automated backups of your downloaded files.

This sounds like it could be cumbersome and resource-intensive. However, I recently discovered [BorgBackup](https://borgbackup.org) (Borg) and it was neither.

## Step by Step

Also available as a [Gist](https://gist.github.com/isaiahnixon/f452cb1a0d505ed1381312c18e767295), and a [YouTube walkthrough](https://youtu.be/G_hCmAfVKAM).

The following commands are set up for Ubuntu 18.04 but should translate to any major operating system without too much hassle.

1. Create a directory.

```
mkdir bkp
```

2. Install Borg.

```
sudo apt install borgbackup -y
```

3. Create the repository.
```
borg init --encryption none bkp/
```

4. Add crons job taking backups and cleaning up old ones.

```
crontab -e
```

Using your text editor, add the following lines:
```
0 12 * * * borg create ~/bkp::Downloads-$(date '+\%m-\%d-\%Y') ~/Downloads/
0 13 * * * borg prune -v --list --keep-within=7d ~/bkp
```

## Note on Extraction:

When extracting files using Borg, the directory structure in the backup will be the true system path of the directory that you backed up. For this reason, you must specify the system path when extracting the backup to a folder other than the source folder. For example:

```
borg extract ../bkp::Downloads-09-05-2020 home/e/Downloads
```

On my system, this command extracts the Dowloads backup from September 5th to the current directory. However, your username probably won't be the letter `e`.


# Conclusion

Borg has a lot of in-depth and well-developed features outside the scope of this use case. I look forward to setting up some more complex scenarios and creating more walkthroughs in the future. Hopefully, this helps you get started.
Is NodeJS's https.get function/method asyncronous?
Tags: node
Published: 2020-09-06 06:25:43

---
title: Is NodeJS's https.get function/method asyncronous?
published: true
description: 
tags: nodejs
//cover_image: https://direct_url_to_image.jpg
---

I was just wondering if the NodeJS https.get() method/function was asynchronous or not?  

I'm still learning, but it seems like it is, since it was producing results before other code of mine, but I could be wrong.

Also, is https.get technically a function, or method? I wasn't sure when writing the title.

This is what I'm talking about:
https://nodejs.org/api/https.html#https_https_get_url_options_callback
CSS makes the world go round 🌎
Tags: css, html
Published: 2020-09-06 06:13:08

On Thursday I came across this really great tweet by [Antonia](https://twitter.com/NanouuSymeon)

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Guys this is a very easy project if you want to try it 🌎<br><br>Can you believe is just an emoji 😍😍<br><br>Link:<a href="https://t.co/veq9mnSzY4">https://t.co/veq9mnSzY4</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/womenintech?src=hash&amp;ref_src=twsrc%5Etfw">#womenintech</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://twitter.com/hashtag/GirlsWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#GirlsWhoCode</a> <a href="https://t.co/pYCjgugCpw">pic.twitter.com/pYCjgugCpw</a></p>&mdash; • Nanouu • 🌺 | 🦋 | 🌻 • (@NanouuSymeon) <a href="https://twitter.com/NanouuSymeon/status/1301474015760887813?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

And I was inspired by it, so I wanted to have a look at this!
(Yes, I'm addicted to smileys!)

So today we'll make the world go round with `CSS`

![World round css](https://cdn.hashnode.com/res/hashnode/image/upload/v1599141879816/8sIi0hgsH.gif)

> It's not as smooth as Antonia's example because the world only has three emoji's ☹️

## HTML Structure

Our HTML is the simplest ever. 
Only one div!

```html
<div class="world"></div>
```

## CSS spinning world emoji

As for `CSS` this is where the magic happens!

Let's start my making the body a display flex and [center everything with flex](https://daily-dev-tips.com/posts/css-flexbox-most-easy-center-vertical-and-horizontal/).

```css
body {
  background: #333;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
```

Next up to our div!

```css
.world {
  font-size: 250px;
}
.world::after {
  content: '🌎';
  animation: world 1s infinite;
}
```

We make the font-size really big and set our starting emoji 🌎 on our [pseudo](https://daily-dev-tips.com/posts/css-pseudo-elements/) after class.

Then we set our animation to be `world`, for a duration of 1 second and loop forever!

All we need to do now is make the `world` animation:

```css
@keyframes world {
  33% {
    content: '🌍';
  }
  66% {
    content: '🌏';
  }
}
```

There are only two world emoji's left, so we split our animation in two, and set our content!

That's it, CSS can make the world go round!

View this demo on Codepen.

{% codepen https://codepen.io/rebelchris/pen/QWNOwWN %}

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Create a LaTeX Resume and Website from a Single Data File
Tags: actionshackathon
Published: 2020-09-06 05:46:49

### My Workflow

How about creating a site without touching HTML or creating a LaTeX resume without knowing LaTeX!? Enter [resume-generator-action](github.com/ayan-b/resume-generator-action/)! :tada:

Simply fill in this [`data.yml`](https://github.com/ayan-b/resume-generator-action/blob/master/data.yml) file and your website and resume will be live in GitHub pages. Make sure to [enable GitHub Pages](https://docs.github.com/en/github/working-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) in your repository. Point the publishing source to `gh-pages`.

**More Customization**: :art:
- Change the Jekyll theme in the [`_config.yml_jj2`](https://github.com/ayan-b/resume-generator-action/blob/master/templates/_config.yml_jj2) file for a different look of your site
- Modify the [resume template](https://github.com/ayan-b/resume-generator-action/blob/master/templates/resume.tex_jj2) and [markdown template](https://github.com/ayan-b/resume-generator-action/blob/master/templates/resume.md_jj2) for a different layout of resume and your site respectively

### Submission Category: 

DIY Deployments

### Yaml File or Link to Code

{% github github.com/ayan-b/resume-generator-action/ %}


### Additional Resources / Info

Live demo: [Website](https://ayan-b.github.io/resume-generator-action/) | [Resume](https://ayan-b.github.io/resume-generator-action/main.pdf)

This project would not have been possible without the following open source projects:
- [moban](https://github.com/moremoban/moban): for generating the tex and markdown file from template
- [latex-action](https://github.com/dante-ev/latex-action): for compiling LaTeX and creating PDF
- [actions-gh-pages](peaceiris/actions-gh-pages): for deploying to GitHub pages
- [sb2nov/resume](https://github.com/sb2nov/resume): for the awesome resume design

Please let me know if you have any feedback or if you want me to add new features! Thank you!
🏆 Add dynamically generated GitHub Trophy on your readme
Tags: opensource, github, typescript, productivity
Published: 2020-09-06 05:39:52

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w9ne3mhrmlagpq3wwd9r.png)](https://github.com/ryo-ma/github-profile-trophy)

**Repository: https://github.com/ryo-ma/github-profile-trophy**

I have Released [GitHub Profile Trophy](https://github.com/ryo-ma/github-profile-trophy).

# Quick Start

Add the following code to your readme.
Change the `?username=` value to your GitHub's username.

```
[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma)](https://github.com/ryo-ma/github-profile-trophy)
```

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

## Use theme

```
[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma&theme=gruvbox)](https://github.com/ryo-ma/github-profile-trophy)
```

<img width="660" src="https://user-images.githubusercontent.com/6661165/92315152-e9c56600-f01c-11ea-9536-1bfbb158cfcb.png">



# About Rank

Ranks are `SSS` `SS` `S` `AAA` `AA` `A` `B` `C` `UNKNOWN` `SECRET`.

|  Rank  |  Description  |
| ---- | ---- |
|  SSS, SS, S  | You are hard to reach the rank. You can brag.  |
|  AAA, AA, A  | You can reach the rank if you do your best. Let's aim here first.  |
|  B, C  | You are a growing process.  |
| UNKOWN | You have not yet taken action. Let's act first. |
| SECRET | The rank is very rare. The trophy will not be displayed until the conditions are met. |

## Secret Rank
The acquisition condition is secret, but you can know the condition by reading this code.

<img width="110" src="https://user-images.githubusercontent.com/6661165/91643641-28cd4780-ea70-11ea-94a9-a51885252700.png" />


There are still a few secret trophies.  
Therefore, if you come up with interesting conditions, I am waiting for contributions.

# About Display details

<img width="220" src="https://user-images.githubusercontent.com/6661165/91642962-6333e600-ea6a-11ea-83af-e371e996bfa6.png" />

1. Title name of aggregation target.
2. Current Rank.
3. Title according to rank.
4. Target aggregation result.
5. Next Rank Bar. The road from the current rank to the next rank.

[more detail](https://github.com/ryo-ma/github-profile-trophy)
DataTables tips using Laravel
Tags: javascript, laravel, php
Published: 2020-09-06 05:13:44

Datatable is a useful plugin for displaying data to table in more advance way. It provide search, filter, pagination, and sorting from the beginning you use it. But you usually don't need all of the feature, or want to display button in the table, etc. Now I wanna share some tips in using datatable with Laravel.

### ***Add button inside datatable***
When displaying data in a row, usually in the last column we want to add button for user to take action with the data e.g. button edit, and delete. But datatable not natively render html tag, so we need to use `addColumn()` and `rawColumns()` like this in controller:
```php
$data = DataTables::of($data)->addColumn('action', function($row) {
   return "<a href='/user/edit/1' class='btn btn-sm btn-success'>Edit</a><a href='/user/destroy/1' class='btn btn-sm btn-danger btn-delete'></i>Hapus</a>";
})->rawColumns(['action']);
```

### ***Load table on click***
This case is usually when you have multiple datatable in one page and you organize it in tab view, you want to load data only when related tab is click. You can reload the table by using `reload()` function to do that.
```javascript
$('#clickable_id').click(function() {
  $('#table').DataTable().ajax.reload();
});
```

### ***Disable Sorting and searching individual column***
Datatable provide many feature to make a more useful table like searching, pagination, sorting, etc. But when you don't want particular column searchable or sortable, you can disable it.
```javascript
columns: [
   { data: 'name', searchable: false, orderable: false },
]
```

That are some tips to use datatable with Laravel. Thank you for reading, if you have any more tips or question please drop it on discussion section.
Understanding CSS Initial, Inherit & Unset
Tags: frontend, css, webdev, codenewbie
Published: 2020-09-06 05:01:20

As we write a lot and lots of CSS code, we know that sometimes our styling will going to something weird. So it’s important to know the CSS basic values. In this article, you will read three of them: initial, inherit and unset.

### CSS `initial`
Every property in CSS has its own initial values. These initial values represent the default value of a specified property, as defined by [The Official CSS Working Group](https://www.w3.org/TR/CSS).

Note that HTML doesn’t have an initial style, so they use User Agent Stylesheet from the browser as a basic styling. This User Agent Stylesheet overrides the initial value of some properties based on the HTML tag hence there will be a slight difference.

![Basic Styling of tag H3](https://dev-to-uploads.s3.amazonaws.com/i/o50c0xkd37env2wegyqt.png)

For example, the initial value of `display: inline`. But in the UserAgent Stylesheet above on the H3 tag, declared `display: block`. We can reset this value by using `display: initial` and the value will be back to inline.

### CSS inherit
The value inherit let the browser to look for the closest parent and pass the right value for the current property. This value could be implemented to all CSS properties, but there are some properties in CSS that uses inherited value as a default (e.g. *color*) hence for this kind of property you don’t have to write explicitly.

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

If it couldn’t find any value from the parent element to the top, it will use the initial value. This will be implemented in all kinds of elements.

### CSS unset
CSS unset is the combination between initial and inherit, depending on its type of property. The property who declared as an inherited property will be made unset act as an inherit. For anything else, the unset will act as an initial.

As written above, to determine whether the element is initial or inherit, you can check on [The Official CSS Working Group](https://www.w3.org/TR/CSS).

## Conclusion
Well, it's pretty basic but not many developers using this. Understanding this concept could help you know how every single element works and determine which way better to manipulate it.