Posts Tagged ‘libraries’

On being cleverly lazy – my talk at the WebExpo in Prague

Monday, October 19th, 2009

I am currently in Prague, Czech Republic and gave a talk on re-use, professionalism and ease of development at the WebExpo.

Webexpo Prague by  you.Webexpo Prague by  you.

Today I am going to have a longer chat with the people at the University about accessibility and creating a WAI-ARIA enabled framework for web applications.

For now, here are the slides of the WebExpo presentation and the audio recording of the talk. There was a video streaming, too, and it is up to Microsoft now to get this out as a recording.

Slides

Audio recording

You can download on being cleverly lazy as an MP3 - 36MB or see other audio options on archive.org

Notes / Transcript

Today I will talk about the fact that being cleverly lazy will make you a better developer.

First of all, I am Chris, a developer evangelist. This means I am a developer who evolved into a role where I can tell other developers how to have an easier life and tell my company what other things developers would want to make it even easier for them. I’ve written a developer evangelism handbook if you are interested in learning more about this role and why your company would benefit from having someone like me.

Cleverly lazy

Let me quickly define cleverly lazy here. Lazy is “I don’t want to do it” wheres cleverly lazy is “I don’t want to do that ever again so I do it right this time”. In development the difference between lazy and cleverly lazy is that lazy products do the job but are impossible to maintain whereas cleverly lazy products do the job, are easy to understand, extend and are built on a solid base.

Evolving the web

Our job as developers, designers, planners and organisers of web products is to evolve the web. We should have the chance to concentrate on building solutions that make people happy to use them rather than having to work out how one browser or another fails or how we convert data into a format the web technologies can display and understand.

In order to achieve this, we need to be free to do new things rather than worrying about the past.

The feature loop trap.

One problem is that as developers, we stand in our own way. The biggest trap that there is for developers is the feature loop:

  • As developers we love to take a complex problem and tackle it. We love solving problems, that is why we become developers.
  • We then normally and quite quickly find a simple solution to the complex problem.
  • We then release the solution to the world and get feedback.
  • This is where it goes pear-shaped. We get stuck in a feature adding and feedback loop until the elegant, easy and simple solution becomes a complex one again.
  • Other developers will find our former simple solution and will think “hey, this is a complex problem, let’s make that easy!”

This keeps us from evolving as web developers. We don’t develop the web, we fill it up with solutions to the same problem.

My solution

The next issue is that as developers we love to find solutions ourselves and not use other people’s information. We appreciate other people’s work but in the end we only trust ourselves to come up with the best solution ever.

Short attention span

The problem with finding and building own solutions is that we tend to lose interest in them really fast and then leave them behind as we already another complex problem to simplify. This leads to lots of half-finished solutions on the web that don’t get any love any longer.

Unmaintained code is a security problem

All the code that is not getting any love stays unmaintained on the web and becomes a wonderful attack vector for new security threats or vulnerability exploits. Nothing beats being up-to-date when you want to build secure systems.

Things web developers must know to do their job.

Looking at our job as web developers, here are the things you have to be aware of to build things that people can use.

  • The technologies involved
  • How browsers deal with these technologies and how they fail to support them
  • Security concerns and attack vectors
  • Usability and accessibility of the product
  • Internationalisation of our products
  • Performance concerns
  • Multiple platform support
  • Flexibility of the interface

Browsers suck

Browsers are the bane of our existence as they are unpredictable, unreliable, there are hundreds of them (in various configurations) and they are not being updated by people out there.

That is a lot to know and deal with. The good news is that you don’t need to know all of it.

Good developers are like librarians

Librarians are great people. Instead of knowing everything that is in the library they know exactly where to find the information to solve a problem. As a cleverly lazy developer you should do the same.

Build on a solid foundation

Web development libraries came around for one simple purpose: Make our life as developers easier and our work as web developers predictable. They make browsers suck less and work around differences in browsers. They allow us to use web standards and get results instead of bugs to fix.

Build with components

If you build web applications and interfaces take a look around for what has already been created for you. Almost every library comes with widgets that are tested, work for everybody regardless of ability and can be changed to your needs. If you build your own component you are very likely indeed to forget some very necessary functionality that a collaborative product already had put in.

Use a good debugging environment

You can’t write great products without being able to know what is going on. Luckily enough nowadays we have great debugging tools like Firebug, Yahoo Profiler, JSLint and validators of all kind.

Plan for extensions

If you build a solution, plan a way so that people can extend it without having to change the central code. The central code should only have to change when there is a new browser or platform to be supported or there’s a security fix. Other than that people should be allowed to extend by listening for events or using other API hooks into your product.

Read, use and write documentation

If you build something, document it. There is no such thing as code that explains itself, that is a myth and an arrogant one at that.

Use the web

One of the really cleverly lazy things to do these days is to use the web to build your product rather than building your product and putting it on the web. Distribute your content on specialised systems like Flickr, YouTube, Delicious and LinkedIn and then put it together in a centralised CMS. That way your site will be easy to maintain and not vulnerable to a single point of failure.

Use APIs

To achieve this you need to use APIs. APIs can take a lot of your time to read up on and understand which is why it is a good plan to use YQL as an in-between to avoid going crazy on authentication and understanding what parameters go in and what data comes out.

An example

As an example, let’s take a look at a web site built solely from data on the web, using YQL and PHP.

Thanks!

Thank you, remember if you use what is out there you have time to be creative. I want us to write code most of our time, not to fix bugs.

Presentation: Professional web development tools

Sunday, May 31st, 2009

Last Friday I went to sunny Southwark to go to IPC media and gave a brown-bag presentation. The topic: IPC wanted to have a chat about using libraries and why YUI might be a good choice.

I covered the fact that almost every web site out there is broken, that the reason for that first and foremost is bad communication in development teams and that users, developers and clients are all unhappy about it.

I explained that we develop for an unknown environment and that the development tools we have are just not good enough (albeit getting better every year).

I lamented the lack of documentation and handover procedures and that as developers we are inclined to build small solutions for one problem over and over again rather than contributing to a larger framework of solutions.

I pointed out that we tend to go from visual display to functionality rather than the other way around which is why we produce inaccessible and overly complicated products.

As solutions to these problems I showed how YUI is built and maintained, how its development tools allow you to build in a predictable fashion and that it does very well what every library out there should do for you: making web development easier and less random.

Slides

professional web development tools

Here are the slides of the talk:

Audio

I also recorded the talk audio and you can download the recording at archive.org. Listening to the audio it sounds a bit of a rant, however it is not, I am just very passionate about the subject of professional web development and making the internet the #1 media :).

Notes

Professional Web Development Tools

Almost every web site is broken.

If you look around the web you will find that almost every site is broken in one way or another. This starts with small display glitches and ends with the sites being inaccessible or not working for users out there.

This is bad.

This is really bad. It hurts the web as a media. We re-invent the web every year as we just cannot seem to get it to work for us.

Unhappy visitors.

Broken web sites lead to unhappy visitors. The real problem there is that unhappy visitors do not complain to the people who could fix the issues. Most visitors either think they’ve done something wrong or just try to find another site that offers the same content and works. Both of these visitors will never come back. Other visitors complain but get stuck in help desks and never get their problem fixed as it is highly unlikely to ever reach the developers who could fix them.

Unhappy developers.

It doesn’t reach the developers as they are too busy with building new functionality and other sites. If we don’t build new things all the time we are neither happy developers nor seen as efficient employers. Fixing things isn’t sexy.

Unhappy clients.

This leads to unhappy clients. If a client realizes something doesn’t work on the site they paid good money for they want it fixed, regardless of how fringe the problem is and if it only shows up on their machine with their (most of the time outdated) setup.

Reasons

There are many reasons for the broken web, and nearly all of them are our own fault or based on misconceptions.

Lack of communication

Probably the biggest problem of web development is that the different parties involved do not talk to each other or know each others tasks. Developers think they know more than designers, designers think developers are not creative enough in using the arsenal at their hands and product managers see the brand more than the media and are oblivious to the technical boundaries and freedoms the internet gives us. Furthermore we all have our deadlines, deliveries and reports to make and write which takes up too much of our time.

Development environment

Web development has the most terrible and undefined environment ever. There are thousands of browser configurations and versions, each of them failing in different ways. There is a lack of good error reporting, difference in server configurations, connection issues… you name it. Our development is hit and miss and we fix more bugs than we write code.

Piecemeal development

As web developers we always try to build small solutions that solve a problem we have right now. We don’t really consider that all things on a site and across sites should work smoothly together. We’ve been disappointed so many times that we don’t really believe in that.

Lack of handover and documentation

The piecemeal development also means we don’t really document or hand something over. As the next developer is most likely as inclined as we are to build something new (as it surely will be much better than the crud we are asked to maintain) there is no point in that.

Interface to functionality

The biggest issue is that we start with the interface and the cool effect and then work our way down to what the user needs to achieve. We tend to forget very fast that not everybody has the same experience or could benefit from the great shiny interface we want to build. There is a skeleton under every web application and if that skeleton is weak it will break no matter how pretty and shiny we make it.

Solutions

There are solutions for all these issues.

Back to Basics

The first thing to think about is going back to basics when it comes to development. How does the web work, what is the most basic way of reaching a certain goal.

http://uk.tv.yahoo.com/#yeug-search – is a search box with several options. It used JavaScript to change the form’s action when any of the links were clicked.

Task: Define type of search, enter search term,submit form.

There was no need for JavaScript – all we needed was a radio button group and doing the forking on the backend. Notice that the fieldset, the options and the search button form a logical sentence. This is very important for accessibility.

TV channel programme

http://uk.tv.yahoo.com/#ytv-listings – the hardest interface to build as a web developer. Looks like a data table but could have shows that are one minute long! This would mean the table has to have 180 columns and use colspan on every table cell.

Analyse what data you display, and find the easiest way to show it.
Then make it look the way you want it to.

The information the data displays is much easier shown as headlines and ordered lists. CSS does the rest.

Build things people want and know how to use.

Here is where Yahoo offers their findings of user testing with real end users – http://developer.yahoo.com/ypatterns. There is nothing that can replace this knowledge and it is normally very expensive to come by. Before you even think about building an own interface to solve a problem users have to solve, give this a whirl.

Using technology for good

Flash video players are to date the best way to show video – http://uk.video.yahoo.com/. However, they have no reliable keyboard control. By providing buttons that work in HTML and control the video via an API you can make it accessible to all.

Aiming for excellence.

This is the new Yahoo currency converter. It is an amazing piece of web development. It works for all users (including screen reader users) and makes it easy to convert currencies.

Here we explained in detail how it works and the approach we took in developing it.

Removing browsers

The biggest step to professional development and keeping our sanity is to get the random element of browsers out of the equation. You cannot support all the browsers in the world and neither should you.

The graded browser support is a framework to define which browsers you test for and get the full experience. Unknown browsers only get what works in them – no JavaScript and even more obscure browsers get no CSS either.

Making browsers behave.

Libraries have one job: make browsers work. Support is the most random thing in our world as web developers therefore it makes a lot of sense to put all the dirty hacking and fixing of wrong browser behaviour into libraries. YUI is what Yahoo built and uses exactly for that purpose.

First issue is that every browser has an internal style sheet that renders HTML. All of them are different which makes it impossible to develop a reliable look and feel across browsers. YUI Reset works around that.

The same applies to typography. By using the YUI fonts CSS you reset the browser typography to allow you to define pixel sizes as percentages, thus having control and allowing users to resize the fonts.

The CSS grids allow you to create multi column layouts that work across all the A-level browsers easily and reliably. Source order independence comes free, too.

If you are lazy, you can also use the grids builder, define your layout, hit the show code button and get a copy + paste HTML document. The CSS will come from our CDN, which means it gets delivered to your customers from a computer near them geographically.

Doing one job at a time.

YUI does what we as developers would love to be able to do: concentrating on one task at a time. Other than “catch-all” libraries, YUI is cut up into several components, each doing one thing. You can mix and match them to your needs.

DOM access.

One of these components is YAHOO.util.Dom which gives you access to everything that happens in the DOM and convenience methods around the more annoying things the W3C DOM API has.

Using this I can write a script that shows the perfect YUI grid for every size of browser.

Predicting issues and fixing them.

One thing you should do as a developer is being paranoid about things breaking. You should be able to see what can go wrong and set traps for it not to happen.

position:fixed is sexy!

Positioning elements fixed can be very cool. Say for example you have a long document but you want to show the navigation next to regardless of how far down the page you scrolled. Another cool use would be a comments field that allows you to copy and paste quotes from the document.

Positioning the navigation as fixed makes it always visible on the page.

However if the browser window is too small there is no way to reach the elements below.

This small script fixes this problem. Using getRegion I can get the size of any element on the page and getViewportHeight() gives me the available space. If there is more space than needed, fixed can be applied.

Once fixed, let’s re-use.

Using the YUI components we build all kind of widgets based on the design patterns.

Using these free widgets you can re-build yahoo mail yourself.

Re-use means the ability to style differently.

All the widgets are style-able using CSS. You don’t need to know JavaScript or change their code to make them look completely different.

Document your work.

The YUI comes with extensive documentation, both created from comments in the code (JavaDoc style) and step-by-step tutorials. The system that generates the docs from the source code is also available as open source.

Learn by example.

YUI comes with over 300 copy and paste examples of how to use the different components and widgets. As this is how most developers work, we realized that this is a very important part of our success.

Allow for extension.

YUI uses custom events for all of this. This allows you to completely separate your own code from the library. Instead of having to call library methods or call your functions from the library all you need to do is to fire or subscribe to events.

Know what is happening.

Not every browser comes with a great debugging suite like FireBug or Opera’s Dragonfly. This is why Yahoo comes with a logging control.

The logger allows you to debug in any browser that the YUI works in. In addition to this all the YUI widgets and components are shipped as debug versions which report everything they do to the logger. This gives you full control over what is happening and when.

Monitor performance.

The YUI profiler allows you to monitor JavaScript performance – even of non-YUI scripts.

Test before you write.

The same applies to the YUI Test suite. Using this you can apply test-driven development methodologies to JavaScript development.

YUI 3

YUI3 is the new version of YUI, there are many speed and size improvements and we changed the way YUI works significantly to make it more secure, performant and allows you to write much less code to achieve your goal.

Performance

JavaScript performance is one thing, but in order to deliver really successful web sites there are many tricks to apply to create happy end users. The exceptional performance section of the Yahoo Developer Network has them all listed.

YSlow – a Firefox extension allows you to test any web site against these tips and rules and you get immediate, relevant information how to improve the performance of your site.

YUI 2.4.0 is out – CSS Selector engine, JSON support, dynamic CSS/script getter and lots more

Wednesday, December 5th, 2007

It is quite cool to see that your feedback is being implemented in something as big as the YUI. With every release the team excels itself building new components but also fixing and changing the existing ones.

Part of my job is to test the YUI for the European market (as we by default develop in 5 languages and encounter totally different issues) and in Asia (oh well, obvious that there are differences) and I am happy to say that all the problems we found got fixed and several of our suggestions implemented in this release.

While a lot of this is under the hood you can also see some new components in the 2.4.0 release:

  • Probably the most anticipated step is YUI getting a jQuery style CSS selector engine which allows you to quickly access the document without having how to traverse the Dom with native functions.
  • For those who need to work with numerical data a lot, the YUI now has a Flash charts component which allows you to create fancy pies and graphs easy
  • The new get utility is not the same as YAHOO.Dom.Get() but allows you to load scripts and CSS on demand after the page has been rendered by creating new nodes and having control over what has been loaded. This is quite handy in terms of page performances and I waxed lyrical over that in the past.
  • Those who love to take your Script to the garage and give them an intensive test-run will love the new Profiler which profiles JS in a browser environment
  • And last but not least we finally proclaimed our undying love to the JSON format by adding a new JSON component that allows you to stringify and validate JSON you retrieve either with dynamic script nodes or AJAX.

Again, under the hood, there are a lot of changes you cannot see but result in much better performance, especially in the DragDrop and the Rich Text Editor Control.

[tags]YUI,libraries,upgrade,news,json,selectorengine,flashcharts,charting,profiling[/tags]