This is an interesting trick to help consolidate assets and reduce the number of network requests you need to make. Let's assume that your project depends on one big library like jQuery or Backbone to work properly. Instead of depending on the network which may or may not be available or caches where you're at the mercy of the user and the browser you want to have control of the entire dependency tree for the build. The explanation for the code below is as follows: 1. We request the latest jQuery version from the jQuery CDN using the request library....
There is more to writing defensive CSS than what I thought. This post will look at feature queries the @supports at rule and CSS support for OS-level accessibility rules. Feature queries Before Feature Queries, we used to code multiple values for the same rules and relying on the order of the values to what will be rendered. In this example the browser supports both color spaces so the last one defined is the one that the browser will use. css .demo { background-color: 2632c2; background-color: oklch0.42 0.22 269; } This works for a single element or a single set of...
There are a couple of additional items that I though were important enough to cover: generics and DOM manipulation. Generics One of the things I find most interesting about Typescript is the idea of generic types. There are times when we don't know the type of the parameters we want to use, whether the kind of parameters we want to use wil change over time, or whether we want to use the same function in different contexts. For example, we may want the ID to be a string, or a number but we won't know which one it is until...
In the previous post we looked the tools we need to get Typescript transformed into Javascript to use in the browser. In this post we'll take a first look at the language itself and will discuss some features I've found particularly useful as I'm learning the language. Things to know about Typescript What do we mean when we say that Typescript is a superset of Javascript? Typescript is a syntactic superset of Javascript, meaning that any valid Javascript file with no errors is also a valid Typescript file. The Typescript compiler may output errors and warnings but will still compile...
Typescript is an interesting language. It's a typed superset of Javascript that you can compile to usable Javascript, either ES5 or later yearly versions of the language. Because it's not straight Javascript it requires compilation before it can be used in Node or browsers. Using CLI tools to work with Typescript The easiest way to use Typescript is to install the tool themselves and then run them through NPM scripts we set up in package.json. Installing Typescript To compile Typescript we need the Typescript compiler TSC that comes bundled with the NPM typescript package. To install it run the following...
I'm working on a starter application template to get me started when working on prototyping ideas. One of the things that I'm most interested on is how to create a login system for Express-based apps. Rather than crafting an authentication system from scratch, I chose to use Passport.jshttps://www.passportjs.org. Passport offers multiple login strategies or systems without much code overhead. These strategies make it easier to create multiple authentication channels for your app. For this post we'll explore the local authentication strategy. We don't want to add dependencies to the project, that would be done at a later implementation stage. This...
Doing software updates outside of what Apple offers with macOS is tedious and easy to forget. I also have at least three different systems to update: Homebrewhttps://brew.sh/, Ruby Gemshttps://guides.rubygems.org/rubygems-basics/ and Node.js installed with NVMhttps://github.com/nvm-sh/nvmreadme After the last time I forgot to update my Ruby gems, I decided that there had to be a way to, at least, group them all together to reduce typing. What I came up with was a zsh function that would group together Homebrew, Ruby Gems and Node via nvm updates. The post will discuss the rationale for the script, what it does and how to...
The Permissions APIhttps://developer.mozilla.orghttps://developer.mozilla.orgWeb/API/PermissionsAPI/UsingthePermissionsAPI gives use the ability to request permission from the user to use a given web API. This is an update of the 2020 posts Feature Policieshttps://publishing-project.rivendellweb.net/feature-policies/ and Working with Feature Policies in client-side Javascripthttps://publishing-project.rivendellweb.net/working-with-feature-policies-in-client-side-javascript/. Feature policies have been renamed to Permissions API and the API may have changed since the original articles were posted In this post we'll look at the Permissions API, how it works, how it's different from other APIs like geolocation that provide their own permissions, how is this different than using Content Security Policies, and how to incorporate it into your projects. What...
CSS variables are awesome, particularly when implemented using the @property at-rule but we need to remember that there can be too much of a good thing. This post will talk about how to define custom properties using @property, the differences between using @property and regular custom properties and some cases where we can have too many properties. Revisiting @property There are two ways to declare custom properties in CSS. The original is to just declare it and initialize it in one declaration: css :root { --color-background: oklch1 0 106; } We can then use the variable everywhere we want: css...
Centering content, particularly vertical centering, has always been very challenging to me. The old way These are some techniques to center content using CSS before Flexbox. Aligning text Aligning text is easy. We use something like this to center align all paragraphs: css p { text-align: center; } or a class to center specified content: css .center { text-align: center; } Centering Content My favorite trick to center larger blocks of content is to use margin attributes with the auto value. If you use the two-value margin declaration then you need to remember that the first value is for the...
