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.

Wednesday, April 17, 2013

PHP & MySQL – Preventing MySQL Injection

Preventing MySQL Injection
In this tutorial I am going to explain what MySQL injection is and how important it is to prevent this attack on your database(s). It is vital that all security measures are in place before you make your website live because the effects can be devastating especially if you store sensitive data. Lets start with the basics and learn what MySQL injection is.

Tuesday, April 09, 2013

6 Problems Hindering Responsive Web Designing With Solutions

Problems Hindering Responsive Web Designing With Solutions
The emerging trend of using internet through Smartphones is making web designers think about responsive web designing. However, there are several problems that web designers have to encounter while creating such designs. The problems usually occur in the technical areas. Some common RWB problems that web designers face along with solution are given in the lines below.

Tuesday, April 09, 2013

Better Navigation Through Proprioception

Better Navigation Through Proprioception
Close your eyes and touch your nose. How did you do it? How did you sense where your hand was and direct it to the right point? You're not using sight, hearing, taste, smell, or touch (except right at the end). Instead, you're relying on proprioception: the sense of your body's position in space and the position of various parts of the body in relation to each other.

Tuesday, April 09, 2013

Modular CSS with Media Queries and Sass

Modular CSS with Media Queries and Sass

Most developers nowadays are recognizing that if you're developing large applications that have different views and states, it is best to take a modular or object-oriented approach to your CSS development.

Tuesday, April 09, 2013

Namespaces With PHP

Namespaces With PHP
PHP namespaces was introduced in version 5.3. Namespaces is a way of group classes together into virtual directories, the main reason we would want to do this is to help avoid collision of class names in your application.

Wednesday, April 03, 2013

The Lengths of CSS

The Lengths of CSS

There are quite a few properties in CSS that take a length as a value. The box model properties are the obvious ones: width, height, margin, padding, border. But plenty of others as well: the offset and sizing of a box-shadow or the size and spacing of fonts. What are all the accepted "length" properties in CSS? There are quite a few.

Wednesday, April 03, 2013

Using SVG

Using SVG

Further reading: Why Aren't You Using SVG?

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.

Wednesday, April 03, 2013

Create An Interactive Metro Style Grid Dashboard

Metro Style Grid Dashboard

Since Windows 8 released it's first pictures of the new design, people have been going crazy over the metro style. People love it, it's modern, it's clean, it's simple and makes it really easy to use on mobile devices, especially on tablet devices.

Wednesday, April 03, 2013

Horizontal centering using CSS fit-content value

Horizontal centering using CSS fit-content value

Further reading: Centering Things

The other day I read a good article on horizontal centering by Roger Johansson in where he explains the shrinkwrapping effect. Basically, it's about one of the most common problems you can find in the wild, namely how to center a navigation bar which contains floated elements with undefined widths.

Wednesday, April 03, 2013

Automatic Table of Contents

Automatic Table of Contents
A live example of this can be found on CodePen's PRO feature pages like this one for Professor Mode.

Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can create a table of contents manually, but it may be smart to build it dynamically on-the-fly with JavaScript. This is true for several reasons:

Wednesday, April 03, 2013

Animations with SASS and @while

Animations with SASS and @while
A few months ago I was working on a looping Wi-Fi signal animation for Karma. Initially I wrote a bunch of SASS with a few mixins, until I discovered the @while directive which repeatedly outputs a given number nested blocks of styling. Resulting in 20 lines of SASS that generates as many animated signals as you could possibly want and automating the math as well.

Wednesday, April 03, 2013

Formatted Strings With PHP

Formatted Strings With PHP
When you are using PHP to output a string on the page most of the time you will use the syntax echo, which will take the following string and display that string in HTML.

Wednesday, April 03, 2013

Tricky Textarea Pulltab

Tricky Textarea Pulltab
The humble textarea

In desktop Safari, Chrome, Firefox, and Opera-under-Presto, (not IE, not mobile anything) <textarea>s have a little resizer nugget in the bottom right corner. Textareas are for writing in, so if users need more space to feel more comfortable writing in there, they can have it. Clicking and dragging that resizer literally changes the box model of that textarea, pushing other things away as needed. We can use that little ability to make a trick!

Wednesday, April 03, 2013

All In The Family: Grouping CSS Selectors

Grouping CSS Selectors

Grouped selectors are one of the most efficient ways of reducing your CSS to tight, clean, easily maintained code, while bringing the benefit of imposing a stronger, more consistent design.

Wednesday, April 03, 2013

How To Style A Checkbox With CSS

How To Style A Checkbox With CSS
Checkboxes is a HTML element that is possibly used on every website, but most people don't style them so they look the same as on every other site. Why not make your site look different by styling your checkboxes, you could even make them look nothing like checkboxes.

In this tutorial we are going to create 5 different checkboxes which you can use on your website.

Wednesday, April 03, 2013

Printing The Web

Printing The Web

While it is possible to consume nearly all means of content on your smartphone or tablet it seems like the dream of a paperless office comes true for a lot of web developers.