Code Chronicles

A Deep Dive into the World of Programming and Development" From new programming languages to emerging frameworks, I delve into the latest tools and techniques used by software developers around the world.

Understanding npm dependencies version specifiers

When developing a Javascript application, you may find yourself relying on external packages and libraries to achieve your goals. These external packages are known as dependencies, and they are specified in your project’s package.json file. In the package.json file, dependencies are defined in an object that maps the package name...

pnpm vs npm vs yarn

If you’re a JavaScript developer, you’re likely familiar with npm and yarn, the two most popular package managers in the JavaScript ecosystem. However, there’s a relatively new player in the game: pnpm. In this article, we’ll explore the differences between pnpm, npm, and yarn, and help you decide which one...

Navigating the startup world as a front-end lead: 5 key principles for success.

If you’re a front-end lead who’s considering joining a startup, it’s important to be aware of the unique challenges and opportunities that come with this type of work environment. Startups move fast, and as a front-end lead, you’ll need to be able to keep up while still building a product...

How to run multiple npm scripts in parallel with "concurrently" or "gulp-run"

When working with Node.js, you may have to run multiple npm scripts simultaneously, especially during development. Fortunately, npm provides a way to run multiple scripts in parallel with the help of the “concurrently” package. In this article, we will explore how to run multiple npm scripts in parallel and display...

How to shuffle an array in TypeScript with the Fisher-Yates algorithm.

In this tutorial, we’ll explore how to shuffle an array in typescript using the Fisher-Yates algorithm. We’ll cover the basic concepts of the algorithm, and then implement a function that shuffles an array in place using typescript code. What is the Fisher-Yates algorithm? The Fisher-Yates algorithm, also known as the...

Core Concepts and Usage Patterns for React Query

Introduction React Query is a library that helps developers manage data in their React applications. It provides a set of tools and patterns that allow developers to easily fetch, cache, and update data from various sources, such as APIs or databases. What problems does React Query solve? One of the...

RxJs: Operators audit vs auditTime

Unlock the Power of RxJs: Understanding the Differences between Audit and AuditTime Operators Are you ready to take your RxJs skills to the next level? In this video, we’ll dive into two powerful operators - audit and auditTime - and explore how they can help you better manage your streams....

RxJS: Operadores audit vs auditTime

RxJS: Operadores audit vs auditTime En este video exploramos los operadores audit vs auditTime, y vemos su funcionamiento.

Crear un servidor con livereload menos de 5 minutos con VSCode

Crear un servidor con livereload menos de 5 minutos con VSCode En este video enseñamos como Crear un servidor con livereload en 5 minutos utilizando VSCode, con la extensión live server útil para archivos estáticos(HTML) así como para archivos dinámicos(JS)

Borrar Archivos y Directorios "Untracked" de un repositorio

Borrar Archivos y Directorios “Untracked” de un repositorio En este video mostramos como deshacernos de los indeseables archivos que van quedando en nuestro repositorio git a lo largo del tiempo y que es posible que no ocupemos o que solamente no nos permiten tener nuestro repositorio “limpio”, un comando para...

New React Hooks: useState Hook Demo

What are React Hooks? What is a hook? Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes. Don’t get crazy and re write your current code to use hooks. Now,...

How to Fix: fatal: refusing to merge unrelated histories

Today I have a git error, I’ll describe the situation I had maybe I’m not the only one. I created a new git repository in bitbucket, and I already had a codebase, so I wanted to add my new codebase to an empty repository, so I ran the following commands:...

Loop inside React JSX Element

This is a simple but useful snippet code to create a loop inside a jsx element Let’s say we want to iterate over the rows of a table and add a ObjectRow component each time we loop: Old fashion approaches: Option 1: Option 2: The elegant approach: This is my...

Programmatically navigate using react router

This is a snippet code for all developers looking how to navigate between “Views” using React Router programmatically, For React v.4 you have to wrap the component with the High Order Component withRouter: Example 1 import { withRouter } from 'react-router-dom' // this also works with react-router-native const MyButton =...

How to call javascript functions without parentheses

In this post I’ll explain how to call javascript function without parentheses(it was surprising for me too), I have to say that when I first read about this feature it was really surprising for me, Using template strings This is a new and very common feature for ES6, this feature...

How to Change HTML input placeholder

This post will describe how to change the color in input text html Demo: Snippet: HTML <input id="demo-input" type="text" placeholder="My awesome placeholder" /> CSS #demo-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: magenta; opacity: 1; /* Firefox */ } #demo-input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: magenta;...

Blueprint Snippets with Angular CLI

Blueprint: The angular ClI generates from blueprints, this means that the cli will generate code for use using a cli command, or a blueprint that will define the file and we can indicate options and filename of the file. ng generate <blueprint> For example the generate command will generate code...

How to make grid items the same height using bootstrap 4

Today I was trying to make my blog items the same height and I remembered this easy and very useful snippet to make them the same size, so here it is: This snippet: <div class="row"> <div class="col-6 d-flex flex-column"> <h3>Hey you</h3> <p class="mt-auto">This random text</p> </div> <div class="col-6 d-flex flex-column">...

Tilde(~) vs Caret(^) in Package.json

It’s common as front end or javascript developer get into a project and check the folder structure and found a package.json file with a bunch of packages and versions, in this article I try to explain the symbols ~ and ^ used in the files. Let’s start describing how versioning...

How to deploy a static website to Heroku

Sometimes you want to deploy a simple website or a simple page to a free hosting for testing or development purposes this guide will help you to do it in an easy way. The approach used to deploy the static website is to trick Heroku to think this is a...

How to Create a Register Form with Angular 6

In this post I share with you How to Create a Register Form with Angular 6 easy using bootstrap 4, it includes a simple validation but it helps you to understand how to validate forms with Angular 1. Create the Registration Component In order to create our component let’s use...