teleren/devto huggingface dataset:
[Asia + Europe] No-Code Experiments for WebPerf & more on WebPageTest LIVE! on June 2
Tags: webperf, javascript, developer, seo
Published: 2022-06-01 23:33:06

Join us on WebPageTest LIVE! at 6pm IST and 2:30pm CEST on June 2, 2022 (Thursday) for a VERY exciting edition. You're not going to want to miss this session where we take you through WebPageTest's [latest launches](https://blog.webpagetest.org/posts/introducing-opportunities-and-experiments/): Zero-Code Experiments, Opportunities, Bulk Testing and more. 

Set your reminder now!

📺 [Twitch](https://www.twitch.tv/webpagetest) OR [Youtube Live](https://www.youtube.com/channel/UC5CqJ9V7cQddZDf1DKXcy7Q
)

📅: June 2, 2022

🕙 6pm IST/2:30pm CEST

🎤 [Tim Kadlec](https://twitter.com/tkadlec),  [Scott Jehl](https://twitter.com/scottjehl) and [Jeena James](https://www.linkedin.com/in/jeenajames/)
Conceptos básicos de Angular - Angular Basics (1/n)
Tags: angular, javascript, beginners
Published: 2022-06-01 22:58:13

Veremos los aspectos básicos de Angular, para así poder usarlo en el desarrollo de aplicaciones web.

Angular es un framework creado en typescript para crear aplicaciones SPA (Single Page Applications), creado y mantenido por Google y una gran comunidad de desarrolladores.

Para entrar en contexto con Angular, una SPA es una aplicación donde todo el código necesario se adquiere en la primera descarga y de ahi en base a la interacción con el usuario o
algún otra carga de otra pagina se va a realizar de manera dinámica, sin necesidad de recargar la pagina completa. Todo esta da una sensación User Friendly parecida a las aplicaciones
móviles.

El framework Angular tiene una gama de librerías y funcionalidades en su core (por defecto en su paquete) más una serie de módulos que nos permite ampliar progresivamente las funcionalidades extras de cualquier aplicación en caso sea requerido. Ejemplo de estas tenemos angular Material (framework UI), Ngrx (manejo del estado), ng2charts (para manejo de gráficas) y un extenso etc.

Una de las herramientas mas útiles de este framework es la linea de interfaz de comandos o CLI, donde la funcionalidad principal es la creación de una aplicación base preconfigurada en segundos y nos asistirá en la creación de componentes, módulos y demás elementos esenciales que veremos a continuación de manera superficial.

Como hemos mencionado anteriormente, Angular es basado en HTML, CSS y Typescript. Esta tecnología es un superset de Javascript, es decir una version mejorada de Javascript donde se puede usar tipado estático, interfaces, clases abstractas, decoradores ,etc. Características que nos ayudarán a un desarrollo mas rápido y robusto, y así poder detectar de manera rápida y oportuna la corrección de errores y agilizar el desarrollo de aplicaciones web.

El elemento principal en angular es el Componente, y la combinación de varios componentes definen una interfaz gráfica.
Cada componente puede usar Servicios que aportan funcionalidad fuera de la interfaz gráfica, tales como llamadas Http a un servidor. Estos servicios son inyectados como dependencia en los componentes y así se promueve la modularidad y reutilización del código.

Una vez explicado 2 conceptos fundamentales (Componentes y Servicios), tenemos otro concepto importante, el Módulo, que es un elemento que agrupa a Componentes y Servicios según su funcionalidad común.
Toda aplicación basada en Angular tiene un módulo principal o por defecto llamado app module y dentro de éste se agrupa un componente principal llamado app component. 

Esto y más seguiremos viendo en los siguientes posts y así abarcar los fundamentos básicos de este grandioso framework llamado Angular.

Saludos :)

Basado en el video de Youtube
https://www.youtube.com/watch?v=AS-sfXfJC7M

Links y recursos de utilidad para comprender mejor este post.
https://angular.io/guide/what-is-angular
https://desarrolloweb.com/articulos/introduccion-angular2.html
Day 54: Back to html basics
Published: 2022-06-01 22:45:23

Hi!
Today I tried to learn about TypeScript by building a simple todo app with just html and typescript but I struggled with some of DOM Manipulation functions so I had to go back to some of html basics wierd huh! :) but surprisingly I like typescript it feels more clean when you get used to it and you often feel like you know what you are doing because TypeScript will cry when you don't I think I will make an article about it soon. tommorow the focus will be an introduction to graphQL and typescript as I will be building a new project in the next week so it's going fun (I guess)

signing off...
How to Rename Git Branches Locally and Remotely
Tags: git, programming, webdev, tutorial
Published: 2022-06-01 22:37:39

In software development, version control is crucial for managing and collaborating on code. Git, a distributed version control system, is widely used for tracking changes in code repositories. Occasionally, you might need to rename a Git branch for various reasons such as improving clarity or consistency. This guide will walk you through the process of renaming Git branches both locally and remotely, using a real-world scenario to illustrate the steps.

## Scenario

Imagine you are working on a project called "WidgetApp." You have a branch named `feature/new-feature` that you want to rename to `feature/awesome-feature` to better reflect the actual functionality you're implementing.

This short guide will walk you through the process of renaming the branches

## Solution

### 1. Renaming Locally

#### Step 1: Checkout the Branch

Before renaming the branch, make sure you are on the branch that you want to rename. Open your terminal and navigate to your project directory:

```bash
cd /path/to/WidgetApp
```

Then, check out the branch you want to rename:

```bash
git checkout feature/new-feature
```

#### Step 2: Rename the Branch

To rename the branch locally, use the following command:

```bash
git branch -m feature/awesome-feature
```

This renames the current branch (<code>feature/new-feature</code>) to <code>feature/awesome-feature</code>.

#### Step 3: Push the Renamed Branch

After renaming the branch locally, you need to push the changes to the remote repository:

```bash
git push origin feature/awesome-feature
```
### 2. Renaming Remotely

#### Step 4: Delete the Old Remote Branch

Before pushing the renamed branch, delete the old remote branch using:

```bash
git push origin --delete feature/new-feature
```

#### Step 5: Push the Renamed Branch

Now, push the renamed branch to the remote repository:

```bash
git push origin feature/awesome-feature
```
### 3. Update Local Tracking

#### Step 6: Update Local Tracking

Your local repository still might be tracking the old remote branch name. To update it, use:

```
git fetch --prune
```
### Summary of Commands

Here's a summary of the commands used in this scenario:

```
# Step 1
cd /path/to/WidgetApp
git checkout feature/new-feature

# Step 2
git branch -m feature/awesome-feature

# Step 3
git push origin feature/awesome-feature

# Step 4
git push origin --delete feature/new-feature

# Step 5
git push origin feature/awesome-feature

# Step 6
git fetch --prune
```

Renaming Git branches both locally and remotely can be essential for maintaining a clean and organized repository. By following the steps outlined in this guide, you should be able to  confidently rename your branches while ensuring that your changes are properly reflected in both your local and remote repositories. Always be cautious when performing these actions to avoid unintended data loss or conflicts.
VS Code Extensions
Tags: vscode, javascript, webdev, beginners
Published: 2022-06-01 22:32:36

Most Software Engineers use VS-Code editor for development purposes & that's why I decided to list down some cool & useful extensions which will increase your productivity and will help you in different areas.
Here is the list of some cool & useful extensions which I use

1. Code Spell Checker
2. Better Comments
3. Git Lens
4. React.js Code Snippet
5. Live Server

## **Code Spell Checker**
> Most of the time in fast coding I usually make typo mistakes and here this extension helps me a lot, it gives me the underline warring that you made a spelling mistake and also suggests me correct spelling.
{% embed https://youtu.be/v3i7a0U9aQE %}

## **Better Comments**
> Most of the time we work in a team & as a team we review each other code & give suggestions, also while one team member creating/working any part of code he/she use to leave a comment to describe what the purpose of this code for another teammate so they can understand, Here is an extension which gives you so many options for your comment like if the commit is warring/alert/suggestion/question/informative 
{% embed https://youtu.be/v3i7a0U9aQE %}

## **Git Lens**
> While working on a team if any person needs to check who commit the specific code at what time & in which PR he/she needs to check on the GitHub repo and it's kind of painful part, This extension gives you all the GitHub history of code you want to check who write this code, when and much more on a code level.
{% embed https://youtu.be/MaXkl79oer0 %}

## **React.js code Snippet**
> While doing development in React.js somehow it isn't difficult sometimes to write a code from scratch for every new component. Here is an extension that can help you to save time by selecting a predefined template for the new component you just need to select the component skeleton from suggestion.
{% embed https://youtu.be/dobJ4MSyY54 %}

## **Live Server**
> This extension is mainly for beginners who are working on HTML, CSS & JS files, whenever you do a code change you need to refresh the page or sometimes reopen the file, Live server creates a server for you where your changes reflect live and no need to refresh/reopen.
{% embed https://youtu.be/lQYmhW9gBCs %}

Follow me 
LinkedIn : https://www.linkedin.com/in/zain-ahmed-231349132/
Instagram Profile : https://www.instagram.com/zainbinfurqan/
Facebook Page: https://www.facebook.com/YarCoder
medium : https://zain-ahmed-5360.medium.com/
Twitter : https://twitter.com/zainahmed241995
tiktok : https://vm.tiktok.com/ZSdeMhyUT/
GitHub : https://github.com/zainbinfurqan
dev.io : https://dev.to/zainbinfurqan
[Desafio] - Implementar um Algoritmo de Histórico de Senhas
Published: 2022-06-01 22:13:38

> Conteúdo original [nessa thread do Twitter](https://twitter.com/zanfranceschi/status/1532121939212349440)

---

Ei dev,

Topa um desafio?

Sabe aquelas políticas de senha em que ela não pode ser igual a alguma definida no passado?

O desfio é implementar a função "gerarNovoHistoricoSenhas" do pseudo código da imagem com sua linguagem favorita, mas tente usar um dicionário.

cc @sseraphini

![img](https://pbs.twimg.com/media/FUMwyFkUsAA6wVr?format=jpg&name=small)

---

A ideia é que os itens do dicionário se comportem como elementos em uma fila de até 10 itens.

Boa sorte e compartilhe com a gente o que você fez :)

---

Como estou aprendendo, usei Clojure pra fazer esse desafio. Provavelmente está mal implementando, mas o importante é participar :)

O lado esquerdo são as definições e o lado direito é o REPL.

![img](https://pbs.twimg.com/media/FUMwykqUcAEMYgT?format=jpg&name=small)
4 Reasons why you should not learn to code
Tags: discuss, beginners, codenewbie
Published: 2022-06-01 22:00:49

All people tell you to learn code, they say it's easy, with life-changing financial implications, and this could be true, but rarely do they tell you why you should not learn to code. These reasons are entirely my personal view and if you agree or disagree, leave your idea in the comments, also if there's a good reason I didn't mention, add it in the comments.

## 1. You are lazy
Coding especially in movies appears to be for geniuses. These guys don’t seem to be doing much work to get things done, in reality, coding can be disturbing to almost everyone that joins the gang and almost every time puts you out of your comfort zone to get something done well, practice, trials, failure, imposter syndrome. To start is one thing, to stay in the business is another, you’ll be required to learn new things now and then. You may regret your decision if you’re not ready to put in that extra effort.

## 2. Coding is a lifestyle, but is it your lifestyle?
After a long time of coding, coding becomes part of you and it entirely affects your view of things, for anything you think ‘why’, ‘how’, you get the idea. The ‘programmer’s view’ you’re having may cause you problems while associating with ‘normal’ people. Often developers choose to surround themselves with a ‘programming environment’, mostly online and spend the entire day ‘on their own. If this kind of life isn’t the one you desire to lead, you should probably not consider learning code.

## 3. You’re not a logical person
Now this doesn’t apply entirely but my personal gut tells me many times that the logical side of you may affect how you go about coding, I feel people that are more logical may easily get the many disturbing concepts in programming, unlike the less logical people. So if you find in your daily activities you chose to love less logical things and don’t enjoy working your brain about things, maybe you should not consider coding.

## 4. You expect “exciting stuff” from coding (but coding is boring)
When you’re starting out to code, many times you’re thinking to yourself ‘I could develop the next facebook’ or ‘I’ll build this fancy machine learning system’. Now this is okay everybody literally falls victim, but many times in the real-world company, you’ll only be putting up small contributions to big, collectively developed or already existing systems and other boring stuff and won’t get a chance to build your self-driven vehicle, besides you’re not good enough to develop it anyway, experienced senior developers will be the ones working on fancy stuff and it’ll take you years of hard work to reach the upper floors
queryRaw with Prisma
Tags: prisma
Published: 2022-06-01 22:00:05

---
title:queryRaw with Prisma 
published: true
description: Let me know what you think of this post from my [blog](https://chriswestbrook.com/blog).
tags: prisma
//cover_image: https://direct_url_to_image.jpg
---
Here is a [post](https://chriswestbrook.com/blog/query-raw-with-prisma). Let me know what you think.
JavaScript: Unary Operators
Tags: javascript, webdev, beginners
Published: 2022-06-01 21:57:20

This is what I learned about unary operators while working on a 8kyu Codewars challenge in further detail.

## What are Unary Operators in JavaScript?

To better understand what unary operators are I took apart the word Uni which equals One while operators are a character that represents an action.

Unary operators work on one value. Below is a table to better explain:


![table of unary operators](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ns0z21z0vdn75qet3anc.jpg)

## What does this table mean exactly?

- **Non-numeric values:** all unary operators will first convert them into a number.

- **Unary plus (+)** when placed before a numeric value, it does nothing.

- **Unary minus (-)** when placed before a numeric value, it will negate it.

- **Prefix increment operator** (++ before value) adds one to a value. Value is changed **before** the statement is evaluated. 

- **Postfix decrement operator** (-- before value) minus one to a value. Value is changed **before** the statement is evaluated.

- **Postfix increment operator** (++ before value) adds one to a value. Value is changed **after** the statement is evaluated. 

- **Prefix decrement operator** (-- before value) minus one to a value. Value is changed **after** the statement is evaluated.

## Codewars Challenge: Opposite Number

How did I use unary operators to solve a problem?

The goal: If you are given an integer or a floating-point number, find its opposite. 

```
Examples:
   1: -1
   14: -14
   -34: 34
```

I love writing code that is easy to read, the cleanest way I thought to answer the problem was to use unary minus operator.

```
function opposite(number) {
  return(-number);
}
```
Python Daily exercise 1: Generate a list of even number
Tags: beginners, python, list
Published: 2022-06-01 21:49:38

Today, I just continue to do exercise on [PYnative](https://pynative.com/python-functions-exercise-with-solutions/)

## Question
The question is to generate a list of all even number between 4 to 30.
The expected output is:

```python
[4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28]
```

## Solution
At first, my solution is using a for loop to produce the list as follow:

```python
list1 = []  
for number in range(4,30):  
    if not number % 2:  
        list1.append(number)  
  
print(list1)
```
But the recommended is really simple, just use the list(), which is:

```python
print(list(range(4, 30, 2)))
```
## My reflection
Now I learn a new function, should handle the same problem easily next time.
Skiff - Mail | Made with Next JS
Published: 2022-06-01 21:33:13

![Skiff - Mail | Made with Javascript | Next JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1653496472/large_skiff_mail_made_with_next_js_793b21b798.png "Skiff - Mail | Made with Javascript | Next JS")


### Skiff Mail. Private, decentralized email that protects your inbox and gives you the power to communicate freely.

> ### Private email. Simplified.
> Skiff Mail is end-to-end encrypted email that protects your inbox and gives you the power to communicate freely.
> 
> ### Your inbox. Now yours.
> We keep our lives in our inboxes. Skiff Mail’s end-to-end encryption keeps your mail private and secure. No one — not big tech, not us, not anyone — has access but you.
> 
> ### Completely open source.
> Privacy is more than a promise. Skiff Mail has been open source since day one so that our privacy claims and encryption protocols can be verified by anyone.
> 
> ### Communicate and collaborate. All in one place.
> Your Skiff Mail account gives you access to the first-ever end-to-end encrypted productivity suite. Jump from docs to email, to remote collaboration with your team. And never compromise your privacy in the process.
> 
> ### Fast. Free. Search.
> Search is a must-have. But other private email providers offer it only to paid users. Every Skiff Mail user gets access to blazing-fast, secure search for the full contents of their emails. Searches are carried out client-side (on your device), so end-to-end encryption remains intact.

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Skiff - Mail on Twitter](https://twitter.com/withjavascript/status/1532111538819158020?s=20&t=DCzlC_0JnK06SlLfiMZhrQ)
 |
| Medium | [Skiff - Mail on Medium](https://medium.com/@madewithjavascript/skiff-mail-made-with-next-js-1c3bd33b87aa)
 |
| Facebook | [Skiff - Mail on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid0y3vUCBwWMeNCQWWYxsPXTdCAXTAu1TLgZBMqeZEWkfT7R9nPm5NiPyPs7TaXy4jcl)
 |
| Tumblr | [Skiff - Mail on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/685893384692547584?source=share)
 |
| LinkedIn | [Skiff - Mail on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6937877353914122240)
 |
| Pinterest | [Skiff - Mail on Pinterest](https://pin.it/1A9UyuW)
 |


Filled Under:
 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with Next JS](https://madewithjavascript.club/categories/next-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
How to easily deploy and serve docker applications on personal server
Tags: docker, webdev, productivity, devops
Published: 2022-06-01 20:48:52

I wondered how I could deploy different personal applications on the same vps without having to bring out the heavy artillery with kubernetes and everything else. 

I didn't reinvent the wheel and found 2 nice projects which are [jwilder/nginx-proxy](https://hub.docker.com/r/jwilder/nginx-proxy) and [jrcs/letsencrypt-nginx-proxy-companion](https://hub.docker.com/r/jrcs/letsencrypt-nginx-proxy-companion) I just put it all together to be able to easily deploy any application with ssl

Everything is in the readme

https://github.com/Eth3rnit3/configured-compose-nginx-proxy
Help me create a new language ETML (Emotional Text Markup Language)
Published: 2022-06-01 20:48:37

Here are some tags I can think of:

```html
<sarcasm>Yeah, this will work out for sure!</sarcasm>
<anger>What do you think you are doing!</anger>
<encourage>This is the best idea ever!</encourage>
<happy>I am so glad this is happening.</happy>
<depressed>I probably will not make any $ for this</depressed>
<disappointed>Wish I had thought of this earlier</disappointed>
<sad>I lost my cat.</sad>
<mixed>
    <sad>I lost my cat</sad>
    <happy>My cat hated me</happy>
    <anger>I think my neighbor took my cat</anger>
    <sarcasm>I hope my cat scratches my neighbor</sarcasm>
</mixed>
```

Please provide your ideas for this new language!
Debugging NodeJS within a Docker Container on VSCode
Tags: nodejsdevelopment, node, dockercompose, nodejstutorial
Published: 2022-06-01 20:45:32

---
title: Debugging NodeJS within a Docker Container on VSCode
published: true
date: 2022-06-01 20:31:58 UTC
tags: nodejsdevelopment,nodejs,dockercompose,nodejstutorial
canonical_url: https://lucas-schiavini.com/debugging-nodejs-within-a-docker-container-16cc3edd3503
---

![](https://cdn-images-1.medium.com/max/844/0*YVnHo3MMVF2Ltfm1.jpg)
[_Image Source_](https://github.com/Osedea/nodock)

So hello, it’s been a while, and I haven’t being keeping up with my [daily dispatches](https://skiraindustries.com/tag/daily-dispatch/), or maybe my days are longer than yours. Relativity man, who knows?

So I was playing around with a [Node.js](https://nodejs.org/en/) project hosting it using [Docker](https://www.docker.com/) alongside a Postgres database.

And I was all happy and dandy until I wanted to debug an error on VSCode.

And I couldn’t.

So I went far and wide, talked with many friends (I wish), and came across this cool article [Debugging uncompiled Typescript code running on a Docker container | by Mitsuhide Ohi | Medium](https://mitsuhideohi.medium.com/debugging-uncompiled-typescript-code-running-on-a-docker-container-213418ab2b1f).

This article pointed me towards the right direction, but I had to add a few things.

1 — First of all, I didn’t need to add a debug script to my package.json. I merely replaced my --inspect flag with itself + server\_address:port --inspect=0.0.0.0:9229.  
2 - I did add the next line on my tsconfig.json.

```
"sourceMap": true
```

3 — Here’s where things differ a lot from the article, my vscode launch.json configuration didn’t use the sourceMapPathOverrides (it did nothing for me). 

Instead I replaced it with these two cool properties ( remoteRoot and localRoot):

{% gist https://gist.github.com/lschiavini/cce8e8add4c84fb3213b0d519cc9fd31 %}

4 — Now to the docker-compose.yml file, I added to my mainApp service the docker port for debugging

{% gist https://gist.github.com/lschiavini/99c28fa0e94bb4ac9c362af26c01feb4 %}

5 — After all that, I had to run docker-compose up -d --build --force-recreate since I changed the docker-compose.yml file.

And then BOOM! It worked.

---

## 😗 Enjoy my writing?
Forward to a friend and let them know where they can subscribe (hint: it’s [here](https://lucas-schiavini.com/#/portal)).

Anything else? Just say hello in the comments :).

Join an Exclusive Tech Friendly Community! Connect with like-minded people who are interested in tech, design, startups, and growing online — apply [here](https://yv4sdz1j7rv.typeform.com/to/lMJ2yhuJ).