[2013–09–10] jQuery Conference 2013: Austin

Because the formatting in Medium is so limiting, find the full version of these notes in this gist. This is also from 2013, so a lot of this isn’t relevant anymore, just want to have it in the medium account.

10 Sept 2013

The State of jQuery — Dave Methvin

• Bower and NPM dependency management out next month.
• Finding forced layouts
• Full page forced layouts occur every time you ask the browser if we have enough content during an infinite scroll. That’s a lot of work on the browser.
• Alternative: Instead of asking the browser every time, determine the height of a row, and track how long we’ve scrolled. Ex: 200px high, the page scrolled 740px, we need 4 more rows.
• When looking for elements, using class names such as .hidden will provide faster selection than :hidden as it doesn't need to check style rules or anything else, it only has to inspect the DOM tree. It won't force a layout, works well with styling, and is battery efficient.
• Throttle high frequency events like mousemove or scroll; handle with requestAnimationFrame
• Moral: Know your tools. Modern browsers have the tools to find these issues. (Even IE… 11)

Digging and Debugging — Brian Arnold

Non Technical Tips

• Read Javascript: The Definitive Guide. Not just The Good Parts.
• Verbally express what the problem is, even if you don’t expect help from that person. It helps to give you clarity on the problem.

Understand the Tools

• Chrome is the most feature rich debugger.
• $0 is an alias in the Chrome command line to the most recently inspected DOM node. When you select something else, it becomes "$1" and so on.
• $_ declares a variable for the last command so that we can use it and inspect it's DOM structure easily. This is useful in comparison to $('label') which is an invocation, which we cannot use command line autocomplete on.
• console.group() - allows you to group multiple log statements so that you can expand and contract them.
• Using dir($0) allows you to view any element as more of an object which makes it a bit easier to read.
• keys(jQuery) will give you an array of all the keys in the command line.
• copy($_) gives you a string based representation of the last object and copies it to your clipboard. You can pass this through JSON.stringify() and get a JSON representation of that data.
• Using the debugger gives you great access to the console executing in the proper context.
• You can set conditional breakpoints in Chrome debugger so that you only stop if a given condition is met.
• You can also set breakpoints on the DOM, so for example, you can set it such that you will get a break when any subtree element is modified.
• XHR breakpoints can be set when the URL contains a given string as well.
• Using pretty print can help to make minified source a bit more readable.
• Using profiles, we can record a bit of time on the page, and get a detailed result on processing. This gives you a very clear visual as to where your time is going.

Techniques

• Private Mode — no history, cache, cookies.
• Use a style guide. Look into things like Idiomatic and EditorConfig.
• console.count("functionName") will show you how many times a function is invoked.
• Which code is mine? It’s often an anonymous function as it is often used as a callback in a library.

Resources

• Discover DevTools
• CommandLine API (Chrome)
• Console API (Chrome)
• Command Line API (Firebug)

Getting the Most out of jQuery Widgets — Richard Lindsey

• Think small. Think modular. Elements, cells, compounds, organisms.
• Keep them decoupled. Subscribe and Respond. Communicate through events.
• Observe and mediate. Bundle smaller modules, provide a public api, direct references only go downward, each layer consumes lower-level events and publishes upwards.
• Make it testable. Does it perform operation or calculation? Is it part of the widget’s public facing API?
• Public functions should have unit tests, store prototypes in object namespaces, test logical functions separately.
• Summary: Only make componenets as large as they need to be. Keep them as decoupled as possible. Consume downwards, communicate upwards. Make functions and options granular and robust for potential overrides. Test, test, and test. Make every attempt to ensure backward compatibility.
• Presentation slides

Using jQuery Mobile to Build Device Agnostic Pages — Asta Gindulyte

• Paper
• Challenges: screen-size, touch, content organization, and testing.
• Screen size variety challenge — no scroll, and font size big enough to read.
• Touch challenge — buttons big enough to touch, swipe and other gestures should be intuitive.
• Content organization challenge — showing/hiding based on screen size (sometimes people with small screens seem penalized.). Having different layouts from large to small screen may confuse users.
• Device testing challenge — no free lunch, you really need to test on all devices to make sure everything is working as expected. Emulators like screenfly can help.
• Why jQuery Mobile? Cross browser, cross device, touch friendly, responsive, layout and theming engine, ajax page navigation and great documentation.

Grunt Automates All of the Things … What’s Next? — Aaron Stacy

• Don’t just build, ship.
• Releases should not be “tribal knowledge”. If one of your teammates was going to get hit by a bus, could you still push a release?
• Continuous integration — everything you do when you deploy, except all the time, every commit.
• TravisCI as an alternative to Jenkins

Continuous Integration Example

Source

Simply Pushing the Web Forward — Kris Borchers

Slides, AeroGear

• APNS (Apple Push Notification Service [IOS, Safari])
• GCM (Google Cloud Messaging [Droid])
• MPNS (Microsoft Push Notification Service [Windows 8])
• BlackBerry Push
• SimplePush (Firefox OS / Android / Desktop, and more)
• Push API (W3C) and SimplePush (Mozilla)
• Aerogear acts as a middleware for all of these different specs. (Plugs for OpenShift and UnifiedPush)

Creating 3D Worlds with voxel.js and jQuery — Vlad Flippov

Site

• ArchiveRoom
• VoxelBuilder
• VoxelDrone

How to How-to

Or, Tips for Effectively Educating New Developers

• At one time, we all knew nothing about our jobs. And that’s easy to forget. Learning new things is a crucial part of doing your job!
• Why be a teacher? It enhances your leadership skills, has a positive influence on other developers careers, and the rest of the dev team will thank you.

Making the Most out of Teaching & Learning Styles

• Recognition of distinct learning preferences allows you to customize the teaching process.
• Two Common Learning Styles
• Getting a sense for learning styles — ask questions!
• The best predictor of future behavior, is past behavior!
• The best learning happens when solving real problems.
• Get new devs in the traenches!
• What topics should I prioritize when teaching new developers?
• Critical thinking
• Separating Concerns
• Resourcefulness
• Code reusability
• Debugging (tools as well)

New devs are eager to learn and build. More experience developers can either be intimidating or inspiring. Be inspiring. A new dev’s best weapon is his own curiosity. Hiring passionate, curious developers goes a long way in the learning process.

AngularJS Directives and the Computer Science of Javascript — Burke Holland

Slides

• Imperative vs. Declarative

Kiss My Canvas: Making and Facillitating Art with Code — Jenn Schiffer

• Example: Creating a simple basketball.
• Example: Creating a canvas that we can draw on.

11 Sept 2013

jQuery UI & Mobile Keynote (The Great Merger) — Scott González

• The touch events model is so fragmented on the web that it is rather difficult to implement touch events in jQuery UI
• jQuery UI is meant to be code that works everywhere.
• CSS Framework
• Widgets that work everywhere
• Dependency Management
• Web Components

In Search of Front-End Modularity — Juan Pablo Buritica

Slides — Thanks Juan!

• As our applications evolve, complexity will increase. Function, libraries, frameworks, and architectures.
• We want to build complex systems, without knowing their final state.
• Be pragmatic. Nature solves problems by breaking larger systems into modular components.
• Functional Elements
• Benefits
• Front-End modularity has an enemy, the code is not executed where it lives.
• We need to deliver the smallest size, in the least amount of requests.
• Modular Front-End Architectures
• Web Components

AMD-ifying jQuery Source: Game, Consider Yourself Changed — Timmy Willison

Slides

• AMD: Asynchronous Module Definition
• You can now include only the modules that you will need during development, which will include it’s dependencies
• AMD + Building
• Future Roadmap

Stop Procrastinating and Start Deferring — Julian Aubourg

Gist of the Talk

Building a Development Culture — Monika Piotrowicz

• Process — a process to support creativity, not resist it.
• Web devs should be part of the design process from the very beginning, they should not just be handed down the plans from the designers and PMs.
• The process must support learning, taking time during the week to research.
• We should work with designers.
• Design and Development should always be occuring at the same time, not one before the other.
• Developer and Designer should sit together and work out the project together. It levels the playing field, and allows for a more collaborative approach to design.
• Research & Prototype — the chance to actually learn about and implement the new things that interest you.
• Prototypes are your sandbox — the freedom to focus on one problem at a time, testing early to solve it faster.
• The earlier an assumption is challenged, the easier it will be to fix.
• Devs also will get the chance to drive the design, as you can show what’s possible within the code, while meeting the design specifications.
• Share & Iterate, design informs development.
• Devs in the company
• What they gain
• What can we do?

jQuery Mobile: Optimizing Performance — Alex Schmitz

• On average, mobile is about 3x slower.
• Simplify your pages
• To reduce download time and http requests
• Multi-page template
• Custom builds

jQuery + Phantom.js + Node.js = Testing and Automation Awesomesauce! — Travis Tidwell

Slides — Source

• Not many great jQuery ports for Phantom
• Serial
• You can use async.js which will allow for a more serial type of programming, without having to nest all of your functions. (Not too disimilar to $.Deferred, based on JavaScript promises.)
• Leveraging node.js, using jQuery.go, nconf, and prompt.

Journey to the Center of jQuery — Anne-Gaelle Colom

• Interesting anecdotes on moving from GitHub committer to member of the jQuery team.
• Bits on how to contribute to jQuery.

Talk To Me: Making websites accessible — Jörn Zaefferer

• Specifically, for people who can’t see well.
• Convince your boss that accessibility is important, like user experience and security
• How to test
• Virtual Cursor — going from one node to the next
• WAI-ARIA (Web Accessibility Initiative) Accessible Rich Internet Applications
• Ask for forgiveness, not permission. Convince the boss. Test keyboard and screen reader. Fix by hand or with frameworks.

Adaptive Images for Responsive Web Design — Christopher Schmitt

• Feature testing vs. Browser Sniffing
• Speed tests hinder speed and user experience
• IMG
• Workarounds