Continuing the jQuery pain fun of some tips I’ve learned over the years… Read Part I Here
Don’t Abuse $(this)
Without knowing about the various DOM properties and functions, it can be easy to abuse the jQuery object needlessly. For instance:
$('#someAnchor').click(function() {
alert( $(this).attr('id') );
});
continue reading “Helpful jQuery Tricks, Notes, and Best Practices Part II”
Chad, 22 Tools for Testing Your Websites Usability
One thing that we here at Code Greene have been trying to do is pushing our limits by getting faster and better at development. But with this we have realized that we need to help the pursued the client to get the best site they can. These clients come to us with an idea and they know their industry well, but it is our job and responsibility to take their ideas and build it in a way that is needed to give the end user what they want and need quickly.
Luke, Analytiks iPhone App
A little while ago I stumbled upon this little app for my iPhone. For those of us that don’t sign in to our Google Analytics often but know we should this app will be very valuable. Analytiks shows me just the important information I’d like to know about my websites on my phone. I can check it quick and get back to whatever else is going on that day. The interface is quite nice. I would ditch the rusted sign look myself but other than that it is fantastic. It is 99 cents in the app store.
Benjam, impress.js
It’s not much in the way of content, but the way that content is displayed. It’s simple… yet eye catching and very intriguing. Makes me very excited about where the web is heading.
If there is one bad thing about jQuery, it’s that the entry level is so amazingly low, that it tends to attract those who haven’t an ounce of JavaScript knowledge. Now, on one hand, this is fantastic. However, on the flip side, it also results in a smattering of, quite frankly, disgustingly bad code (no one is immune to this). But that’s okay; frighteningly poor code that would even make your grandmother gasp is a rite of passage. The key is to climb over the hill, and that’s what we’ll discuss today. continue reading “Helpful jQuery Tricks, Notes, and Best Practices Part I”
Mark, Art and The Web Texture
I thought this was a nice article and analysis of Textures by Nick Petite. Though to many people texture may seem like a subtle thing we feel it is an important part of a website for creating the right mood. The thing that Nick points out is how much more dynamic a website can seem once a more interesting texture is added. In web design, I personally really like the layered texture strategies because it helps to neutralize an otherwise potentially overbearing texture, Nick covers the gambit of options and provides some examples, check it out.
Brian, JavaScript Powers Linux In A Browser
I get asked all the time ‘Why Linux?’ and ‘How lightweight it is?’. My usual reply references how Ive seen a Linux web server run off a 2GB thumb drive, but this article trumps even that. With all the overhead the operating systems of today require, people usually assume a servers absolute minimum is even higher. Running Linux in a client-side script like this just blows my mind!
We all love CSS3 and the things we can do with it. It is saddening when a client opens up the site you just coded and doesn’t see all the CSS3 goodness because they are using some version of IE. Frequently, CSS3 PIE has saved me from the client saying: “Why don’t the buttons have the rounded corners like your design?”
CSS3 PIE makes some CSS3 features work in IE6 – 9. It supports border-radius, box-shadow, and linear-gradient. It works great and is super easy to set up. Unless you use it in WordPress. After some Google searching, a fair amount of testing, and a lot of grumbling I got it working in a WordPress site. It is really simple. I hope that this will save others from some headache.
1. Put the PIE.htc file in the WP Root directory and then reference it in your css as – behavior: url(“PIE.htc”);
2. All the elements that use CSS3 features will need either position: relative or position: block on them
Mobile applications are all the rage as smart phones are moving from smart to genius. Along with this movement is the movement to location aware applications. Your phone has GPS, your laptop has wifi, and your IP is known (generally) to be tied to a specific location. Given these new technologies being more commonplace the W3C has seen it fit to add an API to web design for Geo Location.
Although not technically a piece of the HTML5 spec, it is commonly used in conjunction with HTML5 and easy to use.
The geolocation API exposes three methods on the navigator object in javascript, two for getting location information about your user getCurrentPosition and watchPosition, and the other is a paired method for watchPosition, it is clearWatch.
The first, getCurrentPosition, returns a one time shot of where the user is. This is good for pinning a map or giving static directions. The second, watchPosition, continues polling at regular intervals to keep tabs on where the user is. This is perfect for giving dynamic directions, or tracking a movement. The two calls are mirrors of one another in that they both accept three arguments (success handler, error handler, geolocation options). The two calls are also both asynchronous, with a caveat that if this is a user’s first visit to your site they may be prompted to allow their position to be shared, this could cause the browser to stop loading.
The odd ball function here is clearWatch, which simply clears any watches you have assigned, in other words it stops tracking your user.
Now that we know the basics let’s dig in!
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function (position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
alert('Lat: '+ lat +' \nLon: '+ lon);
}
}The example above is about as simple as it gets, a simple one shot to get the users coordinates and then output them to the browser.
That is all there is to Geolocation in the browser, pair it up with Google Maps API and you have an award winning geolocation application ready to please the world.
This April Fools edition of Sharpening the Blades only has two serious articles and we’ll let you decide on the last one. Luke talks about the Future of Web Typography, Benjam talks about jQuery Methods and Mac, well, Mac is the playful one at the office so he chimes in with his April Fools joke for all you PHP gurus.
Luke, Future of Web Typography
For years typography on the web has been very limited when compared to what can be in the print world. Over the last few years though we have been given more and more tools to help us accomplish good typography on the web. As time goes on these tools will get better and will become more widely supported. There was an article on Smashing Magazine this week that talked about a lot of these tools that are available to web designers. I really enjoyed reading up, refreshing my memory of code I haven’t used in a while, and also learning some new ways of styling type. Read it over, the text on your website will be very happy you did.
Benjam, 20 Helpful jQuery Methods You Should Be Using
While developing a website, I use a lot of tools, both in the creation of the website files (my text editor of choice, file manager, etc.), and within the website itself (CakePHP, jQuery, CSS, etc.), and I’m always interested in finding features of those tools that I might not be very familiar with. While I have a deep familiarity with the features I use regularly, and a passing familiarity with most of the features of these tools, it’s always good to get a refresher on what I could be using more. Here is a post highlighting 20 jQuery methods/features (actually 33 methods in 20 groups) that should be in everybody’s familiarity tool box.
Mac, April Fools – PHP Style
This discusses a topic that we often only think about once or twice a year, but it is still worthy of our attention and deserves some practice to improve our skills. Also, while you are there, subscribe to the PHP Developers feed. The main guy, Chris Cornutt, does an excellent job of filtering the best PHP articles.
This edition of Sharpening the Blades features an article from Mike about using jQuery, CSS and image sprites to create stylish forms, an article from Benjam about Passwords on the web and Mark chimes in with an article about the possibility of HTML5 in Internet Explorer 9.
Mike, Get your form on with Uniform
We’ve all been there. You finish an amazing design using some sweet custom form elements that perfectly match the theme of your design. Then after a few frustrating attempts, you realize that some form elements just can’t be styled. Or if they can, not consistently. So you throw on a border, maybe a background image, and hope for the best as dreams of your custom UI vanish into nothingness. But fear not! Using the clever jQuery script Uniform and some CSS sprites, your form designs can once more be glorious! Works beautifully in all major browsers (degrades gracefully in IE6).
Benjam, The Problem with Passwords
Being in the Web Development industry for a while now, and having had a few third-party scripts that were on my site hacked, I have become more and more interested in web security. Passwords are on the front lines to that. Being a user of Web technologies, I’m also interested in usability and choice, and when it comes to showing or hiding passwords (what? you can do that?) I’m in the boat of give the user the choice. This article nicely explains a few examples that offer people the choice to show or hide their passwords, both of which are very useful.
Mark, Microsoft to Double Down on HTML5 in Internet Explorer 9
Doubling down seems like the wrong approach to me. If I were the CEO at Microsoft I would instead of thinking of trying to put their foot down harder, they should instead learn to bend in the winds of the market and work on compliance with the other browsers. Though I hate to say it even forced upgrades like Firefox does would be good, to keep people current and reduce the amount of cross browsers compatibility problems Microsoft gives developers. I don’t think Microsoft realizes that by making developers lives bad by trying to be different they are actually building up a mass market of developers who hate them because it is so difficult to make cross compatibility easy and affordable.
I’ve been noticing that often times, when getting or giving feedback on code, or browsing my favorite programming forum, or just reading posts about programming, that people often get very emotional about their code. I was wondering why this is, and because I am not a psychologist, I’ll just give you my thoughts.
Coding to me is like creating art, and there’s a great quote that backs me up on this:
Programming is an art form that fights back. —Unknown
Because code is like art, I get very attached to my code, as well as my style of coding. My code is like my baby, my something from nothing that wouldn’t be there if it weren’t for me. It’s just a bunch of characters on the screen that, from somewhere in the blue smoke, creates a function, or a game, or a website. I have received criticism on my code (as everyone has), as well as given criticism on other’s code (as everyone has), and those times when I’ve received criticism on my code, depending on how it was delivered, or what was said, it was almost like a personal attack on me. And I’ve noticed a few other coders react the same way to criticisms on their code. It’s like the person who called your code ugly or inelegant was saying that your child was ugly (and those of you who have kids know… that’s a huge no-no, punishable by any means available).
It may be because I think that my coding style is the best, it’s what I’m used to, and it’s the format I use because it’s the easiest for me to get at the information I need as fast as possible. I know this because I’ve tried other styles (sometimes flipping back and forth in the same day), and looking at someone else’s code that uses a different style from me, is often times hard to peruse easily. It’s what I like, and sometimes I have to hold myself back from reformatting code I come across into my own style.
So maybe we should stop thinking of code and coding styles as being “right” or “wrong”, and think of them more like the tool that they are, a means to an end. And the way you react to someone else’s means should be a little more like a suggestion for a different method of painting. Not a matter of fact, but just another tool for the tool box.
To continue the art analogy, it’s like everybody is given all the art supplies in the world, and told to make/paint/draw/create a box. Everyone will come up with a different way of doing it, some will be huge and bright red; others will be small and drawn in pencil; others still might be made of clay or brick. No matter what, it’s the way you chose to do it, and it’s no better or worse than the person’s next to you. You might think so because yours was faster, fancier, more elegant, or more “boxy”; but they might think the opposite. In the end, you still have a box, and so do they.
This edition of Sharpening the Blades features articles about creating admin sections with CakePHP, how $(document).ready( ) can slow down your site, and the wonderful things CakePHP can do “automagically.” Hopefully these articles will help you sharpen your coding blades.
Chad, Creating an Admin Section with CakePHP
I have come across James blog just recently (about 2 months). The guys blog is great. He does so much with CakePHP that it is great to see what he is doing and what he can do. But the reason I suggest this specific post is because it seems to be the first stumbling block that every developer comes across while using CakePHP. This article specifically will explain how to get an Admin section set up and working. I consider this one of the must needed to know things to develop correctly in CakePHP.
Benjam, Don’t let Document Ready slow you down
Everybody wants to have a faster loading website, and I am certainly guilty of putting every DOM related jQuery snippet into the $(document).ready( ) function. This post showed me that this wasn’t absolutely necessary and gives good examples of when and how to break out of the document ready mentality.
Mac, The Dark Side of CakePHP’s Automagic
I’m not sure I like the title of this article so much as I like the article itself, but it does point out some useful information about the “automagic” things that CakePHP does for you. Some of the things they discuss are definitely features that were designed very wisely, even though the article seems to disagree with me on that. There are definitely some automagic things in Cake that they mention that drive me crazy too though, and I don’t really see the necessity for the seemingly poor decision made by Cake’s developers. My biggest peeve they mention are the behavior it has (or had, this may have been fixed/changed now) for many-to-many relationships (a.k.a. HABTM). It is really a pain in the neck when your relationship table has other data in it, like the date/time when the relationship was added, or by whom, or a quantity, etc.
The Code Dojo is the veritable repository of random musings from the development team at Code Greene.
We write about web development trends, tips, best practices, and our projects — all in the spirit of "kaizen", the Japanese philosophy of continuous improvement.
Code Greene Facebook Fan Page
Need a website?
Get a free consultation to see what we
can do for your business.
The Code Dojo is authored by Code Greene, a group of web developers in Salt Lake City, Utah. We specialize in developing high-quality custom websites and applications using PHP, XHTML, CSS, jQuery, and Ninjutsu.
For more information, visit our website:
