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...
In a previous post I created a page using Material Design's default typography classes and the fonts they are designed to work with. What I didn't realize is that you can also create custom typographical systems using SASS and the existing typographical infrastructure for material design. I will also explore whether Recursivehttps://www.recursive.design/ works well with Material Design Getting started Because we're using a variable font with custom axes we need to define the default values in the stylesheet's :root element and then use custom properties to handle inheritance problems in variable fonts as documented in Boiling eggs and fixing the...
> When working with underlining content other than links on the web be mindful of user expectations and provide some way to distinguish links from other types of underlined content. First, we had links that were underlined. Next, we had links and the capability to underline text with the uhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/u element. Then we wanted more control of what we could do with underlines so we moved to use border-bottom for our underlining playground because it gave us more flexibility than what the native underlining tools gave us at the time. But now Firefox has introduced new text-decoration and text-underline rules...
I've always been curious about how people create customized list marker items, the bullets or numbers that appear in lists for webpages. Firefox shipped an easier way to customize these lists using ::markerhttps://developer.mozilla.org/en-US/docs/Web/CSS/::marker pseudo-elements. The following example replaces all the markers for an unordered list with ✅. It also changes the text of the default markers so that if the emoji cannot be displayed for some reason, the default markers will be customized without the emoji. We add a second selector for the li element without the marker so we can introduce space between the marker and the content to...
> This post assumes you're working on a modern browser that supports @supports and the target features you want to use. This is not always a safe assumption to make. CSS Conditional Rules Module Level 3https://drafts.csswg.org/css-conditional-3/ defines CSS Feature Queries and the @supports rule that allows developers to code defensively and only use a feature if it's supported in browsers and provide fallbacks when it's not. For example, if we wanted to have different layouts for browsers that support grid and those that don't we can do something like this: css @supports display: grid { .container { display: grid; }...
Web Workers workers for short are a way to create multi-threaded applications in Javascript and get around the language's single-threaded application model. According to Surmahttps://dassur.ma/things/when-workers/: > Web Workershttps://developer.mozilla.org/en-US/docs/Web/API/Worker, also called “Dedicated Workers”, are JavaScript’s take on threads. JavaScript engines have been built with the assumption that there is a single thread, and consequently, there is no concurrent access JavaScript object memory, which absolves the need for any synchronization mechanism. If regular threads with their shared memory model got added to JavaScript it would be disastrous, to say the least. Instead, we have been given Web Workershttps://developer.mozilla.org/en-US/docs/Web/API/Worker, which are an entire...
A web bundle, formally known as a Bundled HTTP Exchangeshttps://wicg.github.io/webpackage/draft-yasskin-wpack-bundled-exchanges.html is a set of resources packaged together for distribution with a .wbn extension and application/webbundle mime type. The bundle contains multiple resources that make up your website. These range from HTML, CSS and Javascript to svg, audio and other elements necessary to make your site or applicatioon work. Bundles don't depend on users accessing the site or app once before it will work offlline. The bundle contains everything necessary for the site or application to run offline. Bundles retain the interactivity of the original site because it allows Javascript to...
display: flow-root > The post talks about elements of a W3C candidate recommendation, CSS Display Module Level 3https://drafts.csswg.org/css-display/valdef-display-flow-root. It's possible but highly unlikely, that things will change before the recommendation is finalized. Most developers myself included will be familiar with some values for the display property: - block - inline - inline-block - grid - flex And we use these in most of our everyday design, dating to the "age of floats" design philosophy. To see the full list check out the MDN article on the display propertyhttps://developer.mozilla.org/en-US/docs/Web/CSS/display. Using flow-root. The end of clearfix? Rachel Andrew's The end of the...
