I needed to create a ToC for a FAQ. I wrote a little jQuery plugin for it. Dead simple, no indenting or other magic, just creating anchors for headers, gets the job done.
The Script: http://frontendbook.com/js/jquery.toc-1.0.js
Feel free to use, hate, extend or whatever.
I started out day 2 of JavaOne attending a session on Google Web Toolkit, GWT is one of those things I do not know if I actually like. On one hand it is a cool framework that makes a lot of UI coding unecessary, but on the other hand black-box-solutions is not my cup of tea. But, if you are a big team of developers it is a big advantage of course to use such a framework/toolkit making sure you are building the web the same everywhere in your corporation. The presentation was ok, I was a bit tired but I think I got a good idea on how I can start using GWT and still have some flexibility when it comes to the “magic” JavaScript parts.
I was really looking forward to this session, it was a good session, but it was no news actually. They stepped through how to speed up your website using Yslow measures and guidelines, if you have read Steve Souders blog and his book High Performance Web Sites: Essential Knowledge for Front-End Engineers (his upcoming book on Web Site Performance: Even Faster Web Sites: Performance Best Practices for Web Developers)you know all those things already, but I am not from the Java-world, so maybe this is new news to the Java Community. Greg Murray from Netflix showed a framework named Protorabbit which takes care of all these steps for you, they used Protorabbit on stage to show how easy they could adapt the Java Pet Store to actually grade A on Yslow. The presentation was ok, and I found Protorabbit, that is extra plus.
Ben Galbraith from Ajaxian and Mozilla talked to the tech-savvy audience on User Experience, no code, just talk about responsive UI:s, perceived performance, look and feel and usability. I think it was a very important session as there are a somewhat technical focus on software development in general and trying to actually get traditional back-end developers to focus on front-end things is a good thing.
I have known it for 10 years, but it seems the rest of the world is just about to start loving JavaScript. For me JavaScript is the language closest at hand when thinking of solving a problem, and I am very glad to see how JavaScript have evolved from a crappy web script langugage to a well respected, and fast, language that runs on both clients and servers. This session focused on teaching traditional Java developers the core of JavaScript. Closures, anonymous functions and common problems Java developers could fall into when starting writing JavaScript (scope). The presentation is really good (academic) and goes into the real good and advanced parts of the worlds best language. BTW, Prototype and Scriptaculous seems to be the bomb in the Java world.
After a busy day of flying (and some beers) yesterday I am at the first day of JavaOne in San Francisco today with my fellow colleagues. I am going to tweet my findings continuosly, make sure you follow me on Twitter. Below I have some short input on the sessions I attended the first day:
The session was at first very basic going through the design pattern behind Ajax and introducing JSON to the XML-friendly Java-audience. As always Ajax is also used for describing all technical solutions involving JavaScript, which I sometimes get annoyed about. In the end the focus came on how to implement portlets that are Ajaxified and can communicate with each other, I found that interesting and got some ideas on how you could architect a event-driven solution in JavaScript where portlets can listen on a message bus, and react to what the other portlets trigger. Any examples out there?
I am very interested in diving into Amazon EC2 and other services they are offering in the Cloud, and this session was a great introduction for people like me. I really appreciated the pragmatic and very clear presentation on the subject.
Canvas, SVG, CSS Animations, JavaScript, Embedded Fonts, HTML5 and other things on the state of the open web by people from Google. Both an introduction by Mark Pilgrim (@diveintomark) on the subject and a more demo-oriented part from @chanezon. I think it is important that the Java people are introduced to this wonderful world. They are demoing Bespin, MozBox (HTML5: canvas, video-tag and some video-manipulating JavaScript, awesome), Yahoo Pipes and Movement Tracker. Things are starting to happen, this is just great! Looking forward to the session on Canvas Tag and SVG.
Ben and Dion from Ajaxian.com and Mozilla staged a debate on what platform is the best for creating better intefaces on the web, Ben took the Ajax/JavaScript side and argued Dion who took the Java side in the debate. I think Ben did a good job on selling Ajax as the platform for building rich interfaces on the web. There was very little focus on Java FX, more on Java and the capabilities Java have now compared to the “inferior” web. A lot of focus on Canvas, JavaScript, Video and performance. I thought it was a really good presentation and I am certain that the Ajax/JavaScript platform will grow stronger with advocates such as Ben and Dion.
As a spin-off of the earlier presentation on the Open Web, this presentation focus on vector graphics, mainly on the canvas tag and SVG. Some numbers on support and how to add fallback content for lesser browsers (IE of course). I am really hoping we see some big player, Google?, start to use this in large scale, I think that is the only way we will see a boom in commercial use to a large customer base. Just like Google Maps and Google Suggest opened up developer and users eyes to Ajax and rich interfaces on the web, I believe that something big has to be released using canvas, svg and other new features. Interesting times indeed.
Few languages can cause such debate as JavaScript, now a days, everyone is a JavaScript-developer, but it has not always been like that during the cold years between 1999 and 2005. In the early days of JavaScript and browsers we saw some really amazing things being created client-side, and I must admit, some amazingly cruel and bad implemented front-ends as well. A lot of these bad implementations were not due to the use of JavaScript, rather due to developers running the show and lack of guidelines on where and how to use client-side scripting such as JavaScript. In this article I will, with a very subjective view on the topic, guide you through the history of JavaScript and how it come to be that the most hated language in the world ended up as the saviour of the galaxy. The story takes you years back and beware, we mixed content, presentation and behaviour in a way that may not be suitable for the eyes of law abiding and always politically correct standards advocates. We did things such as:
If you feel that the list above is way to much for you, head over to W3C, Opera or the Republican Party HQ Online. Ready to go?
Brendan Eich designed JavaScript to look a bit like Java in syntax, but weakly typed and easier for the non-programmer to get started with. The name has little to do with Java except that Sun was involved in the naming back in 1995. JavaScript was first introduced in Netscape 2 and after that the world has not been the same. In the beginning the main area of use for JavaScript in the browser were for validating form data, popping windows, swapping images and adding externally hosted ads to a web page. We still use JavaScript for form validation and ad-scripts. Later in the nineties we saw the term DHTML grow in popularity and DOM-scripting, manipulating the DOM of the webpage dynamically using JavaScript grew in popularity. We saw a lot of games and similiar things being developed. This was when a lot of things were starting to go in the wrong direction. The birth of DHTML more or less happenede at the same time as Internet Explorer 4 and Netscape 4 were released in 1997. If we could dynamically change the DOM on the client-side with a language built for non-programmers we could move the whole control of design to the designers right? There were no limit to the madness me and others took part in. I implemented dynamic scroll areas of content, advanced text-tickers, AJAX-like interfaces with cross-frame-scripting. There were no rules, no libraries, no best practices and no one who saw the boundaries in either direction. Maintenance was just a word. How it all ended? No one had the time to actually look back, because any serious player on the net redesigned their website two or three times every year. There were a lot of work for people who enjoyed writing JavaScript (you did not have to be good at it). There were some approaches to creating libraries such as DynAPI. CSS was just something some people used for stylign fonts (but it was a nightmare getting the same font sizes on different clients), so a lot of the JavaScript code used in order to create DHTML actually added non-semantic HTML to the DOM, and trying to work out how things worked was more or less impossible. The state of JavaScript was that we created amazing things with it, but it was living hell to maintain and when new browsers were introduced the owner of the website more or less had to initiate a redesign and rewrite of the code.
After the big crash in 2000 – 2002 you were not allowed to speak the name of the devil. People who still enjoyed solving problems using JavaScript, had to do that locally on 127.0.0.1 and newer, ever show results to anyone on the outside if you for some reason had not met up with other people who fancied the same sick perverted language as your self. Like Gollum we had to hide in the caves. For us, the people who still enjoyed writing JavaScript, it was actually good times as browsers were moving towards standardized ways of implementing the DOM and Ecma, of course with new browser bugs introduced along the way, but it was more or less on the right track. JavaScript in the browser was evolving to become a more or less standardized way of adressing a certain type of problem best solved client-side. As the support for CSS and initiatives pushing for building semantic websites grew stronger, the potential of JavaScript also grew in the caves. During this dark period of JavaScript, semantic built websites meant separating content and design, no one discussed or thought of behaviour, because we were not allowed to speak of the devil. For the big audience and developers JavaScript was something that for some people destroyed the user experience, not enhancing it, in some sense they were right, we only needed to find the correct guidelines and patterns in order to utilize the strengths of JavaScript in the browsers. When everything looked like it was no hope left, a lot of things happened that gave us all a new hope on the evolution and use of JavaScript.
I probably get the chronology all messed up here, but between 2003 and 2006 a lot of great stuff started to happen in the JavaScript world. I think a lot of this new hope had to do with how successful the turn from presentational markup to semantic markup with CSS had been. There was one big problem with standards compability for CSS, that was IE6 (as always the bad kid on the block) and Dean Edwards came up with a JavaScript based solution for the problem which he named /IE7/, the script actually showed the world the strenghts of JavaScript, it actually emulated full CSS 2 support in Internet Explorer 6. We saw a lot of different things that happened during this time that made JavaScript a part of modern web development again:
All this made JavaScript an natural and important part of the front-end for all web based solutions.
Once again (2009) JavaScript is on top of the world and now it is a tool all web developers need to know fluently. A lot of todays developers “code jQuery” or “code Dojo” and the libraries has been something that you adhere to from a philosophical approach to coding. What we see now is that the libraries and the engines are getting better and better support from large corporations and organizations such as Mozilla, Google or Apple. We also see JavaScript moving from the front-end to the back-end and the knowledge will be more worth in a couple of years. Today a lot of people are talking about Comet, Mobile JavaScript Support and other new parts to explore in the ever growing area of JavaScript. We see how JavaScript is no longer a play language for non-programmers. I feel that is good in some sense, but also I think that with JavaScript being taking seriously also opens up a threat that it turns into something scary that everything that gets a large developer community turns into after a while. I want JavaScript to be as dynamic and weakly typed as it has been, if it is turned into something corporate I will change focus, I have learned to love JavaScript during the 10+ years I have been working and playing with it.
If or when JavaScript looses its playfulness I need a new language to turn to. People have suggested Ruby or Python and I have started to look into these languages, and they look promising, but they are not an alternative to client side scripting. Of course nothing stops me from still using JavaScript even if it turns into something “serious”, it is just not as funny anymore to use a language that once was the only language for rockstars.
I just published the first draft of a GreaseMonkey script for Twitter. I tweet frequently http://twitter.com/hising and sometimes I do it via the web (using Firefox) and there are some things I have come to be really annoyed about, first that the web do not automagically link hashtags to their search.So the first thing I did was to add this functionality. Next is to add extra functionality for following and grabbing status about tweeters in your list.
FrontEndBook.com Twitter Enhancer GreaseMonkey script on UserScripts
Pretty funny day today. It all started with Christian Heilmann posting this on Twitter:
Another simple, but very useful and needed web site: http://ismycomputeron.com
And Dion Almaer who runs Ajaxian.com followed up with the question we all had:
We just need a JSON version and then we are all set!
Of course Heilmann wrote a JSON API for this really useful service using YQL and posted it on Twitter.
@dalmaer that what YQL is for. Finally ismycomputeron.com as a jsonp api: http://is.gd/eXyo §
I figured we had to add another level of abstraction to this beast so I wrote a really simple plugin using jQuery making it easy to integrate into your web apps and posted it on Twitter.
@codepo8 Now as a jQuery-plugin http: //jsbin.com/ofiwi
After that Christian felt he had to let the world know about the R&D being done in different parts of the world on the topic “is it on”, so he blogged and tweeted about it.
But I know my script was actually not that good, it was not unobtrusive, and my fellow tweeter icaaq told me friendly but respectfully that:
@hising not the most unobtrusive script I’ve seen though
Even though my feelings were a little bit hurt, I took the time to rewrite the script in order to be more unobtrusive, and now you can find the new version here http://frontendbook.com/sandbox/is-it-on/
What to expect next in the evolution of is-it-on?
Whatever, it was good fun. More of that.
We are getting closer to 1.3. The jQuery team has just released jQuery 1.3 Beta 2.
How to provide feedback:
- Submit a bug to the jQuery bug tracker (you will need to create an account, first).
- Be sure to include a simple test case for any problem that you’re experiencing (either attach the test case or provide a link).
- Mention that you’re testing “jQuery 1.3 Beta 2″ (otherwise your ticket will get confused with another release).
- Email a link to your test case and bug report to the jQuery Dev list so that the dev team will be notified about your issue.
I found this post by Karl Swedberg on Learning jQuery interesting.
Two years ago I made the somewhat immodest claim that 2007 would be the “Year of jQuery.” Since then, jQuery’s popularity has grown in ways that none of the core contributors could have imagined. Now I’m ready to make another bold pronouncement: 2009 will be the year of jQuery UI. Here’s why:
jQuery UI ThemeRoller 2
I have just finished a very simple plugin that enables JSON-syndication for blogs running on WordPress. You can test the output on this blog.
http://frontendbook.com/feed/json/?callback=? (content-type:application/json)
[sourcecode language='javascript']
$(function(){
$(“body”).append(‘
‘);
$(“#wp-json”).css({
‘position’ : ‘fixed’,
‘right’ : ’0px’,
‘top’ : ’0px’,
‘background’ : ‘#f00′
});
$.getJSON(‘http://frontendbook.com/feed/json/?callback=?’, function(json){
var result = ‘
‘;
})
result += ‘
‘;
$(“#wp-json”).css({
‘background’ : ‘#fff’
}).html(result);
});
});
[/sourcecode]