In this CSS Café talk, Josh W. Comeau digs into several Layout Modes and a few common misunderstandings about CSS (such as Stacking Contexts)
Also see the Understanding Layout Algorithms post Josh recently published.
A rather geeky/technical weblog, est. 2001, by Bramus
In this CSS Café talk, Josh W. Comeau digs into several Layout Modes and a few common misunderstandings about CSS (such as Stacking Contexts)
Also see the Understanding Layout Algorithms post Josh recently published.
Over at Smashing Magazine, Louis Lazaris covers a few of the lesser known HTML attributes:
enterkeyhint
Attribute For Virtual Keyboardstitle
Attribute On Stylesheetscite
Attribute For The <blockquote>
And <q>
Elementsdownload
Attribute For The <a>
Elementdecoding
Attribute For The <img>
Elementloading
Attribute For The <iframe>
Elementform
Attribute For Form Fieldscite
And datetime
Attributes For Deletions/Insertionslabel
Attribute For The <optgroup>
Elementimagesizes
And imagesrcset
Attributes For Preloading Responsive ImagesThose HTML Attributes You Never Use →
~
Like Carbon or Ray, but the output is an animated GIF.
Beware though: the generated GIFs are HUUUUUGE. The embedded animation above originally was a 14MB GIF. Converted to an MP4, it’s only 163kB.
Recoded →
Recoded Source (GitHub) →
The Web is an enormous asset and Mozilla is committed to protecting it and making it better. Powerful economic and technological forces have combined to make the Web the way it is today. Making it better won’t be easy and we can’t do it alone.
color-contrast()
– Target Contrast Ratio DemoNice demo by Daniel Yuschick, showing how color-contrast()
does its thing. Using the controls you can change the target contrast using a keyword or a custom value.
Good use of Custom Properties there as well!
👨🔬 To check this demo you’ll need Safari Technology Preview 122+ with the CSS color-contrast()
Experimental Feature enabled.
Jason Knights dissects a form that’s:
He then takes his own approach that uses an actual <form>
that can be submitted, along with some extra JS sprinkled on top to prevent a full reload.
By using PROPER
name=""
in the markup and a proper form, all we need to hook is the form, prevent the submit, pull theFormData
and send it.
Unlike Jason I wouldn’t resort to XHR, but go with fetch()
instead, like so:
document.getElementById("form").addEventListener("submit", async (event) => {
event.preventDefault();
const form = event.currentTarget;
const r = await fetch(form.action, {
method: form.method,
body: new FormData(form),
});
const json = await r.json();
// do something with json
});
Using FormData And Enhancing Forms With JavaScript →
FormData – Web APIs | MDN →
💵 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.
Olympe is a monospace font revived from an Olympia typewriter. The first weight, regular, is based on the original weights of the font that was on this machine, and the light weight, close to hairline actually, has been designed from scratch, with a heavy punctuation, because who doesn’t like a bit of contrast?
When I was 12, I used to stop at my mum’s work every Friday after school to make my typing assignments. It had already forgotten, but by seeing Olympe mono I was reminded that it was on an Olympia typewriter indeed 🤩
jless
— A command-line JSON viewerjless is a command-line JSON viewer designed for reading, exploring, and searching through JSON data.
Installation via Homebrew
brew install jless
I laughed so hard, I nearly peed myself 😅
Matthew Philips made something odd-looking: a JavaScript framework that lets you add DOM bindings using a CSS-like syntax.
Say your framework of choice generates this markup:
<div class="counter">
<button
type="button"
class="increment">Increment</button>
<button
type="button"
class="decrement"
disabled>Decrement</button>
<div
class="result">
Count: <strong class="count">0</strong>
</div>
</div>
Using Corset, you can then add behavior as follows:
import sheet, { mount } from 'https://cdn.corset.dev/v1';
mount(document, class {
count = 0;
bind() {
const { count } = this;
return sheet`
.counter {
--count: ${count};
--inc: ${() => this.count = count + 1};
--dec: ${() => this.count = count - 1};
}
.count {
text: var(--count);
}
.increment {
event[click]: var(--inc);
}
.decrement {
attr-toggle[disabled]: ${count === 0};
event[click]: var(--dec);
}
`;
}
});
If you’re getting flashbacks to Action Sheets or Behavioral Extensions, then that’s totally legit.
Here’s a working demo using the code posted above:
See the Pen
Counter example by Matthew Phillips (@matthewp)
on CodePen.
This Twitter thread by the author holds some good information and reasoning behind it all:
Announcing Corset, a new approach to declarative DOM binding! https://t.co/21lbrF7BMc
Corset is an alternative to frameworks like React and Vue. Instead of JSX/templates, you use a CSS-like DSL to bind to the DOM that already exists.
This difference has profound implications 👇🏼
— Matthew Phillips (@matthewcp) March 11, 2022