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...
Now that we've set up the baseline, let's see how much we can improve it. Enable a cache plugin We will first install a Cache Plugin to make easier to cache different portions of the website. I will use W3 Total Cachehttps://wordpress.org/plugins/w3-total-cache/ with the default settings. | Source | Form Factor | Performance | Best Practices | Accessibility | SEO | PWA | | --- | --- | :-: | :-: | :-: | :-: | :-: | | PSI | Mobile | 68 | 98 | 100 | 100 | N/A | | PSI | Desktop | 98 |...
It surprising to me that we still need to discuss font loading on the web after how long we've been able to load fonts using @font-face. Before we jump in let's do a brief trip down font loading memory lane. In the beginning we didn't have web fonts. We had to rely on web safe fonts that were guaranteed to be installed on most systems. CSS first introduced @font-face in 1998 but it faltered becaue, at the time, it did not providem any level of protection so font foundries were reluctant to let users load their fonts with @font-face so...
I think ch units in typography are cool, but there was something about them that I hadn't thought about and is something that may impact your site's performance metrics. This post will explore ch units, what they are and what they do. It will also discuss a problem presented by Silvestar Bistrović in Be careful with ch unitshttps://www.silvestar.codes/articles/be-careful-with-ch-units/ along with a possible solution. What are ch units According to the W3C's CSS Values and Units Module Level 3https://www.w3.org/TR/css-values-3/length-advance-measure candidate recommendation, the 'ch unit': > Represents the typical advance measure of European alphanumeric characters, and measured as the used advance measure...
