Tag Archives: JavaScript

My Upcoming Posts

Posted on by
Reply

Below you can find the upcoming blog posts on Frontendbook.com with a short excerpt for them. Please come with input if you find some of them more interesting than others.

jQuery Plugin Template

In this article I will show how easily you can write your own plugin template for jquery plugins. Having a template for this eases development and lets you get up to speed quickly. I will also share this template for Textmate so that you easily can use the best editor out there for writing your jQuery plugins.

Extend Google Analytics

In this post I will go into details on how you can extend Google Analytics to better suit your needs. We will look into custom reports, user types, tracking external links, tracking downloads and more. After reading this article you will be able to better track and analyze the behavior of your visitors.

Writing a SEO-friendly Widget

In this article we will go through the steps needed in order to setup a SEO-friendly widget. If someone is willing to put your content on their website, you should thank them, but you should also take the advantage to send some link-juice back to your site with the preferred keywords you are targeting. I show you how.

Piggybacking API-loading

Sometimes you will have to write some generic JavaScript code that can be used in a wide variety of environments, maybe on platforms not hosted by you (read our Writing a SEO-friendly Widget article) or maybe as script used in a plugin on some CMS or blogging platform. Of course you should make use of any of the nice libraries that exists (jQuery, Prototype, YUI, MooTools or Dojo) but at the same time, you should not distribute these libraries as a lot of websites already have them included, and if not better alternatives exists. I show you how.

The Zen of Internal Linking

Why is internal linking important? I see internal linking as way describing your content in a more dynamic and interactional type of pattern, adding usability to the user. Internal linking done right is very close to the first idea of hypertext or hyperlinking. Look at Wikipedia, they have taken internal linking to perfection. This article will discuss the philosophy and zen behind internal linking and discuss why and who users and search engines likes it.

How to get started on HTML5

Posted on by
1

You all have read and heard about HTML5 and how all this new beauty will change the world. Now is the time for web based applications. Some people even think HTML5 will make native desktop and mobile apps redundant as we will be able to build all our interfaces as web based applications with rich interfaces built on the features and new standards HTML5 offers. The trend is pretty straightforward, Google builds an OS on web technology, Facebook chooses HTML5 as its common future platform, pushes it as a game platform, PhoneGap lets you build web based applications in JavaScript and build and deploy them on a wide variety of mobile platforms, such as iOS, Android, WebOS, Blackberry, Symbian. In this post I try to collect some links and articles for you that makes it easier for you to get started on developing HTML5 based web apps. In the next post I will focus more on how to get started with CSS3 and the post after that will focus on the JavaScript parts of all these new standards available.

Introduction to HTML5 by Robert Nyman

Robert Nyman has an thorough article on his blog about HTML5 with examples, pros and cons with the approach and code examples. Head over there and read An introduction to HTML5

HTML5 Demos and Examples

On html5demos.com by Remy Sharp you find some code examples, table with supported features of HTML5 in different browsers and some experiments with HTML5. The code is Creative Commons and can be forked on GitHub.

Dive into HTML5

“Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards”

Dive into HTML5 is an online book by Mark Pilgrim where he goes into different bits and pieces of HTML5. He writes about stuff such as Detecting HTML5 features, Canvas Support and Offline Support. Recommended reading.

HTML5 Showcase by Apple

Apple has made some clear statements the last couple of years supporting HTML5 over proprietary software such as Flash from Adobe. Their top sellers iPhone and iPad does not support Flash and will rely on HTML5 for richer interfaces on web apps. They have set up a landing page where you can find HTML5 demos that shows what Safari can do.

HTML5Rocks

Google has a website named HTML5Rocks where they push the new standards as well. You can find a studio with examples of what can be done with these standards, a code playground where you can easily start playing with the code behind all this fancy magic. They also offer tutorials and and interactive presentation on HTML5. Feel free to contribute code to the project to show off how HTML5 rocks.

HTML5 Boilerplate

When you just want to start building stuff that works in all major browsers there are some stuff that needs to be set up, a lot of boilerplate code, lucky enough Paul Irish and Divya Manian already did that for you. From time to time I use the HTML5 Boilerplate template for getting HTML5-frontends up quick. It is also available directly from GitHub.

Introduction to HTML5 by Mozilla

On MDN there is a list of links to different HTML5 articles covering different parts of the new standards and features that build up HTML5.

Chrome Experiments

Another Google product, focusing on what can be done with JavaScript and tools such as WebGL is Chrome Experiments – Not your mother’s JavaScript. It is user-driven and they describe the project in this way:

Chrome Experiments is a showcase for creative web experiments, the vast majority of which are built with the latest open technologies, including HTML5, Canvas, SVG, and WebGL. All of them were made and submitted by talented artists and programmers from around the world.

Internet Explorer Test Drive

With Internet Explorer 9 Microsoft finally delivers a browser that more or less supports the standards web developers and designers would like to use in order to utilize the web as it was intended. Microsoft has released a Internet Explorer 9 Developer Guide and a page for HTML5 Demos that show off the new browsers capabilities.

Acid3 Browser Test

Test how well the different browsers support a subset of the standards available for web developers and designers. Primarily Acid3 is for web browser vendors to ensure that their browsers match a set of features that enable a richer and better web.

10 Web Development Links for You

Posted on by
1

It has been a good week for all people working with web development, below I have listed some of the things I think stood out this week.

Google Chrome OS

GoogleChrom1When Google announced that they were about to launch an Operating System, a lot of people said that they “knew it” and some said that “they had to” and some reacted to that the OS was not built on Android. I felt like when I watched Sixth Sense with Bruce Willis, if I had looked close enough, maybe I could have realised that it was coming, but I was actually pretty stunned by the news that Google will enter the OS-market. The best thing from my point of view is of course the tools people will be using for building applications on top of it, plain web development tools! The Google OS is the Web Developer OS. I will write a longer post on Google Chrome OS later this week where I try to analyze how Google Chrome OS will change how we look at Web Develoment and Web Developers.

BBC Future Media Standards & Guidelines

BBC released their JavaScript Library Glow as Open Source and the library is part of a bigger web development strategy from – BBC Future Media and Guidelines.

Specialist Working Groups, with representation across the BBC, are responsible for considering industry trends and developments in their respective divisions, and defining appropriate standards in response to these developments.

From what I have seen, the documentation and size of the project can only be compared to the YUI-project driven by Yahoo.

Custom Taxonomies in WordPress 2.8

I believe that WordPress will become a big player in the Web Content Management area the next coming year. A lot of people see WordPress as a blogging platform only and complain about the code quality. I think that we are starting to see really good features such as Custom Taxonomies which opens up for very specific solutions built on top of the WordPress platform.

Web Form Validation – Best Practices and Tutorials

I have always liked the problem of client-side form validation on the web and wrote a piece on the subject a couple of years ago, best practices for web form validation, and last week I noticed a peek in traffic as I was linked (somewhat hidden though) from an article on Web Form Validation by Smashing Magazine. The link was to my form validation framework jForm who are in the idea-stage.

Interactive jQuery Selector Test

The guys at the jQuery Blog blogged about this interactive selector test script for jQuery. I like the idea, but would like to see a bigger selector (XPath, XSL, Regular Expression) as an add-on to my favorite editor TextMate

Online Regular Expression Testing

Like a natural law, you will turn to documentation when you need to write a regular expression. This online tool for testing regular expression are the best one I have seen yet, but as mentioned earlier, I would like to see a bundled solution not only for the web but also as plugin to different editors.

SlickMap CSS

Very niched design solution to problem a lot of designers, developers need to solve from time to time, how should we present our Sitemap in a slick way that do not force me to write HTML to scare the kids with. SlickMap CSS solves that problem for you. These small design solutions often becomes standard toolsets as both developers and users find it very handy to use them (Lightbox). Go visit SlickMap – A Visual Sitemapping Tool for Web Developers.

Google Page Speed

Google hired Steve Souders to work on Web Performance, he earlier worked as Chief Performance on Yahoo. Yahoo has done a great job with YSlow Firebug extension making it easier to find bottle necks and easy to solve performance issues on your website. Now Google launches a similar program and add-on for Firebug, Google Page Speed, I bet Steve has something to do with it.

Raphaël JS

This library helps you with your work online with vector graphics using JavaScript. Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. The demos are really neat. I think that the good support for different browsers together with the ease-of-use API can make this a hit. It is about time we start seeing bigger use of non-flash vector graphics online.

JavaScript Regular Expression Library

XRegExp is an Open Source JavaScript library that provides an augmented, extensible, cross-browser implementation of regular expressions, including support for additional syntax, flags, and methods. Go check it out.

JavaOne 2009 Day 2 – My Input

Posted on by
Reply

Google Web Toolkit

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.

Ajax Performance and Tuning

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.

Creating Compelling User Experience

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.

Functional and Object Oriented JavaScript

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.

JavaOne 2009 Day 1 – My Input

Posted on by
Reply

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:

Ajaxifying Existing Web Applications

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?

Architecting Robust Applications for Amazon EC2

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.

State of the Open Web

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.

Presentation at SlideShare

Ajax vs Java FX Technology

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.

Cross-Browser Vector Graphics with the Canvas Tag and SVG

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.

Real World JavaScript Evolution

Posted on by
3

The History

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:

  • Attached events inline
  • Used document.write
  • Alerted when something went wrong (or well)
  • Directly addressed DOM-objects and not trying to create abstract solutions (who needs them! bah!)
  • Used UPPERCASE TAGS
  • Looked at the user-agent string to try to parse operating system
  • Forked element detection depending on browser and DOM.
  • Created recursive functions for finding LAYERS in Netscape 3

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?

The Beginning

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.

The Dark Ages

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.

A New Hope

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:

  • Birth of the term AJAX
  • Ruby on Rails bundling Prototype and Scriptaculous for AJAX and effects
  • Standard DOM (more or less)
  • Birth of generic libraries such as jQuery, MooTools, Dojo and likes
  • Adsense from Google
  • Progressive Enhancement philosophy

All this made JavaScript an natural and important part of the front-end for all web based solutions.

The Enterprise

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.

Epilog

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.

Weekly Best of – Selected Links

Posted on by
Reply

Auto Resize jQuery Plugin

I really like Facebooks implementation of automatic expanding textareas. This auto resize plugin for jQuery helps you add that neat usable effect to your forms.

Typography on the web

Smashing Magazine has a really good list of resources for web typography.

API for Location based on IP

I think we have only seen the beginning of location-based web-apps. This little GeoIP-API helps you geographically locate your visitors.

Screen Scraping with CSS Selectors

This Simple HTML DOM Parser written in PHP makes it easy for you to screen scrape content. For all jQuery and CSS selector fanatics out there, it will be great news for you that it supports CSS Selectors and it supports invalid HTML (if it wouldnt it would be pretty useless).

How to create a leaner User Interface

There is a good list on Webdesigner Depot about different techniques you could use in order to de-clutter your user interface.

Library Independent JavaScript

I found this article by James Padolsey interesting, because I think it is a growing problem. People tend to write jQuery, Prototype now a days, not JavaScript, this is ok for me, but when you are building something that other people will maintain and develop it may be interesting to try to find a development model that are framework agnostic. James has some examples in this article how to create an absctraction on top of your favorite javascript library.

Free Database for IP to Country

Maxmind has free databases for retrieving country and city from the users IP-address. I am using this on a number of websites and believe it is a very good tool for creating more usable web sites and easier to target (and split) advertising.

One Trillion Dollars

One trillion dollars is a lot of money. This article shows you how much it is in real life in volume. Amazing.

Do you have more links I should share or look at? Follow me on Twitter and share your favorite links.

GreaseMonkey Twitter Enhancer

Posted on by
1

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

WP-JSON – JSON Syndication for your WordPress Blog

Posted on by
1

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)

Find out more

Why

  • I think JSON is a very powerful way to syndicate content and data
  • I think we should not need to write stupid proxies for aggregating feeds via JavaScript
  • Opening up your data is a good thing
  • I could not find a working example that was a plugin, all solutions I found was hacks in the actual source code of WordPress.

jQuery Example Retrieving JSON

[sourcecode language='javascript']
$(function(){
$(“body”).append(‘

Loading JSON

‘);
$(“#wp-json”).css({
‘position’ : ‘fixed’,
‘right’ : ’0px’,
‘top’ : ’0px’,
‘background’ : ‘#f00′
});
$.getJSON(‘http://frontendbook.com/feed/json/?callback=?’, function(json){
var result = ‘

‘;
$(“#wp-json”).css({
‘background’ : ‘#fff’
}).html(result);
});
});
[/sourcecode]

Download