March 4, 2024

How to lazy-load Google Maps

Given this HTML:

<div id="google-map"></div>

We can easily use IntersectionObserver to run code only when certain module is visible on screen, not only Google Maps.

In this case, we wait until the map is actually visible before initializing it.

const map = document.getElementById('google-map');
  if (map) {
    if ('IntersectionObserver' in window) {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            initMap(map);
          }
        });
      });
      observer.observe(map);
    }
    else {
      initMap(map);
    }
  }

This optimizes rendering, mainly on small screens, where that map is buried at the bottom of the page.

July 12, 2023

dvh units & hero sections

Just leaving this bookmarked so I can copypaste it later:

See the Pen
Untitled
by Nacho Toledo (@iign)
on CodePen.0

June 20, 2023

PHP for Beginners

I recently got asked about a good resource for learning PHP and I think this course by Jeffrey Way is really it.

It starts from the very basics and you end up slowly building your own little Laravel-like framework, which is of course intentional, since it’s a Laravel tutorial site, but that doesn’t make it less of a great idea. Go check it out:

Laracasts: PHP for Beginners

April 13, 2023

Learning Blender

I’ve been learning Blender and I think that’s reason enough to start posting again. Learning new things is exciting and also frustrating. Blender is a huge beast and at first its interface can be daunting. Slowly you start getting familiarized with its commands, shortcuts and menus and you’re able to convert that little cube into something quite nice to look at.

I actually started around 2020 following BlenderGuru’s famous donut tutorial. This year I resumed my learning in a bit more paced and serious fashion. I’m probably not going to become a 3D artist soon, but I’m experienced enough to know that think this skill will be useful at some degree on some project sometime in the future. In the meantime, I really enjoy it.

Screenshot from my blender interface and render, following Derek Elliot’s tutorial (link below)

There’s so many resources for learning Blender out there and like many other things, there’s a lot of garbage. But there’s also some amazing teachers and tutorials that have really blown my mind. Here’s a link that I’ll try to keep updated with the best material I found.

Happy learning!

Useful Blender learning links

November 25, 2022

Font Matrix & An Interactive Guide to Flexbox

CSS Flexbox

Josh W. Comeau gives an great deep dive into Flexbox. He put more than 60h compiling this amazing resource: An Interactive Guide to Flexbox

October 18, 2021

How to take a timed screenshot in macOS

UI

MacOS Mojave introduced a new screenshot interface with lots of options. One of them being the ability to set up a fixed timer to grab screenshots.

  1. Bring up the screenshot utility by pressing Shift + āŒ˜ + 5 or by pressing āŒ˜ + Space and looking for “screenshot.app”
  2. Once in the Screenshot utility, click on Options and select one of the three commands: None, 5 Seconds or 10 Seconds.

Terminal

I recently found out you can also take screenshots using the terminal:

screencapture -C -T10 Desktop/screenshot.png

Here’s a list of options from the help screen:

  -c         force screen capture to go to the clipboard
  -b         capture Touch Bar - non-interactive modes only
  -C         capture the cursor as well as the screen. only in non-interactive modes
  -d         display errors to the user graphically
  -i         capture screen interactively, by selection or window
               control key - causes screen shot to go to clipboard
               space key   - toggle between mouse selection and
                             window selection modes
               escape key  - cancels interactive screen shot
  -m         only capture the main monitor, undefined if -i is set
  -D<display> screen capture or record from the display specified. -D 1 is main display, -D 2 secondary, etc.
  -o         in window capture mode, do not capture the shadow of the window
  -p         screen capture will use the default settings for capture. The files argument will be ignored
  -M         screen capture output will go to a new Mail message
  -P         screen capture output will open in Preview or QuickTime Player if video
  -I         screen capture output will open in Messages
  -B<bundleid> screen capture output will open in app with bundleid
  -s         only allow mouse selection mode
  -S         in window capture mode, capture the screen not the window
  -J [style]  sets the starting of interfactive capture
               selection       - captures screen in selection mode
               window          - captures screen in window mode
               video           - records screen in selection mode
  -t<format> image format to create, default is png (other options include pdf, jpg, tiff and other formats)
  -T<seconds> take the picture after a delay of <seconds>, default is 5
  -w         only allow window selection mode
  -W         start interaction in window selection mode
  -x         do not play sounds
  -a         do not include windows attached to selected windows
  -r         do not add dpi meta data to image
  -l<windowid> capture this windowsid
  -R<x,y,w,h> capture screen rect
  -v        capture video recording of the screen
  -V<seconds> limits video capture to specified seconds
  -g        captures audio during a video recording using default input.
  -G<id>    captures audio during a video recording using audio id specified.
  -k        show clicks in video recording mode
  -U        Show interactive toolbar in interactive mode
  -u        present UI after screencapture is complete. files passed to command line will be ignored
  files   where to save the screen capture, 1 file per screen
July 14, 2021

Custom, accessible checkboxes

Usually I tend to vouch for not messing with the browser’s default inputs, for various reasons. Mainly: they’re still a pain to style in a consistent and accessible way across different browsers. But also, you’re introducing new form controls for your users. Ones that they have never seen in their lives. So make sure that whatever styles you add, at least try to keep those controls pretty obvious in order not to confuse your users.

Recently I had to implement a custom-designed checkbox for a client. You can see the result in the following Pen.

See the Pen Custom CSS Checkbox by Nacho Toledo (@iign) on CodePen.

Take into consideration that implementing a custom input requires a lot of attention to details and a lot of testing. How does your input look when disabled? When focused? When checked and disabled? How about on mobile? On screen readers?

Read more

I actually found this post after I had already built this checkbox and wrote this post, but it uses the same technique and is clearly explained.

June 17, 2021

Every WordPress configuration setting

While researching on a WordPress config I found this beautiful compilation of all the settings available in wp-config.php, by Mike Garret:

Also check out the default constants defined by WordPress in this file: WordPress/default-constants.php