Get a list of all shell built-ins
bash05 July, 2023Time to read: 1 minsGet information about all the shell built-in commands with the help built-in command.
Inspect text that contains control characters in bash
bashunicode05 July, 2023Time to read: 2 minsInspect text that contains control characters with the xxd command. xxd can also be useful when you want to see the bytes of UTF-8 (Unicode) encoded files.
Join the lines of two files based on a common column
bashSQL04 July, 2023Time to read: 3 minsSee how to join the lines of two files in bash, based on a common column with the join command. You'll also see how to perform SQL-like joins on files.
Get specific rows from a file
bash29 June, 2023Time to read: 2 minsUser awk's NR built-in variable to print only specific rows from a file.
Split the even and the odd lines of one column into two separate columns
bash27 June, 2023Time to read: 3 minsSee how the paste command works by splitting the even and the odd lines of one column into two separate columns
Get specific columns from multiple files and paste (combine) them into a new file
bash25 June, 2023Time to read: 1 minsUse the cut or awk commands to extract specific columns from files and create a new file that has all the previous columns with the paste command.
Web scraping in the console
javascriptCSS02 November, 2020Time to read: 6 minsA collection of code snippets you can paste in the browser’s console to get useful data back.
System fonts
typographyCSS24 October, 2020Time to read: 7 minsLearn how to use system fonts effectively. You will also find an interactive table with system fonts, font stack suggestions by classification, and some type specimens for comparisons.
React’s useState hook details
react02 August, 2020Time to read: 3 minsLearn the difference between lazy initialization and passing a value as the initial state, the functional and the regular form of setState, and more.
What’s the difference between using a ref and a variable to keep track of a value in React?
react10 June, 2020Time to read: 1 minsLearn what’s the difference between using a ref (for example, with the useRef hook) and regular variables (outside of a functional component) to keep track of a changing value.
Creating font subsets
typographyunicodeperformance06 May, 2020Time to read: 15 minsImprove the typography and the performance of your site by creating custom font subsets.
Reforma typeface notes
typography20 March, 2020Time to read: 2 minsMy notes for the Reforma typeface designed by Alejandro Lo Celso.
Using the contenteditable attribute
HTMLreact17 March, 2020Time to read: 3 minsCreate a <textarea> that resizes while the user types with the contenteditable attribute.
Add inline style elements in Gatsby
typographyperformancegatsby15 March, 2020Time to read: 1 minsSee how to add inline style elements to a specific page in your Gatsby app with react-helmet.
Work Sans typeface notes
typography12 March, 2020Time to read: 1 minsMy notes for the Work Sans typeface. Work Sans is designed by Wei Huang and is published under the SIL Open Font License.
Source Sans Pro typeface notes
typography11 March, 2020Time to read: 2 minsMy notes for the Source Sans Pro typeface. Source Sans was designed by Paul D. Hunt and is licensed under the SIL Open Font License.
Performance notes
performance14 November, 2019Time to read: 13 minsAn overview of standard and custom performance metrics, and how you can track them with code or by using the Chrome DevTools.
Debugging notes
testing13 November, 2019Time to read: 2 minsTips and tricks you can use to debug JavaScript applications.
Useful Lodash utilities
lodashjavascript13 October, 2019Time to read: 8 minsYou can find here a collection of the most useful lodash utilities, with simple explanations, examples on how to use them, and more.
JavaScript string methods
javascript08 October, 2019Time to read: 1 minsSee the most useful JavaScript string methods, what they do, and examples on how to use them. All that, in the least possible space.
Yargs examples
node01 October, 2019Time to read: 4 minsLearn how to use Yargs to parse CLI arguments and create help menus with some practical examples. You can also find explanations for common CLI terms.
Curl examples
curl26 September, 2019Time to read: 2 minsExplore the basic curl options for the HTTP protocol with some practical examples.
Array prototype methods
javascript15 September, 2019Time to read: 2 minsSee the most useful JavaScript array methods, what they do, and examples on how to use them. All that, in the least possible space.
Notes from YDKJS - this & Object Prototypes
javascript11 September, 2019Time to read: 9 minsSome notes I wrote while reading this & Object Prototypes from the book series You Don’t Know JS Yet.
Tail calls, tail-recursive functions, and tail call optimization
javascript06 September, 2019Time to read: 3 minsFind out what is a tail call, a tail-recursive function, and how the compiler can optimize them.
Async/await resources
javascript01 September, 2019Time to read: 2 minsSome useful resources if you want to learn to use async/await.
Promise resources
javascript31 August, 2019Time to read: 3 minsSome useful resources if you want to learn how to use and write promises in JavaScript.
Event loop resources
javascript30 August, 2019Time to read: 3 minsSome useful resources if you want to learn about the event loop.
Learn to write async code in JavaScript
javascript30 August, 2019Time to read: 1 minsSome useful resources if you want to write async code in JavaScript.
Puppeteer examples
puppeteernode26 August, 2019Time to read: 2 minsLearn how to accomplish common tasks with Puppeteer through some practical examples.
Page transitions in Gatsby
gatsby25 August, 2019Time to read: 2 minsYou can find here some experiments I made with complex page transitions in Gatsby.
GraphQL queries inside MDX files
gatsby22 August, 2019Time to read: 1 minsSee what options you have when you want to query data with GraphQL inside your MDX files.
wrapRootElement vs wrapPageElement
gatsby21 August, 2019Time to read: 1 minsWe see the differences between two browser APIs in Gatsby: the wrapRootElement and the wrapPageElement.
Create a pre-commit hook
huskylint-staged20 August, 2019Time to read: 2 minsCreate a pre-commit hook with husky and lint-staged, and preserve the quality of your code
Unit testing with react-scripts
testingjavascript19 August, 2019Time to read: 1 minsWrite unit tests with react-scripts to quickly test some code if you don’t want to set up a build process just for testing.
Useful VS Code shortcuts
VS Code18 August, 2019Time to read: 7 minsYou can find here some practical VS Code shortcuts I use all the time that will help you improve your productivity.
Fix oversized icons from react-fontawesome
react17 August, 2019Time to read: 1 minsIf your react-fontawesome icons appear oversized when you first load the page in an SSR build, then this fix is for you.
A hacky way to display audio translations from Google Translate
HTML15 August, 2019Time to read: 1 minsSee how to display a short audio translation of a word or phrase from Google Translate in HTML.
Preserve new lines and spacing in CSS
CSS14 August, 2019Time to read: 1 minsSee how you can preserve the new lines and spacing of text in HTML by using the white-space CSS property.
How to break up long links with CSS
CSS14 August, 2019Time to read: 1 minsUse CSS to break up long text with overflow-wrap (aka word-wrap) or word-break.
React without JSX
react14 August, 2019Time to read: 1 minsI removed the JSX from the default CRA boilerplate for no particular reason.
Dark mode in React with Theme UI
gatsbyreact13 August, 2019Time to read: 3 minsLearn how to implement dark mode in your Gatsby application fast with the Theme UI library.
Modals in Gatsby
gatsbyreact25 July, 2019Time to read: 4 minsIn this post, you’ll see how to create modals in Gatsby, and how to render them in different pages to improve SEO.
Change the URLs of posts in Gatsby
gatsbyreact17 July, 2019Time to read: 3 minsLearn how to change the URLs of your pages in Gatsby.
Customize Google Font requests
typography24 June, 2019Time to read: 4 minsYou will learn how to customize your Google font requests through a practical example.
Working with data in Gatsby
reactgatsby23 June, 2019Time to read: 6 minsYou will see how you to work with data in Gatsby from hard coding them, to transformer plugins, and finally to MDX.
Storybook - Display code for render props components
reactstorybook23 May, 2019Time to read: 1 minsWe see a solution on how to display the correct code for render props components in Storybook.
Implementing dark mode in React
reactgatsby13 May, 2019Time to read: 10 minsIt may seem easy, but it’s deceptively hard to get it right. We break down 4 solutions for implementing dark mode in React.
Displaying hundreds of images with react-window and gatsby-image
reactgatsbyreact-window30 March, 2019Time to read: 6 minsSee how to display hundreds of images with react-window and gatsby-image by building an app that displays all the Hearthstone cards in a grid. You can also see the compromises you have to make.
A performance problem when you combine useReducer and useContext
reactreact-window27 March, 2019Time to read: 8 minsWe investigate a performance problem when using useReducer and useContext instead of redux and react-redux for application state management.
Deep copy vs shallow copy vs assignment operator
javascript07 March, 2019Time to read: 4 minsWe examine the differences between deep object copy, shallow copy, and assignment operator in JavaScript with code.
SEO + DX focused internationalization for Gatsby
reactgatsbyreact-intl07 February, 2019Time to read: 4 minsSupport multiple languages, and don’t compromise the SEO or the DX in your Gatsby application with react-intl.
Reveal animations on scroll with react-spring
reactreact-springreact-visibility-sensor06 February, 2019Time to read: 5 minsCreate reveal animations on scroll with react-spring and react-visibility-sensor.
Extremely fast loading with Gatsby and self-hosted fonts
gatsbytypographyperformance26 January, 2019Time to read: 4 minsDrastically improve the load time of your Gatsby application with self-hosted fonts from the typefaces library.
Gatsby background image example
reactgatsby25 January, 2019Time to read: 2 minsIn this post, you learn how to use the gatsby-image component as a background image.
Dealing with line endings in Windows with Git and ESLint
GiteslintVS CodeWindows12 January, 2019Time to read: 9 minsWhen you checkout a branch in Windows, Git may replace the line endings with CRLF. In this post, we’ll see how you can change it in LF and avoid the ESLint errors.
Configuring ESLint with Prettier
eslintprettierjavascript04 January, 2019Time to read: 9 minsWe’ll see 2 methods to configure ESLint with Prettier and write consistent and quality code.
Deploy a local WordPress site with the UpDraftPlus (free) plugin
wordpress28 November, 2018Time to read: 4 minsIn this post, we’ll see how you can use the popular UpDraftPlus plugin, to deploy a local WordPress site to a remote installation.
Four methods to keep a navbar at the top of the screen.
CSS25 November, 2018Time to read: 2 minsSee four methods you can use to keep a navigation bar at the top of the screen when the user scrolls down the page.
Using redux
reactredux22 November, 2018Time to read: 9 minsStop thinking about learning redux and learn by using it. In this post, we’ll break down some basic redux concepts while writing actual code.
Essential Gatsby plugins. Part 3, PWA/Styling and the rest.
reactgatsby25 October, 2018Time to read: 6 minsIn this post, we’ll see what plugins you can use to make your Gatsby app a PWA, style it and more.
Essential Gatsby plugins. Part 2, Markdown
reactgatsby24 October, 2018Time to read: 6 minsIn this post, we’ll see what plugins you can use in order to parse and display markdown files in your Gatsby app.
Essential Gatsby plugins. Part 1, SEO and Images
reactgatsby23 October, 2018Time to read: 5 minsIn this post, we’ll see what plugins you can use in order to improve the SEO of your Gatsby app and handle images effectively.