One of the things I like about the annual release schedule for Javascript is that the learning curve for new versions is much smaller than ES2015/ES6 and previous versions. Two of the features that I'm most interested in are optional Chaining and Nullish Coalescing. Optional Chaining Optional Chaininghttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optionalchaining, allows yout to check the existence of a property or short circuit and return undefined if any property in the chain that doesn't exist. In the example below, we define a zoo object with animal types and their names. js const zoo = { name: 'Alice', bird: { name: 'Hawkeye', }, dog:...
> This is a different take on hooks from Pre Commit Hooks: Combating Lazinesshttps://publishing-project.rivendellweb.net/pre-commit-hooks-combating-laziness/, written two years ago There are times when it would be awesome if we could force ourselves or our development team to perform some actions before committing code to the project's repository. Git has a set of tools called hookshttps://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks that can help with this enforcement proccess. The idea behind hooks is that they will run at set times during the request lifecycle and run the code you specify in the hook file. You can use hooks to run linting and accessibility checks before you commit...
prefers-color-scheme is geared towards accommodating user preferences. With prefers-color-scheme we can control the color scheme we use based on the operating system preferences for the user. It supports three values: - no-preference: The user has not specified a preference. This keyword value evaluates as false - light: The user has indicated that uses a light theme dark text on light background - dark: The user has notified the system that they prefer a page that has a dark theme light text on dark background. The example below taken from prefers-color-scheme: Hello darkness, my old friendhttps://web.dev/prefers-color-scheme/ shows one way to use...
I'm doing this post to reply to a series of tweetshttps://twitter.com/wendyareid/status/1204922559894097926 from Wendy Reid, chair of the W3C Publishing WG, presenting questions about the future of digital publishing. Rather than reply via tweets, I've consolidated my thoughts here and broken them down according to the tween in the stream that I think they address. \\Comment on tweet 1\\ I think you should start asking why is epub the predominant format outside Amazon and Apple and why there's no desire for even exploring another format and its implications. We already use XHTML in epub so why are we so afraid that...
> Thanks to Jason Pamentalhttps://twitter.com/jpamental for feedback on this post. Variable fonts have a problem as currently implemented. If you use font-variation-settings to control the different axes of the font then every time one changes you must change the other ones or they will reset back to their default values. We'll use Recursivehttps://www.recursive.design/ as the font for this post. Recursive has two custom axes: Monospace and Csual and three default axes: Weight, Slant and Italics. The axes information is shown in the table below. | Axis Designation | Axis Name | Min Value | Max Value | Default | |...
Most of the time it's ok to work with left and right to define elements of our design; that's what we're used to: English and other western languages that read from left to right and top to bottom. However if your design uses right to left text or you plan to internationalize the text you may want to consider logical properties. Logical propertieshttps://drafts.csswg.org/css-logical/ provide styles that control the logical layout of a document as opposed to the physical layout. In other words, logical layouts are independent of the physical look of the document. According to the specification: > This module...
Every so often I hear people complaining about accessibility and what should we do about it and more important whether we, as developers, should care about accessibility. The tweet below made me think about this again in a larger context. Should commercial websites be required by law to implement a minimum level of WCAG? a11y— dave.js @davejs November 25, 2019 I'm reminded of a phrase that was the mantra with the accessibility team at HTCTU while I was working on the Virtual Campus: There is never time to do it right but there's always time to do it over. The...
Web Portalshttps://en.wikipedia.org/wiki/Webportal as technology are not new. Java has used portletshttps://en.wikipedia.org/wiki/JavaPortletSpecification as defined in JSR 362 for the latest edition in containers for a long time. Teams have used other languages to use Portals. Chrome has reintroduced the concept of portalshttps://wicg.github.io/portals/ in a different context. They are meant to navigate from page to page and give you a preview of the content before you navigate to it. According to the specification: > This specification extends HTML to define a new kind of top-level browsing contexthttps://html.spec.whatwg.org/multipage/browsers.htmltop-level-browsing-context, which can be embedded in another document, and a mechanism for replacing the contents of...
When researching how best to use Recursive, I did the following exercise. I took the basic selectors for Prism.js and modified them to use Recursive as the primary font. I did it for the following reasons: - We're already using Recursive throughout the document so we don't need to download another font - Recursive has a monospaced axis that works well for code blocks - If needed we can do further work using other features of the variable font The modified code loooks like this: css codeclass="language-", preclass="language-" { color: 657b83; / base00 / / add Recursive to the font...
Recursivehttps://www.recursive.design/ is a variable font under development by Arrowtype that caught my attention by the possibilities it provides. Recursive provides two custom axes: One that moves from monospaced to sans-serif and another one that ranges from standard/linear to more casual/playful styles. It also provides three standard axes: Weight, Slant, and Italics. The combination of these 5 axes in 64 pre-defined instance variables makes for a very expressive font that can serve many duties in a site or application without adding font files and impacting performance. In a previous posthttps://publishing-project.rivendellweb.net/custom-material-design-typography/ I looked at using Recursive in the context of Material Design...
