8 ms·

Show HN: I wrote a book about Debugging CSS

137 points by shadeed9 6y ago

shadeed9 6y ago
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 https://debuggingcss.com/files/debugging-css-sample.pdf Book website: https://debuggingcss.com/ https://debuggingcss.com/
- wdb 6y ago
  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 :))
  - shadeed9 6y ago
    I'm very glad to hear that. Thank you!
- sawmurai 6y ago
  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
amelius 6y ago
My personal favorite way to debug CSS is to search on StackOverflow for solutions. It also usually gives a lot of extra context information.
- enumjorge 6y ago
  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.
  - nicoburns 6y ago
    > 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.
nicoburns 6y ago
CSS debugging heuristic #1: 9 times out of 10 it's a `position: relative` or `overflow: hidden` you need.
- runawaybottle 6y ago
  Low key pro tip.
- ImpressiveWebs 6y ago
  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.
  - willio58 6y ago
    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.
    - ImpressiveWebs 6y ago
      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.
- commandlinefan 6y ago
  *: border 1px red
- Kagerjay 6y ago
  `position: relative`, and `position: absolute` imo is the source of so many responsive web design CSS bugs always use flexbox first before position relative
dsego 6y ago
border: 1px solid red (or outline)
- edoceo 6y ago
  IME border changes the box-size while outline does not
abhinav22 6y ago
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.
- cambalache 6y ago
  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.
  - abhinav22 6y ago
    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.
- systemvoltage 6y ago
  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 https://i.imgur.com/gREO73C.png Content: https://i.imgur.com/1zFmWgV.png https://i.imgur.com/1zFmWgV.png
  - atian 6y ago
    Seconded. It's a bit difficult to consume, however I trust the author in his CSS debugging skills as presentation looks great.
chiyc 6y ago
My secret weapon for squashing tricky layout and UI bugs is Pesticide. https://github.com/mrmrs/pesticide https://github.com/mrmrs/pesticide https://addons.mozilla.org/en-US/firefox/addon/pesticide-css-for-firefox/ 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.
- shadeed9 6y ago
  Yes! This is a great browser extension. It's mentioned in the book, too.
erikschoster 6y ago
This looks really useful -- have you considered selling a print version?
- shadeed9 6y ago
  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.

137 points by shadeed9 6y ago

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 https://debuggingcss.com/files/debugging-css-sample.pdf Book website: https://debuggingcss.com/ https://debuggingcss.com/

wdb 6y ago
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 :))
- shadeed9 6y ago
  I'm very glad to hear that. Thank you!
sawmurai 6y ago
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

amelius 6y ago

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

enumjorge 6y ago
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.
- nicoburns 6y ago
  > 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.

nicoburns 6y ago

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

runawaybottle 6y ago
Low key pro tip.
ImpressiveWebs 6y ago
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.
- willio58 6y ago
  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.
  - ImpressiveWebs 6y ago
    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.
commandlinefan 6y ago
*: border 1px red
Kagerjay 6y ago
`position: relative`, and `position: absolute` imo is the source of so many responsive web design CSS bugs always use flexbox first before position relative

dsego 6y ago

border: 1px solid red (or outline)

edoceo 6y ago
IME border changes the box-size while outline does not

abhinav22 6y ago

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.

cambalache 6y ago
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.
- abhinav22 6y ago
  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.
systemvoltage 6y ago
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 https://i.imgur.com/gREO73C.png Content: https://i.imgur.com/1zFmWgV.png https://i.imgur.com/1zFmWgV.png
- atian 6y ago
  Seconded. It's a bit difficult to consume, however I trust the author in his CSS debugging skills as presentation looks great.

chiyc 6y ago

My secret weapon for squashing tricky layout and UI bugs is Pesticide. https://github.com/mrmrs/pesticide https://github.com/mrmrs/pesticide https://addons.mozilla.org/en-US/firefox/addon/pesticide-css-for-firefox/ 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.

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

erikschoster 6y ago

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

shadeed9 6y ago
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.