Luigi Cavalieri - Authoring Open Source Code

Blog / Page 1

  1. 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.

  2. Interactive and Static Greyscale Google Maps with React

    Interactive and Static Greyscale Google Maps with React

    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!

  3. 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.

  4. Animated Tooltip Landing from All Directions with CSS

    Animated Tooltip Landing from All Directions with CSS

    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 appear with a fade-in animation from one of the four main directions by just changing a CSS class.

  5. 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 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.

  6. How to Deeply Merge Two JavaScript Objects in ES6+

    How to Deeply Merge Two JavaScript 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.

  7. 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.

  8. 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.

  9. The Permalinks Cascade Pro Goes Free

    The Permalinks Cascade Pro Goes Free

    For the course of events to change, it doesn't necessarily have to take place a paradigm shift, sometimes even a decision made to fulfil an ordinary need is enough. But please, let me clear up the vagueness of my words, because I think an explanation, for the users of The Permalinks Cascade Pro and SiteTree, can be as much appreciated as it would be receiving words of gratitude for the trust placed in me.

  10. The Permalinks Cascade Pro 1.0: SiteTree Passes the Baton

    The Permalinks Cascade Pro 1.0: SiteTree Passes the Baton

    Today SiteTree becomes officially part of the history. Don't worry, I am not going to say my goodbyes to the project, far from it! This post is about a breath of fresh air: I gave the plugin a new name, and from now on it will be distributed in two versions, Pro and Lite. The introduction of the much anticipated Gutenberg Blocks is another big novelty. But let's start from the timeless question: "Why?"