teleren/devto huggingface dataset:
100 días de código: 23, diseño final de mi portafolio
Tags: spanish, 100daysofcode, webdev
Published: 2021-11-26 00:40:01

¡Hey hey hey!

Bienvenidos a este nuevo día en el cual vengo a presentar el diseño que tras varios cambios por fin llego a su etapa final. 
Cuando comencé en la idea de hacer mi portafolio comencé a ver diseños y me di cuenta que no comprendía mas allá de si el diseño estaba bonito o no. Así que despues de inspirarme un par de días decidí hacer mi propio diseño para aprender mas sobre esta profesión. 

Despues de aprender las nociones sobre el diseño web cree un sitio web pero al pasar el tiempo este no me terminaba de convencer asi que decidí crear otro sitio web.

Y es asi como llegamos al ahora. Le dedique un buen par de horas al diseño pero creo que he llegado a algo que si bien se puede mejorar me gusta y creo que a la larga puede ser algo mejor. 
El diseño es el siguiente.
![diseño de portafolio web movil](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk33n0joqu0ikse3xm9h.png)

![diseño de portafolio web pc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6r9rndgwwyz92or26fr.png)

Por supuesto aun no contiene la información ni las imágenes pero ya es un avance importante.

Si tienen alguna recomendación siempre serán bienvenidas.

Ahora si volvemos con la sección regular.

### Ayer:
- Termine el diseño de la pagina del mes de mi relación.
- Termine la codificación de la pagina del mes de mi relación.
- Practique 30 minutos de Touch Typing.
- Volví a re diseñar una sección de mi pagina personal. Debo dejar de hacer cambios en el diseño o no me dejara tiempo para la codificación.
- Elegí los iconos que usare para la sección de menú de navegación de mi pagina personal.
- Aprendí sobre el manejo de las ramas en git y sobre los comandos `merge`, `rebase` y `reset`.

### Hoy:
- Termine con el diseño final de mi portafolio.
- Codifique la maquetacion de mi sitio pero aun no he agregado estilos.
- Practique mi manejo de ramas en git.
- Resolví algunos ejercicios en HackerRank.

Hoy no avance en la guia de The odin project pero senti mi día muy productivo.

Espero que tengan mucho éxito con sus proyectos y que les vaya super bien!.
Adiós mundo!
Serendipity Theme, adapted for retina displays.
Tags: vscode, ux, uiweekly, webdev
Published: 2021-11-26 00:30:43

## Serendipity.

### [Serendipity Theme](https://serendipitytheme.com)

![Preview](https://wvsc.dev/images/ogtwitter.png)

## Installation

1. Open **Extensions** sidebar panel in VS Code. `View → Extensions`
2. Search for **`serendipity`**
3. Click **Install** to install it.
4. Code > Preferences > Color Theme >
 **serendipity-light - serendipity-dark - serendipity-dark-italic - serendipity-light-italic**
5. Optional: Use the recommended settings below for best experience

## Recommended Settings

```js
{
  // This is are my personal prefferences.
  "editor.fontFamily": "'IBM Plex Mono', monospace",
  "editor.fontSize": 18,
  "editor.lineHeight": 38,
  "editor.letterSpacing": 0.5,
  "files.trimTrailingWhitespace": true,
  "editor.fontWeight": "normal",
  "prettier.eslintIntegration": true,
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "phase",
  "editor.renderWhitespace": "all",
}
```

## Colours
I have worked towards a color palette that would feel fine on the eyes when using retina screens, this color combination made it possible, thanks to the pastel colors used on dark mode instead of "neonish".

The theme is available for editors, shells, UI's and more coming up.

## Available Options
- Dark
- Dark Italics
- Dark Low Contrast
- Light
- Light Italics
- Light Low Contrast

## Jetbrains
- Dark ( Only Text )
- https://github.com/WickedLabs/serendipity

### Slack:
- Dark
- Light

### Linear App:
- Light
- Dark

### iTerm:
- Light
- Dark

### Firefox:
- Light
- Dark


### Dark Version
![Preview](https://github.com/michael-andreuzza/wvsc-serendipity/blob/master/darkColors.png?raw=true)
### Dark Version
HTML
![Preview](https://github.com/michael-andreuzza/wvsc-serendipity/blob/master/darkHtml.png?raw=true)

CSS
![Preview](https://raw.githubusercontent.com/michael-andreuzza/wvsc-serendipity/master/darkCss.png)

JS
![Preview](https://github.com/michael-andreuzza/wvsc-serendipity/blob/master/darkJs.png?raw=true)



### Light Version
![Preview](https://github.com/michael-andreuzza/wvsc-serendipity/blob/master/lightColors.png?raw=true)

### Light Version
HTML
![Preview](https://github.com/michael-andreuzza/wvsc-serendipity/blob/master/lightHtml.png?raw=true)

CSS
![Preview](https://github.com/michael-andreuzza/wvsc-serendipity/blob/master/lightCss.png?raw=true)

JS
![Preview](https://github.com/michael-andreuzza/wvsc-serendipity/blob/master/lightJs.png?raw=true)

## Feedback

Anything you wonder just contact me, @Mike_Andreuzza on twitter.
How can I eliminate technical debt?
Tags: technicaldebt
Published: 2021-11-26 11:00:42

---
title: How can I eliminate technical debt?
published: true
date: 2021-11-26 00:00:00 UTC
tags: technicaldebt
canonical_url: https://jhall.io/archive/2021/11/26/how-can-i-eliminate-technical-debt/
---

 **Ends today!** Save 80% on my popular video course, [Ship Better Code Faster](https://jhall.io/sbcf)!

* * *

Someone recently asked me how they could eliminate technical debt. My answer was “You can’t.” But of course that’s over-simplified. [Yesterday I detailed three sources of technical debt](https://jhall.io/archive/2021/11/25/types-of-technical-debt/). With these in mind, it should be easy to see how we cannot (and perhaps should not) eliminiate technical debt.

1. Intentional technical debt

2. Outdated technology

3. Ignorant technical debt

So if we can’t eliminate technical debt, what should we do? Manage it.

* * *

One way to help manage accidental technical debt is through the concept of evolutionary design, which allows us to “kind of pretend that we made the right design decisions all along,” which is something J. B. Rainsberger and I discussed very recently in our two-part interview on the Tiny DevOps podcast: [Part 1](https://jhall.io/archive/2021/11/16/mastering-evolutionary-design/) & [Part 2](https://jhall.io/archive/2021/11/23/mastering-evolutionary-design-part-2/).

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
✨ Auto-fixable import sorting rules for ESLint
Tags: autofixableimportsor
Published: 2023-04-22 19:29:02

---
title: ✨ Auto-fixable import sorting rules for ESLint
published: true
date: 2021-11-26 00:00:00 UTC
tags: autofixableimportsor
canonical_url: https://bstefanski.com/auto-fixable-import-sorting-rules-eslint
---

The pretty much standard way of sorting imports in JavaScript:

- 3rd party imports first
- then local default exports
- and then local exports

And here's the snippet that sorts them in this exact order and satisfies my needs completely!

```

$ npm i --save-dev eslint-plugin-import

# or 

$ yarn add -D eslint-plugin-import



// .eslintrc.js 

const fs = require('fs')

const ignoredSortingDirectories = ['.git', '.next', '.vscode', 'node\_modules']

module.exports = {

/// ... some other configurations 

 rules: {

// ... your rules 

'sort-imports': ['error', { ignoreCase: true, ignoreDeclarationSort: true }],

'import/order': [

1,

{

 groups: ['external', 'builtin', 'internal', 'sibling', 'parent', 'index'],

 pathGroups: [

...getDirectoriesToSort().map((singleDir) => ({ pattern: `${singleDir}/\*\*`, group: 'internal' })),

{ pattern: 'env', group: 'internal' },

{ pattern: 'theme', group: 'internal' },

{ pattern: 'public/\*\*', group: 'internal', position: 'after' },

],

 pathGroupsExcludedImportTypes: ['internal'],

 alphabetize: {

 order: 'asc',

 caseInsensitive: true,

},

},

],

// ... your rules 

},

}

function getDirectoriesToSort() {

return getDirectories(process.cwd()).filter((f) => !ignoredSortingDirectories.includes(f))

}

function getDirectories(path) {

return fs.readdirSync(path).filter(function (file) {

return fs.statSync(path + '/' + file).isDirectory()

})

}

```
First time using Conan to release software
Tags: opensource
Published: 2021-11-25 23:30:51

# Introduction
This week, I worked on my Static-Site Generator - [Potato Generator](https://github.com/kiennguyenchi/potato-generator) to add package registry. My SSG is in C++ language. I chose Conan, GitLab, to publish my package officially.

# Installation Process
* Firstly, I have to ensure that I have [CMake](https://cmake.org/) and [Conan](https://conan.io/) installed on my machine.
* Secondly, I have to make sure that I create [GitLab](https://gitlab.com/) account, link it to my GitHub's project, create *personal access token* to access later.

# Set-up Process
* I build a package with name and version.
```
conan new potato-generator/1.0.0 -t
```
* I build package with user and channel.
```
conan create . potato-generator/beta
```
* I add remote to my project (get project_id from GitLab)
```
conan remote add gitlab https://gitlab.com/api/v4/projects/<project_id>/packages/conan
```
* I add remote for my instance.
```
conan remote add gitlab https://gitlab.com/api/v4/packages/conan
```
* I need to authenticate with my GitLab account. I use username and *personal access token* from installation step.
```
conan user <gitlab_username or deploy_token_username> -r gitlab -p <personal_access_token or deploy_token>
```
* I publish the package.
```
conan upload potato-generator/1.0.0@potato-generator/beta --all
```
* Finally, I create a git tag for my first version 1.0.0.
```
git tag -a v1.0.0 -m "Version 1.0.0"
```

# Install my package instructions
To install my package from Conan, please carefully follow this instructions:
* Install [Conan](https://conan.io/) and [CMake](https://cmake.org/)
* Install package by Conan command
```
conan install potato-generator --remote=gitlab
```
* Add remote
```
conan remote add gitlab https://gitlab.com/api/v4/projects/31616511/packages/conan
```
Otherwise, please take a look at my [Release](https://gitlab.com/kiennguyenchi/potato-generator/-/packages/3923658)
Integrating MacOS with multiple Github or Bitbucket accounts 
Tags: github, git, linux, productivity
Published: 2021-11-25 22:27:25

Assume you want to use your personal Github account on your work laptop, and wanted to commit to your personal account without breaking your work repository configuration. In this tutorial I will show you how to easily manage multiple Github/Bitbucket accounts on MacOS without conflict each other. 


To achieve our goal we need to tell Github/Bitbucket Git's engine that we have multiple account in one computer. 

So bare with me to achieve our goal. 

## Create a new SSH key

- Go to SSH directory `$ cd ~/.ssh`
- Create a new SSH key `ssh-keygen -t rsa -b 4096 -C <your_email@example.com?` More on [Github](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent#generating-a-new-ssh-key)

## Register created SSH key to Github
- This is very strait forward, just follow the [Adding a new SSH key to your GitHub account](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account)

## Create SSH Config 
To connection to multiple remote server through the SSH we can use the SSH `config` file. I'm not going to explain what is `config` file in this post, but if you like to learn more about that here "[Using the SSH Config File](https://linuxize.com/post/using-the-ssh-config-file/)" is a cool article that I found for you. Ok less talk do more!

- Create a config file `$ cd ~/.ssh && touch config`
- Add your SSH configuration to `config`. 

Here is the syntax that you need to understand. 

```bash

# Host is the remote server

Host hostname1
    SSH_OPTION value
    SSH_OPTION value

```

In our case we want to use multiple Github/Bitbucket accounts, so it will be 

```bash 

# Your Github account
Host github.com-<jeffshomali>
   User git
   HostName github.com
   IdentityFile ~/.ssh/<jeff_personal>  
   IdentitiesOnly yes
```
Just replace the `<>` with your information.

## Clone your repository. 
Go to your Github account and clone of the repository.
- Open the repo in your code editor and make sure the Origin `fetch` and `push` urls are set with 
- `$ git remote -v` if not set that up with  `$ git remote add origin https://github.com/user/repo.git`

## Add your Github username and email to every repo locally.
To prevent the conflict between your personal repo and your work repos you need to add your information to each repo by add the username and email to local repo. 

- Open your Git config file with `$ code .git/config` or `$ git config --local -e`. 
- Add your username and email 

```bash
[user]
    name = your_github_username
    email = your_github_email@email.com
```

- Confirm your information has been saved and present in config file by `$ git config --local -l` and you should see your Github/Bitbucket `user.name` and `user.email`.  



Done!
bad output from bytes to block in c
Tags: cpp, programming, c
Published: 2021-11-25 22:17:42

Hi I can't fix the code to have the output as in example 1. My output is in example 2. Can anyone advise me what I'm doing wrong or where am I wrong? Thank you for every answer
I have no idea what could be wrong I tried a lot of possibilities and still nothing.


```
int length = 4+1, cols = 3, offset = 2;
bool bytes1[4+1][8] = {
    {0,1,0,0,0,0,0,1},
    {0,1,1,0,1,0,0,0},
    {0,1,1,0,1,1,1,1},
    {0,1,1,0,1,0,1,0},
    {0,0,0,0,0,0,0,0}
};
bool blocks1[offset*8][cols];
bytes_to_blocks(cols, offset, blocks1, length, bytes1);
for(int j = 0; j < offset*8; j++){
    for(int i = 0; i < cols; i++){
        printf("%d ", (blocks1[j][i] == true) ? 1 : 0);
    }
    printf("\n");
    if(j % 8 == 7){
        printf("\n");
    }
}
// prints:
// 0 0 0 
// 1 1 1 
// 0 1 1 
// 0 0 0 
// 0 1 1 
// 0 0 1 
// 0 0 1 
// 1 0 1 
// 
// 0 0 0 
// 1 0 0 
// 1 0 0 
// 0 0 0 
// 1 0 0 
// 0 0 0 
// 1 0 0 
// 0 0 0
```
My output is here
```
0 0 0
0 1 1
1 0 1
1 0 0
0 0 1
1 0 0
1 0 0
1 1 0

0 0 0
1 0 0
1 0 240
0 0 220
1 0 0
0 0 114
1 0 49
0 0 0


```
My code is here
```
void bytes_to_blocks(const int cols, const int offset, bool blocks[offset*8][cols], const int rows, bool bytes[rows][8]) {
    int col = 0;
    int paragraph = 0;
    for(int row = 0; row < rows; row++) {
        col++;
        if(col > cols) {
            col = 0;
            paragraph += 8;
        }
        for (int bit_index = 0; bit_index < 8; bit_index++) {
            blocks[paragraph + bit_index][col] = bytes[row][bit_index];
        }
    }
 
}
```
Thank you for every advice
Releasing ssg-factory npm package
Tags: npm, javascript
Published: 2021-11-25 21:59:22

Wow, can't believe 11 weeks have passed by since I started writing the project. By now, its basic functionalities are completed, it's time to publish it to `npm`. 

## Fixing the code base first 

I started by adding some e2e tests for my program. I fixed the some of the `console.log` in the files as operations were mostly asynchronous, it was hard to print the files converted in order.

I updated the name of the program and fixed wherever it printed the name in `package.json`, `index.js` and the e2e tests. It is now called `ssg-factory`

I then audited `package.json` to ensure correct dependencies, name, version and `README`, `CONTRIBUTING` docs

## It's time to publish 

I used the [guide](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry) provided by `npm` to publish my package.

After committing final changes, I added a tag `v1.0.6` and pushed it along with the commit `git push --follow-tags`. Then, I released it using GitHub. 

I also used [npm-cli-login](https://www.npmjs.com/package/npm-cli-login) to add my credentials to `npm` first. 

Lastly, I simply entered `npm publish` to publish it the npm registry 

![Npm publish success msg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krdb9xa6fqt09mt5ixxy.png)

Voilà, it's finally up!
TIL about specific Array combination types
Tags: typescript, vue, javascript
Published: 2021-11-25 21:43:22

Okay, so its not actually called "specific Array combination types", but that was the best description I had for it, before I looked it up.
Its actually called "Tuple Types" and the documentation can be found here: https://www.tutorialsteacher.com/typescript/typescript-tuple

I'll come back to why this blew my mind today, but first, lets scroll back a bit, to some of my first steps into JS/TS programming. I started my programming career in Java, and one of the things that annoyed the hell out of me, was the fact that I could only have 1 object returned from a function (This was before the Pair class was introduced).

But in JS we can easily just return an array with 2 values:
```ts
const someFunction = () => {
    return ['Mathias', 28];
}
```
And combined with some destructuring on the recieving, it was all nice and easy:
```ts
const [myName, myAge] = someFunction();
```
## Adding types
Until today I never had to add types onto a scenario like this, usually when I work with arrays, I either just do a basic `string[]`, or when its required in complex object scenarios: `Array<{name: string, age: number}>`.
But with the tuples we can actually avoid naming them and just say the return type for our function is `[string, number]`:
```ts
const someFunction = (): [string, number] => {
    return ['Mathias', 28];
}
```

## Vue relation
I came across this when I working with Vue2 combined with TS, and was trying to create a v-for loop over a Map, but Vue2 did not support this, so I had to come up with a different approach that supported the same end goal.

So this is where the new tuples came in handy! Given an example with some data in a Map:
```ts
const map = new Map<string, object>();
map.set('key1', {data: 'lots of data'});
map.set('key2', {data: 'more data'});
``` 
I could then destructure it into an array like so:
```ts
const asArray = ...map.entries();
// Yielding:
[
    ['key1', {data: 'lots of data'}],
    ['key2', {data: 'more data'}],
]
```
And in order to Type this we now have:
```ts
const asArray: Array<[string, object]> = ...map.entries();
```

Thank you for reading this far, hope you gained something from this post.
Android Studio/Firebase(1)
Tags: programming, android, firebase
Published: 2021-11-25 21:30:57

Structure
root 
##  -- Comments
###   -- movidID
####      -- commentID
##  -- Playlist
###   -- userID
####    -- playlistID


```
//rootNode
FirebaseDatabase rootNode = FirebaseDatabase.getInstance();
//reference
DatabaseReference reference;
```

###// When adding one movie to the playlist
```
reference = rootNode.getReference("Playlist").child(userID).push();

Playlist playlist = new Playlist(id, userID, img_path, playRef.getKey());

reference .setValue(playlist).addOnSuccessListener(new OnSuccessListener<Void>() {
                @Override
                public void onSuccess(Void unused) {
                    // work of button for adding and removing
                    btn_playlist.setVisibility(View.INVISIBLE);
                    btn_playlist.setEnabled(false);
                    btn_remove.setVisibility(View.VISIBLE);
                    btn_remove.setEnabled(true);
                }
            })
```

###// When removing one movie from the playlist

```
DatabaseReference playcheckref = rootNode.getReference().child("Playlist").child(userID);

playcheckref.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot snapshot) {
                for(DataSnapshot dataSnapshot : snapshot.getChildren()) {
 
// if there is the clicked movie in the list                   if(Objects.requireNonNull(dataSnapshot.getValue(Playlist.class)).getmID().equals(id)){
                        btn_playlist.setVisibility(View.INVISIBLE);
                        btn_playlist.setEnabled(false);
                        btn_remove.setVisibility(View.VISIBLE);
                        btn_remove.setEnabled(true);

// grab the playlist movie id
                        String vID = Objects.requireNonNull(dataSnapshot.getValue(Playlist.class)).getvID();
                        btn_remove.setOnClickListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                btn_playlist.setVisibility(View.VISIBLE);
                                btn_playlist.setEnabled(true);
                                btn_remove.setVisibility(View.INVISIBLE);
                                btn_remove.setEnabled(false);

                                DatabaseReference removeRef = rootNode.getReference("Playlist").child(userID).child(vID);
                                removeRef.setValue(null);

                                Toast.makeText(MovieDetail.this, "Successfully deleted" + Objects.requireNonNull(dataSnapshot.getValue(Playlist.class)).getvID(), Toast.LENGTH_SHORT).show();
                            }
                        });

                    } else{
                        btn_playlist.setOnClickListener(addMovieToList);
                    }
                }
            }
```
Huge milestone for my latest project - BotMeNot's first test results! 
Published: 2021-11-25 21:27:52

Hello everyone! 

I would like to share an important milestone!

My latest project, BotMeNot, has started to significantly accelerate in terms of development! 

Last week we’ve ran its very first bot protection test on its own website - https://botmenot.com/ 

This week we have tested a couple of more additional websites’ bot protection and we’re excited to share the results with you!

Also, we’ve categorized these websites according to the industry they’re in - so it’s interesting to see which industries prioritize bot protection more than others.

If you’re interested in scoring and how the tests work check out - https://botmenot.com/how-bots-work/ 

Here are the results! Do let me know if you have any questions!

PS. The design is tentative and prone to change - still considering the expanded and compact versions.

![idealo](https://i.imgur.com/7XYhbO5.png)
![tripadvisor](https://i.imgur.com/Ez8Cfgq.png)
![cdiscount](https://i.imgur.com/qV86CIf.png)
![bax-shop](https://i.imgur.com/bmmeOAN.png)
![kmart](https://i.imgur.com/lpMjQvk.png)
![yelp](https://i.imgur.com/fibaxm1.png)
Understand React Redux from scrach on one page 
Tags: react, redux, javascript, reactnative
Published: 2021-11-25 21:21:16

Redux a popular React and React Native state management library.
Here is all component of redux in one page
```
npx create-react-app reactapp
```
cd reactapp
```
yarn add react-redux
```
Add this in index.js
```javascript
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { createStore } from "redux";
import allReducer from "./reducers";

//ACTION  -> INCREMENT (describes what you want to do!) it's a simple function

const increment = () => {
	return {
		type: "INCREMENT",
	};
};

const decrement = () => {
	return {
		type: "DECREMENT",
	};
};

//REDUCER -> (action transfer from one state to another state, it gonna modify our store)
//You can have many reducers (Auth reducer, Movielist reducer etc ...)
const counter = (state = 0, action) => {
	switch (action.type) {
		case "INCREMENT":
			return state + 1;
		case "DECREMENT":
			return state - 1;
	}
};

//STORE  -> Globalized STATE
let store = createStore(counter);

//Display it in the console.
store.subscribe(() => console.log(store.getState()));

//DISPATCH (DISPATTCH this action to the reducer)
store.dispatch(increment());
store.dispatch(decrement());
store.dispatch(increment());

ReactDOM.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
	document.getElementById("root")
);

reportWebVitals();

```
Testing it: check the console in inspect to see how it increments and decrements. 

<b>Github Repo</b> For more advanced way of doing it: 
<link>https://github.com/Byusa/learn-redux</link>

This repo shows the use of redux it could be one a proper way with the store and multiple reducers their own folders.

Reference: 
https://www.youtube.com/watch?v=CVpUuw9XSjY