6 Unsuspecting Problems in HTML, CSS, and JavaScript – Part 2

Posted on

Welcome to part 2 of our series covering six unsuspecting problems and scenarios that one may come across in HTML, CSS, and JavaScript. In part 1 we talked about the Block Formatting Context and Margin Collapsing. In this post, we will be covering DOM reflow and event delegation, and how they affect the performance of your application.

DOM Reflow

DOM reflow is the drawing or redrawing the layout of all or part of the DOM. This is an expensive process, but unfortunately easily triggered. This could cause a noticeable performance degradation of a web app that requires a lot of user interactivity i.e. drag & drop and WYSIWYG editors. If you are developing a highly interactive web app, then you will most likely at some point trigger a DOM reflow.

Eventbrite’s switch to ReactJS is one answer to the poor performing native DOM. ReactJS creates its own virtual DOM, which optimizes which parts of the web page needs to be re-rendered.

Continue reading “6 Unsuspecting Problems in HTML, CSS, and JavaScript – Part 2”

6 Unsuspecting Problems in HTML, CSS, and JavaScript – Part 1

Posted on

HTML, CSS, and JavaScript are known for having various quirks and unsuspecting behavior causing developers to jump through hoops, climb mountains, and perform Houdini-esque magic tricks to fix them. I made a list of six solutions to common head-scratchers that I’ve run across while dabbling in the DOM, so you won’t have to.

This is the first of a three part series. We will begin by tackling two fundamental concepts that exist in HTML and CSS, which may help you reason out solutions to tricky scenarios that exist in the Wild Wild West that is front-end development.

Block Formatting Context

Block formatting context is a fundamental component to how elements in web pages are rendered. It describes how they stack and interact with each other resulting in the final visual output of the webpage.


Continue reading “6 Unsuspecting Problems in HTML, CSS, and JavaScript – Part 1”

6 Unsuspecting Problems in HTML, CSS, and JavaScript – Part 3

Posted on

Finally, we arrive at part 3 of our three part series covering six unsuspecting problems in HTML, CSS, and JavaScript, and their solutions. In the previous part of this series we covered two concepts that will help make a noticeable performance improvement in your application: DOM reflow and event delegation. In this final part of the series we will cover two common scenarios involving layouts: horizontally and vertically centering a DOM element, and creating a table with a fixed header.

Horizontally & Vertically Centering an Element

You’d think this would be a straightforward task, but surprisingly this is not as simple as the name implies. Vertical alignment in particular is tricky because CSS’s vertical-align style only works for table-cells and inline-block elements. I ran across this problem when designing the DatePicker used in the Eventbrite Design System (EDS). The DatePicker is a calendar where each row is a week, and each day in the week is the shape of a square. The numbers representing that day of the week needed to be vertically and horizontally centered.

Continue reading “6 Unsuspecting Problems in HTML, CSS, and JavaScript – Part 3”