Bram.us – Page 3 – A rather geeky/technical weblog, est. 2001, by Bramus

The Gap between UX/Design and Development: The Design Engineer

Egor Kloos on closing the gap between design and development:

I have never worked anywhere where there wasn’t someone trying to close the gap. This role is often filled in accidentally, and companies are totally unaware of the need. Recruiters have never heard of it, and IT consultancies don’t have the capability in their roster. We now name the role “Design Engineer” because the gap is widening, and the role has become too complex to not exist.

I like to consider The Gap as the part in the organisation where I thrive the most, spanning up to the role of Backend Developer and with an eye for UX and Design.

Don’t wholeheartedly agree with the fact that the role is entirely new though: when I started out professionally 15+ years ago, we called this person “The Slicer” instead of the Design Engineer / UI Engineer.

The Gap →

Gone Diving

As this post gets published I’m on my way to the airport, to go on a 7-day diving holiday in Egypt.

Emperor Angelfish, Pomacanthus Imperator, Red Sea, Egypt

Under normal conditions about 20 of my buddies from my diving club Bubbledivers would join, but this year is different. Because we were not certain if and when we could depart, only 4 of us responded to the late call. As Egypt is rather close by, very affordable, and has a lot to offer I didn’t hesitate to join.

Later today we’ll land in Hurghada, and immediately hop on our boat which will be our home for the next few days — yes, we’re doing a “liveaboard”. From there we’ll go northbound towards the Suez Gulf. On our way we’ll dive the wrecks at Abu Nuhas, be amazed by the beauty of Ras Mohammed, the wonderful Thistlegorm wreck, etc.

Plan of the Thistlegorm Wreck

It’ll be my fourth diving-holiday in Egypt and I’m not bored with it at all … watching the beautiful underwater life and visiting the wrecks is something that brings me joy and inner peace.

Red Sea Clownfish, Two-banded Anemonefish, Amphiprion bicintus, Red Sea, Egypt

To give you an idea of what it’s all about, here’s a video from my last visit in 2018, where we did about the same route as we’ll do now:

🤿👌

RenderingNG: The next-generation rendering architecture for Chrome

RenderingNG is a re-architecture of the entire rendering pipeline of Chrome, for greatly improved reliability, scalability and extensibility. Listen in to find out how it works and why it makes the web better.

Thanks to these advancements we get better rendering of tables, container queries support, features like Scroll-Linked Animations, etc.

Curves and Surfaces

From fonts to animated movies, curves and surfaces constitute fundamental building blocks of many geometrical designs.

We’ll see how complex surfaces are a natural extension of plain two dimensional curves.

Throughout this article I’ll keep jumping back and forth between curves and surfaces to highlight how the ideas we develop for wiggly lines can be expanded onto three dimensional shells that we can shape.

Wonderful article with stunning interactive visualizations by Bartosz Ciechanowski! 😍

Curves and Surfaces →

CSS Full-Height Slideshow with Centered Slides thanks to `grid-auto-rows`

Recently I saw this tweet float by:

CSS experts, I need your help! 👇

I need a container that vertically centers its children and that can be scrollable if necessary.

It should be a single container. Not 2.

<div class="container">
<item>Vertically centered</item>
<item>Vertically centered</item>
</div>

— Álvaro Trigo 🐦🔥 (@IMAC2) September 24, 2021

Now that sounds like a job for CSS Grid to me!

See the Pen CSS Full-Height Slideshow with Centered Slides by Bramus (@bramus) on CodePen.

The code is documented, yet the key part here is to:

Use grid-auto-rows: 100vh (or soon 100dvh) on the container to place the children inside rows of 100vh each.
Use place-items: center; on the container to center the items themselves inside their assigned row.

Because we’re using grid-auto-rows, the code will work with any number of direct children in the container.

🔥 Like what you see? Want to stay in the loop? Here's how:

React Router v6

We are publishing a new major version of React Router so you can ship smaller, more efficient apps which will in turn lead to better user experiences.

React Router v6 is the successor to all previous versions of React Router including v3 and v4/5. It is also the successor to Reach Router.

React Router v6 →

Practical CSS Subgrid Video Tutorials

With CSS Subgrid already being supported in Firefox (ever since version 71), and Chromium recently having started work on it, it might be the perfect time to start learning about CSS Subgrid.

That’s exactly what Kevin J Powell thought too, with his “October Subgrid Awareness Month”, so he created a bunch of videos on the topic which I’ve collected here:

That third video is a bit of a lengthy one, but as Kevin states: bear with him, it’ll lead to nice stuff.

💁‍♂️ You should definitely give Kevin and his YouTube channel a follow there.

Chris Coyier and Dave Rupert also talked about subgrid. In the first part they cover an example originally by Eric Meyer.

Here’s the pen they were working on:

See the Pen
Form Rows with Subgrid by Chris Coyier (@chriscoyier)
on CodePen.

Remove GoPro Webcam App + Plugin

A while ago I installed the GoPro Webcam App, only to find out my GoPro is too old to work with it. Although I had removed the GoPro Webcam Application itself from /Applications, the GoPro Webcam would still be shown in a list of choices.

To remove the GoPro Webcam from that list, you need to remove the file /Library/CoreMediaIO/Plug-ins/DAL/GoProWebcam.plugin

In Finder, use SHIFT+CMD+G to navigate to /Library/CoreMediaIO/Plug-ins/DAL/ and then remove the file GoProWebcam.plugin

☝️ If you have other Virtual Cameras installed, you’ll also find them in that folder.

Alternatively, run this in Terminal:

sudo rm /Library/CoreMediaIO/Plug-ins/DAL/GoProWebcam.plugin

(Yes, sudo is required here)

Once the file is removed removed you’ll need to restart the affected applications, as they had already loaded that plugin into memory.

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

No-JS Fingerprinting

No-JS Fingerprinting is a POC that you can do fingerprinting — a way of uniquely identifying browsers — without the need for JavaScript.

Fingerprinting is a way of identifying browsers without the use of cookies or data storage. Created using properties like language and installed fonts, your fingerprint stays the same even if your browser is in incognito mode.

This demo further illustrates that fingerprinting is possible — even without JavaScript and cookies.

After clicking on “See more details” — or by taking a peek at the HTML source — you can see that the fingerprinting is done using:

@supports rules (including @supports rules to detect which browser you are using)
the headers sent in the request
checking the fonts installed on your system.

When a certain aspect is supported, a request to a server-side script located at /signal/{sessionId}/{feature}/ is made to gather everything:

@supports(-webkit-app-region: inherit) { .css_probe_1 { background: url('/signal/123456789/cssBlink/') } }
@supports(-moz-appearance: inherit) { .css_probe_2 { background: url('/signal/123456789/cssGecko/') } }
@supports(-apple-pay-button-style: inherit) { .css_probe_3 { background: url('/signal/123456789/cssWebkit/') } }
@supports(-webkit-touch-callout: inherit) { .css_probe_4 { background: url('/signal/123456789/cssMobileWebkit/') } }
@supports(-moz-osx-font-smoothing: inherit) { .css_probe_5 { background: url('/signal/123456789/cssMacGecko/') } }
@supports(accent-color: inherit) { .css_probe_6 { background: url('/signal/123456789/cssTorGecko/') } }
…
@font-face { font-family: 'Roboto'; src: local('Roboto'), url('/signal/123456789/robotoFontAbsence/') format('truetype') }
@font-face { font-family: 'Ubuntu'; src: local('Ubuntu'), url('/signal/123456789/ubuntuFontAbsence/') format('truetype') }
@font-face { font-family: 'Calibri'; src: local('Calibri'), url('/signal/123456789/calibriFontAbsence/') format('truetype') }

No-JS Fingerprinting →
No-JS Fingerprinting Source (GitHub) →