In addition to pointer events, we should also provide a way for keyboard-only users or those users who prefer keyboard navigation to access content. This is particularly important when using custom items like video players and others. We'll look at how to use UI events and Keyboard Event Codes to work with our content. keyboard shortcuts We can use keyboard events and the keyboard event code values to create shortcuts for our apps. In this example, also from the custom video player, we set up a keydown event in the window object to listen for key presses. When the key...
Having to code for touch, mouse and keyboard events is a pain. There has to be a way to make the code easier to work with events. The code will not be shorter we have to work around the lack of pointer event support in mobile Safari but it'll be easier to reason through and, in time, will become shorter when mobile Safari implements the API. In this post, we will discuss both pointer and keyboard events, how to use them together to provide a better user experience, and alternatives for browsers that don't support the API particularly Safari Pointer...
I was looking at Brad Frost's site to look at how he did the little circles at the top and bottom of the page. Hint: he does with a ton of SVG circles and some very interesting use of JavaScript to create the effect. When I saw the CSS code I came across multiple definitions for grids and that got me thinking, again, about automation and how to use CSS properties to make the code easier to work with. CSS properties and Houdini custom properties One of the problems about regular CSS variables also known as CSS custom properties is...
We saw how to create a working templating system using one of many available templating engine Nunjuckshttps://mozilla.github.io/nunjucks/ from Mozilla. But it takes a while to get that first step where the template building works as intended. There are platforms that automate the process. The one that has been on my radar for a while, and was recommended to me, is eleventyhttps://www.11ty.io/ Unlike the previous two strategies, Eleventy requires a dedicated setup and is geared towards Node development rather than Gulp. Rather than start from scratch I've taken the eleventy base bloghttps://github.com/11ty/eleventy-base-blog template from Github as my starting point. I will...
This is a response to a page that raised enough concenrts for me to want to write about it but not important enough to put into my regular post rotation The page that started the research and this piece is: Frequently Raised Concernshttps://bubblin.io/concerns. Like they did I will monologue and do my best to provide additional alternatives and try not to come too hard on the criticism. TL;DR Supporting a single rendering engine and OS is dangerous, particularly when such rendering engine lags behind in standards support and in communication towards developers, other browser makers and standards bodies, may not...
The idea behind SVG sprites is similar to sprite sheetshttps://www.codeandweb.com/what-is-a-sprite-sheet using CSS to place the images on the page. The structure of the demonstration project is as follows: text svg-sprites ├── gulpfile.js ├── icons └── package.json We'll use Gulp to create the sprite and the gulpfile.js contains the instructions for the build. The details of the process will be described in the next section. The icons directory will hold the individual icons that we'll use in the sprite package.json contains all NPM-related information necessary for the Gulp process to run. Creating the sprite sheet As with all Node projects, first,...
A next step is to build our own templating solution using Gulp. I've spent longer than I wanted in crafting this solution and it's still, like the idea I based this from, has a lot of things I'm working on understanding and changing. The idea of using a templating engine is to have options when creating content. We can create partial content blocks and define different layouts for our content. Granted, this moves away from our simple model when using templates but we gain more flexibility in what we can do with the templated content. We need to install the...
I've looked at static site generators like Hugo, Gatsby, and Jekyll among others. They all have their strengths and weaknesses but they are overkill if all you want to do is throw together a quick prototype with a few pages and stylesheets. Markdown, HTML and templates: Version 1 Before we start we'll take the following steps: - Create our root directory static-gen - Create two working directories public and src - Initialize package.json bash mkdir -p static-gen/src mkdir -p static-gen/public npm init --yes The first version uses the wrap-around system that I use to generate content for my blog. I've...
!Containment may help prevent this and make CSS even more awesomehttps://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/css-is-awesome Whenever we insert HTML elements after the document loads by inserting new CCSS rules or new elements via Javascript, we may be slowing down the rendering of the page because every change means the browser has to navigate all the elements in scope and re-render them as needed, they may have been moved or changed their dimensions when our target element grew smaller or larger; Layout is almost always scoped to the entire document meaning that the browser will navigate all the way to the beginning of the document...
Latex is an old-school language for document typesetting. It was created by Donald Knuth to typeset his book The Art of Computer Science. You still see LaTex in scientific articles and papers If you're only familiar with HTML, Latex syntax will look strange. Rather than tags and attributes we have a preamble, package declarations, and instructions. A basic LaTex article, set to print in portrait mode with a body text size of 12 points looks like this: tex \usepackage{amssymb} \usepackage{epstopdf} % Broken into two lines for readability. In production % the command would go in one line \DeclareGraphicsRule{.tif}{png}{.png} {convert 1...
