Discover 10 powerful refactoring techniques to level up your frontend coding skills — Writing code is like painting a picture. You want to create something beautiful and functional that will stand the test of time. But just like a painting can become faded and discoloured over time, so can your code. …

Revolutionize your development workflow and eliminate bugs with the io-ts library. — As a developer at Elastic, I’ve had my fair share of challenges when it comes to type encoding and decoding. One tool that has been instrumental in streamlining my workflow and eliminating bugs is the io-ts library, which provides a runtime-type system for IO decoding/encoding. When I first started using…

A simple custom hook to access the screen size type. Useful to get isMobile, isTablet and isDesktop booleans. — Why do we need info about the viewport? Working with web applications, we want to provide the best possible experience to our page users. This implies recognising whether it is better to render an element on desktop mode rather than in mobile and vice-versa. CSS Media queries are great at handling these scenarios, helping to apply the proper…

Improve your way of conditionally render React components with these custom hooks. — One of the most loved aspects of React is the way it allows to conditionally render components and single elements. A feature that, among many others, brought the library to be the most loved in the JavaScript ecosystem. Since we base all our conditionals on truthiness and falsehood, we use…

Set and use a global CSS variable to change the base font size of your page. — Following the first article about React Custom Hooks, today we’ll see how to simplify and reuse across our apps another piece of logic, enhancing our skills as React developers little by little. I’m talking about the useFontSize custom hook, let’s see together why is it so useful! Why the need for a useFontSize hook? Using the Medium…

Make simple persisting data on the localStorage with React to save user preferences. — After I started creating my own design system mountain-ui, I thought what I’ve learned so far in my career and what I’ve been applying in its implementation could be of good use for other developers who’d like to learn better how to exploit the React API at its full potential. …

What you may have missed while using the useReducer hook — When the React team rolled out version 16.8 and brought the hooks paradigm to our community, things started to quickly change in the way we used to write our code. useState came as a cleaner solution to keep track of our values across rerenders. useContext has been another game-changer, making…

Enhance your versioning flow with these npm CLI tips — npm, the most used Node.js package manager in the world, has been a real game changer for JavaScript developers since its first release in 2010. Such progress in code shareability grew the community around JavaScript exponentially, making this programming language one of the most loved in the IT world. Now…

And how I so defeated the procrastination. — This summer literally destroyed my productivity. At the beginning of 2020, I was really trying to give my best every day, the mindset was about “I don’t want to waste my day.”, and to be honest it was working pretty well. I was getting tasks done faster at work, my…