teleren/devto huggingface dataset:
My #JavaScriptmas solutions
Tags: javascript
Published: 2020-12-29 12:35:09

# What?!
\#JavaScriptmas was an event started by [Scrimba](https://scrimba.com/). Every day there was a (rather simple) javascript problem to solve. There were everyday prizes and a (slight) chance of winning 1000$ at the end of the month. 

**Spoiler Alert** I did not win anything. However, I get a Discord badge for writing this article. 

# Who are you again? 
I am learning **all** the WebDev stuff following the \#100DaysOfCode challenge (currently in Round 2). I am already working in tech as a solo Embedded Engineer. Yes, there is already a lot of programming involved (C/C++) in my daily work but no, **it is not the same!** I may have less trouble with algorithm solving but I am new to the networking stuff, CSS, JS, Databases, APIs... 

# What next? 
I feel like this is a good way how to start a small blog. I am going to share (mainly) my knowledge from Embedded Engineering to help people learn new stuff. I would like to "pay" the internet community back for all the free resources for WebDev learning. 

# Links to my solutions
24 - https://scrimba.com/scrim/co54c4ebcb37c652348d3b877
23 - https://scrimba.com/scrim/co884411f8c641b1e996278f1
22 - https://scrimba.com/scrim/code34cfe8db74b93745df060
21 - https://scrimba.com/scrim/coe174e2db15654a316b14bd4
20 - https://scrimba.com/scrim/co7f540b4b43a5e6d561410d9
19 - https://scrimba.com/scrim/co3e34b80b7eac33c8aa6594a
18 - https://scrimba.com/scrim/co14c44629297e8be3eca925a
17 - https://scrimba.com/scrim/co5804ea094cc832c74674388
16 - https://scrimba.com/scrim/coecd4f3b90d3decb674f198f
15 - https://scrimba.com/scrim/co64647b6938468d3f4f5fe45
14 - https://scrimba.com/scrim/co6544dcc81ff5d9d336031ee
13 - https://scrimba.com/scrim/co5ff40769993cc734356f18c
12 - https://scrimba.com/scrim/cob0e48a2916656863aae342e
11 - https://scrimba.com/scrim/co5b94f89a56704080786a0a1
10 - https://scrimba.com/scrim/co3324478a61b9f689c1da6a7
9 - https://scrimba.com/scrim/co2a64f4282677cb60050ec72
8 - https://scrimba.com/scrim/co42341908ab4ce88bbe55ae3
7 - https://scrimba.com/learn/adventcalendar/note-at-0-16-coaa042c791c859a2174bdd34
6 - https://scrimba.com/learn/adventcalendar/note-at-0-22-coee049b98fd7511d69787404
5 - https://scrimba.com/learn/adventcalendar/note-at-0-43-co6224317823a8872a575f060
4 - https://scrimba.com/learn/adventcalendar/note-at-0-32-co8554a12b879040911b47278
3 - https://scrimba.com/learn/adventcalendar/note-at-0-50-cof4a45c09bd11abe85e7015a
2 - https://scrimba.com/learn/adventcalendar/note-at-1-15-co36d4d3ea145065fcf33e589
1 - https://scrimba.com/scrim/co75e4352ae2b878bd418fd67
Project with mixed NPM and YARN use
Tags: help, yarn, npm
Published: 2020-12-29 12:32:01

---
title: Project with mixed NPM and YARN use
published: true
description: 
tags: help, yarn, npm
cover_image: https://miro.medium.com/max/2400/1*7CVvXHPBFuC9SrYqgxgc8Q.jpeg
---

I contribute to a project where users use both NPM, and YARN. NPM generates package-lock.json, and yarn generates yarn-lock.json both use package.json.

I know that yarn import can be used to use package-lock.json, but then if there's a dependency installed with yarn, then there is no way to update package-lock.json from yarn as far as I know.

So in other words if a PR uses NPM, yarn-lock won't be up to date, and if a PR uses Yarn, package-lock won't be up to date. Then if another later PR comes in those lock files will come in as if they changed when in reality they weren't updated previously just because the previous sentence statement.

I don't like to use "best practice", because is all relative to each person experience, but do anyone has any tips in this scenario. Is it best just to not commit both lock files? Is there another system that works best, or is it just best to force users to use yarn or npm? I think users should just use whatever they want.
Como coletar logs de erro e queries lentas do MySQL com o Filebeat
Published: 2020-12-29 12:22:25

## O que é o MySQL?
O MySQL é um sistema de gerenciamento de base de dados relacional que usa a linguagem SQL (Structured Query Language). Ele é open source e é desenvolvido e suportado pela Oracle. 

Para conhecer mais sobre ele, acesse o site oficial do projeto nesse [link](https://www.mysql.com/).

## Sobre o módulo MySQL do Filebeat
O módulo MySQL do Filebeat coleta os logs de erro e também de queries lentas que são criados pelo MySQL. É de extrema importância identificar essas informações de uma maneira rápida e eficiente para evitar que se tenha problemas com performance no seu ambiente. 

Para saber mais sobre o módulo, acesse a documentação oficial no nesse [link](https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-module-mysql.html#configuring-mysql-module).

## Instalação e configuração do Filebeat
* Para instalar o Filebeat nos hosts, siga os passos descritos abaixo.

Faça o download do Filebeat nesse link.

* Instale o Filebeat:

**Windows:** `PowerShell.exe -ExecutionPolicy UnRestricted -File .\install-service-filebeat.ps1`
**Linux:** `sudo rpm -vi filebeat-7.10.1-x86_64.rpm`

* Acesse o arquivo de configuração do Filebeat:

**Windows:** `C:\Program Files\Filebeat\filebeat.yml`
**Linux:** `/etc/filebeat/filebeat.yml`

Insira nele as informações de conexão com o Elasticsearch e com o Kibana:

```
output.elasticsearch:
  hosts: ["url_do_elasticsearch:9200"]
setup.kibana:
  host: ["url_do_kibana:5601"]
```

* Habilite e configure o módulo :
**Windows:** `.\filebeat.exe modules enable mysql`
**Linux:** `sudo filebeat modules enable mysql`

* Para modificar as configurações do módulo, altere o arquivo mysql.yml:

**Windows:** `modules.d/mysql.yml`
**Linux:** `/etc/filebeat/modules.d/mysql.yml`

Por padrão, o arquivo vem com as seguintes informações e é aqui que você especifica o caminho para o seu diretório de logs:

```
# Module: mysql
# Docs: https://www.elastic.co/guide/en/beats/filebeat/7.10/filebeat-module-mysql.html
- module: mysql
  # Error logs
  error:
    enabled: true
# Set custom paths for the log files. If left empty,
    # Filebeat will choose the paths depending on your OS.
    #var.paths: ["/path/to/log/mysql/error.log*"]
# Slow logs
  slowlog:
    enabled: true
# Set custom paths for the log files. If left empty,
    # Filebeat will choose the paths depending on your OS.
    #var.paths: ["/path/to/log/mysql/error.log*"]
```

* Carregue os dashboards do módulo:

**Windows:** `.\filebeat.exe setup`
**Linux:** `sudo filebeat setup`

* Inicie o serviço do Filebeat:

**Windows:** `Start-Service filebeat`
**Linux:** `sudo service filebeat start`

Depois disso, você conseguirá ver os logs do seu ambiente no discover, além de ter dashboards com informações e métricas dos logs de erro e lentos do seu MySQL.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u39hh9aiug3l4rja6wxf.png)
Introduction to CSS Position
Tags: css
Published: 2020-12-29 12:17:13

I always get confused about how to use and where to use which position value and the difference between the absolute and relative position.
Do you also have the same confusion?
So after reading the positions, I thought to write a blog post

So starts with the definition:
The Position property allows you to position an element. It sets how an element is positioned in a document.

After setting the position property(position: relative/absolute/fixed), we have to position that element using Left/Right/Top/Bottom (Ex => left:100px).
This property doesn't work until the position property sets first.

Now the diff types of position property-

1) Static positioning: 
     HTML elements are positioned static by default.

The static position element always positions according to the normal flow of the page.
So, if we set Left/Right/Top/Bottom it will not affect the content which has a static position property.
Ex position:static;
   top: 10px;

2) Relative positioning:
     It is just like a static value, but now Left/Right/Top/Bottom will work.
In this, the Left/Right/Top/Bottom will shift the element with respect to the value we assign.
The content of the relatively positioned element can be moved & overlap other elements, but the reserved space for the element is still preserved in normal flow.
Ex position:relative;
   top: 100px;


3) Absolute positioning:
     It is positioned relative to the first parent element that has a position other than static.
If no such element found it will position according to <HTML>.

The absolute position element is removed from the normal flow also it can overlap other elements as well.
Ex position:absolute;
   left: 100px;


4) Fixed positioning:
     An element with the fixed position is positioned relative to the browser window, and will not move if the window is scrolled.
It can overlap other elements.
Ex position:fixed;
   top: 10px;
   right: 5px;
In the above example the element will fixed with the browser window to 10px from top and 5px from right.


Please share your questions or thoughts below. Thanks for reading!! Hope this blog helps you!! Cheers! 😊
Building a mental health crisis app, Day 4: Setup User Account Pages
Tags: dohackathon, mentalhealth, codenewbie, digitalocean
Published: 2020-12-29 12:17:10

The app is called “Help Me” and is designed primarily as an “SOS” (distress signal) to a selected circle of trusted people when someone is going through a mental health crisis. The user can send a message with their location to one person or everyone in their community. The goal is to build a trusted community around the user with private conversations and a system to show their emotions. This will help the trusted people to be aware of the user's range of emotions.

#Day 4 of Development
At the end of day 3, I finished the log-in screens and refactored the input fields to be reusable. Day 4 is about building out the user account set-up screens and researching Angular routing so the user can navigate through the different screens.
 
#### Building the set-up screens
The wireframe called for setup screens that will allow the user to create their account. The picture below is my first pass at creating the first of three set-up screens. 
![First pass at set-up screen](https://dev-to-uploads.s3.amazonaws.com/i/36m1xkcdmhrggeaf9ze6.PNG)


I quickly noticed that my reusable input fields were too wide and weren't center. Further research revealed this issue with input fields throughout the app. This next picture is the new set-up screen with that corrected. 
![Set-up screen with fixed input field bug](https://dev-to-uploads.s3.amazonaws.com/i/rw6le5ql9108a6vlptp2.PNG)

With that done, I quickly finished the remaining two set-up screens. Here is a GIF of all three screens in action. 
![Gif of set-up screens in action](https://dev-to-uploads.s3.amazonaws.com/i/4ucxhymscbn3lqlguwu0.gif)
<hr>

#### Adding routing to the app
The next issue to tackle was connecting the log-in screen to the set-up screens via routing. The Angular team provided great documentation [here](https://angular.io/guide/router) on how to do that. The following is a gif of routing throughout the entire app. 
![Gif of the entire app via routing](https://dev-to-uploads.s3.amazonaws.com/i/y9hrg5y586sywn27faum.gif)
<hr>

# What's Next
At this point, I sent my project partner, Miguel Hernandez, a standup of my progress and a pull request for comments. Tomorrow focus will be on completing any recommendations to improve my code.


###Stay on the lookout for a Day 5 breakdown blog post!!!
Why you should learn Javascript in 2021!
Tags: javascript, 100daysofcode, webdev, codenewbie
Published: 2020-12-29 11:51:52

---
title: Why you should learn Javascript in 2021!
published: true
description: If you want to make money online in 2021, Javascript is a MUST.

tags: javascript, 100daysofcode, webdev, codenewbie
//cover_image: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zaf6vdz89b2koc3wu23v.jpg)
---
[![Youtube Video](http://img.youtube.com/vi/pCwkBHLbWaE/0.jpg)](https://youtu.be/pCwkBHLbWaE)


If you want to make money online in 2021, Javascript is a MUST. 
In this video, I'm talking about the reasons you should learn Javascript right now!

Check my latest video on which Javascript Framework to choose:
https://youtu.be/lcGtyAo6Wx8

You'll learn about:
- popular websites built with Javascript
- the market around it
- the opportunities of Javascript

Are you a beginner and studying to get your first job?
I can help you! Connect with me:
https://twitter.com/iam_stratos
Fetch-22
Tags: javascript, html, codepen
Published: 2020-12-29 11:51:24

Browsers have supported `fetch()` for years now (except Internet Explorer), but I still see many developers use classic XHR-based "ajax". 

Why is that? I think — partly — it's because `fetch()` is missing `timeout` and an easier way of handling errors. Yet, developers **do** want to use it because of its simplicity.
In other words: it's a **fetch-22** situation (bad pun intended!)

I've written a small module, fetch22(), which extends the fetch() init-object with:

- **callback(true|false)** : function to call when fetch starts(true) and ends(false)
- **errorHandler(error)** : custom function to run if an error occurs
- **errorList** : Array of status-codes to manually trigger errors
- **parser(response)** : custom function to parse the response, default will use .json() or .text(), depending on response content-type
- **parserArgs** : Array of extra arguments to send to the custom parser after response
- **timeout** : period in milliseconds to allow before a Timeout Error. Default is 9999ms

The module itself can be [grabbed here](https://assets.stoumann.dk/js/fetch22.mjs), and a Pen with examples can be seen here (but go to Codepen and see it in full-screen):

{% codepen https://codepen.io/stoumann/pen/yLaPmaB default-tab=result %}

Here are some of the examples from the demo:

## Custom callback
The custom callback is called twice, once when the fetch initiates, and then when the fetch is complete done:

```js
function startStop(bool) {
  if (bool) {
    console.log('START'}
  else {
    console.log('STOP');
  }
}
```

## Custom ErrorHandler
Receives the error-object as it's only param:

```js
function handleError(error) {
  console.error(error.name, error.message);
}
```

## Custom parser
The default parser returns json or text, depending on `content-type`. An example of a custom parser, finding a `<symbol>` by `id` in an svg:

```js
async function getSymbolFromSVG(response, id) {
  const text = await response.text();
  const parser = new DOMParser();
  const doc = parser.parseFromString(text, "text/xml");
  const svg = doc.getElementById(id);
  return svg.outerHTML.toString();
}
```

Hope it will be as useful for you, as it has been for me. 

Thanks for reading, and happy coding!
Let's deploy the simplest URL redirection service to Netlify!
Tags: netlify, github
Published: 2020-12-29 11:49:34

---
title: Let's deploy the simplest URL redirection service to Netlify!
published: true
description: All you need is a single file.
tags: netlify, github
cover_image: https://static.dt.in.th/uploads/2020/12/29/302.png
canonical_url: https://notes.dt.in.th/20201229T103941Z0502
---

**Sometimes it's a good idea to post links under your own domain,** so that you can change the link's target when needed[^0].

For example, I have a Ko-Fi page at <https://ko-fi.com/dtinth> but I never link to that URL directly; I use <http://link.dt.in.th/coffee> instead. Should I ever decide to use something else[^1], I only need to change the link destination.

[^0]: Some URL shortener services doesn't allow you to change the link's destination unless you pay them money
[^1]: like Patreon or GitHub Sponsors (the latter of which is not available in my country yet)

One simple, low-code way to accomplish this is use Netlify's redirect feature.

1. **Create a GitHub repo** and create a file `public/_redirects`:

     ```
     /youtube   https://www.youtube.com/channel/UClKPjyxFSkk_dPg6YzN0Miw/   302
     /coffee    https://ko-fi.com/dtinth                                    302
     ```

2. **Create a Netlify site** linking to the GitHub repo and set up your domain.

3. There is no step 3.

[The `_redirects` file](https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file) has a simple, machine-and-human-readable, plain-text format. To add or change links, just update the file on GitHub. I find this approach powerful because I can also update this file programmatically using [GitHub's API](https://docs.github.com/en/free-pro-team@latest/rest/reference/repos#create-or-update-file-contents), and teams can collaborate on this file like how they collaborate on code. One downside is that this approach doesn't track how many people used the link, we you'd have to track from the destination instead.
Weekly Challenge 093
Tags: perl, weeklychallenge, perlweeklychallenge
Published: 2020-12-29 11:41:10

[Challenge 093](https://perlweeklychallenge.org/blog/perl-weekly-challenge-093/)

# TASK #1 › Max Points

## Task

You are given set of co-ordinates `@N`.

Write a script to count maximum points on a straight line when given co-ordinates plotted on 2-d plane.

## My solution

I broke this task into smaller parts.

* Read the input separate into an array of numbers, and make sure there are an even number of values. 
* Plot the points on into `@grid` by taking 1 off each value. This makes the point `(0,0)` the bottom right.
* Create a graph. Although not part of the task, it's only four lines of code :)
* Like with the [word search task](https://perlweeklychallenge.org/blog/perl-weekly-challenge-076/#TASK2), go through each point in four directions (up, right, diagonally up and right, diagonally down and right) and find the longest points from that starting point. There is no point going in the other four directions as they are just opposites of the above four.
* Print the longest points to the screen.

## Examples

```
» ./ch-1.pl "(1,1), (2,2), (3,3)"
|     x
|   x
| x
+ - - -

Output is: 3

» ./ch-1.pl "(1,1), (2,2), (3,1), (1,3), (5,3)"
|     x
|
| x
|   x
| x   x
+ - - -

Output is: 3
```

# TASK #2 › Sum Path

## Task

You are given binary tree containing numbers `0-9` only.

Write a script to sum all possible paths from root to leaf.

## My solution

This task was a little more complex than I expected. It didn't help that I had a little bug in my code that took me a while to figure out.

Even though my solution is 64 lines long, it is pretty straight forward.

* First I read the input from STDIN.
* The core of the code is then recursively calling the `_walk_path` sub routine storing the current path in the `@$this_path` array. If we hit the end of a node (i.e. it has no children), then I add it to the `@$paths` array.
* Finally I display the sum, and the paths we visited.

## Examples

(using the examples from the website)

```
» ./ch-2.pl < example-1.txt 
Output is 13
Paths: (1, 2, 3), (1, 2, 4)

» ./ch-2.pl < example-2.txt 
Output is 26
Paths: (1, 2, 4), (1, 3, 5), (1, 3, 6)
```
Deploying AWS Lambda Functions with AWS CDK Python
Tags: awscdk, awslambda, python, aws
Published: 2021-06-14 07:29:10

---
title: Deploying AWS Lambda Functions with AWS CDK Python
published: true
date: 2020-12-29 11:38:52 UTC
tags: awscdk,awslambda,python,aws
canonical_url: https://medium.com/analytics-vidhya/deploying-awlambda-functions-with-aws-cdk-python-92f42d66d5f7
---

[![](https://cdn-images-1.medium.com/max/1504/1*gJr5xNaX679VJ26f2PnWkA.png)](https://medium.com/analytics-vidhya/deploying-awlambda-functions-with-aws-cdk-python-92f42d66d5f7?source=rss-6a5fd2acfac------2)

This is the way!

[Continue reading on Analytics Vidhya »](https://medium.com/analytics-vidhya/deploying-awlambda-functions-with-aws-cdk-python-92f42d66d5f7?source=rss-6a5fd2acfac------2)
How does Jacoco work with Sonar?
Tags: testing, java
Published: 2020-12-29 11:05:45

This pair of frameworks: Jacoco+Sonar is very popular in the Java stack applications. Despite it most of Gradle/Maven files look unclear and it can take time to figure out how it is configured for the arbitrary repository.

I would like to clarify it with the schema to give developers a chance not to spend time on some things while working on a question about code coverage.

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

Where:
* Rectangle - files as inputs and outputs
* Rhombus - Gradle/Maven commands
* Circle - external soft/jars

Hope it helps you to sort out the process!
What Is an indexPath in Swift?
Tags: swift, ios
Published: 2020-12-29 10:58:24

A developer provides a quick tutorial on working with the indexPath in Swift, and explains what this bit of code is used for when creating applications.



In Swift, an indexPath is a list of indexes that, together, represent the path to a specific location in a tree of nested arrays.

It describes an item’s position inside a table view or collection view, storing both its section and its position inside that section.

Each index in an index path represents the index in an array of children from one node in the tree to another, deeper, node.

NSIndexPath has a read-only structure that contains two Int property sections and rows if you're working with UITableViews or a section and item if you're working with UICollectionViews.

You create them with the NSIndexPath:forRow:inSection: factory method:
Swift
1

let indexPath = NSIndexPath(forRow: 1, inSection: 0)



And read them by accessing their properties:
Swift

1

print("row is \(indexPath.row)")



It's as easy as that!

Learn more here: https://dzone.com/users/4044114/rlogicaltechsoft.html
IMDB movie scrapper - my first project
Tags: myfirstproject
Published: 2020-12-29 10:37:54



I have started my programming journey with a project that incorporated a lot of things I have never done before. I was exposed to many new python libraries available for use and also learnt the format of programming projects.

So, I started off by first reading about the library beautiful soup. This library helps us to extract and decode the html code of the website that we are extracting data from. In this case, I was extracting data of the top 250 English and top 250 Hindi movies from IMDB. *(links below)* 

After that, I read up a bit on html to understand the html code of the website. here, I found out that all titles and their years were given in the 'td' section with 

''' python 
{"class": "titleColumn"}
''' 

and all the ratings were given with '{"class": "ratingColumn imdbRating"}' in the same section. So, I extracted them all using the findall function in beautiful soup. I then separated thee title into name and year by splitting the string into two. I then created a class Movie which took in the values name, year and rating.

Now, that I had extracted the data, I had to sort it based on a custom criterion (either movie name "(alphabetically)", Rating or Release Year). 




Links:
1)IMDB top 250 English movies:
 https://www.imdb.com/chart/top/?ref_=nv_mv_250
2) IMDB top 250 Hindi movies: 
https://www.imdb.com/india/top-rated-indian-movies/?pf_rd_m=A2FGELUUNOQJNL&pf_rd_p=4da9d9a5-d299-43f2-9c53-f0efa18182cd&pf_rd_r=F22A2RC934X0Q4NDWHBA&pf_rd_s=right-4&pf_rd_t=15506&pf_rd_i=top&ref_=chttp_ql_7