Learning Log #1

Learning in public has gained pretty big popularity across my twitter circles. Surely, the concept isn't new, but now it has a name. As being a curious person myself, I've started collecting my findings from dealing with day-to-day tasks a while ago. Now it's time to publish the coherent form of the notes in the first post of the learning log series and so become the part of the wave.

  • I was experimenting with CSS pseudo elements and generated content to find out if it is possible to use it as a base for other selectors - it isn't. Live example.

    https://twitter.com/rmnvsl/status/1122487791152242688

  • window resize event behaves a bit unexpected, well, just at a first glance. It is fired almost whenever you scroll a page in the mobile browser. My investigation revealed it's the correct behavior. It's common for mobile browsers to show/hide omnibar or other toolbars while scrolling up & down which does change the size of the visible area - thus firing the event is expected.

  • Staying in sync with the project's dependencies versions across different workstations and servers can be sometimes problematic. npm ci can help with many issues. It stands for a clean install and is available since version 5.7.0. It installs dependencies only from your package-lock.json file (it also removes node_modules directory). It should be used in the CI environment, project setup, etc. I've started using it in all my projects ever since.

  • Icon fonts have still their place even in today's world of wide SVG support. With fontello.com is possible to easily create one font with characters from different sets. And that's very handy!

  • Don't know why, but I have been neglecting CSS background-position's offsets for a very long time. Probably I forgot it exists! I'm pleased I've discovered it just recently. Now I'm again able to position background images relative to the edges of their elements.

See you next time.

Roman