A rather geeky/technical weblog, est. 2001, by Bramus
Louis Hoebregts recreated the animation of last Apple’s recent Keynote Event using SVG, Canvas, and GreenSock:
See the Pen
Apple Keynote animation by Louis Hoebregts (@Mamboleoo)
on CodePen.
Crazy! 🤯
If you’re curious to see how he’s done it, in the demo below he breaks it down step by step:
See the Pen
Apple Keynote animation – How to by Louis Hoebregts (@Mamboleoo)
on CodePen.
color-mix(), and CSS color-contrast()
Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview:
Relative color syntax, e.g.
.bg-primary-100 {
background-color: hsl(from var(--theme-primary) h s 90%);
}
.bg-primary-200 {
background-color: hsl(from var(--theme-primary) h s 80%);
}
.bg-primary-300 {
background-color: hsl(from var(--theme-primary) h s 70%);
}
...CSS color-contrast, e.g.
.text-contrast-primary {
color: color-contrast(var(--theme-primary) vs white, black);
}CSS color-mix, e.g.
.text-primary-dark {
color: color-mix(var(--theme-primary), black 10%);
}
.text-primary-darker {
color: color-mix(var(--theme-primary), black 20%);
}All three features are part of the the CSS Color Module Level 5 spec and are a very welcome addition.
One of the albums that made it into my “2020 – Best Of” playlist on Apple Music is this lesser known gem by BRONSON.
For the fans of Apparat, The Blaze, Bicep, etc.
Half a century ago, on 20 July 1969, Neil Armstrong was in the final stages of the lunar descent, just a few thousand feet above the surface, when suddenly his on-board computer indicated a critical alarm. For three nail-biting seconds it looked as if the mission would have to be aborted. However, Armstrong was given a “go” to continue, and after several more alarms the Eagle touched down safely on the Moon.
Very insightful talk by Robert Wills, engineer at Cisco. No only does it give an insight in how to land a Lunar Lander on the moon, it also provides a thorough analysis of the hardware and software design principles that saved the mission.
In JavaScript one of the most important data types is Object. Sometimes we want to have more control over certain objects, such as being able to listen to who is reading the object property or updating.
One of the best ways to control an object is with a
Proxy. You can do a lot of fun things with Proxies, which we will explain in this article.
A Beginner’s Guide To Proxies in JavaScript →
MDN Web Docs: Proxy
💵 This linked article is stuck behind Medium's metered paywall, which may prevent you from reading it. Open the link in an incognito window to bypass Medium's ridiculous reading limit.
Temani Afif shares this clever trick to float an element to the bottom corner of a container.
The solution is threefold:
shape-outside to clip the wrapperClever!
Float an Element to the Bottom Corner →
☝️ Did you know that to resize the container in the pen above, only one line of CSS is needed?!
Google Cloud Platform has launched official support for PHP Cloud Functions using Functions Framework for PHP.
With it, an HTTP Cloud Function becomes as simple as this:
use Psr\Http\Message\ServerRequestInterface;
function helloHttp(ServerRequestInterface $request): string
{
$queryString = $request->getQueryParams();
$name = $queryString['name'] ?? $name;
return sprintf('Hello, %s!', $name);
}Functions that respond to Cloud Events can work with a \Google\CloudFunctions\CloudEvent instance:
use Google\CloudFunctions\CloudEvent;
function helloworldPubsub(CloudEvent $event): void
{
$name = 'World';
$cloudEventData = $event->getData();
if (!empty($cloudEventData['data'])) {
$name = base64_decode($cloudEventData['data']);
}
// …
}Installation per Composer
composer require google/cloud-functions-frameworkFunctions Framework for PHP →
Introducing PHP on Cloud Functions →
After reading yet another blog post about JS classes being “just sugar for prototypal inheritance”, I’ve decided to write this post to help clarifying, one more time, why this statement is misleading; a post that hopefully explains what’s the difference and why it matters to understand it.
I also used to say this — echo’ing statements by others — but will refrain from doing so from now on 😅
Oleksii Trekhleb has implemented the Seam Carving algorithm in JavaScript.
With this article I want to do three things:
- Provide you with an interactive content-aware resizer so that you could play around with resizing your own images
- Explain the idea behind the Seam Carving algorithm
- Explain the dynamic programming approach to implement the algorithm (we’ll be using TypeScript for it)
Using the algorithm it’s possible to resize an original image (center) without distorting important features in the image (left) unlike regular resizing which squeezes the image (right).
Using the resulting JS Image Carver you can see the algorithm in action.
Content-Aware Image Resizing in JavaScript →
JS Image Carver →
JS Image Carver Source (GitHub) →
google-webfonts-helper — A Hassle-Free Way to Self-Host Google Fonts
To self-host Webfonts from Google Fonts — which you should — there’s google-webfonts-helper which you can use. They offer the entire Google Fonts catalog and provide a way to easily download the fonts and accompanying CSS snippets you need.