teleren/devto huggingface dataset:
Listen to the S8E2 of DevDiscuss: "You Too Can Create Beautiful Data-Driven Essays Like The Pudding"
Tags: discuss, podcast
Published: 2022-02-16 22:33:09

---
title: Listen to the S8E2 of DevDiscuss: "You Too Can Create Beautiful Data-Driven Essays Like The Pudding"
published: true
description: Listen to S8E2 of DevDiscuss!
tags: discuss, podcast 
series: DevDiscuss Season 8
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owkl001cdn6jlmjpvlu9.png
---

## Here's a delicious and freshly-baked episode of DevDiscuss to satisfy your developer podcast cravings. Added bonus: it goes great with Pudding 😉 


{% podcast https://dev.to/devdiscuss/s8-e2-you-too-can-create-beautiful-data-driven-essays-like-the-pudding %}

_Quick refresher — DevDiscuss is the first original podcast from DEV all about the burning topics that impact all our lives as developers._

### Hosts:
- **@ben** — Creator of DEV & Co-Founder of Forem
- **@juliannatetreault** - Software Engineer at Forem
  
### Guests: 
- **[Russell Goldenberg](https://twitter.com/@codenberg)** — is a Scorpio. He makes stories with data and code at The Pudding. Nowadays coding mostly in Svelte.
- **[Michelle McGhee](https://twitter.com/mich_mcghee)** - makes visual stories at The Pudding. She also enjoys making delicious food and 3-pointers at pickup basketball.

[>> Check out The Pudding here](https://pudding.cool/)


Let us know your thoughts on this show in the comments below — or on Twitter ([@thepracticaldev](https://twitter.com/thepracticaldev) ).

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s8-e2-you-too-can-create-beautiful-data-driven-essays/id1513053883?i=1000551256803)
- [Spotify](https://open.spotify.com/episode/2eCDtV2B6abFU0fyXi6m8C)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzU5?sa=X&ved=0CAQQkfYCahcKEwjw9di-o4X2AhUAAAAAHQAAAAAQCg)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss/s8e2-you-too-can-create-N7eAKUYiDTn/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=169893638)
- [RSS Feed](http://feeds.codenewbie.org/devdiscuss_podcast.xml)
- [DEV Pods Site](https://devpods.dev/podcasts/devdiscuss/episodes/248)

> ### _Acknowledgements_ 
> - The wonderful _@levisharpe for producing & mixing the show_
> - _Our season eight sponsors: [Duckly](https://duckly.com/?utm_source=devdiscuss&utm_medium=podcast&utm_campaign=devdiscussseason8), [Compiler](https://link.chtbl.com/compiler?sid=podcast.devdiscuss), & [Scout APM](https://scoutapm.com/?utm_source=devdiscuss&utm_medium=podcast&utm_campaign=ad_q2_2021&utm_content=sponsored)!_

---

Thanks for tuning in to DevDiscuss! ❤️
How to isolate scripts per component in reactjs or react-typescript
Published: 2022-02-16 22:29:14

Hi, Please, I am working on a react-typescript project, created using create-react-app, a school project basically, I have two templates to use for admin dashboard and public site, both are jquery based templates with different custom jquery script that triggers owl-carousel and slicknav each, with other jquery functionalities included. Which means I have owl-carousel and slicknav also. If I decide to put the scripts in index.html, there will be conflict in both admin dashboard and public site.

QUESTION

How, can I isolate those scripts per component, say if a user has logged in and I redirect them to the dashboard, I want to load only the admin dashboard scripts and if he visits the public site, I want to load only the public site scripts.

I tried to add them in a folder in src so that I can import them respectively, but, I keep getting `Uncaught TypeError: $(...).slicknav is not a function`, same thing for owl-carousel, also another error `event is not defined`.

Thanks in advance for your help.
100 días de código: 71, aprendiendo redux.
Tags: spanish, 100daysofcode, webdev, redux
Published: 2022-02-16 22:16:07

¡Hey hey hey!

Hoy he dejado el proyecto de lado para aprender un mas sobre Redux. Sinceramente había aprendido poco porque le tengo respeto( Aunque no se ni porque) y ahora que he comenzado me doy cuenta que realmente no es tan difícil de aprender.

Redux es un manejador de estado global que te permite mantener el estado independiente de la aplicación y es muy funcional sobre todo cuando la aplicación crece.

He comenzado a aprenderlo con ayuda del curso [Aprende Redux con React hooks y GraphQL fácilmente](https://www.udemy.com/course/aprende-redux-con-react-hooks-y-graphql-facilmente/) y la [documentación de redux](https://es.redux.js.org/). He avanzado bastante con el curso pero como es bastante practico me gustaría estudiar mas teoría para no sentir que lo uso sin entenderlo.

Les comentare que iré aprendiendo en el resto de la semana.

### Hoy:
- Realice una conexión e inicio de sesión con firebase
- Seguí aprendiendo Redux.
- Practique Touch Typing.

Espero que tengan mucho éxito en sus proyectos, animo con todo y hasta la vista guapos!

Foto cover de [Nubelson Fernandes](https://unsplash.com/@nublson?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/s/photos/developer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Paygol, expertos en la industria de pagos
Published: 2022-02-16 22:15:52

La industria de servicios de pagos digitales en América Latina es un panorama amplio y tal vez para muchos comercios internacionales, complejo. Nada nuevo por discutir con los negocios que llevan años operando, incluso ni para los consumidores de la región.

Sin embargo, como un fuerte catalizador, el COVID posicionó al mercado digital en la región con una demanda explosiva que cambió los hábitos de consumo de los latinoamericanos, incluyendo el uso de nuevos métodos de pagos que han impulsado la activación de los mercados internacionalmente.

Por ejemplo, Chile, uno de los mercados latinoamericanos con mayor potencia y evolución en la industria financiera, sigue creciendo, brindando grandes oportunidades de expansión para los [negocios](https://visiondelsur.com/) y las empresas de servicios de pago a nivel global.

Pero, antes de profundizar en el mercado chileno, es importante saber cómo está el panorama actual del comercio electrónico en América Latina, que ha impactado con una aceleración positiva a más de 52 millones de personas en la región durante el último año.
Energías renovables
Published: 2022-02-16 22:15:09

Enertres, empresa especializada en sistemas de alta eficiencia energética con energías renovables, ha apostado fuerte durante los últimos 20 años por aportar su conocimiento y experiencia en diferentes mercados.

En este momento, desarrolla su plan de expansión creando acuerdos de colaboración con empresas instaladoras y distribuidoras en América Latina, en países como Chile, Colombia o Argentina.

Las energías más demandadas para climatización residencial e institucional en edificios colectivos, viviendas residenciales y grandes instalaciones son:

Geotermia o energía geotérmica, es la energía en forma de calor situada bajo la superficie solida de la tierra. La energía geotérmica es una de las energías renovables más eficientes, [aprovechable](https://visiondelsur.com/) en cualquier lugar del planeta, 24 horas al día, 365 días al año.

Aerotermia o energía aerotérmica es la energía almacenada en forma de calor en el aire ambiente. Mediante una bomba de calor se aprovecha esta energía y se intercambia con el agua para poder obtener calefacción, refrigeración y agua caliente sanitaria (ACS).

Ambas energías permiten climatizar cualquier tipo de edificio en invierno, refrigerarlo en verano y producir agua caliente sanitaria de manera muy eficiente, todo ello con grandes ahorros comparándolos con sistemas que provienen de combustibles fósiles.
Regex to the Reading History Rescue
Tags: python, beginners, regex
Published: 2022-02-16 22:13:13


![How Many](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsdrcahhn72qxda8ypoy.jpg)

## Continuing to review my reading history
As I am getting back into doing more python I spent a little bit of time to look more specifically at the number of books I have read.  While pulling out the authors, and titles, so that I can see how many books I have read and which ones.  I read a lot and sometimes I forget which books of a series I read until I start a book then realize, "oh I read this already!"

My local library allows me to download my checkout history and that encompasses EVERYTHING I have checked out.  DVD's and books.  So I need a way to break those out from the massive text dump that the library gives me.

![Many book shelves](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7fgy5sfpjxxb6t74h56.jpg)

As the format is rather standard (as can be seen by my previous post on this: [Using Python to slice up my Reading Habits](https://dev.to/mfurmaniuk/using-python-to-slice-up-my-reading-habits-289m)) I decided at this stage I can look up solely by TITLE as its a unique field in each record.  As a bonus the Author is included with the record is of a Book, a DVD does not have that on the line.

```
DVD:
TITLE        Ponyo / Walt Disney Pictures ; Studio Ghibli, Nippon Television 

Book:
TITLE        The boy who would live forever / Frederik Pohl.
```

Getting back to my Perl roots I made a Regular Expression to simply match on Title.

```
bookRecord = re.compile(r"(^TITLE.*)", re.MULTILINE)
```
Simple and easy, to match on every line that starts with TITLE.  The Multiline option is there in case titles are long, and I was hoping at some point to create the right regular expression to capture the entire Record.  Though its not as important at this stage.

Then after opening the text dump I search through it to match the regular expression and save those lines.

```
with records as r:
    for match in bookRecord.finditer(history):
        title = match.group()
        bookList.append(title)
        r.write(title)
r.close()
```

At the end I print out the matching lines, and then check out how many items I have taken home from my local library over the past 6+ years.
```
for i in bookList:
    print(i)
print("You have checked out " + str(len(bookList)) + " books or videos.")
```
I'll be playing around with this more to get my Python skills back and start adding more features to make it easy and fun.

Oh, I checked out 717 items.
Solo uno de cada diez ingenieros colombianos está listo para el nuevo mercado laboral
Published: 2022-02-16 22:04:59

El Banco Mundial, la Organización para la Cooperación y el Desarrollo Económicos (Ocde) y diversas entidades privadas han mejorado las estimaciones de crecimiento para Colombia.

Se espera que el país crezca a un ritmo mejor del esperado, situándose entre el 5,9 y el 7,6%, colocando a Colombia por encima de las perspectivas de toda la región.

Los colombianos pueden celebrar por tanto que se están recuperando los niveles pre crisis, con opciones de ser uno de los países mejor situados en la carrera hacia la completa recuperación de todos los sectores.

Colombia necesita más de 80.000 ingenieros informáticos
La pandemia ha dado un fuerte impulso a todos los proyectos de digitalización pendientes.

Las empresas que ya invertían en digitalización son ahora más conscientes que nunca de la importancia de adaptarse a un mundo global que utiliza el Internet como su canal favorito para comunicarse y hacer negocios.

Sin embargo, para culminar este proceso se necesitan profesionales que apoyen con su [conocimiento](https://visiondelsur.com/) y experiencia.

Solo en el área de la ingeniería informática, el SPE reporta que hay más de 62.000 oportunidades laborales activas que se pierden por falta de aspirantes cualificados.

Y otro dato preocupante, de cada 10 universitarios colombianos, solo 3 se decantan por algún tipo de ingeniería, de los cuales, solo 1 cuenta con habilidades relacionadas con lo que el mercado poscovid demanda: analítica de datos, machine learning, programación y otras áreas fundamentales para la digitalización de las empresas.
Ingenieros latinoamericanos necesitan "reinventarse" para desarrollar su carrera profesional
Published: 2022-02-16 22:04:20

Estas son algunas de las conclusiones principales del Barómetro 2020 sobre las perspectivas profesionales a futuro de la Ingeniería en España y América Latina de Structuralia, que son un indicador claro de la transformación en la que está inmersa el sector.

De la misma forma, en este informe pionero, una abrumadora mayoría de los encuestados (más del 80%) creen que una maestría actualizada es el medio a invertir porque es el que más puede ayudarles a impulsar su empleabilidad, en esta coyuntura actual de incertidumbre actual.

Big Data, Cálculo de Estructuras, Inteligencia Artificial, Eficiencia Energética, BIM, Medio Ambiente o Ciberseguridad, son algunas de las áreas que ya están concentrando las mayores oportunidades de empleo en la región para aquellos profesionales que estén altamente capacitados.

Por esta razón, la Organización de Estados Americanos (OEA) y Structuralia comunican su programa de becas, de hasta el 80%, en maestrías de alta especialización y excelencia académica, con el objetivo de ayudar a ingenieros, arquitectos y profesionales [STEM](https://visiondelsur.com/) en esta necesaria transformación.

El próximo día 9 de Julio finaliza el plazo para poder presentar candidaturas, a través de, a una de las 350 becas limitadas en 60 maestrías especializadas en español e inglés, dirigidas desarrollar el talento de titulados en áreas de ámbito STEM de la región.
Feature update: Rich Content Embeds
Tags: changelog, ux
Published: 2022-02-16 21:56:51

Hello DEV Community!

I'm excited to announce a significant improvement in how we embed rich content (such as Tweets and Youtube videos) in Forem posts and comments.🎉

Now, you need just the `embed` keyword and the complete URL of the resource:

```
{% embed https://... %}
```

Prior to this change, we embedded rich content by using keywords specific to the type of embed being created. For example, to embed a GitHub repository, we would use the `github` keyword and the slug to the repository:

```
{% github forem/forem %}
```

With our new approach, all you need is the complete URL to the repository:

```
{% embed https://github.com/forem/forem %}
```

Our [Editor's Guide](https://dev.to/p/editor_guide#liquidtags) contains a list of supported content types. Note that embeds that were created using the former approach will still work for now. Eventually, the former approach will be deprecated.

Do jump in and try this new rich-content embed approach out! Please [report](https://github.com/forem/forem/issues/new?assignees=&labels=&template=bug_report.md) any bugs you may encounter - thanks!

---

_Originally published on [Forem.dev](https://forem.dev/foremteam/changelog-a-new-and-streamlined-way-to-embed-rich-content-4h58)._
Life without .addEventListener()
Published: 2022-02-16 21:31:17

Can you imagine your life without .addEventListener()... probably not. Software Engineers/Developers know exactly what I'm talking about, but the general public has no idea how their lives would be effected if there were no event listeners. 

For those of you who are reading this and thinking to yourself, "what the heck is an event listener"? An event listener is "An event listener is a procedure in JavaScript that waits for an event to occur. The simple example of an event is a user clicking the mouse or pressing a key on the keyboard...an inbuilt function in JavaScript which takes the event to listen for, and a second argument to be called whenever the described event gets fired." -according to GeeksforGeeks.

If you're still reading this and still thinking to yourself, "what the heck", let me further explain. Think about your most visited websites, apps on your phone, or you preferred social media platform (this list might be long). On your list, every one of the websites or apps is interactive, meaning there are places on the page that you can click on, either in the form of liking your friends photo, or something as boring as logging in to pay a bill. These features of your favorite websites/apps wouldn't be possible without event listeners. 

Event listeners are written in the code to make your experience the best it can be when visiting the webpage/app. They sit silent in the background waiting for you to commit the certain action on your screen that will trigger their attached set of instructions. For instance, once you double-click that photo of your friends cute little puppy on Instagram, everyone knows you liked the photo. This is because the "feature", we'll call it, was sitting in the code  not doing anything until you double-clicked the photo. Once you double-clicked the photo, the event listener (listening for the "double-click") fired off and executed a set of instructions. That set of instructions is a topic for another day.

There are so many different "features" that are built into websites/apps that we all interact with on a daily basis. Like I said before, they are there to enhance our experiences while on the web, and they stem from even listeners.  

The important thing is, imaging your life without an event listener waiting for you to double-click your friend's photo. If that is hard to imagine, imagine a website/app that you couldn't click on. How boring would that be? In my opinion, life would be MUCH different, without event listeners but again, that is a topic for another day.
'htm is JSX-like syntax in plain JavaScript', but...
Tags: javascript
Published: 2022-02-16 21:24:56

HTM stands for 'Hyperscript Tagged Markup', written by Jason Miller,
who is also the creator of the awesome library Preact.

Here is how to use it :

```js
import { render } from 'preact';
import { html } from 'htm/preact';
render(html`<a href="/">Hello!</a>`, document.body);
```

What's nice, it's that you can use it with any frameworks.
For example in Mithril :

```js
 const html = htm.bind(m);

 const Ciao = function ({attrs}) {
   return {view: () =>  html`<h1>Hello ${attrs.name}</h1>`}
 }
 m.render(app, m(Ciao, {name: "Raph"}))
```

In React :

```js
import ReactDOM from 'react-dom';
import { html } from 'htm/react';
ReactDOM.render(html`<a href="/">Hello!</a>`, document.body);
```
As you can see, in order display the component, you have to pass it to a 'render' function, specific to the framework used.

Wouldn't it be nice if we could do ? :

```js
let HelloWorld = html`<h1>Hello</h1>`
document.body.append(HelloWorld)
``` 
It turns out it's indeed possible [HTML to Dom Element](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4IWAA60ATsQAEwOSTJzWcsNNpY5AHRBwIaAK60jcPTrSXY8gBIwoUWgHUZUACZyAvEtJQABgA8hACMAHz2jrSBAPShYf6W7rTURjgM+ABGtO4AnvgYEhJM7gAUkU6u0h4AlJT6DjDUxBD0CDwAzIgdAEwAtAAMiANsHCCYOHj41HACNPSMzDxsALqsQA) :

```js
import { html } from "sinuous"

let HelloWorld = html`<h1>Hello</h1>`
HelloWorld.style.color = "red";
document.body.append(HelloWorld)
```
Here the 'html' function returns a real DOM element.
Thanks to [Sinuous](https://sinuous.dev/)

There are really many advantages in doing so.
It is not unlike the nice library [DML](https://github.com/efpage/DML);

Here is another example [IonicSinuous](https://stackblitz.com/edit/ionicsinuous-qocdyn?file=script.js):

```js
const { html, observable, map } = sinuous;

const Users = observable([]);

function Services() {
  async function fetchRandomUsers() {
    const response = 
        await fetch('https://randomuser.me/api/?results=10');
    const data = await response.json();
    Users(data.results);
  }
  return {
    fetchRandomUsers,
  };
}

const User = (user, index) => {
  let userView =  html`
      <ion-item style="display:none;">
        <ion-avatar style="margin-right:10px">
          <ion-img src=${user.picture.thumbnail}></ion-img>
        </ion-avatar>
        <ion-label>
          ${user.name.first} ${user.name.last}
        </ion-label>
      </ion-item>
    `;
  setTimeout(() => userView.style.display = "block" , 10 * index + 10)
  return  userView;
};


const App = () => {
  const svc = Services();
  return html`
    <ion-content style="text-align:center">
      <ion-button
        onclick=${svc.fetchRandomUsers}
      >
        Fetch Users
      </ion-button>
      <ion-list>
        ${() => Users().map((user,index) => User(user, index))}
      </ion-list>
    </ion-content>
  `;
};

document.body.appendChild(App());

```
Actualizando los datos de un modelo en Django con un loop
Tags: django, python, spanish, backend
Published: 2022-02-16 20:23:20

Buenas... últimamente se me ocurrió empezar a documentar un poquito algunos de los problemas con los que me encuentro día a día. Quizás en algún momento vas a necesitar actualizar los datos de un modelo y no tenés ganas de andar escribiendo campo por campo. Acá dejo una función que realicé y terminó siendo bastante útil para el proyecto en el que estoy trabajando:

```python
if request.POST['id']:
    post = Post.objects.get(id=request.POST['id'])
    try:
       for request_data_in_array in request.POST:
           request_post_values = request.POST[request_data_in_array]
           setattr(post, request_data_in_array, request_post_values)
           post.save()
```

Los pasos/lógica que seguí es la siguiente:
_ Si existe id, buscamos un post con el id proporcionado


_ Recorremos la cantidad de datos proporcionados(en este caso son campos del modelo Post)


_ Una vez que los recorremos obtenemos el valor de cada uno adentro del loop. Esto lo hace cuando le solicitamos al objeto POST que nos traiga cada uno de los campos recibidos: < request.POST[request_data_in_array] > ahora a estos valores los tenemos dentro de una variable.


_ La función setattr(object, property_name, values) nos permite asignar valores a las propiedades de un objeto, tan solo es necesario pasarle la istancia del objeto al que queremos cambiar, el nombre de la propiedad y el valor. En este caso tenemos varias propiedades y varios valores para esas propiedades, entonces lo hacemos también dentro del loop para que lo haga con todos. 


_ Una vez terminado podemos guardar con el método .save() y tendremos nuestro modelo actualizado ;)
Simple alert in JavaScript
Tags: html, css, javascript, beginners
Published: 2022-02-16 21:17:56

create html file and write code

```
<!DOCTYPE html>
<html>
 <head>
  <title>simple alert in javascript</title>
 </head>
 <body>
   <div>
     <button onclick="press()">click here</button>
   </div>
 </body>

 <style>
   div {
    display: flex;
    flex-direction: row;
    justify-content: center;
   }

   button {
    border: 2px solid orange;
    background-color: orange;
    color: #fff;
    font-family: sans-serif;
   }
 </style>

 <script>
   function press() {
     let notification = alert('Congrats!');
   }
 </script>
</html>
```