Posts with tag

#javascript

2025-11-12

Navigating the Future - Understanding and Measuring Soft Navigations for SPAs

Explore the concept of "soft navigations" in Single Page Applications (SPAs), why traditional Core Web Vitals measurement has been challenging for them, and the ongoing efforts by the Chrome team to standardize and enable reporting for these dynamic content changes.

#performance#web-development#javascript#chrome
2025-09-30

Introducing Chrome DevTools MCP

I participated in the Chrome DevTools MCP Early Access Program and put the feature through its paces on real projects. I focused on four scenarios: fixing a styling issue, running performance traces and extracting insights, debugging a failing network request, and validating optimal caching headers for assets. This post shares that hands-on experience—what worked, where it shines, and how I’d use it day-to-day.Chrome DevTools MCP gives AI coding assistants actual visibility into a live Chrome browser so they can inspect, test, measure, and fix issues based on real signals—not guesses. In practice, this means your agent can open pages, click, read the DOM, collect performance traces, analyze network requests, and iterate on fixes in a closed loop.

#javascript#chrome#devtools#ai#mcp#debugging#performance#chrome-devtools
2025-09-24

Web Components and Material Design - A Powerful Duo for Modern Web Development

In the ever-evolving world of frontend development, we often find ourselves trapped in silos. You build a perfect Button component in React, following the design system specs to the pixel. But six months later, the company acquires a startup that uses Vue, or your team decides to migrate a legacy app to Angular.Suddenly, that perfect button is useless. You have to rebuild it. You have to "silo" your design system.This is the problem that Web Components solve. They are the W3C standard solution for interoperability. And when you pair them with Material Design, you get something truly powerful.Today, I want to explore how Web Components can structure your frontends into small, interoperable parts, and how toolkits supporting Material Design provide accessible, best-practice UI elements right out of the box.

#web-components#material-design#frontend#javascript
2025-09-09

Simplify Your JavaScript with Logical Assignment Operators

Imagine writing 15+ lines of code just to handle default values and conditional assignments, only to come back months later and spend an hour debugging because you couldn't remember what all those if-…

#javascript#web-development#programming
2025-08-01

The revolutionary Chrome API

Artificial intelligence has evolved from a futuristic promise into a tangible and powerful tool in our daily lives as developers. Until recently, integrating AI into our web applications meant relying…

#ai#web-development#javascript
2025-06-20

Using await at the top level in ES modules

Using await at the top level in ES modulesAs I was refactoring one of my React projects last week, I realized how much JavaScript has evolved since I first started coding. Remember when we had to wrap…

#javascript#web-development
2025-01-16

The security risks of front-end dependencies

Front-end development is thrilling, right? We’re in an era where you can bootstrap a complex app in minutes using incredible libraries and tools. But let’s talk about the elephant in the room: front-e…

#frontend#javascript#web-development
2025-01-03T05:00:00.000Z

Tech Stack 2025

The React ecosystem is a dynamic landscape of constantly evolving technologies. This article delves into a powerful technology stack for building full-stack applications in 2025, allowing you to bring…

#web-development#javascript#react
2024-12-10

Node.js Corepack: Version Control for Package Managers

The Problem with Traditional Package ManagersFor years, npm has been the de facto package manager for Node.js. While it offers robust features like private package access and two-factor authentication…

#javascript#nodejs#tutorial
2024-12-09

Fetching Data in React: A Beginner's Guide

Imagine building a webpage that displays real-time weather data or a list of products from an online store. How does your React application get this information? The answer lies in data fetching. This…

#react#javascript#web-development
2024-10-08

WebContainers at its best - Bolt.new combines AI and full-stack development in the browser

Remember WebContainers? It’s the WebAssembly-based “microoperating system” that can run Vite operations and the entire Node.js ecosystem in the browser. The StackBlitz team built WebContainers to powe…

#javascript#ai#web-development
2024-07-24

Rust is revolutionizing JavaScript development!

Rspack just released version 1.0 , and the dream of using Rust-based build tools to speed up the JavaScript ecosystem is more alive than ever. How did we get here? Early last year, a team of developer…

#web-development#javascript
2024-06-12

Unlock your creativity with Google Gemini and JavaScript - A practical guide

Hello! Today I bring you a new tool that will boost your creativity to another level: Google Gemini. This artificial intelligence API allows you to generate high-quality text in Spanish, from simple p…

#javascript#ai#tutorial
2024-05-07

How to mock an HTTP request with Jest 💻

Today I wanted to show you how to properly write a test.But anyone can figure out how to run a simple test. And here, we're looking to help you find answers you won't find anywhere else.So I thought w…

#javascript#testing#nodejs#jest#web-development
2024-04-08

Are you making THESE unit testing and mocking mistakes?

Testing is hard.And it doesn't matter if you're an experienced tester or a beginner...If you've put significant effort into testing an application...Chances are you've made some of these testing and m…

#javascript#testing#web-development
2024-03-28

Why is it so difficult to pass state between client and server components?

The way we represent server components is different.Nothing like what we're used to so far.And because it's so different, it also changes where we handle state, how we handle it, and how we manage to…

#javascript#react#web-development
2024-02-14

Will you still be using client-side components in 2024?

I love server components. But they're not for every occasion. In fact, using them at each and every opportunity you get is more like tenderizing a steak with the same hammer you used to hammer a pin.T…

#javascript#react#web-development
2024-01-28

Server Components Vs Server-side Rendering

Did you know that server components and server-side rendering are two completely different things?Image descriptionAnd while they go hand-in-hand in many cases, there are equally many examples where y…

#javascript#react#web-development
2023-06-18

Clone an Object in JavaScript - 4 Best Ways

Cloning an object in JavaScript means creating an identical copy of an existing object. This means that the new object will have the same values ​​for each property, but it will be a different object.…

#javascript#programming#web-development
2023-05-12

How to use Call, Apply and Bind methods in javascript

In this article, we'll look at what call, apply, and bind methods are in javascript and why they exist.Before we jump in, we need to know what this is in javascript, in this post you can go a little d…

#javascript#web-development#programming
2023-04-17

Hacks for effective Fullstack development with React and Node

Today I'm going to show you an optimal workflow for effective development with Node.js and React. If you've ever worked on a project with multiple package.json files, you might know the pain of juggli…

#javascript#nodejs#react
2023-03-09

Introduction to .env files

Imagine having to pay nearly $148 million for a data breach that exposed the data of some 57 million users 😱😰Well, that's what happened to Uber, not long ago, and the culprit was none other than a c…

#javascript#web-development#programming
2023-02-17

Some methods beyond console.log in Javascript

Some methods beyond console.log in JavascriptOften, during debugging, JavaScript developers tend to use the console.log() method to print values. But there are some other console methods that make lif…

#javascript#web-development#programming
2022-09-18

A journey to Single Page Applications through React and JavaScript

Last June, I had the opportunity to share again in person with the medellinjs community, which I appreciate very much.MedellinJSThis time, I was talking about the javascript concepts that are necessar…

#javascript#web-development#talks
2022-09-05

React useEffect

useEffect is probably the most confusing and misunderstood hook in React. Today I want to clarify that for you.We use hooks all the time at Make It Real and understanding useEffect is crucial if we ar…

#javascript#react#hooks
2022-08-22

Why Storybook? The component development tool used by over 30,000 projects

Storybook is a tool for developing components and user interfaces faster than ever. Storybook is incredibly versatile: you can use it with a variety of JavaScript libraries and frameworks, not just Re…

#javascript#storybook#react
2022-08-10

Redux explained in a simple and succinct way for React developers

Redux is a widely used state management library for React and TypeScript applications. It’s easier than ever to manage state in React thanks to the useState React Hook, as well as the Context API. How…

#react#redux#javascript
2022-07-05

A better way to build React component libraries

Today we'll quickly go over four programming patterns that apply to shared components in React.ReactUsing these allows you to create a well-structured shared component library. The benefit you get is…

#react#javascript#web-development
2022-06-20

NPM dependencies vs devDependencies

tl;drDependencies are required by our application at runtime. Packages like react, redux, and lodash are all examples of dependencies. devDependencies are only required to develop or compile your appl…

#javascript#web-development#npm
2022-06-12

A practical handbook on JavaScript module systems

Today I'll give you a practical introduction to the module systems we use when building libraries in JavaScript. As a web application or library grows and more features are added, modularizing the cod…

#javascript#web-development
2022-05-27

Introduction to Volta, the fastest way to manage Node environments

Volta is a tool that opens up the possibilities for a smoother development experience with Node.js. This is especially relevant for working in teams. Volta allows you to automate your Node.js developm…

#javascript#web-development#programming
2020-04-17

Testing framework - Node.js

Once an application is running in production, we might be afraid to make changes. How do we know that a new feature, a fix, or a refactor won't break existing functionality?We can manually use our app…

#javascript#testing#nodejs
2020-03-20

JAMstack. And how web sites are getting faster and faster

If you are involved in the world of websites, you have probably heard of JAMstack.JAMstack stands for:JavaScriptAPIsMarkupJAMstack has inspired some of the best web development tools we've seen. Publi…

#javascript#api#html#jamstack
2020-03-10

HEADLESS CMS - The best solution for content driven development

As the world becomes more connected, an increasing number of companies are turning to content management systems to better engage with their customer base. We have all heard of WordPress, Drupal, Joom…

#javascript#headless-cms#web-development
2020-03-05

Systems Design with ReactJS and Storybook

Document and test your React components in isolation using Storybook.Storybook ReactStorybook Reacttl;dr: In this post, we will learn how to set up the necessary infrastructure to build a reusable com…

#javascript#react#storybook#design-system
2020-02-20

What is a “side effect”?

In the previous post, we learned a bit about immutability and why it should matter when writing our code, especially our reducers.This time, I want to talk a bit about side effects and how working wit…

#javascript#react#redux
2020-02-10

What is immutability?

Immutability in React and ReduxImmutability can be a confusing topic, and it appears everywhere in React, Redux, and JavaScript in general.You may have encountered errors where your React components do not re-render, even though you know you have changed the props, and someone says, "You should be making immutable state updates." Maybe you or one of your teammates regularly writes reducers in Redux that mutate the state, and we have to constantly correct them (the reducers, or our teammates 😄).It's complicated. It can be very subtle, especially if you're not sure what to look for. And honestly, if you're not sure why it's important, it's hard to care.

#javascript#redux#react
2020-01-30

Introduction to Apollo Client with React for GraphQL

GraphQL has become popular recently and is likely to replace the Rest API. In this tutorial, we will use the Apollo Client to communicate with GitHub's GraphQL API. We will integrate Apollo Client with ReactJS, but you can also use it with other platforms (VueJS, Angular, etc).

#javascript#react#graphql#tutorial
2020-01-20

Flux Standard Action (FSA)

It is a lightweight specification that defines the structure of an action, to be implemented in libraries that use the Flux pattern or architecture.Compliance with FSA helps developers create abstract…

#react#javascript#redux#tutorial
2020-01-10

Structuring the base of our NodeJS project

The idea of writing this article came from a need that arose at a meetup in the city I attended. Many of the people there were asking how they would know where the files that make up their project should be, such as: models, events, controllers, views, etc. Since in Node.JS there was no base way to do it and many of the visible examples never substantiated the reason why it was built that way.

#nodejs#expressjs#scaffolding#api#javascript
2020-01-02

NodeSchool Learn on your own

When it comes to learning a new technology or understanding the features of a language, we always look for tutorials on the internet that teach us its concepts. That's why today I want to talk to you about NodeSchool.io, an initiative that aims to teach these topics through self-guided workshops.

#javascript#nodejs#tutorial