Figuring out how the CSS of a website works using Firebug – Screencast

The basis of using Cascading Style Sheets (CSS) to apply formatting to an HTML document is deceptively easy to understand, but hard to master. You define selectors that designate HTML elements, which contains formatting rules that apply to those elements and their children. If more than one rule applies to an element, they are applied using a priority order, from the more general to the more specific: that’s where the “cascading” part comes in.

It’s almost impossible to predict how a website will look by looking at the code. If you have to modify the CSS of an application you don’t know “just” to change a color or a font size using only your text editor, you’re out of luck. Figuring out the priority of each selector is complicated if you have many stylesheets that applies to a page, and you can easily miss a more general selector. You can’t just look at an element on the page and immediately deduce which CSS rules are affecting it, especially if there are many contradictory rules.

That’s where tools such as Firebug for Firefox or the Developer Tools in Chrome comes in. Among many other great features, they allow you to see which rules are affecting a particular element on the page, and to modify them on the fly.

Of course, it won’t modify your original CSS since it only changes the local copy in your browser, but you can quickly test what’s the impact on your page and then make the modifications. You can also use those tools to explore your favorite websites and see how they used CSS to format elements: it can be a great learning tool if you’re looking to grow your CSS knowledge.

Here is a screencast on how to use Firebug to figure out where the colors are defined on the Twitter website:

Basic JavaScript arrays reminder

I’m pretty bad when it comes to remembering syntax details for languages I don’t use every day, especially since I work with a few languages that use C-syntax and not just JavaScript. Also, it’s not the kind of details I want to spend a lot of time studying since this information can easily be found.

In most cases, it’s easy to look up how something is done in the project you’re working on, since you’ll want to follow existing patterns anyway. But since I’m working on refreshing my JavaScript knowledge and trying new patterns, I’m often faced with a blank .js file. Arrays are always one of the first things that comes up when trying to solve a problem, so I thought a quick reminder could be useful.

A standard JavaScript array is most often initialized with the bracket notation. There is also an Array object, but using the Array() constructor is not totally identical to using the bracket notation since it’s an object in that case. To keep things simple I won’t be using the object since standard arrays are a lot more common.

var fruitsArray = [];

Inserting new items at the end of an existing array is done using the push() method. The array will resize to accommodate the new items. An array can also contain any items: it is not limited to one type.

fruitsArray.push("Tomato");
fruitsArray.push("Squash");
fruitsArray.push("Potato");
fruitsArray.push("Carrot");

Removing the last item at the end of an array is done using the pop() method. In the example, the “Carrot” item will be removed.

fruitsArray.pop();

Sorting an array is done using the sort() method. By default, the items are sorted as strings, so it works for the example. For more complex cases, a sort function can be passed as a parameter to the method.

fruitsArray.sort();

Looping in an array from the start to the end using the for loop, getting the items and printing them to the console. The example also shows the length property to get the current size of the array.

for (i = 0; i < fruitsArray.length; i++) { 
   console.log(i, fruitsArray[i]);
}

Checking if a variable is an array, printing the result to the console. This condition is useful when you can’t be sure about the type of a variable, for example because you received it as a parameter.

if (fruitsArray instanceof Array)
   console.log("fruitsArray is an array");
else
   console.log("fruitsArray is not an array");

Finding an item in an array using the indexOf() method. This method returns the index of the item in the array, or -1 if the item doesn’t exist.

var itemIndex = fruitsArray.indexOf("Carrot"); // Contains -1
itemIndex = fruitsArray.indexOf("Potato");     // Now contains 0

Finally, here are all the examples in one code snippet so you execute them and try for yourself :

var fruitsArray = [];

// Inserting items
fruitsArray.push("Tomato");
fruitsArray.push("Squash");
fruitsArray.push("Potato");
fruitsArray.push("Carrot")
console.log(fruitsArray); // ["Tomato", "Squash", "Potato", "Carrot"]

// Removing an item at the end of the array
fruitsArray.pop();
console.log(fruitsArray); // ["Tomato", "Squash", "Potato"]

// Sort the array as string
fruitsArray.sort();
console.log(fruitsArray); // ["Potato", "Squash", "Tomato"]

// Length of the array
console.log(fruitsArray.length); // 3

// Looping in an array, getting the items
for (i = 0; i < fruitsArray.length; i++) { 
   console.log(i, fruitsArray[i]);
}

// Check if a variable is an array
if (fruitsArray instanceof Array)
   console.log("fruitsArray is an array");
else
   console.log("fruitsArray is not an array");

// Search for an item in an array (returns the index)
console.log(fruitsArray.indexOf("Carrot")); // -1
console.log(fruitsArray.indexOf("Potato")); // 0

Why your web application is not a one-time investment

SoftwareMarathon Creating a custom web application is a big investment for a small business. Getting it done requires a lot of work, starting with discussions about needs and specifications and followed by coding, demos and adjustments. It’s tempting to say that everything is be over and done after all this and that nobody should need to touch that piece of software again. Consulting engagement are also often structured this way and not as a retainer, but that’s a flawed approach: software is a living thing that needs to be adapted again and again to stay relevant.

Here are some of the reasons why you need ongoing investments in your software to get the best out of it and keep your clients happy for many years:

New features are needed

You may think that you’ll never need a new feature, but something always comes up sooner or later:

  • A new social network or other application comes out and you must absolutely support it for marketing purpose or for your users.
  • New law and regulation comes out, forcing you to revise how taxes and rates and calculated.
  • An existing tool you were using closes down, for example your payment processor, forcing you to move to another one.
  • You’re doing a new promotion, special offer or program and need to add something to support it.

Those reasons may not be related directly to the core functionally of your software, but in most cases you won’t have any choice if you want the business to keep working it.

Technology keeps moving

Technology keeps progressing at a neck-breaking speed. Less than 5 years ago, few people had a smartphone: the first iPhone with was launched in 2007, and it had a tiny screen by today’s standards. Tablets are even newer: the first iPad was launched in 2010, and the first Android version made for tablets in 2011. But right now, you cannot ignore mobile if you’re building web applications: users will access it using their mobile devices whether you like it or not.

What’s going to be the next big thing in the next five years? Watches? Virtual reality? It’s pretty hard to plan for things that don’t exist yet, but when they happen your software may need to be adapted to it as users ask for it.

Servers are updated

All web applications must runs on web servers. Those servers have their own software, and those are also updated for security reasons and to add new features. Over time, this may also require modifying your web application as older versions of the software they are running on are no longer supported. Staying on the old software is not a very good option: over time, it stops being updated so it will be more and more insecure as time goes it. It’s not worth betting the privacy of your business and your customers on old technology.

New browser versions comes out

Before, web browsers were updated slowly and a new version was a big thing. Nowadays, browsers are automatically updated with the newest features every day. It’s rare, but a small update can break your site even if it was done well if a browser changes a small detail in a feature or introduces a bug. The web standards also evolve all the time, and browsers adapt to those changes: new features being added all the time and old ones are no longer supported. Over time, those needs to be adapted so the application keeps working correctly on all browsers and devices.

In conclusion…

For all those reasons, any application needs to be cared for during its lifetime to make sure it stays healthy. If you’re not ready to make that kind of investment, an off-the-shelf application that requires less investment but that is harder to customize may be the better way to go. It will also need to be maintained and may not have 100% of what you need, but it is less work because others will be in charge of evolving the core of the application. But if you want to have a custom application and take care of it, you need to be ready to do what’s needed.