DEV Community: Miguel Ángel Durán 👨‍💻

Sharpen Your Coding Skills with 25 Daily JavaScript and Python Challenges 🎅 AdventJS 2025

Miguel Ángel Durán 👨‍💻 — Wed, 03 Dec 2025 23:43:40 +0000

The new edition of AdventJS is live, and this year it is bigger, cleaner, and more fun than ever.

If you are new to AdventJS, it is a daily coding challenge series that runs from December 1 to December 25.

Each day unlocks a new puzzle that you can solve with code right in your browser with real tests, instant feedback, and a growing leaderboard full of friendly competition.

The coding challenges can be solved with JavaScript, Python, and TypeScript.

This edition introduces several improvements and a stronger focus on learning through practice.

What is New This Year?

✓ Cleaner and faster interface

The platform has been redesigned to load faster, feel more minimal, and remove distractions so that you focus entirely on problem solving.

✓ A more accessible difficulty curve

Challenges now increase difficulty more gradually. The early tasks help beginners warm up, while the later ones push experienced developers to think creatively.

✓ Secret tests and improved validation

Each challenge includes hidden tests that prevent hardcoded or brittle solutions. Passing the tests means your code actually works. Also, you could check the console in each test.

✓ Achievements and progress tracking

Solving challenges unlocks achievements that you can proudly share. You also keep a full history of your attempts to revisit later.

Who is AdventJS For?

AdventJS is designed for everyone who wants to sharpen their algorithmic thinking:

Beginners who want to learn problem solving with instant feedback
Frontend and backend developers who want to train daily
People preparing interviews or coding tests
Anyone who enjoys a good puzzle with a festive twist

No configuration, no toolchain, no environment setup. Just open the challenge and start coding.

Why Join AdventJS 2025?

Daily practice builds consistency and confidence. Even a five minute attempt can dramatically improve how you think about code.

But the best part is the community. Thousands of developers worldwide participate each year, compare solutions, discuss strategies, and help each other grow.

How to Start

Go to https://adventjs.dev

Log In with your GitHub account, select the available challenge for the day, write your solution, run the tests, and submit. That is it.

A Final Note

This project is built to encourage learning, curiosity, and experimentation. Whether you finish all 25 challenges or just try a few, the important part is enjoying the experience and learning something new each day.

Happy coding and welcome to AdventJS 2025.

AdventJS: 25 Programming Challenges in JavaScript and Python! [Free]

Miguel Ángel Durán 👨‍💻 — Fri, 13 Dec 2024 13:10:24 +0000

I’m very excited to announce AdventJS 2024! Bigger, better than ever, and now with support for Python.

If you love programming, enjoy solving problems, or simply want to improve your skills while having fun, this is your moment.

Go to adventjs.dev to start participating—it's free.

What is AdventJS? 🎄

AdventJS is a series of daily programming challenges unlocked throughout December. From December 1 to December 25, each day you'll get a new challenge to test your knowledge and creativity. This year, in addition to the languages you already know—JavaScript and TypeScript—we’ve added support for Python. 🐍

So, whether you’re a front-end lover, a back-end master, or just a programming enthusiast, there’s something for everyone!

Why should you participate? 🤔

Improve your skills: Solving daily challenges is an amazing way to practice and enhance your programming skills.
Achievements and scoring: Earn achievements and track your progress. It’s like a video game, but instead of collecting coins, you level up as a developer. 🎮👨‍💻
A global community: AdventJS is available in Spanish 🇪🇸, English 🇺🇸, and Portuguese 🇧🇷, meaning you’ll be participating alongside thousands of programmers worldwide.
Guaranteed fun: Each challenge is designed to be entertaining and challenging. Nothing beats that feeling of victory when you crack the solution!

This year, we’ve added challenges and trophies to make it even more fun. 🏆

What do you need to get started? 🛠️

An account on AdventJS (it’s free!).
Basic knowledge of JavaScript, TypeScript, or Python. Whether you’re a beginner or an expert, the challenges are designed for all skill levels.
A desire to learn and have fun!

How does it work? 🕹️

Daily challenges: A new challenge unlocks every day. You can solve them in any order, but you can’t skip ahead.
Solve in your favorite language: With the addition of Python, you can now choose the language you’re most comfortable with for each challenge.
Share and learn: Once you complete a challenge, you can see how other developers solved it. It’s a unique opportunity to learn different approaches and improve your code.

Join me on this adventure! 🚀

In 2024, we want more programmers to take on the challenge. This year, we’ve worked hard to make AdventJS more accessible and exciting. Plus, you’ll find me on my social media sharing tips and solutions for some of the challenges (no spoilers, though! 😜).

Happy coding and let the magic of December begin! 🎅🎄

If you have questions or just want to share your progress, join the conversation on X with the hashtag #AdventJS, or stop by my Twitch channel. I’ll be streaming AdventJS content throughout December!

25 retos de Programación de JavaScript y Python: AdventJS

Miguel Ángel Durán 👨‍💻 — Sat, 07 Dec 2024 21:18:11 +0000

¡Estoy muy emocionado de anunciar AdventJS 2024! Más grande, mejor que nunca y con compatibilidad para Python.

Si eres amante de la programación, te encanta resolver problemas o simplemente quieres mejorar tus habilidades mientras te diviertes, este es tu momento.

Entra a adventjs.dev para empezar a participar, es gratis.

¿Qué es AdventJS? 🎄

AdventJS es una serie de retos diarios de programación que se desbloquean a lo largo de diciembre. Desde el 1 hasta el 25 de diciembre, cada día tendrás un nuevo desafío que pondrá a prueba tus conocimientos y creatividad. Este año, además de los lenguajes que ya conoces, JavaScript y TypeScript, hemos agregado soporte para Python. 🐍

Así que, seas un amante del front-end, un maestro del back-end o un entusiasta del mundo de la programación, ¡hay algo para todos!

¿Por qué deberías participar? 🤔

Mejorar tus habilidades: Resolver desafíos diarios es una forma increíble de practicar y mejorar tus habilidades de programación.
Logros y puntuación: Obtén logros y lleva un seguimiento de tu progreso. Es como un videojuego, pero en lugar de acumular monedas, mejoras como desarrollador. 🎮👨‍💻
Una comunidad global: AdventJS está disponible en español 🇪🇸, inglés 🇺🇸 y portugués 🇧🇷, lo que significa que estarás participando junto a miles de programadores de todo el mundo.
Diversión garantizada: Cada reto está diseñado para ser entretenido y desafiante. ¡Nada mejor que esa sensación de victoria cuando encuentras la solución correcta!

Este año hemos añadido retos y trofeos para que te diviertas más. 🏆

¿Qué necesitas para empezar? 🛠️

Una cuenta en AdventJS (¡es gratis!).
Tener conocimientos básicos en JavaScript, TypeScript o Python. No importa si eres principiante o experto, los retos están pensados para todos los niveles.
¡Ganas de aprender y divertirte!

¿Cómo funciona? 🕹️

Retos diarios: Cada día se desbloquea un nuevo reto. Puedes resolverlos en el orden que quieras, pero no puedes adelantarte.
Resuelve en tu lenguaje favorito: Este año, con la incorporación de Python, puedes elegir el lenguaje que más te acomode para resolver cada desafío.
Comparte y aprende: Una vez que completes un reto, puedes ver cómo lo resolvieron otros desarrolladores. Es una oportunidad única para aprender diferentes enfoques y mejorar tu código.

¡Acompáñame en esta aventura! 🚀

En 2024, queremos que más programadores se unan al desafío. Este año hemos puesto mucho esfuerzo para que AdventJS sea más accesible y emocionante. Además, podrás encontrarme en mis redes compartiendo tips y soluciones para algunos de los retos (¡pero no spoilers, eh! 😜).

Regístrate ya en AdventJS y sé parte de esta experiencia única. ¡Nos vemos en los retos!

¡Feliz programación y que comience la magia de diciembre! 🎅🎄

Si tienes dudas o simplemente quieres compartir tu progreso, únete a la conversación en X con el hashtag #AdventJS o pásate por mi canal de Twitch. ¡Estaré haciendo streams dedicados a AdventJS durante todo diciembre!

Halloween.dev 🎃 JavaScript Programming Challenges

Miguel Ángel Durán 👨‍💻 — Thu, 31 Oct 2024 00:43:29 +0000

I'm thrilled to introduce halloween.dev—a platform where you can tackle programming challenges with a haunted twist. If you enjoy coding and have a passion for the spooky, then this site is for you! 🎃👻

What is Halloween.dev?

Halloween.dev is a site featuring horror-themed programming challenges that you can solve using JavaScript and TypeScript. Each challenge is crafted to give you a fun, spooky experience while putting your coding skills to the test. From pumpkins to ghosts, every challenge incorporates Halloween elements that make coding feel just a bit... scarier. 🕸️

The platform is completely free and is available in English, Spanish, Portuguese, and Japanese.

How It Works 🎲

On Halloween.dev, you’ll find a collection of spooky programming challenges waiting for you to solve. Here’s how it all works:

1- Pick Your Challenge: Start by selecting the first challenge. Each task comes with a brief, eerie story or hint, giving you a feel for the puzzle you’re about to solve.

2- Solve Using JavaScript or TypeScript: Tackle the challenges using JavaScript or TypeScript. These tasks range in complexity, from beginner-friendly logic puzzles to more intricate problems that will test your coding skills and creativity.

3- Test Your Solution: Each challenge includes a real-time test suite. As you code, the platform checks your solution, providing immediate feedback on whether it meets the challenge criteria. This helps you refine your approach and know when you’ve cracked the puzzle.

4- Unlock the Next Challenge: Once you successfully complete a challenge, the next one becomes available. Each new challenge is a bit more difficult than the last, gradually intensifying your coding adventure.

Halloween.dev is designed to make learning and honing your JavaScript and TypeScript skills thrilling and fun. Each challenge adds a unique twist, keeping you engaged as you move through this haunted coding journey.

Good luck, and let’s see if you can conquer every spooky challenge! 👻

AdventJS, JavaScript/TypeScript challenges for Xmas 🎅

Miguel Ángel Durán 👨‍💻 — Thu, 14 Dec 2023 14:06:42 +0000

As the creator of AdventJS, I'm thrilled to share with you the journey and inspiration behind this festive coding challenge.

Each December, AdventJS becomes a playground for JavaScript developers, from beginners to veterans, offering a unique problem to solve every day leading up to Christmas.

What is AdventJS?

AdventJS is an annual 25-day coding challenge, starting on December 1st and ending on the 25th. Each day, a new JavaScript problem is released on the platform, designed to test and improve your coding skills in a fun and festive way.

It's available in English 🇬🇧, Spanish 🇪🇸 and Portuguese 🇧🇷.

The Challenges

The challenges in AdventJS range from simple tasks suitable for beginners to more complex problems that will make even seasoned developers scratch their heads. These problems are not just puzzles but practical scenarios that you might encounter in real-world programming.

Community and Learning

One of the most rewarding aspects of AdventJS is the community engagement. Developers share their solutions, learn from each other, and even collaborate. It's a fantastic way to learn new JavaScript techniques and best practices!

Why JavaScript?

JavaScript was chosen for its versatility and popularity. It's a language that many are familiar with, and it's used in a wide range of applications, making AdventJS accessible to a large audience.

Also, you can use TypeScript to solve the challenges!

Join the Fun!

Whether you're a JavaScript newbie or a guru, AdventJS has something for you. It's more than just coding challenges; it's a celebration of the joy of coding and the warmth of the developer community during the festive season.

→ https://adventjs.dev

Happy coding, and let the countdown begin!

Your feedback and experiences with AdventJS are invaluable.

Share your stories and solutions in the comments, or reach out to me directly. Let's make this December a memorable one for coding!

JavaScript #CodingChallenge #AdventJS #DevCommunity

AdventJS, JavaScript/TypeScript coding challenges

Miguel Ángel Durán 👨‍💻 — Sun, 04 Dec 2022 18:13:46 +0000

AdventJS is a programming challenge website that offers a unique and challenging experience for code lovers. Inspired by the traditional advent calendar, AdventJS reveals a new AdventJS is a programming challenge website that offers a unique and challenging experience for code lovers.

Inspired by the traditional advent calendar, AdventJS reveals a new JavaScript or TypeScript programming challenge every day from December 1st to 24th.

Each AdventJS challenge is scored based on its complexity, best practices, and maintainability. This way, you can track your progress and compete against other programmers to see who gets the highest score on each challenge.

AdventJS is available in English and Spanish and it’s completely free to use. Plus, you can share your solutions with the community and see how others have tackled the challenges.

Don’t miss out on this unique opportunity to improve your JavaScript and TypeScript skills and have a blast doing it.

Visit https://adventjs.dev and start your journey towards programming excellence. I
’ll see you there!

Building a common frontend tech platform at Adevinta Spain

Miguel Ángel Durán 👨‍💻 — Thu, 29 Apr 2021 08:50:00 +0000

Let me explain how we have achieved at Adevinta, with hundreds of frontend developers, to work with the same set of tools to build our products.

A little bit of background: what's Adevinta?

Adevinta is one of the world’s leading online classified ads businesses, active in 11 countries around the world and reaching more than 1.3 billion average monthly visits worldwide. One of those countries is Spain 🇪🇸 where, as Adevinta Spain, we have different marketplaces. For Real Estate we have Fotocasa, Habitaclia, for jobs InfoJobs, cars and motos in Coches.net, Motos.net. For generalist stuff, you could find Milanuncios.

All these marketplaces are, in fact, different products with different teams and, yeah, different developers with different opinions but, yet, very similar needs. We had spread the same company a dozen different tools to create bundles (Browserify, Webpack, manual systems…), for each we had different versions in many different repositories. And, imagine that, everyone with different configurations that supported different files in so many different ways. In one word: chaos.

The starting point

Example of the old days. A single React component in Adevinta Spain. With a bunch of files starting with a dot for config and its own Webpack configuration for creating a demo for it. Still available at https://github.com/SUI-Components/sui-autocompleted.

One year ago we decided to solve this and move forward. To do so, we iterated over the team called Enablers Frontend. This team's main objective was to grow a common frontend architecture, giving a response to all products needs while focusing on making it scalable, resilient, replicable, robust, and as much cutting-edge technology as possible.

Relying on Compatible Versioning. So developers always get the latest fixes and features for free using the major.

For this, we started creating a set of tools called SUI (Simple User Interface) to extract core functionality and tools for packages. We saw these tools like our AAAS (Architecture as a Software) and focused on following the Unix rules to make the tools as modular, independent and, replaceable as possible. We could change a whole tool always that the entry parameters and the output remained the same.

We also embraced other things: zero-config Javascript (#0CJS), to avoid dot points and config files in our projects and repositories; and Compatible Versioning to rely always on the major version, get the new features and fixes for free and be as less disruptive as possible. Both characteristics forced us to be very careful about our decisions but, after several years, I could say that it was a success.

Sean Larkin talking at the JSCamp about what zero-config means in terms of Developer Experience

@s-ui/bundler, using Webpack as the building platform

So, one of the most important things that all our projects had in common was a way to create the bundles. While some used Browserify, some used Gulp, and others started to use Webpack. We created a new tool called @s-ui/bundler to unify the way of creating it based on Webpack, as it was the de-facto way of bundling apps in the frontend.

“What if it means that you could take just by defining this tiniest package […] and instantly, without needing configuration you automatically have those setups or specifications that you need for your build systems.” — Sean T. Larkin at JsCamp 2018

This offers a set of rules based on the minimal assumptions possible. For example, support SASS and ES6 files using Babel with a babel-preset-sui. We tried to keep these assumptions as little as possible to be able to iterate fast and evolve quickly our dependencies. For example, from Webpack 1 to the actual Webpack 5 we haven’t had to do great changes and we haven’t had to create many majors of @s-ui/bundler for the users to adopt it.

But, as you would see, @s-ui/bundler is just a simple wrapper over Webpack that provides:

Zero configuration to get started with the basic config for all our products. Just put an index.html and app.js and you ready to go.
Development mode with some goodies like Hot Reloading, screen errors, and, where you could easily link external packages with a link-package parameter. The main difference with npm link, is that the files are compiled on the fly with babel which results in the fastest hot reloading. Compatible with SASS files as well.
App Bundle, Lib mode, and Server compilations.
Built-in CLI for all the commands and also a way to analyze the bundle.
A set of optimizations for CSS and chunks.

If you’ve got the expected project structure, you’ll be able to start a development environment with a single command

So, @s-ui/bundler gives you the possibility of creating your web app in a few seconds with the minimal boilerplate but with the desired structure and technology that we want to follow in Adevinta Spain across all the projects. But, still, there’s more…

Evolving the platform, building on top of it

In Adevinta Spain we decided to embrace React and use it to build all our UI so, as you could imagine, building your app with @s-ui/bundler lets you use React as well from scratch. You just install the dependency and you’re ready to go.

All our projects are aimed to be SPAs. Also, we wanted to offer our developers a very easy way to create a Server-side rendering experience for their products. For that, we created two separated tools: @s-ui/react-initial-props and @s-ui/ssr.

@s-ui/react-initial-props, the first stone for universal apps

If you’re creating a SPA in React you might be tempted to fetch the data for your app in the useEffecthook. So, you could control when the data is available to show a placeholder.

This means that your app will have the needed data on the client but not on the server. That means that your app might not be easily crawlable by bots.

@s-ui/react-initial-props package offers a way to make your easily your app isomorphic. It let you create a static method called getInitialProps for your page component. This method, which returns a Promise, will be loading the chunk of your app as well.

You could pass a contextFactory to create the needed context for your page. The contextFactory should be universal. loadPage will execute the getInitialProps static method for you and deal with the async chunk.

loadHomePage has a component that will deal with the asynchronicity for you. You could even add a renderLoading to render a component while fetching the data.

As you can imagine, the method getInitialProps needs to be universal, the code should be executable in the server and the client. For that, getInitialProps receives the same parameters in both environments.

This approach is convenient as it avoids re-renders as other options like React-Transmit that caused a long time to respond, especially in the server.

Next.js has something very similar called getServerSideProps.

@s-ui/ssr, transform your SPA in a Server-Side Rendering App

If you were using @s-ui/bundler and @s-ui/react-initial-props… what would you think if I say to you that you could have for free a server-side rendering app without writing a single line of code?

@s-ui/bundler is a big piece of our Lego. It connects well with @s-ui/react-initial-props and, if you do so, you’ll be able to connect with @s-ui/ssr to get Server-Side Rendering by writing zero lines of code

@s-ui/ssr package essentially relies on the convention used in @s-ui/react-initial-props so you don’t have to write a line of code to transform your SPA in a full app with SSR. Also, it doesn’t only generates the code but create a Docker container ready to be deployed and add some interesting features like the proposition of Google to perform dynamic rendering to do SSR for the bots and fetch the data in the client for your users.

This kind of tool wasn’t easy to create if it wasn’t built on top of a common platform. Now, you should think about them like Lego pieces that let you the possibility of building within the base a greater app by using this modular approach thanks for following some foundations.

Some frequently asked questions 🤔 and comments…

🗣 Isn’t this a simple wrapper?

Yes and no. Yes, as we’re wrapping a bunch of tools to provide it with a custom config and still, no, as they not only could have a config that would be reusable but also it has some nice additions (like some CLI interfaces to get the most of it). For example, isn’t create-react-app or standard a wrapper of tools? And yet, they're pretty powerful. Wrapping tools give a simple way of creating a project from scratch, reusing the choices, sharing the benefits of some decisions, and converging to follow the same rules across different projects.

🗣 Doesn’t this bother developer opinions about what tools to use?

I understand this question. Not every developer has this concern but, usually, seniors with plenty of years of experience don’t want others to decide the tools or architecture to use in their projects. I could empathize with this feeling. However, one of the mottos of Adevinta is “One team”.

Let me say that working as “One team” in the frontend is not easy. If the debate about “semicolons or not in Javascript” could unleash a war, imagine the limitless discussions about UI libraries, frameworks, and different architecture approaches. We try to listen and collect all the feedback before making decisions but, in the end, a decision should be made.

Also, we’re far from perfection and we’re still improving this to get the most of the developers comfortable but, still, some people could not just accept a different

🗣 But I think is better if everyone is free to choose whatever they want!

I wouldn’t like to start a discussion about convergence vs. divergence. From my point of view, both have advantages and drawbacks. In my experience in Adevinta Spain, converging in a set of tools has accelerated the development, improving the DX and the TTM (Time to Market) of features and new products. The start was not easy but the cost we assumed at the beginning has been more than compensated.

Now, this doesn’t mean this strategy could work in every company. As I explained in the beginning, Adevinta Spain has different products that are essentially the same structure: a marketplace. The main objective is to let developers focus on creating the best product possible without having to lose time in dealing with tools.

🗣 Still, there are better solutions out there!

create-react-app and Next.js would be the most similar solutions that we could adopt. Still, there’re some important differences. We needed the build our platform to be as modular as possible to be adopted by all the products step by step.

For example, we could maintain all the codebases of the old project but start using the linter, later just use the tool for testing and, maybe as the last one, use the bundler. Or maybe try to use just the react-initial-props that could give a lot of value to the user if the project already used a custom Webpack config.

NextJS, for example, provides you with a whole framework in a single piece that requires to be adopted at once. Don’t get me wrong, I love ❤️ NextJS and Vercel team but, for us, we had to build a platform for several projects at once, and being able to adopt progressively the platform was a must.

Also, when we started this journey, Next.js didn't provide as many features as it does now.. Maybe if we started now, things were would go different.

🗣 I want to discuss more of this!

Well, you’re more than invited to do so. sui-bundler and the other tools are open source. Also, just post your comment or follow the conversation on Twitter. 😊 We will be happy to hear feedback to iterate or improve the platform as every improvement we perform will be shared across all our projects. Thanks for reading!

Cómo crear un spinner loader con CSS

Miguel Ángel Durán 👨‍💻 — Sun, 18 Apr 2021 12:42:26 +0000

Un spinner loader, o donut spinner, es un elemento muy típico en nuestras aplicaciones ya que le indica al usuario que un contenido se está cargando.

Vamos a ver cómo puedes crear el tuyo con HTML y CSS en muy pocas líneas de código. Si quieres, puedes ver el vídeo donde lo hago paso a paso:

¿Cómo queda el spinner?

Si quieres ver el resultado final, te dejo aquí un Codepen para que veas cómo quedaría nuestro spinner:

Creando el spinner con HTML y CSS desde cero

Lo primero que tenemos que hacer es el HTML de nuestro spinner:

<div class='spinner'></div>

Y a partir de aquí estilamos esta clase con CSS. ¡Vamos por partes!

Primero le añadimos un borde, con 4 píxeles de borde y lo hacemos con un color negro pero con mucha transparencia. Pero hacemos que uno de los lados no tenga color, que sea transparente. Y también hacemos que use el border-radius, para curvar este nuevo borde.

.spinner {
  border: 4px solid rgba(0, 0, 0, .1);
  border-left-color: transparent;
  border-radius: 50%;
}

Para las medidas, usamos una forma cuadrada con un alto y ancho de 36px.

.spinner {
  border: 4px solid rgba(0, 0, 0, .1);
  border-left-color: transparent;
  width: 36px;
  height: 36px;
}

Y finalmente vamos a añadir nuestra animación. Vamos a llamar a esta animación spin, que dure un segundo y el tipo de animación sea linear que es lineal. Puedes usar la que quieras en este punto.

Lo importante es que pongas que se tiene que hacer de forma infinite, para que se haga repetidas veces la animación.

.spinner {
  border: 4px solid rgba(0, 0, 0, .1);
  border-left-color: transparent;
  width: 36px;
  height: 36px;

  animation: spin 1s linear infinite;
}

Ahora creamos la animación usando @keyframes de forma que empezamos en un punto (el punto de inicio es 0%) y, al final, habremos rotado el spinner completamente (100%):

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

¡Y ya lo tenemos! Puedes ver el resultado final en este enlace: https://codepen.io/miduga/pen/RwGxpyJ?editors=1100

Y si prefieres verlo en vídeo, lo tienes aquí: