reMIX South, Web Design

The HTML5 Canvas and Friends (with jokes)

August 6th, 2011 by Matt Haff

Speaker: Loren Norman

Introducing Canvas

• Width and height is required to put inside the <canvas> tag.
• <!– if not supported comment will display –>
• Coordinate’s 0,0 is x,y
• rectangles are the only shape built into the canvas

Paths

ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.closePath();

Arcs

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

Curves

two different types of curves are available, quadratic and bezier

ctx.quadraticCurveTo(xp1x, xp1y, x, y);
ctx.bezierCurveTo(xp1x, cp1y, cp2x, cp2y, x, y);

Drawing Text

ctx.fillStyle = “blue”;
ctx.font = “24pt Helvetica”;
ctx.fillText(text, x, y);

Drawing Images

var image = new Image();
image.src=’myImage.png’;

image.onload = function() {
ctx.drawImage(image, x, y);
};

// scaling the image
ctx.drawImage(image,x,y,width,height);

// slicing images
drawImage (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Animation

//nothing canvas-specific
setInterval(animateFunc, msBetweenFrames);

Transformations

//move around
ctx.translate(x, y);

//rotate around
ctx.rotate(radians);

//shrink or stretch
ctx.scale(xMultiplier, yMultiplier);

// store/recall a transform state
ctx.save();
ctx.restore();

Other Stuff

• SVG similarities?
• rendering to/from images
• design patterns
• awesome libraries

Book

JavaScript: The Good Parts

What do you think?

reMIX South, Web Design

jQuery Best Practices and Key Techniques

August 6th, 2011 by Matt Haff

Speaker: John Agan

Sorry for all the bullet points, but at least it’s straight forward

Negative Effects

• Sites end up with multiple scripts everywhere and no framework to keep it in sync
• Code becomes hard to follow and maintain
• jQuery becomes overused in place of well formed HTML and CSS

Best Practices

• Break up big functions
• Don’t nest multiple functions
• code is cleaner
• easier to follow and maintain
• allows for reuse of code / DRY (do not repeat yourself)
• debugging is made easier
• Stop writing HTML blocks in JavaScript strings
• It’s hard to work with
• multiple nested elements will make it worse
• unnecessary string concatenation
• Caching Your Selectors
• be aware of the performance hit when overusing selectors
• assign selectors to variables rather than reselecting – var selector = $(“element”)
• start with the known parent elements and use them as the context - $(selector, context)
• every time you write a selector, it will requery it
• Writing Better Performing Selectors $(selector, context)
• ID & Element Selectors are the fastest – $(“#ID, Element, form input”)
• Class Selectors are slower – $(“.ClassName”) doesn’t work in ie5- ie8
• Pseudo & Attribute Selectors are the slowest – $(“:visible, “checked, [attribute=value]“)
• Write Better HTML and CSS
• jQuery should provide the functionality, not the styling and layout.
• Use CSS classes for style, rather than jQuery helpers like .hide(), .css() and .hover()
• Think about your selectors when writing the mark-up
• Of course, there are always exceptions

Key Techniques

• Take Advantage of Data Attributes $(“element”).data()
• data-[anything] = “value”
• “class” is for style, not data
• jQuery 1.2.3+ supports .data()
• Compliant in HTML5 spec
• Valid on any element
• $.data(“#id”, “key”, “value”) is much faster
• Embrase Unobtrusive Javascript (UJS)
• don’t mix it in with your HTML elements ex. <input type=”button” onClick=”…” /> 
• Separation of functionality (the “behavior layer”) from a Web page’s structure/content and presentation
• Code maintenance and deployment is simplified
• Debugging can be easier
• Optimizing Event Delegation
• An efficient way to watch for an event of a large number of elements
• Works by binding to a point father up the DOM tree and watching for bubbling events
• Not all binding methods are equal in performance.
• .bind() – Listens for events on existing elements
• .live () – Listens for events on existing and future elements, but watches at the top of DOM tree
• .delegate() – Listens for events on existing and future elements, but won’t listen past context
• Utilize Custom Events
• Update multiple components asynchronously
• Enables your code to be event driven
• Allows for easy extensibility
• Stop Editing the DOM Directly
• Multiple .append() can become very slow
• Use .detach() to manipulate elements offline and then .append() when done
• Use createDocumentFragment() to build your HTML before pushing to the DOM
• Know Your Scope
• Avoid global variables
• Maintain scope with $.proxy()
• Use auto-executing anonymous functions when possible
• Use The Native API When Possible
• Sometimes it’s faster to just use JavaScript
• jQuery does it’s best, but it is still another layer and slightly more overhead
• Wrapping an element for just an attribute can be expensive.
• Think About The Big Picture
• Don’t code for just one element
• Use a framework to manage interactions and data
• Breakup JavaScript into multiple files
• Minify when deploying to production

What do you think?

reMIX South, User Experience

Experiencing Monkey Love: MailChimp’s User Experience

August 6th, 2011 by Matt Haff

Speaker: Jenn Downs

Add some creative fun to the UX

• Freddie coloring book
• Monkey hats
• monkey shirts

UX isn’t just about design… it’s how people work with your company/product.

• Ben saw someone at a restaurant wearing a mail chimp shirt and he paid for their meal
• The morning after a after-party they called the local coffee shop and said that anyone with a mail chimp temporary tattoo or t-shirt got a coffee on mail chimp.
• when making customer stories, instead of highlighting what you did for them, highlight how awesome the company is.
• get feedback from people in their environment and ask/watch/see how they use your product/service.
• keep it human!
• your goal should be to build people up and loving them a little more and letting them love you back.
• if you have a sign up you should test this constantly. “getting started”

User Experience Testing

• usertesting.com – good for immediate feedback but the users are “speeding” through it so don’t completely rely on the feedback.
• silverback – screen recording.
• camtasia studio learning center.
• Jing
• Vimeo, if you transcribe it and use the time it will let you jump to the right spot of the video

What do you think?

reMIX South, User Experience

21st Century Design

August 6th, 2011 by Matt Haff

Speaker: August de los Reyes from Artefact Design

Video: Original talk

Zombies, Werewolves & Vampires

Recent cultural phenomenon

20th Century

• Zombies – neither living nor dead, living and dead, hybrid model, ambiguity, play between living & dead
• Vampire – kill the vampire, end the ambiguity, decide between life and death, striving towards stability, no change – back to normal
• fight change

21st Century

• true blood, twilight, teen wolf, vampire diaries, ugly americans
• we must learn to live with the ambiguity of constant change – we can find comfort and happiness in doing so.
• embrace change

The A-Team

They improvise solutions, weapons, make things happen with whatever is available. People combine elements to make new experiences.

Harry Potter

• About learning
• early example of 21st century learning model
• books and movies convey the story
• wikis, blogs, forums, web sites complete the model
• no memorization required.

20th Century

• The endpoint of the 20th century learning model is efficiency. This value is translated into software design: time to task, number of clicks to goal, series of steps to be mastered.
• kuleshov effect – the meaning comes from the structure.

21st Century

What do you think?