Smashing Coding

Category: Coding

This extended category features articles on client-side and server-side programming languages, tools, frameworks and libraries, as well as back-end issues. Experts and professionals reveal their coding tips, tricks and ideas. Curated by Kieran Masterton. Subscribe to the RSS-Feed.

Popular tags in this category: CSS, CSS3, HTML, JavaScript, jQuery, PHP, Techniques, Essentials, Tools.

Orbit and Reveal: jQuery Plug-Ins For Image Sliders and Modal Windows

By ZURB
July 15th, 2011
JavaScript, JQuery
80 Comments

A visitor comes to your website all giddy to learn more about your product, when suddenly a snazzy slideshow loads with some snap. Impressed, they go to register and are greeted by a most elegant modal window. At this point they are finally overjoyed by the velociraptor that suddenly charges across their screen. They don't know why but they like it.

Crafting a polished and unique experience for your users is becoming ever more critical as the Web gets more overloaded. Standing out is hard. To the rescue come frameworks such as jQuery, which offer a modular, highly customizable experience for your visitors.

Learning To Use The :before And :after Pseudo-Elements In CSS

If you’ve been keeping tabs on various Web design blogs, you’ve probably noticed that the :before and :after pseudo-elements have been getting quite a bit of attention in the front-end development scene — and for good reason. In particular, the experiments of one blogger — namely, London-based developer Nicolas Gallagher — have given pseudo-elements quite a bit of exposure of late.

To complement this exposure (and take advantage of a growing trend), I’ve put together what I hope is a fairly comprehensive run-down of pseudo-elements. This article is aimed primarily at those of you who have seen some of the cool things done with pseudo-elements but want to know what this CSS technique is all about before trying it yourself.

Advertisement Advertise with us!

Behind The Scenes Of Nike Better World

By Richard Shepherd
July 12th, 2011
CSS, HTML, HTML5
81 Comments

Perhaps one of the most talked about websites in the last 12 months has been Nike Better World. It's been featured in countless Web design galleries, and it still stands as an example of what a great idea and some clever design and development techniques can produce.

In this article, we’ll talk to the team behind Nike Better World to find out how the website was made. We'll look at exactly how it was put together, and then use similar techniques to create our own parallax scrolling website. Finally, we'll look at other websites that employ this technique to hopefully inspire you to build on these ideas and create your own variation.

My Favorite Programming Mistakes

By Paul Tero
July 7th, 2011
JavaScript, PHP
100 Comments

Over my programming career, I have made a lot of mistakes in several different languages. In fact, if I write 10 or more lines of code and it works the first time, I’ll get a bit suspicious and test it more rigorously than usual. I would expect to find a syntax error or a bad array reference or a misspelled variable or something.

I like to classify these mistakes into three broad groups: cock-ups (or screw-ups in American English), errors and oversights. A cock-up is when you stare blankly at the screen and whisper “Oops”: things like deleting a database or website, or overwriting three-days worth of work, or accidentally emailing 20,000 people. Errors cover everything, from simple syntax errors like forgetting a } to fatal errors and computational errors.

How To Modify A Default Joomla 1.5 Template

Joomla is a popular open-source content management system with a lot of possibilities. One of the strengths of Joomla is the vast number of extensions and templates available, both free and commercial. You can download and install a template in a few simple steps, although some templates are included in the Joomla installation package, and most users start with one of those. This article takes you through one of the default Joomla 1.5 templates and shows you how to modify it for your website.

Joomla 1.6, which was released earlier this year, has a different way of handling templates. For instance, it introduced the concept of template styles. However, many users are still on Joomla 1.5. Thus, the information in this post will be valid to many Joomla users. Also, the techniques used in this post can be applied to Joomla 1.6 and later versions even if the template structure is somewhat different.

Setup A Ubuntu VPS For Hosting Ruby On Rails Applications

By David Boot
June 28th, 2011
Linux, Ruby on Rails
32 Comments

Let’s assume you have built a nice little Ruby on Rails application on your local development machine. Now it’s time for the application to go live. But where should you host this application? You know that you (or your client) do not have much money to spend, and so you look at the options. You notice right away that managed hosting of applications tends to be relatively expensive.

Heroku is a good option, but it doesn’t give you storage space, and more importantly, it lacks full control. Luckily, you have a suitable alternative: a VPS. This tutorial will help you get through the steps required to set up an Ubuntu VPS that is capable of hosting (multiple) Ruby on Rails applications. This tutorial builds on part 1. We recommend that you follow that part first and use the same Ubuntu local development machine that you set up there to walk through this part.

A Guide To Starting Your Own Rails Engine Gem

By Ryan Cook
June 23rd, 2011
Ruby on Rails
30 Comments

Since Rails 3 was released, developers have been writing Rails engines in a new clean style that can be packaged as RubyGems. A Rails engine is a prepackaged application that is able to be run or mounted within another Rails application. An engine can have its own models, views, controllers, generators and publicly served static files.

Now, unless you like writing a lot of code, this is great news, because it means you can write an engine once and use it over and over again. Let’s say you build a lot of websites for small businesses. A common requirement for such websites is a page listing all of the employees at a company and some basic information about them. This is a great candidate for a Rails engine gem because the functionality will change very little and can be abstracted to a common set of requirements.

Set Up An Ubuntu Local Development Machine For Ruby On Rails

By David Boot
June 21st, 2011
Linux, Ruby on Rails
43 Comments

So, you want to develop Ruby on Rails applications? While loads of (introductory) tutorials are available for developing Ruby on Rails applications, there seems to be some uncertainty about setting up a lean and up-to-date local development environment.

This tutorial will guide you through the steps of setting up an Ubuntu local development machine for Ruby on Rails. Part 2 of this tutorial, which will be published here later, will help you through the steps to set up an Ubuntu VPS. For now, knowing that VPS stands for virtual private server is sufficient. It will be able to host your newly developed Ruby on Rails applications. But let’s focus on the local development machine first.