teleren/devto huggingface dataset:
Using stories for technical communication
Tags: communication, b
Published: 2021-07-27 15:27:02

---
title: Using stories for technical communication
published: true
date: 2021-07-06 00:00:00 UTC
tags: communication,b
canonical_url: https://jhall.io/archive/2021/07/06/using-stories-for-technical-communication/
---

In today’s episode of Tiny DevOps, I replay the story-telling workshop I did with Miriam Tocino a few weeks ago. Listen as we create a story together of the characters Zerus and Ona, as they explore how a voice message is sent through the cloud, to a friend.

We use this this to demonstrate the process of using illustrations and creative imagery to explain complex topics to children and other non-technical people.

[Listen](https://share.transistor.fm/s/86050d4b) or [watch](https://www.youtube.com/watch?v=oqCt1lkgjF0).

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
VSCode Theme Customization: How do I Change Editor Inline Background Key:Value?
Tags: vscode, theme, editor, customization
Published: 2021-07-05 23:38:52

I need to change the inline background (or foreground, I'm not sure) when the cursor is in front (left hand side) of the semicolon. The language in the screenshot is php (if that's matters for this case). Image 1.

![Line Highlighting, Step In Appareance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66xqx9amh3vhzfp19te3.png)

As you can see, in the following image 2, that highlighting is inactive when the cursor is in the right hand side of the semicolon. 

![Line Highlighting, Step Out Appareance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo3vjw2ebbdf7xu9wndd.png)

This is the key for the back-inline background (if that makes sense; image 3). Which is the background highlighting visible at both images (1 and 2).

![Inline value, for the background when cursor is not in front of the comma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zknh7hk26zkg61qqwyt7.png)

I'll add this line of code as written text in case it is of use for search engines: 

`"editor.lineHighlightBackground": "#20251a",`
Heap sort algorithm
Tags: algorithms, python, codenewbie, computerscience
Published: 2021-07-05 23:16:54

Hi, today we'll discuss the Heapsort algorithm, for better understanding this algorithm, you need to be familiar with Heap data structure if you're not, check this [the complete guide to heap data structure](https://dev.to/ayabouchiha/your-complete-guide-to-heap-data-structure-20nl)

## Definition of Heapsort
Heapsort: is one of the most efficient sorting algorithms which is based on [**heap**](https://dev.to/ayabouchiha/your-complete-guide-to-heap-data-structure-20nl) data structure

## Space and Time complexity of Heapsort

The space complexity of the heap sort algorithm is **O(1)**

| Best case  	| Average case 	| Worst case 	|
|------------	|--------------	|------------	|
| O(n log n) 	| O(n log n)   	| O(n log n) 	|

## Heap sort approach

1. Covert the giving array to a max-heap
2. While the size of the heap is greater than 1: 
    1. After converting it, The root is the maximum value of the max-heap. 
    2. Replace the root with the last item of the max-heap.
    3. Decrease the size of the heap.
    4. Bubble down (heapify) the root.


## Implementation of Heap sort algorithm in python
+ This code is contributed by [Mohit Kumra](https://www.geeksforgeeks.org/heap-sort/)

### heapify function
<br />

```python
def heapify(arr, n, i):
	largest = i # Initialize largest as root
	l = 2 * i + 1	 # left = 2*i + 1
	r = 2 * i + 2	 # right = 2*i + 2

	# See if left child of root exists and is
	# greater than root
	if l < n and arr[largest] < arr[l]:
		largest = l

	# See if right child of root exists and is
	# greater than root
	if r < n and arr[largest] < arr[r]:
		largest = r

	# Change root, if needed
	if largest != i:
		arr[i], arr[largest] = arr[largest], arr[i] # swap

		# Heapify the root.
		heapify(arr, n, largest)
```

### Heap sort function
<br />

```python
def heapSort(arr):
	n = len(arr)

	# Build a maxheap.
	for i in range(n//2 - 1, -1, -1):
		heapify(arr, n, i)

	# One by one extract elements
	for i in range(n-1, 0, -1):
		arr[i], arr[0] = arr[0], arr[i] # swap
		heapify(arr, i, 0)
```

## References and useful resources

+ [https://www.geeksforgeeks.org/heap-sort/](https://www.geeksforgeeks.org/heap-sort/)

+ [https://www.youtube.com/watch?v=Q_eia3jC9Ts](https://www.youtube.com/watch?v=Q_eia3jC9Ts)

+ [https://www.youtube.com/watch?v=2DmK_H7IdTo](https://www.youtube.com/watch?v=2DmK_H7IdTo)
LeetCode 80. Remove Duplicates from Sorted Array II
Published: 2021-07-05 23:13:10

I used 2 pointers just the same as Problem 26. These problems are quite similar, the only difference is for 80, one number can appear at most 2 times.

The algorithm is the pointer i is slow, to mark the invalid elements that need to be replaced; j is faster to traverse the list.

Since every number can appear twice, so i and j will start from the third number. If the nums[j] is not the same as its previous two numbers at the same time, then it is a valid number. Then i and j will move to the next. Else i won't move and wait for j to find a valid number to replace i. The final i is the value that need to be returned.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyojo98siu4jyk3relkp.png)
The Dev Academy for Developers🎉🔥🔥
Published: 2021-07-05 22:15:02

My YouTube channel achieved 7,500 views on July 05, 2021! Track and celebrate your own success today for free with @vidIQ https://t.co/NIhWu2xQ53 
This isnt an achievement for other devs with successful channels and 7 figure salaries but it is for me🎉
The channel is still small but there's definitely something for every type of developer no matter the level of experience or type of developer.
Anyway if you would like to check out the channel, here's the link, kindly Subscribe ❤️❤️ and comment on things I can improve on💪💪
The link👇👇
https://youtube.com/c/FortuneDevAcademy
Battle Station For 2021
Tags: webdev, programming, discuss
Published: 2021-07-05 20:53:26

---
title: Battle Station For 2021
published: true
description: German's Setup for 2021
tags: webdev,programming,discuss
canonical_url: https://germangamboa.com/posts/2021-set-up
---


Even though we are more than halfway over with the year I wanted to write about my set up, tech stach, whatever you want to call it. 
With the current prices of computer components I am sure most of my current setup will remain the same for a while. 

## Hardware 

I am not going to include the macbooks provided by employers since those always tend to be rather boring. 

My current setup here is as follows: 

- M1 Macbook as daily driver. This one is really just a slack and email machine though I find myself doing most of my coding work on it via vs code remote. 

- Two Dell Optiplex 7050 MFF. These run a nextcloud instance, pihole, openvpn and other random node services via docker swarm. One of them runs a dedicated mysql database (I can rant on forever as to why deploying a database via docker for anything other than dev is a horrible idea).

- Workstation/Gaming Machine: 3950x, 64gb Ram with a 3080. This one runs all my work stuff. I rarely work directly on it though. I mainly connect via vs code remote from any of the macbooks I use. 

- One big ass monitor: 49in Samsung Odyssey 


## Databases 
- Mysql: This one is my go to for any project I have control over. Its simple. 

- Redis: Go to for caching, driving worker queues and fast access data storage (sessions, metadata)

## Programming languages 

![PHP Forver](https://germangamboa.com/images/php_forever.jpg)


- PHP: The meme above explains my love for PHP. Even though I don't get to work with it daily. 

- Node: This one is growing on me but deploying projects with it is not as smooth as PHP.

- Apex: Salesforce still inflicts daily pain in my life.

## Software && Services  

- VS Code: I cannot live without vs code remote at this point.  

- Datagrip: This is the best IDE for databases IMO. 

- Laravel Forge: Fastest way to push out laravel projects. 

- Docker (both swarm and k8s): I prefer to use docker compose and swarm when working with smaller projects. K8s are just configuration hell that are not worth it IMO unless you are soley dedicated to that. 

- Digital Ocean: I basically host all my stuff here. Its cheap and it doens't induce a headache like the AWS control panel. 

- AWS: Basically every employer will use this. I mainly only use it for S3 to backup stuff and because digital ocean lacks a good offering there. 

- Serverless: Well I guess this counts as using AWS. This is the only sane way to deploy small node services that I've found so far. 

In summary for everything that is not work stuff I will pick the simplest most boring things because I am lazy.
Project structure using meson.build and c++
Tags: cpp, tdd, programming
Published: 2021-07-05 21:16:33

### You are ready to start your new C++ project from scratch and you want to go with Test Driven Development approach. Where to start? How to structure your project? 

In this post series I will try to answer those questions using `meson.build` as a build system.

What we want to have on top level(root) of our project:

```
├── include
├── meson.build
├── src
├── subprojects
└── test
```

`include` directory will contain header files
`src` directory will contain source files
`subprojects` directory will contain third party projects that use `meson.build` as a build system
`test` directory will contain everything related to tests
`meson.build` file containing build description for meson build system

I usually group header files into sub directories inside include directory:
```
├── include
│   ├── bar
│   │   └── random.hpp
│   │   └── ...
│   ├── foo
│   │   └── dummy.hpp
│   │   └── ...
│   └── tar
│       └── generator.hpp
│       └── ...
├── meson.build
├── src
├── subprojects
└── test
```

Same goes for source files, if there is source file for specific header (if is not header only): 

```
├── include
├── meson.build
├── src
|   ├── meson.build
│   ├── bar
│   │   └── random.cpp
│   │   └── ...
│   ├── foo
│   │   └── dummy.cpp
│   │   └── ...
│   └── tar
│       └── generator.cpp
│       └── ...
├── subprojects
└── test
```

Lets take closer look at test directory. What we actually want is to support `Testing Pyramid`, so we will have something like this:

```
├── include
├── meson.build
├── src
├── subprojects
└── test
    ├── meson.build
    ├── unit_tests
    │   └── [List of all unit tests].cpp
    │   └── meson.build
    ├── integration_tests
    │   └── [List of all integration tests].cpp
    │   └── meson.build
    ├── component_tests
    │   └── [List of all component tests].cpp
    │   └── meson.build
    └── system_tests
        └── [List of all system tests].cpp
        └── meson.build
```

More info about `Testing Pyramid` can be found [here](https://martinfowler.com/bliki/TestPyramid.html) and [here](https://www.devopsgroup.com/insights/resources/diagrams/all/the-testing-pyramid/)

That is it for Part I. In the next Part we will see how to actually write `meson.build` description file to support presented structure.

***NOTE: This is my first post. 
If you find this content interesting, please let me know.***
Ciclo de vida de un Componente de clase en React
Tags: react, webdev, frontend
Published: 2021-07-05 20:58:35

El “Ciclo de Vida del componente” es un proceso en el cual los componetentes de React, se renderizan, actulizan o desmontan de la pantalla del navegador. 

Nos permite detrminar el estado de nuestro componente y ejecutar determidas lineas de código en momentos particulares del proceso para montar (mostrar en pantalla), actualizar o desmontar (quitar de pantalla) nuestro componente.

# Fases del ciclo de vida:

El ciclo de vida de un componente en React abarca tres 3 fases, el ***montado***, ***actualización*** y ***desmontado***. 

Dentro de cada fase existen métodos que las caracterizan, a continucación describire cada fase con sus respectivos  metodos.

## Montaje

Momento en el que se inserta el código del componente en el DOM y se muestra en la UI.

Los métodos más importantes que se ejecutan en esta fase son:

### `constructor()`

En este método se incializan los estados o valores.

### `render()`

En este método el componten se renderiza , se inserta el codigo en el DOM HTML.

### `componentDidMount()`

Indica que el componente ya es visible en pantalla.

## Actualización

En esta etapa los props y el estado del componente cambian.

Los métodos más importantes que se ejecutan en esta fase son:

### `render()`

El componente se vuelve a renderizar, esta vez con los datos que hayan cambiado. 

### `componentDidUpdate(prevProps, prevState)`

Recibe dos argumentos: Los props anteriormente y el estado que tenia anteriormente el componente lo actualiza. este método nos sirve para comparar entre la versión previa y la versión actual del componente.

## Desmontado

Esta fase existe un solo método que se ejecuta antes de que un componente se elimine (desmonte) de la UI de nuestra aplicación. 

### `componentWillUnmount()`

Este método nos permite limpiar memoria eliminando el componente de la pantalla.

Existe otros métodos de ciclo de vida pero son menos comunes.

Para saber más sobre los métodos del ciclo de vida puedes revisar la [documentación](https://es.reactjs.org/docs/react-component.html) de React.
Laravel Scout & Elasticsearch: Scout flush does not delete all records
Tags: laravel, mysql
Published: 2021-07-07 08:54:15

---
title: Laravel Scout & Elasticsearch: Scout flush does not delete all records
published: true
date: 2021-07-05 20:45:00 UTC
tags: laravel,mysql
canonical_url: https://adithya.dev/laravel-scout-elasticsearch/
---

If you've been using [Laravel Scout](https://laravel.com/docs/8.x/scout#introduction) for Elasticsearch, there's a chance you have faced this issue in development. This also probably applies to all other drivers - Meilisearch, Algolia.

Let's say you have a MySQL table of records that's synced to your search index. Every time you write or update a record, this calls the `searchable` and `unsearchable` method to keep it in sync, with SoftDeletes if you have that Trait included.

If you add a record manually to your index using the UI for Elasticsearch or any other driver, but not to the database - `Scout::flush()` will not remove the entry from the index.

It's important to understand why this happens. When you sync, Laravel Scout matches every record with the unique ID of the model (usually the default key - can be overriden with `getScoutKey`). Similarly, when you delete records, Scout fetches keys from your table and matches it with index to delete them, therefore it retains the record in your index which is not present in the table.
Github pages for your simple web projects
Tags: github, webdev, tutorial, hosting
Published: 2021-07-05 20:35:48

Before you buy a domain or subscribe to a hosting service, you should probably think about if you even need them. Why?, you ask. Then probably you should not skip this post.

**Too many steps**
What stops most of the people to start their first web project is the hesitation to go through all the steps starting from selecting a hosting service from various choices available, selecting the plan and then go through all the actual hosting steps, which generally never happens smoothly.

**Costly**
Then comes the money part which is the second most popular hurdle to have your own website. Buying a domain name, could sometimes be expensive especially for students who need to save money more than anybody. Also, most of the hosting services charge some amount to customers to keep running their business.

**Security and reliability**
For simple projects like personal website, this is important but many would agree that it is essential for business. We are always hearing news about data breaches on hosting services even on some popular services like hostinger etc.

For all the above problems, there is one useful feature of Github yet unknown to many.

**Github Pages** allows you to host your simple web project/website directly from your Github repository. It means you can make your website live for the world to see without bearing the hosting pain!

> Note: Github Pages works only for static websites.

By definition: A *static website* contains Web pages with fixed content. Each page is coded in HTML and displays the same information to every visitor. These are the most basic type of website and are the easiest to create. Unlike dynamic websites, they do not require any Web programming or database design. A static site can be built by simply creating a few HTML pages and publishing them to a Web server.

The major examples of static websites are as follows:
1. Documentation
2. Developing Cache
3. Website presentation
4. Communication cache-scrapping buffer
5. Forms
6. Newsletter Contents
7. Disaster page
8. Recovery from disaster status
9. Landing page/scales
10. Blogs

If you are wondering what could be achieved with a static website, go through below link, you will be amazed(found this while surfing web randomly).
https://www.covid19india.org/
Github repo: https://github.com/covid19india/covid19india-react

Although, there are a lot of similar/better alternatives to github pages like Netlify, but probably you may never need it.

For more information on github pages: https://pages.github.com/

Although there are a lot of articles already on github actions, I will also be posting an article on how to use it.
Godot You Want To Make A Videogame
Published: 2021-07-05 20:13:23

{% youtube 4o63V0AdrHk %}

What is Godot? It's an open source game engine for making high quality 2D or 3D videogames! At this Frederick Linux User Group (KeyLUG) presentation, I explained how Godot works, compared it with other popular engines, and showed off some of its features.

The recording from the talk is available on YouTube. [Check it out!](https://www.youtube.com/watch?v=4o63V0AdrHk)

<!--more-->

In this presentation, we looked into:

* Other popular open source game engines like [Pygame](https://www.pygame.org/news), [LÖVE](https://love2d.org/), and [Phaser](https://phaser.io/).
* The proprietary options of [Unity](https://unity.com/), [GameMaker Studio 2](https://www.yoyogames.com/gamemaker), [Unreal Engine](https://www.unrealengine.com/en-US/), and [CRYENGINE](https://www.cryengine.com/).
* why Godot is a great choice.
* how to use the editor.
* sample projects that showcase different types of games.

Questions? Feel free to mention me on Twitter at [@mblayman](https://twitter.com/mblayman) so I can try to respond to your question.
Creating an online budget form 1/5
Tags: budget, html
Published: 2021-07-05 19:58:47

---
title: Creating an online budget form 1/5
published: true
description: Starting post for a series on creating an online budget feeding into a CRM
tags: budget,html
series: online budget in javascript
//cover_image: https://direct_url_to_image.jpg
---
Keeping track of spending is an ongoing chore. It is also a good first step in getting on top of your finances and can be fun to see where all the money is going. To help in keeping track of spending I am building an online budget form that will let me enter in monthly spending and total the amounts so I have a good idea of what my normal expenses are.

The first step in creating this online budget form is to set up the basic html.

First part is a form containing the option to add a new item.

```
        <form>
          <label>Item</label>
          <input type="text">
          <label>Amount</label>
          <input type="number">
          <button>Add</button>
        </form>
        <h3>Items</h3>
```
The second part is to add a table that will contain the budget items.

```
        <table>
          <thead>
            <tr>
              <th>Item</th>
              <th>Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Car</td>
              <td>$1.00</td>
            </tr>
          </tbody>
          <tfooter>
            <tr>
              <td>Total</td>
              <td>$1.00</td>
            </tr>
          </tfooter>
        </table>
```
The table is split into 3 parts thead, tbody and tfooter. And the form currently looks like this:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uau70b9at45v7r71ybst.png)
Not much to look at obviously but in the coming posts I will show how to add dynamic functionality to the form and how to style the form so that it looks professional. Finally I will show how to use the form to feed into a submission to a CRM so that this could be used on the website of a financial counsellor.
'any' vs 'unknown' in TypeScript
Tags: webdev, typescript, javascript, programming
Published: 2021-07-05 19:50:00

When you start learning TypeScript, you will come across two types - "any" and "unknown"

**any** - The `any` type allows us to assign literally “any” particular value to that variable, simulating what we know as plain JavaScript.

**unknown** -  The `unknown` type is the type-safe counterpart of any. Anything is assignable to `unknown`, but `unknown` isn't assignable to anything but itself and any without a type assertion or a control flow based narrowing.

Let's understand with an example.

```typescript
let age: number;
let userAge: any;

userAge = 'This is some age';
userAge = 20;

age = userAge;
```
This code works! 🎉 
Type of `userAge` is `any` so it can be assigned any value - string, number etc.

```typescript
let age: number;
let userAge: unknown;

userAge = 'This is some age';
userAge = 20;

age = userAge;
```
The statement `age=userAge` gives an error. 
The type is unknown so what is the problem here?
To assign an unknown value to a value with a fixed type, we have to do some quick type check!

```typescript
let age: number;
let userAge: unknown;

userAge = 'This is some age';
userAge = 20;

if(typeof userAge === 'number') {
  age = userAge;
}
```
And now this works too! 🎉

### When to use what?
You shouldn't use either of them. But if you really have to then **`unknown` is a better choice** if you know what you want to do with that value eventually. 
I don't recommend using `any` - it takes away the actual essence of TypeScript!
¿Cómo funciona .npmignore?
Tags: npm, learning, tutorial, codenewbie
Published: 2021-07-05 19:39:25

Si alguna vez te pusiste a desarrollar un paquete para publicar en npm, seguro te pusiste a pensar 🤔: 

- ¿Cómo hago para ignorar X archivo para que no se publique en npm?
- ¿Con `.gitignore` es suficiente?
- ¿Cuándo debo usar un `.npmignore`?

Con `.gitignore` si puedes ignorar archivos, pero a veces no quieres ignorar X archivo y ahí es donde entra `.npmignore`.

**Por ejemplo:** desarrollaste un paquete y a su vez un sitio web para su documentación. Si deseas tener todo en un mismo proyecto, es ahí donde es necesario un `.npmignore` porque no vas a publicar todos los archivos de la web en npm, solo el paquete. 

Cuando npm no encuentra un `.npmignore` utiliza el `.gitignore` para ignorar los archivos.

¿Cómo se ve?
```sh
# Ejemplo de un .npmignore

img/
css/
index.html
```
Como puedes ver es exactamente igual a un `.gitignore`.

Puedes verificar si tu paquete ignorará los archivos que incluiste en `.npmignore` ejecutando `npm pack`, éste comando generará un [tarball](https://en.m.wikipedia.org/wiki/Tar_(computing)) localmente que sería exactamente lo mismo que hace npm al publicarlo.

Para saber más puedes leer los [documentos](https://docs.npmjs.com/cli/v7/using-npm/developers#keeping-files-out-of-your-package).

Espero que este post super corto te sea de ayuda. 😃

¡Saludos!