Have you ever come across a beautifully designed website and wished you had X-ray vision to see how all those HTML elements on the site work? Have you ever wanted to see how a certain design might look on your site without actually changing the underlying code?

Well, you don’t have to wish or think anymore because a powerful and really useful browser extension called Firebug can help you do all that. Any designer or developer looking to experiment with different styles on a website in real-time needs this tool. The Firebug tagline, “Web Development Evolved” is exactly what the plugin has done in the Web development circles. It is a tool that non-developers will also find invaluable.

Edit Attribute Values

Firebug allows users to inspect <div> tags and change their attribute values. Any change made to the code is immediately visible on the browser window. Firebug works by allowing a user to either click on the browser window elements directly, which in turn, highlights the code that renders the element, or click on the code which highlights the browser elements. This is a useful functionality that allows a user to visualize and resolve float problems and padding or margin issues by simply changing the numeric values or properties associated with those elements.

Debugging JavaScript

Firebug JavaScript debugger allows you to pause executions and measure performance to find bottlenecks. Running inside the browser window has its advantages as well. To debug JavaScript with Firebug, simply launch the Firebug console and go to the “Script” tab from where you can set the “Breakpoints”. Navigate to the “Breakpoint” window on the right panel and click on the appropriate browser window element to activate the code. The execution should stop at the breakpoint that you set.

Similar to other debuggers, you can then use the buttons on the Firebug toolbar to “Continue”, “Step Over”, “Step Into” and “Step Out” during code execution. If you choose, you can let Firebug give you the option to break automatically when an error occurs so you can examine the conditions responsible for the error.

Edit HTML in Real-Time

If you are the sort of user or developer who likes to do quick in-browser tests without having to login or get authorization to access the HTML files, Firebug again comes to the rescue. The ability to edit HTML within the browser window is especially useful when working on a website you don’t own. Firebug allows you to add and remove HTML elements, class or ID to elements and add temporary inline styles. For example, you can test the styles below to see which works better on your site:

style = “color:#FFFFFF”

or

style = “color:#FFF000”

Always have an HTML editor handy to copy your code since Firebug does not allow you to save the changes. Once you refresh the page or click on a link, all the changes you have made disappear.

Editing CSS on the Fly

For Web designers, CSS is where all the action takes place and learning how to edit CSS properties gives you the ultimate control over how your website looks. Highlighting an HTML element automatically highlights its CSS on the left panel with the most recent declarations appearing at the top. Any inline styles will also be displayed at the top as “element.style”.

Firebug shows clearly what CSS properties are affecting the selected HTML element. Those that have been superseded by another declaration are crossed out, meaning that that rule has been overwritten by another rule which came after or has the ‘!important’ designation. That however, is not the end of the road. You can actually edit the CSS right inside the Style side panel.

CSS properties and values can be disabled or added that affect the web page in real-time. Any inline style that you add will not appear on the Style side panel but its effect will be visible on the browser window.

Try out Firebug and see how it works out for you. If you are like me, you can also use it to prank your friends by editing a popular web page and watching their reaction.

...

The rising global popularity of smart phones and other small-screen Internet devices has created a number of dilemmas for web developers. Among the most pressing is the issue of serving the proper image files for widely divergent screen sizes.

The industry has responded with a variety of solutions, including separate mobile websites that are much leaner in terms of shown images.

A new attribute, <img srcset>, has the potential to resolve some of the issues by enabling the desired image size, among several options, to be served by a browser. However, this ‘adaptive’ HTML tag has fueled both controversy and an ardent industry debate, as detailed later on.

The attribute syntax consists of an image ‘candidate string’, in which a comma delimits a set of alternate images to be displayed according to a device’s screen size.

Let’s take a closer look at the basic <img srcset> coding:

<img src="desktop.jpg" srcset="mobile.jpg 400w 2x, medium.jpg 600w" alt="Adaptive images">

The default image is desktop.jpg. If the device screen size is 400px in width, or less, mobile.jpg will be displayed. At 600px, the user-agent can display either mobile.jpg or medium.jpg.

The ‘descriptors’ that provide the necessary information to determine which image should be exhibited are:

400w — maximum viewport width of 400 CSS pixels 2x — maximum pixel density of two device pixels per CSS pixel Maximum viewport height can be set with the use the ‘#h’ descriptor (ex. 600h)

A few words of explanation about ‘CSS pixels’ vs. ‘device pixels’:

CSS pixels are the ones utilized in CSS declarations, such as width: 200px. The noted size is equivalent to 200 device pixels only when the screen zoom factor is exactly 100%.

When a user utilizes the ‘zoom in’ function, a 200px-width element will occupy a larger portion of the screen and become wider when measured in device pixels, though in CSS pixels it remains the same.

In the above example, suppose that mobile.jpg is 100 x 100px and medium.jpg is 200 x 200px. If the former is selected, the user-agent will calculate the intrinsic size as (100/1) x (100/1) = 100 x 100px. 1x is the default pixel density setting. However, if medium.jpg is chosen, with a 2x density designation the computation will be (200/2) x (200/2) = 100 x 100px. Therefore, the same image size will be on display, but one will be of higher viewing quality.

Practical Uses

The new attribute has any number of practical applications. For instance, say you wanted to maximize the landscape and vertical views of an image in a smart phone. The coding would look something like this:

<img src="landscape.jpeg" srcset="vertical.jpeg 400w" alt="Maximized image view in both landscape and vertical orientations.">

Another example might be when an image looks great in widescreen format, but needs to be cropped to emphasize the most important features when viewed on more constricted screen:

<img src="widescreen.jpg" srcset="widescreen_image_cropped.jpg 500w" alt="Image with essential feature emphasized.">

The Controversies

A longstanding debate on the most effective way to enable the capability for adaptive images has set web developers against browser engineers, as well as causing a schism among developers.

The first dispute centers on the browser mandate to display a given web page as quickly as possible. By presenting a number of image options, the <img srcset> tag conflicts with a browser’s pre-fetch function, which downloads all page elements even before the design parameters are known. By causing even a short pause to determine the correct image, a browser would be precluded from loading as swiftly.

Obviously, any such delays run counter to one of the most important goals of any browser maker, all of whom tout blinding speed as a major selling point to attract more users.

Controversy also erupted within the web development community over the new tag, as one working group espoused a preference for dealing with the image size problem via a proposed <picture> tag. Nonetheless, the Web Hypertext Application Technology Working Group (WHATWG) recently went ahead and added the <img srcset> attribute to their HTML specs.

A separate developer bloc, W3C’s Responsive Images Community Group, has created a hybrid coding solution that incorporates both a <picture> tag and the <img srcset> attribute.

Conclusion

Although the new tag has already been added to the WHATWG HTML spec sheet, there appears to be no set consensus that it represents the most effective way to deal with the issue of adapting image files to various screen sizes. Developer working groups are therefore continuing on a collective quest to find a truly all-encompassing solution.

Please let us know what you think in the comment section!

...

I recently completed a seven part series on Learning LESS, and we had a lot of commenters who requested a similar series on Sass (Syntactically Awesome Stylesheets). While there is a lot of discussion out there as to whether or not LESS or Sass is better, both have their place, both accomplish the same overall goal, and both can make your life (and your coding) much simpler and easier.

What is Sass?

Sass, which stands for Syntactically Awesome Stylesheets, is a “meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets” (from sass-lang.com).

There are several different ways to harness the true power of Sass, and I’ll do my best to cover each method. But basically, it’s commonly thought that Sass is a server side compiled language using Ruby (as opposed to LESS, which is a JavaScript library and thus compiled client side). Sass can however be compiled locally and then uploaded to your server or your website via FTP just as you would any other CSS stylesheet. Many people use CodeKit for this compiling, and we’ll cover that in a later post.

Installing Sass

Sass runs on Ruby. If you’re using Mac OS X, you already have Ruby installed (lucky you!). If you are on a Windows machine, you can install it using the Windows Installer. I’ll proceed with this tutorial as if you’re running Mac OS X.

First, fire up Terminal. If this little black box scares you, don’t worry. I was always very intimidated by working in the Terminal, but after following some tutorials, working with Ruby and Git, you get to be more comfortable.

[WARNING: Working in the Terminal gives you access to seriously mess up your computer. Be cautious about command lines you run in the Terminal.]

The first command you’ll want to type into the command line is to check and see what version of Ruby you’re running. To check, run this command

ruby -v

Once you click enter, the Terminal should tell you which version of Ruby you are running. If you see something like this, you’re ready to rock with Sass.

As you can see, as of this post, my version of Ruby is 1.8.7, which will work just fine for Sass. Now that we know we have Ruby, let’s install Sass.

You can install Sass by running this command

gem install sass

Click enter and the Sass install will begin. This process will take just a minute or two.

[Having trouble? If you got an error message saying you don't have privledges to write to the Ruby directory, you'll have to install Sass with the sudo command. Simply type sudo gem install sass and it should work for you.]

If all things go successfully, you should see this message.

And that’s it! Sass is now installed on your computer and you’re ready to start writing some Syntactically Awesome Stylesheets. Can we also pause a minute to just look at how awesome of a word ‘syntactically’ is? Just rolls off the tongue.

Writing your first Sass

The standard extension for the latest version of Sass is .scss (this is as of Sass 3). The .scss extension is completely valid CSS (just like LESS is), so you can write standard CSS while mixing in your own Sass as well. Fire up your code editor and let’s write some Sass (I use Coda 2 which has a default color profile for .scss syntax and it comes in handy).

The code shows some variables and a paragraph declaration. Don’t worry about the syntax now as we’ll cover variables, mixins, nesting, selector inheritance and much more in later posts. For now, we’re still focusing on getting Sass to work with .scss files and the Terminal.

/* Sample Sass */ $blue: #00214D; $font-size: 16px; p { color: $blue; font-size: $font-size; }

Looks pretty simple so far, right? Now let’s jump back into the Terminal and get Sass to watch the file. Make sure you’re in the same directory as the file you just saved (I saved mine to my Desktop). To check and see what folder you are in, simply type

ls

in the command line and it will list all of your files and folders.

To change directories, simply type cd

and then begin typing your location and press tab. Terminal will auto finish the folder. Run the command, then type

ls

again to confirm you’re in the correct directory.

Once you’re in the same directory as the .scss file you just created, we’ll tell Sass to watch the file and to translate it into a .css file. Once Sass is watching the file, any changes you make to the .scss file will automatically be updated in the .css stylesheet. The command for getting Sass to watch the file is

sass --watch sample-sass.scss:sample-sass.css

Sass will then tell you that it is watching for changes and automatically create a CSS file in the same location as your .scss file.

What’s Next?

Now you’re up and running with Sass, you can start writing some sassy code. In future articles, I’ll walk you through the syntax and the thought process behind planning out your code to be extremely efficient, and also showcase CodeKit (which replaces the need to work in the Terminal) when using Sass. We will also dive into Compass as well.

Have questions? Leave them in the comments below and I’ll answer them! Thanks for reading.

...

HTML5 introduces a range of new form elements and functions, including the range input type. With the range input element, you can create sliding controls for your site users. There are a number of options to choose from in terms of configuring your range inputs, such as defining the range values and steps. With a little JavaScript, you can capture and respond to user interaction with the range slider control.

In this tutorial we will create a basic HTML5 range input slider to resize an image, with a JavaScript function updating elements in the page as the user alters the range. At the moment, Internet Explorer and Firefox do not support the range input, but the WebKit (Safari and Chrome) and Opera browsers do.

Create an HTML5 Page

Let’s create an HTML5 page outline as follows:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> </body> </html>

We have spaces ready for our body HTML, CSS and JavaScript code. First enter the slider range input in the body section of your page:

<div id="slider"> 5% <input id="slide" type="range" min="5" max="200" step="5" value="100" onchange="updateSlider(this.value)" /> 200% </div><br/>

Take a moment to look at the attributes within the slider element. We tell the browser to treat it as a slider input by including range as the type. The minimum and maximum values determine what the browser will interpret the slider being taken to either end of the range. The step attribute determines the gap between possible selectable values along the range. This means that our range values will be 5, 10, 15, 20 and so on, up to 200. The value attribute sets the initial value for the range, which we set at 100, so that our image will initially display at 100% of its normal size. Finally, we call a JavaScript function to update the page when the user alters the range input slider. To make the input usable, we include informative text at either side.

Provide Elements to Update

The purpose in using the range input is of course to allow the user to control some aspect of the page. First let’s include an indicator of the selected value, below the range input:

<div id="chosen">100</div>

We will update this when the user interacts with the slider. Now let’s add our image to scale:

<div id="picHolder"> <img id="pic" src="cateye.jpg" alt="cat eye"/> </div>

You should of course alter the image source to reflect your own image file – this is the file you can see in the demo. We will use the containing element to style the image and the image ID attribute to identify it in JavaScript. This is the image we are using:

Respond to User Interaction

Now for the JavaScript. Add the following function outline in the script section of your page head:

function updateSlider(slideAmount) { }

When the user changes the slide amount, the page passes the current value selected to this function. Inside the function we will use this information to update the page. First, update the display element to output the amount chosen:

//get the element var display = document.getElementById("chosen"); //show the amount display.innerHTML=slideAmount;

Now we can scale the image, by getting a reference to it in the page and setting the width and height style properties using the value passed to the function as a parameter:

//get the element var pic = document.getElementById("pic"); //set the dimensions pic.style.width=slideAmount+"%";...

Web developers are increasingly being asked to build sites that cater to smartphone Internet users, or to recast existing sites into user-friendlier formats for mobile devices. By 2015, statistical research by eMarketer predicts that more than half of the persons who access the Web will do so through a smartphone or other small-screen device.

This paradigm shift represents a challenge to the established Web development community, which now has a mandate to configure Web content previously optimized for large personal computer and laptop screens into smaller mobile device space constraints.

Utilizing CSS and Javascript to create a more ‘mobile-friendly’ experience

Incorporating customized CSS coding is an effective way to adjust an existing site’s content to be more accessible for mobile users. To properly instruct a smartphone browser on how to display Web content, users should be directed to a mobile CSS stylesheet with the inclusion of the following code in the Head section:

<link rel="stylesheet" href="http://www.domain.com/handheld.css" type="text/css" media="handheld" />

or

<link rel="stylesheet" href="http://domain.com/mobile.css" type="text/css" media="handheld" />

The ‘handheld.css’ or ‘mobile.css’ file should contain all of the stylesheet parameters that will ensure an optimal viewing experience for a small screen device user.

Screen size adjustments Within a given mobile-tuned stylesheet, in order to maximize the content space for varying screen sizes, it is best to express widths by percentage:

#element { width: 100%; }

The above is known as a ‘fluid layout’ style in which CSS page element widths are expressed in a different way than by a set number of pixels.

Clutter reduction To reduce clutter, utilize the stylesheet to hide extraneous page elements for mobile viewers with coding such as:

#sidebar, #footer { display: none; }

Control image sizes To control the image sizes within a mobile device accessible area of a site, the following coding can be utilized:

#content img { max-width: 200px; }

Javascript solutions If a site owner chooses to build an entirely separate mobile site, or area of a site, a Javascript redirect code should be placed in the Head section:

<script type="text/javascript"> <!-- if (screen.width <= 699) { document.location = "handheld.html"; } //--> </script>

The ‘handheld.html’ expression directs a mobile browser to the correct place, and could also be shown as “http://mobile.domain.com” if a ‘sub-domain’ approach is desired.

For a script tailored specifically for iPhones, utilize:

<script language=javascript> <!-- if ((navigator.userAgent.match(/iPhone/i)) { location.replace("handheld.html"); } --> </script>

Other mobile device coding options to facilitate website accessibility

Because smartphone users frequently change the device viewing aspect from portrait to landscape, and vice versa, the <viewport> tag is an important page element.

This meta tag allows a mobile phone browser to seamlessly scale content between views. A typical coding arrangement would look something like:

<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial-scale=1.0; user-scalable=yes"/>

Other tags specific to smartphone use include a measure that determines if all telephone numbers located on a Web page will appear as hypertext links, thus allowing for the initiation of a phone call by clicking on the number.

In HTML5, this is achieved through the <format-detection> tag:

<meta name="format-detection"...

HTML5 includes a host of new input elements, such as the output tag. Using the output tag in conjunction with the “oninput” event listener, you can create simple or complex Web page calculators, giving the user instant results. The output tag allows you to build forms using semantic markup, since the element is specifically designed for displaying calculation results.

In this tutorial we will create a simple Web page calculator to demonstrate using the output element. Many of the new input elements are not well supported, but the output element is supported in all current major browsers except Internet Explorer. We will also be using the “oninput” event attribute, which is supported in all recent versions of the main browsers.

Create an HTML5 Page

Use the following outline to create your HTML5 page:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> <script type="text/javascript"> </script> </head> <body> </body> </html>

We have sections for styling and scripting in the head, and our form elements will sit within the body.

Create a Form

Let’s create our form. Start with the outline:

<form id="calc" oninput="updateOutput()"> <!--input and output elements--> </form>

Our opening form tag has an ID for identification in JavaScript and an “oninput” event listener attribute. The browser will call the specified function when the user alters the form input values.

Add two input elements for numbers inside your form element:

<input name="x" type="number" value="0" /> <input name="y" type="number" value="0" />

Leave a space between these as we are going to add a further element next. Notice that the two input elements have number types and names for identification in the script.

Let’s allow users to choose which operator they wish to use in their calculation. Add a select element between the two number input elements:

<select name="op" onchange="updateOutput()"> <option value="0">+</option> <option value="1">-</option> <option value="2">×</option> <option value="3">÷</option> </select>

You can use the HTML entity references “&times;” and “&divide;” for your multiplication and division signs.

The select element offers addition, subtraction, multiplication and division. To make sure the output element is updated when the user chooses an option, as well as when they alter the number input values, we add the “onchange” event listener attribute, calling the same function we call from the form “oninput” attribute. We are using incrementing integers as the values for the select options, so that we can tailor what happens each time the calculation is performed, making sure the output reflects the operator chosen.

Add an equals sign in a dedicated element so that we can style it effectively, after the second number input:

<div class="equals"> = </div>

Finally, let’s add our output element, after the equals sign element and still inside the form:

<output name="z" for="x y">0</output>

Notice that the element has a name for identification in the script and a default value to display. The “for” attribute indicates which input elements the output relates to, using their name attributes.

Perform the Calculation

Now we can implement the JavaScript function for calculating results. In the script section in your page head, add the following function outline:

function updateOutput() { //calculate...

We continue on our journey of Learning LESS today as we take a look at Nested Rules in LESS, which will help you write extremely clean code. If you haven’t read our first three posts on the topic, check out Learning LESS: An Introduction, Learning LESS: Variables and Learning LESS: Mixins.

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

Now we jump into Nested Rules, a topic that can be somewhat difficult to conceptualize, but we’ll break it down with great code examples and some diagrams.

What Do You Mean ‘Nested’?

I’m sure you’ve heard of ‘nesting’ in code, probably referring to nested tables in old table design websites (or current table design HTML emails). With LESS, we’re basically doing the same concept of nesting rules within other rules.

Let’s set up an example. You’re coding a website and you’ve got a paragraph rule. In addition to your standard paragraph tag, you also have classes for an intro paragraph and a highlighted paragraph. For this scenario, let’s say that you’re going to set the standard paragraph with a basic sans-serif font, general font size, line height, etc. Here is what our CSS looks like (note, this isn’t going into our LESS file – this is just for example):

p { color: #232323; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; }

Pretty standard, so far. For your intro paragraph class, you set the font size to be a little bit bigger and have the text be small caps. And for the highlighted paragraph, we’ll make the text a bold blue. Don’t ask me why you would want to do this in terms of modern design – I’m just trying to come up with creative examples!

So in CSS, you would write those classes like this:

p { color: #232323; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; } p .intro { font-variant: small-caps; font-size: 16px; line-height: 24px; } p .highlight { color: #00214D; font-weight: bold; }

The code isn’t super lengthy, but mostly because this is a basic example. But the LESS for this is even – well – less.

Writing A LESS Nested Rule

We’re going to replicate the code we wrote above using LESS and nested rules. A LESS nested rule starts like a regular rule. For this, we’ll also use variables, just to drill in the concept.

To start, we look at our basic paragraph tag:

// Variables // --------- @textColor: #232323; @textHighlight: #00214D; @fontFamily: Helvetica, Arial, sans-serif; @fontSize: 14px; @lineHeight: 21px; @introSize: 16px; @introLineHeight: 24px; @introFontVariant: small-caps; // LESS for Paragraph // ------------------ p { color: @textColor; font-family: @fontFamily; font-size: @fontSize; line-height: @lineHeight; }

Now we’re going to nest in the .intro class. To do this, we simply create the class as we normally would, but we include the class inside the curly braces of the paragraph rule.

// Variables // --------- @textColor: #232323; @textHighlight: #00214D; @fontFamily: Helvetica, Arial,...