Sharpening the Blades: Styling Forms, Problem with Passwords and HTML5 in IE9

Master Sensei,on the topic of  Browsers, Business, Marketing, Tools, Usability, Web Development, jQuery
03.05.2010   |   0comment

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 Uniformuniform
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 Passwordspasswords
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 9internetexplorer
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.

Tags: , , , ,
Posted in Browsers, Business, Marketing, Tools, Usability, Web Development, jQuery | No Comments »


Why is coding so personal?

Benjam,on the topic of  JavaScript, PHP, Tools, Usability
02.25.2010   |   5comment

Why is coding so personal?
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.

Tags: ,
Posted in JavaScript, PHP, Tools, Usability | 5 Comments »


Sharpening the Blades: Tricking out WordPress, Designers who can’t code and Content Management

Master Sensei,on the topic of  Business, Marketing, News, Tools, Usability, Web Development, WordPress
02.19.2010   |   0comment

This weeks edition features an article about customizing WordPress for beginners, designers who can’t code their own designs and the best way to handle content management systems for sites that matter.

Chad, The Beginner’s Guide to Tricking Out Your WordPress Blogtrickingoutwordpress
I liked this post/entry about WP because it was built and geared for the beginner. Once you installed it now what. I find these type of articles interesting because sometimes they are just so simple that I don’t even think of them. And it helps me to explain or think of other things that I feel our clients may want or need.

Mike, Web Designer’s Who Can’t Codedesignerswhocantcode
Twitter exploded in a debate this week when Elliot Jay Stocks boldly tweeted:

“Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.”

The world is full of talented designers trained in a wide array of media, but just like other mediums, the web offers its own constraints and limitations. Knowing how to code definitely gives you an edge, even if you don’t code the site yourself. Image resolution, measurements, typography, and browser discrepancies all play a role in what is possible, and help determine the collective best practices of the web. So does a good architect need to know how to dry wall? Maybe not. What about a fundamental understanding of construction and engineering? Absolutely. How much does a good web designer need to know about their craft in order to build a successful website? What do you think?

Mac, Content Management for Sites that Mattercontentmanagementforsitesthatmatter
I liked this article because it gets right at the core of the cost/benefit trade-off that many people don’t think enough about when building their web site. Either there’s a significant value to the work you’re doing on your site, which justifies spending some money on it and getting it done right, or there isn’t a significant value to your site, so why bother? I don’t 100% agree with them about the WYSIWIG comments, but I’ve never tried to tell a client to assume it would look identical in TinyMCE and on the public site. We’ve generally had to train them to be very careful to keep it simple. Use bold if you want, make some lists, paragraphs, links, and stuff like that, but don’t try and do anything funky or you’ll end up disappointed. Another annoying thing about TinyMCE is that even when you tweak the HTML manually in their HTML view, it often wants to “automatically fix” some of the things you did. I was trying to leave a <br /> or two between a couple of separate lists if I remember right, and it kept either taking it completely out, or turning into a paragraph, constantly leaving too much or too little whitespace, even though the HTML I manually entered would display exactly how I intended.

Tags: , , ,
Posted in Business, Marketing, News, Tools, Usability, Web Development, WordPress | No Comments »


Sharpening the Blades: Custom WordPress Dashboard, Wireframing and Communication

Master Sensei,on the topic of  Project Management, Tools, Web Development, WordPress
02.05.2010   |   0comment

Tim, 10 WordPress Dashboard Hackscatswhocode
This is a nice article that shows you how to get a customized WordPress dashboard. The article calls them hacks, but I would call them customizations. One that I have tried and loved is adding your logo on the dashboard page next your blog title in the top left hand corner of the dashboard. It’s a nice little touch that goes a long way.

Mike, How Wireframing Makes Your Website Designs Betterbriancray
The value of wireframing comes down to a simple idea: Wireframing forces you to think about your user interface design decisions in terms of user needs first, instead of in terms of what looks good.” While wireframing requires a little extra effort in the initial planning stages, it pays huge returns in the long run. We redesign less frequently, hit deadlines sooner, and best of all, greatly mitigate scope creep. So take your foot off the pedal, assess your client’s business objectives and user needs, and translate concepts into a tangible wireframe. You’ll be glad you did.

Luke, For Better Productivity, Communicate Lesscommunicateless
I agree with Joel Spolsky in one of Lifehackers latest posts when he says that adding more people to a project will only slow it down. I think this is especially true in web development. Once deep into a big project a web developer knows where things are and how they are related. If you throw five of them at the same project at some point they would end up stepping on each others toes. There is a chance that if things are planned out right each developer could tackle a specific task and then they could put all their pieces together to make the final piece. To do that though a lot of planning and meeting together would have to happen. This will probably lead to more disagreements and toe stepping. For those reasons I think getting the few people needed on the project and keep them there is the best way to accomplish a web dev project.

Tags: , ,
Posted in Project Management, Tools, Web Development, WordPress | No Comments »


GeekTool Scripts

Luke,on the topic of  Apple, Fun, Tools
10.13.2009   |   12comment

The code on this post has been updated. View here to get the latest.

In my previous post I talked about what I have been doing to my desktop the last little while. I had quite a few email or IM me asking about how the GeekTool scripts I used. Just take these scripts and copy the lines you want into the command area of a Geeklet. Most of these were written by Mac Newbold. Enjoy!

CPU Usage

top -n1 -l1 | grep "Load Avg" | sed 's/.*usage: //; s/ user.*//;'
top -n1 -l1 | grep "Load Avg" | sed 's/.*user, //; s/ sys.*//;'
top -n1 -l1 | grep "Load Avg" | sed 's/.*sys, //; s/ idle.*//;'

Memory

top -n 1 -l 1 | grep PhysMem | sed 's/.* inactive, //; s/ used.*//;'
top -n 1 -l 1 | grep PhysMem | sed 's/.* used, //; s/ free.*//;'

Month

date +%B

Date

date +%d

Day

date +%A

Time

date +%I:%M

AM / PM

date +%p

Weather

curl --silent "http://xml.weather.yahoo.com/forecastrss?p=USUT0078&u=f" | grep -E '(Current Conditions:|F<BR)' | sed -e 's/Current Conditions://' -e 's/<br \/>//' -e 's/<b>//' -e 's/<\/b>//' -e 's/<BR \/>//' -e 's/<description>//' -e 's/<\/description>//'

Look for the ‘UT0078′ here and replace it with the city code you want to display. Get the city code by going to Yahoo Weather and searching for your city. Once found look in the url and you will see your city code at the end of the url.

Weather Image

Create a new Shell Geeklet and use this as the command:

curl --silent "http://weather.yahoo.com/forecast/USUT0078.html" | grep "forecast-icon" | sed "s/.*background\:url(\'\(.*\)\')\;\ _background.*/\1/" | xargs curl --silent -o /tmp/weather1.png\

Replace the city code with your city code. ( same steps to get city code as above )

Then create a new Image Geeklet and use this as the url:

file:///tmp/weather1.png

Posted in Apple, Fun, Tools | 12 Comments »


Dockless Desktop

Luke,on the topic of  Apple, Fun, Tools
10.13.2009   |   1comment

So for a few weeks now I have been playing around with a themed desktop for my mac. I have always wanted to try something like this out just never had the guts or time. I have found that it isn’t scary at all and rather quick to get going. There are some free tools I have used and some nice things I have learned along the way.desktop1

Not having a dock at all has taken some getting used to. I use Quicksilver for just about everything now. I do have a pull down docklike thing at the top middle in case I ever need it. Here is a list of tools I have used to create my new desktop.

CandyBar - Change all the folders icons and HD icons.
Magnifique - Change the folder and App nav areas to black
GeekTool - Add time, weather, and computer status to the desktop.

GeekTool was by far the most fun. You can do much more with it than what I have done here. If you come up with something good for you I’d love to see it.

Posted in Apple, Fun, Tools | 1 Comment »


Screen Sharing with CrossLoop

Luke,on the topic of  Tools
05.07.2009   |   0comment

crossloopI have needed a screen sharing service multiple times and I have never had a really easy way to do it. I have shared screens with clients that use Macs with iChat but more often than not the person I want to screen share with isn’t on a Mac. CrossLoop is super easy and lets you screen share with any Mac or PC. If you ever need to screen share use CrossLoop.

Posted in Tools | No Comments »


How to use FTP

Tim,on the topic of  Tools
04.07.2009   |   4comment

We have had a few clients in the past who want to transfer large files to us. We have told them to use FTP and their response is typically, “huh?” I have written this simple tutorial to help clients tap into our FTP server to get us large files.

FTP or File Transfer Protocol is a network protocol used to transfer data from one computer to another through a network such as the internet. Simply said, it is a way to transfer files such as large pictures from one computer to another. Pictures are a great example because they are typically large in file size so standard email clients can’t handle them very well and inboxes get full very quickly. This basic tutorial will show you how to set up and FTP from your home or work computer. I am using a Mac, so some of the words or phrases might be different for Windows, but you should be able to figure it out.

Step 1 - Retrieve FTP information from the person you are sending files to. Typically you need the address i.e. ftp.domain.com, a username and password.

Step 2 - Open your FTP Client. If you don’t have one there are many options. If you are using Firefox, you can download an awesome plugin called Fire FTP. I suggest you use Firefox to do all your web browsing anyways for several reasons which won’t be discussed here. You can download Fire FTP by clicking HERE. If you are not using Firefox there is a free desktop based FTP Client called FileZilla. You can download it by clicking HERE.

Step 3 - After you have opened your FTP Client, you need to connect to the FTP Server where you are sending the files.

  • FireZilla - If you are using FileZilla, go to File>Site Manager. A new screen should pop up and there will be a button called “Add New Site” - click it. You will want to change the name from “New Site” to the place you are connecting to. Then you will need to type in the host name which for this example is ftp.domain.com. It will ask for a port which is usually just the number 21. It will then ask you for a login type. You will want to change this from Anonyomus to Normal or Ask for A Password. Then you will enter your username and password. Then choose Connect.
  • FireFTP - If you are using Fire FTP, you should have Firefox open. Go to “Tools” and then choose FireFTP. A new tab will open and you will see in the top left corner, a drop-down menu. Click on it and choose “Create An Account.” A new window will open. Enter the name of the place you are connect for the Account Name. You can leave the category blank. Then enter the host address - ftp.domain.com. Then enter your username and password and press OK. The window will disappear and you should see your site in the drop down menu. Highlight it and press connect.

Step 4 - In FireZilla and FireFTP, after you connect, you should see the FTP server you connected to on the right hand side and your local machine on the left. Find the files you want to transfer from the navigation on the left. Find the folder on the FTP server you want to put them in.

  • FireZilla - You can grab the files you want to transfer and drop them in the right hand box and they should start transferring.
  • FireFTP - There are two arrows in the middle of the screen. One is pointing the left and one is pointing to the right. If you want to transfer files from your machine to the server, press the one pointing to the right. If you ever need to get files from the server, press the one pointing to the left.

Step 5 - Your files should upload to the server and you should be able to see them on the right hand side and you are done. Pretty simple.

Please leave a comment if this post helped, hurt, or hindered your FTP expirence.

Posted in Tools | 4 Comments »


New Gradefix.com launched!

Mac,on the topic of  PHP, Tools
03.25.2009   |   1comment

In a long-awaited promotion from the “public beta” status it has enjoyed for the last 18 months, the new Gradefix.com is finally live. Many hands have played a role in getting this to where it stands today, not the least of which is Luke Larsen, who did the design built the HTML/CSS for the new site. But the face isn’t all that’s new - the back end has been overhauled with new and improved algorithms and features that our users have been asking for. Some of them were so anxious that they switched all their Gradefix use to the beta server to start enjoying the new features now. (There’s also another good reason to revisit the site: there are actually 6 different design themes that you’ll see as you visit the site. The cookie that sticks you to a single theme for your visit is valid for an hour, so either wait and come back, or delete the cookie to see the other themes.)

Screenshot of the Blue theme of the new and improved Gradefix.com

Screenshot of the Blue theme of the new and improved Gradefix.com

Gradefix is one example of a project that we at Code Greene conceived, planned, designed, and built for ourselves. After building enough sites for other people that make them a bundle of money, you eventually decide to make one yourself, and that’s part of how Gradefix came about. Our CEO, Mark Polson, had the dream of what Gradefix could be back in about 2003 or 2004, and we partnered up and started building it in 2005. It launched to the public in 2006, after 2 full rounds of reworking and rebuilding, and has had a few major updates to the internals in the first few years. This is not only a major improvement to the algorithm in response to user feedback, but also a dramatically improved look and feel based on the response our target audience has had to the site. It was hard at first to get used to the idea of letting go of the old look, but I’ve grown attached to the new one now, and I think it is a lot more trendy and up-to-date and will succeed a lot better with our user base, which is primarily college and high school students.

We’re always looking for feedback on Gradefix, so let us know what you think or how you think we could improve it. Feel free to blog your own reviews, or if you’re interested in an interview etc. for your own blog, let us know and we’d be happy to talk to you about it.

Tags:
Posted in PHP, Tools | 1 Comment »


Easy to Create Site Maps

Luke,on the topic of  Tools
02.23.2009   |   0comment

write-mapsI am often creating site maps for clients so they can see how all the pages of their website will be linked together. It also helps me get a feel for how the entire website will work as a whole. Write Maps has created a quick way to create these maps. The process is all done online so your website maps can be accessible anywhere you have the internet. We have found that when a solid base is used a website can be built with a lot less errors. Getting a final site map is key to getting that solid base that will be behind any website.

Posted in Tools | No Comments »