teleren/devto huggingface dataset:
How to serve an asset through jsdelivr CDN from Github.
Tags: todayilearned, codenewbie, webdev
Published: 2021-02-21 16:55:53

In this  post we are going to see how we can serve ui assets from github via CDN. 

TLDR; CDN (content delivery network) is basically a network of servers and data centers that provides the fast delivery of content.

Today ,  I was learning about koa which is a node js framework. Suddenly a thought , what if I could create boilerplate code which I can use it for my future side project. I was able to scaffold a basic bolierplate using Koa and typescript. 

Here is the link to the github repo if you are interested. It is still work in progress. 

[skarthikeyan96/node-koa-starter](https://github.com/skarthikeyan96/node-koa-starter)

Real problem began, I wanted add a banner to my readme. I designed a simple banner , but  I knew one thing , I did not want to use dropbox or imgur. 

Googling started , and finally my quest ended with `jsDelivr` . It was solving the  problem which I faced.

Here are the steps , how you can also serve your files using jsDelivr

**Setup your repository** 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v19an0mp812rzjtyoqt3.png)


**Add the banner file to your repository.**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dyek29doayrx43jsts2.png)
 

**Follow the syntax from jsDelivr to serve the asset via CDN**

```markdown
// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it

https://cdn.jsdelivr.net/gh/user/repo@version/file
```

**Below is the example syntax**

```markdown
![banner](https://cdn.jsdelivr.net/gh/skarthikeyan96/node-koa-starter/banner.png)
```

Now add the asset url to the readme file and push the changes to github readme. 

🎉🎉🎉  Problem solved

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fktlsdtkqgy5o88nh2ca.png)
 
Thanks for read. I hope it will be helpful for everyone. Please let me know in the comments if I have missed something. 
 
Some Useful Resources

[jsDelivr - A free, fast, and reliable CDN for Open Source](https://www.jsdelivr.com/?docs=gh)
Rotation in CSS animation ⌚
Tags: css, todayilearned, tutorial, beginners
Published: 2021-02-21 16:52:07

Hello dear folks,

This post is our "20 day CSS animation post"

{% link https://dev.to/atulcodex/20-days-of-css-animation-post-3g8d %}

In this post, we are going to learn about the CSS rotate property.

This property is so useful like we can use this to rotate anything at desired degree. Yes, we have to use deg value in rotate property eg. 45deg, 90deg or 180deg and so on.

Syntax
* transform: rotate(90deg);

See the live example and don't forget to play around with it.

{% codepen https://codepen.io/atulcodex/pen/qBqXzGg %}

And if you guys interested in my free website templates please download them here 👉[AtulCodex Marketplace 🏪](https://www.instamojo.com/atulcodex/).
LeetCode 520: Detect Capital (Ruby)
Tags: algorithms, codenewbie, ruby, leetcode
Published: 2021-02-21 16:48:12

Description: [https://leetcode.com/problems/detect-capital/](https://leetcode.com/problems/detect-capital/)

Solution:

```ruby
def detect_capital_use(word)
    (word == word.downcase) ||
    (word == word.upcase) ||
    (word == word.downcase.capitalize)
end
```

Explanation:

1- Check if the word is the same after converting it all to downcase.

1.2- Check if the word is the same after converting it all to upcase.

1.3- Check if the word is the same after converting it all to downcase and then converting the first character to upcase.
LeetCode 283: Move Zeroes (Ruby)
Tags: leetcode, ruby, codenewbie, algorithms
Published: 2021-02-21 16:22:14

Description: [https://leetcode.com/problems/move-zeroes/](https://leetcode.com/problems/move-zeroes/)

Solution:

```ruby
def move_zeroes(nums)
		zeros = nums.count(0)
    nums.delete(0)
    zeros.times do
        nums << 0
    end
    nums
end
```

Explanation:

1- Count how many zeros there's in the array.

2- Delete all zeros from the original array.

3- Using the counter from step 1, add zeros to the end of the array.

4- Return the array.
Important IntelliJ Idea Shortcuts I use in my day-to-day coding
Tags: productivity, java, development, spring
Published: 2021-02-21 16:04:09

IntelliJ Idea IDE is the most popular IDE among Java Developers now-a-days. I use it for my day-to-day coding assignments. I use the following shortcuts quite heavily to improve my productivity while using IntelliJ Idea.

* Alt + 1 - Show/Hide Project Explorer
* Double Shift - Search Anything in IntelliJ Idea
* Increase Fonts - Double Shift and Search 'Increase Fonts'
* Decrease  Fonts - Double Shift and Search 'Decrease Fonts'
* Ctrl + E - Navigate between files opened in Explorer
* Ctrl + Shift + E - Shows the last changed files
* Ctrl + Shift + N - Search all files
* Ctrl + N - Search only class files
* Ctrl +  Alt + L - Reformat Code
* Ctrl + B - Open Declaration

I hope these shortcuts will also help you to improve your productivity. For complete list of shortcuts, please refer to the Jetbrains official website - 

(https://www.jetbrains.com/help/idea/mastering-keyboard-shortcuts.html)
This is my identity number validator package (NPM)
Tags: javascript, typescript, discuss, contributorswanted
Published: 2021-02-21 15:36:27

Some time ago, I released an extremely simple project, yet extremely useful: an identity number validator package. 
In my country (Ecuador) we have a simple algorithm to validate if an identity number (we call it "cédula") is valid or not. I have worked in many projects where we need to validate this, and I had to re-write the algorithm every time. So why not make it public?

https://www.npmjs.com/package/identity-number-validator

Do you have something similar in your country? If yes, would you like to contribute?
DevTip #2: Using dev.to Social Preview API (undocumented?)
Tags: tutorial, techtip, portfolio, restapi
Published: 2021-02-21 15:24:35

<a name="top"></a>
*This series is about any tech related tips or tricks that I found useful or interesting.* 

>  * [ ▶️ Background](#background)  
>  * [ ❓ How To](#howto)
>  * [ ➕ Bonus](#bonus)

---
<a name="background"></a>
## ▶️ Background [↑top](#top)

Stumble across stackoverflow developer story and like the looks of it. Thus decided to quickly update it with my latest details and make it [public](https://stackoverflow.com/story/wizlee).

When I was adding my dev.to profile, that part of the story looks bland.

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oe7gxpbpf2cth456bc78.png)

I immediately did a web search using the keywords [forem dev logo banner](https://duckduckgo.com/?q=forem+dev+logo+banner&iax=images&ia=images) to 'find some idea' 😉 on what picture to add onto it. This is then I found out that dev.to has a built in way of generating social preview cards!

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1hetc77pjf6vm6g1ydz.png)

---
 <a name="howto"></a>
## ❓ How To [↑top](#top)

```
https://dev.to/social_previews/user/{id}
```

The URL to get your social preview is as above. Where you can get your ID by using visiting this GET request - https://dev.to/api/users/me. The URL will return your DEV social preview in HTML. 

The social preview API is not in the API documentation, so my guess is this is used by DEV to show preview images on search results or a DEV user URL is shared on other websites.

```
https://dev.to/social_previews/user/{user_id}.png
```

To get an image, you can also append '.png' to the URL. The end result in the stackoverflow developer story is as below.

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6ayc02mqvma7l6z7nz7.png)
 

---
 <a name="bonus"></a>
## ➕ Bonus[↑top](#top)

Aside from social preview card of user, for those with sharp eyes will see that in the search result above there are social preview cards for articles and comments too!

Format is as below:
```
https://dev.to/social_previews/article/{article_id}

http://dev.to/social_previews/comment/{comment_id}
```

The same trick of including .png also applies! I just notice that this is made possible by using a service called https://hcti.io to convert HTML&CSS into image.

Just for fun, the cover image is the social preview card of this article. So yeah, that's more or less equivalent to a spoiler 🕊.
Day 55 Of 100DaysCode : More About Algorithm
Tags: womenintech, codenewbie, beginners, 100daysofcode
Published: 2021-02-21 14:53:10

Today is my day 55th of 100daysofcode and python learning. Like today I also continue to learned properties of SQL from datacamp.
Like ORDER BY, GROUP BY, HAVING, etc. Also learned more about algorithm from Coursera.

#Python Code
Code to calculate maximum pairwise product.
```python
def max_pairwise_product(numbers):
    n = len(numbers)
    max_product = 0
    for first in range(n):
        for second in range(first+1,n):
            max_product = max(max_product, numbers[first] * numbers[second])
    return max_product

input_n = int(input())
input_numbers = [int(x) for x in input().split()]
print(max_pairwise_product(input_numbers))
```
Output of the following code is,
```python
3
5 6 9
54

```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 55 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>* More Properties Of SQL<br>* More About Algorithm<br>* Greedy Algorithm<br>* Code To Calculate Maximum Pairwise Product<a href="https://twitter.com/hashtag/womenintech?src=hash&amp;ref_src=twsrc%5Etfw">#womenintech</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://twitter.com/hashtag/CodeNewbies?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbies</a> <a href="https://t.co/PkImUnmSpd">pic.twitter.com/PkImUnmSpd</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1363499150671708161?ref_src=twsrc%5Etfw">February 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
'this' keyword in JavaScript
Tags: javascript, webdev, codenewbie
Published: 2021-02-21 14:52:53

If you are new to the world of JavaScript, then you may find **'this'** keyword a little bit tricky. In this blog, I will discuss some basics of 'this' keyword, how we can use and its problems.

##What is 'this'?
Generally, this keyword refers to the object it belongs to or the parent object. Now, it also varies on which context we use it. Like, in a method, **'this'** refers to its parent object. Alone, **'this'** refers to the global object. In a function, **'this'** refers to the global object. But in a function with **'strict'** mode, **'this'** refers to undefined. In an event, **'this'** refers to the element that received the event. Ex:-

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

But sometimes it creates a lot of confusion. Ex:-


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

When we are using **'this'** in the setTimeout it creates its context for **'this'**. So it isn't able to access **'this'** of the outer scope and bound to its scope. As **'this'** is not defined within the function, the output is undefined. There are two ways to resolve this problem.

* ***Using another variable:*** We can create another variable inside the function and use that to access id.

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

* ***Using the arrow function:*** We can also use the arrow function to resolve this problem. As the arrow function doesn't create its own context of **'this'**, we can access the **'this'** of its parent. 

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

If you like my blogs and want to connect with me, follow me on [LinkedIn](https://www.linkedin.com/in/debajit-mallick/) and [Twitter](https://twitter.com/MallickDebajit).
3 Things I Didn't Know About Github
Published: 2021-02-21 14:46:27

Today I Got to know about 3 things that I didn't know about github

## 1.   [Github Has a Blog](https://github.blog/)
![Github Blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wzez3xp7p9eu55ds4nc.png)

Github has a blog with some valuable content that I don't think you would want to miss out on!!
<br>
## 2.   [Github Has a Learning Lab](https://lab.github.com/)
![Github Learning Lab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/igrgyeurjuz7bhnjdyuc.png)

Github also has a learning lab with organized and structured courses to master a specific field or language
<br>
## 3.   [Github Has a Student Developer Pack](https://education.github.com/pack)
![Github Student Developer Pack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5k4bvtwizblyfqsybab1.png)

Github also has a student developer pack for "13+"s which includes numerous benefits like free 12-month canvas pro tier, $100 in platform credit for new users on Digital Ocean, 1-year domain name registration on the .me TLD, and 1 year SSL certificate from NameCheap and etc...

**Comment if you have any facts to share about github and Don't forget to follow me on Twitter: [@GarvitMotwani](https://twitter.com/GarvitMotwani)**
(Javascript) My learning journey Part 1: What is Javascript, role and use case?
Tags: javascript, beginners, tutorial
Published: 2021-02-21 14:45:22

---
title: (Javascript) My learning journey Part 1: What is Javascript, role and use case?
published: true
description: 
tags: javascript, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ik1c8mr2sz8zi3g466dq.jpg
series: (Javascript) My learning journey
---

One of my resolutions for 2021 is to deepen my knowledge in JS. That's why I started a complete new training in JS. From completely zero to intermediate.

An essential point to remember a training course is to take notes and discuss the subject with others. That's why every day I will post on dev.to the concepts and notes that I learned the day before.

If you want to miss nothing click follow and you are welcome to comments and discuss with me.

Without further ado here is a summary of my notes for day 1.


<h2>What is Javascript (JS)?</h2>
JS is a high level programming language. That is, it allows you to create applications relatively easily and quickly without worrying about basic complicated details like memory allocation.

JS is an object oriented, multi-paradigm language. It allows you to use several programming styles.

<h2>Javascript use case</h2>
JS is mainly used to create dynamic and interactive web applications.

The JS code can be executed in the browser but also on a server.

Now in 2021, JS is used everywhere. With JS you can create web applications but also desktop, mobile, console and even games.

<h2>Javascript vs ECMAScript?</h2>
ECMAScript is the standard that JavaScript is base on. ECMAScript is a subset of JavaScript. JavaScript is basically ECMAScript at its core but builds upon it.

Each year ECMA organization add new features to ECMAScript. (eg ES6)

<h2>How to get backwards compatibility?</h2>
Since JS run in the browser it need to keep its backwards compatibility. For example ES6 can`t compile directly in all browsers, so need an compiler from ES6 to ES5, for that compiling using babel, it produce the browser compatible javascript.

<h2>End of day 1</h2>
Day 1 is over, tomorrow we start writing code. Cant wait ...

Follow me on Twitter: <a href="https://twitter.com/justericchapman?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @justericchapman</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
A Dice Game... as it was then and as it is now #reviewyourself
Tags: reviewyourself, javascript, game, develop
Published: 2021-02-21 14:26:00

A few days ago, I found an old folder on my pc that dates to the time when I was starting to study web development.
Inside this folder I found an exercise I made up to practice which consisted in developing a dice game for two players.
Obviously, it's a very simple code, but looking back at it I was surprised the way I developed it and I realized how different I am now both as a developer and as a person.
The interesting thing, as well as revealing the use of bad practices, was reviewing the logic with which I faced problems and found solutions, following paths that I hardly recognize as "mine".
So, I decided to put on codepen both that old version of the game and a new developed version as I would develop it now, leaving the frontend scaffolding intact, changing only the JS logic.
I did this just for fun as now, being a backend developer, that’s not what I’m focused on, but I think this can be a good exercise in general and can help to understand yourself, looking from the outside and observing your own path to improve.

**#reviewyourself**

If you get inspired from this and post something alike, please use the same hashtag and let me know in the comment section :)

*Here are the two versions of the game:*

[Old Version](https://codepen.io/MasonJamesDev/pen/XWNerJW)

[New Version](https://codepen.io/MasonJamesDev/pen/LYbzYbr)
Day 22: Binary-Decimal
Tags: 100daysofcode, python
Published: 2021-02-21 14:23:46

Convert a binary input into a decimal output, as well as convert a decimal input into a binary output.

```python
def menu_select(num):
	if(num == 1):
		binary = input("Enter binary number: ")
		decimal = binary_to_decimal(binary)
		return(decimal)
		
	elif(num == 2):
		decimal = input("Enter decimal number: ")
		binary = decimal_to_binary(decimal)
		return(binary)
		

def binary_to_decimal(num):
	b = list(num)
	n = len(list(num))
	decimal = 0
	hold = 0
	i = 0
	exp = n-1
	while (i < n):
		x = int(b[i])
		quot= 2**exp
		hold = x*quot
		i += 1
		exp -= 1
		decimal = decimal + hold
	return(decimal)

def decimal_to_binary(num):
	quot = int(num)
	base = 0
	counter = 0
	binary=[]
	while (quot > 0):
		rem = quot%2
		binary.append(str(rem))
		quot = quot//2
		counter +=1

	binary.reverse()
	return(int(''.join(binary)))

print("Day 22: Binary-Decimal Converter\n")
print("What type do you want to convert? : \n")
print("1- Binary\n")
print("2- Decimal\n")

choice = input("Select: ")
s = menu_select(int(choice))
print("Result : ", s)
```
Vagrant Comand Cheat Sheet
Tags: devops, linux, showdev
Published: 2021-02-16 19:46:20

Some useful commands I have collected to act as a Vagrant cheat sheet for using Vagrant. More for my own reference than anything else but sharing and posting on my blog is always good for each future reference. Expect this Vagrant cheat sheet article to be updated over time as I add more to it to become an all-inclusive vagrant cheat sheet.

## Creating a VM
`vagrant init — Initialize Vagrant with a Vagrantfile and ./.vagrant directory, using no specified base image. Before you can do vagrant up, you’ll need to specify a base image in the Vagrantfile.
vagrant init <boxpath> — Initialize Vagrant with a specific box. To find a box, go to the public Vagrant box catalog. When you find one you like, just replace its name with box path. For example, vagrant init ubuntu/trusty64.`

## Starting a VM
`vagrant up - starts vagrant environment (also provisions only on the FIRST vagrant up)
vagrant resume — resume a suspended machine (vagrant up works just fine for this as well)
vagrant provision — forces reprovisioning of the vagrant machine
vagrant reload — restarts the Vagrant machine, loads new Vagrantfile configuration
vagrant reload --provision — restart the virtual machine and force provisioning`

## Getting into a VM
`vagrant ssh — connects to the machine via SSH
vagrant ssh <boxname> — If you give your box a name in your Vagrantfile, you can ssh into it with the box name. Works from any directory.`

## Stopping a VM
`vagrant halt — stops the vagrant machine
vagrant suspend — suspends a virtual machine (remembers state)`

## Cleaning Up a VM
`vagrant destroy — stops and deletes all traces of the vagrant machine
vagrant destroy -f — same as above, without confirmation`

## Boxes
`vagrant box list — see a list of all installed boxes on your computer
vagrant box add <name> <url> — download a box image to your computer
vagrant box outdated — check for updates vagrant box update
vagrant boxes remove <name> — deletes a box from the machine
vagrant package — packages a running VirtualBox env in a reusable box`

## Saving Progress
`vagrant snapshot save [options] [vm-name] <name> — vm-name is often default. Allows us to save so that we can rollback at a later time`

## Tips
`vagrant -v — get the vagrant version
vagrant status — outputs status of the vagrant machine
vagrant global-status — outputs status of all vagrant machines
vagrant global-status --prune — same as above, but prunes invalid entries
vagrant provision --debug — use the debug flag to increase the verbosity of the output
vagrant push — yes, vagrant can be configured to deploy code!
vagrant up --provision | tee provision.log — Runs vagrant up, forces provisioning, and logs all output to a file`

If you know of any useful commands to add to this vagrant cheat sheet leave a comment and ill get them added.
Take Enough Time For yourself
Tags: webdev, beginners, motivation, codenewbie
Published: 2021-02-21 13:55:47

This is not a competition whatsoever where you will be like " I have to complete that course very fast and move on" it's fine to have a deadline for your goal but are you considering that you are moving loosely ( you are creating loose ends in your career as a self taught developer).
What do I mean?
You just started your journey as a Developer maybe because someone inspired you and it's now in your head.
" HTML is simple pls, CSS is not that difficult, JavaScript is not hard, I have watched some tutorials , I think it's time to learn REACT" all these positive thoughts make you Rush yourself and skip some important fundamentals of the language.
Now your React instructor is saying something about those fundamentals.
Hell crap..you have to go back and relearn , practice and do some projects with it.

You feel discouraged to relearn and started thinking " Maybe Programming is not mean for me, I don't know this things ". Then you Quit.

Take Enough Time For yourself 
Be comfortable with HTML and CSS, learn Advanced CSS , build some mini-projects with it, read books, play CSS Diner to master your CSS. Go to behance and dribbble for inspiration ( the moment you see some cool UI/UX DESIGN, you will be " I will flex to get this, the navbar will be like this" you are already analysing and coding it offhand)
Take your time. Never compare yourself beginning to someone else's Intermediate.
Be the best version of yourself. Remember you are a product that a company someday will invest in.
Thanks.