Sublime text 2, the new holy grail of editing

Okay, I know VIM is powerful (hello sys admins ) and Emacs got a weird following but here we got a game changer. It got the snippets power of textmate (all tm bundle works, mostly), the extensibility of VIM and the split view of E, all in a nice package, available on Windows, OSX and Linus. Meaning you will never have to fear coding on any platform. A part maybe from your web server.

Obviously I am excited, I moved my tm bundles and started playing around with it but it is too soon to tell if the relation will last. If you want some tips and tricks on using Sublime 2 I recommend having a look at this article on nettuts.

I am going to spare you the details of my adventure with them, you can find all the details here. Let’s just say that I bought some furniture and I am really not happy with it.

War, guerrilla style!

I was so pissed off about my discussion with their customer support that I decided to create a website to tell everyone about how shitty The Brick is, and I did it in little more than 4 hours. First thing first, I bought a nice domain name, thebrickwarranty.com. My host, webfaction, has some pre-install softwares, turns out wordpress is one of them. Not that it’s hard to install of course, but it is quite satisfying to have it up in running in 10 seconds.

Ok, but what about the design?

My friend Google told me that there is quite a few nice free themes around, and I found a spectacular one too. I just did a couple of small template tweaking to fit my needs.

I also needed a couple of plugins,

Disqus – The super nice commenting system that handles everything.
Share on facebook – Well a sharing plugin
wp super cache – Hey, using less resources is always good

The longest thing was finding the Facebook sharing plugin! Of course I needed a Twitter account too, I decided to use the nice concept of BP global PR, which was making fun of BP disaster PR campaign, I registered @thebrickwarranty. I was very disappointed, but not surprised, to find out that The Brick does not even own a Twitter account. HEH!

This was the final result, the brick warranty

Now that’s all nice, but I needed people to find me and I needed to get on the first page with the “The Brick” keyword. Turns out there also quite a few people pissed at them, so I tried to advertise thebrickwarranty.com on different consumer forums, with mitigate results.

Google Adword

I had this 100$ Google ad voucher code taking dust for a while, what a nice way to try Adword! Turns out, The Brick is an expensive keyword and it didn’t last long.

One nice thing however, with Google Analytic I saw that some people find the website on keywords like “the brick dining set”, which is pretty cool, over time I am pretty sure my ranking on this type of keywords will become better.

Reflecting on all this

In the end I surely invested more time than it was worth the trouble. I contacted their customer support linking my new website in hope it might at least get a “*(&(u*” from a director or a vice-president, I did not got a response yet. I’m still happy I did it, mission accomplished.

It certainly feels weird, when you think about it, that this year conference was all about adding complexity to your code when the most probable reason why jQuery as so much market share is because of its simplicity.

In the keynote, John Resig said that jQuery constantly gaining share momentum and was something like on 30% of overall websites, on the web. That’s huge. I also personally saw a tendency with others framework to use jQuery at its core for DOM interaction. jQuery is probably more popular than “javascript” itself!

Like Rebecca Murphey once said, if you really looking to do advanced javascript application, you maybe should also look into a more complete framework like Dojo.

Speaking of Rebecca, I was particularly flabbergasted by her talk about code organization and modules. I think I am currently where she was when she started to search for a better path to code organization.

There were also a lot of mentions about lazy script loading with labJS et RequireJS and loose coupling with custom events and pub/sub and other nice jQuery plugins.

I really liked all those talks that were talking about a more advanced way to do jQuery, but when you think that most of the technologies (plugins) presented were less than 1 year old.. I just hope that the “normal” developers mass that is not really following the trends is ready for all of this goodness.

I can really see a line between jQuery developers that want to level up and those that just want to do their “thing” with the DOM.

Some food for thoughts:

• Managing JavaScript Objects – Nicholas Zakas
• Functionality-Focused Code Organization – Rebecca Murphey
• Alex Saxton on javascript and jQuery pattern
• Using Objects to Organize Your Code – Rebecca Murphey
• Javascript: The Good Parts (Chapter 5) (book) -Douglas Crockford
• Prototypal Inheritance in Javascript -Douglas Crockford
• JavaScript Patterns (new) -Stoyan Stefanov

Jquery Mobile

There is another really cool thing that happened at the Boston Conference. The jQuery team released a preview (alpha release) of there mobile framework.

One thing is sure, if you think jQuery is full of magic, well you will see unicorns flying in this one. This framework is an odd beast. You control it, mostly by HTML. Meaning that if you create a simple app, like a mobile version of a blog, you will probably not write one line of jQuery or CSS. A typical example that would be instantly ajaxified and cssified by the framework:

This is a really closed way of doing things, at least if you compare it to Sencha Touch or jQtouch. One thing that have come up for example, when you create a select form element, it replaces it with a jQueryfied html version, and they forgot to add a changed event on it.

I think the jQuery mobile framework will be full of surprise like this. Really easy to use, but probably a bit hard to get really custom applications.

That being said, jQuery mobile is the only framework that aim to support a freaking lot of mobile browsers. Sencha and jQtouch are currently only supporting webkit mobile. The more the framework control all your code the less, you the developer, will break your mobile website on less capable phones, like the Blackberry, which is, a pretty big market in the corporate world.

That’s it!

Bonus

A video that I found really inspirational on javascript module management.

There is just a couple of itchy things about the website gig that I wanted to take the time to talk about today. It’s probably going to sound negative a bit, but no job is perfect and I certainly enjoyed, for the most of it, my work in this area.

Everyone has a cms

In every company I worked, everyone had a custom CMS, some better than others. But in almost every company I worked for, the boss wanted to “monetize” there investment in the development of their CMS.

This always eluded me, you can’t monetize something everyone has and is even given for free on the internet. This is only a tool to get contracts. And guess what, most CMS are not really that good. They are generally coded by good and average people and the documentation is generally nonexistent. Your CMS is not the next best shit, it just serves the purpose of editing texts and images.

It’s a big wheel

Doing websites is a never ending story, you got (just an example, don’t be picky): pitch, get the contract, do wireframes, design it, mashup your cms, html template, integrate it, add a jQuery carroussel, your done! You need to be very inventive as a developer to keep your flame going.

After sometime you get the process, and it’s even clearer when people do a bad job on your project because of the ‘flow’ slowing down.

I want my website now

Website with a fixed release date are generally the worse. Developers are last in line of every other departments, sif one department is late, developers have less time to do the website, if all departments are late, you’re in deep shit.

What clients and company bosses don’t seem to understand, it’s that if developers are rushed, the quality generally plummets in the toilet.

You can’t squeeze an orange and expect it to be all round and beautiful later. It’s not because it looks like the design that the website is well coded. It’s probably going to be a maintenance nightmare later, but let’s worry about that later… anyway maintenance cost are not included in the pitch generally.

Old website maintenance stinks

When you’re doing maintenance on an old website, you know you are in for some trouble. It’s even worse when it’s not your company that developed it. A lot of people don’t care about good code, you always get bad surprises like weird CMS, messy html and css, and very bad javascript code.

And don’t even get me started about doing Flash maintenance…

I’m really amaze that some people dedicated to website maintenance put up with this every day. Personally I will generally tend to think about a bridge from which to throw myself down before trying to open an old flash file from someone else.

No job is perfect

I just wanted to reflect my problems with the websites business, I know that the grass is not really greener at the next house. Granted no job is perfect and I am happy that I can do a job that I really like, but I am really excited to see what web application development has in store for me.

I always had a odd feeling about overtime since I started to work professionally as a front-end developer. Doing overtime for free has never been something I was really good with, and I am a workaholic! but for me, not for someone else’s company or project.

It’s not like your going to have a company share that matters unless you are a manager or a director, or a lead at least.

Overtime and “doing a bit more for the company”

Generally the companies I worked for (I always been in the CMS/website business) were saying that I would need to put an extra effort to help the company be more profitable. But where is my profit in this? Why should I spend 10-20 hours more a week for mostly nothing? Most of the time your extra effort will be forgotten in 2 weeks when the next project starts.

For me it always sounded like this, “invest time and you might get a cookie in return”.

Do you write good code when you’re tired?

Would you really write good code doing a constant 60-70 hours week? Or do you write an unmaintainable mess taking wrong decisions because of the stress and being tired.

I’m sure great developers still manage to write good code, but your bound to take a few short turns if you’re rushing something off.

To be fair

Sometimes people get in deep sh*t. When a client expect a website on a fixed release date, yeah extra efforts can be needed, but why it shouldn’t be paid? Do we cost that much? If you are a carpenter on a construction site and your boss needs you in overtime because the building is behind schedule, you will be paid your overtime, even better, they will often double your hourly rate as an incentive.

Investing in yourself

Instead of investing in a company that will probably lay you off if they do not hit their budget mark, I say invest in yourself. Work 40 hours, and if you want to put more effort, start your thing on the side.Tackle problems you choose instead of working on someone else project in overtime.

As web developers we have the ability to mostly create a web application from the ground up all by ourselves. Why not use our talents to create something that will maybe one day provide us our own money.

And if the project do not work in the end, at least you will probably get something interesting to show at your next job interview. And I am pretty sure you will learn a lot more trying new stuff yourself in your relaxed environment. I certainly learn a lot at home, but I just go at my pace.

All that being said

If you love the product you are developing, or the company, or you got great advantages, go ahead and write code. I have nothing against overtime itself if you have conditions that are favoring it. I am just bored of the “entrepreneur” attitude that developers should do any amount of overtime that is needed to move their company or project fast enough.

Silverlight…

I do not see Microsoft go on the offensive, I am pretty sure in fact that it will not implement any ‘Multimedia’ feature like Audio, Video and Canvas any time soon, and certainly not before it is kind of obligated because Youtube, for example, switched to html5. Why? Silverlight… This technology is a competitor to all these technologies. If you are not really into extranet and intranet development, you might not even know what Silverlight is, well it was first introduce as a competitor to Flash (Adobe is certainly laughing themselves to death..). They tried to ship it on big websites as a video player component, now pretty much every site that was using it is back to flash. Too few users was installing it, and from what I saw, the video server was half the time down.

Now Silverlight is more a competitor to Adobe Air, which make sense, seeing no web designer in its right mind would like to work with Silverlight. Anyway coming back on IE, Microsoft never really cared to implement CSS3 and HTML5 like others browser vendors. Don’t get me wrong, they did actually implement some HTML5 features, they are just slow like a turtle shot in one paw. They actually said that they would have liked very much to ship CSS3 border-radius but did not have the time to implement it. I mean, how much time can that actually take to implement that..

The IE team

I could guess wrong there too, but when you think about Gekoo or Webkit, I think about hip young engineers, but the IE team inspires me nothing, I would not be actually surprise that most of the team just do not really care about the impact IE have on internet and on web developers. When you think about it, by the time Microsoft shipped IE8, Webkit was trying to pass the CSS3 acid test. IE8 is compliant css2.1, end of line.

Not just that, all browsers vendors teams are working faster than IE. IE is behind everyone on CSS compliance, HTML compliance and javascript engine speed. I do not have big hope for IE9. Personally I would be very happy if I would get border radius and border-shadow. This is the 2 things that CSS need most right now.

Just my two cents here.

On a mobile device you scroll a window, not the site

When you scroll on a mobile device, you are not really scrolling the site, in fact if you zoom out completely you will see the entire page, you are only scrolling your “window” around the site. When you understand this, your fixed footer dream really shatter, unless you are willing to use complex methods..

iScroll

And there start your quest, on your way you will find iScroll 3.0. This little script create the illusion of a fixed footer, but the performance price is rather high. It emulates scrolling alright, but this is not quite as snappy as the real thing, a big problem if you consider that your users will have a feeling that something is not quite right.

See iScroll in video.

Pastry Kit

You will probably also discover that pastry kit, the Apple Javascript framework for webkit, is doing it quite well. I cannot really comment how Apple is replicating it, they probably use a complex mathematic method to emulate the scrolling. The thing that really sucks with PastryKit is that Apple as not released it officially (not yet anyway), there is no documentation on how to use it, and it seems to be used only internally.

More information on PastryKit.

There is no perfect solution

Personally, I do not see myself implementing these solutions. I, however, stumbled on an interesting solution, make the footer fade out when you scroll, and fade is when you stop. This is not perfect, far from it (it is to wonder why Apple is not implementing something themselves in Webkit..). But I found this was the best solution offered to me.

I am working on a plugin for the jQTouch moible framework, I will probably release it in the weeks to comes.

First thing I saw was that I was becoming old, with 5 years working as a front-end developer, I already lost some hairs and could have been a teacher. The students looked a bit like kids that liked to play video games a lot, which in fact when I think about it, was not very different from me.

Eager to learn

They were very eager to learn about design at Ubisoft, what is a typical day at work in general, and how they can do freelancer stuff. The fact is, freelancer students are rare, mostly because they are not ready to work professionally, unless they got a peculiar natural talent. Most of the questions were directed to the Ubisoft work environment. This was not really a surprise, mostly everyone loves games in this program and when you pick up one of the the only public program with 3d, it is bound to attract this crowd.

It is more important than you could imagine, in Montreal the video game industry is very present, we got a big Ubisoft, and some smaller Bioware and EA offices around. Even if there is (was, recently announced to close) a Ubisoft school, it affected a lot the Multimedia Integration program in 5 years. Web centric courses like javascript has been diluted a bit to let place to 3d and video. I cannot blame them. As a student you’re expecting a lot more courses about 3d than those about HTML. Students are still clients, and you need to bend a bit to their will.

One thing some of them will figure out later is that 3d is not necessary as much fun as they could imagine. I was very exited to learn Softimage XSI at college, and was very disappointed when I figured out that I literally sucked at it. This is where my interest for the web really kicked in, I needed to redirect my career choices.

A bit less technical

One thing that disappointed me was the lack of new technologies they were learning. Not learning any javascript framework is a big error I think. I am all about 1 session on learning basic javascript, but not one agency in Montreal is still doing pure javascript, and having a jQuery, Mootools or Prototype on their CV would help a lot. That means for employer that these students are up to date with javascript technologies. And you know what, I am pretty sure students would like a lot more javascript courses with a framework. You can actually have fun with frameworks. When you have fun you learn more. Just try to do anything interesting with pure Javascript.

Also there is still no UX (user experience design) centric course, personally I think this is even more important than plain design, everyone can profit from this kind of courses, this help to understand how to structure website with another level of knowledge than just Photoshop design.

One good thing however is that they are learning AS3, big time, instead of Director. There is a lot of jobs for flash developer and I can say that AS3 is valuable, specially for a front-end, that is one thing I’m currently lacking (working slowly on it..).

So what kind of web developers and designers we will get out of this? Certainly more design oriented graduates with a bit less technical knowledge. Personally I am a bit at the opposed side, I can help in usability and user experience but I cannot design a button even if my life was depending on it.

PS: Please keep in mind that this situation is really specific to Montreal and Quebec region, I do not know what kind og program they offer in the US or the rest of Canada. I am not talking about computer science but more Multimedia specific programs.

Let’s take a look at front-enders’ typical relationship within a production team: (take it lightly)

First, you got designers that, generally, do not really like front-end developers because they do not render exactly there graphic design, and you got front-enders that “hate” designers because they are doing complicated design, costing too much money and time to render to HTML.

Back-end developers also have a general tendency to be a bit careless with HTML, which, not visible at first sight, can cause trouble on older browsers and pass without no one seeing it on live versions. Improving this type of team relationships should be a priority.

Now that you have taken these relationships within your team in consideration, you have to know that every front-ender has a way of doing CSS a bit differently. Many ways of doing the same thing can be good in CSS. But somewhere in the middle, a team needs interoperability, everyone needs to be comfortable with the CSS and Javascript of the others. This is one of the main reason I launched my own “CSS Framework“.

My workflow

Assigning a lead front-end developer by project was a tough choice, but was inevitable. You need someone to refer to with a strong knowledge of the project and who can fix things easily. As he makes the main template, most of the CSS is based on his style of coding and he is clearly the man for the job if something turns bad. He is lead on the project but not necessary the lead front-end of the team.

Another nice thing here, there is actually someone in charge! You know how it goes in a project. Front-enders come and go, but even if one lead is not really doing any work on the project, he needs to take a look time-to-time to be sure the front-end code quality is matching his expectation.

Having the designer look at the first templates will also save you 90% of the problems a designer can cause looking at a final product. This can be disastrous if no validation is done before transforming the HTML template to the CMS..

Don’t be afraid to add your touch and present this to your boss. You will probably save time, and your boss’ money, and a boss really likes to save money.

What about you?

You’re doing this work yourself? Want to share your way? Send me your work flow with some explications and I will put it on this page, editorial [at] position-absolute.com.

Indent and wrap your CSS

Update: Reading the comments, I will not recommend to indent your CSS anymore, but please make easy and readable CSS.

I started indenting CSS 3 years ago and for me this is now a life breaker. I can never go back to the old and boring CSS style on one line. Indenting makes your CSS less confusing, when you look at indented CSS you understand visually your html structure. Yes, Firebug will tell you the line where there is a bug. Indenting will tell you everything you need to know about parent style and how it is affecting your mark-up. Believe me or not but I had employers who looked at my code and told me that it’s the cleaner code they saw from the CV list. Indenting helps, a lot.

Also, please “minimize” your CSS tags. It is nicer to read and it can reduce considerably the size of big CSS file.

Use a good JavaScript framework

If they did not taught you at school, start learning a JavaScript framework like jQuery or Mootools right now. Front-end developers tend to be good coders without being great. JavaScript frameworks will expand your potential much further than you can imagine. Working with plain JavaScript on the DOM is really a pain, frameworks will give you steroids.

Keep a plugin library for everything from modal boxes to form validation (mine preferably ) to FAQ page animation. You will become a JavaScript power house for creating website. Also create plugins yourself, share them, add them to your portfolio.

Don’t be afraid to talk UX with your designer or project manager

Our work with CSS makes us see a lot of UI, chances are you often read about this subject too. I am not a great graphic designer, however I know more about UX than most people can imagine. We do the fore front of sites, we test them, in some ways I think with time it makes us a bit more knowledgeable on the subject. This is not true with every front-enders, but with most of us, anyway, that’s my feeling.

I think it is safe to assume that when you will have tested more than 50 sites that you also worked on from the ground up, you begin to see patterns that work , and others that don’t. Document yourself about these patterns. Over time it will ring a bell in your head, something is wrong with this news listing. Talk about it, generally if you are working in a good company, everyone wants to make websites better. Give them better options, if they say yes, cool, if not, well at least you tried and they will see that you care about it.

Follow the community and explore, do not stay still

Unfortunately, front-end is, as with most technology’s jobs, evolving at a rapid pace. If you want to work in this industry more than 10 years it means you need to do more than 40 hours/week. You need to keep getting informed on what is happening in our world. You need to become faster and stronger on what you do.

If you don’t, you might wake up 15 years later loosing your job and no one wanting to hire you because you cost too much for what you are doing, and this university guy you were 15 years ago will be more attractive than you.

If you are learning nothing at your job, look elsewhere

If you can’t push for new technologies, have no times experimenting new solutions or creating good code. I would move on. This go hand in hand with my last point. Don’t stay in a boring CSS job because you are okay there and because it pays well. This will not serve you in the long term, unless you want to become a project manager maybe.

Bonus: Have a front-end portfolio

Show XHTML/CSS templates, javascript plugins, it will help you find a job a lot faster, I assure you it will.

Conclusion

I could also have talked about project dead lines or stress management but I wanted to be specific about my job as front-end. Hope it gave insights to some of you. I would love to hear what you guys have to say on this.