Friday, December 21, 2012

Building a relationship between CSS & JavaScript

Building a relationship between CSS & JavaScript
jQuery, Prototype, Node.js, Backbone.js, Mustache and thousands of JavaScript microlibraries all combine into a single undeniable fact: JavaScript is popular. It's so popular, in fact, that we often find ourselves using it in places where another solution might be better in the long run.

Even though we keep JavaScript, CSS and HTML in different files, the concepts behind progressive enhancement are getting all knotted up with every jQuery plugin we use and with every weird technique that crops up. Because JavaScript is so powerful, there are a lot of overlaps in capability between JavaScript and HTML (building document structure) and JavaScript and CSS (injecting style information). I'm not here to pick on any JavaScript library, bootstrap or boilerplate; I'm just here to offer a little perspective as to where we are and how we can realign our goals.

Friday, December 21, 2012

Flashless Animation

Flashless Animation

Animation in a Flashless world

When I splashed down in web design four years ago, the first thing I wanted to do was animate a cartoon in the browser. I'd been drawing comics for years and I've wanted to see them come to life for nearly as long. Flash animation was still riding high, but I didn't want to learn Flash. I wanted to learn JavaScript!

Friday, December 21, 2012

Giving content priority with CSS3 grid layout

Giving content priority with CSS3 grid layout

Browser support for many of the modules that are part of CSS3, have enabled us to use CSS for many of the things we used to have to use images for. The rise of mobile browsers and the concept of responsive web design has given us a whole new way of looking at design for the web. However, when it comes to layout, we haven't moved very far at all. We have talked for years about separating our content and source order from the presentation of that content, yet most of us have had to make decisions on source order in order to get a certain visual layout.

Friday, December 21, 2012

How to detect DOM changes in CSS

How to detect DOM changes in CSS
This post is for the developers out there and is quite heavy on technical details. While integrating with Gmail's new compose window we ran into the issue of detecting when a compose window was open or closed. If you have Streak installed and are using the new Gmail compose you'll notice that the controls get inserted pretty much instantly - this post is about how we accomplish that.

Traditionally the two classical methods for detecting DOM changes are 1) using a timer, or 2) binding on the DOM mutation events.

Both methods suck.

Friday, December 21, 2012

IE10 CSS Hacks

IE10 CSS Hacks

Last year, Microsoft announced that IE10 will not be supporting conditional comments. With their history, this is obviously a risky move. Up to now, to target quirky behaviour in IE6-9, developers have been using conditional comments, conditional classes and other IE-specific hacks.

Thursday, December 20, 2012

CSS architecture

CSS architecture

To many Web developers, being good at CSS means you can take a visual mock-up and replicate it perfectly in code. You don't use tables and you pride yourself on using as few images as possible. If you're really good, you use the latest and greatest techniques like media queries, transitions and transforms. While all this is certainly true of good CSS developers, there's an entirely separate side to CSS that rarely gets mentioned when assessing one's skill.

Thursday, December 20, 2012

FooTable: a jQuery plugin for responsive data tables

FooTable

These days, everyone is jumping on the responsive bandwagon. Apart from responsive layouts, everything is going responsive: sliders, lightboxes, galleries, you name it! But then one day, when I was working on an HTML table with a lot of columns, I thought "How is this going to look on my iPhone?". And then I searched for "responsive tables" and found Chris' roundup post on a few solutions out there.

Tuesday, December 18, 2012

Responsive column layouts

Responsive column layouts

Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I'm going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn't require any first or last class and the number of columns can be adjusted base on the viewport. In other words, it can be toggled from 4-column to 3-column or 2-column, etc.

Tuesday, December 18, 2012

Fly in newly added content to a page

Fly in newly added content to a page

Say that for any reason, a new module of content needs to appear on a page. By simply appending that new module into the DOM it will instantly appear. That might be enough of an "entrance" - or it might be too subtle. I'd think when you add new content to a page, you want people to see it. Animation might be the ticket. It technically slows down the entrance of the new content, but the visual effect will certainly make it more noticeable. Let's write some code to make all new modules added to a page "fly in".

Tuesday, December 18, 2012

How to: CSS large background

CSS large background
Common Mistake: Background Gets Cropped (see demo)
Take a look at the demo file, it looks fine under 1280px. But if you have a high resolution display, you will see the background gets cut off on the sides.

Tuesday, December 18, 2012

5 APIs that will transform the Web in 2013

5 APIs that will transform the Web in 2013
It's incredibly exciting to see how the Web is evolving and 2013 has a lot more in store. Over the next year, there are a number of technologies coming down the pipeline that have the potential to radically transform how we use and develop for the Web.

Tuesday, December 18, 2012

CSS3 substring matching attribute selectors

substring matching attribute selectors

In the CSS3 selectors module, the W3C introduced a new set of attribute selectors called substring matching attribute selectors for specifically targeting elements whose given attribute begins, ends or contains a certain value. In this article, we’ll learn how these 3 attribute selectors make our CSS more dynamic by allowing us to style elements without the need for additional classes or IDs.

Tuesday, December 18, 2012

The creation of a CSS3 clickable, rotating menu

CSS3 clickable, rotating menu

Over the past few days I've been messing around with transitions and transforms and managed to come up with this little menu. It incorporates a bunch of different CSS techniques, but is very experimental!

Friday, December 14, 2012

Make your own webfont

Make your own webfont
There are many ways to find the perfect typeface for your site design: buying a font from a professional subscription service such as Typekit, Fonts.com or Webtype; finding a free font online, or making your own from scratch. In this article, I’ll focus on the latter two options.

Friday, December 14, 2012

Sticky captions concept

Sticky captions concept

When creating thumbnail grids, we usually want to show image captions on hover to provide more information about the item. Image captions are usually shown in a very specific part of the thumbnail, either on the top, the middle or the bottom. When adding captions to the bottom of a thumbnail it can happen that a thumbnail that is overflowing the viewport (i.e. is partly beyond the "fold") is being hovered but the caption won’t be seen because it appears on the bottom part of the image that is not visible. The user would have to scroll the page in order to see the bottom of the item and eventually the caption.

Friday, December 14, 2012

Fullscreen pageflip layout

Fullscreen pageflip layout

We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to customize BookBlock and use some available options for navigating the content.

Friday, December 14, 2012

Simple effects for drop-down lists

Simple effects for drop-down lists

Today we want to share some simple drop-down list effects with you. The idea is to transform a normal select input into something more appealing with a jQuery plugin. The expanding of the options will happen with a transition and parameters can be configured in a way to achieve unique effects.

Friday, December 14, 2012

Designing responsive websites (AKA mobile sites) properly

Designing responsive websites

Over the course of my career, I have been very fortunate to work with many creative and talented UX/UI and Visual designers that were able to come up with great solutions to very complex problems. Luckily, I still do. But whereas many of my creative colleagues have kept the pace with the advances of technology, it'd seem to me that others are struggling to design responsive websites properly.

Friday, December 14, 2012

The pursuit of simplicity

The pursuit of simplicity

As developers and designers we're especially predisposed to be problem solvers. We strive for perfection and innovative solutions. We want simplicity. Yet we still aren't sure what it exactly means. In this article we'll discuss what the idea of simplicity means when it comes to application development, some ways developers and designers try to achieve simplicity and look at the potential benefits and drawbacks of each strategy.

Tuesday, December 11, 2012

Prevent MySQL injection

Prevent MySQL injection

In this post we will discuss what MySQL injection is and how important it is to prevent this attack on your mysql database. As developer it's important to check all security measure before you make your website live.

SQL injection is a code injection technique that exploits security holes in a web application. These security holes happens when user input is either incorrectly filtered for string literal escape characters embedded in SQL statements or user input is not strongly typed and unexpectedly executed.