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

8 min readFeb 25, 2021

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

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