Piccalilli

this is pretty awesome! would love to see a few different "sections" like Business, Culture, etc. Also mixing and matching typography, especially for article headings, would go a long way. See e.g. https://www.nytimes.com/interactive/2016/11/08/us/elections/front-page… Or for a direct link to (a small) 1984 image: https://static01.nyt.com/newsgraphics/2016/11/01/front-pages/43d39ce78… Also maybe making the layout wider and more compact. And maybe, just maybe, picking 1-2 articles to have pictures. You should probably also use a masonry layout like https://piccalil.li/blog/a-simple-masonry-like-composable-layout/

I also like Unpoly very much. I'm using it for a new frontend right now. Combined with a thoughtful CSS design like CUBE[1] that utilizes components but also leverages utilities to reduce CSS bloat I am writing mostly Ruby and HTML and very little JS and CSS and it feels great. It's kind of back to the basics which means that I also do not worry about being on some framework's upgrade & dependency train or the mental health of future application developers/maintainers. [1]: https://piccalil.li/blog/i-used-tailwind-for-the-u-in-cube-css-and-i-l…

This looks great. People interested may also want to take a look at Andy Bell's 11ty book, which is more of a general introduction to web development and the jamstack: https://piccalil.li/course/learn-eleventy-from-scratch/

The off-by-x-pixels problem usually only happens when you take the unwise path somewhere. Following standard practice in regards to layout will help you here: 1. Use `box-sizing` everywhere (should be defined in your css reset file, example: https://piccalil.li/blog/a-more-modern-css-reset/) 2. If you can do something in css or js, do it in css. 3. Don't use pixel values anywhere (this avoid a lot of off-by-x errors when either the math is wrong or a previous assumption is violated by new code somewhere else). Two exceptions: a) The base font size on the root (usually the <html>) element. b) A 1px border, since the box-sizing in step 1 will allow you to take it from the element's block and inline size. --------------------------------- Also, if you're trying to position text, or an icon inside a button and it seems off, you don't want to be trying to fine-tune the positioning with pixels. It's always better to address the root cause. Usually this is `line-height`, `vertical-align` and also the font itself. You can see lots of examples of the font being the issue here: https://tonsky.me/blog/centering/ If you run into this issue, you can look at the font's internal metrics (shown in the link above) to get the exact values you need (Browsers will be able to do this in 2-3 years automatically with `text-box-trim`). Or you could simply switch to a better font that already has the correct values.

This article I came across last month on “Framework-agnostic design systems” happens to use this Elena library and I think explains its use case well: https://piccalil.li/blog/framework-agnostic-design-systems-part-1/

You're pre-emptive hostility seems rather unwarranted. This article is my usual go-to and lists several reasons why JavaScript might not be available, and thus why you shouldn't take it for granted: https://piccalil.li/blog/a-handful-of-reasons-javascript-wont-be-avail…

Not everything you disliked reading is just probably AI slop https://piccalil.li/about/: > Workers first, AI technologies, dead last > AI and LLMs are rooted in theft, exploitation, dishonesty and are over-promoted with ill-intentions for workers. Instead of running towards AI, we’re focusing on what’s actually important: content that helps people to succeed that is never produced by AI tools. The style is definitely the over hyped and well expanded tone that AI is trained to mimic for sure though.

Using a div instead of a button is just dumb. However, I was tweaking my app today, after having read this article, and realized I'm using some anchor-links as buttons just because I wanted them to be styled exactly like a link. Then I tried adding role="button" and of course I couldn't tab over to my link-button. So I added tabindex="0", just like the article tells you not to do, and that allowed me to tab over to it but I still couldn't activate it with spacebar. So I finally caved and Googled "how do I make a button look just like a link" which brought me to this article: https://piccalil.li/blog/link-button/ And now it behaves properly. Yay a11y.

are css resets not in vogue any more? I still use them for all my side projects. As well as a normalize.css[0] that smooths over any additional browser inconsistencies. The original Meyer reset is definitely overkill, but there are a couple newer more minimal ones out there[2][3] [0] https://necolas.github.io/normalize.css/ [1] https://meyerweb.com/eric/tools/css/reset/ [2] https://www.joshwcomeau.com/css/custom-css-reset/ [3] https://piccalil.li/blog/a-more-modern-css-reset/

Because you honestly don't need to, and shouldn't need to. CSS missed out on scoping, nesting, and composition even though most of these things have been available elsewhere (notably, SASS) for 20 or more years. What you really want is to have a component and all styles scoped to it. In the absence of that you want as few names replicating scoping, nesting, and composition, as possible. And you want to compose repeatable patterns across all of your components (something that is possible with mixins, and is impossible with vanilla CSS). So you cut down on repetition across class names until you're left with utility classes and a separation of concerns that cuts a different way: https://x.com/simonswiss/status/1664736786671869952 Note: no one is stopping you from having your own arbitrary classes when you need to. See e.g. Cube CSS approach https://piccalil.li/blog/cube-css/

I like the approach that Cube CSS takes (https://piccalil.li/blog/cube-css/#heading-composition) where margins are considered part of the overall layout rather than at the component level

I follow the following blogs for front-end. * https://adactio.com * https://piccalil.li/blog/ * https://stephaniewalter.design/ * https://www.baldurbjarnason.com/ This post has some good pointers: https://www.baldurbjarnason.com/2021/what-do-i-need-to-read-to-be-a-cs… I'm not sure what other advice to give. A lot of this was collected over time in response to frustrations I felt around the direction front-end has been moving in (css-in-js, atomic css etc.) and looking for people writing criticisms of it.

Hey, check out https://piccalil.li/cube-css/, but more specifically the stack used for the picalilli website itself (check the footer): https://github.com/hankchizljaw/gorko and https://utopia.fyi

I like doing short challenges to learn and solutions to peak at in case I get stuck. Andy Bell posted front-end challenges for a while, here's the archive: https://piccalil.li/category/front-end%20challenges%20club/ Codepen hosts challenges every week. They aren't always CSS focused but many of them are. https://codepen.io/challenges

There's also this grouping method to separate classes https://piccalil.li/cube-css/ it's cringe at first but so was BEM and it's still useful even if you combine both

Hi. I am he. But I agree! https://www.reddit.com/r/javascript/ https://thisweekinreact.com/ https://piccalil.li/the-index/ https://bytes.dev/ https://www.reddit.com/r/reactjs https://www.reddit.com/r/node (and typescript and vuejs and angular..) The more the merrier. Also HN is pretty good itself much of the time. For example: https://hn.algolia.com/?dateRange=pastWeek&page=0&prefix=false…

Here's some of my tips for a handwritten HTML site, since the author wished more tips existed: - consider using an HTML boilerplate template like this one if you don't know where to start: https://www.matuzo.at/blog/html-boilerplate/ - consider using a CSS template, or a CSS reset, if you don't know where to start with styling. Pico CSS is a good drop-in: https://picocss.com/. Frontend devs always blog about their CSS resets, like this one: https://piccalil.li/blog/a-more-modern-css-reset/. But if you're someone inclined to write their own HTML, then you'll probably also want to write your own CSS. This takes time to learn. Especially learning how to design the page without looking crappy - I copy my last page as a template whenever writing a new page - I don't worry about code duplication. If I need to refactor duplicated content, I use search and replace across files in vim (like https://nithinbekal.com/posts/vim-search-replace/). Hopefully your editor/IDE has something similar, and hopefully you're comfortable with regexes - markdown + pandoc + scripting is a common solution. Technically it's not handwriting HTML at this point -- it's hacking together your own static site generator instead of using an existing framework -- but no biggie - frontend people have made a lot of live reload tools over time. Here's a couple: https://nitoyon.github.io/livereloadx/ and https://github.com/tapio/live-server. Personally, I've cobbled together something with…