Today I Learned

5 posts about #html-css

How to Center Vertically and Horizontally in CSS

This helpful guide teaches you everything you wanted to know about centering your HTML elements vertically and horizontally using CSS:

Z-Index Equivalent in SVG

To mimic the z-index CSS property in SVG, add the SVG elements to the page in the reverse order that you expect their z-positioning to be set. The subsequent elements added are placed on top of previous elements.

For example, if I were using the React SVG charting library Victory and I wanted my chart lines to be stacked on top of my chart area shading, I will add them to my component like so:

  <VictoryArea ... />
  <VictoryLine ... />

Search DOM by selector in Chrome Inspector


I want to select a DOM element by CSS selector on my React-generated web page for debugging purposes. In this case, I am trying to test out CSS selectors to be used in my Capybara acceptance test.


Use jQuery NO, DON'T DO THAT!

A neat feature of the Chrome Web Inspector is that I can search an entire page by CSS Selector, without needing to litter my code with debugger statements. Just open up the Elements tab and then press CMD-F (on Mac) to open up a search bar. I can now type whatever CSS Selector that I want and view the results that match. I can quickly test different selectors out, so that I can verify that I am writing my Capybara test accurately.


Usage of $0 in the Chrome dev tools

In the Chrome dev console, typing $0 evaluates to the last selected HTML element (by clicking on it under the 'Elements' tab). $1 is the second last selected, up to $4 - and despite the $ this works independently of jQuery.

Fancy code highlighting in TIL markdown

If you want to have syntax highlighting in your code blocks, put the language you want highlighting for after the opening backticks. This:

some =


some =

Also somewhat works for other languages!