Load the fonts first for page speed

November 21, 2021 at 1:14 pm | blabbing, Design, Programming, web.

To increase page speed for blocking font rendering and to reduce the font rendering time when the page loads on your site, add your fonts as a preload at the top of your page.

This may seem counter intuitive to load an asset ahead of time for page speed, but it makes sense in two respects.

  1. When the CSS renders it will get to the fonts and then go fetch them and wait for them to come back and then go on to get other assets that are related to the CSS. This is referred to as a “Blocking call” which means nothing is going to happen until this comes back. Google does not like this and will penalize your page speed for this. Once you preload the fonts you will notice that your fonts are no longer listed as a block call and you can see this in your network tab in the inspector.
  2. If the fonts are not preloaded you might see a noticeable flicker or shift in the page once the font in rendered in the page. Many people will even set an opacity on the body tag and transition it in once the fonts are available to avoid this shift. Preloading avoids this shift because the fonts are immediately available in the document render.
<link rel="preload" href="PATH-TO-YOUR-OTF-FONT.otf" as="font" type="font/otf" crossorigin>
<link rel="preload" href="PATH-TO-YOUR-WOFF-FONT.woff" as="font" type="font/woff2" crossorigin>

For preloading Google fonts it’s usually recommended that you preconnect as well as preload the CSS

<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:[email protected]&display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:[email protected]&display=swap'>

Triggering javascript on change programmatically and have it bubble

October 28, 2021 at 10:01 am | Programming, web.

A problem I ran into recently is that updating an input value is a form using javascript or jQuery is fairly easy but sometimes this programmatic update of the field does not trigger an onChange event that another piece of code is listening for. Adding a dispatchEvent on the selector can accomplish this.

<script>
  // Get the selector
  const $emailField = document.getElementById('Email');
  // Update the selector value
  $emailField.value = "[email protected]";
  // Trigger a dispatchEvent on the selector
  $emailField.dispatchEvent(new Event("input", { bubbles: true }));
</script>

Working with Hubspot forms onFormSubmit

October 13, 2021 at 11:02 am | Programming, web.

Getting values from the hubspot form in it’s onFormSubmit handler can be pretty tricky so here is a quick tip.

Add the onFormSubmit closure function to the hbspt.forms.create script and then use .find() to get the value of individual form elements that you need. At that point you can use them to pass to tracking or cookies or whatever.

<script>
  hbspt.forms.create({
	region: "na1",
	portalId: "555121212",
	formId: "23845959d-1d80-4af7-81ae-5b3f5c52adf483",
	onFormSubmit: function($form) {

		var firstname = $form.find("[name=firstname]").val();
		var lastname = $form.find("[name=lastname]").val();
		var email = $form.find("[name=email]").val();
		var jobtitle = $form.find("[name=jobtitle]").val();
		var company = $form.find("[name=company]").val();
		
	} 
});
</script>

Finite and infinite games

April 15, 2021 at 12:05 pm | blabbing.

Something I ran across recently that I liked.

There are two types of games: finite games where rules are known & an end is set, & infinite game, where the rules can change and the end is unknown, & rules can change. Your outlook/beliefs will determine the game you believe you are playing.

Read more »

Fix for svg background images in IE11

June 2, 2020 at 2:17 pm | web.

Problem: Sometimes SVG images when used as background images do not show up correctly in IE11. This can sometimes show up as not covering the specified element background.

The trick here is the add the height and width back into the SVG as it might have been stripped out. Take the height and width from the viewBox attribute.

Before

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2785.8 708.6" >

After

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2785.8 708.6" height="708.6" width="2785.8">

Git and WordPress on a shared hosting environment

June 1, 2020 at 1:57 pm | Programming, web, Wordpress.

If you have a small blog or series on blogs on a shared hosting environment and and want to take advantage of GIT but still want to let your hosting provider keep your WordPress up to date, you can easily setup GIT repos and deployment to make your life easier.

Shared hosting services are great for a small site or if you have a bunch of small sites where you can setup different projects and not have to worry about the server environment or keeping WordPress or Drupal up to date. Hosting providers like Dreamhost, Bluehost, HostGator, SiteGround etc. are a great solution for some because they provide the hosting and upkeep of the WordPress install and you are free to add themes and plugins and do custom development on top. Most of these providers will automatically update the core WordPress on a regular basis. For business and enterprise class WordPress hosting I prefer Pantheon.

Read more »

Mobile ABV Widget

October 17, 2018 at 2:25 pm | blabbing.

I was reminded that I made this mobile friendly Alcohol by Volume widget the other day.
It uses basic slider or text inputs to do the calculations associated with finding the ABV in your beer/wine/cider. I made it because I couldn’t find an easier one online. It uses basic jQuery UI mobile components.

You can get to it here:
https://www.fuzzyraygun.com/gravity/

One of these days I’ll put it in Vue.js and let people store their calculations.

Ember on Apache

February 22, 2017 at 9:50 pm | Programming, web, Wordpress.

Ran into this recently and it reminded me of how WordPress does URL permalink routing. Since Ember routes are handled by the index this helps Ember on Apache route to links, especially when you are coming directly to a link or deep linking.

This should go in the root .htaccess file in the same way that WordPress needs as similar thing.

RewriteEngine On
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html [L]