TILs in May 2019
I’ve been learning a lot of awesome stuff related to web development. So I decided to summarize and document it for future references and to share the knowledge.
With tons of information floating around I’ve noticed that I forget some of the new stuff over time. Usually, I tweet about what I’ve learned with a #TIL tag, but later it’s hard to find the information.
Writing a summarized blog post at the end of the month will help me to recap and refresh what I’ve learned.
So here’s what I’ve learned in May 2019:
Penultimate selector
There’s a CSS selector that can select an element before the last one and it is called penultimate.
ul li:nth-last-child(2) {
background: gold;
}
JavaScript selector for html tag
There’s a native method in JavaScript to select a <html> tag. Convinient.
document.documentElement
Selecting via the style attribute
It is valid to select an element via style attribute in JavaScript. This one is very handy when working with 3rd party libraries, however not very secure, in a sense that the markup and attributes might change.
document.querySelector("div[style='color:red;']")
Responsive images and HTML srcset attribute
So responsive images are …
... images that work well on devices with widely differing screen sizes, resolutions, and other such features
—MDN
This is a nice native way to optimize the webpage. The HTML srcset attribute allows to set multiple image sources and the browser will display the image depending on the viewport.
A new display property
There’s a CSS display: flow-root property that will fix the overflowing content issue when using floats. A nice article on that by the alligator.io