teleren/devto huggingface dataset:
WebGL Distortion Slider
Tags: codepen
Published: 2022-01-20 14:03:19

<p><a href="https://dribbble.com/shots/4537300-WWF-Header-Transition">My recreation of this Dribbble shot</a></p>

<p>Using Three.js for the image transitions and some crude HTML + CSS just to mockup the UI around the background.</p>

<p>Credit to <a href="http://robindelaporte.fr/">Robin Delaporte</a> for the beginnings of this concept: <a href="https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/" target="_blank">https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/</a></p>

{% codepen https://codepen.io/ashthornton/pen/KRQbMO %}
Secret Project
Tags: codepen
Published: 2022-01-20 13:50:43

<p><strong>Secret UI Project</strong> is prototype mockups created by  <a href="https://dribbble.com/madebyanton" title="Author">Anton Aheichanka</a> that has been converted into web version. Here is the original link of 
<a href="http://www.invisionapp.com/do" title="InvisionApp">Website</a> &amp;
<a href="https://dribbble.com/shots/1928064-Secret-Project" title="Dribbble  Shot">Dribbble</a></p>

{% codepen https://codepen.io/khadkamhn/pen/BNwxEa %}
Animated CSS Gradient Border
Tags: codepen
Published: 2022-01-20 13:48:03


<p>Inspired by the github universe alert: <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/173256/github-universe.png" target="_blank">https://s3-us-west-2.amazonaws.com/s.cdpn.io/173256/github-universe.png</a></p>

{% codepen https://codepen.io/elynaur/pen/wvrRoMX %}
My take on GitHub co-pilot's Terraform skills
Tags: terraform, githubcopilot, automation
Published: 2022-01-20 13:42:39

**Introduction**

So after a long wait in the waiting list, I've finally been able to get my hands on GitHub's co-pilot.

If you're not familiar with co-pilot, check it out [here](https://copilot.github.com/).

It's been a couple of weeks since copilot's been setup on my VSCode and I must say, this looks really promising!

Since working with Terraform is part of my day job, I was curious to see how it would perform as my co-pilot declaring resources through it on my personal device. So this article focuses on its Terraform prowess.

**Terraform and Co-pilot**

It was impressive to see the bot recognise my coding style and immediately infer what I was trying to do. However, it didn't fully understand my intentions until I was a little further into the code.

The gif below shows copilot trying to guess what I'm trying to do:

![Github co-pilot with terraform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2itepwkkagj6btx6g6s.gif)

Below is where it truly shines by making meaningful suggestions to my output resource.
 
![Github co-pilot with terraform, context recognition](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi3g8racgni4rdv9ypd4.gif)

While not mind-blowing, it can save time by suggesting something you would either type yourself anyway of copy from somewhere else. 

Here's another example; I added some extra variables to the module to test whether co-pilot would detect those and try to suggest them as outputs. To (or not, at this stage) my surprise, it did!

![Github co-pilot with terraform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnhw4sa8ibpse3x5wyxr.gif)

**What about Makefiles?**
My quick test with a go-project makefile seems shows fruitful results.The co-pilot made a great suggestion for a makefile target to release the binary with version and platform suffixes! Well done co-pilot ;)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gumw5y07shpm15xtop9y.gif)

**Final thoughts**

Is co-pilot more than just a copy-paste bot? Well, I think so. It's impressive that it understands and makes mostly good suggestions for Terraform, I can imagine how good it would be for other more widely available languages on GitHub.
Best Way to Get Last Item in an Array
Tags: javascript, node, webdev, beginners
Published: 2022-01-20 13:42:13

### Hello Folks 👋
What's up, this is **SnowBit** here. I am a young passionate and self-taught developer and have an intention to become a successful developer.

Today, I am here with a basic topic mostly for beginners and revisers.

### Avoid this
```js
const arr = ["JS", "PY", "CSS"]
const lastItem = arr[2]
```
Don't do this for getting the last item of an array. Let me explain, this is a small array and contains only 3 items that are easily countable but, what if there are hundred's of items in an array then this method will make you mad 🤯

### Do this
```js
const arr = ["JS", "PY", "CSS"]
const lastItem = arr[arr.length - 1]
```
Here, `arr.length` becomes dynamic, it increases as you increase items in `arr` no matter how many you add and that will not make you mad 😜

***
Thank you for reading, have a nice day!
**Your appreciation is my motivation 😊**
- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)
A shell script to automatically install the ROOT framework on Ubuntu, Windows and MacOS operating systems
Tags: cpp, bash, datascience, analyst
Published: 2022-01-20 13:19:54

For all the people who might be interested, recently I created a shell script to automatically install ROOT on any operating system you want (Ubuntu, MacOS or Windows WSL). It has been tested on Ubuntu and Windows for the moment and it works. The link is here: https://github.com/JustWhit3/root-framework-installer. I created this script because I am the tutor of a ROOT course at my university. You can also find some ROOT installation and tip guides here if you decide to install it manually: https://github.com/JustWhit3/useful-guides.
Let me know if you get help with them and don't forget to leave a star on GitHub! Thanks.
First Post
Tags: beginners, programming, discuss, firstpost
Published: 2022-01-20 13:19:48

Hi 👋, Dev Community

I am Ayesha Baloch, an undergraduate student of software engineering at Mehran UET Jamshoro. I have 1year+ experience in front-end development. I also worked in Java and C++ with on multiple projects. Currently I am learning Mern-Stack .
         Would like to explore more to the dev community and wanna create network with different dev's 🙌💖
Ubuntu — Como alterar a ferramenta padrão de print screen pelo Flameshot
Tags: print, tolls
Published: 2022-01-20 13:07:48

Primeiramente, devemos instalar o Flameshot 👇
No terminal, rode o seguinte comando:

`$ sudo apt-get install flameshot`

Após isso, precisamos liberar o atalho:

`$ gsettings set org.gnome.settings-daemon.plugins.media-keys screenshot ‘[]’`

Se você usar versões anteriores do Ubuntu, execute esse comando:

`$ gsettings set org.gnome.settings-daemon.plugins.media-keys screenshot ‘’`

Feito isso, vá para Configurações > Dispositivos > Atalhos de teclado e desça até o final da aba. Lá você encontrará um botão + clique nele para adicionar um novo atalho.

Insira o nome: _“ flameshot “, comando: /usr/bin/flameshot gui_

Abaixo no “Defina um atalho”, escolha a tecla _PrtScr_.
Pronto, quando você clicar na tecla para printar a tela, automaticamente o Flameshot será executado.
Como usar dois “gits” do mesmo domínio juntos
Tags: github, git, tutorial
Published: 2022-01-20 13:05:54

No dia a dia nos deparamos com a seguinte situação: o git do trabalho e o pessoal na mesma máquina. Mas e aí, como fica a configuração do git global?? Nesse artigo vamos aprender como ter os dois na mesma máquina sem dores de cabeça

Primeiro, precisamos encontrar nosso arquivo .gitconfig (normalmente fica na pasta /home/seuUser/.gitconfig para usuários de linux).

Vamos abrir e configurá-lo com nosso git pessoal, e depois criaremos um do trabalho na pasta onde ficarão os repositórios do mesmo.

**Configuração do .gitconfig global**

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

Ao abrir o arquivo ele vai estar vazio ou já configurado. Basta alterá-lo com as credenciais que quiser deixar global (no meu caso, git pessoal).

Feito isso, crie um arquivo .gitconfig dentro da pasta onde vamos obter nossos outros serviços. Da mesma maneira que criamos o anterior, iremos proceder nesse novo. 

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

Após fazer isso, vamos modificar novamente o arquivo .gitconfig global e definir a pasta de trabalho.

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

Desta forma, ao fazer um push fora da pasta, irá usar as definições globais de trabalho e vice-versa.
7. Expression vs Statement
Published: 2022-01-20 13:05:27

### **Articles**

- [Function Expressions vs Function Declarations — Paul Wilkins](https://www.sitepoint.com/function-expressions-vs-declarations/)
- [JavaScript Function — Declaration vs Expression — Ravi Roshan](https://medium.com/@raviroshan.talk/javascript-function-declaration-vs-expression-f5873b8c7b38)
- [Function Declarations vs. Function Expressions — Mandeep Singh](https://medium.com/@mandeep1012/function-declarations-vs-function-expressions-b43646042052)
- [Function Declarations vs. Function Expressions — Anguls Croll](https://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/)

---
### Expressions vs Statement
Function declarations are hoisted, but function expressions aren't. Precisely, variable assigned to function expressions are hoisted, but it's uninitialized, so we can't use it before we assgin it.

### Expressions
After function expression has stored in a variable, variable can be used as a function, which means that it is invoked by variable's name
``` javascript
let sum = function(num1, num2){
  return num1 + num2;
};

console.log(sum(1,2));
```
#### When to use function expressions
- Closure
``` jsx
function checkValid(input) {
  const password = "password123";
  return function() {
    if(input === password) {
      console.log("verified!");
    } else {
      console.log("wrong!");
    }
  }
}

checkValid("password123")(); // verified!
checkValid("password1234")(); // wrong!
console.log(password); // ReferenceError: password is not defined
```
In this snippet, function expression is used for closure that is closing over variable `password`. Although, we cannot access to this variable in global scope, we can use the inner function inside `checkValid` function which can still access to `password`. By using closure, we can hide the `password`, but can still check if the input is valid.

- Passing as arguments
``` jsx
function checkSum(num1, num2, callback) {
  if(callback(num1, num2) == num1 + num2) {
    return "It's sum function!";
  } else {
    return "Error";
  }
}

const sum = function(num1, num2) {
  return num1 + num2;
}

console.log(checkSum(2,3,sum)); // It's a sum function!
```
Function `checkSum` checks if the given function is a sum function. By using function expression, we made function `sum` and it's given as a parameter to `checkSum` function.

- IIFE
IIFE helps preventing functions and variables from affecting the global scope.
``` jsx
const checkValid = ((input) => {
  const password = "password123";
  return function(input) {
    if(input === password) {
      console.log("verified!");
    } else {
      console.log("wrong!");
    }
  }
})();


checkValid("password123"); // verified!
checkValid("password1234"); // wrong!
```
Better way to store large number - Daily JavaScript Tips #9
Tags: javascript, node, webdev
Published: 2022-01-20 12:58:20

### Hello Folks 👋
What's up friends, this is **SnowBit** here. I am a passionate self-taught young developer having the intention to become a successful developer.

Today, I am here with an amazing topic about numbers 💯

So let's get started 🚀,

Do you think it is a good idea to write lots of zeros for a billion or trillion? 
```js
const billion = 1000000000
const trillion = 1000000000000
```

And the answer is a big **NO!** this way is only efficient for hundreds and thousands not for the big number like this. You can write like this but in the end, it becomes tedious and hard to read.

So, I have a proper solution for it and you will be amazed
```js
const billion = 1e9
console.log("Billion " + billion)
const trillion = 1e12
console.log("Trillion " + trillion)
```
Copy this code and try once!

***
Thank you for reading, have a nice day!
**Your appreciation is my motivation 😊**
- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)
How To Deceive a CAPTCHA
Tags: webdev, testing, tutorial, security
Published: 2022-01-20 12:54:07

---
title: How To Deceive a CAPTCHA
published: true
description: Let's take a look at how we can deceive a CAPTCHA.
tags: #webdev, #testing, #tutorial, #security
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slmzagjpf123rjiowxhp.jpeg
---

I'm Liviu, a Solutions Architect at [Endtest](https://endtest.io).

Let's take a look at how we can deceive a CAPTCHA.

This is useful in a test or in any script that wants to imitate a real user.

## 1. What is a CAPTCHA?

In case there's someone out there who doesn't know:

A CAPTCHA (an acronym for "Completely Automated Public Turing test to tell Computers and Humans Apart") is a type of challenge–response test used in computing to determine whether the user is human.

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

It's meant to stop bots and scripts from pretending to be real humans on the internet. 

## 2. Why do we need to deceive it?

Our use case here is for an automated test. 

The typical workaround is to use whitelisting, and skip the CAPTCHA for requests coming from certain IP addresses.

But that workaround does not verify if the CAPTCHA works and if your real users can actually sign up.

What if the CAPTCHA system that you're using is broken? 

Your tests would pass, but your real users would get stuck.

## 3. The solution

We need to extract the text from that image.

And the best way to do that is with Optical Character Recognition (OCR).

If you're looking to invest time in that and maybe even build a product around OCR, it's worth exploring the [Tesseract OCR package](https://github.com/tesseract-ocr/tesseract) from Google.

There are also different wrappers around this package, such as [pytesseract](https://pypi.org/project/pytesseract/) for Python.

But it's not that smooth, the process involves a number of steps:

1. Align the image correctly.
2. Convert the image to grayscale.
3. Increase the sharpeness of the image.
4. Increase or decrease the DPI.
5. Configure a tolerance.
6. Extract the text.
7. Remove or convert incorrect characters.

If you're doing that only for an automated test, you can just use the OCR feature from [Endtest](https://endtest.io/):

![Endtest OCR](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ucgti4jzo76izxfx0je.png)

And when you run the test, it will easily extract that text:

![endtest recaptcha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t49tsv8f39856q9ipaoc.png)

Here's the video recording from that test execution:

{% youtube iJjL6S9qRtc %}

This tutorial should only be used for the websites you're testing, and not to scrape other websites.
New Node.js protocol imports
Tags: node, javascript, programming
Published: 2022-01-20 12:39:38

`node:` is a new protocol imports for loading Node.js built-in modules. Actually it has been there for a while since Node.js v12. However I just heard about this few days ago.😲 Let's find out together how to use this new `node:` protocol.

### Previously
```
import * as fs from 'fs/promises';
```

### Now
```
import * as fs from 'node:fs/promises';
```

### Benefits of `node:` imports✨
It resolved the conflict of a module (npm-installed) in `node_modules` overriding the built-in module. Besides that, it is also clear that a built-in Node.js module is imported.

### Supported Node.js versions
- v16.0.0, v14.18.0 (ESM import and CommonJS require())
- v14.13.1, v12.20.0
- Supported in TypeScript by the latest versions of `@types/node`(>= v16.0.0).

That's it, if this is new to you too, hope you find this useful. Thank you for reading. Please check out the [official documentation](https://nodejs.org/api/esm.html#node-imports) too


![See_Ya](https://media.giphy.com/media/9VKMjT1rE61OM/giphy.gif)
Symfony & Doctrine: Part 5
Published: 2022-01-20 12:20:51

Doctrine has built-in methods like **findAll**, **findBy**…. For specific needs these functions may not be sufficient, that’s why we can write custom queries with multiples criteria (with join, where,order by … clauses).

Doctrine has its own language, like SQL, to write queries. It's called **DQL (Doctrine Query Language)**, the difference is that in SQL we use Tables & columns and in DQL we use classes and properties. 

**QueryBuilder** object is used to create DQL query, to have a list of jobs that are not expired, we can write a custom query in JobRepository like this :


![JobRepository getActiveJobs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyk9j96spnnp2zio55z4.png)
DQL uses prepared statement which prevents from **SQL injection**. Instead of concatenating values to the query we use **Placeholder** (`->andWhere('j.exampleField = :val')`) and we pass the value via _setParameter_ (`->setParameter('val', $value)`)

To get result(s) we always call _getQuery() _function and then we either call _getResult()_ to return many rows or _getOneOrNullResult()_ to have a single object.

Now, let's assume that we want to get the category of each job. We have a **ManyToOne relationship** between Job and Category (Many jobs belong to one Category). We can easily have the category using this syntax in twig : 
`{{ job.category.name }}`
But, check the profiler -> Doctrine, we have multiple queries ! 

![n+1 performance problem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/go58r46cqqp6vbfsz706.png)

We expected to have the 1st one to query all jobs that are not expired, but once we have added the code to have the category in twig, Doctrine had to make other queries to get the name of each category related to a single job, this is known as **N+1 performance problem**.

This is a good example to see the power of DQL, we can change our previous query as below in order to have one query instead of multiple ones : 

```
 public function findNoneExpiredJobs()
    {
        return $this->createQueryBuilder('j')
            ->innerJoin('j.category', 'cat')
            ->addSelect('cat')
            ->andWhere('j.expiresAt > :today')
            ->setParameter('today', new \DateTime())
            ->orderBy('j.createdAt', 'DESC')
            ->getQuery()
            ->getResult()
        ;
    }
```
And if we check again the profiler, we have only one query : 

![resolve N+1 performance issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13xbtxjr6glmrbhm1zmy.png)

That's all, thanks for reading :)
Harden Your Website With Traefik And Security Headers
Tags: tech, security, howto, docker
Published: 2022-02-22 21:37:11

---
title: Harden Your Website With Traefik And Security Headers
published: true
date: 2022-01-20 12:11:01 UTC
tags: tech,security,howto,docker
canonical_url: https://levelup.gitconnected.com/harden-your-website-with-traefik-and-security-headers-a595844c4f1b
---

[![](https://cdn-images-1.medium.com/max/640/1*1LnRibjbISSJ2pJMJaBgYw.jpeg)](https://levelup.gitconnected.com/harden-your-website-with-traefik-and-security-headers-a595844c4f1b?source=rss-1282c85b5cbc------2)

Level Up Your Website By Increasing Your Security Score

[Continue reading on Level Up Coding »](https://levelup.gitconnected.com/harden-your-website-with-traefik-and-security-headers-a595844c4f1b?source=rss-1282c85b5cbc------2)
Editorial-Chart experiment
Tags: codepen
Published: 2022-01-20 11:43:45


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpchwmjdx0y7994neyw7.jpeg)<p>This is only an experiment
Source code: <a href="https://github.com/schmidtsonian/calendar-stats" target="_blank">https://github.com/schmidtsonian/calendar-stats</a>
Original design: <a href="https://dribbble.com/shots/2531003-Editorial-Chart" target="_blank">https://dribbble.com/shots/2531003-Editorial-Chart</a></p>

{% codepen https://codepen.io/elynaur/pen/RwLExEo %}
Day 83 of 100 Days of Code & Scrum: Deploying Services Pages to Production
Tags: 100daysofcode, beginners, javascript, productivity
Published: 2022-01-20 11:43:15

Greetings, everyone!

Not much free time today, but at least I finished coding all of the services pages for my [business site](https://www.rammina.com). I've also tested and deployed all of them, so here are the three of them:

- [Web Development page](https://www.rammina.com/services/web-dev)
- [Digital Marketing page](https://www.rammina.com/services/digital-marketing)
- [Writing page](https://www.rammina.com/services/writing)

As for learning, I did a little bit of practice with Next.js, especially with writing API function handlers on the `/pages/api` folder.

Anyway, let's move on to my daily report!

## Yesterday

I did various things, such as working on my [company website](https://www.rammina.com), learning Next.js, and picking up MySQL.

## Today

### Company Website

- finished coding the services-related pages.
- did some testing and checking before deploying the updates to production.

### Next.js

- practiced writing APIs for Next.js.
- continued going through [Next.js & React by Maximilian Schwarzmüller](https://www.udemy.com/course/nextjs-react-the-complete-guide/).

### Scrum

- I didn't have the time to read an article about Scrum for today.

Thank you for reading! Have a good day!

![Rammina Thank You Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9ayfxxxaz2g2hfcqbsk.png)

## Resources/Recommended Readings

- [The 2020 Scrum Guide](https://scrumguides.org/scrum-guide.html)
- [Next.js & React by Maximilian Schwarzmüller](https://www.udemy.com/course/nextjs-react-the-complete-guide/)
- [Next.js official documentation](https://nextjs.org/docs/getting-started)
- [SWR official documentation](https://swr.vercel.app/)
- [MySQL Tutorial for Beginners by Mosh Hamedani](https://youtu.be/7S_tz1z_5bA)
- [SQLZoo's SQL Tutorial](https://sqlzoo.net/wiki/SQL_Tutorial)

## DISCLAIMER

**This is not a guide**, it is just me sharing my experiences and learnings. This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

<hr />

## Other Media

Feel free to reach out to me in other media!

<span><a target="_blank" href="https://www.rammina.com"><img src="https://res.cloudinary.com/rammina/image/upload/v1638444046/rammina-button-128_x9ginu.png" alt="Rammina Logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://twitter.com/RamminaR"><img src="https://res.cloudinary.com/rammina/image/upload/v1636792959/twitter-logo_laoyfu_pdbagm.png" alt="Twitter logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://github.com/Rammina"><img src="https://res.cloudinary.com/rammina/image/upload/v1636795051/GitHub-Emblem2_epcp8r.png" alt="Github logo" width="128" height="50"/></a></span>
how long does it take to earn in web dev?
Tags: webdev, beginners, career
Published: 2022-01-20 11:35:52

The web development field is one of the best ways to earn money as a freelancer, but in reality, how long does it take for a person who starts to learn web development now and reaches the goal of a full-stack web developer.

Assuming that learning 1 hour and practicing for another hour every day, through online courses and youtube videos, Is it possible to learn all the fundamentals become strong enough to build any sort of web application in one year?