https://mamutlove.com/en/Recent content on MamutloveHugo -- gohugo.ioenalejandro@mamutlove.com (Alejandro Mur)alejandro@mamutlove.com (Alejandro Mur)2010 - 2025 MamutloveMon, 07 Apr 2025 10:12:54 +0200https://mamutlove.com/en/blog/sonificafy-side-project/Mon, 07 Apr 2025 10:12:54 +0200alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/sonificafy-side-project/I recently launched Sonificafy, a side-project I dreamed up about a year ago and was eager to build. It’s a site that converts any public URL into sound, so you can discover what your website sounds like in a funny way ✨ Goal To bring an idea to life and enjoy the process. On this page about the project I explain my motivation, goals, and the challenge it presented, but in short, I wanted to build something from scratch—even though along the way I encountered many valuable experiences, one of them having the opportunity to explore a variety of different roles.https://mamutlove.com/en/blog/how-to-recover-a-strapi-user/Mon, 10 Mar 2025 20:37:10 +0100alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/how-to-recover-a-strapi-user/It’s not the first time I’ve forgotten the password for a project’s Strapi instance that I haven’t touched in a while. Sometimes, I don’t even remember the email I used to create the user. Always use an email that works and where you can receive messages. This is especially useful when you need a password recovery link. So, if you don’t remember the email either, the good news is that all is not lost—you can create new users using the Strapi CLI.https://mamutlove.com/en/blog/survey-the-state-of-css-2024/Sat, 31 Aug 2024 12:06:14 +0200alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/survey-the-state-of-css-2024/The The State of CSS 2024 survey is now open, and I believe participating is a good idea. Surveys can be a bit boring, but there are several reasons why it’s worth taking part in this one. The most obvious is because you gain knowledge that will help you progress as a developer since eventually, you might not be familiar with a property or set of them, as it’s hard to stay up to date.https://mamutlove.com/en/blog/dispatching-custom-events/Fri, 05 Jul 2024 07:43:39 +0200alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/dispatching-custom-events/We are used to listen to events and react to them: I trigger this function when a click happens here or when a user scrolls down or after the resize fired because the viewport has changed. But we are not used to emit our own events. Sometimes we need to know the current state of an API asynchronus task or if a third-party library has performed an action or we want to communicate different parts of our application or components due to an user interaction need to trigger a secondary effect.https://mamutlove.com/en/blog/when-and-how-to-use-has-selector/Tue, 13 Feb 2024 22:22:00 +0100alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/when-and-how-to-use-has-selector/2023 should had been the :has() year, a function that lets us evaluate whether a selector “has another element”, very useful for applying styles to an element depending on its content, something similar to the parent selector that never arrived (and won’t), but we had to wait until the end of the year to use it widely, since Firefox started supporting this function. CanIUse Until then, we could use it for small decorating details, not big deal, and we had to assume that some users wouldn’t see it, or we could supply a fallback using javascript, which lead us adding more code, making it more complex (probably not needed) increasing the risk of failing, because coding irremediable opens the possibility to make errors, doesn’t it?https://mamutlove.com/en/blog/replacing-google-analytics-by-matomo/Thu, 20 Jul 2023 23:29:13 +0200alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/replacing-google-analytics-by-matomo/We have recently replaced Google Analytics by Matomo and we couldn’t be more satisfied. Although we get some navigation data, we don’t analyze it in depth, but you know, if you can’t measure it, it doesn’t exist. So we added the Universal Analytics Google script tag when we get started with mamutlove.com GDPR A few years ago, we began to see how overnight websites started displaying messages about the use of cookies (quite annoying, by the way).https://mamutlove.com/en/blog/introduction-to-cascade-layers/Tue, 13 Jun 2023 22:28:35 +0200alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/introduction-to-cascade-layers/Cascade Layers is a way to organize your app’s styles by separating them into layers that stack on top of each other to give you more control. They are independent but permeable layers, each with its own cascade and specificity logic. Since they stack, you can keep your code more structured, tidy, and easier to manage. It’s like splitting your CSS into different style sheets and linking them one after another using <link> or <style>, but the behavior changes due to how specificity works in layers.https://mamutlove.com/en/blog/getting-started-with-intersection-observer/Thu, 02 Mar 2023 23:16:38 +0100alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/getting-started-with-intersection-observer/When developing an interface, there are several request that most often are demanded, like providing animations or effects to the elements on the screen when they enter (and also exit) the viewport. Obviously these effects should be triggered when the elements are “visible” in order to enrich the user experience, if they are not, the will lose their value. Calculating their position on the screen We used to proceeded selecting the node in the DOM and calculating its position in the viewport or within any container listening the scroll event, getting its coordinates, the height of the window and the scroll position at each moment.https://mamutlove.com/en/blog/css-is-going-too-far/Tue, 15 Nov 2022 22:33:45 +0100alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/css-is-going-too-far/Recently, I found myself a bit of disgusting regarding CSS, which has being my favorite front-end language, and I didn’t know why, but finally the reason pop up. These times are very exciting for those whom work with CSS because from some years ago until today, we have received many util tools, enough for being able to build modern, good-looking and more complex designs. In earlier years, we have to use weird side effects caused by some properties to build our interfaces but today we have a vast amount of specifications, always moving forward, with many properties and functions, planned at its conception to resolve concrete difficulties we encountered.https://mamutlove.com/en/blog/css-reset/Sat, 06 Aug 2022 17:31:31 +0200alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/css-reset/This is the nth article about CSS reset stylesheets for better rendering HTML tags between browsers, in fact, to try to get the same result whichever browser the user uses. An article no needed because you can find a lot of alternatives just with a simple search, but I wanted to share my vision and my opinion about this topic more than a stylesheet, however I will start with the code.https://mamutlove.com/en/blog/the-five-wai-aria-rules/Thu, 21 Jul 2022 17:25:34 +0200alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/the-five-wai-aria-rules/When talking about accessibility, I fairly often find confusion, people confused because of the huge amount of terms and acronyms, people doubting about when is necessary or not to apply an extra accessible layer over our components. I always recommend to go to the docs looking for the original sources. It is known that docs use to be not always so clear or the information is difficult to extract, but in this case, the five rules of WAI-ARIA are easy to understand, short and simple.https://mamutlove.com/en/blog/use-and-forward-with-dart-sass/Mon, 20 Jun 2022 21:35:16 +0200alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/use-and-forward-with-dart-sass/In recent years, CSS preprocessors have become very popular because they allow developers to write CSS programmatically. This has been a significant leap forward in flexibility and power when declaring styles. Sass is the most well-known and widely used among them. Although there are many other ways to style our web applications today—like CSS-in-JS in its many flavors, PostCSS, or CSS Modules—SASS is still widely used, as revealed by the latest The State of CSS 2021, and thus remains a relevant and powerful tool.https://mamutlove.com/en/blog/git-add-patch/Mon, 25 Apr 2022 20:12:16 +0200alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/git-add-patch/When working on a complex component or a functionality that needs to performance in multiple steps, from time to time you will find your mind playing around on its own and will lead you to be working on multiple and different tasks at the same time instead of tackling one after another, so, when you are ready to commit your work, you end up mixing different things in the same commit, which is far from ideal, and that is when it is very useful git add --patch.https://mamutlove.com/en/blog/hugo-deployment-bitbucket-pipelines/Tue, 01 Mar 2022 16:34:20 +0100alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/hugo-deployment-bitbucket-pipelines/These past days, I had been making a double desksurfing at Redradix to getting to know the DevOps role and trying to explain what a UI developer does, and it was very satisfying. Desksurfing is the name of the practice in which one or multiple people are added to an external corporation during 2 or 3 days with the objective in mind to collaborate in its processes and learn about how people work, using different technologies or methodologies, making the ideas exchange easier and flowing through professionals, creating a rich experience for both sides.https://mamutlove.com/en/blog/euromillones-bet-simulator-with-javascript/Tue, 15 Feb 2022 12:38:58 +0100alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/euromillones-bet-simulator-with-javascript/At the end of my first job in web development industry -in which I learned a lot of things such as no one is imprescindible- I received an economic income of 1,800€. At that moment I thought that bet all the money on Euromillones lottery was a great idea because I could easily multiply the money or lose it all, but luckily, I did not need that money. Thus, I thought that I will not be able to spend such a high quantity in my life.https://mamutlove.com/en/blog/rgb-hsl-lch-lab/Thu, 04 Nov 2021 10:55:07 +0100alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/rgb-hsl-lch-lab/These past days I notice more and more comments about the newest functions in CSS to declare colors, introduced in the current working draft (level 4) document about the color standard. Although it is not a recommendation yet and the support by the browsers is very insignificant, it is supposed to go on. Since the document is so wide we will focus on understand why this step has been taken and how some new functions works Nowadays Sure you are used to declare CSS colors using the hexadecimal notation, rgb or hsl functions or named colors.https://mamutlove.com/en/blog/some-considerations-about-accessibility/Mon, 02 Aug 2021 10:17:05 +0200alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/some-considerations-about-accessibility/One of the most important and interesting lesson of the course I teach at Fictizia is about web accessibility. I always try to transmit the idea that it is something wider than “We should make our site accessible for blinding people” (which should be the most spread conception) so we should think globally. From my point of view, we have the responsability to build universal and accessible digital products (products that an user could access) that could be used and be useful for the people, trying to avoid making them not useful due to its design or functionalitites.https://mamutlove.com/en/blog/a-year-in-pixels-part-2/Wed, 28 Jul 2021 16:36:55 +0200alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/a-year-in-pixels-part-2/In the first part we talked about the initiative A Year In Pixels and we exposed the benefits it has from our point of view. Now, we want to talk about a possible implementation with HTML, CSS and JS using localStorage. NOTE: The first time you access to the demo you will have no data saved and the calendar will be empty but once you save a mood your browser will remember your choices no matter if you reload the page.https://mamutlove.com/en/blog/a-year-in-pixels-part-1/Tue, 19 Jan 2021 17:33:52 +0100alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/a-year-in-pixels-part-1/Times goes fast, they say, but it’s only an opinated thought.Time goes at its time, what had been setted and whether we feel it quick or slow depends on ourselves, what we do with it and how we register it. Probably. Anyway (at least in my case), when I look back I realise that many things have passed: travels, high-school years, a memorable summer, the ending of a relation, new borns, the start of a new relationship, a loved persona that has passed-away, learnings, university, revealings… and is in that moment I try to sort cronologically when I am trully aware about all these things and becomes an avalanche, and is in that moment when everything turn into caos.https://mamutlove.com/en/blog/masks-gradients-and-animations-smil-on-svg/Tue, 27 Oct 2020 16:11:12 +0200alejandro@mamutlove.com (Alejandro Mur)https://mamutlove.com/en/blog/masks-gradients-and-animations-smil-on-svg/In other articles we talked about how to animate web elements, in fact, we highlighted that there are several ways and tools availables that we should getting to know before we start working on an animation. Each one of those approaches have theirs pros and cons, that is the reason why we insist on we need to know them deeply in order to optimize our efforts. So, if we want to animate an SVG, one of those ways we could take is doing it with SMIL.