Introduction to jQuery and jQuery UI

Willie Goosen — Sun, 21 Feb 2010 02:24:27 +0000

Presenter: John Resig
Twitter: @jeresig
Site: ejohn.org
Lead Developer and creator of jQuery, and a JavaScript Evangelist at Mozilla

photo credit: drewm

Second day of workshops at Webstock 2010 was first time i had a look at jQuery, i have had a play with script.aculo.us and mootools in the past, so jumped at the thought of a workshop with a creator of such a frame work, as they make JavaScript sooo much more bearable, especially for someone with a Java background.

My respect only grew for John as he did a 3 hr live demo of jQuery and jQuery UI, with only one minor hiccup which he fixed within minutes….. a true JavaScript ninja.

In essence jQuery it looked as simple as this:

Find object
Do something with the set

Couple of bits that got me interested:

Lots of people agree jQuery is awesome, its used by Microsoft, Google, Mozilla, IBM, Amazon, HP, Intel, Ruby on Rails, WordPress, Django
Selectors uses CSS like syntax
Good looking, easy to read documentation that has recently been reviewed
Fails gracefully, if you layer jQuery over and already functioning website
Big community and plugins(use with care)

My rough notes on the presentation on the points that stood out to me, for the full presentation see the link at the bottom of the page.

Finding things

CSS Selectors with some special selectors like :first :hidden etc
jQuery Methods
Both are methods used for traversing the DOM
Can be chained together
```
$("div").hide().css("color","blue");
```

Chained Traversal ( pretty cool )

$("button")
  .parent().css("border", "3px solid red")
  .siblings().css("border", "3px solid green");

Doing Things

Manipulation
Event handling(normally user actions)
Live Events for current and future elements(ajax)
Effects .animate ( pretty nice )
Helpers to load xml, json or html with ajax

Plugins

Strong Community
Recomended ones were
- jQuery UI
- Validation
- Ajax Form
- jqGrid
- jQuery Tools
Themeroller – mechanism to style jQuery UI

Tips

Write in HTML first then layer jQuery over the top
Apply your jQuery to a fully functional site, this way if JavaScript fails your site is still fully functional
“return false” Disables the default old behavior
With server-side code, add conditional to check it the “ajax” header is present, if so strip off header and footer code and only display id=content, to reduce server traffic
Look at using jquery off CDN minimised and gziped optimized – on Google’s CDN, if its good enough

As a round up I would definitely consider using jQuery on my next project, as with all frameworks im sure there will be some limitations as this kind of ease of use doesn’t come without trade-offs.

The full presentation can be found here http://ejohn.org/apps/workshop/intro/

Day Two Agile Goodness

Willie Goosen — Wed, 18 Feb 2009 05:58:30 +0000

Presenter M. Jackson Wilkinson
Twitter @wafro
Site: www.jounce.net
Developer(Python), Project manager, Agile Man

So i went into this presentation having seen a couple of agile projects in practice, and not quite sure what it was all about i did a couple of googles some time ago. When this opportunity came around i thought it would be rude not too.

Jackson was a great presenter and covered a wide range of topics from various peoples perspectives in the project team. I will not try and repeat it all as i would be here forever and its a bluebird day in welly so i’ll keep it short.

- Collaboration is imperative
- Embrace change
- Choose the team very carefully
- Everybody on the project team must “buy-in” to the goal
- Attention to the technical detail not just a quick hack as more time is spent on the development rather than the process.
- Release _working_ software often to the client to show progress. Not every cycle has a release

We brushed over the how the process works :

1. Cycle Zero
- Research
- Product Design
- Development Prep get ready to start coding
- Moodboards(very cool) for quick look & feel concepts
- Very importantly Defining Done

2. Cycle Planning
- Develop User stories eg. User can search for a photo.
- Test planning – asumption, success criteria, out of scope bits
- Use and index card to capture information gathered so far.
- Estimate is placed on each card and determined which cycle its targeted for.
- Use 1.2.4.8.16.32.64 for giving each storie points.
- Find your teams balance on how many storie points you can complete in a cycle
- Keep team rolling with backlog of the easy 1.2.4 tasks

3. Collaborative UX/UI
- Get business and designers to build mock ups together
- Quick and on paper gives you LOFI wireframes
- You can do more detailed wire frames but risk quibbling over detail
- Mock ups avoids confusion and developers love them

4. Daily Progress
- Focus on YTB, yesterday, today, blocks
- Use time keep it short and standing
- Just Google “scrum” it’s all there i promise
- there are all sorts of rules but use what works.

5. Pairing
- Thinker and Checker and the Does/Executor
- Development – Beter code less bugs
- Wireframes – review asumptions and help brainstorm

6. Test Driven Development
- Is a must
- Every function must have a test
- Selinium and Windmill for frontend test automation

7. Continuous Integration
- Automate Release cycle (cruzecontrol or hudson?)
- Frequent Release cycle (dayly, hourly)
- Check out, Build, Run Test, Notify if errored, Deploy(in Test)

8. Retrospective
- just before start of next cycle
- where are we at now
- reflect on previous cycle
- review story points completion
- review pairing arrangements

Appendix – Artifacts
- This one is still baffeling me as the whole point of agile is to just get into it, and only document what will be reused. But this means that some desision points may be lost because of lack of documentation.
- The code should be self commenting plus enough comments to make the rest understandable, frequent refactoring and good comments should improve this further
- Project wikis was also suggested.
- I do like documentation, so im unconvinced on this point of limited documentation

An interesting new term that was topic for a bit of discussion as it wasn’t on Google yet was “Layered Progress”
It is when you do development for your whole site in high level wire frames in the first pass. Next stage as they become available replace high level wire frames with more detailed ones, and as the final functional pages are available replace them again.
Implementation of this is up to you, if you hunt hard enough something like this may be found somewhere.

Another new one, for me at least, was “Coding Dirty”
It is when you developer builds the functionality and designer does the design afterward. This is fraught with danger as if your html/css is not marked up well it will produce a sub optimal result. Some people in the group has had success with this order.

Soo final thoughts. I’m not totally sold yet, there are some facets to it that i like but i will chew on the methodology a bit longer.

To give it appropriate visibility in an organisation you will need to try it on a small not critical but highly visible project to get the hang of it and get buy-in based on its success.

Now for some rest before day three AJAX and Accessibility shenanigans.

My Little Black Book » day2

Introduction to jQuery and jQuery UI

Day Two Agile Goodness