teleren/devto huggingface dataset:
Basic CSS Traffic Light
Tags: css, beginners, cssart, codepen
Published: 2021-01-12 19:51:30

Lately, I have been working on my CSS art and I am ready to share it. It's pretty basic but it is a huge improvement from last week.

Also, its day 11/100 of #100daysofcode 

Click here to see it live: https://codepen.io/xoshly/full/gOwBGgr
Heroku: Deploy a dockerized Flask ML app
Tags: heroku, flask, docker, devops
Published: 2021-01-12 19:49:43

> In this post we will deploy a simple dockerized Machine learning application written with the Flask micro-framework to the Heroku (PaaS), using one of the leading CI/CD tools, which is Gitlab!, all used tools are free and no fees in achieving this tutorial.

Original article: https://hatembentayeb.hashnode.dev/heroku-deploy-a-dockerized-flask-ml-app
NaN & isNaN
Tags: beginners, javascript, webdev, tutorial
Published: 2021-01-12 19:34:52

This blog post is all about NaN & isNaN in javaScript.

## what is [NaN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN)?
The NaN property in the *global object* represents "Not a Number" value.This property indicates that a value is an **invalid number**.NaN is the return value from operations which have an **undefined numerical result**. 
## Interesting facts about NaN
* NaN is the only thing in javascript that is not equal to itself. Because IEEE declared NaNs are not equal to each other.
* NaNs are part of IEEE 754 spec, which is a numerical representation specification. so, the type of a NaN is number.
 ```
NaN === NaN    //false
typeof NaN     //number
```
>NaN with any mathematical operation is always NaN.
```
10 - "Maguire" //NaN
```
In the above code, the string is coerced to a number which is _invalid(NaN)_. so, it returns NaN.
## utilities which determine if the value is NaN:
* isNaN()
* Number.isNaN()
```
isNaN(5)       //false
isNaN("Tobey") //true
```
When we pass a number, it returns _false_ and _true_ for NaN.
But, **"Tobey"** is not NaN, its a string. The isNaN() utility coerces the value to numbers before it checks. so, the string "Tobey" is coerced to numbers. which is an invalid *number(NaN)*. so, it outputs *true*. It was considered a bad idea. so, a new utility was introduced in ES6.
## A better utility: 🤓
* Number.isNaN()
 
It doesn't do any coercion. And it outputs true if the passed value is NaN and its type is Number.
```
const returnString = () => 'Bully Maguire'
const returnNaN = () => NaN

//isNaN 
isNaN(returnString()) ? true : false            //true
isNaN(returnNaN()) ? true : false               //true

//Number.isNaN
Number.isNaN(returnString()) ? true : false     //false
Number.isNaN(returnNaN()) ? true : false        //true
```
The above example tells the difference between isNaN and Number.isNaN.

And I hope you learned something useful. Thanks a lot 🙏
Else Clauses on Loops
Tags: python, programming, beginners, tutorial
Published: 2021-01-12 19:31:00

Did you know that loop statements may have an else clause?
Well, it turns out that they can be used!

* `else` clause will be executed when the loop completes through all of the iterations with for loop and when the condition becomes false with while loop.

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

Output:
```
Searching...
Searching...
Searching...
Searching...
Searching...
Searching...
Searching...
Searching...
Treasure not found :(
```

* But `else` clause will not be executed when the loop is terminated by a break statement.

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

Output:
```
Searching...
Searching...
Searching...
Searching...
Found the treasure
```

### Best Resources

- [Python Blog Series](https://dev.to/aswin2001barath/series/10416) : A Blog series where I will be learning and sharing my knowledge on each of the above topics.

- [Learn Python for Free, Get Hired, and (maybe) Change the World!](https://academy.zerotomastery.io/a/aff_tz1t0tpx/external?affcode=441520_dcwk-s8s) : A detailed roadmap blog by Jayson Lennon (a Senior Software Engineer) with links to free resources.

- **Zero To Mastery Course** - [Complete Python Developer](https://academy.zerotomastery.io/a/aff_9khypm7v/external?affcode=441520_dcwk-s8s) : A comprehensive course by Andrei Neagoie (a Senior Developer) that covers all of the above topics.

**Who Am I?**

I’m Aswin Barath, a Software Engineering Nerd who loves building Web Applications, now sharing my knowledge through [Blogging](https://medium.com/techsoftware) during the busy time of my freelancing work life. Here’s the link to all of my socials categorized by platforms under one place: https://linktr.ee/AswinBarath

**Thank you** so much for reading my blog🙂.
Java XML External Entity Injection - Explained and Solved
Tags: java, security, xml
Published: 2021-01-12 19:17:40

Java natively supplies many different options to parse XML. However, all available parsers in Java have XML eXternal Entity (XXE) enabled by default. This makes Java XML libraries particularly vulnerable to XXE injection.
With XXE enabled, it is possible to create a malicious XML that reads the content of an arbitrary file on the machine. It’s not a surprise that XXE attacks are part of the OWASP Top 10 vulnerabilities. In this video, I explain how XXE injection works, and I demonstrate how you can prevent these types of attacks in your own Java code.

{% youtube 2fLPIWK5W7k %}
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2021-01-12 18:32:40

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round-up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Tuesday, we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

### 2021 — The year of full-stack 
@itsnitinr has decided to learn the following technologies this year. By the end of this post, you might be on the same page!


{% link https://dev.to/itsnitinr/technologies-that-i-ll-be-learning-in-2021-as-a-mern-stack-developer-with-resources-4pci %} 


### Paper experiments

Ok, these are not _actual_ paper experiments by @s_aitchison (this is DEV after all). But I think you’ll find these  CSS effects to look pretty close to the real thing!

{% link https://dev.to/s_aitchison/3-experiments-with-css-paper-effects-2o56 %} 

### Consistency, consistency, consistency (git it?)

This tutorial by @timmybytes will help your commit history look neat, navigable, and consistent. Who doesn’t need more of that in their life?

{% link https://dev.to/timmybytes/keeping-git-commit-messages-consistent-with-a-custom-template-1jkm %}

### A Model View Controller primer

In this tutorial by @eaetukudo, we explore building endpoints using the MVC architecture. Interesting stuff!

{% link https://dev.to/eaetukudo/understanding-mvc-pattern-in-nodejs-2bdn %}

### Taking your data back

@kiraemclean vowed to get off Google entirely -- a lofty goal they achieved. If you thought this was impossible, think again.

{% link https://dev.to/kiraemclean/what-i-use-now-instead-of-google-56lf %}

### Dedicate 2 hours every day. No matter what.

Great tips from @oleksandrbezhan on building a business when life seems to have infinite distractions.

{% link https://dev.to/oleksandrbezhan/how-i-launched-a-5-figure-business-while-working-as-a-full-time-software-dev-and-how-you-can-do-the-same-290b %}

### What is JWT?

@kmistele breaks it down wonderfully

{% link https://dev.to/kmistele/demystifying-jwt-how-to-secure-your-next-web-app-9h0 %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
"Navigation Bar" by Jan Kaděra
Tags: codepen
Published: 2021-01-12 19:03:09

---
title: "Navigation Bar" by Jan Kaděra
published: true
tags: codepen
---

<p>Give it a hover! Inspired by: Navigation Bar by Jan Kaděra <a href="http://dribbble.com/shots/1267103-Navigation-Bar" target="_blank">http://dribbble.com/shots/1267103-Navigation-Bar</a></p>

{% codepen https://codepen.io/katydecorah/pen/HEgwl %}
Handle Map in React
Tags: help, react
Published: 2021-01-12 18:52:00

---
title: Handle Map in React
published: true
description: 
tags: help, react
//cover_image: https://direct_url_to_image.jpg
---
Hi! I´m a beginner front end dev, and i have some work with react.
But i have a doubt with manipulate an element in a map render components.

##The Problem
Change a msg variable in only one element in a map
So, i have this variable in a title element:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n3053gwb7fm3ql9wknmx.png)

And when the button is pressed i call a function and try set the message in this way:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/enm6481c8t93uhw5upis.png)

__Obs:__ I use useRef hook to get el reference in the dom

So, anyone can help me with this?
Day 10 :100DaysOfCode
Tags: 100daysofcode, productivity, kotlin, programming
Published: 2021-01-12 18:43:35

Studied some more commands of oracle db,
few leetcode problems...studied sliding window concept

solved few ques on codechef 

almost finished my portfolio(built using html,css,js).
Will try to deploy it by this week.

completed daily scrum at intern(android dev),
continued learning trees.
.
..
...
/EOD/
PS:- 10 days just got finished.
You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
What makes a great junior developer? No, it's not your tech skills

Tags: career, beginners, codenewbie, discuss
Published: 2021-01-12 18:42:50

Hey people!
A couple of days ago, I read an [article](https://dev.to/alimobasheri/why-i-succeeded-in-the-interview-but-lost-the-job-gej) in Dev.to about junior developer, who was fired only after 7 days for reasons that just did not make sense to me.
That's why I'm going to share my opinion about what we should NOT expect from junior developers and what are the things that mentors and recruiters should value in less experienced devs.

[See my thoughts from the video](https://youtu.be/eQTzAJlnyUs)
{% youtube eQTzAJlnyUs %}

Agenda of the video:
- 1. Intro
- 2. What NOT to expect from a junior dev?
- 2.1 Detailed technical knowledge
- 2.2 Architectural patterns
- 2.3 Complete independence
- 3. What makes a good junior developer?
- 3.1 Team fit
- 3.1 Curiosity
- 3.2 Openness to feedback
- 3.3 Going out of comfort zone
- 3.4 Constant learning, growth mindset
- 4. Conclusion

## What do you believe makes a great junior developer?
Share your ideas in response so we could have different views on that matter.

Want more info like that?
👉 Twitter: https://twitter.com/developerHabits
👉 Dev.to: https://dev.to/kethmars
👉 IG: https://www.instagram.com/developerhabits
Communicating when working remote
Tags: culture
Published: 2021-01-12 18:27:25

I was recently rewatching one of my favorite talks, [Jonathan Rosenberg's Rules to Success](https://www.youtube.com/watch?v=P1T-1FqUBVY) and it just struck me how many of his points are even more important today than ever, especially on communication, which is really important when working from home. I shared my notes on that with my team at work but figured it would also be useful to others here.

* Overcommunicate always all the time. You cant communcate enough
* Openly share everything with your collegues. Trust your people and give them this info. Trust breeds loyalty.
* Repetition does not spoil the prayer
* Each word matters. Be crisp and direct and choose each word wisely
* Great leaders are great teachers and great teachers are great storytellers. Narrative matters.
    
On Talking:
* As leaders, you learn more by listening than talking. Listening makes you humble and smart. When you listen you learn how things work, when you talk, you echo how you think things work.
* If you must talk, ask questions. People learn more about you from your questions
* If you actually know the answer in a business situation, talk, but back up with data.
* Try to respond instantly. If you don't respond instantly, everything stalls.

Thoughts are always welcome 😀
Cara Install Mosint
Published: 2021-01-12 18:19:43

git clone https://github.com/alpkeskin/mosint.git
Setting ----
python3 mosint.py -e " "

[![IMAGE ALT TEXT HERE](https://i.ytimg.com/an_webp/n48YCIJqksQ/mqdefault_6s.webp?du=3000&sqp=CJjN9_8F&rs=AOn4CLClHev-Dn1uTWdPdcE2swZDusG7ug)](https://www.youtube.com/watch?v=n48YCIJqksQ)
Basic jump statements in python
Tags: python, programming, beginners, tutorial
Published: 2021-01-12 18:12:00

Jump statements can be used to modify the behaviour of conditional and iterative statements.

`break` and `continue` statements fall under the *jump statements* category.

## `break` statement
* The `break` statement, borrowed from C programming language, breaks out of the current loop when encountered.
* So, any further iterations will not be executed as the `break` statement changed the flow of the program by coming out of the loop.

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

Output:
```
Searching...
Searching...
Searching...
Searching...
Found the treasure
```

## `continue` statement
* The `continue` statement, borrowed from C programming language, continues with the next iteration of the loop when encountered.
* So, any code following the `continue` statement in a loop will be skipped and the loop will continue the next iteration.

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

Output:
```
Found an even number 2
Found an odd number 3
Found an even number 4
Found an odd number 5
Found an even number 6
Found an odd number 7
Found an even number 8
Found an odd number 9
```

### Best Resources

- [Python Blog Series](https://dev.to/aswin2001barath/series/10416) : A Blog series where I will be learning and sharing my knowledge on each of the above topics.

- [Learn Python for Free, Get Hired, and (maybe) Change the World!](https://academy.zerotomastery.io/a/aff_tz1t0tpx/external?affcode=441520_dcwk-s8s) : A detailed roadmap blog by Jayson Lennon (a Senior Software Engineer) with links to free resources.

- **Zero To Mastery Course** - [Complete Python Developer](https://academy.zerotomastery.io/a/aff_9khypm7v/external?affcode=441520_dcwk-s8s) : A comprehensive course by Andrei Neagoie (a Senior Developer) that covers all of the above topics.

**Who Am I?**

I’m Aswin Barath, a Software Engineering Nerd who loves building Web Applications, now sharing my knowledge through [Blogging](https://medium.com/techsoftware) during the busy time of my freelancing work life. Here’s the link to all of my socials categorized by platforms under one place: https://linktr.ee/AswinBarath

**Thank you** so much for reading my blog🙂.
Esteganografia com Steghide
Tags: linux, security, braziliandevs
Published: 2021-01-12 18:06:39

Olá pessoal, hoje vamos aprender a utilizar a ferramenta **Steghide** , utilizada para **Esteganografia**. Os arquivos que podem ser utilizados com portadores suportados pela ferramenta são JPG, BMP, WAV e AU. Entretanto os dados que podem ser armazenados não há restrição de tipo e formatos, por exemplo: podemos armazenar um arquivo no formato zip dentro de uma imagem JPG, mas não o contrário.

Esteganografia é uma técnica utilizada para armazenar mensagens dentro de outros arquivos, para ocultar a existência da mensagem.

Instale a ferramenta:

```bash
sudo apt install steghide
```

Após a instalação, selecione alguma imagem para realizar os próximos passos. O nome da imagem que utilizarei será `my-dog.jpg`.

Crie um arquivo `mensagem.txt` e adicione o conteúdo abaixo:

```
Mensagem escondida, sou hacker!!!!
```

Execute o comando abaixo para aplicar a esteganografia, será solicitado a senha no processo.

```bash
steghide embed -cf my-dog.jpg -ef mensagem.txt
```

Outra forma é aplicar esteganografia e ter como resultado uma nova imagem, sem alterar a imagem original, execute o comando e observer o resultado em uma nova imagem com o nome `dog.jpg`.

```bash
steghide embed -cf my-dog.jpg -ef mensagem.txt -sf dog.jpg
```

Para verificar se a imagem tem algum arquivo oculto, utilize o comando abaixo:

```bash
steghide info dog.jpg
```

Para realizar a extração do arquivo embutido:

```bash
steghide extract -sf dog.jpg
```

Dica: não hospede as imagens com esteganografia em locais que comprima as imagens, pode corromper a mensagem oculta.

## Referências

SLACKJEFF. Esconda mensagens com Steghide. **YOUTUBE**. 09. out. 2020. 12m41s. Disponível em: https://www.youtube.com/watch?v=gusm\_uEUw0A. Acesso em: 14. out. 2020.

BÓSON TREINAMENTOS. Steghide - Esteganografia No Linux - Ocultando Mensagens Em Imagens. **YOUTUBE**. 9 set. 2015. 16m31s. Disponível em: https://www.youtube.com/watch?v=SJ93HcwEq\_4. Acesso em: 10 nov. 2020.

ESTEGANOGRAFIA – WIKIPÉDIA, A ENCICLOPÉDIA LIVRE. 21 jul. 2020. **Wikipedia**. Disponível em: https://pt.wikipedia.org/wiki/Esteganografia. Acesso em: 22 nov. 2020.

MATEUS, Hudson. Esteganografia Utilizando Steghide. 24 maio 2010. **VIVA O LINUX**. Disponível em: https://www.vivaolinux.com.br/artigo/Esteganografia-utilizando-steghide. Acesso em: 23 nov. 2020.

STEFANODEVUONO/STEGHIDE. **GitHub**. Disponível em: https://github.com/StefanoDeVuono/steghide. Acesso em: 23 nov. 2020.
Ionic VueJS SplitView SideMenu Vuex Auth Flow Starter Template with Video
Tags: ionic, vue, tutorial, webdev
Published: 2021-01-12 18:03:21

####[See My Upcoming Book On Ionic & Vue JS](http://bit.ly/ionicvuebook)
---

IonicFramework VueJS SplitView SideMenu Vuex Auth Flow Starter Template with Video

{% youtube fm1VIaNF0q0 %}

- That's a long title but there is a lot going on here.

### Overview 
Source code provides and fully commented starter template for creating solutions based on this starter template. There is minimal use of typescript and we are using the older vue2 style options API instead of the newer vue3 composition API using the setup method in the components.

> Please give me some feedback on my book, early folks will get a discount on the book, join the email list to get notified - https://leanpub.com/ionic-vue-sqlite-crud/
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f8wp87tmx885u8fj6qbj.png)

### What You Are Getting
The video and source code includes the following to get you started with a good base
- Template in Vue2 style meaning no setup function
- limited typescript, I just use any everywhere to keep. it simple
- And comments!!, I tried to comment on every file and everything that looked like it might not be straightforward
- Added Authentication using vuex for state management, added a module so I could explain namespace in vuex

### Previous Content
The older video covered the same material but in the earlier beta version of Ionic VueJS Components. This might be a reference for folks still on Vue2 https://youtu.be/T6YL1jeH8EM

### Links
Ionic Documentation
- https://ionicframework.com/docs/api/split-pane
- https://ionicframework.com/docs/api/menu

Vuex Documentation
- https://next.vuex.vuejs.org/

Source Code
https://github.com/aaronksaunders/ionic-vue3-split-screen-vuex-starter
How to swap 2 variables in javascript
Tags: javascript, node, angular, react
Published: 2021-01-12 17:57:14

---
title: How to swap 2 variables in javascript
published: true
description: Javascript destructuring enable variable swapping without need an intermediate variable
tags: javascript, nodejs, angular, react, 
//cover_image: https://direct_url_to_image.jpg
---

Normally to swap two variables you need a temporary variable because when the first variable is reassigned you lose the value.
```js
let a = 'apple';
let b = 'orange';

let tmp = a;
a = b;
b = temp;
```
We have the syntax available to perform a swap without need an intermediate variable.
```js
let a = 'apple';
let b = 'orange';

[a, b] = [b, a];

console.log(a); // orange
console.log(b); // apple
```
Javascript destructuring enable variable swapping without need an intermediate variable.

Cheers mates!
Native Mobile Application dev using HTML5
Tags: javascript, bluetooth, application, html
Published: 2021-01-12 17:53:19

I started learning **JavaScript** since November 2018. Since then, I fell in love with this powerful language. In this post, I would like to share my experience of app dev using JavaScript and to encourage you guys to develop apps using `HTML5` tech.

My first experience with JS started with [`MUI`](https://www.dcloud.io/mui.html) by using which I would like to develop an mobile application to measure human abdomen movements using smartphone's accelerator. `MUI` is a H5-based framework for developing "native" applications (can be called Chinese version `Reaction Native`?). The `MUI` team has also developed `HTML5plus` sdk (Chinese-version `Cordova`) which grants applications the access to host device's capabilities such as sensors, phone status, etc. With these tools, I have easily developed my application within two days. One month later, we have decided to develop an application for communicating with our smart wearable hardware via Bluetooth. Thus along with progress of hardware development, I have developed another application for testing communications with the hardware and for collecting test data. Several months later, this application becomes a very useful tool for our team, which is used to: flash the firmware, testing the stability of BLE connection, adjusting parameters for algorithm and embedded software, collecting debug logs, data collecting during nightly tests, ROB (robustness) issues investigation, etc.

For copyright reason, I cannot share the source code of this application. Below are screenshots of two non-secret parts of my code. The bluetooth dev manual is given [here](http://www.html5plus.org/doc/zh_cn/bluetooth.html).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rlz6vtuje0xeivoeiykx.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b3kgwudn816tvqoqo0co.PNG)



This is a video showing how I did the test with my application and the wearable hardware prototype.
{% youtube o4wFFWRzx88 %} 

Another video of motion data collection on a premature baby using my app:
{% youtube NwDZiueJlrw %}
jQuery dataTable properties.
Tags: explainlikeimfive, jquery, datatable
Published: 2021-01-12 17:41:32

I am using a dataTable which I've initiated with, 

    var datatable = $('#datatble').DataTable({
        ... (Some stuff around there)
        oLanguage: {
            sSearch: '_INPUT_'
            lengthMenu: '_MENU_',
        },
        language: {},
        sDom: '',
    });

My question is why there is a prefix for properties like `sDom, oLanguage, sSearch`?

Without `language: {},` the lengthMenu property did not work. Without the prefix, that corresponding property didn't work.

Please explain me, why is this happening?
What are those `prefix` are meant?
#Day 28: CodeChef DSA Learning Series Day-2
Tags: 100daysofcode
Published: 2021-01-12 17:31:31

Today, I solved 4 questions from the DSA Learning Series Contest-1. I was happy with my Lapindromes solution but I guess it was exceeding the time limit because it showed the wrong solution when I submitted. I was unable to find an optimal solution for it today. I'll try solving it again tomorrow.