CSS font-display property is now available in Chrome Canary!

font-display is a new @font-face descriptor and a corresponding property for controlling how a downloadable font renders before it is fully loaded. It allows you to customize how web fonts are displayed when the page is being rendered - e.g. should the browser block text rendering until the font is fetched (default in Chrome, FF, Safari) vs. use fallback and...

Read More

Browser DOM's Normal Flow and Positioning

Not understanding fundamental layout concepts can have a great impact on your web design and implementation. For instance, depending on the requirements, a modal dialog can be rendered by calculating its size relative to the viewport and positioning it absolutely, or a simpler technique using fixed positioning and margins performs much better, and the likelihood of bugs is decreased because...

Read More

Nesting in CSS Preprocessors

Nesting is supposed to make your CSS easier to read, extend, and maintain. For some situations, it does, but for designing CSS systems at scale, nesting your CSS is almost always a terrible idea. Allow me to explain with some general assumptions and examples.


No matter the build tool or preprocessor, there are a small set of general CSS...

Read More

Web Components and Polymer - Introduction to the future web

The web now has evolved a lot, it has grown from static sites those in 90's to dynamic application building platform. It is a growing universe of interlinked web pages and web apps, teeming with videos, photos, and interactive content. What the average user doesn't see is the interplay of web technologies and browsers that makes all this possible. Over...
Read More

Arrangement order of Paragraph and anchor tags


If you have text in a box that you want to turn into a hyperlink, which is correct...

Option #1:

<p><a href=''>Call for an appointment</a></p> 

Option #2:

<a href=''><p>Call for an appointment</p></a>


In html5 either are valid2 as 'a' elements can...

Read More