A rather geeky/technical weblog, est. 2001, by Bram(us) Van Damme
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 …
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 🙂
Recently did the same but Brent was smart enough to write things down 😉
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 …
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:
console.log(), breakpoints, etc).crx file: you only have to create a .zip file 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.
Interesting take on bundlers:
Over the last several years, JavaScript bundling has morphed from a production-only optimization into a required build step for most web applications. Whether you love this or hate it, it’s hard to deny that bundlers have added a ton of new complexity to web development – a field of development that has always taken pride in its view-source, easy-to-get-started ethos.
@pika/web is an attempt to free web development from the bundler requirement. In 2019, you should use a bundler because you want to, not because you need to.
Here’s how Pika does it:
@pika/web installs modern npm dependencies in a way that lets them run natively in the browser, even if they have dependencies themselves. No Browserify, Webpack or import maps required.
npm install && npx @pika/web ✔ @pika/web installed web-native dependencies. [0.41s]
Pika does this by transforming all required packages into ES Modules, which are then stored in a web_modules folder. Import your packages from said location and you’re good to go:
import {slugy} from './web_modules/slugy.js';
const textToSlug = 'Hello World, @pika/web!';
document.getElementById('slugy-text').innerHTML = `slugy("${textToSlug}") <br/>➡️ ${slugy(textToSlug)}`;If your browser supports ES Modules, you can run the code snippet above directly in your browsers – no adjustments required 🙂
TC39 has shipped a homepage for following updates to the JavaScript specification:
This is the first part of a two-part project aimed at improving our information distribution and documentation. The website provides links to our most significant documents, as well as a list of proposals that are near completion. Our goal is to help people find the information they need in order to understand the specification and our process.
Looking forward to how this site will evolve in the near future, as it will make the research to keep my ESNext presentation up-to-date a bit more easy 🙂
Unpoly is an unobtrusive Javascript framework for applications that render on the server. It allows your views to do things that are not normally possible in HTML, such as having links update only fragments of a page, or opening links in modal dialogs.
Unpoly can give your server-side application fast and flexible frontends that feel like a single-page application (SPA). It also preserves the resilience and simplicity of the server-side programming model
Ooh, I like this a lot. Using some HTML attributes you augment your typical HTML+CSS website and have (parts of) new pages load up in modals, have them slide in, do partial updates, etc.
Here’s a modal for example:
<!-- preview.html -->
<a href="full.html" up-modal=".story">Read full story</a>
<!-- full.html -->
<!doctype html>
<html>
<head>
…
</head>
<body>
…
<div class="story">
<h2>Full story</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
…
</body>
</html>Unpoly will load the entire page full.html using Ajax, and then only show the contents of its .story inside the modal. The rest will be discarded.
That way your website will still work on browsers with JS disabled – including the very first webbrowser – and provide a richer experience to those who support have the latest and greatest browsers running.
Nice!
The film Solo: A Star Wars Story has been Oscar nominated in the category of Best Visual Effects. Visual Effects Supervisor Julian Foddy from ILM spoke to Al Moloney about making the film.
Highly interesting part on how they made the mountain from the train heist scene explode. Turns out not all is computer generated …
JS Paint is a nice web-based MS Paint remake and more…
The goal is to remake MS Paint (including its little-known features), improve on it, and to extend the types of images it can edit. So far, it does this pretty well.
Ooh this brings back memories! My first ramblings on my dad’s computer back in the day were in MS Paint …