I’ve been trying to write something for some time now. As I obviously suck at blogging I decided to just post this short list of stuff that happened in between.
I now work part time at Zemanta. I’ve also downgraded to Head of Frontend as knowing everything as VP Engineering would be kind of hard. This gives me more time to work on my own projects.
I’ve been to Seattle for An Event Apart and I have proof. It was a great conference and I’m writing a review post. It’s taking more time than I expected. I should have known better.
I’ve been to Phoenix for IASummit. Another great conference and a great community. The closing plenary by Whitney Hess made me want to go again next year and help out. I promised to write a rookie review, but haven’t yet. I also hope to make it a review post.
I have an iPad. I love it. I should write a post about it but I probably won’t. First observations? I tweet more. I attribute that I’m chattier on Twitter to that and to the conferences. I need to upgrade my blog so I can blog from it. Maybe then I’ll blog more.
At An Event Apart Jeremy Keith said that it would be lovely if somebody made a tool that would check HTML5 for more than the validator does. I did the first version on the plane (SEA-PHX and PHX-ZUR). Marko Samastur wrote most of the Django app and it’s now online at http://lint.brihten.com. It has an API and will be opensourced soon. It is the first MMM project.
I started thinking of doing something very cool next year due to Andy Budd‘s convincing at the IASummit karaoke, hosted by the very cool Kevin M. Hoffman. I shall disclose the details at a later date, but it will be also a MMM thing.
EuroIAcall for papers is open and it will only be open until Sunday, May 16 24:00 CET. The conference will be in Paris in September and I think you should check it out.
Enough about me, how about you? Who am I kidding, there’s no one out there…
I never thought I’d write a “considered harmful” post, but this is really way too serious.
Do not use jQuery 1.4 or 1.4.1 with user generated content!
jQuery 1.4 branch added some great stuff, but let a really ugly bug through. Something that you could call jQuery injection.
replaceWith: function( value ) {
if ( this[0] && this[0].parentNode ) {
// Make sure that the elements are removed from the DOM before they are inserted
// this can help fix replacing a parent with child elements
if ( !jQuery.isFunction( value ) ) {
value = jQuery( value ).detach();
}
...
With previous versions you could easily do $('#myElement').replaceWith('some text'); to replace the selected node with a text node. In jQuery 1.4 and 1.4.1 you can’t – but just failing does not constitute a huge bug.
If you take a good look at the code above you can easily find that if value passed is a string that looks like a selector, it will detach nodes from the document. Consider calling $('#myElement').replaceWith('html'); – the screen goes blank and everything the user has been working on is gone.
Fortunately…
jQuery 1.4.2 fixed this issue by properly using detach only when value is not a string. If you are using jQuery 1.4 or 1.4.1 and for some reason cannot upgrade to 1.4.2 (or just don’t want to), you can still just copy the whole replaceWith method from jQuery 1.4.2 to your version.
Trying to add some HTML to an element with innerHTML and weird stuff happens in Firefox (3.5, 3.6)?
var elm = document.getElementById('myElement');
elm.innerHTML = 'Test';
alert(elm.innerHTML);
// alerts '<div xmlns="http://www.w3.org/1999/xhtml">Test</div>'
I just figured out the problem is that one of myElement ancestors is attached to a table as a non-table element. In my case there was a div attached to a tr. Changing that div to td fixed the problem.
And they say web development isn’t full of surprises…
By far the best way to screw up your conversion rates is to go mainstream.
The traffic graph is the number of visitors per day while the conversion rate is the percentage of the visitors converted. When you go mainstream your traffic will spike and plateau at a lower level a few days later. This will screw up your conversion rate. Don’t worry though – figure out who the visitors are and fix your landing pages to target them as good as you can.
This graph obviously focuses on start-ups that have a huge conversion rate at the beginning as most of the conversion happens on tech-news sites and only already “converted” people get to your page – conversion rates of 80% are common in such cases. It should also be valid for later stage companies, but you need to adjust the conversion rate numbers. Another fact of conversion rates is that as your number of visitors grows your conversion rate will drop due to the fact that more users will be “just browsing” (think about a store in a mall).
If you don’t belive me think about the what the Twitter homepage looked like in time. The first one I saw had the public stream on it – geeky as hell. They changed that into a still somewhat geeky homepage that explained what Twitter is and helped you register. The latest one is almost non-geeky and focuses on real-time search and has a prominent sign up button.
There’s been a lot of fluid layouts recently. When you use a fluid layout it’s hard to make everything fluid as you need to stretch certain elements and have other elements fixed.
I was approached some time ago by a designer who was working on a fluid design but was having problems with a HTML/CSS only solution for a fluid searchbox. The idea to create a searchbox that grows when the window grows is simple, but becomes a tad more difficult when you add stuff to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %).
As I like challenges I took it on and produced a sample that worked on most modern browsers in a single evening. They didn’t like it because it didn’t work in IE7 (cause I never checked it) even though the fix for IE (it was only IE7 that didn’t work) was trivial. After a while I went back and checked it out again, changed the code a bit and I think it’s much better now.
The simple form
Creating a fluid search box when you only have a single element next to it is trivial. What you do is wrap the input in an element and use padding to create space for the fixed element, then position the fixed element absolutely (or relatively) in the space created by the padding.
fieldset {position:relative;padding:0;}
div {padding-right:6em;}
div input {width:100%;}
input.s {width:5em;font-size:1em;position:absolute;right:0;top:0;}
Sample
You could target the input with input[type=submit] but that wouldn’t work in older browsers.
A complex form
The complex form from the intro includes a title, a search type drop-down (select element), the input box and a submit button. This gives us four elements, two of which are fixed and two fluid – and more stuff to hack around.
I created three elements that help me align elements. I’m using classes l for left, c for center and r for right. The left element includes the title and the type, the central element includes the search box and the right element includes the submit button.
The left element has its height set to 0 so it seemingly doesn’t take any space. The central element includes the input and needs no special positioning, while the right element is positioned similar to the simple solution – absolute and set to right.
The surrounding elements
You can set the width of these elements in any unit you like. I set the width for the span element in em, type drop-down in % to make it fluid and submit button in px.
The only thing you need to do in CSS is set the width to these elements. You need to set the display property on the span element to work around the fact that inline elements don’t allow setting of width.
The input needs its width set to 100% so it will stretch the whole available width of the parent. That happens due to the fact that block-level elements will grow to 100% automatically and the margin and padding will “shrink” its contents. This allows setting the spacing in two different units – one for margin and one for padding. If you look at the CSS rule, you’ll see that the widths are similar to those set for the surrounding elements – of course with some spacing added.
Right: 60px margin (width of the submit button), .7em padding (spacing)
Left: 4em margin (3em for the title + spacing), 10% padding (type select width)
Internet Explorer: 8 (with its rendering of IE7 Standards and Quirks)
As always at least one browser had to fail – IE6 did. The problem was height:0; as IE6 will render elements as high as their content. We can work around this by changing the way we make it zero width/height so it doesn’t affect the central element.
* html fieldset .l {float:left;width:100%;margin-right:-100%;}
I’m using the IE6 CSS filter to target IE6, you can use conditional comments or whatever you like best. The rule floats the element left, making it 100% wide, but resets the position by setting the right margin to -100%.
As I’m using display:inline-block; this will work a bit different on browsers that don’t support inline-block. In Firefox 2.0 you can use display:-moz-inline-box; in the rule for the span, but make sure you put it before the inline-block.
You might want to fix some stuff in some browsers so everything aligns nice. The techinque used is derived from the multi-unit any-order column layout by Eric Meyer as it opens your mind on how to use multiple units in a single layout without fuss. I’ve tried all the browsers I have on my dev machine and I’m not saying it works everywhere. If you find a browser where it doesn’t post a comment; if you find a better way of doing things also post a comment.
You might have noticed that we’re hiring at Zemanta. As we’re a start-up we’re looking for experienced developers that can get to work right away. The environment of browsers and as if that’s not enough blogging platforms and rich-text editors is very challenging so the bar is set quite high. As we were talking about hiring a new person we tried to write a job description and application invitation that would set the bar high and also test some things we wanted to know before conducting the interviews. It seems we might have went a bit too far as we only got a few applications.
You always expect some people to send you a job application request that will not conform to what you’re requesting and that’s ok – you can easily ignore these applications. You will also always get some people who don’t fit the requirements by a mile but are trying to get “on the shortlist” for possible openings in the future – that’s ok too. And you’ll also get a lot of people that will value their own knowledge far more that they should – these are the ones I wanna talk about here.
You’ve probably met a bunch of “airheads”, “egomaniacs” or whatever you call the people that are full of themselves and describe their knowledge as expert but turn silent when you pop a simple advance question. I call them “king of the hill” types.
Assessing your own knowledge is hard
It’s in our nature to compare. My “house” is bigger than your “house” is part of our minds, even more so in Slovenia, a small market where basically everybody knows everybody. So it’s only natural that we assess our knowledge based on comparison. There’s an obvious problem with that – I will have no idea who you’re comparing yourself with and therefore your score will make no sense to me. In that sense it’s similar to confidence levels in search.
You might think setting a comparison chart would make the scores better, but it really doesn’t. If you tell a developer that he should assess his knowledge of a language based on a scale where 1 is “can read it” and 10 is “i invented it” you’ll get a lot of 8s. Which would mean they’re basically the best developer for that language in the country. When you do, you can easily think that the guy saying it is a moron and discard him as a viable candidate. And you’d be wrong doing that, at least sometimes.
Are you King of the Hill?
When people overestimate their knowledge it’s because of two basic reasons:
They are genuine asswipes that think they know more than the guy that invented the language, but know showing they’re an egomaniac on the interview is not smart. So they’ll lower the score to an 8 to make you feel good. These guys are usually easy to recognize as they’ll be defensive and dismiss any questions they don’t know with something like “that sucks”, “i never need that”, …
They really have no idea what else is out there. I was sure that in the age of internet such people don’t exist anymore, but even in computer related industries you can easily find people that got stuck in a particular part of the web of amateur forums and people of the previous variety. This means they do actually know everything, but don’t realize that everything is a lot bigger than they know.
But this is only a part of the story.
Who to hire then?
I’ve drawn a simple graph to help explain this:
Don’t hire the King of the Hill!
The beginners
As you start learning about something you’ll know that you know next to nothing. You’ll also see a lot you can learn and might even see where you want to get – as near to the “i inveted it” as possible. At that time your think you know less than you really do – these are the people you should hire only if you are willing to wait until they learn more and if you believe they can. As you learn and overcome the problems you thought were the “the big problems” you’ll go over the equilibrium and become a smart-ass.
The kings
This is where it gets interesting. Some people like to be king of the hill so they will ignore everything beyond that point. They will also make sure that people lower on the actual knowledge axis will not see over that point. They’ll have all sorts of reasons why everything beyond this point is crap. These are the people that make the most damage to development communities, as they’re usually the vocal ones. You should not hire them.
The enlightened
But as I said before they might really just have no idea what’s beyond that point. That’s easily solvable even during the interview – you can show them some code, throw around some ideas and arguments on why that’s good and some people will say “Wow, I didn’t even know all that is possible!” (yep, I actually got a response like that). You should hire this people immediately – seriously, don’t let them leave the interview without signing a contract. Tell them they’re the last interview before the decision and that you decided already and don’t need to wait. And because they’re now sure they know less than they really do, you’ll be able to get great value for money.
You must however be really careful with developers in this stage. They will climb the curve fast and soon they’ll start whining about lack of challenging work. They’ll also start to want more money. They might even want to say they want to be a team leader. When they do, they’re really just saying they want more money. Don’t confuse expert developer knowledge for managerial skills!
The experts
The best you can do at this stage is making them architect or senior developer. And with that done you need to start sending them to topnotch conferences and encourage them to write papers trying to get a gig at one of them. They’ll meet with the inventors, see that they’re actually normal people with a unique set of knowledge that is much wider than they expected. The new “lack of focus” will keep them busy and inspire them. They might become a better developer or stay at the same level, but they’ll be happy. They’ll be the kid with a new toy. With the ability to find a new toy when this one gets boring. That’s what supporting extracurricular activities and flexibility is good for.
Image via CrunchBase
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=f26232c7-fdf3-43ba-9caa-9d33dd6899c0)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=b6295000-ad04-47d4-b392-7b4e3b9eb67a)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=b895aee9-d624-4f3f-84ea-3879011f8c75)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=6a47e4e4-04fd-4357-b788-c5ea937c07fa)
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=66543189-d8ad-44c4-9d90-613bf2e03a1b)