teleren/devto huggingface dataset:
Input Fields with Floating Label (CSS Only)
Tags: codepen, css, html
Published: 2022-10-17 01:40:22

**I tried to create a better input experience.**

- Before clicking, the placeholders are set.
- On click, the placeholder turns to a floating label.
- If the area is filled, border disappears. I used `:not(:placeholder-shown)` for this.

Nice for a11y and UX (hopefully)

{% codepen https://codepen.io/altug/pen/xxjBNze %}

Please share your thoughts: [altug.design](https://altug.design)
STOP Believing this if you are beginner at programming
Tags: beginners, programming, advance, devops
Published: 2022-10-17 01:30:38



**01. Single Roadmap**

Myth: There's a single best roadmap and way to learn programming

Reality: There's dozens of languages and hundreds of technologies. And there's no one best way to learn any of those. Just get your hands on a couple of technologies you like, and learn + build stuff to explore


**02. Every thing**

Myth: If you don't know every bit of what's out there in your field, you won't get hired.

Truth: You cannot possibly learn everything out there and no company would expect you to. Focus on the basics and start interviewing. You are probably ready before you think you are.

**03. Only genius**

Myth: Top tier tech companies hire geniuses, and you can never get there

Truth: They hire talented individuals with decent problem-solving capabilities and strong computer fundamentals. You can learn to be that faster than you think.

**04. Development is easy**
Myth: Development is straight forward once you know what to do

Truth: As a dev, you'll feel like a superhero one hour and a complete idiot the next. You'll be stuck on gnarly bugs for hours & your estimates might be way off. If you still find your way through, you're a good dev

**05. Experts**
Myth: Good programmers are experts in the technology or language they work on

Truth: Good programmers are good problem solvers. They are good researchers, good readers, and good at recognizing patterns. They are patient enough to try until they succeed & learn from experience
Docker, NodeJS, and MySQL 8
Tags: docker, node, mysql8, mysql
Published: 2022-10-17 00:46:58

Seen this error when using Docker for NodeJS and MySQL 8?
```
Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client
```
It is most likely the wrong package is being used.
- [mysql](https://www.npmjs.com/package/mysql) package does not support MySQL 8 authentication method ([More info here](https://stackoverflow.com/a/56509065))
- Use [mysql2](https://www.npmjs.com/package/mysql2) package

## Note
Make sure the MySQL server is fully running before trying to connect, otherwise an error like below
```
Error: connect ECONNREFUSED 172.17.0.1:3306
```
Leading engineering teams workshop
Tags: events, engineeringmanagers, leadershipskills, workshop
Published: 2022-10-17 00:42:45

Heads up engineering managers. If you want to power up your leadership skills and help your team achieve more, make sure you grab a ticket to Blackmill's workshop!
https://blackmill.co/workshops/leading-engineering-teams


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ien0rjxg2n468x3uxhw.png)
How to choose the right NPM package in 4 steps 📦
Tags: npm, productivity, opensource
Published: 2022-10-17 00:11:28

Hey, maybe you have been searching for the right library for your needs several times. In this article, I will present my algorithm to find suitable and share appropriate resources. For example, I will try to find a good library for front-end localisation.

## Let's find and create a list of libraries 📋
I post some of them here, but it's good to have more options.

- react-i18next
- lingui
- react-intl
- react-translated

Resources: [bestofjs](https://bestofjs.org/), [openbase](https://openbase.com/), articles on the topic.

## Check the documentation 📑
It's an obvious tip, but not everybody understands what to check. You should understand your business requirements and then go to the doc to see if the libs contain all of the features you need and support a translation format for your project.

## Take a look at the project source code 🏢
1. Try to understand who maintains the project. If even one repo is less popular, it will have a founder who understands the problems of other frameworks in the industry and solves them more efficiently.
2. Check for the issues, how they are reviewed, and are the community actively collaborates to improve the package.
3. Check the project insights page. It's a place where you will find more statistical data.
![Lingui project insights](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vasfmhu5s2qwe5s4buda.png)
4. If you cannot find a needed feature in the documentation, it's possible that authors forgot to add it, or didn't have enough time for it, so it's definitely best to go to the source files and check them.

## Create a comparison table ⛳️
It's an excellent way to structure all information into one table.

| Name             | Size (minified + gzipped)| Dependecies | Typescript |Open/Closed issues | Last publish  |
| ---------------- | ------------------------ | ----------- | -----------|------------------ |---------------|
| react-i18next    | 6.7kB                    | 2           | 8%         |8/1044             |  a month ago  |
| lingui           | 7.8kB                    | 3           | 89%        |20/693             |  4 months ago |
| react-intl       | 17.8kB                   | 10          | 77%        |12/1686            |  4 days ago   |
| react-translated | 7.8kB                    | 2           | 0%         |3/6                |  3 years ago  |

To create this table I used [bundlephobia](https://bundlephobia.com/), [npmtrends](https://npmtrends.com/), [snyk](https://snyk.io/), github projects page.

## Is it easy to integrate? 🤓
In our case, for the front-end localisation lib, we will check several points:

- Is it easy to integrate into your project? Maybe your monorepo already has some localisation dependencies
- Does it support your front-end framework
- After the integration, it's good to measure performance changes

## Finally 🎉
You will have a bigger picture of what is going on with your npm packages. Have fun!
Setting up variables in Azure-Devops pipelines
Tags: azuredevops, variables, azurepipelines
Published: 2022-10-16 23:49:33

## To add a variable in the pipeline yaml files:

```
trigger:
- none

name: $(TeamProject)-$(SourceBranchName)-$(Build.BuildId)-$(Hours)$(Minutes)$(Seconds)-$(Date:yyyyMMdd)$(Rev:.r)

variables: 
  MyDockerTag: '$(Build.BuildId)'

pool:
  name: DemoPool
  demands:
  - Agent.Name -equals $(agentname)

stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    timeoutInMinutes: 0 
    displayName: Build
    pool:
      name: DemoPool
      demands:
      - Agent.Name -equals $(agentname)
    steps:
    
    - task: Docker@2
      inputs:
        containerRegistry: 'registry-name'
        repository: '$(namespace)'
        command: 'build'
        Dockerfile: '**/Dockerfile'
        tags: 'latest'
     
     - task: Docker@2
      inputs:
        containerRegistry: 'registry-name'
        repository: '$(namespace)-test'
        command: 'push'
        tags: '$(MyDockerTag)'
```

The trigger none - says the build is not auto-triggered whenever there is code push. Variables are defined in the variables section.

$(Build.BuildId) is the system variable and that would have the build number as the value.

For agentname and namespace, the variable can be defined globally as shown below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ccddk6o529uumsobhtx.png)

[](https://go.microsoft.com/fwlink/?linkid=2098718)
Javascript begin
Tags: webdev
Published: 2022-10-16 22:54:47

Ormai sono più di due settimane che sto provando javascript, e devo dire che piano piano sto migliorando la mia comprensione del linguaggio, e scomprendo cose pazzesce!

## Le Funzioni, funzionano?

Abbiamo visto le funzioni e come crearle in modo da poterle riutilizzare e renderli il lavoro più facile e veloce.

per esempio ci era stato assegnato il compito di creare una funzione che ci aiuti a capire, in maniera quasi automatica, se un numero era pari o dispari.

```
function isEven(num) {
   if (num % 2 === 0) {
    return true;
   }else {
    return false;
   }
  }
```
DPS909 Blog :Third contirbution in HACKTOBERFEST
Published: 2022-10-16 22:49:19

Hey everyone, thanks for reading my Blog post. This post is regarding my Third contribution to the [HACKTOBERFEST](https://hacktoberfest.com/).

## Overview
In Release 0.2 we were asked to participate in the Hactoberfest so that we could contribute to real open source projects. Furthermore, the main goal of this release is to help you gain experience and confidence in contributing to open source projects through direct involvement in a number of real projects.

## Finding right Open Source Projects
For my third contribution to an open source project i have chosen this Repo on [Qurl.gq](https://github.com/TheRedstoneRadiant/Qurl.gq)

[Qurl.gq](https://github.com/TheRedstoneRadiant/Qurl.gq) is an open-source URL Shortener written in Node.js.

## Issue
Issue which i have found in [Qurl.gq](https://github.com/TheRedstoneRadiant/Qurl.gq) is about Create format script for the application.

Link to [issue-24](https://github.com/TheRedstoneRadiant/Qurl.gq/issues/24)

In this issue I have to create the script and added a script in `package.json` to format every file `(*.js, *.ejs, *.css)`.

## Pull Request
After creating the script i have created this [PR](https://github.com/TheRedstoneRadiant/Qurl.gq/pull/30).

## Conclusion

Working on Open source projects has really helped me a lot to learn about the new way and let me gain some experience on how to work on open source projects.

`Thanks`
Programação orientada a testes?!
Tags: programming, test, python, tdd
Published: 2022-10-16 22:24:34

## Para começar 
Ao construir um projeto, um sistema ou até mesmo um simples código, nos bate aquela dúvida: _**`será que o que eu construi está funcionando corretamente?`**_ É ai que surge a necessidade de implementar testes em seu código, como o próprio nome diz, testar se o que você escreveu está retornando o esperado. 

## Testes unitários e TDD
Agora que já vimos um pouco sobre a importância de termos teste em código, vamos ver a diferença entre `Testes unitários e TDD`. Testes unitários são trechos de código que vão "exercitar" a entrada, saída e comportamento do seu código, já o Desenvolvimento Orientado a Testes (TDD) é uma forma de pensamento, que consiste em escrever testes primeiro do que o código. 

<img width="100%" style="width:100%" src="https://media.giphy.com/media/OwrBi1r1XWP00loE3I/giphy.gif">

É isso mesmo que vocês leram. Testar antes mesmo de escrever o código. 

O grande motivo desse pensamento é que quando criamos os testes para código que até mesmo nem existem ainda, o processo de criação desse código se torna muito mais fácil, pois você já sabe "onde quer chegar" com ele. 

## O ciclo do TDD 
Mesmo sendo mais fácil construir o código tendo seu teste criado, não significa que acertaremos de primeira. Aqui falarei talvez da coisa mais importante da metodologia do TDD, o ciclo de funcionamento dele. O ciclo é formado por três etapas: 

- Escrever um teste e fazer ele falhar (se estamos escrevendo o teste primeiro é claro que ele irá falhar)
- Escrever o código que será testado pelo seu teste
- Refatorar o código para algo mais otimizado

Essa imagem representa bem o que quero dizer: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7iv2x9pnnim84md4mwjr.png)

## Para finalizar
E estamos chegando ao fim desse artigo pessoal, ele foi bem curtinho com o intuito de dar apenas novas visões sobre a importância de se fazer teste em nosso código, independentemente da linguagem utilizada. Utilizando o TDD seu código fica mais confiável e legível, pode ser difícil aplicar essa metodologia no começo mas com o tempo fica mais fácil! 


## Materiais de referência
- [In-tests-we-trust](https://code.likeagirl.io/in-tests-we-trust-tdd-with-python-af69f47e6932)
- [Desenvolvimento Orientado a Testes](https://www.amazon.com.br/Test-Driven-Development-Kent-Beck/dp/0321146530)
A Portfolio
Published: 2022-10-16 21:56:16

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9nzxia9qvt08noogrbr.png)


So I have been feeling a little frustrated lately on how to proceed and learn more in order to make me more job-capable.  I have been going through many tutorials, codewars, projects, and networking...but still felt, well...stuck. So to get myself out of this funk, I decided to work on polishing up and publishing a Portfolio page of all my projects.  Also update my resume, and ultimately become more connected.  

I am proud of the work that I have accomplished now and basically have my Portfolio page the way I want it to look!  I love being able to learn how to read and write code better to organize my thoughts into something presentable. 

https://myportfoliojacksondynamics.netlify.app/
Getting Started on Elixir and Ecto Part 1
Tags: elixir, database, programming, webdev
Published: 2022-10-16 21:49:47

_Ecto provides a standardized API and a set of abstractions for talking to all the different kinds of databases that exist. _

In this article series, we’re going to learn some basics about Ecto, such as **Creating a Phoenix project**, **database setup and connection**, **creating**, **reading**, **updating**, and **destroying** records from a PostgreSQL database.

## 1. Creating a new Project & add dependencies

Let’s get an Elixir application up and running as quickly as possible by running this command.

`mix new taskers --sup`

We have to install **Ecto** and **Postgrex** as dependencies of our application. Ecto uses Postgrex driver to communicate with a PostgreSQL database. To add these dependencies to our application we will follow the steps below.

> Add Ecto and Postgrex to our mix.exs file by modifying it and Finalizing the steps by running the following command.

_Check for the latest version

`Run this command : mix deps.get`

We now need to set up some configuration for **Ecto** so that we can execute actions on a database from within the application.
Run this command : 

`mix ecto.gen.repo -r Taskers.Repo`

The above command will generate a configuration file required to connect to a database in the _config/config.exs_.


To allow the **Ecto** process which receives and executes our application’s queries we need to do a piece of configuration to be able to query data.

Add this to _config/config.exs_ since the generator does not add it:

`config :taskers, ecto_repos: [Taskers.Repo]`
Asia Virtual Solutions - Content development, web marketing and virtual services
Tags: sem, hosting
Published: 2022-10-16 21:30:32

Asia Virtual Solutions is a virtual services company that provides web marketing, social awareness, link building, and software automation for reasonable rates.

We are a team of experienced professionals who offer the latest and most innovative methods to help you reach your goals. Our ultimate goal is to ensure we exceed expectations by providing quality work and maintaining affordability without sacrificing time or effort!

[https://asiavirtualsolutions.com](https://asiavirtualsolutions.com)
HTML & CSS learning Journey!
Tags: webdev, beginners, html, css
Published: 2022-10-16 21:27:10

Another session of HTML/CSS learning and build this registration form!

So pleased with myself - next step is to do it with no help or prompting! LET'S GO!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5zaynblaac0fkhq21i0.PNG)
Deno: how to start use it
Published: 2022-10-16 21:08:51

Deno is a new JavaScript/TypeScript runtime with secure defaults and a great developer experience. It's built on V8 and Rust.

## How to install

You can install Deno using the following command:

```zsh
curl -fsSL https://deno.land/x/install/install.sh | sh

```


## How to use

After installing Deno, you can create a file with the .ts extension and write your code.

After saving the file, you can run the code by typing the following command:

```zsh
deno run file.ts

```

## How to use a module

You can use a module by typing the following command:

```zsh
deno run --allow-net https://deno.land/std/examples/welcome.ts

```

## How to use a module in your code

You can use a module in your code by typing the following command:

```ts

import { serve } from "https://deno.land/std/http/server.ts";

const s = serve({ port: 8000 });

console.log("http://localhost:8000/");

for await (const req of s) {

req.respond({ body: "Hello World" });

}
```

## How to install a module

You can install a module by typing the following command:

```zsh
deno install \
--allow-net --allow-read \
--allow-write --allow-env \
--allow-run --unstable \
https://deno.land/x/velociraptor/cli.ts
```


## How to use a package manager in your code

You can use a package manager in your code by typing the following command:
```ts
import { vpm } from "https://deno.land/x/vpm/vpm.ts";

await vpm.install("https://deno.land/x/velociraptor/cli.ts");

```
Optimizar sentencia if, elif, else
Tags: python
Published: 2022-10-16 20:57:53

En algún momento de nuestra vida como desarrolladores nos enfrentamos a controlar una situación con diferentes opciones, una de ellas podría ser controlar los días de la semana o los meses.
Para poder enfrentar esta situación escribimos un código como el siguiente:

```
if dia == 1:
    return “lunes”
elif dia == 2:
    return “martes”
…
elif dia == 7:
    return “domingo”
else:
    return “dia no controlado”
```

Pero podríamos eficientar este proceso haciendo uso de diccionarios, esto nos permitirá reducir significativamente las líneas de código, y generar un código mucho mas limpio.

```
DICT_DIAS = {
    '1': 'lunes',
    '2': 'martes',
    '3': 'miercoles',
    '4': 'jueves',
    '5': 'viernes',
    '6': 'sabado',
    '7': 'domingo'
}

def obtener_dia(valor:str)->str:
    return DICT_DIAS.get(valor,'Valor no controlado')
```
Con el código anterior no solamente logramos optimizar nuestro código si no que emula la función de la sentencia case, en caso que el valor buscado no exista devolvera 'Valor no controlado'
How to Bypass Geo-Restrictions and Access Any Website You Want
Published: 2022-10-16 20:48:10

Blog Introduction: Geo-restrictions are a common occurrence on the internet. Many websites are blocked in certain countries due to regulations or censorship. This can be frustrating, especially if you're trying to access a website for work or entertainment purposes. Luckily, there are ways to bypass these geo-restrictions so that you can access any website you want, no matter where you are in the world. Here's how.

## 1. Use a VPN
One of the most effective ways to bypass geo-restrictions is to use a virtual private network, or VPN. A VPN encrypts your internet traffic and routes it through a server in a location of your choice. This makes it appear as if you're accessing the internet from that location, which allows you to bypass geo-restrictions. There are many different VPN providers available; however, not all VPNs are created equal. Be sure to do your research before choosing a provider so that you can be sure you're getting a high-quality service.

## 2. Use a Proxy Server
Another way to bypass geo-restrictions is to use a proxy server. A proxy server acts as an intermediary between your computer and the internet. When you connect to a proxy server, your traffic is routed through that server before it reaches its destination. This allows you to change your IP address and circumvent geo-restrictions. However, it's important to note that proxy servers are often not as secure as VPNs, so be sure to choose a reputable provider.

## 3. Use Tor Browser
If you're looking for a free way to bypass geo-restrictions, then Tor Browser is a good option. Tor Browser routes your internet traffic through multiple volunteer nodes, making it difficult for anyone to track your activity or whereabouts. This makes it ideal for accessing blocked websites; however, it's important to note that Tor Browser can be slow due to the number of hops your traffic needs to make before reaching its destination. Additionally, because Tor Browser is free, there are fewer features and options available than with paid services like VPNs and proxy servers.

**Conclusion**
There are many reasons why websites may be blocked in certain countries—whether it's due to censorship or regulations—but that doesn't mean you have to miss out on the content you want to see. By using a VPN, proxy server, or Tor Browser, you can circumnavigate geo-restrictions and access any website you want—no matter where you are in the world.

**Author Bio**
Nancy Nixon is a creative writer at [Savvy Binge](https://savvybinge.com/) who loves to share her ideas on how to bypass restrictions on streaming services. She has a passion for helping others access the content they love, and she believes that everyone should have the right to enjoy entertainment without censorship. Nancy is an advocate for freedom of information and expression, and she will continue to fight for the rights of all people to access the content they want.
prettier
Published: 2022-10-16 20:41:07

```
/**
 * Prettier 옵션
 * - https://prettier.io/docs/en/options.html
 */
module.exports = {
  printWidth: 80, // 한 줄 최대 문자 수
  tabWidth: 2, // 들여쓰기 시, 탭 너비
  useTabs: false, // 스페이스 대신 탭 사용
  semi: true, // 문장 끝 세미콜론 사용
  singleQuote: true, // 작은 따옴표 사용
  trailingComma: 'all', // 꼬리 콤마 사용
  bracketSpacing: true, // 중괄호 내에 공백 사용
  arrowParens: 'avoid', // 화살표 함수 단일 인자 시, 괄호 생략
  proseWrap: 'never', // 마크다운 포매팅 제외
  endOfLine: 'auto', // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
};

```
Hacktoberfest Week 2 (Pt. 2)
Tags: hacktoberfest, opensource, webdev
Published: 2022-10-16 20:37:57

Following the theme of this week, another repo I stumbled upon this week was [tinyhttp](https://github.com/tinyhttp), which is another web framework. 

However, unlike AdonisJS (a "full featured" framework), tinyhttp aims for speed and simplicity by trying to minimize all of its dependencies. 

I worked on [Issue 360](https://github.com/tinyhttp/tinyhttp/issues/360). Essentially, when a user would set the "Content-Type" header before returning the file, the framework would overwrite the "previous" header, with the type that it determined from the files type.

To solve this issue, I first spent time reading the "[Response](https://tinyhttp.v1rtl.site/docs#response)" and looking at the code for [res.sendFile()](https://github.com/tinyhttp/tinyhttp/blob/55bffba526b05ebaab81c2b55dd793d7e807f06a/packages/send/src/sendFile.ts).

I saw that on [line 73](https://github.com/tinyhttp/tinyhttp/blob/55bffba526b05ebaab81c2b55dd793d7e807f06a/packages/send/src/sendFile.ts#L73), there was no check in place to see if the "Content-Type" header had previously been written. 

After this, I got curious on how Express handles this situation. What I found is that in Express, res.sendFile() will not actually set the "Content-Type" header, but instead it gets deferred to a separate function, and use the Node function "[res.setHeader()](https://github.com/expressjs/express/blob/master/lib/response.js#L1124)", to handle it. This will actually result in the [header being over written](https://nodejs.org/api/http.html#responsesetheadername-value) (just like tinyhttp). 

I checked AdonisJS, and the header will also get overwritten useing that framework too. This makes me think that this is a very niche use-case, but because the maintainer was looking for a PR, I added a check to only change the "Content-Type" header if it has not been previously set. I am curious to hear the maintainer's comments.

My PR can be found here: https://github.com/tinyhttp/tinyhttp/pull/363