Email or username:

Password:

Forgot your password?
150 posts total
Vadim Makeev

Uses #CSS grid, shape-outside, generated content, print styles, gradients, backgrounds, forced-color support, hover/focus styles, and more. The underlying HTML works well in screen readers (so it’s its own alt text) and even the ‘union’ symbol usually gets announced correctly.

If you want the crunchy bits:
adrianroselli.com/2018/12/a-cs

Vadim Makeev

This is an emoji art of a black cat made with a number of emoji moons.

The art follows this colon:

🌕🌕🌕🌕🌕🌕🌕🌕🌕🌕🌕🌕
🌕🌕🌕🌒🌕🌖🌒🌕🌕🌕🌕🌕
🌕🌕🌖🌑🌓🌑🌑🌕🌕🌕🌕🌕
🌕🌕🌗🌑🌑🌑🌑🌔🌕🌕🌕🌕
🌕🌕🌘🌕🌑🌕🌑🌔🌖🌑🌕🌕
🌕🌕🌖🌑🌑🌑🌑🌕🌕🌑🌔🌕
🌕🌕🌕🌖🌑🌑🌔🌕🌕🌑🌔🌕
🌕🌕🌕🌘🌑🌑🌒🌕🌕🌑🌔🌕
🌕🌕🌕🌘🌑🌑🌑🌔🌖🌑🌕🌕
🌕🌕🌕🌑🌑🌑🌑🌒🌑🌒🌕🌕
🌕🌕🌕🌑🌑🌑🌑🌑🌒🌕🌕🌕

Show previous comments
Malcolm Herbert

@ann3nova in my browser this appears to expand each emoji on mouseover ... no idea whether that was intended, but it's pretty cool nonetheless ...

screenshot of previous toot demonstrating emoji-expanding mouseover feature with an enlarged full-moon emoji about half-way along the right edge of the image.  layout of the other moons in the same row has altered slightly to give them more space.  unknown whether this is desired behaviour or not
Miakoda

@ann3nova
@ity

This is a reply to an emoji art.
The complimebt follows this colon:

That is interesting, mildly impressive, and adorable.

Grégoire M. :verifroue:

@ann3nova Nice, but I feel sorry for people using screen readers 😬

Vadim Makeev
Temporal is behind a runtime flag in the latest firefox nightly and passes 98% of tests this is not a drill :neocat_hyper:
Vadim Makeev

I have a suspicion that jzczhz and jzazbz color spaces were named by a cat walking on a keyboard 🥲
mastodon.scot/@svgeesus/113673

Roma Komarov

@pepelsbey Some namespaces are ok, but some are jzkjzxkjzxkj

Vadim Makeev

🔥 Remember Internet Explorer’s Page Transitions? THEY’RE BACK BABY!

👾 Demo: ie-page-transitions.netlify.ap
⌨ Repo: github.com/bramus/ie-page-tran

To configure these, use the meta tags from the olden days + load up the library.

Works in IE 5.5–7.0, Chrome 126+, and Safari 18.2 (buggy).

Vadim Makeev

The key words "MUST", "MUST NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED BUT REPULSIVE", "WRONG BUT WROMANTIC", "FREQUENTLY MISUNDERSTOOD", "NOBODY BOTHERS WITH THIS BIT", "SHOULDN'T REALLY BUT WE WON'T JUDGE", "REQUIRED IN ORDER TO WORK AROUND EVERYONE ELSE'S BUGS", "YOU DO YOU", and "OBVIOUSLY ABSURD BUT VERY COMMON FOR SOME REASON" in this document are to be interpreted as described in RFC 2119.

Show previous comments
Tor Lillqvist

@simontatham Sir, I hereby declare you have been selected as the winner of the Internet today.

amyipdev

@simontatham@hachyderm.io the lack of these terms in RFC 2119 should be submitted as an erratum (to RFC 2119)

ciara
@simontatham a terry davis like temple os word/phrase generator list of words
Vadim Makeev

This is what the iOS contact permission prompt should be

Newer model iPhone mockup. At the top of the screen is a grid of contact pictures and the text “You have 579 contacts. Contact information includes names, emails, photos, phone numbers, addresses and more”.

In the lower half of the screen, there is a header “Get permission before sharing contact info” with the text “We're not going to let you betray your friends that easily. You'll need to get their permission to allow ‘Flashlight+ Pro Free HD’ to access their contact info.”

At the bottom are two buttons: “Request Permission From 579 Contacts” and “Don’t Share”
Show previous comments
h3artbl33d :openbsd: :ve:

@dale_price

This mockup is fantastic and something we really need.

Sabrina Web :privacypride:

@dale_price there should be one more button, labeled "why the heck a flashlight needs my contacts info???"

Saupreiss #Präparat500

@dale_price

Im mildly concerned - were used that pretty much all our contact Info is automatically shared with at least one, usually two companies whose whole purpose are advertisement and data abuse. One of them is even praised as „open system“ by many.

Nathan Knowler

@Olliew I believe another way to avoid waterfalls is to use `<link rel=preload href=/imported-stylesheet.css as=style>`, but that’s limited in its application (i.e. doesn’t know about import conditions — so for Chromium it would undo that optimization). Some might also say it defeats the purpose of using the `@import` at-rule.

Vadim Makeev

Hey folks! This week my role at Adobe was eliminated and I'm looking for my next role in developer relations, evangelism, advocacy, etc. If you are hiring, or know someone who is, please reach out.

p.s. I promise to not get annoying about these texts, but if you hire me, I'll be able to stop. ;)

Jerome (He/Him)

@raymondcamden reposted on LinkedIn. Hoping for the best Raymond!

Thomas Steiner :chrome:

@raymondcamden Oh no 😢. Really sorry to hear this. I'll signal-boost your message.

Vadim Makeev

youtube.com/live/_T9RwUm1XA0

I may live to regret this, but I thought I'd try it out... I will be streaming _all_ next week. Starting off with (and maybe spending all week on) building out scoped custom element registries in Firefox.

Vadim Makeev

My employer Storyblok is looking for a Documentation Engineer to write documentation and tutorials about its headless CMS. Experience with modern web technologies required. Fully remote job within Europe (incl. UK) with a very nice direct manager and equally nice skip level manager 🙂 storyblok.com/job/4462206101-d #FediHire
#Job #RemoteWork #WebDev #JavaScript

Vadim Makeev

Happy browser choice day to those in Europe who celebrate! This is a second attempt to get it right. Brought to you by the iOS 18.2 update and the fine folks from @owa

An iOS dialog “About Your Default Browser”. The text goes: With iOS, you have a choice in your default web browser. By changing the default, you control which app opens when you open a website link. You can change the default web browser at any time in Settings. It ends with the Continue button.
The next “Choose Your Default Browser” step randomly lists many browsers, including Brave, Safari, Onion, Chrome, Edge, Firefox, etc. The list extends beyond the screen.
The same “Choose Your Default Browser” step but with the Firefox browser selected. It ends with the Set as Default Browser button.
The final “Replace "Safari" on Home Screen?” popup. The text goes: You can replace Safari with Firefox on your Home Screen, because you selected it as your default browser app. Safari will not be deleted from your iPhone. There are two buttons: Replace App and Don’t Replace.
niu tech

@pepelsbey @owa It's a narrow victory since all web browsers on iOS are based on the same WebKit engine (yet).

All web browsers on iOS are in fact based on WebKit.
django

I wonder what happens to your Homescreen PWAs when you switch to Firefox?

@pepelsbey @owa

Vadim Makeev

Inflation strikes again, but this time you might actually like it!

The console input already had `$(selector)` (alias for `document.querySelector(selector)`) and `$$(selector)` (~ `Array.from(document.querySelectorAll(selector))`)

In @firefoxnightly (135), there is now a `$$$(selector)` helper, that returns an array of elements matching the selector, including those in the ShadowDOM.

Hopefully this will make working with Web Components a bit easier 🙂

Kilian Valkhof

@FirefoxDevTools @firefoxnightly does it scope the selector to rootNodes or also cross the shadow boundary?

(eg will "div p" match a div>web-c>p?)

Vadim Makeev

✍️ Solved By Modern CSS: Feature Image

In my latest website design, I needed to use a feature image. Learn how I used container queries, clamp(), and :has() to build the responsive component.

🔗 Read it here: ishadeed.com/article/modern-cs

Vadim Makeev

Today I learned about Object.assign() and how it can make DOM node creation code look a bit more compact:

document.body.appendChild(
Object.assign(document.createElement('div'), {
style: 'color: red;',
className: 'foo bar',
textContent: 'Hello, world!'
})
);

Object.assign(target, source) copies all properties from source to target, and returns target.
developer.mozilla.org/en-US/do

Jan Andrle

@patrickbrosset yes, I use this very frequently, you can define quick helper such as `const el= (tag, idl= null)=> Object.assign(document.createElement(tag), idl);`. There are unfortunately some drawbacks:

- you can use only IDL (developer.mozilla.org/en-US/do)
- `*.append` returns undefined, so it is not easy to create whole template

BTW, I have WIP side-project github.com/jaandrle/deka-dom-e (jaandrle.github.io/deka-dom-el). There is `assing` function (github.com/jaandrle/deka-dom-e) with improvements

@patrickbrosset yes, I use this very frequently, you can define quick helper such as `const el= (tag, idl= null)=> Object.assign(document.createElement(tag), idl);`. There are unfortunately some drawbacks:

- you can use only IDL (developer.mozilla.org/en-US/do)
- `*.append` returns undefined, so it is not easy to create whole template

Vadim Makeev

Gather around the fire, kids. Today, I will tell you an HTMHell story about native HTML color scheme switching. It’s getting dark early in Berlin in the winter…

htmhell.dev/adventcalendar/202

The goat’s black-and-white face on the dark background is inside a pentagram with a div, table, role, and span placed at the points. Below the circle, the text reads: “HTMHell. Native HTML light and dark color scheme switching.” The top-right corner displays #9.
Ténno Seremélʹ

@pepelsbey
> …doesn’t allow users to choose a different color scheme for this specific website.

Browsers could have allowed that, if they cared 🤷

Luke

@pepelsbey `color-scheme: light` when a user has explicitly chosen a scheme should probably actually be `color-scheme: light only` else chrome on Android may try and force it to dark mode anyway.

Go Up