Tools like these make it more and more exciting to be a front end dev every day.
Paul Irish covers some of the impressive new Chrome Developer Tools. It’s no surprise he was named .net’s Developer of the Year
Luke Beard wrote an insightful post on the front end development of Zerply. One of the little things that stuck out to me was the method of using native iPad and iPhone controls disguised as normal HTML elements. He uses a native <select> element at zero opacity to trigger the native controls on touch. It’s incredibly straightforward when you think about it, but then again the best ideas always are!
Developer Snippet - Pretty AJAX Errors
Tired of drudging through the console when looking for the cause of AJAX errors? Sick of trying to scan the stringified .NET or webservice error pages for the underlying error? Do I have the handy hint for you!
The following snippet creates a global listener for AJAX errors, shows a jGrowl reporting the error thrown, and then allows you to view the resulting error page - all without breaking the user’s workflow.
It was designed to work with .NET applications and webservice error messages which both return error pages, but there’s no reason why you can’t use this with RESTful services (or anything) returning error codes and error messages.
Requires: jQuery, jGrowl JS and jGrowl CSS
Developer Snippet - Capturing Console.Log
Nobody is perfect. I’ve left a console.log() in countless live deployments, and I will probably do it again. While it does speak volumes about my attention to detail after a long day of coding, there is a way to prevent it. It’s easy enough to detect when the console object doesn’t exist - so you can just do the following.
if (!window.console) {
window.console = {};
window.console.log = function() {
return false;
};
}
The only thing is that, well, I’m not particularly fond of this snippet. While it’s a good development tool for quick and easy testing in Internet Explorer and other browsers that do not support console logging, I don’t recommend you push this live. Not only does it promote lazy coding habits and deployment protocols, but it also encourages developers to litter the end user’s console with statements. On the other hand it does lend itself to better bug tracking and support on a live site. This is best determined on a case-by-case situation.
I created a GitHub gist for better readability and comment tracking. I wish Tumblr would allow iframe embedding or at least code formatting.
Repository Updates (iOS Theme + Front End Dev)
Front End Development Guidelines (Demo | GitHub)
The ability to “deep link” to categories and articles went in a while ago, but until today there wasn’t a UI to make it easy. I also added a section on centering content, both horizontally and vertically. It reflects the blog post I recently posted on the matter.
iOS jQuery Mobile Theme (Demo | GitHub)
I’ve replaced the CSS3 back button with an image sprite. The original snippet required a custom button syntax and just flat out looked terrible. I dabbled with -webkit-mask-images, but these are buggy and inconsistant. There was no reliable way to mask the button into the correct shape, and then apply the CSS3 gradients, shadows and border effects. It was a compromise, and currently only supports 1x (non-retina) displays, but it works. Here is the difference blown up.
I also styled the persistant footer bar and added in some sample Glyphish icons. Please consider the licensing if you want to implement the Glyphish icons on a commercial site.
Front End Development Guidelines - Update
Well that was a wild ride indeed! Since release, the front-end development guidelines I posted have gone bananas. Tens of thousands of page views, plenty of GitHub forks and followers, and even a kind word or two. Many thanks to Paul Irish and other figureheads for tweeting about the resource I put together. It really helped spread the word about what I was trying to do, and in turn pulled in some great comments and suggestions logged through the GitHub issues interface.
As we stand, there are currently 8 open issues and I’ve managed to close 20 others.
Some of the most recent changes I’ve made include:
- Rewriting the section on commenting your JavaScript. My team leader at my previous employer put this one together when he was proofing my work, and slipped it in. A lot of people have flagged it as a massive WTF and it has seen been replaced.
- I’ve merged in a range of spelling and grammatical changes. What can I say? Me dun speak english good-like.
- Added the new “micro clearfix” to the section on clearing floats.
- Added a section on commenting CSS blocks (handy!).
- Further discussed whether remapping “this” to “self” is a good idea.
- Added section IDs for deep linking (but no way to easily do so, as yet).
- Removed the Gotham web font, which I embarrassingly left in, ignoring my own advice.
Thanks for reading and contributing, be sure to send through any further suggestions using the issues interface or via my email address listed on the right.
An effect that makes the Crikkket web app unique is it’s crisp 1px highlights. I’ve always heard these described as specular highlights, but I don’t believe that’s the correct term. Anyhoo, I was just playing with CSS3 and I thought I’d have a crack at animating the same effect on a button. So here you go!
Demo and Source are on JSFiddle.
You will notice that the highlight width is locked off, because I think if it scaled with long buttons the effect wouldn’t be as believable. I also know that I could have done this with pseudo elements like ::before, but sometimes it’s good to see exactly what’s going on in the DOM.
Disclmaier: Webkit only. No images used.
My role with my last employer involved creating websites, applications and widgets with front end technologies like HTML, CSS and JavaScript. Other parts of my job included code reviewing commits and running training exercises to spread the knowledge around. When I handed in my three weeks notice, they were quick to ask me to write up guidelines on the best way to write maintainable, clean and accessible code. What follows is a GitHub hosted document, allowing for revisions, forking and issue logging - a concept I “borrowed” from the great resource JavaScript Garden.
Considering my knowledge is all gleamed from many years of reading Hacker News and following Twitter links, it definitely has holes. I am completely self taught in that regard. So although I can’t vouch for the accuracy of all the information, hopefully you can log any corrections or raise any questions via the issues interface.
