I learned about Scroll Anchoring a few months back and at first, I thought it was a bug. My whole team did, in fact.
The context I learned about it was when my team was rebuilding the way we present customer reviews on our website. If a customer leaves a really long review, we truncate it after a few lines and present a “View More” button to expand the rest of the review.
This was looking great, except in Chrome. In every non-Chrome browser, clicking the “View More” button would expand the content of the review down as we expected…
The CSS Box Model is what defines how much space an element takes up on the page. The Box Model is divided up into four major parts: Content, padding, border, and margins.
Within your web browser’s element inspector, you can look at each element’s box model. In Chrome, this is found under the Elements tab in a Styles submenu.
CSS Specificity is what decides what styles are applied to elements; the more specific the CSS selector, the more weight it has in determining the style of an element.
Take the following HTML and CSS as an example:
Q: What background color will the article element have?
A: White, since the CSS selector the white background color is more specific.
To see this in action, the element inspector will show you all the styles applied to an element in the order of specificity.
I’ve recently migrated my web application to run inside docker containers and use
docker-compose to spin up all the required dependencies in their own containers (Postgres and Redis, in my case). This application uses Python’s Flask framework and I use
pdb to debug issues.
While researching solutions, I first ran into this article by Vladyslav Krylasov that suggested adding some configuration to my docker-compose.yaml and using a module called
remote-pdb with a telnet client. This worked, but it was a little more cumbersome than I wanted.
My solution was to use
docker attach. First, I still needed to edit my…