Show HN: I wrote a book about Debugging CSS | Hacker News Reader

Show HN: I wrote a book about Debugging CSS

debuggingcss.com

137 pointsshadeed931 comments

Hello! My name is Ahmad Shadeed, a designer and front-end developer who enjoys finding and fixing CSS bugs.

I have always wanted to have a resource which fully explains how to debug CSS (using DevTools) and contains a list of most common CSS issues. This book aims and delivers this.

The book teaches you how to leverage the full potential of the browser DevTools to find CSS bugs, and details the most common issues.

Who can read this book? With this book, you will learn something new and different (regardless of your level).

Checkout the free preview: https://debuggingcss.com/files/debugging-css-sample.pdf

Book website: https://debuggingcss.com/

I bought the book around the time of Black Friday and so far I have been reading parts of the book and really enjoying it. Thank you for writing it :))

I'm very glad to hear that. Thank you!

This looks just like what I need!

Also: in your table of contents multiple wrapping it up sections have the page number 99, at least in the preview

This looks very interesting. Out of curiosity how did you typeset / format the book? It looks gorgeous! Was it in HTML/CSS? In which case I assume you are using Prince XML I guess since you got the pagination just right.

Separately on topic, CSS debugging is a hard thing to put in book form, and there is a lack of materials on the web on CSS (stack overflow which is usually great for programming languages, is not as good for front end design in my opinion), so for those learning CSS, or aspiring to be web developers, this could be a great starting resource.

Seconded.

I have tried many options (Paged.js, github books,rdoc,pandoc) and I have never been satisfied with any of them, the process is either very complicated or the books look like crap.

I had this epiphany recently. Only Prince works well and prince requires payment for commercial use. The rest are terrible!

BUT what I realize is my old friend Latex. I’m reverting back to that now, and trying to build a bridge between HTML/CSS and Latex.

I disagree, the typesetting is too fluffy. Very little information on a page and turning pages is laborious, and you lose context. Why are the margins so massive? People have forgotten why margins were created and what they're used for (Accounting for spine, holding the book without obscuring the text). We don't have such restrictions on digital books. A professional typesetter from Springer or Oreilly would have many things to say.

Here are some examples from Springer's text books (Note, they're meant to be printed so the margins are set accordingly):

TOC: https://i.imgur.com/gREO73C.png

Content: https://i.imgur.com/1zFmWgV.png

Seconded. It's a bit difficult to consume, however I trust the author in his CSS debugging skills as presentation looks great.

Indeed :D Otherwise it wouldn’t be easy for him to sell a book on CSS! Very good implicit marketing strategy for a CSS book

No hyphenation makes for suboptimal layout (whitespace).

I hear this a lot, but how significant do you think the impact is? I haven’t thought of this as an issue but am open minded to change my view.

It's quite significant because as you can see in the sample without hyphenation you get quite a lot of whitespace between words which makes the text hard to read and also look unbalanced because the length of the whitespace varies a lot between different lines.

The example you shared is also very well done.

However in defense of the main book of this thread - the style of its formatting I think is well suited for web developers and the like, having less information on the page makes the problem a bit less daunting for beginner readers.

It also increases the page count, which is a good marketing strategy for the publisher. I think most ebooks in general, particularly in web dev space, are void of quality content; so while I completely understand and see your perspective, I think in the context of what is out there, this book is a good effort.

I personally would also write a more condensed guide (actually I did :D see here: https://github.com/ashok-khanna/common-lisp-by-example), but that’s just you and me having similar style choices :)

I need to copy that springer style, it’s beautiful too!

That lisp book is very well put together and looks nice.

CSS debugging heuristic #1: 9 times out of 10 it's a `position: relative` or `overflow: hidden` you need.

Low key pro tip.

Not true at all, especially in modern CSS. Position relative is only needed for using absolute positioning. That should be extremely rare.

And overflow: hidden is an old workaround for float-based layouts that should never be used in 2020 unless you’re debugging a legacy project. And even in that case, you should be using a proper clearfix instead.

Woah there.

Position relative can help with z-index issues.

Also, I’ve never dealt with float based layouts but I can tell you overflow hidden is useful outside of that context.

Again, z-index is so rarely used and if you needed overflow hidden for something other than floats, then you were doing your CSS wrong. I’m not saying that to be arrogant, I’ve written books on CSS and written articles for some of the biggest web dev sites online. It’s just true that many developers don’t understand CSS and often use the wrong tool for the right job, so to speak.

*: border 1px red

`position: relative`, and `position: absolute` imo is the source of so many responsive web design CSS bugs

always use flexbox first before position relative

My secret weapon for squashing tricky layout and UI bugs is Pesticide.

https://github.com/mrmrs/pesticide https://addons.mozilla.org/en-US/firefox/addon/pesticide-css...

It's basically the more sophisticated way of putting a border on everything. The hover interactions are great for revealing elements you didn't think you were hovering over.

Yes! This is a great browser extension. It's mentioned in the book, too.

border: 1px solid red (or outline)

IME border changes the box-size while outline does not

My personal favorite way to debug CSS is to search on StackOverflow for solutions. It also usually gives a lot of extra context information.

StackOverflow is a great resource, but it has significant flaws. In my experience, particularly with front-end topics the quality of answers can vary a lot. As I became more proficient with CSS myself I started noticing more and more how accepted or upvoted answers would be hacky or just wrong. If you are a beginner you have to take the answers with a grain of salt, but that’s when you tend to search SO the most.

> I started noticing more and more how accepted or upvoted answers would be hacky or just wrong

One of my favourite thing about Stack Overflow is how you get a whole variety of answers. Often the best one isn't the accepted or most highly upvoted answer, but it contains an explanation of why you ought to do it like that which (even if you didn't already know enough to judge) is often enough to make you pick it.

This looks really useful -- have you considered selling a print version?

Thank you! There are no plans for the time being as a bit hard to print and ship from my country. I'm still exploring print-on-demand services that might help.

Reply on news.ycombinator.com