A Beginner’s Guide To Proxies in JavaScript

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 …

CSS: Float an Element to the Bottom Corner

Temani Afif shares this clever trick to float an element to the bottom corner of a container. The solution is threefold: Float a full-height wrapper (which contains the image) to the right Use flexbox to place the image at the bottom inside that wrapper Use shape-outside to clip the wrapper Clever! Float an Element to …

PHP Cloud Functions on Google Cloud Platform with “Functions Framework for PHP”

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 …

JavaScript Classes are not “just syntactic sugar”

Andrea Giammarchi: 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 …

Seam carving: content-aware image resizing … in JavaScript

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 …

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. google-webfonts-helper → Via Sebastian

Accessibility in Design Systems

Good slidedeck by Benno Lœwenberg: We all are only sometimes abled. Therefore accessible solutions benefit everybody. Treating accessibility not just as an afterthought to comply with regulations, but as an essential UX factor right from the start can lead to building better products and services. This talk is about how to lay an accessible foundation …

Identify and Extract Pseudo-Element Selectors from built-in HTML Elements using DevTools

Recently Stefan Judis shared how to style the browse button of a file selector using the ::file-selector-button pseudo-element TIL – you can style the file input "browse" button using `::file-selector-button`.😲Supported in Firefox, Chromiums starting with 89 & Safari Tech preview.🔗 MDN: https://t.co/56jACY9qK1🔗 Compat data pr: https://t.co/vrFNS4LdISVideo alt: Example of a styled browse button. pic.twitter.com/3YQ0njkX0J— Stefan …

JavaScript Temporal API — A Fix for the Date API

Anyone who has worked with dates and time in JavaScript knows how broken the built-in Date is. In the near future we’ll be able to use Temporal instead, an ECMAScript feature currently at Stage-3 Nathan Sebhastian has a good overview on how it compares to Date, along with some practical examples. The new Temporal API …