teleren/devto huggingface dataset:
How to Publish a New Project to Github with VS Code
Tags: vscode, github, git
Published: 2020-12-14 04:25:39

**TL;DR** VS Code has [full Github integration](https://docs.microsoft.com/en-us/learn/modules/introduction-to-github-visual-studio-code/?WT.mc_id=startup-11830-chnwamba)


----------

Every time you create a new project, you have to complete the following **5 steps** to get the project into source control and in turn push to Github:


1. Initialize
2. Stage
3. Commit
4. Add remote
5. Push

Though trivial, it is quite repetitive especially if as a developer, your role requires creating examples, demos, quick one-off projects for customers.

VS Code has [full Github integration](https://docs.microsoft.com/en-us/learn/modules/introduction-to-github-visual-studio-code/?WT.mc_id=startup-11830-chnwamba), one of which is clicking a button that does all of the above 5 steps for you. 

![Screenshot of publish to GitHub button](https://paper-attachments.dropbox.com/s_89006684249C16538F3E7C2C6F7FDA0A1C9B4D1995E8D47FE9BBA882CB6F8A09_1607921572756_image.png)

I made a video to show you how this works

{% youtube 4g3v3cWX6ig %}
Git single command executor
Tags: git, npm, cli, node
Published: 2020-12-14 04:21:36


```sh
git add .
git commit -m "message"
git push origin <branch>
```
Are you tired with writing this kind of multiple git commands?
Do you prefer using a single command to do this?
I have created an npm CLI package to do the job for you.

# git-quick
### What is this? 👀
This npm CLI can execute multiple git commands only using a single command line.
Let's get the above git command example.
now that three-line execution you can execute in a single line using the **git-quick**.
```sh
giq p "commit message" <branch>
```
![Easy and quick](https://dev-to-uploads.s3.amazonaws.com/i/e7x6e6ywqn6qp9lggwro.png)

not only this. but there are more 😉
You can see all of them in the documentation.

I'm inviting you all to try this. If you like, don't forget to give feedback ❤ and a Star⭐ on the [github repo](https://github.com/UdithaIshan/git-quick)

If you found any issues, open a New Issue in my git repo. ✨
Any contribution is welcome.😉👀

[git-quick on NPM registry](https://www.npmjs.com/package/giq)
[git-quick on Github](https://github.com/UdithaIshan/git-quick)
Diagram Map: tracing UML/SysML elements across diagrams
Tags: showdev, uml, sysml, traceability
Published: 2020-12-14 04:21:25

This article introduces Diagram Map (a term I coined) that makes it easier to trace UML/SysML model elements across diagrams. The Diagram Map displays different types of UML/SysML diagrams together and highlights links between model elements and diagrams. I think the Diagram Map helps you understand the contents of the UML/SysML diagrams.  

Demo
---
![](https://dev-to-uploads.s3.amazonaws.com/i/escz8j0n8bp1qbmlujis.gif)

You can try many Diagram Map examples on [this GitHub project](https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples).

Features
---
- Diagram Map displays different kinds of diagrams together and lays out the same kind of diagrams in the same row.  
  ![](https://dev-to-uploads.s3.amazonaws.com/i/nbgllzt936vpb76zxsdc.png)
- Diagram Map shows the following:
  - **Links** between UML/SysML elements of the same type.  
    ![](https://dev-to-uploads.s3.amazonaws.com/i/jxvphrzv8haapc1k7cox.png)
  - **References** between elements and diagrams.  
    ![](https://dev-to-uploads.s3.amazonaws.com/i/q6ncmo45w0fdvtcnemi7.png)
  - **Hyperlinks** in the tooltip text.  
    ![](https://dev-to-uploads.s3.amazonaws.com/i/pduwlc9q9qcivc09x3i2.png)
- You can zoom and pan using a mouse on a Diagram Map like Google Maps. You need to have JavaScript enabled in your browser.

How to create
---
You can create a Diagram Map by using [my plug-in (M PLUS)](https://sites.google.com/view/m-plus-plugin/home) in a modeling tool [Astah](https://astah.net/products/). The plug-in is FREE to use for both Personal and Commercial purposes. Astah is free (Free Student License) or paid. The creation procedure is as follows:

1. Install the modeling tool [Astah Professional/UML/SysML](https://astah.net/downloads/), download [M PLUS plug-in](https://sites.google.com/view/m-plus-plugin/download), and add the plug-in to Astah. - 
   [How to add a plug-in to Astah](https://astahblog.com/2014/12/15/astah_plugins/).
2. Create models and diagrams with Astah.
3. Select diagrams in the model browser and press the "Create Diagram Map" button. If you select packages, all the diagrams under them will be processed. After you press the button, a Diagram Map will be created and be opened in a browser.  
   ![](https://dev-to-uploads.s3.amazonaws.com/i/cq58i7l3ywsdbatx23eb.png)

Other
---
- The Diagram Map is for viewing only. If you want to edit a model or diagram, do so with Astah.
- You have to use Astah to create a Diagram Map. Support for other modeling tools is a future consideration.
- The M PLUS plug-in is a closed source now. Open-sourcing is a future consideration, too.

Links
---
- [Diagram Map examples](https://github.com/takaakit/uml-diagram-for-java-design-pattern-examples)
- [Astah downloads](https://astah.net/downloads/)
- [M PLUS plug-in downloads](https://sites.google.com/view/m-plus-plugin/download)

Happy modeling!
The CSS Series - Part 9: Display Property
Tags: beginners, css
Published: 2020-12-14 04:02:50

## Introduction

So far you've learned about the flex and grid display property values. There are several others that are important to understand. This page will introduce some of these.  

In case you missed earlier parts in this series, visit:
[Part 1: An Intro to CSS](https://dev.to/vetswhocode/the-css-series-part-1-an-intro-to-css-2368)
[Part 2: How to Link a Stylesheet to Your index.html File](https://dev.to/vetswhocode/the-css-series-part-2-how-to-link-a-stylesheet-to-your-index-html-file-1d0e)
[Part 3: Selectors](https://dev.to/vetswhocode/the-css-series-part-3-selectors-49b8)
[Part 4: Properties](https://dev.to/vetswhocode/the-css-series-part-4-properties-17d7)
[Part 5: The Box Model](https://dev.to/vetswhocode/the-css-series-part-5-the-box-model-32i)
[Part 6: CSS Units](https://dev.to/vetswhocode/the-css-series-part-6-css-units-a02)
[Part 7: Flexbox](https://dev.to/vetswhocode/the-css-series-part-7-css-units-362i)
[Part 8: CSS Grid](https://dev.to/vetswhocode/the-css-series-part-8-css-grid-109m)

## Understanding the Display Property Values

Below is a list of the most common display property values, other than flex and grid from parts eight and nine of this series:

**block**: An element takes up its own space, meaning it covers the entire width of the page and neighboring elements are positioned to either side (above and below, most generally) of the element
<br />
**inline**: An element does not generate line breaks before or after itself. In a normal layout, the next element will be on the same line if there is space
<br />
**inline-block**: Similar to inline, except that you're able to assign a height and width
<br />
**table**: An element behaves like the table html tag
<br />
**none**: An element is removed from the DOM without being deleted. Surrounding elements will fill in to the space of the element with the display property value of none. Often paired with Javascript to make element disappear and appear at the click of a button.  

These are just a few of the most common display property values that you will work with. For an exhaustive list, visit [Mozilla Developer Network CSS display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)

## Conclusion
Every HTML element has a default display property value, but you can change them to suit your needs. In this page you learned about several common display property values.
my web development journey
Tags: webdev, html, css
Published: 2020-12-14 03:56:21

good evening everyone! as of today, i have started my journey on fully learning and enhancing my web development skills. i have decided to start on learning html and css, and then move on to experiment with different ways such as react and gatsby. 

i have minimal experience with html and css, mostly editing templates and themes to create a website. but, i want to enhance my skills to create my own projects from scratch.

i hope you will all join me on my journey, and i'll update tomorrow with more on another blog post tomorrow.

{% github thekilluadev/htmljourney %}
Do web/mobile app copy changes get handed over to you in Notion/Sheets?
Tags: productivity, showdev, mobile, webdev
Published: 2020-12-14 03:53:54

Hey! 👋

This Q is for devs who work on web/mobile apps and have PMs/marketers/designers who write the copy for these apps in Notion/Google Sheets...!

* How frequently do you get asked for copy changes (in Notion/Google Sheets)?
* How annoying/easy is it for you to update the copy in your web/mobile app?

I wanted to research your opinions, as I'm the maker of [CopyOcean](https://copyocean.com) (posted about [last week](https://dev.to/logicalicy/write-copy-in-notion-export-to-json-4g5g)), which turns web/mobile app copy in Notion Tables into GitHub/Gitlab Pull Requests. Your feedback will be very helpful! Thank you 🙏
Why I Love Node JS Instead of Django
Tags: node, django, javascript
Published: 2020-12-14 03:37:37

**These are my personal opinion and experience.

Hello everyone, I am in the development field for the last 3 years.
I tried a couple of things in my development Journey and works on various front-end and back-end frameworks.

For the Backend Part, there are multiple options available but the most popular ones are **Django** and **Node Js**.

#Django
In my Django journey I love the things about Django are:
1.Buit In Admin Panel
2.Security
3.Built In DataBase etc
4.We can create different Apps in One Django Project.

But the things which I Don't Like are:
1.Too Large Learning Curve Even To make a Simple API.
2.Too much-predefined Rules which I forgot always.
3.We have To do lots of settings.
4.EveryTime I update a package something wrongs happens

#NodeJs
For Beginners Node Js is the best Backend framework.
1.Easy To use, Don't need To Learn extra Language If you are a web developer 
2.Almost every Library you can find and use (NPM).
3.In node there is an **Express js** framework, through which we can create backend Even Faster.
4.Easy To deploy.
5.very Less Learning Curve
6.All its variable name is meaningful and easy to understand.
ex (req, res, next).
7.***Socket.io* to do real-time things
9.Can easily integrate any database .ex MongoDb and SQL.

####What's your opinion which is best for beginners or intermediate developers **Node Js** or **Django** ??
A simple way reset last margin in css
Published: 2020-12-14 03:32:33

Fir example I have a To-Do list `ul > li` for short.

Between each `li` I have a `margin-bottom`.

```css
.todo-item {
  margin-bottom: 1rem;
}

.todo-item:last-child {
  margin-bottom: 0;
}
```

But you can use this for it:

```css
.todo-item:not(:last-child) {
  margin-bottom: 1rem;
}
```

`:not` has great Browsers support

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

Use and happy!
Adaptive Boosting (Part 2)
Published: 2020-12-14 03:27:01

In the previous [post](https://dev.to/xsabzal/adaboost-5akm
), we outlined how AdaBoost algorithm works. 

Here we can explore a bit further scikit-learn's implementation of the AdaBoost Classifier with Decision Trees. 

AdaBoost Classifier has two options for the algorithm parameter: ‘SAMME.R’ and ‘SAMME’.  By default, it uses "SAMMER.R".
SAMME stands for Stagewise Additive Modeling with a Multi-class Exponential cost function and .R stands for Real. 

SAMME uses different 'decision influence' weights (alphas) for each weak learner (please see part 1, [step 2](https://dev.to/xsabzal/adaboost-5akm)). While SAMME.R assigns an equal weight for each weak learner and directly calculates the class probability. "The SAMME.R algorithm typically converges faster than SAMME, achieving a lower test error with fewer boosting iterations." ([source](https://scikit-learn.org/stable/modules/generated/sklearn.ensemble.AdaBoostClassifier.html#sklearn.ensemble.AdaBoostClassifier.get_params)) 

Basically, in the previous post, AdaBoost was explained using SAMME algorithm. 

**Example of using SAMME:**
```python
# Instantiate model with 100 decision trees
a_boost = AdaBoostClassifier(n_estimators = 100, algorithm='SAMME', 
                             random_state = 42)

# Train the model on training data
a_boost.fit(X_train,y_train);
```

**Week learners (stumps) examples:**
```python
trees = a_boost.estimators_

#plot first stump. plot_tree is a function, not defined here
plot_tree(trees[0], features)

#plot last stump
plot_tree(trees[-1], features)
```

**First stump in an ensemble**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jvqptipfw0eba6rrt18f.png)

**Last stump in an ensemble**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3316ct2dcnt2m97gx2o8.png)

**Weak learner's weights (alphas) in the final decision:**
```python
# alphas (weights in the final decision) of the first 10 weak learners
a_boost.estimator_weights_[:10]
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5edndsc0ix1p87urnrbp.png)
Linear Data Structures: 
Tags: datastructures, algorithms, webdev, codenewbie
Published: 2020-12-14 03:25:58

Data Structures and Algorithms is a complicated topic we all know that. I am one of those people that has a hard time wrapping my head around it. I find myself always questioning why I have to learn such complicated topics at an early stage of my development journey and now I feel like I finally understand why. 

When building an application or a dynamic webpage, especially for a large audience, things can get complicated very easily very quickly. You cant splatter you code on VS Code and expect the computer to know what to do and where to find things. By studying DSA(data structures and algorithms) you will notice their strengths and weaknesses, which structure to use in your application and so on. As you start applying these to your application, you will start to notice that you've developed a system, you also organized you code. Each DSA allows you to utilize your abilities to manage your data more efficiently and effectively. 


_"When we think of data structures, there are generally four forms:_

_Linear: arrays, lists_
_Tree: binary, heaps, space partitioning etc._
_Hash: distributed hash table, hash tree etc._
_Graphs: decision, directed, acyclic etc."_ (2017-2020 integralist)

#Linear:
Linear data structures have elements arranged in sequential style, each element is connected the one previous to it as well as after it. This is an easy way to imagine a list, or a stack of CDs, or think of a queue(waiting room).

#Tree:
Trees on the other hand are used to abstract data type and to search based on hierarchy of elements. It starts with a root node and branches out, think of an upside down tree. The roots of the tree are known as child nodes and each node has a value.

#Hash:
Hash table is a data structure that associates keys to values. Think of addresses, address owner, address location, address zip...etc. Using this data structure is very beneficial when handling accounts for thousands of people, you can easily sort based on certain criteria.

 example:

    id:
    1:  ->  owner: [address:]-> location:[...]
    2:  ->  owner:
    3:  ->  owner: [address:]-> location:[...]

owner: => key
[address:] => value

location: => key
[...] => value

#Graph:
A graph is a structure that has a finite set of nodes with edges connecting them, (x,y) is a pair referred to as an edge. Elements in a graph share connections each element is a node connecting to an edges, Think of google maps, GPS, social media or like a pirate map "x marks the spot".
 

Thank you for taking your time reading this, I had the goal to summarize each of these data structures in a very simple way to get whomever a brief overview on what they are rather then being overwhelmed with all the data on the inter-webs. 

Have a wonderful day, don't forget to smile! :D
Simplest solution to JSON.stringify RangeError: Invalid string length
Tags: programming, javascript, node, codequality
Published: 2020-12-14 03:19:30

We often come across this issue where the object or value passed to JSON.stringify is more than it can handle and the most common solution offered on google is using alternate libraries to stream the data whereas the simplest solution to it is just to stringify one element at a time and concatenate them.

```javascript
var out="[";
  for(var indx=0;indx<data.length-1;indx++){
    out+=JSON.stringify(data[indx],null,4)+",";
  }
  out+=JSON.stringify(data[data.length-1],null,4)+"]";
```
You can also save the gist [here](https://gist.github.com/MadhuNimmo/61090602bf2fa4d63cc17141893a2361) for future references.
Hope this solution helps you at some point.
Direct Messages for VSCode
Tags: vscode, typescript, javascript
Published: 2020-12-14 03:13:04

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

Introducing Direct Messages for VS Code!

Create Group DMs, share code snippets, debug bugs (or add new features), and check your developer friends' activity status — all through your GitHub account.

https://marketplace.visualstudio.com/items?itemName=techsyndicate.vscode-dms

Checkout the GitHub repository if you want to report something:
https://github.com/techsyndicate/vscode-dms
Create Online Radio Station- India`s No. 1 Online Radio Streaming Platform- Riggro Digital
Published: 2020-12-14 03:13:03

Hi Sunder, I hope you are doing well. I was checking radio station app builders today and noticed that your site below has amazing information on Starting Internet Radio Stations-
https://dev.to/sundarkrish91/9-radio-station-app-builders-to-build-your-own-radio-app-for-android-and-ios-120b

We are Riggro Digital- India`s 1st & No.# 1 Online Radio Streaming Platform with over 500+ stations. (www.riggrodigital.com)

1. Riggro Digital- India`s #1 Complete Online Radio Solution: Cloud Automation, Desktop &  Smartphone radio broadcasting software with Radio app, Free.

Exclusive Riggro Digital Radio Streaming Features:
 
1. Get Stunning Android App with iOS App Listing Free. 
2. Get the power of Four in One Riggro Digital servers.
3. Plays in Dolby HD Stereo & Ultra HD- Blu Ray Sound. ( RD`O Codec Technology * )
4. Personalized Poster Admobs to make money – Display unlimited Poster Advertisements, local events.
5. Add Unlimited News papers for user engagement.
6. Live broadcasting from your Smartphone. 
7. Do direct Live show from your phone on your radio from anywhere in the world.
8. Professional Studio Broadcasting.
9. No Buffering & audio caching technology. That means your radio plays without internet, in case the connection is lost & continuously tries to reconnect.
10. Plays @ just 2kbps (N-BitRate Compression Technology *).
11. Direct Social connects. 
12. Podcast facility.
13. World class Features Designed by the World’s best Developers from the USA & India.
14. Powerful Radio Stream Engines. (Built in BFR- nTechnology)
15. Easy Swipe Radio Interface with Sleep timer, song request, send us an email, show schedule, about us & News tab.
16. Powerful Scheduling Software with Auto DJ. No extra expansive Software needed.
17. Guaranteed 90 % cost cutting with our Automation Technology for Online & FM Radios. 
18. No human dependency, no need to keep your studio PCs, Gadgets, AC & Power to be on. Our powerful technology works 24×7! 99.99% guaranteed uptime.
19. Extremely easy App sharing features.

Software Features:
1. Complete control of your station, any time, anywhere even from your smartphone.
2. Live Statics & report generator- Eg; know what’s playing live, recent tracks and display album art.
3. Live & Real Time tracking- Track Live listeners, unique listeners, total Listeners minutes, Unique countries & much more.

Stream your radio station with the World’s Most Powerful Radio Hosting powered by Riggro Digital - www.riggrodigital.com
JavaScript Code Daily Challenge #14
Tags: javascript, challenge, codenewbie, beginners
Published: 2020-12-14 03:02:04

# **About**

This is a series of JavaScript Code Daily Challenge. Each day I show a few solutions written in JavaScript. The questions are from coding practice/contest sites such as HackerRank, LeetCode, Codeforces, Atcoder and etc.

> Circular Array Rotation
> [https://www.hackerrank.com/challenges/circular-array-rotation/problem](https://www.hackerrank.com/challenges/circular-array-rotation/problem)

```javascript
'use strict';

const fs = require('fs');

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', inputStdin => {
    inputString += inputStdin;
});

process.stdin.on('end', function() {
    inputString = inputString.replace(/\s*$/, '')
        .split('\n')
        .map(str => str.replace(/\s*$/, ''));

    main();
});

function readLine() {
    return inputString[currentLine++];
}
```
> Complete the circular ArrayRotation function in the comment
```javascript
function circularArrayRotation(a, k, queries) {


}
```
```javascript
function main() {
    const ws = fs.createWriteStream(process.env.OUTPUT_PATH);

    const nkq = readLine().split(' ');

    const n = parseInt(nkq[0], 10);

    const k = parseInt(nkq[1], 10);

    const q = parseInt(nkq[2], 10);

    const a = readLine().split(' ').map(aTemp => parseInt(aTemp, 10));

    let queries = [];

    for (let i = 0; i < q; i++) {
        const queriesItem = parseInt(readLine(), 10);
        queries.push(queriesItem);
    }

    const result = circularArrayRotation(a, k, queries);

    ws.write(result.join('\n') + '\n');

    ws.end();
}
TIL: Reading stdin to a BASH variable
Tags: bash, todayilearned, stdin, scripting
Published: 2020-12-14 02:44:39

Today I wanted to read stdin to a BASH script variable for additional processing. It's not completely straightforward, but it's pretty easy once you know the syntax:

```bash
YOUR_VARIABLE=$(</dev/stdin)
```

A full example:

{% gist https://gist.github.com/jeremyckahn/01d74a0051e6d943597fa5b751a37403 file=read-stdin-to-variable.sh %}

With this, you can easily make pipe-able BASH script files. For instance, with these two files using this technique:

{% gist https://gist.github.com/jeremyckahn/01d74a0051e6d943597fa5b751a37403 file=to-uppercase.sh %}

{% gist https://gist.github.com/jeremyckahn/01d74a0051e6d943597fa5b751a37403 file=to-snakecase.sh %}

You can do:

```bash
echo some-text | ./to-uppercase.sh | ./to-snake-case.sh
```

For:

```
SOME_TEXT
```

Shoutout to [StackOverflow user Ingo Karkat for explaining this](https://stackoverflow.com/a/15269128). It's a very handy little trick for making BASH scripts more flexible and reusable!
Art Group for Coders & Game-Devs
Tags: animation, codepen, webdesign, gamedev
Published: 2020-12-14 02:42:59

Hi I've created a new group for Artist's, web-developers, game-dev's, blender-artist's, animation artists & procedural fractal generation.. If anybody would like to join you can find the group here @> https://www.deviantart.com/art4coding-official Kind regards Tao, Norwich, Uk. #art #coding not sure those work on here....