teleren/devto huggingface dataset:
Types of technical debt
Tags: technicaldebt
Published: 2021-11-25 12:35:31

---
title: Types of technical debt
published: true
date: 2021-11-25 00:00:00 UTC
tags: technicaldebt
canonical_url: https://jhall.io/archive/2021/11/25/types-of-technical-debt/
---

Through Black Friday, save 80% on my popular video course, [Ship Better Code Faster](https://jhall.io/sbcf)!

* * *

Where does technical debt come from?

Broadly speaking, there are three places technical debt comes from.

## Intentional vs Accidental Technical Debt

At the highest level, there are two types of technical debt: Intentional and accidental.

Intentional technical debt usually takes the form of “We know how to do this the right way, but we’re going to take a short cut to save time.”

This is often the correct business choice.

## Outdated technology vs ignorance

We can then break down “accidental” technical debt into two broad categories as well: Outdated technology and ignorance.

Technical debt arises from ignorance all the time in the form of “I didn’t know any better when I wrote that code.” More experience tends toward less of this form of technical debt, but there’s no way to eliminate this type of technical debt entirely, as we’re always solving new problems, so we’ll always do things in suboptimal ways, at least some of the time.

Outdated technology takes the form of “The decision made sense at the time, but now things have changed, and we need a rewrite.” Maybe you chose to write your code in Perl, or COBOL, or use a database that has been End-of-lifed. Whatever the case, the only “blame” to be placed in this case is in someone’s lack of fortune telling ability.

* * *

If you’re interested in this topic, you may enjoy [Episode #4 of the Tiny DevOps Podcast](https://jhall.io/archive/2021/06/01/tiny-devops-episode-4-working-with-technical-debt/), in which Peter Morlion and I discussed the topic in greater detail.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
4 - 100 DaysOfCode

Tags: 100daysofcode, design, ecommerce
Published: 2021-11-25 00:33:44

23NOV021

Today i was designing the modular descomposition diagram of a Ecommerce. i research in the web about these systems (huge systems) that handled a lot of things not only that we see in the online stores. for example [Ecommerce modules](https://www.artio.net/magento-e-commerce/estore-functions-and-modules) and [Some Ecommerce Platforms](https://www.outerboxdesign.com/web-design-articles/ecommerce_features)

I'm using draw.io for design the diagrams like this:
![Architecture 001](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehn3e6hitz93ho22360c.jpg)

Not finished yet. with this diagrams i hope gain the holistic view of the system.
How to fix wrong mapping of namespace in PhpStorm
Tags: phpstorm
Published: 2021-11-24 23:48:36

# Problems

PhpStorm mapped directories to wrong namespace.

I updated `composer.json`, but it won't work.

I ran `composer install|update|dump-autoload`, but it also won't work.

# How to solve

I could fix mapping of namespace and directories with this instruction.

[Configure PHP namespaces in a project | PhpStorm](https://www.jetbrains.com/help/phpstorm/keeping-namespaces-in-compliance-with-psr0-and-psr4.html#configuring-namespace-roots-manually)

# Environment

* PhpStorm 2021.1.4
Generating Universally Unique Identifiers with JavaScript
Tags: node, javascript, security
Published: 2021-11-24 23:19:24

For as long as I can remember the recommended way to generate unique universal Identifiers in node.js was to the [uuid](https://www.npmjs.com/package/uuid) module. These IDs are useful in all sorts of scenarios including for database keys, filenames, URLs, etc. Recently both node.js and the browser began offering nearly identical APIs that will generate 36-character [version 4 uuids](https://datatracker.ietf.org/doc/html/rfc4122#section-4.4) without any dependencies.

Available in Chrome since July 2021 and coming soon other browsers is `crypto.randomUUID()`. There's a global `crypto` object that's available on the global [self](https://developer.mozilla.org/en-US/docs/Web/API/Window/self) property. You can use that to generate a UUID like this:

```js
self.crypto.randomUUID();
```

The UUID it generates is a v4 UUID per the spec and ends up with a string that looks something like this:

```js
"0aa9d4f3-efdb-4a06-806c-5f8fa5f1767d"
```

![Browser Compatability for randomUUID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jcc657y1ltkkiu0gjdi.png)
 

You want to do the same thing in node? Instead of reaching for the [uuid](https://www.npmjs.com/package/uuid) package. As long as you're on version 14.17 or newer, you can do this:

```js
const { randomUUID } = require("crypto");
randomUUID(); // "0aa9d4f3-efdb-4a06-806c-5f8fa5f1767d"
```

It's cool see node and the browser adopting powerful APIs for crypto and improved randomness. I'll definitely be reaching for these in the near future!

---

You can read more in the [WebCrypto section in the MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) or the [crypto section in the node.js docs](https://nodejs.org/api/crypto.html#cryptorandomuuidoptions).
Angular Material Setup Guide - Installation and Quick Demo
Tags: angular, webdev
Published: 2021-11-24 23:12:27

In this video, I will show you how to install and use Angular Material UI in your Angular project.
We will create a new angular project in Angular version 13 and then we will install Angular Material UI library.

https://www.youtube.com/watch?v=0h3aDhkVsng

We will use the default themes that Angular Material offers and will see what setup is required in your Angular solution while using Angular Material.

We will make changes to the App.Module.Ts file and then use the Angular Material component in the template and component.

#AngularMaterial #Angular #UiLibrary
Custom properties in Elastic Search using C# and Serilog
Tags: csharp, elasticsearch, kibana
Published: 2021-11-24 23:05:12

Hi dears!

Today I show you how create a Custom properties for elasticsearch using c# and Serilog.

I Have serilog configuration for send logs to elasticsearch

```cs
public class SerilogConfiguration{

    public static void GetFileAndElasticSearchLogger(IConfigurationRoot configuration = null)
      {
          var environment = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");
          configuration ??= new ConfigurationBuilder()
              .AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
              .AddJsonFile(
                  $"appsettings.{Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT")}.json",
                  optional: true)
              .AddEnvironmentVariables()
              .Build();

          Log.Logger = new LoggerConfiguration()
              .Enrich.FromLogContext()
              .WriteTo.Debug()
              .WriteTo.Console(
                outputTemplate: "Level:{Level:u4} Tenant:{TenantId} Time:{Timestamp:HH:mm:ss} Message:{Message:lj}{NewLine}{Exception}"
              )
              .WriteTo.Elasticsearch(ConfigureElasticSink(configuration["App:Id"], configuration, environment))
              .Enrich.WithProperty("Environment", environment)
              .ReadFrom.Configuration(configuration)
              .CreateLogger();
      }

      private static ElasticsearchSinkOptions ConfigureElasticSink(string applicationName, IConfigurationRoot configuration, string environment)
      {
          var env = environment?.ToLower().Replace(".", "-");
          if (configuration["ElasticSearch:Password"] != null)
          {
              return new ElasticsearchSinkOptions(new Uri(configuration["ElasticSearch:Uri"]))
              {

                  ModifyConnectionSettings = x => x.BasicAuthentication(
                      configuration["ElasticSearch:User"],
                      configuration["ElasticSearch:Password"]
                  ) ,
                  AutoRegisterTemplate = true,
                  IndexFormat = $"DEV-TO-EXAMPLE-{applicationName}{(env != null? "-"+env : "")}"
              };
          }
          return new ElasticsearchSinkOptions(new Uri(configuration["ElasticSearch:Uri"]))
          {
              AutoRegisterTemplate = true,
              IndexFormat = $"DEV-TO-EXAMPLE-{applicationName}{(env != null? "-"+env : "")}"
          };

      }
    }

```

Now we need load configuration in startup.cs

```cs
public static int Main(string[] args){        { 
SerilogConfiguration.GetFileAndElasticSearchLogger();
...
}
``` 

Now we need call a logger methods
```cs
var Logger = Serilog.Log.Logger;
Logger
.ForContext("LogName", "Dev.To Example")
.ForContext(ExecutionTime, 1500)
.Information("Created Log....")
```
Wen this method register the log in elasticsearch the elastic search attach these properties in "fields"

Now we can search log using de KQL
```KQL
fields.LogName: "%.TO%"
//or 
fields.ExecutionTime > 1500
```
An Open Source DevOps Dashboard
Tags: devops, opensource, analytics, go
Published: 2021-11-24 23:01:05

Hey Dev friends! Forgive the shameless promotion, I'm so proud of my teammates and want to share, and hope you'll help! 

DevLake, is a free and open source tool, it brings together all the data from many of your dev tools (GitHub, Jenkins, GitLab, Jira, etc.) and provides analysis and visualization with a personalized dashboard filled with the metrics that matter to YOU. 

https://github.com/merico-dev/lake

We saw how much time and energy it takes to make practical sense of DevOps data. "NO MORE!" we said, and so we built DevLake to make it easy for developers everywhere to make their data work for them. 

Our motto is: More Dev. Less Ops. 

We hope DevLake helps you achieve exactly that, and we hope you'll join us by contributing, sharing, or simply by making use of this. Thanks gang!

(We built DevLake making the most of Go, Grafana, and Docker, among other things! We'd love to chat about our experience building this if anybody has questions or ideas!) 

GitHub link HERE: https://github.com/merico-dev/lake
Intro To Using Pinia For State Management In VueJS
Tags: vue, javascript, tutorial, vite
Published: 2021-11-24 22:52:10

Intro To Using Pinia For State Management In VueJS

[Pinia](https://pinia.esm.dev/) - The Vue Store that you will enjoy using... Intuitive, type safe, and flexible Store for Vue

I guess this is the new goto for state management in [Vue3](https://v3.vuejs.org/) and what is really awesome is that it works great with [vue-devtools](https://devtools.vuejs.org/)

This is a simple application that allows you to add students to and array that is managed in the global store and then perform the traditional CRUD actions against the store.

We show how to subscribe to changes in the store for updating the user interface

We discuss some of the benefits of this approach and its integration of typescript and how great it works with the vue-devtools.

{% youtube sKGh2wp4QfM %}

#### Source Code
{% github aaronksaunders/vite-pinia %}

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W31U7HM)
Day 485 : 100
Tags: hiphop, code, coding, lifelongdev
Published: 2021-11-24 22:50:11

_liner notes_:
- Professional : Still not feeling 100%. A coworker asked me a question and I got confused. We had a quick team meeting. Then I walked my manager through the steps of a project I'm working on and show my progress. I think it's almost there, but I need to dive deeper in the documentation. I think I may be missing something.

- Personal : Last night, I was super sore. Basically just laid in bed and worked on my side project. Then I watched an episode of the live action "Cowboy Bebop".

![A Killer Whale just under the surface of the water in Desolation Sound, BC, Canada](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0au0jvngfm65pksbohsh.jpg)

Well, we got a long weekend for the holidays here in the US. My plan is to finish this side project and work on my van. In addition to the regular stuff like the radio show on Saturday and https://untilit.works on Sunday. Going to see if I can sneak in some "Cowboy Bebop" episodes. May pick up some things if they are on sale also.

Have a great night, holiday and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube iJpdfY_lf1I %}
My new podcast Atomic Jolt
Published: 2021-11-24 22:11:03


![atomic jolt logo animation](https://i.imgur.com/ncdPEPS.gif)

I started a podcast, Atomic Jolt!

### What?

> Atomic: a small component (or unit) in a larger system⠀
⠀

> Jolt: an unexpected force that prompts an action, feeling, or change

### Why?

We often underestimate how small experiences affect us.

The conduits of these experiences come in many forms: _movies_, _books_, _games_, _hobbies_, _and more_. 

These small moments of **inspiration**, **enlightenment**, or **happiness** tend to have a ripple effect that follows us throughout our lives.

These experiences are often sparked from a single moment, _a small powerful change_.⠀
⠀
Atomic Jolt discusses these moments from their origin. The stories are unique; however, moments of small powerful change is _something we all share_.

### Where?

You can find the Atomic Jolt podcast anywhere you listen to podcasts. [Click here to listen now!](https://linktr.ee/AtomicJoltMedia)
Branch Protection Bot Github Action
Tags: actionshackathon21, github, opensource
Published: 2021-11-24 21:46:08

---
title: Branch Protection Bot Github Action
published: true
description: Branch Protection Bot GitHub Actions x DEV Hackathon 2021!
tags: actionshackathon21, github, opensource
---

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow

Automation everywhere is the pinnacle of DevOps and version control can be part of that too however if you enable branch protection rules it can make it impossible to automatically check in files as a part of a github action workflow and that's where the Branch Protection Bot has helped me temporarily disable branch protection so that I can automatically manage version control whilst minimising risk.


### Submission Category: 

DevOps, CICD


### Yaml File or Link to Code

[Branch Protection Bot](https://github.com/benjefferies/branch-protection-bot/blob/master/.github/workflows/python.yml)


### Additional Resources / Info

https://github.com/search?q=branch-protection-bot&type=code
useEffect Hook
Tags: react
Published: 2021-11-24 21:43:13

##Definition

The useEffect hook is used to handle the side effect of React functional components outside of returning JSX. For instance, fetch data from an API when a component loads. Another example consists of starting or stopping a timer. Also, the useEffect allows to make manual changes to the DOM.

Any code defined inside the useEffect hook will run after React components finished the DOM updates. By default, useEffect runs both after the first render as well as whenever the component's state updates.

##useEffect Dependencies Array

The default behavior of useEffect does not always agree with the purpose of our code. To adjust this behavior, we can run useEffect hook functions conditionally using dependencies array. 

- Empty array of dependencies[]:

for Example, we only need to run a fetch call to an API once after the JSX has completely loaded. Adding an empty dependencies array as a second argument to the useEffect function will stop the fetch call to API from happening with every re-render of the components. Therefore, the fetch call will only occur when the component renders for the first time.

- Dependencies array with one or more elements [element1, element2,..]:

Using the example of an incrementing counter running as a side effect. We can add the counter variable to the dependencies array. Therefore, the useEffect will run every time our counter state changes.  

##Conclusion

- Using useEffect with no dependencies array means that the side effect will run every time the component renders and whenever state or props change.
- Using useEffect with an empty dependencies array means the side effect will only run the first time the component renders. No state is involved in this case.
- Using useEffect with dependencies with elements in it means that the side effect will run every time those elements/variables change. The side effect will be triggered by the state changes of the elements inside the dependencies array.
I need help
Tags: gamedev, godot, reactnative, help
Published: 2021-11-24 21:20:33

I am a 15 years old boy. I can say that I know Python fairly well because this was the first programming language I learned and I learned the programming concepts using Python. 

I just wanted to make a shift.
I am not interested to do machine learning or artificial intelligence-at least for now- so I got an application idea but I don't know what should I do??

---Should I learn JS(I know HTMl and CSS in high level) and Reactnative

OR 

---Should I learn Native or Flutter

I am also extremely interested in gamedev but I still don't have an idea for a game.


PLEASE HELP 
I appreciate it 



Youssef
NPM vs. YARN: Basic Commands
Tags: beginners, react, node, javascript
Published: 2021-11-24 21:16:05

Here is a quick reference guide for basic commands that we can use when dealing with Node and requiring the use of NPM or YARN.


* ##### Install dependencies from package.json:
     ``` npm install == yarn ```


* ##### Install a package and add to package.json:
     ``` npm install package --save == yarn add package ```


* ##### Install a devDependency to package.json:
    ``` npm install package --save-dev == yarn add package --dev ```



* ##### Remove a dependency from package.json:
    ``` npm uninstall package --save == yarn remove package ```


* ##### Upgrade a package to its latest version:
    ``` npm update --save == yarn upgrade ```



* ##### Install a package globally:
    ``` npm install package -g == yarn global add package ```
Top 6 JavaScript Chart Libraries
Tags: javascript, webdev, opensource
Published: 2021-11-24 21:13:20

JavaScript is a programming language used to develop dynamic and interactive websites.
There are over 1.8 Billion websites in the world, and JavaScript is used on 95% of them. I have compiled the best and useful Chart Libraries that you need as a Javascript developer. The JavaScript Chart Libraries helps you easily visualize data using JavaScript

## ChartJS

Simple, clean and engaging HTML5 based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free. It is a community maintained an open-source library that helps you easily visualize data using JavaScript. 
![s.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637786759833/XQXeLvuYs.png)
link: [ChartJS](https://www.chartjs.org/)

## Data Driven Documents (D3)

D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards. 


![hero-53ca6ca6f61a2f70ee5054f1a5c0ffb5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637786837377/oreo8n-Nk.png)
Link: [D3](https://d3js.org/)
## Google Charts

Google Charts is an interactive Web service that creates graphical charts from user-supplied information. The user supplies data and a formatting specification expressed in JavaScript embedded in a Web page; in response, the service sends an image of the chart.


![687474703a2f2f7369722d64756e78616c6f742e6769746875622e696f2f656d6265722d676f6f676c652d6368617274732f656d6265722d676f6f676c652d6368617274732d32366432333337346136653365336437626330626635316534353430633065632e6a7067.jpeg](https://cdn.hashnode.com/res/hashnode/image/upload/v1637786908812/FGiGUpBPC.jpeg)

Link: [Google Charts](https://developers.google.com/chart)
## ApexCharts.Js

ApexCharts is a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages. This library allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples.


![68747470733a2f2f617065786368617274732e636f6d2f6d656469612f617065786368617274732d62616e6e65722e706e67.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637786935124/x0ekQ0QV6.png)
Link:[ApexCharts](https://apexcharts.com/) 

## Chartist
Chartist JS is a simple, flexible way to visualize so many types of data, it is developed to create simple responsive charts. 

![chartist.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1637787002341/cuco1DyZR.jpeg)

Link: [Chartist](https://gionkunz.github.io/chartist-js/)

## G2Plot

G2Plot is an interactive and responsive charting library based on the grammar of graphics. The responsive ability of g2plot guarantee your chart's readability in any display space and data status.


![A_wkoYQ5JuFckAAAAAAAAAAABkARQnAQ.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1637787035967/gs7GX_oJc.gif)

Link: [G2Plot](https://g2plot.antv.vision/)
Thanks for reading, I hope you found this useful.

Feel free to connect with me on [Twitter](https://twitter.com/zahab_k)
The Complete Guide To BFF (Backend For Frontend)
Tags: node, graphql, angular, javascript
Published: 2021-11-24 21:05:49

A backend for frontend (BFF) is one of these newer architectural patterns that especially became relevant after the rise of microservices and domain-driven design, as it is a way to simplify the communication between the frontend and backend and make the frontend development simpler.

In this post, I will cover BFFs with Angular and if and how you should do it in your project.

https://christianlydemann.com/the-complete-guide-to-backend-for-frontend-bff/
Learning JavaScript on Scrimba
Tags: javascript, beginners
Published: 2021-11-24 21:01:19

Today I finished the free JavaScript course on Scrimba and I have to say that I’m delighted. The course is aimed at beginners who want to learn JavaScript from scratch and who have a base in HTML and CSS. For those who don't know it, Scrimba is an online platform for learning how to code. They have courses and tutorials for beginners and advanced students. 
In my case, I had taken a course in JavaScript before but I was struggling to use it in real life cases that weren’t just logging things in the console. I was finding it particularly difficult to understand how to use JS to modify a website, that is to say, the DOM.
Fortunately most of my doubts were resolved during the course on Scrimba. First of all, I found that the instructor, Per Harald Borgen, who is also their CEO, explains everything in the most cheerful and encouraging way. Extremely helpful to keep motivated and to feel supported when tackling the challenge. 
Additionally, I have to highlight the interesting way the course is set up.  It consists of  different videos which you can stop and the video itself converts into a development environment. This means that you can select, copy or work on what the instructor was writing along with the video and save it into your notes. This makes it really interactive. 
The course is structured into three modules in which you learn to make a project. These projects are pretty much the kind of projects that you would do in a real situation. To be able to complete each, all the basics are explained and exercises for practice are given in between making the projects.
In short, the mix of a great instructor, with an interactive learning platform and cool projects to work on make this course absolutely perfect and highly recommendable for anyone learning JavaScript.
Parameter usage for default args in JS
Tags: javascript, tutorial, programming, shorts
Published: 2021-11-24 20:59:57

A default argument can reference a prior argument.

```js
const defaultFunc = (num1,num2=num1) => {
    console.log(`num1: ${num1} num2: ${num2}`)
}

defaultFunc(3)   // num1: 3 num2: 3
defaultFunc(3,6) // num1: 3 num2: 6
```