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.

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!

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.

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.

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.

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.

FooTable: a jQuery plugin for responsive data tables

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.

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.

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".

How to: 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.

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.

CSS3 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.

The creation of a 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!

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.

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.

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.

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.

Designing responsive websites (AKA mobile sites) properly

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.

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.

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.

Responsive frameworks

Bootstrap

Bootstrap is a 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls and even a web-based Customizer. Bootstrap utilizes LESS CSS and is compiled via Node. It is probably one of the best know and mature responsive frameworks around. Check the examples to see it in action.

15 cool jQuery modal plugins

There are many situations where jQuery modal plugins can be useful for guiding the visitors focus to a specific piece of content. Basically a modal window is a kind of pop-up window that have been embedded into a web page and therefore appears without the need for a new browser window.

Meet Bower: a package manager for the web

As the web platform has matured, the tools for managing our projects, too, have matured. In this tutorial, I'll introduce you to one of these tools that makes managing the dependencies of your project considerably easier: Bower.

Tiny Circleslider: who said sliders are boring?

Image - or, more general, content sliders are as popular as can be. There are plenty of them on the market. Design and functionality resemble, the choice of a slider is more or less a matter of taste. Tiny Circleslider is different though. This tool lets you place content elements in a circle. This makes for a futuristic look and feel.

BookBlock and Windy: 2 jQuery-plugins provide exceptional content navigation

Chances are, you are not looking for sliders, you have to watch your steps to avoid not trampling on them. There are more sliders on this planet than content for them to take care of. As this is the case, why do we introduce two more variants to our readership? It’s simple. BookBlock and Windy, the new jquery-plugins by Codrops, are extraordinary, totally fresh and new in their approach. They offer a variety of exciting effects to have you present your content in ways not seen before. I am impressed.

Optimizing typography in responsive web design

Each time a discussion pops up about responsive design, the common terminology and concepts that get the maximum attention include grids and images, and obviously the settings like fluid or flexible. Typography, though essentially always deemed important, is rarely given the weightage it deserves when it comes to responsive web design.

Image rollover borders that do not change layout

It's a fact of CSS life that the border of any block level element gets factored into it's final box size for layout. That means that if you add a border on a hover to an element that didn't already have a border of that exact size, you will cause a layout shift. It's one of my pet peeves, for sure, when I see it in final designs. I find those little shifts, even 1 pixel, jarring and awkward.

Understanding Magento Layout Update XML

Note: The following article is constisted of pieces from more than one sources. You can view all of them at the end of the article.

In Magento, layouts are the XML files that define a given page within the store. The templates usually specify a module and a template to go with that block, allowing for standard modules (such as loading a products data) to be combined with custom templates to style the data.

In Magento a block is simply an imaginary container for something. A block can contain other blocks or it can contain the content itself.

<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
     [...other stuff inside...]
</block>

Give floats the flick in CSS layouts

If you're new to CSS layouts, you'd be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You'll be dazzled by the ingenuity, astounded by the complexity and you'll gain a sense of achievement when you finally understand how floats work.

Don't be fooled. You're being brainwashed.

CSS display: inline-block: Why it rocks and why it sucks

Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block.

Cross-Browser inline-block

Ah, inline-block, that elusive and oh so tempting display declaration that promises so much, yet delivers so little. Too many times have I received PSD files like this:

and begin to cry.

datalist Experiment

*Chrome feature

By using <datalist>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves.

How to use the Webshims Polyfill

In this post I'll be talking about the HTML5 and CSS3 feature polyfill library called Webshims Lib and how to use it correctly.

Understanding the viewport meta tag

When working on a new web design one of things you need to think about is responsive design. Is the website you are about to make going to need a responsive design?

I think all external facing sites should take responsive design into consideration. There are some people who think that responsive design is not worth it as people on mobile devices can zoom in to see what they want, but I feel developers should make a website easy to use on any device.

Separate mobile website Vs. responsive website

The US presidential race is heading into full swing, which means we'll soon see the candidates intensely debate the country's hot-button issues. While the candidates are busy battling it out, the Web design world is entrenched in its own debate about how to address the mobile Web: creating separate mobile websites versus creating responsive websites.

Ιt just so happens that the two US presidential candidates have chosen different mobile strategies for their official websites. In the red corner is Republican candidate Mitt Romney's dedicated mobile website and in the blue corner is incumbent Barack Obama's responsive website.

Getting HTML5 ready - ContentEditable

In the prior editions of this series, we took a look at HTML5 parsing and CORS. This week, we'll take a look at a feature that, by itself, doesn't do anything terribly useful but, when combined with other features, can be used to do some interesting things. That feature is ContentEditable and it can be used to allow you to make any document regions editable, allowing a user to modify the text on the page.

HTML5 placeholder fallback using jQuery

If you are a bleeding edge developer chances are you are taking advantage of the new placeholder attribute that can be used with form elements. It can be used on text, textarea, search, url, tel, email and password fields. One thing to ensure is that older browsers function similarly to ensure consistency and proper user experience. The following snippet can be ran to test for placeholder support, fallback older browsers and ensure default values are not submitted in those older browsers.

Stick your landings! position: sticky lands in WebKit

position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.

Sass 3.2 makes authoring CSS3 as easy as it will be

In sass 3.2 there's a new kind of selector called a placeholder selector for use with @extend. Mixins and functions can now take any number of arguments and be defined in nested contexts. You can now pass a block of styles to a mixin for placement by the @content directive. Numbers will have now 5 digits of precision instead of 3. But that's not all. Read on for the details.

CSS :target for off-screen designs

I recently saw a presentation by Ryan Seddon on things you can do with checkboxes. It got me thinking about a similar pseudo selector based on the URL, :target and how it could be used for hiding and revealing elements for extra space (namely on smaller screens). I set myself the task of recreating the iOS Message app without using JavaScript by taking full advantage of awesome CSS3 selectors and transitions.

Vertical showcase slider with jQuery and CSS transitions

A tutorial on how to create a responsive vertical fullscreen slider that moves its sections in opposite directions. We'll be using jQuery, CSS transitions and media queries to make the layout adaptive.

Opt-Out responsive design?

Reader Glynn writes in:

I'm wondering if you'd ever seen a responsive web design in which a "see full site" link was included. I know that when developing a responsive design we should stay away from hiding content completely, however some users may actually prefer pinching and zooming and using good old fashioned horizontal menus on their devices.

Have you seen an example of this and how do you think it could be approached?

4 keyword optimization guidelines for usability and SEO

Since most users visit websites after using search engines, optimizing your website for those engines is valuable in obtaining more traffic. The basic factor which determines how websites rank on a search engine's Search Engine Results Page (SERP) is that when users search for certain keywords, relevant sites are listed. The more relevant the content is to those keywords, the higher the chances of your site ranking.

Heading set styling with CSS

In this tutorial we will create a couple of heading styles to get your creative juices flowing for your next project. Make heading styles work by applying the right combinations of colors, fonts and decoration.

Better password masking for sign-up forms

Editor's Note: This article expresses the author's personal opinion and covers experimental UX techniques which aren't considered to be best practice.

Masking passwords is an old practice that's commonly implemented in sign-up and log-in forms. It's used to prevent over-the-shoulder snoopers from catching the user's password. While masking passwords is a good security practice, there's a chance it could jeopardize the user experience of your sign-up form. When users sign up on a website, they expect a no-hassle, worry-free form to fill out. But masking the password could prevent that.

I Cannot Design or Code a Responsive Website

Don't listen to the voices in your head, advises frontend developer Nick Jones. Here he explains how he got stuck creating his personal site and learned to trust his instincts instead.

Dropdown default styling

There has always been big differences across how different browsers handle form styling. There probably always will be - because UI design choices aren't described in the specs. Browser makers perhaps view this as one of the ways they can differentiate the user experience a bit. Select (dropdown) menus are one that is particularly weird.

Useful tools to check cross-browser compatibility issues

With today's modern web it's not uncommon for many visitors to be using a different browser. The options seem almost unlimited with Mozilla Firefox, Google Chrome, Opera, Safari and of course Internet Explorer. There are also many lesser-known browsers and 3rd party software for Mac and Linux Operating Systems.

Login Screen – behind the scenes

We wanted the login screen to feel personal and for our customers to feel comfortable and familiar with signing in. It's something that our most loyal customers see very regularly too, so it had to be streamlined and quick to understand and submit. At the end of the day, people don't want to stay staring at a login form – they want to use GoSquared – they want to find out more about their website.

8 code snippets for new website projects

Working as a web developer often requires compromise and trying out new systems. Some of your code will turn out to be a flunk and other codes will become staples in your development process. I have learned a lot about useful code snippets and how greatly these can affect your development process.