How to create a filterable gallery with jQuery

We see filterable galleries in plenty of portfolios, they're a nice and tidy way of showing off different categories of work without forcing the user to review everything. We're going to build a filterable gallery using the data attribute that came with HTML5, this way we don't have to tie everything up with classes. If you want a better idea of what we will be creating, here's a demo. The data attribute  ... I mentioned in the introduction that in this tutorial we will be using the data attribute,...

Deal of the week: Over 2,000 exclusive unique fonts

Typefaces are the most elemental resource designers have in their toolbox. They’re a great way to add personality to designs, and really make your projects stand out. Unfortunately, building a large library of quality fonts is incredibly expensive. With professional grade fonts often retailing in excess of $200 each, a large selection to choose from is normally beyond the reach of all but the very largest design studios. So we are delighted that our sister-site, MightyDeals.com, has managed...

Introducing Grunt

When you’re developing a large-scale project you always want to use some kind of task runner, in order to automate your workflow. Grunt is exactly that, a JavaScript task runner. It can prepare your code for production with one simple command. What can Grunt do ? ... Grunt is a JavaScript task runner and it’s able to compile your CoffeeScript, Less or Sass files , lint all your JavaScript, minify it or even put all of it in one file by concatenating them. Grunt is an amazing automation tool that allows...

Deal of the week: Elite Pro icons

There is nothing worse than trawling through icon sets, looking for the right icon, as the clock clowly ticks down towards a deadline. There are so many great vector icon sets out there, but very few are as comprehensive as PictoFoundry's Elite Pro. With over 850 unique vector icons, Elite Pro should be your first stop when hunting for that unique combination of icons you need for your project. So we're delighted that our sister-site, MightyDeals.com, has been able to arrange a huge 85% discount on...

Introducing Yeoman

Web developers all have different ways of working, but there’s always that set of frameworks and libraries we install on each project no matter what. With this comes the tedious work of downloading each one and placing them in our project folder; this doesn’t sound like much if done once or twice but when it’s necessary almost everyday it becomes a tedious task. If you share this opinion Yeoman is right up your alley. What is Yeoman ? ... Yeoman is a workflow, it’s not just a tool but a collection...

Introducing PhysicsJS

A lot of us create JavaScript animations in our projects, these animations are usually simple and require no physics whatsoever. PhysicsJS aims to change that by making it easy for us to add physics to our JavaScript animations without slowing download time. This library is modular, that means you only need to load what you want to use, and the core files are just 31kb. Why use this library ? ... One of the reasons is its modular workflow. This has the advantage of removing the clutter you don’t need and...

Deal of the week: Massive infographic bundle

There’s no escaping the fact that some of the most vital information can be as dull as dishwater. No matter how you try and write up facts and figures, they just don’t grab people. When it comes communication, an infographic is worth a thousand statistics. So we’re delighted that our sister-site, MightyDeals.com, has put together this great deal on a huge infographic bundle to get you started on the path to viral content. Included in the deal are over 100 unique infographic templates, packed with...

Introducing Recess

We all make mistakes when creating our code, it’s part of being a programmer and having a linter that pulls us up when we make errors is always a great idea. We already have a famous one for JavaScript, JSLint, and now Twitter has given us one for CSS. It’s called Recess and it can help us keep our CSS code clean and super manageable. Installation ... In order to install this linter you’ll first need to have node and npm installed on your computer. If you have that installed then installing recess is as...

How to use CSS filters

CSS Filters are a powerful tool that allow us to achieve some amazing visual effects with our elements; they are especially great for hover effects. Filters provide us with a method for modifying the rendering of a basic DOM element. They allow you to do things like blur, modify contrast, even the color of your element. Creating filters ... When I think about image filters, the first thing that comes to mind is the black and white filter; taking a full-color image and turning that image into a monochrome...
Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns