teleren/devto huggingface dataset:
Configurar Webpack & React Parte 2 - 🗒 Código fuente inicial.
Tags: javascript, react, webpack, webdev
Published: 2020-07-02 21:39:19

En la entrega anterior creamos nuestro proyecto e instalamos las dependencias principales, en este tutorial nos enfocaremos en crear el código fuente inicial de React y en el siguiente tutorial lo probaremos con webpack.

Este código fuente inicial será modificando en futuros tutoriales pero por ahora es suficiente como para entender como trabaja webpack.

### index.html

Dentro de la carpeta `public` crearemos un archivo `index.html`, este archivo html será donde nuestro transpilado de React y sus componentes se renderizaran, mas concretamente en el `div` con id `app`. 

El archivo debe tener el siguiente contenido.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hola react</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

```

Árbol de archivos y directorios:

```bash
.
├── public
│   └── index.html
├── src
├── .babelrc
├── package-lock.json
└── package.json
```

### HolaMundo.jsx

Dentro de la carpeta `src` crearemos una subcarpeta llamada `components` y dentro de esta un archivo llamado `HolaMundo.jsx` que será nuestro primer componente de prueba y tendrá el siguiente contenido.

```jsx
import React from "react";

const HolaMundo = () => {
  return <h1>Hola mundo</h1>;
};

export default HolaMundo;

```

Árbol de archivos y directorios:

```bash
.
├── public
│   └── index.html
├── src
│   └── components
│       └── HolaMundo.jsx
├── .babelrc
├── package-lock.json
└── package.json
```

### index.js

Nos situamos de nuevo en la carpeta de `src` y creamos un archivo llamado `index.js` que será el punto de entrada principal para nuestra configuración de webpack.

```js
import React from "react";
import ReactDOM from "react-dom";
import HolaMundo from "./components/HolaMundo";

ReactDOM.render(<HolaMundo />, document.getElementById("app"));
```

> Como observación, podemos ver que tiene importado nuestro primer componente de ejemplo `HolaMundo.jsx`.

Árbol de archivos y directorios:

```bash
.
├── public
│   └── index.html
├── src
│   ├── components
│   │   └── HolaMundo.jsx
│   └── index.js
├── .babelrc
├── package-lock.json
└── package.json
```

## Despedida

En la siguiente entrega empezaremos a crear la configuración de webpack y añadiremos soporte para archivos `js` y `jsx`
Bash: How To Teleport In The Terminal
Tags: bash, tutorial, productivity, linux
Published: 2020-07-02 21:12:35

## Overview

Today, I'm going to be sharing a little trick I use to teleport around my terminal with ease. 

Do you change to your project directory like this?

```bash
> ~
$ cd Documents

> ~/Documents
$ cd projects

> ~/Documents/projects
$ cd my-project

> ~/Documents/projects/my-project
$ ls

src/ package.json yarn.lock etc... 
```

Then this article is for you!


### Pushd and Aliases

If you have directories that you commonly go to, it can be incredibly useful to create aliases using pushd. 

> If you don't know anything about your bashrc, pushd, or setting up aliases, check out my [Bash Script Tool Kit](https://dev.to/jimmymcbride/bash-script-tool-kit-56i7) blog.

We can try adding something like this to our bashrc:

```bash
alias projects="pushd ~/Documents/projects"
alias experiments="pushd ~/Documents/experiments"
```

Now, anytime we type `projects` or `experiments` into our terminal, we can instantly "teleport" to these directories!

![great Scott](https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fimg.picturequotes.com%2F2%2F22%2F21128%2Fgreat-scott-quote-1.jpg&f=1&nofb=1)

But it doesn't stop there, folks! You're probably asking yourself right now, "Jimmy, why use pushd when cd would do the same thing?"

That's a very good question! Pushd has a special feature. After we pushd into a directory we can use popd to pop back to the directory we were previously in. Say we are in our experiments folder and we type in `projects` into are terminal. Now, if we want to go back to our experiments directory, all we have to do is type `popd` and we're back were we were!

### &&

&& is a very useful and powerful tool when it comes to writing bash alias. It lets us chain commands after one another in one line! So lets use this `&&` operator to chain some extra commands and improve our scripts.

```bash
alias projects="pushd ~/Documents/projects && clear && ls"
alias experiments="pushd ~/Documents/experiments && clear && ls"
```

You can see here that we've chained `clear` and `ls` to our commands. So now when we use the projects alias it will take us to our projects directory, clear our screen, and list out all the files and directories. Pretty sweet, huh?

Another alias I use quite a lot is:

```bash
alias x="clear && ls"
```

### CD Aliases

How many times do you do this:

```bash
$ cd ..

$ ls
```

Why not set up a couple of aliases that do the hard work for you?

```bash
alias ..="cd .. && clear && ls"
alias ...="cd ../.. && clear && ls"
alias ....="cd ../../.. && clear && ls"
alias .....="cd ../../../.. && clear && ls"
```

Now `..` will take you up a directory, clear the screen and list out all your files in that directory for you. Pretty neat, huh?

## Conclusion

Combine the use of chaining with `&&` and `pushd` we can create some incredibly useful alias that help us not only teleport around our filesystem, but keep it clean and organized as well.

What are some of your favorite bash scripts or aliases? I'd love to hear about them in the comments!
Why it has Taken me Five Years to Learn Basic Python
Tags: beginners, motivation
Published: 2020-07-02 21:08:24

Coding is something that my partner is extremely passionate about, so about five years ago I began my own coding journey. That ended pretty fast. While I love listening to my partner explain the projects he has been working on and finding and fixing problems, I really wanted to be able to have deeper conversations and to have a better understanding about the area he is passionate about. But when I tried it, it was just something that I could not comprehend or even understand how anyone could find it fun or interesting.

When I started to learn code everything felt so overwhelming but at the same time stupidly simple. I couldn’t understand that I was learning the basics so I could eventually start building. It all seemed so silly. How was I going to build something that just prints out ‘hello world’, why wouldn’t I just type hello world, and what was even the point? The levels of frustration I was feeling with myself lead me to have a negative mindset that was keeping me from learning and eventually lost the motivation to learn.

The class I have been taking has given me some perspective and allows me to reflect on myself whenever I first started my coding journey years ago. Knowing what I know now I realize that I had too high of expectations for myself. When I first started I didn’t have any experience whatsoever but I had expected myself to fully understand all the basics and be able to write fun little things within a few weeks. Not only did I have too high of expectations but they were also unrealistic. I didn't allow myself time to learn, or give myself the kindness when I didn’t understand, or allow myself to fail which I have now learned is a major part of learning code. I didn’t understand that failures taught me more than what it meant about my skills especially that early on.

I feel extremely fortunate with my experience this time around learning. I have a professor who encourages us to actively participate and learn, I have a class of peers who give me a sense of community and help me understand it’s okay to not understand and it's always okay to ask for help, and I have a partner who is always excited to help and talk with me about what I’ve learned. I think another of my biggest challenges when I was learning was feeling like so many people learn to code on their own or from a bootcamp so why couldn’t I be one of those people too. This new experience has shown me that I can be one of those people, I just needed an encouraging environment, where I could communicate with people on the same skill level as me and to also be patient and nicer to myself.
Mid Meet Py - Ep.14 - Interview with Waylon Walker
Tags: python, chat, irl, data
Published: 2020-07-02 21:02:37

---
title: Mid Meet Py - Ep.14 - Interview with Waylon Walker
published: true
description: We meet in the middle of the day in the middle of the week to chat about Python. This week we have Waylon Walker - Data driven solution enabler, creator of find-kedro and kedro-static-viz to join us.
tags: python, chat, irl, data
---
PyChat:
      [PyData global CfP is opened](https://global.pydata.org/pages/cfp.html)
      [JupyterCon 2020 Virtual Event](https://jupytercon.com/?eType=EmailBlastContent&eId=7199698e-39b2-4a0a-b12b-1c819f8582be)
      [PyTorch joins NumFOCUS as an Affiliated Project](https://github.com/pytorch/ignite?eType=EmailBlastContent&eId=7199698e-39b2-4a0a-b12b-1c819f8582be)
      [PyGotham TV - last days for CfP (July 5th)](https://cfp.pygotham.tv/)
      [Python Ireland remote meetup events](https://www.meetup.com/pythonireland/events/271602841/) > [volunteers for Lightning Talks](https://bit.ly/3g8w0xh)
      [Blog about Pickle: Pickle’s nine flaws](https://nedbatchelder.com/blog/202006/pickles_nine_flaws.html)

Mid Meet - Hall of Fame
      Interview with Waylon Walker ([Twitter](https://twitter.com/_waylonwalker) & [dev.to](https://dev.to/waylonwalker))- Data driven solution enabler, creator of find-kedro and kedro-static-viz

[Listen to MidMeetPy podcast](https://anchor.fm/midmeetpy)
React - how to use media queries with Radium
Tags: javascript, react, css, tutorial
Published: 2020-07-02 20:59:18

In the last article we explored how we can deal with pseudo-selectors using inline styles and `Radium`.

{% link https://dev.to/cilvako/react-how-to-use-pseudo-selectors-with-radium-4gm5 %}

Today we're going to see how to make your design responsive using `media-queries` and `Radium`. Consider the code below:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lht4s1pyrtcsiiedzb8f.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k7voxpqa3jo6jekdf00p.PNG)

We have two super simple functional components, `App`, which is the main one and `DisplaySquare`, which displays a red square. Now let's look at the `CSS` of the `div`:

```javascript

const divStyle = {
    height: "400px",
    width: "400px",
    backgroundColor: "red",
    margin: "auto",
    "@media (max-width: 600px)": {
      height: "200px",
      width: "200px",
      backgroundColor: "green",
      margin: "auto"
    }
  };

```

We stored our styling into a variable that will be passed as a value to the `style` property of the `div`. The `CSS` looks quite normal, except maybe for this part:

```javascript

"@media (max-width: 600px)": {
      height: "200px",
      width: "200px",
      backgroundColor: "green",
      margin: "auto"
    }

```
The code says that when the view-port is smaller than 601px, the `div` should be smaller and green. And this is how we work with `media-queries` in `Radium`. The complete code is [here](https://codesandbox.io/s/sweet-shtern-3ckv8?file=/src/DisplaySquare.js:89-340) and I recommend you playing around with it.

Besides importing `Radium` we also need to import the `{StyleRoot}` HOC (higher order component) because our `App` component needs to be wrapped in it (media queries won't work if we don't do this). Also, as mentioned in the last article, don't forget to wrap all the components that use `radium` styling in the `Radium` HOC, when exporting them.

*`Radium` is now under [stable maintenance](https://formidable.com/blog/2019/radium-maintenance/) so this means no new features will be implemented and even the creators are recommending using alternative tools for achieving the same effects.*

You can read more about the project [here](https://formidable.com/open-source/radium/).

*Image source: Zan/ @zanilic on Unsplash*
Visualizing Closures with the VSCode Debugger
Tags: javascript, closures, video
Published: 2020-07-02 20:54:22

---
title: Visualizing Closures with the VSCode Debugger
published: true
description: Visualizing Closures with the VSCode Debugger
tags: javascript, closures, video
---

Let use the VSCODE debugger to visualize a closure to help us understand what they are.

I consider myself a visual learner so it helps me to see the thing I am trying to learn. So I am going to set breakpoints and looking directly at the closure in the debugger. This should also help you understand what a closure is.

Are you a visual learner? Does this help you understand closures?

Watch this video if you need help setting up the debugger in VSCode

{%youtube KYFcTe_kRow %}

Quokka live coding extension: https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

# More Videos

If you'd like to see more of my videos, [head over to YouTube](https://www.youtube.com/channel/UCDYDhCEPlrYfRyj2ApxeVMA/).

More Minute JavaScript Videos: 

[![Screenshot of YouTube Channel](https://dev-to-uploads.s3.amazonaws.com/i/ql8225baay311dte4eib.png)](https://www.youtube.com/playlist?list=PL59tadyXaIqVBUhq1PlZQvUSSzQzM62AF
)

What would you like to see next?
Apigee Learning and references.
Published: 2020-07-02 20:46:24

---
title: Apigee Learning and references.
published: true
description: Apigee learning
tags: 
//cover_image: https://direct_url_to_image.jpg
---
At work there's an ongoing project to expose our existing set of Rest API's to outside world. The chosen product for API management is [Apigee](https://cloud.google.com/apigee). I wanted to learn more about this product and started looking around. 

I am documenting the set of resources that I completed: 

To get started create a trial account on apigee, google has been pretty kind with the eval accounts. One can be created by going to this link [here](https://login.apigee.com/sign__up). 

You'll get an activation link on the email entered and then once the account is activated google will provision a tenant (not sure if this is the right word here may be Organization may be a better word) for you. 

It takes a little bit of time to complete the provision but be patient and let google do the hard work for you :)


Once I had my eval Organization created, I followed steps [here](https://docs.apigee.com/api-platform/get-started/get-started). Following the steps gives you an idea about the layout of the apigee UI. I highly recommend going through the Basic Concepts section too. 

I also found that there's a leaning track (again not sure if I am using the right word) on Coursera which has a set of courses which targets API development with apigee. 

[Developing APIs with Google Cloud's Apigee API Platform Specialization](https://www.coursera.org/specializations/apigee-api-gcp)
(I have not completed this yet but hopefully I will and then update this post about how this course was).
100 Days of SwiftUI — Day 32
Tags: 100daysofswiftui
Published: 2020-07-02 20:49:11

---
title: 100 Days of SwiftUI — Day 32
published: true
date: 2020-07-02 20:46:05 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-32/
---

Today's [Day 32](https://www.hackingwithswift.com/100/swiftui/32), time for another technique-project to learn new things: This time, it was about animations — and they were really fun!

A few weeks ago, I built some animations and transitions. And today it was pretty impressive to see how easily I can build a pulsing button in SwiftUI. I did the same thing with UIKit and CoreAnimation those few weeks ago.

What really blew my mind in the end was how easily I can build a coin-flip-like rotation animation 🤯🤯🤯🤯🤯🤯🤯

Have a look at this!

![coinflip](https://zeitschlag.net/content/images/2020/07/coinflip.gif)

And this is all the code it takes to flip the button three times in a second:

```swift
Button("Tap Me") {
  withAnimation(.easeInOut(duration: 1)) {
    self.animationAmount += 1080
  }
}
.padding(50)
.background(Color.red)
.foregroundColor(.white)
.clipShape(Circle())
.rotation3DEffect(.degrees(animationAmount), axis: (x: 0, y: 1, z: 0))

```

Wow, that's really awesome! I have to find out how to do this with UIKit 🤓

<!--kg-card-end: markdown-->
Http PATCH
Published: 2020-07-02 20:41:25

---
title: Http PATCH
published: true
description: http patch operation confusion
tags: 
//cover_image: https://direct_url_to_image.jpg
---
Implementing a client for an http PATCH route got me confused that which is the correct way to implement. 

Here are couple of links which helped me grasp this concept: 
https://sookocheff.com/post/api/understanding-json-patch/


Another one: https://medium.com/hepsiburadatech/you-know-nothing-engineers-http-patch-d2ebab99c1d5

Here's the package which was used to implement the server as well as client for the http PATCH: 

https://github.com/KevinDockx/JsonPatch
Build Your Own Domain Specific Language in Python With textX
Published: 2020-07-02 19:33:41

<p>Programming languages are a powerful tool and can be used to create all manner of applications, however sometimes their syntax is more cumbersome than necessary. For some industries or subject areas there is already an agreed upon set of concepts that can be used to express your logic. For those cases you can create a Domain Specific Language, or DSL to make it easier to write programs that can express the necessary logic with a custom syntax. In this episode Igor Dejanović shares his work on textX and how you can use it to build your own DSLs with Python. He explains his motivations for creating it, how it compares to other tools in the Python ecosystem for building parsers, and how you can use it to build your own custom languages.</p><p><a href='https://www.pythonpodcast.com/textx-domain-specific-language-episode-269/'>Listen Now!</a></p>
If you could design a Software Engineering Course, what will it look like?
Tags: discuss, watercooler, beginners, productivity
Published: 2020-07-02 19:53:20

<h1>How you doin!</h1> I am a full-stack(MEVN) developer. I have built web apps as part of my personal development. My first project in NodeJS was a path-defining one. 

I am graduating in CS with a specialization in Software Development which does not offers any course on what I actually want to learn.

Being honest here, I have found many faults in the course design. I have learned more from my own projects, StackOverflow, this community, Documentations, etc. than I could ever learn from my college which I believe most of you peeps from this community will understand.

The traditional system really needs redefining (coz it sucks! right?). 

From your journey as a software developer, how would you design a course that you think will help newcomers to our community in a really efficient way? 

Let's discuss our opinions in the comments section and make it a collective conscience for others to tap into.
Data Collection And Management For Teaching Machines To Hear At Audio Analytic - Episode 139
Published: 2020-07-02 19:37:02

<p>We have machines that can listen to and process human speech in a variety of languages, but dealing with unstructured sounds in our environment is a much greater challenge. The team at Audio Analytic are working to impart a sense of hearing to our myriad devices with their sound recognition technology. In this episode Dr. Chris Mitchell and Dr. Thomas le Cornu describe the challenges that they are faced with in the collection and labelling of high quality data to make this possible, including the lack of a publicly available collection of audio samples to work from, the need for custom metadata throughout the processing pipeline, and the need for customized data processing tools for working with sound data. This was a great conversation about the complexities of working in a niche domain of data analysis and how to build a pipeline of high quality data from collection to analysis.</p><p><a href='https://www.dataengineeringpodcast.com/audio-analytic-sound-recognition-episode-139/'>Listen Now!</a></p>
Simple js compose
Tags: javascript, functional, compose
Published: 2020-07-02 19:27:43

The concept of `compose` is simple — it combines n functions. It’s a pipe flowing right-to-left, calling each function with the output of the last one.

```javascript
Array.prototype.reduceRight = function (...args) {
  const _this = this
  return _this.reverse().reduce(...args)
}

const compose = (...args) => x => args.reduceRight((acc, currFn)=>{
return currFn(acc)
}, x)


const double = x => x * 2
const inc = x => x + 1


const incAndOct = compose(double, double, double, inc)

incAndOct(2) //24

```
##### Explanation:
we are passing `2` to `incAndOct` function. First it will call `inc` method then the result will be `3` and next it will apply double method on `3` so result is `6` again one more double but this time on `double(3)` i.e `6` result is 12 now final double on `12` it is `24`
Mi experiencia con Django 
Published: 2020-07-02 19:24:50

Hace ya un buen rato que escogí Django para desarrollar en Web, al principio las dudas sobre sí era una buena elección se hicieron presentes, pero eventualmente fueron siendo aclaradas con cada pieza de código que aprendía, definitivamente Django es una muy buena elección sí lo que quieres es hacer proyectos grandes en Web.

Django cuenta con una gran comunidad detrás de él, hay demasiada Documentación, vídeos, etc. 

Es un framework basado en Python, así que es muy fácil de aprender, además cuenta con ciertas funciones ya por defecto que te harán la vida más fácil, por ejemplo el sistema de Login, Logout y su CRUD por su puesto.

Definitivamente una gran elección sí quieres adentrarte en el mundo de la Web