Home » Guest Post, Miscellaneous19 May 2014

Ten Awesome Web Development Hacks And Tools You Probably Dont Know About

Not surprisingly, there’s no shortage of tricks and shortcuts in web development. Today, we’ll be going over a few lesser-known ones.

Web development can be a fairly rough job, even if you know what you’re doing. It’s not even that it’s horrendously difficult or intimidating; it’s simply incredibly time-consuming. For that reason, it’s no surprise that developers have over the years come up with a laundry list of different tools, hacks, and kludges designed to make their lives easier.

Today, we’re going to look at a few lesser-known programming hacks and tools guaranteed to help you be a better developer.

Store All Your Dirty Little Secrets With shame.css

Our first entry isn’t actually a hack – it’s a sort of ‘roadmap’ of the hacks used in a particular project. It’s not always possible to finish a product with clean, hack-less code. Every developer eventually has to use less-than-ideal code, whether to meet a deadline, fix a live bug, or get something working. The trouble, of course, is that developers rarely go back to take a second look at their code when it’s done.

The idea is that by putting all their shortcuts and dirty code into shame.css, a developer will be creating a sort of ‘to-do’ list; by documenting the hacks they’ve used, developers will find them easier to isolate and fix later.

Use The CSS Compressor Tool To Reduce Bandwidth And Load Time

Next up, we’ve got CSS Drive’s CSS Compressor Tool. By compressing a page’s code, it reduces load times and bandwidth use. Do note that code compressed by this tool will be significantly more difficult to debug. As such, before you use it, be sure to make a backup copy of your code.

Make HTML5 Force Your Site To Respond To Device Orientation Changes

Here’s a simple HTML5 technique from HTML5Hacks that causes a website to react to device orientation changes. Rather than using max-width queries, this hack involves duplicating and tweaking a website’s style sheets, at which point media queries are used to determine whether a device is being held in portrait or landscape view. It’s fairly simple, but no less useful for it.

Keep The Aspect Ratio Of Your Containers Consistent

If you want to create a DIV container that automatically resizes itself, simply set padding-bottom as a percentage. Since padding-bottom is defined relative to the width of your container rather than the height, doing this will force your container to maintain a constant aspect ratio regardless of how your page is resized (or what device it appears on). You can check here for a more in-depth demo (via Stack Overflow).

Set Garish Outlines Or Awful Backgrounds To Double Check Your Layout

Chris Murray of Web Standardistas came up with a rather useful tip for layout design:

If a website’s layout involves a liberal use of transparency, it can often be difficult to track down problems with orientation or positioning. While working on layout elements, why not tweak the background color so that different nodes display in different colors? This makes it easy to see the size, margin, and padding of each element on a page, and hence easy to identify any inconsistencies.

Use Suave.js To Fix HTML5’s Video Element

As anyone who has spent time working with HTML5 will attest, the way the language deals with video is a bit idiosyncratic, requiring several lines of code simply to enable cross-browser play. It’s redundant, inelegant, and unintuitive.

Thankfully, there’s a very simple tool designed to make HTML5’s <video> take easier to work with, requiring only one line of code: suave.js.

Run HTML Without Creating An HTML File

In order to run HTML in-browser without need to create an HTML file, simply enter data:text/html, <h1>CODE</h1> in the address bar. Although you can’t necessarily run anything too complex, this could be fairly useful for troubleshooting individual segments of code. Note that this trick doesn’t work in Internet Explorer, which simply displays an error page.

Easily Check Your Character Count

You want to make sure your site fits within an acceptable character count per line (which Paravel founder Trent Walton says is between 45-75 characters). In order to make sure you do, first create a line of dummy text on your page, placing an asterisk at character 45 and one at character 75. From there, it’s a simple matter of testing to ensure that it resizes within those parameters.

Apply Global Changes To Your CSS

Although the wildcard function with CSS is fairly well-known, it’s nevertheless a great trick to have at the beginning of the deweb hosting blogsign process. Using it allows code changes to be globally applied to an entire page. Just be sure to use the trick sparingly, and clean up the code afterwards.

Parse URLS Within Your Browser

Last but not least, you can quickly and easily parse URLs in your browser with the following code (credit goes to David Bloom):

var a = document.createElement('a');
a.href = url;
// any property of window.location works here:
document.write('The hostname of ' + url + ' is ' + a.hostname);

About the author

Matthew Davis is a technical writer and linux geek for Future Hosting. Follow them on Twitter @fhsales, Like them on Facebook, and check out more of Matthew’s writing on Future Hosting’s web hosting blog.


Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed