We're living in the age of AI. Every day, a new tool pops up promising to 10x our productivity, write all our code, and probably make us breakfast. And don't get me wrong, AI is a fantastic and it's making us productive! But I’ve found that even with the best AI assistant, our foundational tools, the "metal" we work on can be the biggest drag or the biggest accelerator.  Over the last few months, I’ve been on a mission to fine-tune my setup, and I’ve landed on a stack of software and hardware that has genuinely made a huge difference. Let's dive in. The Software This is the digital engine. Make it fast, make it smart, and make it work for you. 1. The OS: Linux/Ubuntu To me, speed is everything. I’ve been a Windows user for a long time, but over the years I started to notice how slow things felt, especially when working on multiple projects at the same time with several applications open. Build times dragged, the OS felt heavy, and the overall experience starte...

In the dynamic world of modern web development, micro frontends have emerged as a pivotal strategy to break down monolithic frontend applications into manageable, independently deployable units. For the past two years, I've had the pleasure of working with single-spa (yes, all in kebab-case), a framework that has revolutionized how we orchestrate these micro frontends. Let's talk about why single-spa is an excellent tool for managing micro frontends and how it simplifies the complexities of modern web architecture. A Seamless Orchestrator for Micro Frontends single-spa stands out as a robust framework that seamlessly orchestrates different micro frontends without the need to worry about the internal tooling of each. When I first encountered single-spa, I was struck by its straightforward approach to managing multiple frontend applications within a single project. This flexibility allows you to use multiple JavaScript frameworks (React, Vue, Angular...) in one place, making it ...

Last June 11th, I had the opportunity to participate as a speaker in the Vue.js Global Summit by Gleekle to talk about one of my favorite topics, Pair Programming. My intention with this talk was to motivate teams to adopt this wonderful technique to improve their productivity. Here I bring you a summary, we will be covering: What is Pair Programming? Benefits of Pair Programming Pair Programming styles Implementing Pair Programming (tips and tricks) Common Pushbacks Takeaways Before start talking about Pair Programming, it’s important to mention some of the most common problems inside a development team: First, Lack of communication between team members - This could be partialized or generalized problem depending on the company Another one is Centralized knowledge - This happens when one team member is the to-go person for any particular technology, codebase familiarity, or domain knowledge. And yeah somebody is coming to your mind right now Never-ending code reviews - A ...

Most web applications are developed for users with no disabilities, under the assumption that all users have the same  physical abilities and resources , when in fact it's the opposite. The circumstances of our users will vary from having internet issues to being physically disabled, and here is when Web Accessibility comes into play,  so you can optimize your web app and adapt it to all audiences. Web Accessibility  (a11y for short)   refers to designing/developing web apps so people with some kind of physical disability, situational disability, and socio-economic restriction (like low internet speed) can use them. Web Accessibility encompasses all disabilities that affect web navigation, including: 👁 visual 🧠 neurological 👂🏽 auditory 🖐🏽 physical  🗣 speech The first time I heard about this concept, I was surprised by the number of people who are restricted to fully use web applications. My first guess was that around 1% to 5% percent of the population h...

I can't stress enough how happy I am after start using Tailwind CSS in my Vue projects. Now, I don't have to deal directly with CSS; Tailwind will handle that for me 😉. This is a short tutorial on how to add Tailwind CSS to your Vue app created with the Vue CLI. Let's start: 1) Open your project and install Tailwind . npm   i  -- save - dev   tailwindcss 2) Create a CSS file called tailwind.css in the following path src/assets/css/ and add the content below: @tailwind   base; @tailwind   components; @tailwind   utilities; 3) Now import the tailwind.css in main.js import   './assets/css/tailwind.css' 4)  Create your Tailwind config file by running npx   tailwindcss   init This will create a minimal tailwind.config.js file at the root of your project. 5) Create a postcss.config.js file at the root of your app and add this: const   autoprefixer  =  require ( 'autopref...

For me, one of the small hacks to keep me posted with the tech/tools that I love is to follow the contributors or creators on Twitter. I like to read about what they're thinking, what they're working on and what are the next improvements for the tools. I even like to see their favorite memes 😆. So I encourage you to start this 2020 with the right foot following some brilliant people that are contributing to the Vue.js ecosystem in different ways: Evan You twitter:  @youyuxi Yeah, let's start with the creator. Evan has been working with Vue.js since 2014, and right now he's the biggest contributor, dedicating all of his time to the framework. On his Twitter account, you can find thoughts about the next steps of Vue.js and sometimes you can find tweets about UFC 🥊. Eduardo San Martin Morote twitter:  @posva Eduardo is part of the Vue Core Team, he's focused on the vue-router . Also, Eduardo is the creator of vuefire , a solution to create real-time b...