Luigi Cavalieri - Coding, Sharing, Blogging

Blog / Page 1

  1. An Intro to TypeScript for the Beginner React Developer

    An Intro to TypeScript for the Beginner React Developer

    Probably you already know that TypeScript is a modern flavour of JavaScript, actually TypeScript too is a programming language. But why it is given so much importance in the development of front-end apps with React? The aim of this post is to give an answer to this and a few other questions, and introduce the basic notions you need to try your hand at writing code with TypeScript as a beginner React developer, together with providing some tips along the way.

  2. Building a Retractable Sidebar with React and CSS

    Building a Retractable Sidebar with React and CSS

    In developing a RetractableSidebar component with React, there is something more important than the code on its own, even more important than the CSS trick we'll use to actualise the animation. This something is the understanding of how to carefully time the events at play. So, my goal with this post is to help you make yours the reasoning behind the development process, more than anything else, because once mastered that, the customisation of the RetractableSidebar component will flow naturally, by giving you an enjoyable development time.

  3. How to Download an Array of Data Objects as CSV File with TypeScript

    How to Download an Array of Data Objects as CSV File with TypeScript

    A requirement such as the downloading of data objects as CSV file is almost ubiquitous, to such an extent you might encounter it even in the practical part of a job interview. Thus knowing how to implement it is undoubtedly valuable, even more so if one knows how to implement it without resorting to a third-party library. For this reason, today I want to show you how to package an array of data objects into a CSV file with just some plain TypeScript.

  4. How to Turn Greyscale an Interactive or Static Google Map

    How to Turn Greyscale an Interactive or Static Google Map

    A greyscale Google map makes markers, polylines and whatever you might want to draw on it, to stand out naturally and with style. There's no doubt about that. Perhaps, you might think that with React repainting a Google map in greyscale is a tricky affair... Trust me, with a little help provided from an online tool and a handful of custom code, you can add to your React app an interactive or static greyscale Google map in really no time. Let's see how!

  5. useClickOutside() — A Custom React Hook to Intercept Clicks Falling Outside an Element

    useClickOutside() — A Custom React Hook to Intercept Clicks Falling Outside an Element

    Intercepting click events that occur outside a given element is something you might have had already the need to handle, or maybe it's something you need to translate into React code right now, whatever the case, a reusable solution is more often than not a big helping hand in speeding up development and strengthen your app's architecture. Manly for these reasons, today I want to share with you the implementation of useClickOutside(), a custom React hook spiced with some TypeScript.

  6. How to Make a CSS-only Tooltip Appear from Any Direction

    How to Make a CSS-only Tooltip Appear from Any Direction

    In this second post about tooltips I want to describe to you some new code developed on top of the CSS cascade I published about a month ago, and which I used to draw a CSS-only tooltip. I'm going to start with a slight refactoring and then add up on it new CSS rules, which will allow the tooltip to land from any of the four main directions by just changing a CSS class.

  7. Drawing a Tooltip with CSS: Can a Border Give Shape to a Triangle?

    Drawing a Tooltip with CSS: Can a Border Give Shape to a Triangle?

    Modern CSS helps greatly in streamlining the drawing of tooltips: if it wasn't for the flexbox layout we were still obliged to resort to tricks like a negative margin, to keep a group of elements neatly centred. But what about that little bottom triangle characterising the tooltip itself? Sometimes old solutions don't lose contemporaneity.

  8. mergeObjectsDeep() — A Custom Function to Deeply Merge Two Objects in ES6+

    mergeObjectsDeep() — A Custom Function to Deeply Merge Two Objects in ES6+

    While working on a recent JavaScript project, I found myself in need of merging together an object of default values, with a second object of custom values. The complication was that the two objects could contain other objects nested in, and that the operation could not limit itself to shallowly merge those child objects. After a little work, mergeObjectsDeep() was born to be shared.

  9. How to Register Multiple Gutenberg Blocks Each Through its Own block.json File

    How to Register Multiple Gutenberg Blocks Each Through its Own block.json File

    The development of a block-enabled plugin is a very well documented process in the WordPress Codex, packed with all the information one might need to get started. To date however, the documentation falls quite short in providing details on how a plugin should proceed to register two or more Gutenberg blocks by means of block.json configuration files. As I recently faced this problem first-hand, I thought I'd share what I learnt.

  10. How to Rename a Shortcode Programmatically

    How to Rename a Shortcode Programmatically

    It does happen to change mind. But when for some reason we change mind on the name of a shortcode become almost ubiquitous amongst our Posts, Pages and Custom Posts, the only reasonable way of renaming all its occurrences is programmatically — writing scripts all the monotonous work can be delegated to is a habit that, trust me, pays off over time.