teleren/devto huggingface dataset:
Prueba tus códigos html, css y javascript con MGPanel en spark
Tags: mgpanel, javascript, html, css
Published: 2021-12-24 21:35:24

Holaa programador, ya sea que estes comenzando en el mundo de la programación web o que ya tengas tiempo siempre vamos a necesitar un lugar donde probar nuestros códigos de una forma fácil, segura y a demás gratis.

MGPanel tiene una herramienta gratuita para programadores que se llama **Spark**, con el podrás probar tus html, css y javascript todo en tiempo real, a demás podrás guardarlos para tenerlos de referencia cuando estes programando algún proyecto real.

Para usar la herramienta ingresa a: [https://app.mgpanel.org/spark](https://app.mgpanel.org/spark)

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

No tienes necesidad de registrarte a menos que quieras guardar tus sparks.  Espero te pueda ayudar en tus proyectos, tanto como me ayuda en los míos.
Automating the flow of blog posts to my email list with PHP ⚙️
Tags: programming, webdev, tutorial, php
Published: 2021-12-24 20:18:26

A while back ⁣I decided that I wanted to **automate the flow of blog posts to my email list** (which is basically nobody right now by the way 😅).

I found that [Mailchimp](www.mailchimp.com) has a feature for **automatically sending to an email list based on RSS feed** updates on a website.

A [RSS (Rich Site Summary or Really Simple Syndication)](https://en.wikipedia.org/wiki/RSS) is a web feed format that allows users and applications to access updates to websites in a standardized way.

RSS feeds are usually generated for you in website builders and other tools but since my site was built from scratch I needed to make my own.

**Here is what I needed to do:**
— find the RSS feed XML format online
— create a new PHP page on my website in the RSS format
— dynamically populate the RSS feed items with my blog posts from the database
— test the RSS feed page on a validator website
— setup a RSS feed email campaign using the feed on Mailchimp
— design/style the email template
— send a test email to myself to verify

![Automating the flow of blog posts to my email list with PHP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm04x6ey021ox3h8yfwz.jpeg)

![PHP script that generates a RSS feed based on my website's blog posts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amejh72jn1204ivlmwse.jpeg)

![Here is the generated RSS feed XML file. A user or application can subscribe for blog updates.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l50bzqkq9eoik1cizuqe.jpeg)

![Created an automatic email campaign using the RSS feed on MailChimp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6uiu7i083lch759jj2z.jpeg)

![Test email from RSS feed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lrz5lq4325y7nbp8vjwk.jpeg)

That was a fun, quick project to work on for a few hours and saved me an exponential amount of time in the future. 💪🏾

⁉️ Anyone have experience with RSS feeds or subscribe to any?
Short Cut vs. Brute Force
Tags: python, javascript, programming, design
Published: 2021-12-24 02:23:21

I've been reading [*Thinking Better: The Art of the Shortcut*](https://www.simonyi.ox.ac.uk/books/thinking-better-the-art-of-the-shortcut/) by Oxford University Math Professor, Marcus du Sautoy, and he has raised a couple of good points that can be applied to coding.

1. Short Cuts are not the same as Cutting Corners. Though both involve "cutting," short cuts are quicker ways to the same end goal you would have reached if you would have done it the long, hard way while cutting corners gives you an inferior product.
2. We're spoiled by being able to do things with ever faster computers choosing to use brute force over thinking through a short cut.

Example of the second:
If I were to try figure out how many different possible combinations there are to an old-school iPhone with a 4-digit password, I could have a computer figure them all out for me and count them like this:
```
import itertools
it = itertools.product([0,1,2,3,4,5,6,7,8,9], repeat=4)
itlist = [x for x in it]
print(len(itlist))

10000
```
Or, I could remember my middle school algebra and recall that the number of possible combinations is the product of all of counts for each digit. In our iPhone example, a phone number pad only has the digits 0-9 as options, so we have 10 options for each of the 4 digits in the password or 10 * 10 * 10 * 10 (10^4). Therefore, we would get the same solution with:
```
print(10**4)

10000
```
Timing the two methods, I was able to execute the second function in 1/10 of the time of the first. The greater we scale the problem (e.g. 10000 digit password or one that allowed all alphanumeric options), the more noticeable the inefficiencies of brute force becomes.

Refactoring code isn't necessarily just about measuring whether `map`, `foreach` or `reduce` to produce the same output is faster (I'm not discounting the fact they each do it differently!), but also about whether we could get to the same final place skipping/cutting out the step in first place without cutting corners creating less robust code.
Advent.js🎅🏼| #16: Descifrando los números
Tags: javascript, spanish, webdev, adventofcode
Published: 2021-12-24 19:47:11

## [Descifrando los números](https://adventjs.dev/challenges/16)

**Lara Eloft** ha encontrado unos restos élficos en una cueva, cerca del Círculo Polar Ártico, a 8 km al norte de Rovaniemi.

Ahora se encuentra descifrando unas misteriosas cartas que contiene información sobre unos números que le puede hacer llegar al próximo objetivo.

Lara tiene un documento que contiene una serie de números que pueden ser usados para descifrarlos:

```js
Símbolo       Valor
  .             1
  ,             5
  :             10
  ;             50
  !             100
```

Lara, además, ha notado una cosa. **Los símbolos se restan si están inmediatamente a la izquierda de otro mayor**. 😱

Tenemos que crear una función que nos pasa una cadena de texto con símbolos y tenemos que transformarlo al número correcto. ¡Ojo! Si encuentras un símbolo que no entendemos, mejor que devolvamos un `NaN`:

```js
decodeNumbers('...') // 3
decodeNumbers('.,') // 4 (5 - 1)
decodeNumbers(',.') // 6 (5 + 1)
decodeNumbers(',...') // 8 (5 + 3)
decodeNumbers('.........!') // 107 (1 + 1 + 1 + 1 + 1 + 1 + 1 - 1 + 100)
decodeNumbers('.;') // 49 (50 - 1)
decodeNumbers('..,') // 5 (-1 + 1 + 5)
decodeNumbers('..,!') // 95 (1 - 1 - 5 + 100)
decodeNumbers('.;!') // 49 (-1 -50 + 100)
decodeNumbers('!!!') // 300
decodeNumbers(';!') // 50
decodeNumbers(';.W') // NaN
```

Completa el reto!

---
Te dejo una posible solución:


{% jsitor https://jsitor.com/embed/HQ3x9qN8c %}

---
Puedes seguir a @midudev y estar pendiente de los retos de Advent.js 

{% twitter 1466086678507008003 %}
Advent.js🎅🏼| #15: El salto perfecto
Tags: javascript, adventofcode, webdev, spanish
Published: 2021-12-24 19:46:54

## [El salto perfecto](https://adventjs.dev/challenges/15)

¡Estamos haciendo los últimos ajustes para el trineo de Santa Claus!

Como ya sabes, el trineo es volador y estamos ajustando el motor para que haga parabolas lo más óptimas posibles. Para esto el salto debe ser siempre hacia arriba y, a partir del punto más alto, debe bajar siempre hacia abajo...

Nuestro mecánico de confianza, **Kiko Belfs**, que tiene un Tesla genial, nos ha explicado que los saltos se pueden ver como arrays... y que sólo tenemos que asegurarnos que **los números suben y bajan de forma correcta**. También nos avisa que sólo pasaremos **arrays de, como mínimo, tres posiciones**.

Nos ha pasado algunos ejemplos de cómo debería ser nuestra función y algunos resultados:

```js
checkSledJump([1, 2, 3, 2, 1]) // true: sube y baja de forma estricta
checkSledJump([0, 1, 0]) // -> true: sube y baja de forma estricta
checkSledJump([0, 3, 2, 1]) // -> true: sube y baja de forma estricta
checkSledJump([0, 1000, 1]) // -> true: sube y baja de forma estricta

checkSledJump([2, 4, 4, 6, 2]) // false: no sube de forma estricta
checkSledJump([1, 2, 3]) // false: sólo sube
checkSledJump([1, 2, 3, 2, 1, 2, 3]) // false: sube y baja y sube... ¡no vale!
```
**Lo importante**: recorrer el array de izquierda a derecha para ver que la subida es siempre estricta, detectar el punto más alto y entonces ver que la bajada es estricta hacia abajo...

Completa el reto!

---
Disfrute mucho resolviendo este reto, te dejo mi solución:


{% jsitor https://jsitor.com/embed/m71JDTPIe %}

---
Puedes seguir a @midudev y estar pendiente de los retos de Advent.js 

{% twitter 1466086678507008003 %}
Advent.js🎅🏼| #14: En busca del reno perdido
Tags: javascript, adventofcode, spanish, webdev
Published: 2021-12-24 19:46:36

## [En busca del reno perdido](https://adventjs.dev/challenges/14)

¡Hemos perdido a un reno y falta poco más de una semana para Navidad! 😱

Lo peor es que son tantos que no sabemos cuál es el que nos falta... ¡Qué lío! A ver, Elfon Musk ha hecho inventario y nos pasa un array con los ids de cada reno.

👍 **Lo bueno**: los ids son números que pueden ir del 0 al 100, no están repetidos y sólo se ha perdido un reno.

👎 **Lo malo**: la lista está desordenada y podría faltar el último...

Necesitamos una función que al pasarle la lista de ids de renos nos diga inmediatamente cuál es el que falta:

```js
missingReindeer([0, 2, 3]) // -> 1
missingReindeer([5, 6, 1, 2, 3, 7, 0]) // -> 4
missingReindeer([0, 1]) // -> 2 (¡es el último el que falta!)
missingReindeer([3, 0, 1]) // -> 2
missingReindeer([9, 2, 3, 5, 6, 4, 7, 0, 1]) // -> 8
missingReindeer([0]) // -> 1 (¡es el último el que falta!)
```

Parece fácil con una complejidad de `O(n)`... ¿crees que podrías hacerlo mejor?

Completa el reto!

---
Mi solución:

{% jsitor https://jsitor.com/embed/aFZGn9IxR %}

---
Puedes seguir a @midudev y estar pendiente de los retos de Advent.js 

{% twitter 1466086678507008003 %}
Advent.js🎅🏼| #13: Envuelve regalos con asteriscos
Tags: javascript, spanish, adventofcode, webdev
Published: 2021-12-24 19:46:18

## [Envuelve regalos con asteriscos](https://adventjs.dev/challenges/13)

¡Hay demasiados regalos 🎁! Y envolverlos es una locura...

Vamos a crear una función que pasándole un array de regalos, nos devuelva otro array pero donde todos los regalos han sido envueltos con asteriscos tanto por arriba como por los lados.

Sólo tienes que tener en cuenta unas cosillas ✌️:

-     Si el array está vacío, devuelve un array vacío
-     Los regalos son emojis 🎁... por lo que tenlo en cuenta a la hora de contar su longitud...
-     Por suerte, cada posición del array siempre tiene la misma longitud...

```js
wrapGifts(["📷", "⚽️"])
/* Resultado:
[ '****',
  '*📷*',
  '*⚽️*',
  '****'
]
*/

wrapGifts(["🏈🎸", "🎮🧸"])
/* Resultado:
[ '******',
  '*🏈🎸*',
  '*🎮🧸*',
  '******'
]
*/

wrapGifts(["📷"])
/* Resultado:
[ '****',
  '*📷*',
  '****'
]
*/

```


Completa el reto!

---
Una posible solución:

{% jsitor https://jsitor.com/embed/aR36z8C5t %}

---
Puedes seguir a @midudev y estar pendiente de los retos de Advent.js 

{% twitter 1466086678507008003 %}
Understanding Built In Angular Directives - Part 5
Tags: angular, beginners, webdev, tutorial
Published: 2021-12-24 19:40:23

**T**oday we will cover another important structural directive provided by the Angular Team - `ngFor`

`ngFor`
The ngFor directive is used to loop through an array of items in the template. The element where the directive is written becomes the parent which is repeated.

Lets see that in practice-
We need to update our _structural-directive-demo.component.ts_ file and add the below code -

```
itemsToBuy = ['Pencil', 'Notebook', 'School bag', 'Eraser'];
```

and in component template file add the below code -

```
<div *ngFor="let item of itemsToBuy">
  {{ item }}
</div>
```
Now if you start the application and open localhost:4200 in the browser you would see the below output -
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgn3bdgawv76ii3jint6.PNG)
Now lets understand the below code
`*ngFor="let item of itemsToBuy"` 
Here ngFor is a structural directive so the * is appended at the start followed by the equals `=` operator.
Here `itemsToBuy` is the array we declared in the component TS file. We use the for-of syntax to loop through the array. Every item in the array is assigned to the variable `item` which is then printed in between div tag by using the `{{item}}`. The loop is auto incremented and moves to the next item until all the items are printed.
In the above example `item` variable holds a string value.
Similarly the array can also be a <u>list of objects</u>. 
In that case at every iteration item would hold an object.

**A word of Caution**
You should not use two structural directives on the same element.

For example ngIf and ngFor at the same div element is not allowed.

That's all about `ngFor`. Hope you enjoyed the post.
Please like, comment and share
The last structural directive is on your way. So stay tuned.

**Cheers**!!!
_Happy Coding_
undefined vs. null in JS – don't get confused
Tags: javascript
Published: 2021-12-24 19:35:54

### javascript newbies often confuse **undefine** with **null** :

- **undefined** means a program (process) has never heard of that i.e. no address to memory assigned , unless it's an error due to scoping ;

- **null** means a program (process) assigned an address to a variable in-memory , but variable refers to nothing (null) . A real life example for **null** would be : 
> imagine you take a taxi from airport to your home address visible on Google maps, but when you get to the place you find your house on wheels transferred, only plane pavement left – the pavement still has the address (you somehow got lifted by a taxi driver tho), but it's null i.e. none of house on wheels (data  structure) left . 

> **REMEMBER** : variables are just references to the actual data structure[s] with it's own address[es] in-memory too .
Como começar a aprender programação
Published: 2021-12-24 19:22:46

Quando comecei a aprender programação me senti perdido sobre a enxurrada de conhecimento que eu tinha que absorver, e também a ordem em que eu deveria aprender as coisas.

Então agora uns anos depois estou escrevendo esse artigo no intuito de tentar ajudar alguém que esteja começando a como ele pode começar a aprender e até apresentar alguns materiais ou aulas que podem ajudar. Vou me ater a conteúdos em português por questão de facilidade para quem está iniciando.

Nesse artigo eu vou focar nas duas coisas que precisamos aprender para conseguir continuar os nossos estudos sem ficarmos batendo cabeça por ter pulado uma parte da base.

**Logica de Programação**

A primeira coisa que precisamos para aprender programação é aprender lógica de programação, qual a utilidade dela ?

Podemos descrever o computador como "burro" ele faz apenas oque é dito explicitamente para ele, a lógica de programação é a organização coesa de uma sequência de instruções voltadas à resolução de um problema, ou à criação de um software ou aplicação. Ela é a base porque é a partir dele que os aprendizados posteriores, como por exemplo o das linguagens de programação, fará sentido.

Para aprender logica de programação aconselho o material do [Canal Curso em Vídeo](https://www.youtube.com/watch?v=8mei6uVttho&list=PLHz_AreHm4dmSj0MHol_aoNYCSGFqvfXV&ab_channel=CursoemV%C3%ADdeo) sobre o tema.

**Escolher uma linguagem de programação**

Após isso o próximo passo seria escolher uma área de estudo como Front-end, Back-end ou mobile, a partir disso escolher uma linguagem de programação e aprende-la. Mas independente da área escolhida, eu aprenderia o javascript pois ele é quase uma bala de prata é possível usa-lo em qualquer uma das áreas embora nem sempre o ideal. Com ele você pode aprender todos os conceitos que necessita.

E após aprender esses conceitos trocar para outra linguagem especifica se necessário se torna muito mais simples, porque tirando a sintaxe que é como escrevemos o código em determinada linguagem os conceitos, são em grande parte reaproveitados por todas as linguagens, o curso em video também tem um otimo curso sobre [javascript](https://www.youtube.com/watch?v=1-w1RfGIov4&list=PLHz_AreHm4dlsK3Nr9GVvXCbpQyHQl1o1&ab_channel=CursoemV%C3%ADdeo).

Eu diria que esses são os dois pontos principais para um iniciante aprender, após eles você já deve ser capaz de ver com qual área tem mais afinidade e deseja trabalhar, e assim filtrar e pesquisar coisas mais focadas com área que deseja trabalhar.
Skills That You Should Master In 2022
Tags: productivity, career, tooling, beginners
Published: 2021-12-24 18:47:16

## 1. Speed Reading

Speeding Reading is the process of rapidly recognizing and absorbing phrases or sentences on a page at once, rather than identifying individual words.

## 2. Investing

Investing is all about planning for the future and everyone can learn a thing or two from it. That’s why to consider investing as another one of the most valuable skills you can learn.

## 3. Playing an Instrument

Learning a musical instrument not only sustains and feeds the brain but also improves so many other cognitive and physical aspects of the human body.

## 4. Public Speaking

Having a clear articulation, engaging people, communication skills, mastering body language – all these skills are crucial to anyone hoping to succeed in both the personal and the business world.

## 5. Productivity

**Productivity means:**

- You’ll do more with less of your time.
- You’ll do better with your time.
- You’ll earn more with your time.
- You’ll have time to do something different.
- You’ll have more time in a day.
- You’ll be able to control time better.
- You’ll improve over time.

## 6. Data Science

All corporations nowadays require a team of data scientists to keep up with the competition, and as the rise of “big data” continues, data scientists that can make sense of all this data will be more necessary than ever.

## 7. Emotional Intelligence

It’s a scientific fact that emotions precede throughout. When emotions run high, they change the way our brain functions... Diminishing our cognitive abilities, decision-making powers, and even interpersonal skills. Understanding and managing our emotions (and the emotions of others) helps us to be more successful in both our personal and professional lives.

---

### Let's connect 💜

You can follow me on [Twitter](https://twitter.com/MrDanishSaleem), [Instagram](https://www.instagram.com/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

If you like this post. Kindly support me by [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)

![Buy Me a Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fefzbxbnwww7tkght33w.png)
Living in the Shell #23; cut (Cut Text/Fields from Text Streams)
Tags: productivity, linux, bash, devops
Published: 2021-12-24 18:38:36


## `cut` ✂️

Cuts/extracts text/fields out of text streams.

⚠️ Index values are one-based.

## Cut characters on a range `-c`

```sh
echo "Hello World\!\nGoodbye\!" | cut -c2-5
```

> Takes characters at indices 2 through 5.
>
> ```text
> ello
> oodb
> ```

## Cut characters on a half-limited range `-c`

```sh
echo "Hello World\!\nGoodbye\!" | cut -c3-
```

> Takes characters from indices 3 and afterwards.
>
> ```text
> llo World!
> odbye!
> ```

## Cut fields split by any delimiter `-f` & `-d`

```sh
echo "1,20,300\n40,500,6000\n700,8000,90000" | cut -f2,3 -d','
```

> ```text
> 20,300
> 500,6000
> 8000,90000
> ```

## Change fields delimiter `--output-delimiter`

```sh
echo "1,20,300\n40,500,6000\n700,8000,90000" | cut -f1- -d',' --output-delimiter '/'
```

> ```text
> 1/20/300
> 40/500/6000
> 700/8000/90000
> ```

## Invert selection `--complement`

```sh
echo "1,20,300\n40,500,6000\n700,8000,90000" | cut -f2,3 -d',' --complement
```

> ```text
> 1
> 40
> 700
> ```
How To Enable Apache mod_rewrite Module In Ubuntu
Tags: apache, modrewrite, linux, configuration
Published: 2021-12-24 18:35:58

Apache mod_rewrite module helps you to manipulate URLs. For example in WordPress, instead of accessing a blog post by `https://example.com/?p=1`, you can use the mod_rewrite module to access that post with an SEO friendly pretty URL such as `https://example.com/my-first-post`. Also, the mod_rewrite module can be used for complex conditional URL redirections.

Activate the Apache mod_rewrite module with the following command.


```
sudo a2enmod rewrite
```

But still, it will not work as we have to override the Apache global configuration. For that, open the `000-default.conf` file in `/etc/apache2/sites-available/` directory.

```
nano /etc/apache2/sites-available/000-default.conf
```

You will be able to see a file similar to this (comments removed for simplicity).

```
<VirtualHost *:80>

        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>
```

Add the `<Directory /var/www/>` code block into it, now the final file should be something similar to the following example.

```
<VirtualHost *:80>

        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html

         <Directory /var/www/>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride All
                Order allow,deny
                allow from all
         </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>
```

Restart the Apache server to make changes effective.

```
sudo service apache2 restart
```

Now you can use a `.htaccess` file to mention the necessary rewrite instructions. You can find more information about the Apache mod_rewrite module in their [documentation](https://httpd.apache.org/docs/2.4/rewrite/).

Feel free to visit [devtonight.com](https://devtonight.com?utm_source=dev&utm_medium=questions&utm_campaign=how-to-enable-apache-mod-rewrite-module-in-ubuntu) for more related content.
Advent of Code 2021 - Day 19 - Solved
Published: 2021-12-24 18:24:41

---
title: Advent of Code 2021 - Day 19 - Solved
published: true
description: In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
tags:
cover_image: https://i.ytimg.com/vi/OAK0_StkVok/maxresdefault.jpg
---

{% youtube OAK0_StkVok %}

In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
Advent of Code 2021 - Day 21 - Update
Published: 2021-12-24 18:24:22

---
title: Advent of Code 2021 - Day 21 - Update
published: true
description: In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
tags:
cover_image: https://i.ytimg.com/vi/0lcGIbaNwDY/maxresdefault.jpg
---

{% youtube 0lcGIbaNwDY %}

In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.