Jack of All Trades Web Development

Twitter

After being asked many times if I use Twitter, I finally decided to pony-up and join. You can follow me on Twitter as 1Marc.

Impression of Twitter

I never understood Twitter when it first came out. My first (ignorant) impression was that it would be for emo kids - much like how blogging started out. However, it turns out that Twitter can be great for your professional life. You can follow other like-minded people, and you will find they post links and ideas that are interesting to you. You can also participate in conversations going on in the industry.

TwitterFox allows me to keep up on Twitter updates from Firefox, which is nice.

Searching the Twitter Landscape

A Twitter search engine called Summize allows you to peruse through peoples' tweets (twitter updates). This is great if you want to track opinions on a certain topic or product. The first thing I searched for was “datepicker”. To my surprise, I found a lot of flattering comments about my datepicker and was quite pleased.

See you on Twitter (1Marc).

Permalink

http://marcgrabanski.com/article/twitter/1Marc/searchtwitter/summize/112/Finally-Joined-Twitter

Comments

Post a Comment!

CSS

As masters of semantic markup, front-end (HTML/CSS) coders can get downright anal when it comes to writing clean, search engine friendly code. Yes, you should always strive for quality and meaningful markup! But, I'm afraid that more and more people are wasting their time (in my opinion) for a bit less markup in their code.

Trust me, a couple of extra <div>s will not hurt anyone - I promise! I have wasted hundreds of hours re-coding and fixing bugs in IE6, Safari and Firefox when I could have saved that time with an extra div or two. Besides, I doubt you are going to see the fruit of your labor unless you are showing off to other developers.

Rounded Corners, the Front-End Developer's Black Hole

Designers love adding rounded corners everywhere these days. Unfortunately, rounded corners can be the death of a front-end developer if designers cannot design consistent templates (sometimes this is out of their control).

There are many projects I've seen and been on where the developer has to cut new sized rounded corner tops and bottoms of the same style, while making them work in all browsers - this takes a lot of time. Even worse, when the templates are handed off and implemented, many browser inconsistencies show up. This is a painful process to fix and make these types of boxes work cross-browser across all landscapes.

The development team has to spend countless hours fixing boxes with rounded corners and drop shadows - a black hole of time and energy to keep the markup clean and consistent. So how do we fix this?

Stop Wasting Time with a Few Extra Divs

At work, we have saved countless hours with a solution based on schillmania's rounded corners template. With 5 (or a few more) divs, we have saved all that time and frustration! With this solution we only have only one image, as opposed to 10 different box tops and bottoms of the same style.

Make sure you think about what is the best solution for your employer, their clients and your sanity. If you have an abundance of time than go ahead and strip those divs out of your code. But, if you want lightning fast results and want to become a very valuable front-end developer, pick your battles wisely and strive to make each keystroke more valuable. Clean markup is good, but fast and solid (semi-clean) markup that works in all browsers is almost always better.

Don't be fooled by, "the standard"

One more note of advice, don't implement "the standard" just because someone tells you to. Make sure you understand why it is the standard. I've seen people use css sprites because it is the proper thing to do, while they totally messed up executing the technique because they didn't have an understanding why it exists. They could have done much better with what they know.

Standard practices are difficult to master. You should only use them when you understand them. Get books like, "CSS Mastery":

Read a lot of books and articles online - research until your mind gets heavy. You will find out why standards exist and learn when it is appropriate and when it is simply a waste of time. Web standards and semantic markup are great, but please only implement them if you understand why you are doing it. You will save yourself and your employer a lot of trouble.

Don't feel so pressured by web standards. Standards are great, but learn them at a pace where you don't break things. Eventually you will become a respected ninja warrior, I mean HTML/CSS master.

Permalink

http://marcgrabanski.com/article/111/Use-Web-Standards-with-Common-Sense

Comments

• #1. leveille on Apr 24 2008

  I couldn't agree more with what you're saying. Evaluate the project, scope, who you are working with, future maintainability, the client base, etc, and make the best decisions based on all these factors.

• #2. leveille on Apr 24 2008

  I get infuriated when I work with other people who seem to have paid no attention to the standards movement. For example, choosing to constantly wrap what should be a heading, marked up with a heading tag, in a span with a class attribute called, for example, heading, really gets under my skin. Sometimes all I ask is that other frontend developers realize that html tags were created for a reason, and when used appropriately they will make code more maintainable, and semantically meaningful.

• #3. Marc Grabanski on Apr 24 2008

  @leveille: Yes, it is frustrating when people use tags inappropriately. The point is to tell the computer what the information is by wrapping tags around it.
  
  In this article, I was addressing the standards maniacs that I've been running across lately that take this too far. I think its good to follow web standards, but some people take this over board and get mad if you use a couple extra div tags. On big projects you can save hundreds of hours by using a bit more markup.

• #4. leveille on Apr 24 2008

  Perhaps infuriated was too harsh. I started out as a standards zealot, only to realize over time that that kind of inflexibility only causes problems in teams of people, under certain budgetary constraints and project scopes, etc.
  
  I really could care less about a few extra divs to implement some affect, as long as what is in those divs is semantically sound and meaningful.

• #5. Marc Grabanski on Apr 25 2008

  word.

• #6. Raghav on May 09 2008

  very good one , which i came accross in the web...

Post a Comment!

Google

As many of you know, I was interviewed by Google two more times. Once as a UI Engineer for Gmail and once for a web developer position at YouTube (Google owns YouTube). YouTube actually sent me out on a plane to San Francisco, but I was turned down for both positions. Let me explain how this played out...

UI Engineer at Gmail

The phone interview for UI Engineer was for a position on the gmail team. The person who interviewed me asked very heavy JavaScript questions. One question went like this, "How do you profile JavaScript"? So I told him about Firebug for Firefox and Drosera for Safari, that was fine. Then he asked me, "How do you profile JavaScript in Internet Explorer?" I had no idea so he responded with, "The JavaScript date object, outputting the date and time with each line of code executed". Wow, manually profiling JavaScript with the date object? - I wouldn't have thought of that, nor would I do that unless for some drastic situation.

Aside from the heavy JavaScript questions, I think the interview went well and I gained more insight about Google.

Web Developer at YouTube

The phone interview for YouTube went great. I was interviewed by the lead web developer and was interested to find they have less than 300 people there at the moment. He asked me a lot of JavaScript and CSS questions. This all went fine, and I got along with him very well. So they sent me a plane ticket for an on-site interview.

I took this opportunity to visit people I know at Google as well. The Googleplex is a pretty crazy place, seemed like Disney world for work. But, after being there for a few years the mystique of it all wears off and it is just an office to them. Free food and cafeterias made it seem a little reminiscent of college days. I even got a little jealous at one point.

The on-site interview was enjoyable. What was interesting to find out is how everything is based on self-motivation. You set your goals, you set your time lines. This works with very motivated people, but wouldn't work in the general working world for obvious reasons.

In the end, the reason I was given for not given an offer was being, "library dependent" (aka jQuery). This got under my skin a bit, because I don't think it is true. I understand how they thought this because I talked about jQuery a lot and am very involved in the community, but jQuery is used to get stuff done faster - not as a crutch. 4 of my 6 open source projects are without a library... but don't need to go any further.

Wrapping Up My Experience

I'll take free plane flights to Google any day. I was glad to meet the people I met, and to see the inside of Google was a good experience. Sounds like things aren't over quite yet with Google, but once again I still have a great position at RMG. Cheers!

Permalink

http://marcgrabanski.com/article/110/Interviewed-by-Google-Part-2

Comments

• #1. leveille on Apr 18 2008

  Thanks or sharing your experiences Marc. Bummer. Did you talk about the 4/6 open source projects you work on that don't use a library? Did you get to show code or was this more of a verbal interview?

• #2. Paul Irish on Apr 19 2008

  Haha. Despite some pokes from them, I haven't yet done a proper interview, though I bet it'd go something like yours.... I could see myself getting the "library dependent" tag. :)
  
  Also, for IE I've been using JASH for profiling in IE. And then you could go down the route of JsLex.. but... eh.
  
  Thanks for this post. great to see the experience.

• #3. Marc Grabanski on Apr 19 2008

  @leveille: No, I didn't talk about my non-library projects because I didn't think it mattered. The interview was more verbal, but I had a laptop there and was able to show them my latest projects.
  
  @Paul Irish: JASH? I'll check it out. Glad you enjoyed reading my experience.

Post a Comment!

Google

Out and about in California taking some pictures...

Permalink

http://marcgrabanski.com/article/109/Sightseeing-in-California

Comments

• #1. Felix Geisendoerfer on Apr 14 2008

  Geek tourism ... ; )

• #2. leveille on Apr 15 2008

  YouTube and Google ... never heard of 'em.

Post a Comment!

JavaScript

Since query strings are limited depending on the browser, I wrote this function to grab redundant data variables and consolidate them into comma-separated values. For instance:

foo=1&foo=2&foo=3&blah=a&blah=b

would turn into...

foo=1,2,3&blah=a,b

This saves some room in the query string. Of course you need to write a trivial line to parse it on the server side, but this saves you some room for more variables in a query string. Here is my attempt at a JavaScript function that does this: (don't use this, use John's revised function below)

function compress(query) {
	s = {type:[],value:[]}
	$.each(data.split('&'), function(n){
		parts = this.split('=');
		s.type[n] = parts[0];
		s.value[n] = parts[1];
	});
	var csv = '';
	while(s.type.length > 0) {
		value = s.value.shift();
		type = s.type.shift();
		
		while((pos = $.inArray(type, s.type)) > -1) {
			value += ',' + s.value.shift();
			s.type.shift();
		}  
		csv += type + '=' + value + '&';
	}
	return csv.substring(0, csv.length-1);
}

Sorry, forgot to mention that $.each and $.inArray are jQuery functions.

I messaged John Resig, and he wrote the function that was much smaller, and faster.

function compress(data){
    var q = {}, ret = "";
    data.replace(/([^=&]+)=([^&]*)/g, function(m, key, value){
        q[key] = (q[key] ? q[key] + "," : "") + value;
    });
    for ( var key in q )
        ret = (ret ? ret + "&" : "") + key + "=" + q[key];
    return ret;
}

UPDATE: John Resig followed up with a post of his own, titled search and don't replace.

How John's Script Works

You may be asking, but how does this work? - let me explain. First, the replace function accepts a regular expression as the first parameter, and the second parameter can be a string or a function.

replace(/([^=&]+)=([^&]*)/g, function(m, key, value){

As far as I'm concerned, that lines is the magic of the script so I will go furthur.

/([^=&]+)=([^&]*)/g

This is the regular expression that matches data that starts with ampersand and goes until the end or until the next ampersand. This extracts the data. The /g part loops through each match instead of just one, and does a replace on it.

The function he is passing in has the three parameters set by the regexp. "m" is the match, "key" is the unique identifier, and "value" is the entire string that the regexp is running against.

Next he sets the object based on the key, if it exists already than add a comma between after the current value followed by the next value.

q[key] = (q[key] ? q[key] + "," : "") + value;

The last part of the code is simply looping through the, "q" object and outputting our new compressed query string. Brilliant.

Permalink

http://marcgrabanski.com/article/108/Compress-Query-Strings-in-JavaScript

Comments

• #1. leveille on Mar 14 2008

  Good stuff Marc. A few clarifying points if that is ok:
  
  m = the string that matches the pattern (for example, foo=1)
  
  key = first subexpression match (the result of what is matched from the rules in the parenthesis. In the case of foo=1, this would be foo)
  
  value = second subexpression match (the result of what is matched from the rules in the parenthesis. In the case of foo=1, this would be 1)

• #2. leveille on Mar 14 2008

  I ran out of space!
  
  The three arguments are not set by the regexp, but rather, these arguments are defined by what the replacement argument (in this case, a function), can accept. The first argument it can accept is the matched pattern (m), the second, etc, arguments represent matched subexpressions (there could be up to 99 of these I believe).

• #3. Marc on Mar 14 2008

  Thanks for your clarification, Leveille. John explained more clearly in his post: http://ejohn.org/blog/search-and-dont-replace/
  
  Sorry about the character limit. I'll be upgrading my blog soon. This one was just hacked together quick in PHP. I'm not proud of it, but it serves its purpose.

• #4. Czimi on Mar 15 2008

  How about using the replace function trick with some recursion?
  
  regex = /([^

• #5. Czimi on Mar 15 2008

  Looks like my idea was swallowed:
  http://xczimi-tek.blogspot.com/2008/03/compress-query-strings-with-javascript.html

• #6. Marc on Mar 19 2008

  Again, my blog comments scripting sucks which is probably why I get lots of traffic but few comments. Maybe I should up the priority of reprogramming my blog.

Post a Comment!

Productivity

First, I want to preface this article by saying that this is not just another big list of every web development tool on the internet. This is a list of tools that I rely on for my job as a web developer and I use these tools every day!

This arsenal of web development tools was gathered from my computer at work (Windows XP) and is a little more current than my previous post on tools to get the job done.

I hope you've found something useful in this arsenal of web development tools. It is amazing that I need so many tools, but everything has its place. Most of these tools are free, and now looking at them in retrospect I should probably go through and donate to each tool's author. They have made a serious impact on my ability to get things done.

Permalink

http://marcgrabanski.com/article/107/Arsenal-of-Web-Development-Tools

Comments

• #1. leveille on Mar 08 2008

  Thanks for the list. I had previously been using standalone versions of IE, however was not familiar with the single installer.
  
  Included in my list would also be MS Virtual PC 2007. Great and simple way to run virtual environments.

• #2. gribelu on Mar 29 2008

  As a color picker you should consider Color Cop, i've been using it for years. It allows color sampling by averaging multiple pixels and other usefull stuff. http://colorcop.net/screenshots
  Otherwise a great list of software :)

Post a Comment!

JQuery, MyWork

jQuery UI Datepicker has been updated to v3.4 - view the v3.4 change log for a full list of changes.

Many functions have been renamed and will stay this way. There was much discussion around the API of the jQuery UI project. It was decided that the name of the plug in will be the main function and the first parameter will be the actions.

To migrate fully, the following steps need to be taken:

• Replace attachDatepicker with datepicker.
• Replace removeDatepicker() with datepicker('destroy').
• Replace changDatepicker(...) with datepicker('change', ...).
• Replace enableDatepicker() with datepicker('enable').
• Replace disableDatepicker() with datepicker('disable').
• Replace isDisabledDatepicker() function with datepicker('isDisabled').
• Replace showDatepicker() function with datepicker('show').
• Replace getDatepickerDate() function with datepicker('getDate').
• Replace setDatepickerDate(...) function with datepicker('setDate', ...).

For example, this old style code:

$('inputs').attachDatepicker(...);
$('inputs').changeDatepicker(...);

becomes:

$('inputs').datepicker(...);
$('inputs').datepicker('change', ...);

I have come to love the new API - it fits with jQuery much better, don't you think?

Also, on the top of the datepicker documentation page you will notice links to legacy versions documentation for v3.2 and v3.3. That way if you don't need to migrate over to the new API right away you don't have to, while still having documentation.

Permalink

http://marcgrabanski.com/article/106/jQuery-UI-Datepicker-v34

Comments

• #1. Richard D Worth on Feb 26 2008

  Great job Marc. I'm very impressed with your responsiveness (and patience) with all the API changes. Also, providing the legacy documentation is huge. Keep up the great work!

• #2. Rey Bang on Feb 26 2008

  Awesome job Marc. The datepicker rocks :)

• #3. Luke on Apr 16 2008

  Do you still intend to have the datepicker make use of the dateJs library? I think that would be a great way to reduce the size of the date picker code.

• #4. Philip on May 10 2008

  Hi Marc
  
  I've been using this plugin since the early days - it just keeps getting smoother - many thanks for all your hard work.
  
  Are there any plans to implement a time element? Even as a text box or optional plugin hook would be fine. Just need to be able to populate datetime fields sometimes...

Post a Comment!