This is an absolutely beautiful design system, and a beautiful way of presenting one. I love the interplay of the organic serifs and handwritten script for inputs, with all the attention to detail for balanced line heights and weights.
Wish there were custom checkboxes and radio buttons - they're the only thing that break immersion at the moment! Everything else is absolutely stellar. Might inspire me to finally make that blog I've been thinking about!
The font doesn't seem that great to me. Not sure exactly why but while it's not quite difficult for me to read, it's not as easy as other common fonts.
Yes, but it shouldn't be to the point that it gets in the way of the content. But I'm not a web designer and I'm not the intended audience. Still, I like to click through to interesting (to me) things and check them out. The typeface kept me from investigating as far as I normally might.
I think that's kind of the whole point. It is introducing an ambience, it is deliberately made quirky and irregular like the handwriting of some. It is not a common font and that means our eyes are going to be slightly unused to reading it.
I appreciate it if sites demoing their CSS embed the non-minimized version. I wanted to take a quick peek at what it looked like, but instead I have to go through a few additional hops to grab the source. Or at least just a clickable link directly to the unprocessed form.
> Permitted parents: Any element that accepts flow content. Note that a <header> element must not be a descendant of an <address>, <footer> or another <header> element
I think you can use a header more or less anywhere, and it is a header for content contained by its parent.
Good point. Apparently (MDN) there should only be 1 main on a page, and it should not include sidebars, generic headers/footers repeated on other pages, etc.
So, you might have a site-wide header, a main containing a content-specific header / content / footer, and then a site-wide footer.
Not sure how useful that would be, but interesting to me as a sometime web hacker.
this, mixed with the look of a LaTeX document is exactly the kind of vibe I'm looking to go with for my personal site as well. Something just so appealing about it to me.
that, and the ultra-minimal look of websites of old university professors (basically just html and nothing else) looks so cool to me.
I am glad Tufte emphasizes tight integration between images and text, a reasonable style choice that certain TeX purists refuse to acknowledge. In my writings at least, technical or otherwise, images and text are part of one continuous narrative; it makes no more sense to reorder and relocate my images than to do so to my paragraphs.
No. Please don't put script fonts in uppercase. It's absolute death to readability.
Actually don't put anything in uppercase - like underlining, it's a form of emphasis that has its origins in typewriters, which were locked to one typeface.
The uppercase letterforms are too similar -- there is no variation in the heights of the letters, so your eye finds it harder to read. Upper and lower case, you have letters like y and p and j which have descenders; b and d and t who have ascenders, and the variation is easier to parse.
For emphasis, please use size, weight, and italics.
I wish there were more of the minimalist CSS frameworks with opinionated styling. Easy to find very nice generic ones, but harder if you want one with some flavor.
And when font selection by a web page is disallowed altogether, it is rendered with my preferred font, but with a reduced font-weight, slightly increased font-size, and increased line-height. The low weight in particular, combined with it picking up the dark theme, makes the text rather uncomfortable to read.
Thanks! If you have any feedback or ideas feel free to let me know. I don't put a lot of time into it because I'm not sure what I would change at this point.
I was scrolling down expecting to be surprised by a sudden outburst of color, but instead I was pleased that the structure just remained consistent and readable, and monochrome was a deliberate and pleasing aesthetic. Well done!
It’s funny because I was kind of hoping for the opposite when it came to the code blocks. I find that color syntax highlighting makes code blocks much easier to read.
Really interesting. One thing I particularly appreciate is how it is fully commented and you can decide only to extract the parts that you need. The part to add line numbers to code looks very nicely done!
For the hell of it, I looked at the Chinese translation offered in the nav. I can’t read Chinese, so I wonder what someone who can read it thinks, but it looks very cluttered to me. (I know font options are very limited compared to English.) Interestingly, it also uses different photos.
Beautiful. Classless needs to become the standard for CSS libraries. I'm tired of learning your DSL to center a div. Just make the HTML do what I expect it to.
Starred, love this. I’m looking for something more than a reset but less than a framework on something at the moment and this is on my shortlist of places to look for inspiration about what modern advanced CSS looks like.
Is there a central place for in-the-know CSS wizards to post and discuss their most recent next level demo?
Years ago there was something called like CSS Zen Garden or something but times have moved on I think.
I love classless CSS frameworks, but I think it's a pity that there are only so few that use serif fonts. I'm grateful for any links if anybody has some hints.
Damn, should edit this to include a header like "list of minimal CSS frameworks" so that it becomes searchable for folks looking for something like this.
> The SIL Open Font License (or OFL in short) is one of the major open font licenses, which allows embedding, or "bundling", of the font in commercially sold products. OFL is a free and open source license.
That is a tremendously useful utility. Only annoyed they do not provide builds so I am going to have to install the Go tooling and/or re-implement my own half-baked version.
If you care about privacy/tracking in 2024 there are basically two paths (not mutually exclusive):
1. Fight it at the polling booth and support things like the EFF.
2. Become a hard target for anyone but advanced actors with you on their short list.
Door #2 depends on what you mean by “advanced actor”, short of being Moxie Marlinspike or something, if Cozy Bear or 8800 or TAO/Equation Group wants you, they’re gonna get you. They’ve got people posing as employees in all the big shops (which to their credit have whole teams devoted to finding and ejecting them but with a clean passport long-term planning it’s an uphill fight).
As with all security, it’s a numbers game that comes down to three key principles:
1. Make the default flow the secure flow.
2. Decide who you trust to get the details right that your adversary understands better than you do.
3. Have multiple layers of security drawn from the list you get from #2.
My infosec story is still a mess, but it’s starting to become a known mess that I’m cleaning up in an organized way.
On #2: I trust Brad Fitzpatrick so I trust TailScale and run it everywhere. I trust Moxie so I trust Signal. I trust Proton for a few reasons, not least of which is that Reddit and Google and Meta and many, many others give you a bunch of grief coming in off a ProtonVPN exit node: Reddit won’t even let you connect, Google hits you with wild levels of CAPTCHA on e.g. Workspace OpenID connect, and Meta superficially connects but breaks in weird ways it shouldn’t even by “post laid everyone off” standards.
Brave is my compromise between usability and privacy, it’s got decent defaults that crank up really high (per-use permissions on WideVine is a great example, most major browser vendors just opt you in silently, it also fights AMP and does a fair amount of tracker blocking).
ProtonVPN is aggressive by default and has a few “sledgehammer” modes (e.g. Secure Core), and it can be configured to take down your effective connection if it fails to negotiate. It also does split WireGuard by default and so it plays nice with TailScale out of the box.
DuckDuckGo and Yandex both return stuff (e.g. torrents to leaked model weights) that Google censors, though obviously with Yandex you’re trading the old boss with one agenda for the new boss with a different one.
On LLMs, the Orca de-tunes of Mistral-8x7 are very operator-aligned and run just fine on mid-spec Macs or gaming-class PCs and you can build llama.cpp from a small-ish codebase you can easily grep for obvious icky shit (and I trust ggerganov).
Source: worked at FB on Ads and abuse/security and IG on ranking/recommenders.
Code for those interested: https://github.com/wintermute-cell/magick.css/blob/master/ma...
Wish there were custom checkboxes and radio buttons - they're the only thing that break immersion at the moment! Everything else is absolutely stellar. Might inspire me to finally make that blog I've been thinking about!