teleren/devto huggingface dataset:
My #JavaScriptmas Solutions
Tags: javascript, scrimba, christmas, beginners
Published: 2021-01-02 06:22:45

Looking to brush up my JavaScript skills, I took part in [Scrimba's](https://scrimba.com) #JavaScriptmas challenges! Here are my solutions:

[Day 1: Candies](https://scrimba.com/scrim/co2d64d1cb5ed571c6c106141)
[Day 2: Deposit Profit](https://scrimba.com/scrim/co9174f4f9f259188e48d522a)
[Day 3: Chunky Monkey](https://scrimba.com/scrim/co36a452ca4b1d8716d9c5045)
[Day 4: Century From Year](https://scrimba.com/scrim/cod6a4812a2fd9f378ce6009f)
[Day 5: Reverse A String](https://scrimba.com/scrim/cob684290888f705b2b9ff18d)
[Day 6: Sort By Length](https://scrimba.com/scrim/co0674f9db4a75fd697dbf763)
[Day 7: Count Vowel Consonant](https://scrimba.com/scrim/co7e84592aa3b6d391d45033d)
[Day 8: Rolling Dice](https://scrimba.com/scrim/cofa543f5876a60679685a299)
[Day 9: Sum Odd Fibonacci Numbers](https://scrimba.com/scrim/co9de4450a3e6013d0ac85fb2)
[Day 10: Adjacent Elements Product](https://scrimba.com/scrim/co87b4099ac4747da64bf0fe8)
[Day 11: Avoid Obstacles](https://scrimba.com/scrim/co68743e0978b108d6220a45c)
[Day 12: Valid Time](https://scrimba.com/scrim/co940448e8852b6a3bffc4e04)
[Day 13: Extract Each Kth](https://scrimba.com/scrim/coe2b4434b6ce3987091b6abb)
[Day 14: Maximal Adjacent Difference](https://scrimba.com/scrim/co1034c63b9f864bd90ef99ec)
[Day 15: JavaScript Carousel](https://scrimba.com/scrim/coddd459e95662bcd3b49a70b)
[Day 16: Insert Dashes](https://scrimba.com/scrim/cof3949e1a79547b65cafd4cf)
[Day 17: Different Symbols Naive](https://scrimba.com/scrim/cob224aca9d67851382bb6a73)
[Day 18: Array Previous Less](https://scrimba.com/scrim/cocac44a4bf991d2e2875eecf)
[Day 19: Alphabet Subsequence](https://scrimba.com/scrim/co5734985883075448bffaf3b)
[Day 20: Domain Type](https://scrimba.com/scrim/cob9547199621dbe9f168833a)
[Day 21: Sum of 2](https://scrimba.com/scrim/cob954efab9cfeaa81fb52ea2)
[Day 22: Extract Matrix Column](https://scrimba.com/scrim/coea34dcfb720d1476fbe6a4f)
[Day 23: Social Media Input](https://scrimba.com/scrim/co9de4a2296ca5b758fcec422)
[Day 24: Test Your Agility](https://scrimba.com/scrim/co6434e18b3413e2704e1b97f)

I'm sure my solutions are far from optimal, but I had a lot of fun working them out. You should definitely take part in next year's challenges!
Alphabets for Kids
Tags: xamarinforms, xamarin
Published: 2021-01-02 06:16:59

Apps created using Xamarin Forms which is mainly for Kids who just started learning.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/udh0v0awl8izv89wsgxw.png)
Parents can control what area their child can access.

Below things can be learned through the App.
 1. Learn Hindi Alphabets with images
 2. Learn English Alphabets with Images
 3. Hindi Numbers from 0-10 using Images
 4. English Numbers from 0-10 using Images
 5. Fruit Names
 6. Vegetable Names
 7. Flower Names
 8. Vehicle Names
 9. Animal Names
 10. Birds Name
 11. Body Parts
 12. Shapes
 13. Colors
Apart from above learning, Your kid can practice writing below things
 1. Hindi Letters with sound
 2. English Letters with sound
 3. Hindi Numbers from 1-100
 4. English Numbers from 1-100

App can be downloaded from https://play.google.com/store/apps/details?id=com.dktech.learnalphabet
🔥 The must-have custom React hook for any web application. 🔥
Tags: react, javascript, tutorial, webdev
Published: 2021-01-02 05:54:26

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

After building form after form in React, I've come to realise that something was needed to really make labels work well. After many iterations and now rewritten to support React hooks, I've come up with the `useGenerateId` React hook – and I think it's truly a must-have for any React app.

Here's the 10-minute video justifying its use, writing it up, and explaining how it works:

{% youtube IRwsABVb9RI %}

Here's the code on GitHub, if you would prefer: https://github.com/lucaschen/use-generate-id-demo

Happy coding!
8 Best Data Engineering Courses Online in 2021
Tags: datascience, machinelearning, career
Published: 2021-01-02 05:30:19

Are you looking for Best Data Engineering Courses Online? but unable to find a good one, then read the full article. 

I have listed some of the **Best Data Engineering Courses Online** after filtering out hundreds of courses. So, give your few minutes to this article and find out the Best Data Engineering Courses Online.

Data Engineer is a person who **collects, move, stores, and pre-process the data** for Data Scientist and Data Analyst.

**The Dice 2020 Tech Job Report** labeled data engineer as the fastest-growing job in technology in 2019, with a **50% year-over-year growth** in the number of open positions.

![Best data engineering online courses](https://dev-to-uploads.s3.amazonaws.com/i/ubuu3soiffood7xfudn7.png)
**Source: Dice 2020 Tech Job Report**

So, it is clear that Data Engineer is definitely a **profitable, secure, and most demanding career.**

Before we dive into the courses, let me tell you, on what criteria these courses are “Best Data Engineering Courses”-

##**Criteria-**
1. Rating of these Courses.
2. Coverage of Topics.
3. Engaging trainer and Interesting lectures.
4. Number of Students Benefitted.
5. Good Reviews from various aggregators and forums.

Now, without further ado, let’s start finding Best Data Engineering Courses Online.
**[Click to continue reading...](https://www.mltut.com/best-data-engineering-courses-online/#1-data-engineering-with-google-cloud-professional-certificate)**
Make an Active List Auto Scroll Top
Tags: tutorial, javascript, webdev, programming
Published: 2021-01-02 05:23:22

In this case, I have a data list as shown in the image below. I want the list with class _active_ to be at the top, instead of refreshing the top order again.

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

###  Prerequire
 - Function Javascrip `offset().top`, `.toFixed(0)` dan `scrollTop()`
 - Jquery 

### 1. HTML Structure
The first thing in doing _script_ generation is to figure out what parts _script_ needs to handle/capture in this case; `id="myTabContent"` and `class="list-active"`.

```html
<div id="myTabContent">
 <div class="px-3">
  <div class="row border-bottom">
    <div class="col-2"><b>Hari</b></div>
    <div class="col-5"><b>Tanggal</b></div>
    <div class="col-5"><b>Ayat</b></div>
  </div>
  <a href="#">
  <div class="row list list-active">
    <div class="col-2">260</div>
    <div class="col-5">2021-12-30</div>
    <div class="col-5">Why 22</div>
  </div>
  </a>
  <a href="#">
  <div class="row list ">
    <div class="col-2">259</div>
    <div class="col-5">2021-12-29</div>
    <div class="col-5">Why 21</div>
  </div>
  </a>
... dst
 </div>
</div>
                                
```
### 2. Position Script Handle
In handling positions, we must first know the position data of the initial list(`conNum`) and list _active_(`itmNum`). The data obtained from the `offset().top` function is in the form of a position number, while `toFixed(0)` is a function to round the number. Then after getting it, just do `scrollTop(difference between itmNum position and conNum)`. In _step by step_:
  - Declaration of object container lists
  - Declaration of position `conNum` and `itmNum`
  - Execute the `scrollTop()` . function

```js
var con = $("#myTabContent"),
    conNum = con.offset().top.toFixed(0),
    itmNum = $("#myTabContent .list-active").offset().top.toFixed(0);
con.scrollTop(itmNum-conNum-15);

```

***DONE***
Homebrew - One package manager to rule them all
Tags: bash
Published: 2021-01-02 05:09:53

If you are on Mac and needed to install some kind of package or software the changes you came across Homebrew are about 99%.

[Homebrew](https://brew.sh/) is a package manager for Mac, it makes it easy to install different software. Or even different versions of for instance PHP.

You use homebrew in your terminal, my [favorite terminal is iTerm2](https://daily-dev-tips.com/posts/getting-started-with-the-terminal/).

![Homebrew list installed packages](https://cdn.hashnode.com/res/hashnode/image/upload/v1609140789340/bCyI8E0tO.png)

## Installing homebrew on Mac

The installation is one of the easiest I've ever seen.

Open up your terminal and execute the following command.

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

That will install the latest version of homebrew.

## Using homebrew

To use homebrew you can again open your terminal and run `brew` commands.

A list of useful commands:

- `brew --version`: Display the installed version of homebrew
- `brew help`: Display the help
- `brew doctor`: Check the system for potential issues
- `brew update`: Fetch the latest homebrew version
- `brew upgrade`: Upgrade all brews (packages)
- `brew list`: List all installed packages
- `brew install <formulae>`: install specific formula
- `brew services start <service>`: Start a specific service

## Installing specific packages

To install specific packages we can generally follow the following guide.

> Note: this example uses httpd as the package, you can find all [homebrew formulae's here](https://formulae.brew.sh/)

1. `brew install httpd`

Done... Literally, just that one command will install httpd and everything it needs.

In this case, since it's a service we can use homebrew to start it.

```bash
brew services start httpd
```

Amazing right!

If you are on Mac and not running homebrew, make the change today, it will change your life!

### 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)
Perl Myths by Pritesh Ugrankar
Tags: programming, linkedin, perl
Published: 2021-02-08 02:46:03

---
title: Perl Myths by Pritesh Ugrankar
published: true
date: 2021-01-02 05:01:54 UTC
tags: Programming,LinkedIn,Perl
canonical_url: https://phoenixtrap.com/2021/01/01/perl-myths-by-pritesh-ugrankar/
---

[This article](https://www.linkedin.com/pulse/perl-myths-pritesh-ugrankar) is fairly well-written, especially since it’s coming from a non-developer perspective. If I have one nit to pick, it is that Perl _does_ have function/method signatures, and has had them since Perl 5.20 in 2014. See the [perlsub](https://perldoc.perl.org/perlsub) man page for details. _[Edit: This was in response to a previous version of the article. Pritesh has since amended it.]_

I’d like to make my own article that takes the professional Perl developer’s (hi, that’s me!) perspective. Coming soon!
Free Mac NTFS
Tags: macos
Published: 2021-05-05 22:15:13

---
title: Free Mac NTFS
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5h1ef4cp5mbiqvedj2w.png
description: The easiest way to start to use your NTFS devices in your macOS.
published: true
date: 2021-01-02 05:00:00 UTC
tags: macOS
canonical_url: https://blog.rafaelcg.com/free-mac-ntfs
---

Since I began to utilize MacOS I had to use NTFS hardware, for example, external HD and pen drives, I didn’t find any solutions besides a paid software, since a couple of months ago I’m using [Mounty for NTFS](https://mounty.app/), this is a very good, free and light software that enables your MacOS to mount NTFS devices.

I install it via [Homebrew](https://brew.sh/) using this command below.

```
brew install --cask mounty

```
Let's develop a telegram bot using Deno
Tags: deno, telegram, typescript, webdev
Published: 2021-01-02 04:36:28

New Years Eve holidays is always a great chance to get into something new 🎄🎁

So in this video, we'll develop a basic telegram bot using [Deno](https://deno.land/) (a new secure runtime for JavaScript and TypeScript). In the process of developing, we'll also get into the platform's key features.

Since you may not be familiar with the approach, do not hesitate to post any comments/questions to this [video](https://youtu.be/buhTrROCvSk). I’m eager to receive your feedback.

{% youtube buhTrROCvSk %}
Learn JSON in 5 Minutes
Tags: json, javascript, restapi, dataformate
Published: 2021-01-02 04:00:07

JSON Stands for JavaScript Object Notation, It is lightweight format for storing and transporting data through API from server to a web page. It is also 'self describing' and easy to understand.

Example:

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

#JSON Data types :
##1. JSON Strings##
   ```
{ "name":"Ajay"}
```
Here "name" is a key and "Ajay" is its 
   value.
##2. JSON Numbers##
   ```
 { "Age":34}
```
 Here "Age" is a key and 34 is value, which is a 
   number type.
##3. JSON Objects##
   ```
{ "friends":[
        {
            "name":"Shyam singh",
            "age":25,
            "email":"ram@gmail.com"
        },
        {
            "name":"Rahul roy",
            "age":26,
            "dob":"23/12/1996",
            "isFriend":true
        }
    ] }
```
   here "friends" is a key and its values are in array data type 
   which contains two objects. His first friend is shyam and 
   second frind is Rahul. 
##4. JSON Arrays ##
   ```
{"hobbies":["Learn to code", "Paint", "Blogging", "Writing"]}
```
Here "hobbies" is a key and it has multiple values in array 
    format separated by commas.
##5. JSON Booleans##
   ```
"isFriend":true
```
   Here "isFriend" is a key and its value in Boolean format which 
   can be either true or false.
##6. JSON Null##
   ```
{"middlename":null}
``` 
"middlename" is a key and its value in null format. if something has no value than we can assign null to its value for example some people have no middle name in that case we can assign null value.


A common use of JSON is to exchange data to/from a web server. When receiving data from a web server, the data is always in string format.
Parse the data with __JSON.parse()__ and the data become javaScript object.
__Example __ ( data coming from a web server )
  ```
'{ "name":"Ajay", "city":"New Delhi"}'
```
 the data is in string format now we need to convert it into javaScript Object by using __JSON.parse()__ 

```
var obj = JSON.parse('{ "name":"Ajay", "city":"New Delhi"}');
```

Now we can use 

Thank you,
What software for taking Notes?
Published: 2021-01-02 03:59:46

There are plenty of apps to use for taking notes, but my favorite is **Vim.**

This is the most customizable for me. I can change color schemes to my liking. Plus I can easily access it right from my terminal.

I also use Joplin that uses markdown, simple note for the simplicity and able to easily access from my cellphone and across multiple platforms.
TIL: You can leave out  html, head, and body tags in your HTML.
Tags: html, webperf, webdev
Published: 2021-01-01 16:03:15

Many `html` tags have don't have to be closed, like `<p>`, `<li>`, and table elements. But **surprisingly some tags don't need to be opened or closed.**

If you leave out the `<html>`, `<head>`, and `<body>` tags in your markup, the browser will add them for you.

This isn't a hack, it's part of the [html5 specification](https://html.spec.whatwg.org/multipage/semantics.html#the-html-element).

## How does the browser know what to do?

It's simple for the browser to wrap your markup in  an `<html>` tag. but how does it know when the `<head>` ends and the `<body>` begins?

It's works something like this: 

Most elements only belong in the `<body>` tag, so the browser opens a `<head>` tag, then when it comes across the first element that only belongs in the `<body>` it closes the `<head>` and opens the `<body>`.

```
<doctype html>

<title>A relevant title</title>
<script>
<style></style>
<link>

// A div can't be in the head.
// So the browser knows to close the head tag...
// ...and open the body tag here

<div></div>

```


## Why do this?

It saves `39 bytes` on every page of your site. One of many small optimisations that add up to a lot.

## HTML Minifies

I've been using [html-minifier](https://www.npmjs.com/package/html-minifier) to do this for me. Though it's not a default setting.
Error when trying to delete docker image
Tags: docker, dockerfile
Published: 2021-01-02 03:59:38

---
title: Error when trying to delete docker image
published: true
description: 
tags: docker, Dockerfile
//cover_image: https://direct_url_to_image.jpg
---

When I try to remove docker image using `docker rmi image-id`, many times I got below error.
`Error response from daemon: conflict: unable to delete e3c37a7601a1 (must be forced) - image is referenced in multiple repositories`

Which means image was used by some other process.
But When I use `docker ps` to get docker process, got empty container list. 

Follow below three steps to delete docker image if you get this error.

**Step1.** Use below command to show all container list.

`docker ps -a` 

**Step2.** User below command to remove container

`docker rm container-id`

**Step3.** Use below command to remove docker image.
`docker rmi image-id`

####Another way to delete docker unused containers.
This will delete all unused  containers, networks, images (both dangling and unreferenced).

`docker system prune`

Be cautious while using this command as it will delete all containers.
How do I create a cross-platform window in C#?
Tags: beginners, java, csharo, help
Published: 2021-01-02 03:27:38

I've recently came to C# to Java to see if I could get any success creating an application in this way, by creating a few window tests.

I want to do this in pure code (like I did in Java), and want a library similar to Java's `java.awt.*`+`javax.swing.*`.
And, I found something that looks suitable, `System.Windows.Form`, but, as far as I've read, and as the name (kinda) implies, it's windows exclusive.

Is there any cross-platform library that accomplishes the same things, with a similar formatting (to that or the one in Java)?


<div style="font-weight:bolder;" alt="Thanks! Cheers!">
##<b><center><b>Thanks!<br/>Cheers!</b></center</b>
</div>
Don't spend money learn for free! Education Should Be Free Not Paid
Tags: programming, education, coding, learning
Published: 2021-01-02 03:12:45

#How to learn Coding For Free!
[![IMAGE ALT TEXT](http://img.youtube.com/vi/vyfHFJqOu3c/0.jpg)](http://www.youtube.com/watch?v=vyfHFJqOu3c "Video Title")
##In this video I talk about how to learn code for free from the internet 
Education Should Be Free for all. Now a days people are selling education for money. I don't like that. I am here to make any small change that I can. 
Happy New Year 2021.. 
Have Fun Learning Code in (2021) ..

#Good Luck
Digital Ocean Hackathon App: Dwindle
Tags: dohackathon, hackathon
Published: 2021-01-02 02:52:26

---
title: Digital Ocean Hackathon App: Dwindle
published: true
description: First post of Digital Ocean Hackathon series
tags: dohackathon,hackathon
//cover_image: https://direct_url_to_image.jpg
series: Digital Ocean + DEV hackathon
---

The Digital Ocean + DEV hackathon is underway and I thought about submitting an app.

It will be something small, and probably static, and it will help me test Digital Ocean and see its capabilities and features. Right now I have a hosting with GoDaddy, so it would be good to compare both of them.

## The app

It will be something _simple_, actually based on an old project of mine that I never really completed and ended up abandoning: reduce.me. 

> I used to have that domain and didn't renew it, and now I just discovered that someone got it and it's on sale for $3,800 😓

Reduce.me was a small PHP app that took some text and reduced it (or tried to) to less than 140 characters (back then, that was the limit). It looked quite crappy and it only worked in Spanish (and not that great, to be honest):

![Screenshot of reduce.me, a site in Spanish to reduce the size of text](https://dev-to-uploads.s3.amazonaws.com/i/dh31w3euk1dzg0yhzxom.png)

The goal of the hackathon would be to:

- Rebuild the app in JavaScript (keeping it simple, without even using React or any other library).
- Apply modern CSS and a11y features.
- Adjust it to work in English (with Spanish as a bonus now).
- Adapt it to the new Twitter interface (280 characters).
- Check how Digital Ocean works deploying directly from GitHub.

...And all that in 10 days 😅

I will name the app Dwindle because it is a synonym for shrink and reduce, and it has a nice ring to it.

Here we go!
Docker e Aplicação Java
Published: 2021-01-02 02:35:10

Entre muitas das dicas que são dadas par quem está começando na área de T.i. o compartilhar informações é uma delas, mesmo que seja pouco, é o pouco que você conhece, ao divulgar conteúdo, independente da forma, a pessoa mostra para o mundo que está estudando e desses estudos surgem dificuldades que necessitam pesquisa para resolvê-las, e dessas pesquisas é possível construir conhecimento. 

Foi dessa forma que surgiu este artigo, tinha um desafio que precisava desenvolver e entregar a resolução utilizando docker para que pudesse ser testado. É a isto que este artigo se propõe, mostrar como construir uma imagem docker de uma aplicação Java que rode no terminal e também a imagem de uma API Java utilizando Spring Boot e que utiliza um Banco de Dados.

1- Aplicação Java

	O programa Java que foi desenvolvido pode ser encontrado nesse link https://github.com/josvieira/desafios/tree/master/strings/JavaTemplate, e a imagem docker pode ser baixada com o comando docker pull josienevieira/desafioid:latest

Para construir uma imagem docker, a primeira coisa que precisamos fazer é criar um arquivo Dockerfile dentro da pasta do projeto.
<script>FROM openjdk:8-jre-alpine  
ADD target/.jar app.jar   
COPY target/.jar /app/app.jar   
WORKDIR /app   
ENTRYPOINT ["java", "-jar", "/app.jar"]</script>