My Little Black Book

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/

Presenter : Chris Shiflett
Twitter: @shiflett
Site: shiflet.org / analog.coop

photo credit: Chris Shiflett

Security is always a hot topic, and in today’s world it’s always good to have a fresh look at web security on the first day of the Webstock 2010 workshops. Chris Shiflett is currently part of a web development co-op Analog and has a keen interest in PHP and web security.  He is also a webstock veteran and author of Essential PHP Security.

At risk of missing any of the important points, please check out the full presentation at the end of my notes.

Fundamentals

• Defense in depth, use all safeguards available, use owasp.org.
• Least privilege, lock the system down as much as possible.
• Least complicated, complexity allows mistakes to happen.

Golden Rule, ok more like a golden acronym – FI EO

• Filter input – ensure any inputs are what you expect and no more.
• Escape output – ensure data going out is not misinterpreted.

List of common exploits

• Cross-Site Scripting – an XSS flaw occurs whenever an application takes user supplied data and sends it to a web browser without first validating or encoding that content. XSS allows attackers to execute script in the victim’s browser which can hijack user sessions, deface web sites and possibly introduce worms.
• Cross-Site Request Forgeries – a CSRF attack forces a logged-on victim’s browser to send a pre-authenticated request to a vulnerable web application, which then forces the victim’s browser to perform a hostile action to the benefit of the attacker. CSRF can be as powerful as the web application that it attacks.
• SQL Injection – injection occurs when user-supplied data is sent to an interpreter as part of a command or query. The attacker’s hostile data tricks the interpreter into executing unintended commands or changing data.
• Session Fixation – attempt to exploit the vulnerability of a system which allows one person to fixate (set) another person’s session identifier.
• Session Hijacking – session tokens are often not properly protected. Attackers compromise passwords, keys, or authentication tokens to assume other users’ identities.
• Email Injection – similar to SQL injection.
• Remote Code Injection – similar to SQL injection.

In a lot of  these attacks it is rather trivial to get the basics right by following the golden acronym FIEO, but all posible defences should be used for defence in depth.  The full presentaion goes into the ways to “Stop It”. Also do your own research to pick up on latest trends.  A rather concise resource was mentioned by @nzrob see www.owasp.org Top 10 vulnerabilities which gives large amount option to protect your application.

The full presentation can be found here,  http://shiflett.org/evolution-of-web-security.pdf.

Tips

• Specify character encoding and make sure it is consistant from front to back end.
• Get users to reconfirm password for important actions like changing password.
• Good understanding of http and session management helps with prevention.
• Keep source code short and concise.  Complexity breeds flaws.
• Human peception can also lead to perceved security breaches – see SmugMug example.
• Host static files on separate subdomain to limit session token exposure.

Final thoughs were around trending of user behaviour to identifying abnormalities and maybe using something like https://panopticlick.eff.org/ for uniquely identifying users from bots.

Chris did an excellent job in presenting the information in an easily ledgible format and good concrete examples. I am gutted I prioritised another talk over his “Security-Centered Design” talk at the Webstock conference but I’ll be sure to catch up on it when the video is available and post the link here if I remember.

Be Safe :)

After a mad dash from the airport we made it just in time for the first session on the day. We did luck out on the good seats. But not even the neck wrenching all day long could take away from the sessions content.

I was amazed at the amount of ground that was covered by Russ Weakley. Fast paced and action packed till the last bell rang at 5pm.

Areas of particular interest to me, no i might hear you say du!, but my css and html skills have been hacked togeter like a IE 5 stylesheet.

• I’m slowly getting my head around Inline, Block and Terminal Block elements. I’ll have to go check out that last one again.
• Selectors are your friend, esp descendant selectors save you from needing to assign classes unnecessarily
• Try and use your site without a mouse, for basic accessibility testing
• Check out http://maxdesign.com.au for some css goodness and examples
• display:inline = inflow, display:block = out of flow
• CSS Sprites, have all your icons in one gif file to save round trips to the server. Use ample white space(100px) to avoid strange effects when font size gets increased.
• User more of “em” unit to make site more fluid when font size in the browser gets changed.
• Russ finally got me to make sense of “li” elements for navigation and how easy they are to work with.
• Also see “Sliding Door” for nice and neat little tabs with rounded corners. a and span elements are your friends here.
• Tables in forms are _bad_ for accessablility
• Build for standard compliant browser ALWAYS!!!, you can add IE specific hacks in at IE only style sheet.
• When doing a printable stylesheet see “media” attribute of the link element.

So at the end of a long day im calling it a wrap. The sooner i go to bed the sooner i can go and have a coffee at Delux

Double Margin Float bug is quite bizarre – Russ(Sounding like the Steve Irwin of CSS)