Make a Layout With Fluid and Fixed-size Columns

CSS is not at its best when it comes to creating a layout. The flexible box model that is intended for this purpose is not yet ready to use due to the lack of support from Internet Explorer, so designers usually have to use floats or set an element’s display property to inline-block to achieve effects they want. This CSS’s inability is even more bothersome when you want to make your website responsive.

In this post I’ll focus on a specific problem — that is how to write styles when you want to have a fluid content box together with a fixed-size content box that are next to each other and they’re taking the same horizontal space.

Let's make a responsive layout with fluid and fixed content with HTML and CSS


Continue reading

By dbglory Posted in HTML 5

Building a Responsive Two Column Layout

  • Demo
  • CodePen
  • Github Repo
  • Use min-width media queries to progressively enhance the layout of the design.
  • Use “box-sizing: border-box” to calculate borders as part of the total width of an element.
  • Use Scott Jehl’s Respond.js polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).
  • All wireframes were created using Balsamiq Mockups. I highly recommend this tool for making quick wireframes.

Continue reading

By dbglory Posted in HTML 5

Using the Notifications API


The Notifications API allows you to display notifications to the user for given events, both passively (new emails, tweets or calendar events) and on user interactions regardless of which tab has focus. There is draft spec but it is not currently in any standard.

You can follow these simple steps to implement notifications in just a few minutes:

Step 1: Check for Notifications API support

We check if webkitNotifications is supported. Note that the name ofwebkitNotifications is because it’s part of a draft spec. The final spec will have a notifications() function instead. Continue reading

By dbglory Posted in HTML 5

HTTP: The Protocol Every Web Developer Must Know – Part 1

HTTP stands for Hypertext Transfer Protocol. It’s a stateless, application-layer protocol for communicating between distributed systems, and is the foundation of the modern web. As a web developer, we all must have a strong understanding of this protocol.


Let’s review this powerful protocol through the lens of a web developer. We’ll tackle the topic in two parts. In this first entry, we’ll cover the basics and outline the various request and response headers. In the follow-up article, we’ll review specific pieces of HTTP – namely caching, connection handling and authentication.

Although I’ll mention some details related to headers, it’s best to instead consult the RFC (RFC 2616) for in-depth coverage. I will be pointing to specific parts of the RFC throughout the article. Continue reading

By dbglory Posted in HTML 5

Using HTML5 Canvas for Image Masks

Recently I’ve found myself referring to Jake‘s (the bastard legend that is) HTML5 Video with alpha transparency demo for reference into some pixel manipulation techniques with Canvas. Used in a slightly different context, but largely the same technique, we can use Canvas to apply a full alpha mask to any image element.

For Webkit browsers, a similar effect can be used with CSS Masks, but perhaps you need slightly wider browser support, or you want to use the masked image in Canvas somewhere else. Continue reading

By dbglory Posted in HTML 5

HTML5 vs Flash – How Does It Affect You?

The manner in which most videos are currently played through browsers these days is through a Flash plugin. This works pretty well but Flash unfortunately requires a lot of computing power. A new web standard HTML5 is trying to change that.

HTML5 has been designed with audio and video codecs which should take less processing power than an equivalent Flash player. Independent tests have shown that this is generally so although not entirely across the board. As with most new technologies, things are not always clearcut.

However even with improvements in processing efficiency from HTML5, it should not be assumed that it will completely replace Flash or even have a significant impact, especially on rich web content. Flash still has many advantages such as:

~ Better sub pixel resolution and anti aliasing
~ It’s good excellent developer tools (far more extensive than HTML5)
~ Flash has a vast array of good looking and impactful fonts

At this point, graphic artists and game developers still love Flash. And though they certainly like the idea of being able to operate with less computing overhead, they want to get the most control and ability to generate outstanding results.

However for many simpler video playback application such as in YouTube, HTML5 has the ability to quickly surpass Flash as the video/audio player of choice in browsers. At this point, the development of the YouTube HTML5 supported player is still in its early phases and a lot more tweaking and refinement must be done.

It also needs more support to work properly with other browsers and extensive testing to work out instability and incompatibility issues. However since it’s on an open platform, there are many people working through these issues so it is just a matter of time.

But many people feel that this process could easily take years. There are still many issues to work through. This gets down to some parts of the HTML5 specification which are viewed to be controversial by many critics.

And the fact still remains that HTML5 is not compatible with all browsers and many users are resistant to changing to another browser. As far as the average computer user is concerned, if it works ok for them they are not interested in moving to another browser.

For example, Intenet Explorer is largely criticized for its instability and security flaws. Yet many people steadfastly hold on that browser and are very reluctant to change to something like Firefox or Chrome.

So be aware that even with the potential efficiencies which HTML5 can bring, don’t expect rapid deployment or changes away from Flash.


By dbglory Posted in HTML 5