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: https://css-tricks.com/centering-css-complete-guide/

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:

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

Search DOM by selector in Chrome Inspector

Problem

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.

Solution

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.

Source

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.

https://developer.chrome.com/devtools/docs/commandline-api#0-4

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:

```ruby
some = Code.new
```

Gives:

some = Code.new

Also somewhat works for other languages!