Loose and funny recap of significant events that happened during the past seven seasons of Game of Thrones.
Right in time before the start of Season 8, this Sunday 🙂
Breaking Elements out of Their Containers in CSS with .full-bleed
About two years ago I wrote a post on How to Break Elements out of Their Containers in CSS so that they are “full bleed”.
Whilst the method which uses CSS Grid still is accurate and works really well (I use it “in production”), the “old” method I used (in case of situations where one is not using CSS Grid) can be simplified.
To recap: My technique required me needed to do some manual calculations that were dependent on the parent element. The result was a tad of CSS that contained some “magic numbers”:
.main {
width: 70%;
}
.main > .content--fullwidth {
width: 142.857142857%; /* = (100% / 70%) * 100% */
transform: translateX(-15%); /* = (100% - 70%) / 2 * -1 */
}Not very scalable, as it needs adjustment whenever the parent container’s width is altered.
Yesterday I was delighted to see that Andy Bell came up with a much simpler solution, that is not dependent on the parent container’s dimensions:
.full-bleed {
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}The blob of CSS first makes the targeted element fullwidth, then shifts its left edge to the center of the page, and then translates the entire element back to the left edge of the page again. Clever!
Where this technique differs from the CSS Grid technique is that he CSS Grid one will also work fine in scenarios where you want to stretch out an element inside a any parent container (other than the page), whereas the .full-bleed utility always stretches an element out so that it’s full page (not “full container”).
New WebKit Features in Safari 12.1
Jonathan Davis – Web Technologies Evangelist for Apple – has done a writeup on the new features that have landed in Safari 12.1, which is included with macOS Mojave 10.14.4 and iOS 12.2.
This release delivers web platform features that improve website integration with the operating system, new real-time communication capabilities, more compatible encrypted media support, and features that help developers reduce the need for polyfills.
Whilst Dark Mode most likely is the most touted feature, I’m especially excited to see Intersection Observer land as it allows you to do nifty stuff such as lazily load images, triggering events for position: sticky;, prefetch pages for links that are in the viewport, etc.
Supporting <input type="color" /> looks handy, yet (on iOS) I’d also like to be able to input a color hex code myself.
The <datalist> element also forms a nice addition, but the implementation (on iOS) needs some more work imho: the triangle on the right of the input makes me think it’s a dropdown. Upon tapping the input I get to see three of the defined options. Since I am under the impression that this control is a dropdown, I’m also left with the impression that I can only choose one of those three options that are initially presented … confusing.
Not mentioned in the post, but mentioned in the release notes, is the fact that Safari will now implicitly add rel="noopener" onto links that have target="_blank" set.
New WebKit Features in Safari 12.1 →
Safari 12.1 Release Notes →
🤔 Why should you care about rel="noopener"? Mathias Bynens – who else – has got you covered.
Native image lazy-loading for the web with [loading="lazy"]
Addy Osmani, on an upcoming web feature which is about to land in Chrome 75:
The
loadingattribute allows a browser to defer loading offscreen images and iframes until users scroll near them.loadingsupports three values:
lazy: is a good candidate for lazy loading.eager: is not a good candidate for lazy loading. Load right away.auto: browser will determine whether or not to lazily load.Not specifying the attribute at all will have the same impact as setting
loading=auto.
You can also feature-detect is using this little snippet:
if ('loading' in HTMLImageElement.prototype) {
// Browser supports `loading`..
} else {
// Fetch and apply a polyfill/JavaScript library for lazy-loading instead.
}In case the browser does not support it natively, you could load up a script that uses IntersectionObserver to lazyload images.
Native image lazy-loading for the web →
👨🔬 Feeling experimental? You can try it out in Chrome 74 by enabling “Enable lazy frame loading” and “Enable lazy image loading” through chrome://flags
Game of Oreos
Smile-inducing commercial by Oreo:
Counting down to April 14 … Valar Morghulis.
What is the Closest Planet To Earth? Well, it ain’t Venus …
As with everything: It Depends (when you’re looking):
When Earth and Venus are at their closest approach, their separation is roughly 0.28 AU — no other planet gets nearer to Earth. But just as often, the two planets are at their most distant, when Venus is on the side of the Sun opposite Earth, 1.72 AU away.
As the video show our closest planetary neighbour on average is not Venus but …
Displaying the (Numeric) Value of CSS Custom Properties (CSS Variables) inside Generated Content
Nice hack by Cassie: she uses counter-reset as a temporary storage space so that the value of a CSS Variable it can be used inside generated content (e.g. with the content property).
I was trying to display the numeric value stored in a CSS variable inside generated content…
Turns out you can't do that.
But you can do this…https://t.co/VCJ5wa7bww
(not saying you should, but you could)— Cassie Evans (@cassiecodes) March 19, 2019
⚠️ Do note that this only works with numbers, as counter-reset only accepts numbers.
Jeremy has also written down a few lines on a some of the limitations when using CSS Custom Properties
Displaying numeric CSS vars in generated content Demo (CodePen) →
💁♂️ On a personal note: Personally I’d consider data-* objects instead of CSS Custom Properties to inject the unread count. Like so:
See the Pen
YggdRe by Bramus (@bramus)
on CodePen.
I think it’s better place to store this kind of information (it is data, after all) and above that you’re not limited to using numbers.
Remains that this is a nice find by Cassie … I thought the time of clever CSS hacks was mostly over, turns out it’s not 🙂
Upgrade to PHP 7.3 with Homebrew on Mac
Recently did the same but Brent was smart enough to write things down 😉
Controlling Hyphenation in CSS
Richard has done a nice writeup on hyphenation in CSS. Turns out we have some nice controls to tweaking how hyphenation on your site works:
There is more to setting hyphenation than just turning on the hyphens. The CSS Text Module Level 4 has introduced the same kind of hyphenation controls provided in layout software (eg. InDesign) and some word processors (including Word). These controls provide different ways to define how much hyphenation occurs through your text.
In the image above for example you can see hyphenate-limit-lines at work (on the right), which can limit the number of consecutive lines with hyphens.
All you need to know about hyphenation in CSS →
💁♂️ Looking to hyphenate Emoji? That might not always work as expected …
GitHub Toggle Chrome Extension – Quickly toggle between a GitHub Repo and its GitHub Pages by the click of a button.
Last week Christian Heilmann (codepo8) released a handy bookmarklet that lets on switch between the GitHub Pages URL of a repo hosted on GitHub and the repo contents itself. This afternoon I took the liberty of transforming it into a Chrome Extension, mainly as an exercise to myself.
The extension adds a small button which becomes active whenever you are visiting a *.github.com or *.github.io domain. Upon clicking the button you toggle between the two URLs.
To create this plugin I started out with the core of Christian’s script and decorated the required Chrome Extension stuff around it. A few notes on the latter though:
- How to Make a Chrome Extension is a good starting point, but you’ll quickly want to check out the official documentation too.
- Chrome provides a nice API which you can find at its Developer Guide. But before checking those, it might be worth to take a peek at some of the examples. I especially found the cld, pageaction_by_url, and merge_windows examples interesting.
- With Developer Mode enabled, you can not only load your local in-development extension but also inspect it with the DevTools (and thus use
console.log(), breakpoints, etc) - To publish your extension head over to the (new) Chrome Web Store Developer Dashboard. No need to pack it locally into a
.crxfile: you only have to create a.zipfile and upload that zip.
GitHub Toggle Chrome Extension on the Chrome Web Store →
GitHub Toggle Chrome Extension Source (GitHub) →
🙇♂️ Manipulating Chrome through a JavaScript API reminds me of controlling Photoshop using JavaScript which has excellent scripting capabilities … using its Scripting API you can create a script for Photoshop to cut up a large image into tiles for use with Google Maps or a script that allows one to export/import translations from a Photoshop file.