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.

...

Many websites nowadays make use of sliders to highlight different content or pages but these slide shows usually appear at the top of the home page. Anyone who deals with content knows the power that images have to keep a reader engaged. In fact, most content creators try to scatter images throughout their text for this very purpose.

But what happens if you marry the two concepts together? Taking the slide show concept and inserting it into the content of a web page…

Begin by opening up the HTML of your web page and insert the following JavaScript code between the <head> tags:

<SCRIPT LANGUAGE="JavaScript"> <!-- Begin // Set slideShowSpeed (milliseconds) var slideShowSpeed = 5000; // Duration of crossfade (seconds) var crossFadeDuration = 3; // Specify the image files var Pic = new Array(); // to add more images, just continue // the pattern, adding to the array below Pic[0] = '1.jpg' Pic[1] = '2.jpg' Pic[2] = '3.jpg' Pic[3] = '4.jpg' Pic[4] = '5.jpg' // do not edit anything below this line var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply();...

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!

...

If you are not into all the hype surrounding WordPress, you probably have likely heard about its ease of use especially for end-users. The platform is also easy to manage and delivers an almost limitless number of widgets to help add functionality.

Many users are usually not interested in the development process and only want an end product that is painless and flexible enough to allow additional features as the website grows. WordPress gives you that edge. However, before you can port your existing website or template into WordPress, you need to have a basic understanding of both HTML and CSS. WordPress uses PHP function calls to retrieve or call data elements. To make editing easier, you also need some fundamental knowledge of how PHP works.

Create the Basic Files and Folders

First, you need to create a new folder and give it the name of your theme. Inside this folder, you will need to create two files, “Index.php” and “Style.css”.

From your original CSS file, copy all its contents into the new “Style.css”. To help WordPress identify your new theme, add the code below at the very top inside your “Style.css” file:

/* Theme Name: Replace with your Theme’s name. Theme URI: The URI of your Theme goes here Description: Describe your theme under this section. Version: 1.0 Author: DavGit Author URI: www.e-labz.com */

Slicing the HTML

Since WordPress uses PHP function calls to call files from within your template folder, we will need to slice the layout of the website into 4 different sections.  These sections include the header, content, sidebar and footer.  These 4 different sections are actually 4 separate files that will be called using PHP.

Create 4 new files, “Index.php”, “Header.php”, “Sidebar.php” and “Footer.php” within your theme directory.  For the header.php file, copy and paste the PHP code below:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title> <?php wp_title(''); ?> <?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?> </title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->...

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+"%";...

In the rapidly evolving arena of browser standards, among the newest additions is a tag that significantly facilitates the transfer and sharing of data between online applications and services.

The Google-originated ‘Web Intents’ API gives a user the ability to select an application to perform a specific action on a designated piece of data, such as an image, audio or video file, or text file.

Here’s how the feature works:

Say, for instance, a person wants to edit or share a photo that has been uploaded to a hosting service. The host may not possess an internal editing function, or be associated with an established third-party application.

However, by clicking on an Edit button, the user is able to choose a desired online editor to perform the job.

In its most basic form, the tag for an image edit looks like this:

<intent action="http://webintents.org/edit" type="image/*" href="edit.html" />

An example of the accompanying client-side script is:

document.getElementById('edit-photo').onclick = function() { var intent = new Intent("http://webintents.org/edit", "text/uri-list;type=image/jpeg", getImageDataURI(...)); navigator.startActivity(intent, imageEdited); }; function imageEdited(data) { document.getElementById('image').src = data; }

After the photo has been edited, perhaps the user may want to share it via a desired social networking site, thusly:

document.getElementById('share-photo').onclick = function() { var intent = new Intent("http://webintents.org/share", "text/uri-list;type=image/jpeg", getPublicURIForImage(...)); navigator.startActivity(intent); };

In short, the developer of an image gallery can incorporate the options for users to both edit and share their pictures without having to separately design the features. Providing the user with the opportunity to choose a preferred service is the cherry on top of the ice cream.

The user-agent informs as to whether a given service is able to process Web Intents, and if so, the type of data that is permissible to be transferred.

On the page of the hypothetical image editing service, the coding would look like:

<html> <head> <title>Image Editor</title> </head> <body> <intent action="http://webintents.org/edit" type="text/uri-list;type=image/*,image/*"></intent>...

One thing that makes WordPress so dynamic is the ability for readers to easily post comments. This interaction between you and the readers is therefore an important element in your website and should be given the same attention as other sections of your website. So what can you do to improve the comments section on your WordPress website?

1. Removing HTML Links in User Comments

People, and especially bloggers, are always looking to promote themselves on other websites and no doubt will try to do that on yours as well. It can be a demanding and annoying task to have to go through each comment and remove links from them. By default, WordPress transforms URLs into clickable links, but you can add some piece of code to reverse this.

Navigate to the “function.php” file and add the code below:

function plc_comment_post( $incoming_comment ) { $incoming_comment['comment_content'] = htmlspecialchars($incoming_comment['comment_content']); $incoming_comment['comment_content'] = str_replace( "'", ''', $incoming_comment['comment_content'] ); return( $incoming_comment ); } function plc_comment_display( $comment_to_display ) { $comment_to_display = str_replace( ''', "'", $comment_to_display ); return $comment_to_display; } add_filter('preprocess_comment', 'plc_comment_post', '', 1); add_filter('comment_text', 'plc_comment_display', '', 1); add_filter('comment_text_rss', 'plc_comment_display', '', 1); add_filter('comment_excerpt', 'plc_comment_display', '', 1);

The above code filters out links by replacing HTML characters with HTML entities.

2. Use Twitter Avatars in Comments Section

Twitter has revolutionized how website owners communicate with visitors. In addition, visitors find it much easier to add their comments when Twitter functionality has been added. The first thing you will need to do is download the plug-in from this link.

After installing the plug-in and activating it, open the “comments.php” file and locate the comments loops. Paste the entire code from the file inside the section below:

<?php twittar('45', 'default.png', '#e9e9e9', 'twitavatars', 1, 'G'); ?>

You can also adjust the values inside “twittar();” such as the avatar size, the URL to use when an avatar cannot be retrieved as well as the border color.

You can also leverage the Disqus plugin to add more functionality and features to the comments system.

3. Style Author Comments

If your blog posts attract a lot of user comments, it can be a little difficult for readers to find author comments and responses if you do not have the threaded comments feature. One of the best ways to highlight author comments is by styling them differently. To do this, locate the “comments.php” file and locate the loop below:

<?php...