teleren/devto huggingface dataset:
100 días de código: 42, JS asíncrono y comenzando con TDD.
Tags: spanish, 100daysofcode, webdev, javascript
Published: 2021-12-15 00:42:57

Foto de [Alex Padurariu](https://unsplash.com/@alexpadurariu?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/s/photos/cold?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
  

¡Hey hey hey!

Bitácora de capitán: este es el día 42 del reto y hoy me sentí inspirado para avanzar bastante en el curso de [The Odin Project](https://www.theodinproject.com/), aunque no codifique mucho creo que, a veces, los días en donde destaca la teoría son buenos.

Al estudiar JS asíncrono hace un tiempo me di cuenta que realmente todas las paginas tienen sus significados para cada uno de los términos mas generales. Despues de dedicarle unas cuantas horas de estudio llegue a concluir las siguientes definiciones:

#### Callbacks
Es una funcion que pasa como parámetro a otra funcion y que la funcion externa ejecuta en algún momento.

#### Promesas
Es un objeto que puede producir un valor en el futuro.

#### API
Las API o interfaces de programación de aplicaciones son servidores que se encargan de entregar datos para su uso externo.

#### Async / Await
Async es una palabra que le permite a JS saber que se esta declarando una funcion asíncrona. Es necesaria para poder usar dentro de esta funcion la palabra await la cual le dice a JS que espere a que finalice una acción asíncrona antes de continuar en la funcion. Es una forma mas simple y fue agregada en el ES2017.

Si estoy equivocado en alguna de las definiciones no duden en decírmelo. Se los agradeceré.

Ahora vamos con la sección regular

### Ayer
- Avance hasta la sección formularios de The Odin Project.
- Practique 30 min de Touch Typing. Mi promedio de palabras por minuto rosa las 40 palabras en ciertas pruebas.
- Maquete una prueba de formulario para reforzar los conocimientos que adquirí en The Odin Project.

### Hoy
- Practique 30 min de Touch Typing.
- Avance hasta la sección practica de Testing en The Odin Project.

Realmente siento que avance mucho en The Odin Project pero siento que me falta dedicarle un poco mas a la practica. Intentare dedicar un tiempo mas largo a ello.

Espero que tengan mucho éxito con sus proyectos y animo!

Adiós mundo!
SPO600-Lab6, Project Stage 1: Algorithm Selection Lab
Tags: spo600, x8664, aarch64, benchmarking
Published: 2021-12-15 00:23:09

## Introduction
This is the Algorithm Selection Lab.In this lab, the goal is to investigate the impact of different algorithms which produce the same effect. Based on benchmarking, three algorithms for adjusting the volume of PCM audio samples were tested. It is crucial to remember not to compare the relative performance across different machines, because various systems have different microarchitectures, memory configurations, peripheral implementations, and clock speeds, from mobile-class to server-class (e.g. Intel Atom vs. Xeon; AMD APU vs. Threadripper; ARM Cortex-A35 vs. Neoverse-V1).

However, do compare the relative performance of the various algorithms on the same machine.

## Procedures

Digital sound is typically represented as two streams of signed 16-bit integer signal samples. To change the volume of sound, each sample can be scaled (multiplied) by a volume factor, in the range of 0.00 (silence) to 1.00 (full volume). On a mobile device, the amount of processing required to scale sound will affect battery life.

The given six programs are:
- vol0.c is the basic or naive algorithm, which using casting between integer and floating points. Expensive.
- vol1.c does the math using fixed-point calculations.
- vol2.c pre-calculates all 65536 different results, and then looks up the answer for each input value.
- vol3.c is a dummy program, negative control.
- vol4.c uses Single Instruction, Multiple Data (SIMD) instructions accessed through inline assembley (assembly language code inserted into a C program). **Only for Aarch64**.
- vol5.c uses SIMD instructions accessed through Complier Intrinsics. This program is also specific to **AArch64**.

1. Get example programs using 
`tar -xvzf spo600-volume-examples.tgz -C ~/Lab6/`
2. Change directory to where the `Makefile` stored. Using `make` to compile c-scripts.
3. Define `SAMPLES` in the header file `vol.h` and the scale of volume was set to **50%** in this header file.
4. The memory used by these algorithm can be measured using `free -m` command in terminal.
5. Simple measure of time using `time` command.
6. Find a way to measure performance, using `#include <sys/time.h>`

### Prediction

My prediction is that algorithms `vol5` and `vol4` are faster than others, `vol2` is medium speed, while `vol1` and `vol0` are slowest, may vary depends on situations.

## Test in Aarch64

### Simple test

Simple test using `time` command:

![time command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m86st3gakas9efgs4v75.png)
 
## Questions.

The prediction can be found at the above.

Q: Measure performance

```
struct timbal start, stop;
float elapsed;

gettimeofday(&start, 0);

for (x=0; x< SAMPLES; x++){
  data[x] = scale_sample(data[x], 0.5);
}

gettimeofday(&stop, 0);

elapsed = (stop.tv_sec - start.tv_sec)*1000.0f
```

The running time is roughly between `start` and `stop`.
On a mission to connect with local businesses
Tags: podcast, video, startup
Published: 2022-01-10 15:19:05

---
title: On a mission to connect with local businesses
published: true
date: 2021-12-15 00:00:00 UTC
tags: podcast,video,startup
canonical_url: https://jhall.io/archive/2021/12/15/on-a-mission-to-connect-with-local-businesses/
---

On this week’s episode of The Tiny DevOps podcast, I talk with one of my former clients, Ashleigh Cornelius, who is the founder of Localise, a UK-based startup on a mission to bring consumers together with local, independent businesses. We talk about the vision and story of Localise, and some of the challenges he’s faced as a (mostly) non-technical founder building a technology startup.

[Listen](https://share.transistor.fm/s/173478b6),[watch](https://youtu.be/QBWsKYK2b54), or[read the transcript](https://share.transistor.fm/s/173478b6/transcript)  
[![](https://jhall.io/images/icon-podcast-512_hudba6b7b089bf867fab369dd7c8de54ef_15339_0x100_resize_q85_box_3.png)](https://share.transistor.fm/s/173478b6)  [![](https://jhall.io/images/icon-youtube-512_hu472b17e2e29474aa989a586bfaf501e7_5679_0x100_resize_q85_box_3.png)](https://youtu.be/QBWsKYK2b54s)  [![](https://jhall.io/images/icon-transcript-512_hu61121fb4158683053abb5347949e43dd_14667_0x100_resize_q85_box_3.png)](https://share.transistor.fm/s/173478b6/transcript)
* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Solving day 14 of Advent of Code 2021 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2021-12-14 23:27:54

---
title: Solving day 14 of Advent of Code 2021 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2021 (day 14)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2021 in Javascript
---

{% youtube 7Q7AG33QYoc %}
My journey creating my first saas /startup in a few months pt.1
Tags: saas, devjournal, beginners, productivity
Published: 2021-12-14 23:20:53

Hi everyone, it's me again. Today I wanted to start sharing my journey, how I built my first saas startup in a few months (we started about 4 month ago)

## Finding a co-founder 

Let's face it. You can't do everything. Or at least not efficiently in time. And time is one of the most valuable resources you have. That's why many founders will tell you to find a co-founder for your idea. In most cases a mix of technical and sales based skillset would be very helpful. 

Since I work as a developer, it seems easy to find someone else with a technical background. And that's how I met your... my co-founder.

## Solving a real problem
There probably are a ton of todo apps out there. And thats okay. Everyone has its own preferences and tastes when choosing a new product. In many cases you will use the most famous product which seems to solve 80 % of the problem you face. With that said, a problem can also be solved in many different ways sometimes.

We did find something that would be worth creating even if there are a lot of competition out there. We don't wanted to build just another products but one that solved a problem with a different approach.

So why not building a todo app with KI or make it more fun to use by using it in a different way? I think you get the point. If you are able to create your unique selling point than do it. But don't forget to solve a real problem.

## Don't overengineer your MVP
Stop building more features. Focus on one or two main features which create great results and release your product as soon as it is stable enough to serve. You always should weigh in if the time you spend for a new feature is worth it or just go ahead to the next one wich should generate value.

We first started with an other product which we already discarded after we spend too much time thinking about it developing the first version. After reevaluating our product we knew we needed to move on.

## Build habbits
I heard that if you do a task for 21 days repeatedly it turns into a habbit. When you build a product you need to be determined to finish it as soon as possible. That includes a lot of work, in my case programming sessions. I started one day and since we put our code on github, I can track how many commits I did in the past weeks. If I forget to code the other day, I feel bad and so I try to at least improve something small.


This was my first part on how I startet building my first saas startup. If you liked this post you could follow me on [Twitter](https://mobile.twitter.com/harsvnc) or here in Dev. I will continue posting about my process and hope I can provide you with my experience.

Thanks for reading
Criando Decorators em funções no Python
Published: 2021-12-14 22:25:14

Decorators são funções que modificam o comportamento de outras funções. Várias vezes temos a necessidade de antes de executar uma função específica, modificar ou validar alguma informação para depois executa-la.

Vários frameworks da linguagem já utiliza desse recurso para modificar a execução de algumas funções.

Por exemplo em flask, temos o decorator @app.route, que é utilizado para definir as rotas de uma api. 

```python
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
   return 'Hello World'

if __name__ == '__main__':
   app.run()
```

Vejamos que nesse exemplo a função hello_world, tem apenas uma sintaxe que retorna uma string 

"Hello World", porém a parte de tratar o método e executá-lo como uma api é feito pelo decorator app.route. Sendo assim toda essa parte foi abstraído pelo decorator.

**Criando o primeiro decorator**

Decorator em python nada mais é que uma função, para criá-lo basta criar uma função.

```python
def meu_primeiro_decorator(main_function):
    def inner_function():
        print('decorator')
        return main_function()
    return inner_function
```

Agora para utilizar esse decorator basta coloca-lo em cima de uma outra função:

```python
@meu_primeiro_decorator
def funcao_com_decorator():
    print('main_function')
```

Quando executamos o nosso código obtemos o valor:

```python
decorator
main_function
```

Vejamos que pela ordem de execução do nosso decorator, primeiramente é executado o print('decorator') e logo após é executado a outra função.

**Criando o primeiro decorator com parâmetro**

Podemos também criar decorators com parâmetros

```python
def meu_primeiro_decorator_com_parametros(arg1):
    def inner_function(function):
        @wraps(function)
        def wrapper(*args, **kwargs):
            print('decorator')
            print(f"Argument:{arg1}")
            function(*args, **kwargs)
        return wrapper
    return inner_function
```

Agora para utilizar esse decorator basta coloca-lo em cima de uma outra função e atribuir o valor do parâmetro

```python
@meu_primeiro_decorator_com_parametros('arg1')
def funcao_com_decorator_com_parametros():
    print('main_function')
```

Quando executamos o nosso código obtemos o valor:

```python
decorator
Argument:arg1
main_function
```

Vejamos que pela ordem de execução do nosso decorator, primeiramente é executado o print('decorator'), depois  print(f"Argument:{arg1}") e logo após é executado a outra função.

**GitHub**

[https://github.com/filipemot/criando_decorators_em_python](https://github.com/filipemot/criando_decorators_em_python)
Day 497 : Action
Tags: hiphop, code, coding, lifelongdev
Published: 2021-12-14 22:50:00

_liner notes_:
- Professional : Pretty good day. Got to finish cleaning up a demo application I made for a blog post I wrote that should be posting tomorrow. Cleaned it up, created a copy, added the API Keys and Secrets, ran a set up script and it just worked! Pretty relieved. haha. Had a couple of meetings. Met with some folks to take a look at a testing framework. Not a bad day at all.

- Personal : Last night, I was able to abstract out a piece of my side project that is used in 2 different parts of the application. Had to set up some methods and listeners to be able to interact with the component. It's working, but some data is missing. I'll have to go through the steps and follow the flow.

![A green field in Seiser Alm, Italy with a forest to the right and mountains in the distance.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6aoggxzziri5mluzsis.jpg)

This morning, I bought some equipment for the projects I want to launch next year. These should be, I hope, the final pieces I need to really get started. Over the holiday break, I'm going to start working on the websites and test things out. With that said, I really want to do my best to try and get this side project completed tonight or at least before my break so I can focus on my other projects. Let yackin', time for some action! haha

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube NiZMqVXVZgA %}
Setup Tailwind with Create React App without craco.
Tags: beginners, tailwindcss, react, css
Published: 2021-12-14 22:41:57

### What is [tailwind](https://tailwindcss.com/)?
A utility-first CSS framework that can be composed to build any design, directly in your markup.

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


## Setting up Tailwind CSS
In this guide, we’ll cover a simple installation of Setting up Tailwind CSS in a Create React App project.

### Uninstall create-react-app (recommended)
If you've previously installed create-react-app globally. we recommend you uninstall the package using:

`npm uninstall -g create-react-app` or `yarn global remove create-react-app`

### Existing React Project
Bump "react-scripts" in package.json to 5.0.0 and run `npm install`. 

### New React Project
To create a new app use the following commands

`npx create-react-app my-app` or `yarn create react-app my-app`

Once new app is intialized go to the app directory, In our case `cd my-app`

### Install Tailwind CSS
Install tailwindcss and its peer dependencies via npm

`npm install -D tailwindcss postcss autoprefixer`

### Generate Config
Then run the init command to generate both `tailwind.config.js` and `postcss.config.js`.

```npx tailwindcss init -p```

### Configure your template paths
Add the paths to all of your template files in your `tailwind.config.js` file.

```
module.exports = {
  content: [
    "./src/**/*.{js,jsx}",
  ],
  ...
}
```

### Add the Tailwind directives to your CSS
Add the tailwind directives for each of Tailwind’s layers to your `./src/index.css` file.

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Start your dev process
Run your build process with `npm run start`.

That's all. Enjoy.
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2021-12-14 22:36:27

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._  

## Tutorial time

@uche_azubuko, this is such a fantastic and simple-to-navigate tutorial on using Strapi to build an API. Great work!

{% link https://dev.to/uche_azubuko/how-to-build-an-api-using-strapi-3ibf %}

## Let's end the software fear and discouragement 

@jordan_smith's post is a fantastic look inside some of the ways that early-career developers are frequently discouraged from pursuing a career in software. Let's inform ourselves together so we can make these myths a thing of the past. 

{% link https://dev.to/jordan_smith/6-myths-keeping-you-from-becoming-a-software-engineer-4gf5 %}

## Optimizing sloooooow websites

@alexsan28195851 came through with a super-helpful annotated list of reasons why you are able to cook breakfast and run a few laps around the block while your website loads. Let's fix it!


{% link https://dev.to/alexsan28195851/why-your-website-is-loading-so-slowly-2ihl %}

## Everyone on the same page

That's @amyoulton's goal when it comes to coders and non-coders! In this post, you'll find advice on "effectively explain[ing] your projects to non-coding members of your team" so that the entire org can feel unified and on the same side. 🏆  

{% link https://dev.to/amyoulton/how-to-explain-coding-projects-to-a-team-of-non-coders-36eg %}

## No job is perfect

Including software development. @vibalijoshi takes a look at some of the downsides of working in this field so we can work together to overcome them.

{% link https://dev.to/vibalijoshi/the-dark-side-of-software-development-441e %}

## Big takeaways from React Conf 2021

@alexeagleson attended React Conf 2021 and put together a list of some of the new topics they found most compelling. Take a look!

{% link https://dev.to/alexeagleson/learnings-from-react-conf-2021-17lg %}


## Gametime 

@zippcodder shares their process and methods for creating games from scratch using HTML Canvas. You'll find a lot of great info in here that will help you design your own!

{% link https://dev.to/zippcodder/complete-guide-to-building-games-in-the-browser-kp6 %}




_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
️ CodeCast's Coding Advent: Day Fourteen ️
Tags: webdev, beginners, programming, tutorial
Published: 2021-12-14 22:20:54


![Day 14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18tms5kiujr53m79gb8q.png)

### DAY 14

We're back today with another Christmas-themed Codepen!

Check out this amazing sleeping Santa CSS animation by Chhavi Khandelwal!

https://codepen.io/ChhaviKhandelwal/pen/VwMYLVa

You can also be sure to follow us on [Instagram](https://www.instagram.com/codecastapp/), [Twitter](https://twitter.com/CodeCastApp), [Facebook](https://www.facebook.com/codecastapp), and [LinkedIn](https://www.linkedin.com/company/code-cast/) to see our daily advent releases there!
Multiple Output files with cssbundling-rails and Tailwind
Tags: ruby, rails, css, tailwindcss
Published: 2021-12-14 22:20:19

The default `build:css` for [cssbundling-rails](https://github.com/rails/cssbundling-rails) using Tailwind will take `app/stylesheets/application.tailwind.css` and output it to `app/assets/builds/application.css` ready for inclusion using the asset pipeline.

However, often you’ll want multiple entry points or output files - say, one for your application and one for your public site that’s a bit smaller. 

You could change the command in `package.json` to use `&&` and join two calls to the Tailwind CLI, but this approach has a couple of issues - `cssbundling-rails` is expecting to be able to append `--watch` to commands that are run in development so that rebuilds happen as you change files, AND use the command to prep your css once before running a deploy or integration test. 

Enter [npm-run-all](https://www.npmjs.com/package/npm-run-all), which will let you run commands with a glob-style syntax, in parallel, and passing through arguments. Just change the "scripts" section of your `package.json` to include tasks like this:

```json
"scripts": {
  "build:css": "npm-run-all --parallel \"build:css:* {@}\" --",
  "build:css:application": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css",
  "build:css:static": "tailwindcss -i ./app/assets/stylesheets/static-pages.tailwind.css -o ./app/assets/builds/static-pages.css"
}
```

Now when you run `yarn build:css` you’ll end up with two output files in your build (in this case, "application.css" and "static-pages.css") and when you want to run it in watch mode, `yarn build:css --watch` will pass that argument down to each individual build and run them in parallel.

It’s the `build:css` command that's doing the magic:

```
"npm-run-all --parallel \"build:css:* {@}\" --"
```

Essentially this is saying "run anything matching `build:css:*`, in parallel, and passing all arguments through from the original invocation" (that's the `{@}` syntax from `npm-run-all`)

Enjoy!
Negative lookbehind alternative in JavaScript
Tags: javascript, webdev, typescript, regex
Published: 2021-12-14 19:28:36

## Task description
One of my recent assignment was to create a function that traverses through a parsed HTML text, finds placeholders that meet a certain condition and wraps them with specific HTML tags. The condition was if a placeholder is wrapped around mark + span tag, ignore it, otherwise wrap it with those tags.

Example:
```html
My name is {{ first_name }}. I am <b>{{ age }}</b> years old and I love <mark><span>{{ interest }}</span></mark>.
```

The function should find 2 occurrences and replace them. The last placeholder should be ignored. 

```html
My name is <mark><span>{{ first_name }}</span></mark>. I am <b><mark><span>{{ age }}</span></mark></b> years old and I love <mark><span>{{ interest }}</span></mark>.
```

## First solution
In my first solution I used a negative lookbehind assertion (?<!) that basically tries to find expression A where expression B does not precede. In simpler words - match every placeholder that does not start with a span tag. 

```javascript
markPlaceholders(html: string): string {
  return html.replace(
    /w*(?<!<span>){{([a-z0-9_]*)}}/g,
    '<mark><span>{{$1}}</span></mark>'
  );
}
```
Easy.

## The problem
Unfortunately, when I tried to open the application on Safari, it crashed with a following message:
```SyntaxError: Invalid regular expression: invalid group specifier name```
Turns out that Safari does not support negative lookbehind assertions. What a shame. 

## Final solution
The workaround for this problem was to pass a function as the second parameter in the replace method. This so called "replacer" will check if the placeholder starts with the mark and span tag. If it does not, we create a new element and replace it with the matched placeholder. Otherwise, we return what we have, because it already contains those tags. The function will be invoked after the match has been performed.
 
```javascript
markPlaceholders(html: string): string {
  return html.replace(/{{[a-z0-9_]*}}/g, (match, _, idx) => {
    const hasTagsBefore =
      html.substring(idx - '<mark><span>'.length, idx) === '<mark><span>';

    if (!hasTagsBefore) {
      return `<mark><span>${match}</span></mark>`;
    }

    return match;
  });
}
```
I hope this example will help you if you are struggling with the same problem. Feel free to ask questions.