Top all-time · #1784
bitsofcode
Personal blog · bitsofco.dewebprogramming
bitsofcode is a personal blog at bitsofco.de about web and programming. Since 2015, 40 different Hacker News readers have linked it 49 times, most often “What Is First Input Delay?”. The last post was in 2023, but the archive is still widely read.
Too few sampled comments (6) to say how often HN recommends it.?
Why HN links it
HN readers link Erik Kroes's front-end posts as practical CSS and HTML references, such as holy grail layouts and srcset/sizes. Most comments cite them as sources or corrections rather than judging the writing.
Summarised by Claude from a sample of 6 HN comments that link here. Each comment is marked recommending, critical or neutral (citing without judging); how this works.
Articles on frontend development and more.
Most-linked posts?
- What Is First Input Delay?2 people · 2 mentions · first linked 2018-11-15
- [JS] You might not need a loop2 people · 2 mentions · first linked 2018-11-27
- The New System Font Stack?2 people · 2 mentions · first linked 2016-11-01
- Recreating the GitHub Contribution Graph with CSS Grid Layout2 people · 2 mentions · first linked 2018-02-05
- “What's the typeof null?”, and other confusing JavaScript Types2 people · 2 mentions · first linked 2017-02-22
- The Holy Grail Layout with CSS Grid2 people · 2 mentions · first linked 2017-01-02
- Asynchronous Functions 1012 people · 2 mentions · first linked 2017-04-13
- Linting HTML using CSS2 people · 2 mentions · first linked 2017-03-12
- The :target Trick2 people · 2 mentions · first linked 2016-07-06
What Hacker News says?
Yes, but grid/css is _designed_ for layout. Tables was a bastardization of markup designed for data display. (ie, a table of data, like in a spreadsheet) Unless you have truly dug into how awesome grid is, you can't really understand what it's done for the future of web design. I will look up a short tutorial I ran into that really showed me the power/value of grid. (fyi, I use CSS daily in my work) Edit: Here's one…
Comment linking /github-contribution-graph-css-grid/
on “Modern CSS Explained”Submitted Linting HTML using CSS as a story · 326 points
HN discussionIt took me a while to figure out that links in the text were ALL CAPS instead of underlined and/or blue. The hover effect was so subtle that I didn't notice it at first. I ended up hovering over acronyms pretty often, as I was never sure if those were also links. That is not good design. There's also the issue that while the site may look pretty, it requires downloading 5 megabytes of CSS. At every job I've had, des…
Comment linking /the-new-system-font-stack/
on “Practical Typography”Submitted What I wish I knew about React as a story · 236 points
HN discussionIt looks like that method is now deprecated in HTML 5.1. https://bitsofco.de/document-outlines-in-html-5-1/
Comment linking /document-outlines-in-html-5-1/
on “Do we need a new heading element in HTML?”Submitted I created 488 “live images” of CanIUse using puppeteer as a story · 15 points
HN discussionFor a relatively standard problem (the "holy grail layout", 3 equal-height columns with header and footer), this article isn't bad: https://bitsofco.de/holy-grail-layout-css-grid/ http://gridbyexample.com/ is another nice resource.
Comment linking /holy-grail-layout-css-grid/
on “The Experimental Layout Lab of Jen Simmons”Submitted A look at CSS Resets in 2018 as a story · 6 points
HN discussionI was thinking that a service worker could be used: https://bitsofco.de/web-workers-vs-service-workers-vs-workle... If the url returns a 404, check the internet archive, if it’s there then return that otherwise return a 404. If CORS is an issue just proxy the requests via the server that is serving the website.
Comment linking /web-workers-vs-service-workers-vs-worklets/
on “Ask HN: Best way to avoid link rot?”Submitted Asynchronous Functions 101 as a story · 5 points
HN discussionThis is some pretty powerful stuff. Here's a more information-dense and up-to-date rundown of srcset and sizes: https://bitsofco.de/the-srcset-and-sizes-attributes/ Notably, it shows how it's possible to use different images based on a portrait or landscape layout of the viewport, which OP doesn't cover. That's not always useful but it's good to know it's there when you might want to use it. I was recently (well, se…
Comment linking /the-srcset-and-sizes-attributes/
on “Srcset and Sizes (2014)”Submitted The :target Trick as a story · 5 points
HN discussionSubmitted [JS] You might not need a loop as a story · 4 points
HN discussionSubmitted What, exactly, is the DOM? as a story · 4 points
HN discussionSubmitted The :target Trick as a story · 4 points
HN discussionSubmitted Recreating the GitHub Contribution Graph with CSS Grid Layout as a story · 3 points
HN discussionSubmitted Web workers vs. Service workers vs. Worklets as a story · 3 points
HN discussionSubmitted What Is the Shadow DOM? as a story · 2 points
HN discussionSubmitted What Is First Input Delay? as a story · 2 points
HN discussionSubmitted What Is 'Tree Shaking' and How Does It Work? as a story · 2 points
HN discussionSubmitted How to reset CSS in 2019 as a story · 2 points
HN discussionSubmitted Why and how to use WebP images today as a story · 2 points
HN discussionSubmitted What Is First Input Delay? as a story · 2 points
HN discussionSubmitted Asynchronous Functions 101 as a story · 2 points
HN discussionSubmitted Making Alix, a Chrome Extension for Linting HTML as a story · 2 points
HN discussionSubmitted “What's the typeof null?”, and other confusing JavaScript Types as a story · 2 points
HN discussionSubmitted CSS Grid Layout Terminology, Explained as a story · 2 points
HN discussionSubmitted Asynchronous vs. Deferred JavaScript as a story · 2 points
HN discussionSubmitted Optimising GIFs for the Web as a story · 2 points
HN discussionSubmitted 3 New CSS Features to Learn in 2017 as a story · 2 points
HN discussion