Thursday, April 25, 2013

Customize an HTML5 Webpage using the Bootstrap Framework

Bootstrap Framework
Many web developers are familiar with Twitter Bootstrap and have seen this library on a number of projects. The Bootstrap core is fantastic when you need a CSS reset along with other common layout features. It may not be the right fit on projects where you need a whole lot of customization. But for landing pages and smaller websites I think Bootstrap has become one of the easiest resources to start using.

Thursday, April 25, 2013

Make Your UI More Responsive with HTML5 Web Workers

HTML5 Web Workers
Also read: Using Web Workers to Speed-Up Your JavaScript Applications

Argh!!... Your web application has to sort a lot of data and you get the dreaded error message... "A script on this page may be busy, or it may have stopped responding..." Or maybe you're writing some image processing code that takes forever on large images... Your UI is non-responsive. What are you going to do!!?... You could try to break up the work into small pieces and use timers to spread out the work. But what a PITA!

Thursday, April 25, 2013

Introducing HTML’s new template element

Introducing HTML’s new template element
You may have heard of Web Components, a suite of emerging standards that make it possible to build secure reusable widgets using web platform technologies. One of the first specs to make its way into implementation is HTML Templates, embodied by the template element, which as I write this is implemented in Chrome Canary and Firefox Nightly.

Thursday, April 18, 2013

Magento for Designers: Multi-Store Functionality

Magento for Designers: Multi-Store Functionality

Magento ships with a number of very powerful features under the hood that go mostly unnoticed by the folks that install and use it on a daily basis. The feature we're looking at today, the multi store functionality, happens to be one of those; and arguably, it's one of the most advanced ones. There isn't a general vernacular for this feature so I'll be just calling it multi store from now on.

Thursday, April 18, 2013

Introducing The Magento Layout

Magento Layout
In this tutorial, we introduce the Magento layout by creating a simple module that will add some custom HTML content to the bottom of every customer-facing page, in a non-intrusive manner. In other words, we will do so without actually modifying any Magento templates or core files. This kind of functionality is a common requirement for many things such as affiliate referral programs, customer tracking analytics, adding custom JavaScript functionality, etc.

Thursday, April 18, 2013

The Basics Of Creating A Magento Module

Creating A Magento Module

A lot of community extensions (or modules) are available for the feature-rich open-source e-commerce solution Magento, but what if they don't quite work as you want them to? What if you could understand the structure of a Magento module a little better, to the point that you could modify it to suit your needs or, better yet, write your own module from scratch?

Thursday, April 18, 2013

Advanced cross-browser flexbox

Advanced cross-browser flexbox
Figure 1: An image of the final layout example

The CSS Flexible box module level 3 — or Flexbox for short — brings with it a lot of power and some very exciting possibilities for web development, allowing us to put together complex site layouts easily and rapidly and dispensing with some of the illogical hacks and kludges that we've traditionally used. I dealt with the basics of Flexbox in my article Flexbox: fast track to layout nirvana? In this article I will go a bit further, looking at a more advanced example and using Modernizr to serve different styles to browsers with differing levels of flexbox support, providing the best level of cross browser support currently available.

Thursday, April 18, 2013

Element Queries

Element Queries
The idea of Element Queries is pretty simple - it's like a Media Query (specifically, the min-width/etc queries), but for a parent or ancestor element, rather than the viewport.

Thursday, April 18, 2013

Line-On-Sides Headers

Line-On-Sides Headers

Forums user McAsh wondered how they might code up a design in which there was a large header and a smaller subheader beneath it which featured double horizontal lines jutting out after the text to both the left and right of the centered text. An easy thing to mock up as image, but a much more difficult thing to pull off in CSS because of the variable nature of text (length, size, etc).

Wednesday, April 17, 2013

Build PDF files dynamically with PHP

Build PDF files dynamically with PHP

Sometimes you need control over exactly how pages are rendered for printing. At times like those, HTML is not the best choice. PDF files give you complete control over how pages are rendered and how text, graphics and images are rendered on the page. Sadly, APIs for building PDF files are not standard parts of the PHP toolkit. Now is the time to bring in a little help.