One of the things I like the most about working with WordPress, although it can be frustrating at times, is the number of conditional tags available. This post will explore what they are, and some examples of how we use them. What they are Conditional tags are pre-packaged PHP functions that allow you to customize your WordPress theme based on whether the current item matches a condition or not Conditional Tags usually work with PHP if /else Conditional Statements. The if/else code checks if a statement is true or false. The example uses the issingle conditional tag. If the statement...
One of the things I find the most interesting about variable fonts is that you can animate them between different values. This post will explore how to create animations using Variable font axes, both default axes like weight and custom axes like casual available in Recursivehttps://recursive.design I will be using the following HTML: html Hello World Hello World The CSS is broken in multiple blocks for readability and ease of explanations. The first block performs the following tasks 1. Load the variable font using a modified @font-facehttps://developer.mozilla.org/en-US/docs/Web/CSS/@font-face syntax - The format for the font changes to reflect that it's a...
Variable Fonts give you a lot of flexibility while losing support for older browsers and operating systems. They reduce the number of font files required to render content and they give you options that are difficult or not possible with traditional web fonts. Quoting Jason Pamental's The evolution of typography with variable fonts: an introductionhttps://rwt.io/blog/2018/07/evolution-typography-variable-fonts-introduction: > As described by John Hudson, a variable font is a single font that acts as many: all the variations of width and weight, slant, and even italics can be contained in a single, highly efficient and compressible font file. What’s more: the format which...
Fontface observerhttps://fontfaceobserver.com FFO is a font loader library that allows you to control the behavior of our downloadable fonts. This post will work through how to use the script in a WordPress installation. Using FontFace Observer is a two-step process. We first need to load the script and then we need to add an inline script to tell FFO what to do. Loading the script We load the script using wp-enqueue-scripts; the same way that we'd load all our scripts and stylesheets. The following code snippet enqueues the Fontface Observer into a standalone function. However, if you're already enqueueing scripts...
Hooks are a way for one piece of code to interact/modify another piece of code. In the context of WordPress, they provide means for plugins, themes, and even WordPress itself to interact with WordPress core functionality. If you've worked with Javascript and callbacks you may be familiar with the concept of callbacks. There are two types of hooks: Actions and Filters. We'll discuss them in more detail below. WordPress provides many hooks that you can use, but you can also create your own so that other developers can extend and modify your plugin or theme. Filters Filters allow you to...
WordPress doesn't add async or defer attributes to scripts by default and there is no easy way to do it without customization. This post will discuss how to add the attributes and why it's important. This gets complicated by the fact that not all scripts need to have deferhttps://html.spec.whatwg.org/multipage/scripting.htmlattr-script-defer or asynchttps://html.spec.whatwg.org/multipage/scripting.htmlattr-script-async either because they were moved to the footer, or because it already has the necessary one, or because of special requirements. So there is no one size fits all solution. WordPress script\loader\taghttps://developer.wordpress.org/reference/hooks/scriptloadertag/ hook allows us to tweak individual script tags to add attributes or other items before they are...
PostCSS is an interesting tool and ecosystem. It is a CSS processor written in Javascript. What first brought my attention to PostCSS is Autoprefixer, my go-to tool for automating adding prefixes to my CSS. A few years ago they moved from a separate project into a PostCSS plugin. However, it wasn't until recently that I started looking at the original purpose of PostCSS, to be able to write future CSS for today's browsers. The goals of the research seek to answer the following questions: - Can we replace SCSS with CSS using PostCSS plugins? - How can we leverage new...
I love Visual Studio Code for writing anything ranging from Markdown to Javascript to PHP and even some Go and C/C++. One of the things that intrigued me the most is snippets and how they work once you insert them. The following example shows a VS Code snippet that will insert a figure with img and figcaption children. The elements in the JSON for the snippet are: - scope: What language or languages the snippet applies to - prefix: The short name for the snippet - body: The content for the snippet, including placeholders - description: json { "HTML figure":...
In recent years there has been a lot of new features that make magazine-style layouts possible and enticing for designers to use and for developers to implement. Some of these features are quite old in terms of when they were introduced but it wasn't until I saw the work of Jenn Simmonshttps://labs.jensimmons.com/, Jason Pamental and Andy Clarkehttps://stuffandnonsense.co.uk/design that I started seeing the real possibilities of doing design on the web. Sure we're still missing fragmentation primitives for the web and the purists seem to have won, so far. Regions are dead and no alternatives have surfaced yet. Clip-path Clipping an...
Seeing the latest HTTP 203 from Surma and Jakke I started thinking about what other things that you can do with arrays. The most frequent use of arrays in my code is to take an array of elements and do something to each member of the array. For example, the following snippet converts the document.images collection into an array and then uses forEach to loop over the array, and add the loading attribute to enable native lazy loading in Chrome and provide an alternative lazy loading library for browsers that don't support the feature natively. js if 'loading' in HTMLImageElement.prototype...
