Articles > Snippet

Tools And Tips To Make Your Life Easier As A Web Designer

There are plenty of applications, resources or services out there that can help make your life as a web designer easier. I've used many different ones over the years, and there are some I keep coming back to. This is a personal list, and I would love to hear about any alternatives that you've found useful too! Task Management ... One of the most important things in your life (both personal and professional) is your time. There is a finite amount of it and keeping track of what you have to do and by when is vital....

Turning the Querystring into a JSON object using JavaScript

The query string in the DOM has always been a bit awkward, why there isn't a standard method of parsing it is beyond me. The normal route most people follow is to convert it in to a simple array of Key/Value pairs. This allows you to then access the values of the query string using the array accessor syntax. //domain.com/index.html?key=value var value = querystring_array['key']; Still a little clumsy isn't it? Wouldn't it be great to be able to just retrieve the value from a normal JavaScript/JSON object?...
CSS

Using CSS3 pseudo-classes and transitions to create interactive links and buttons

Hyperlinks and buttons are a functional yet in general boring aspect of a website or web application. They tend to provide very little feedback when you interact with them. This doesn't have to be the case, it's very easy to add some simple styling to let the user know that they have either interacted with or can interact with an element. Pseudo-classes And Selectors ... Pseudo-classes for links have been in CSS for many years and for the most part people just reset them all to be the same color and text-decoration....
CSS

Using CSS3 to provide smooth resize effects

Ever noticed if you resize your browser window with Gmail open (or Asana or a host of other sites) the various elements on screen resize automatically in a smooth animation? This can be done using JavaScript or jQuery, but can also be achieved using CSS3 transitions and @media selectors. Introduction to @media selectors ... If you already have a responsive design you'll probably be familiar with @media selectors. If you're not familiar, they are essentially a way of applying specific CSS classes to...
CSS

HTML5 and CSS3 Form Validation

In HTML5 forms got a major upgrade with the addition of some simple, yet flexible validation attributes. To support these added attributes CSS3 also added several new pseudo selectors styling controls based on their validation state. Adding validation ... To illustrate the new attributes and some of the new input types, we'll be building up a simple sign up form. Every sign up form is essentially the same, you fill in your details and click submit. How many times has the form been reset on you after you've...

Adding custom next/previous post buttons to WordPress using Font Awesome

The default WordPress theme (TwentyTwelve) comes with a pretty standard previous/next post function for the theme. I don't particularly like the links as they feel a little forgotten about and they could easily be so much more. This snippet will show you how to create a custom navigation function and we'll be using Font Awesome to add some icons. Adding Font Awesome ... Font Awesome is quite literally awesome. It's a collection of over 360 icons presented as a font. This means you can easily add it to any...

Customizing the WordPress footer by adding widgets

The footer is often overlooked when it comes to designing a site, but it's a great way to find contact details or other important pieces of information. People have been trained to look there since the days of letter writing. Even today if you look at any correspondence, utility bill or company letterhead you'll find important information. On websites it's an can be an important navigation tool, it can give you quick access to commonly needed pages that are not core to a site. In this quick tutorial we'll...
CSS

CSS3 and the nth-child

How many times have you seen a piece of JavaScript or PHP code that's only purpose is to add a specific class to the first, alternate or last element of a list or row of table? With CSS3 you can easily get rid of all of that logic and replace it clean and simple CSS selectors. This will help tidy up your code and depending on what exactly the code is doing reduce CPU load by removing unnecessary recursions (This is of course a minimal gain, but every little bit counts) What is the nth-child ... The nth-child is a pseudo-class...
Load more
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress