Talks To Help You Become A Better Front-End Engineer In 2013

Advertisement

Many of us care deeply about developing our craft. But staying up to date can be a true challenge, because the quantity of fresh information we’re regularly exposed to can be a lot to take in. 2012 has been no exception, with a wealth of evolution and refinement going on in the front end.

Great strides have been made in how we approach workflow, use abstractions, appreciate code quality and tackle the measurement and betterment of performance. If you’ve been busy and haven’t had time to catch up on the latest developments in these areas, don’t worry.

With the holiday season upon us and a little more time on our hands, I thought it would be useful to share a carefully curated list of the most relevant front-end talks I’ve found helpful this year. You certainly don’t have to read through them all, but the advice shared in them will equip you with the knowledge needed to go into the new year as a better front-end engineer.

Screenshot
Image credit: Jacob Bøtter1

Baseline

Have a Strategy for Staying Up to Date

How to Stay Up to Date on Web Stuff2, Chris Coyier

Part of continually developing your craft is staying up to date. Doing this is important for all professionals, and in this talk you’ll learn strategies for staying updated even when the ideas that surround the technologies we use are constantly evolving.

Screenshot3

Make Sure Your Baseline for Development Is Current

A New Baseline for Front-End Developers4, Rebecca Murphey

There was a time when editing files, testing them locally and simply FTP’ing them was the common workflow for a front-end developer. We would measure our abilities based on how well we could harass IE 6 into rendering pages correctly, and we generally lacked strong skills in HTML, CSS and JavaScript.

This has greatly changed over the past few years, with improvements in workflow and tooling. Front-end development is now taken more seriously, and this talk sheds light on the new baseline process for developing on the front end.

Screenshot

Understand How Browsers Work Behind the Scenes

So, You Want to Be a Front-End Engineer5, David Mosher (Video6)

Some would say that the browser is the most volatile development platform the world has ever known. If you’re a client-side developer, understanding how browser internals work can help you both make better decisions and appreciate the justifications behind many development best practices. In one of the best talks this year, David Mosher takes you through how browsers parse and render your pages.

Screenshot7

Know What the Web Platform Now Has to Offer

The Web Can Do That!?8, Eric Bidelman (Video9)

The Web is constantly evolving, and keeping up with what’s new on the platform can be hard. HTML5’s new capabilities enable us to build an entirely new suite of applications with features that were simply impossible to achieve before (at least, not without the use of plugins) but are now a reality.

In this talk, my teammate Eric guides you through the bleeding edge of HTML5, focusing on solving many real-world problems. You’ll learn about media streaming, device input, modern CSS design, media capture, file I/O and more.

Screenshot10

Workflow

For Web App Developers

Tooling for the Modern Web App Developer11, Addy Osmani

Whether you’re using JavaScript or CoffeeScript, LESS or Sass, building an awesome Web application these days usually requires a plethora of boilerplates, frameworks and tools and a lot of glue to get them to work together. In short, you need a kick-ass utility belt.

In this talk, you’ll get an overview of the current tooling eco-system for the front-end and learn about a new tool that tries to bring together all of the pieces of this eco-system for you, called Yeoman12.

Screenshot13

An extended version14 of this talk is also available.

For Web Designers

A Modern Web Designer’s Workflow15, Chris Coyier (Video16)

A lot is expected from today’s Web designers. If this role defines what you do, then it’s now not just about visual design, but increasingly about building interactions. Designs need to work across different devices of varying shapes, sizes and connections, and they also need to be accessible.

As a designer, you often need to communicate and share code across teams and be familiar with many different technologies. In this talk, Chris Coyier discusses many of the amazing tools that can help things along, discussing what does what and giving a high-level view of a modern workflow.

Screenshot17

For Mobile Web Developers

Mobile Web Developers Toolbelt18, Pete Le Page (Video19)

Building for the mobile Web requires a different mindset to the one we use when developing for desktop, and a different set of tools. Thankfully, a number of great options are available. From remote debugging to emulation, mobile browsers are offering more and more tools to make our lives easier.

In this talk, Pete Le Page takes you through a couple of tools that you can use today to make cross-platform mobile Web development easier, and then he peers into the crystal ball to see what tools the future may bring.

Screenshot20

For Debugging

Secrets of the Chrome DevTools21, Patrick Dubroy (Video22)

Google Chrome Developer Tools provide powerful ways to understand, debug and profile Web applications. Most developers are familiar with Chrome’s basic inspection and debugging tools, but some of its most valuable features, like the Timeline23 and memory analysis tools, are less known.

In his demo-based walkthrough, Patrick Dubroy provides an overview of Chrome Developer Tools and an in-depth demonstration of some lesser-known features.

Screenshot24

The Future

CSS

The CSS of Tomorrow25, Peter Gasston

In this talk, Peter looks briefly at the state of CSS3: what you can do right now, and what you’ll be able to do in the very near future. He then looks into the long-term future, to a time when CSS3 will make possible page layouts far richer and more dynamic than we’d thought possible, and when CSS3 has taken on aspects of programming languages. This is effectively what CSS developers will be learning years from now.

Screenshot26

JavaScript

The Future of JavaScript27, Dave Herman

The Web platform is growing, and JavaScript is growing along with it. EcmaScript 6, the next edition of the JavaScript standard, is gearing up to be a huge step forward for Web programming. In this talk, Dave Herman discusses the exciting new features28 being worked on for EcmaScript 6 and how they can be used.

Screenshot29

Web Applications

Web Components and the Future of Web App Development30, Eric Bidelman

Web components are going to fundamentally change the way we think, build and consume Web apps. ShadowDOM31, Mutation Observers32, custom elements, MDV33, Object.observe()34, CSS — how do they all fit together?

This talk prepares you for the future of the Web platform by discussing the fundamentals of Web components and how we can use them today with frameworks such as AngularJS.

Screenshot35

CSS

State of the Art

All the New CSS Hawtness36, Darcy Clarke

This talk dives into some of the latest CSS implementations and specifications floating around. You’ll learn what’s here and what’s around the corner, and you’ll gain insight into why these new features will change our development workflow.

Darcy Clarke touches on modules such as paged-media37, multi-columns38, flex-box39, filters40, regions41, box-sizing42, masking43 and 3D.

Screenshot44

Modularity

Your CSS Is a Mess45, Jonathan Snook

We all think that CSS is easy. Take some selectors, add some properties, maybe a dash of media queries, and — presto! — you have a beautiful website. And yet, as the project changes and the team grows, we see the frustration build, with increasingly complex selectors and overuse of !important.

In this talk, Jonathan looks at common problems and solutions that will make your CSS (and your projects) easier to manage and easier to scale.

Screenshot46

Pre-Processors

CSS Pre-Processors47, Bermon Painter

If you haven’t jumped on the pre-processor train this year, you’re missing out. In this helpful overview of (current) popular pre-processors, Bermon Painter takes you through Stylus, LESS and Sass, with features subdivided into easy-to-learn sections of beginner, intermediate and advanced. I’ve been using mixins quite heavily this year, and I simply wouldn’t have been able to if it weren’t for projects like Sass.

Screenshot48

Documentation

A Better Future With KSS49, Kyle Neath

Writing maintainable CSS within a team is one of those problems that a lot of people think can be solved by writing CSS in a particular style. But in Kyle’s experience, that never works out.

In this talk, he introduces you to his latest creation, KSS50. It’s a documentation and style guide format. He’ll show you why he built KSS and how it’s been helping him at GitHub to refactor its four-and-a-half year old CSS, and he’ll give you a glimpse into the future of KSS.

Screenshot51

JavaScript

The Importance of Code Style

Maintainable JavaScript52, Nicholas Zakas

Some say that good code is its own documentation, and the fact is that the more readable our code is, the easier it is to maintain.

Writing JavaScript for fun and writing it professionally are two different things, and in this talk by Zakas, you’ll learn practices to make JavaScript maintainable over the long run, to reduce errors and to make your code easily adaptable to future changes. It’s highly recommended reading.

Screenshot53

A Modern Large-Scale App Stack

SoundCloud’s Stack54, Nick Fisher

I’ve talked a lot about large-scale development55 in the past. It’s a non-trivial problem that’s difficult to get right, and so it’s exciting when someone working on such challenges shares their experience.

In this talk, Nick Fisher of SoundCloud56 discusses the company’s story of developing large-scale applications with JavaScript, not only at runtime, but also its steps to make development and deployment easier. In particular, he looks at RequireJS57 and Backbone58, talking about how SoundCloud has used and abused each to suit its needs, sometimes in uncommon ways.

Screenshot59

Rethinking Application Structure

Re-Imagining the Browser With AngularJS60, Igor Minar

What if you could a write modern Web app with dramatically fewer lines of code and improve its readability and expressiveness at the same time? In case you’re wondering: no, there’s no new language to learn, just familiar old HTML and JavaScript. As a matter of fact, there are concepts for you to unlearn.

AngularJS is a client-side JavaScript Web development framework whose authors believe they’ve done something special. Instead of asking what kind of functions they could provide to make writing apps smoother, they asked, “What if the browser worked differently in a way that eliminates code and gives structure to apps?”

In this talk, you’ll get a tour of how to get the power of tomorrow’s Web platform in today’s Web applications.

Screenshot61

Internationalization and i18n

Entschuldigen you, parlez vouz JavaScript62, Sebastian Golasch (Video63)

While JavaScript applications grow in size and complexity, there are still some white spots on the big map of Web applications: internationalization and globalization! If you´re still thinking that switching strings in and out is the way to go, you are definitely headed in the wrong direction.

In this talk, Sebastian takes you through how to spot real-world internationalization problems and how to solve them in the most elegant way.

Screenshot64

I couldn’t cover internationalization without mentioning Alex Sexton, who has also spoken a great deal on this topic. His JSConf talk on client-side internationalization is available in video65 form if you’re interested in checking it out.

Patterns and Principles

The Plight of Pinocchio66, Brandon Keepers

JavaScript is no longer a toy language, and many of our Web applications can’t function without it. Brandon states that if we are going to use JavaScript to do real things, then we need to treat it like a real language, adopting the same practices that we use with real languages. I completely agree with him.

This framework-agnostic talk takes a serious look at how we develop JavaScript applications in the real world. Despite their prototypical nature, good object-oriented programming principles are still relevant. The design patterns67 that we’ve grown to know and love work just as well in JavaScript as they do in any other language.

Screenshot68

When to Lazy Load Scripts

How Late Is Later?69, Massimiliano Marcon

Reducing the loading time of a Web application is a well-known challenge. Developers need to make sure that the browser downloads only the code that is strictly necessary to bootstrap the application, and leave the rest for later. This is what we commonly call “lazy loading.”

But when is “later”? When is the right time to lazy load? This talk shows how JavaScript code — functions and objects — can be delivered to the browser on demand, thus reducing the perceived loading time of a Web application.

Screenshot70

Mobile

Building Touch-Based Interfaces

Creating Responsive HTML5 Touch Interfaces71, Stephen Woods (Video72 | Audio73)

Flickr front-end engineer Stephen Woods shares some hard-learned lessons about building responsive touch-based interfaces using HTML5 and CSS. Because our users are demanding better instant feedback from touch-based UIs, understanding how to approach this problem and avoid the pitfalls will be critical for many application developers in the future.

Screenshot74

The Challenge With Scrolling

Embracing Touch: Cross-Platform Scrolling75, Mark Dalgleish (Video76)

Scrolling effects are a popular way to add personality to the simple act of moving down the page. Unfortunately, these effects don’t work natively on mobile devices, where the touch interaction would make these techniques more effective. In this talk, Mark looks at some ways to implement these effects within the limitations of mobile browsers.

Screenshot77

Native, HTML5 and Hybrid Apps

Native, HTML5 and Hybrid Mobile Development78, Eran Zinman

One of the toughest decisions every mobile developer faces is choosing a development strategy: “Should I develop a native, HTML5 or hybrid mobile app?” Over the past two years, Eran has led Conduit’s mobile client development efforts, experimenting with cross-platform development in various flavors: from complete HTML5 solutions (using PhoneGap and other technologies) to hybrid solutions to semi-hybrid solutions to fully native solutions.

In this talk, Eran shares some real-life experiences in cross-platform development, describing changes that Conduit has implemented along the way, and sharing what some of the “big players” (such as Facebook, LinkedIn and Twitter) are doing in their mobile app development.

Screenshot79

Performance, Distribution and Facebook on HTML5

On the Future of Mobile Web Apps80, Simon Cross

Simon looks at Facebook’s experience with and investment in the mobile Web, the issues affecting mobile Web developers and what Facebook and the industry are doing to push the mobile Web forward. Mark Zuckerberg’s comments on HTML5 were undoubtedly one of the most discussed topics in mobile this year, and I personally found these slides a good summary of Facebook’s current take on what works and what still requires improvement.

Screenshot81

Tools for Mobile Debugging

Mobile Debugging82, Remy Sharp

Debugging Web apps on mobile devices can be a genuine pain. Luckily, a number of tools are available today to ease the process. From remote debuggers to cross-device consoles, this talk summarizes the current state of debugging for mobile, going into more depth on debugging than Pete’s talk from earlier in the post.

Screenshot83

Responsive Design Techniques

Responsive Web Design: Clever Tips and Techniques84, Vitaly Friedman

Responsive Web design challenges designers to apply a new mindset to their design processes and to the techniques they use in design and coding. This talk (by Smashing Magazine’s own Vitaly Friedman) provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

Screenshot85

Web Apps

Offline Web Apps

Offline Rules86, Andrew Betts (Video87)

In the last couple of years, a deluge of new offline storage technologies have appeared. In this talk, Andrew looks at why they are all excellent and rubbish at the same time and why you need to use all of them, and he walks through techniques to consider when building a Web application that can load and function with no network connectivity.

But making use of client-side storage is necessary not only in order to make an app that works offline, but it can also hugely improve the experience of your website when the user actually does have connectivity.

Screenshot88

State of the Art

Building Web Apps of the Future: Tomorrow, Today and Yesterday89, Paul Kinlan (Audio90)

The browser is an amazing runtime that can already deliver amazing apps. Paul dives into the technologies that will help you deliver Web apps that will blow your users’ socks off now and in the future.

Screenshot91

Client-Side Storage

Storage in the Browser92, Andrew Betts

Installed native applications can use all the space they want, but in the browser we’re much more limited. This talk explores how to make the best use of the storage technologies available to Web apps, comparing the virtues of different packaging and encoding techniques, and covering simple forms of in-browser compression that can yield surprising results.

As more apps are developed to surf over network turbulence, and to work even when completely disconnected from the network, local storage becomes ever more important.

Screenshot93

Application Cache

Application Cache: Douchebag94, Jake Archibald (Video95)

The Application Cache is one of the cool bits of HTML5. It allows websites to work without a network connection, and it brings us much closer to native app-like behavior. However, from roundup articles and talks about HTML5, you might be left with the impression that it’s a magic bullet. Unfortunately, it isn’t; the Application Cache is, as Jake famously puts it, a douchebag.

In this talk, he looks at how to use the features of Application Cache without the horrible side effects, comparing techniques that you’d use for both a simple client-side app and a large content-driven website. He explores the many gotchas left out of most articles about Application Cache and discusses how to build your website to survive them.

Screenshot96

Performance

CSS

High-Performance CSS97, Paul Irish

Paul dives into the tools available in and outside of the browser to assess the performance of your CSS. Find out what’s slow (is box-shadow causing paints to be 70 milliseconds longer?) and how to fix it. Learn about about:tracing, CSS profiling and speed tracer, and get a better understanding of the browser’s internals in the process.

Screenshot98

There’s also Jon Rohan’s talk about some problems related to CSS performance that were solved at GitHub. Recommended reading.

GitHub’s CSS Performance99, Jon Rohan

Screenshot100

Avoiding Jank

Jank-Free: In Pursuit of Smooth Web Apps101, Tom Wiltzius

Building beautiful experiences on the mobile Web takes more than a good designer and fancy CSS: performance is critical for a Web app to feel fluid. Smooth animation that never drops a frame can give your app a native feel. But when animations stutter, effects lag or pages scroll slowly, we call that “jank.” This talk is about identifying jank and getting rid of it.

Screenshot102

Web

Building Faster Websites103, Ilya Grigorik

In this comprehensive crash course, Ilya Grigorik shares some really juicy tips on how to make the Web faster, including Google’s findings on what slows down people’s Web experience and how Chrome and other services have improved it. If you’re an engineer looking to improve the performance of your websites or apps, this talk comes highly recommended.

Screenshot104

JavaScript

Breaking the JavaScript Speed Limit With V8105, Daniel Clifford

Are you interested in making JavaScript run blazingly fast? If so, this talk looks at V8 under the hood to help you identify how to optimize your JavaScript. Daniel shows you how to leverage V8’s sampling profiler to eliminate performance bottlenecks and optimize JavaScript programs. He also exposes how V8 uses hidden classes and runtime-type feedback to generate efficient JIT code. A very interesting talk for performance junkies.

Screenshot106

Note: Some of the optimizations mentioned in this talk are specific to V8 and may not apply to other JavaScript engines. I wrote about how to write memory-efficient JavaScript107 on Smashing Magazine recently, in case you’re interested in exploring the topic further.

Testing

Understanding Code Smells

Why Our Code Smells108, Brandon Keepers (Video109)

Odors exist for a reason, and they are usually trying to tell us something. If our code smells, it might be trying to tell us what is wrong.

Does a test case require an abundance of setting up? Maybe the code being tested is doing too much, or it is not isolated enough for the test? Does an object have an abundance of instance variables? Maybe it should be split into multiple objects? Is a view brittle? Maybe it is too tightly coupled to a model, or maybe the logic needs to be abstracted into an object that can be tested?

In this talk, Brandon walks through code from projects that he works on every day, looking for smells that indicate problems, understanding why the smells are there, what the smells are trying to tell us, and how to refactor them.

Screenshot110

Current State of the Art

JavaScript Testing: The Holy Grail111, Adam Hawkins (Video112)

Adam talks about this Holy Grail for JavaScript developers: getting a test suite up and running fast and having multiple browsers execute the tests. Getting the Holy Grail is difficult, though, even though several tools have been created in the past in attempts to solve this problem.

Barriers to entries are everywhere. How easy is it to get going testing small parts of JavaScript functionality? What happens as your become bigger and more complex? What about headless testing? Does this process scale up to CI? Can you even do this stuff locally?

A myriad of testing tools and solutions are available, and Adam shows what’s out there and what we as a community need to do next to get the Holy Grail, to ensure a better Web experience for everyone.

Screenshot113

Tip: One tool for testing that I’m loving at the moment is Testling-CI114, which runs browser tests on every push.

Improving the Testability of Your Code

Writing Testable JavaScript115, Rebecca Murphey (Audio116)

It’s one thing to write the code that you need to write to get something working; quite another to write the code that you need to write to prove that it works — and to prove that it will continue to work as you refactor and add new features.

In her talk, Rebecca looks at what it means to write testable JavaScript code.

Screenshot117

Conclusion

Time spent thinking about (and developing) your craft is time well spent. The more honed your skills are, the more opportunity you will have to become an efficient engineer.

While this list doesn’t cover every excellent talk presented this year, it hopefully offers some direction for you to accentuate your skills. Do consider reading through a few of them. Focused reading in this way will add to your value as a craftsperson and hopefully improve your daily development workflow.

With that, do enjoy the holiday season and have a fantastic new year.

(al)

Footnotes

  1. 1 http://www.flickr.com/photos/47854931@N00/132361609
  2. 2 https://speakerdeck.com/chriscoyier/how-to-stay-up-to-date-on-web-technology
  3. 3 https://speakerdeck.com/chriscoyier/how-to-stay-up-to-date-on-web-technology
  4. 4 https://speakerdeck.com/rmurphey/a-new-baseline-for-front-end-devs
  5. 5 https://speakerdeck.com/dmosher/so-you-want-to-be-a-front-end-engineer
  6. 6 http://www.youtube.com/watch?v=Lsg84NtJbmI
  7. 7 https://speakerdeck.com/dmosher/so-you-want-to-be-a-front-end-engineer
  8. 8 http://www.htmlfivecan.com/#1
  9. 9 http://www.youtube.com/watch?v=X_ek1wSe66o
  10. 10 http://www.htmlfivecan.com/#1
  11. 11 https://speakerdeck.com/addyosmani/tooling-for-the-modern-webapp-developer
  12. 12 http://yeoman.io
  13. 13 https://speakerdeck.com/addyosmani/tooling-for-the-modern-webapp-developer
  14. 14 https://speakerdeck.com/addyosmani/the-new-wave-utility-belt-fowa
  15. 15 https://speakerdeck.com/chriscoyier/a-modern-web-designers-workflow
  16. 16 http://www.youtube.com/watch?v=vsTrAfJFLXI
  17. 17 https://speakerdeck.com/chriscoyier/a-modern-web-designers-workflow
  18. 18 http://petelepage.com/presentations/2012/qcon/#2
  19. 19 https://developers.google.com/live/shows/11154750/
  20. 20 http://petelepage.com/presentations/2012/qcon/#2
  21. 21 http://oredev.org/2012/sessions/secrets-of-the-chrome-developer-tools
  22. 22 http://vimeo.com/53073654
  23. 23 http://addyosmani.com/blog/performance-optimisation-with-timeline-profiles/
  24. 24 http://oredev.org/2012/sessions/secrets-of-the-chrome-developer-tools
  25. 25 https://speakerdeck.com/stopsatgreen/the-css-of-tomorrow-revised
  26. 26 https://speakerdeck.com/stopsatgreen/the-css-of-tomorrow-revised
  27. 27 https://speakerdeck.com/dherman/the-future-of-javascript-1
  28. 28 http://addyosmani.com/blog/a-few-new-things-coming-to-javascript/
  29. 29 https://speakerdeck.com/dherman/the-future-of-javascript-1
  30. 30 http://html5-demos.appspot.com/static/webcomponents/index.html#1
  31. 31 http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
  32. 32 http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers
  33. 33 http://mdv.googlecode.com/svn/trunk/docs/design_intro.html
  34. 34 http://weblog.bocoup.com/javascript-object-observe/
  35. 35 http://html5-demos.appspot.com/static/webcomponents/index.html#1
  36. 36 http://darcyclarke.me/dev/hawtcss/#landing-slide
  37. 37 http://dev.w3.org/csswg/css3-page/
  38. 38 https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts
  39. 39 http://dev.w3.org/csswg/css3-flexbox/
  40. 40 http://www.html5rocks.com/en/tutorials/filters/understanding-css/
  41. 41 http://dev.w3.org/csswg/css3-regions/
  42. 42 https://developer.mozilla.org/en-US/docs/CSS/box-sizing
  43. 43 http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html
  44. 44 http://darcyclarke.me/dev/hawtcss/#landing-slide
  45. 45 https://speakerdeck.com/snookca/your
  46. 46 https://speakerdeck.com/snookca/your
  47. 47 https://speakerdeck.com/bermonpainter/css-pre-processors-stylus-less-and-sass
  48. 48 https://speakerdeck.com/bermonpainter/css-pre-processors-stylus-less-and-sass
  49. 49 https://speakerdeck.com/kneath/a-better-future-with-kss
  50. 50 https://github.com/kneath/kss
  51. 51 https://speakerdeck.com/kneath/a-better-future-with-kss
  52. 52 http://www.slideshare.net/nzakas/maintainable-javascript-2012
  53. 53 http://www.slideshare.net/nzakas/maintainable-javascript-2012
  54. 54 http://spadgos.github.com/sfjs-next-soundcloud/#/step-1
  55. 55 https://speakerdeck.com/addyosmani/large-scale-javascript-application-architecture
  56. 56 https://soundcloud.com/
  57. 57 requirejs.org
  58. 58 http://backbonejs.org/
  59. 59 http://spadgos.github.com/sfjs-next-soundcloud/#/step-1
  60. 60 https://docs.google.com/a/google.com/presentation/pub?id=1kDvp3O2xZ6ZSXF4F1YTbg_jy_ei2sFl38f3c6VkBfSo&start=false&loop=false&delayms=3000#slide=id.p
  61. 61 https://docs.google.com/a/google.com/presentation/pub?id=1kDvp3O2xZ6ZSXF4F1YTbg_jy_ei2sFl38f3c6VkBfSo&start=false&loop=false&delayms=3000#slide=id.p
  62. 62 http://i18n.asciidisco.com/#/
  63. 63 http://www.youtube.com/watch?feature=player_embedded&v=ekiZuLl1mWc
  64. 64 http://i18n.asciidisco.com/#/
  65. 65 http://www.youtube.com/watch?feature=player_embedded&v=uXS_-JRsB8M
  66. 66 https://speakerdeck.com/bkeepers/the-plight-of-pinocchio
  67. 67 http://addyosmani.com/resources/essentialjsdesignpatterns/book/
  68. 68 https://speakerdeck.com/bkeepers/the-plight-of-pinocchio
  69. 69 https://speakerdeck.com/mmarcon/how-late-is-later-a-lazy-loading-solution-on-the-edge-between-very-clever-and-incredibly-mad
  70. 70 https://speakerdeck.com/mmarcon/how-late-is-later-a-lazy-loading-solution-on-the-edge-between-very-clever-and-incredibly-mad
  71. 71 http://www.slideshare.net/ysaw/html5-touch-interfaces-sxsw-extended-version
  72. 72 http://www.youtube.com/watch?v=lcD9CF0bxyk
  73. 73 http://audio.sxsw.com/2012/podcasts/11-HIL-Creating_Responsive_HTML5_Touch_Interfaces.mp3
  74. 74 http://www.slideshare.net/ysaw/html5-touch-interfaces-sxsw-extended-version
  75. 75 http://markdalgleish.com/presentations/embracingtouch/
  76. 76 http://www.youtube.com/watch?feature=player_embedded&v=Ii5AkRNSVHg
  77. 77 http://markdalgleish.com/presentations/embracingtouch/
  78. 78 http://www.slideshare.net/zzeran/fowa-2012-native-html5-and-hybrid-mobile-app-development-reallife-experiences-eran-zinman
  79. 79 http://www.slideshare.net/zzeran/fowa-2012-native-html5-and-hybrid-mobile-app-development-reallife-experiences-eran-zinman
  80. 80 https://speakerdeck.com/sicross/on-the-future-of-mobile-web-apps
  81. 81 https://speakerdeck.com/sicross/on-the-future-of-mobile-web-apps
  82. 82 https://speakerdeck.com/rem/mobile-debugging
  83. 83 https://speakerdeck.com/rem/mobile-debugging
  84. 84 https://speakerdeck.com/smashingmag/responsive-web-design-clever-tips-and-techniques
  85. 85 https://speakerdeck.com/smashingmag/responsive-web-design-clever-tips-and-techniques
  86. 86 https://speakerdeck.com/triblondon/offline-rules-full-frontal-2012
  87. 87 http://www.youtube.com/watch?feature=player_embedded&v=RrGo1Sz4IgQ
  88. 88 https://speakerdeck.com/triblondon/offline-rules-full-frontal-2012
  89. 89 http://lanyrd.com/2012/full-frontal/sztqg/
  90. 90 http://2012.full-frontal.org/audio/5-paul.mp3
  91. 91 http://lanyrd.com/2012/full-frontal/sztqg/
  92. 92 https://speakerdeck.com/triblondon/storage-in-the-browser-londonjs
  93. 93 https://speakerdeck.com/triblondon/storage-in-the-browser-londonjs
  94. 94 https://speakerdeck.com/jaffathecake/application-cache-douchebag
  95. 95 http://vimeo.com/43336762
  96. 96 https://speakerdeck.com/jaffathecake/application-cache-douchebag
  97. 97 https://dl.dropbox.com/u/39519/talks/cssperf-cssdevconf/index.html
  98. 98 https://dl.dropbox.com/u/39519/talks/cssperf-cssdevconf/index.html
  99. 99 https://speakerdeck.com/jonrohan/githubs-css-performance
  100. 100 https://speakerdeck.com/jonrohan/githubs-css-performance
  101. 101 http://jankfree.com/velocity-europe/index.html
  102. 102 http://jankfree.com/velocity-europe/index.html
  103. 103 http://www.igvita.com/slides/2012/webperf-crash-course.pdf
  104. 104 http://www.igvita.com/slides/2012/webperf-crash-course.pdf
  105. 105 http://v8-io12.appspot.com/
  106. 106 http://v8-io12.appspot.com/
  107. 107 http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
  108. 108 https://speakerdeck.com/bkeepers/why-our-code-smells
  109. 109 http://www.youtube.com/watch?v=JxPKljUkFQw
  110. 110 https://speakerdeck.com/bkeepers/why-our-code-smells
  111. 111 https://speakerdeck.com/twinturbo/javascript-testing-the-holy-grail
  112. 112 http://www.youtube.com/watch?feature=player_detailpage&v=YdFQ29oK50M
  113. 113 https://speakerdeck.com/twinturbo/javascript-testing-the-holy-grail
  114. 114 http://ci.testling.com/
  115. 115 https://speakerdeck.com/rmurphey/writing-testable-javascript-mocha-version
  116. 116 http://2012.full-frontal.org/audio/6-rebecca.mp3
  117. 117 https://speakerdeck.com/rmurphey/writing-testable-javascript-mocha-version

↑ Back to topShare on Twitter

Addy Osmani is a Developer Programs Engineer on the Chrome team at Google. A passionate JavaScript developer, he has written open-source books like 'Learning JavaScript Design Patterns' and 'Developing Backbone Applications', having also contributed to open-source projects like Modernizr and jQuery. He is currently working on 'Yeoman' - an opinionated workflow for building beautiful applications.

Advertising
  1. 1

    I love this roundup like post. Keep myself up to date : )

    0
  2. 2

    Addy –

    Thanks for compiling this list! I’ve seen some of these presentations but there are many here that I’ve yet to watch. This is a great resource and I’m thankful you’ve put this together!

    0
  3. 3

    Thanks Addy,
    It is a great list of talks. I have bookmarked this page for future reference so that I can come back time to time to read the topic I am interested in. Thanks

    0
  4. 4

    You ruined my Xmas vacation….now I have to read the all!!!! Excellent list!

    1
    • 5

      Haha. I’m sorry, George :) Do let me know if you have any questions about the talks on the list. I personally found them enlightening on a number of topics.

      1
  5. 6

    Thanks Addy for the list.

    Although I find it humorous that Embracing Touch crashes all my browsers on iOS 6.
    http://markdalgleish.com/presentations/embracingtouch/

    3
  6. 8

    When I see all this I get sad and think about how much simpler and more productive things could be. But I guess it’s job security for all!

    2
  7. 9

    Thank you very much. You made my life easy. All of 2012 in 1 single post. :)

    0
  8. 10

    Thank you Addy :)

    0
  9. 11

    Here’s a video of “Building web apps of the future (…)” http://www.youtube.com/watch?v=O3AukCYymEU
    It’s great!

    2
  10. 12

    This is a very good list. Appreciate the effort.
    I hope back-end development teams realize the amount of planning and work needed to build modern UIs.

    0
  11. 13

    Thanks for this great article! One of my favourite articles here on SM.com

    0
  12. 14

    This is awesome. Thank you.

    1
  13. 15

    This is very helpful in preparation for 2013. Thanks for this! Happy Holidays!

    0
  14. 16

    Thanks Addy,
    keep up the great job in evangelising FE technologies!
    Have a Merry X-mas and a Happy 2013 [Inspect Element]
    :)

    1
  15. 19

    Darren J McPherson

    December 24, 2012 12:43 pm

    No time for Christmas, I’m doing internets!

    1
  16. 20

    Mr Osmani,
    This list is awesome. Can’t wait to see all this amazing topics. You have covered all areas that i’m interested in. Thx

    1
  17. 21

    Thanks Addy Osmani.

    I Want to Thank all the people

    Addy Osmani , Chris coyier, lea verou , Nicholas Zakas, Rebeca Murphey and Many Others , whose Blogs and Slides helped me to learn things about web.

    2
  18. 22

    Great work Addy… Nice X-mas present for all of us :)
    Thanks

    2
  19. 23

    Excellent way to finish the year!

    2
  20. 24

    Excellent round up. All this reading should help keep us occupied once the boredom of Christmas idleness begins to settle in.

    1
  21. 25

    It’s before sunrise and you’ve already made my day. Thanks!

    2
  22. 26

    cool article……..

    0
  23. 27

    thank you for killing my holidays :-) amazing collection

    0
  24. 28

    Thanks Addy, great compilation.

    0
  25. 29

    Thank you for always providing us with excellent articles and resources! I am very grateful!

    0
  26. 30

    Fantastic roundup.

    0
  27. 31

    Very good addy, I’ve read some .. excellent list! : D

    0
  28. 32

    URLs that point to a specific slide are wrong in the presentation “High-Performance CSS, Paul Irish”, e.g. https://dl.dropbox.com/u/39519/talks/cssperf-cssdevconf/#24 for slide number 24.

    0
  29. 33

    Venkatesh Bashetty

    December 27, 2012 7:02 pm

    This is just Awesome :)

    0
  30. 34

    Video for “Writing Testable JavaScript, Rebecca Murphey”:
    http://www.youtube.com/watch?v=OzjogCFO4Zo

    1
  31. 36

    grate collection. this is my collections http://goo.gl/3WAWL

    -2
  32. 37

    Thanks For Your This Article Very Improve Me!

    -2
  33. 38

    it’s really a nice post, thanks to the author!

    0
  34. 39

    Thanks Addy. Nice work! Kudos :)

    0
  35. 40

    This appears to be a well curated list indeed and you provide a great service cherry picking the diamonds from the rough.
    Thanks!

    0
  36. 41

    This post is too long. Please make a selection of the stuff you think is best. This is too much. Because the font size is too big on this is site, it looks even more.

    -5
  37. 42

    Omg, I’m going to sit and digest this over a month, lots of useful knowledge; time well invested for the long term!

    0
  38. 43

    Alex Wolkov ☭ (@altryne)

    January 2, 2013 6:12 am

    Video for “NATIVE, HTML5 AND HYBRID APPS” – Eran ZInman
    http://www.youtube.com/watch?v=We0byPckthQ&feature=youtu.be

    0
  39. 44

    you guys made my today! all stuff are cool :) & these are all really helpfull

    0
  40. 45

    Nicolas Forgerit

    January 4, 2013 8:44 pm

    Hey fellows,
    nice list but there’s a nitpick:
    i18n stands for INTERNATIONALIZATION, i.e. “write an i, then 18 other chars and close with an N”.
    L10n stands for LOCALIZATION, i.e. “write an L, then 10 other chars and close with an N”.

    So to say, the title “Internationalization and I18N” cannot be right and you probably mean something like “l10N and I18N”. Refer to [0] for more information.

    Cheerio
    Nico

    [0] http://en.wikipedia.org/wiki/Internationalization_and_localization

    0
  41. 46

    Wow, so many resources to keep me up to 2013-date! :) Thanks.

    0
  42. 47

    Thanks Addy for compiling this list. Great way to kick start 2013.

    0
  43. 48

    What a great way to start off the year, I’ve already gone through 4 of them. I appreciate it greatly!

    0
  44. 49

    Thank you for this list.

    0
  45. 50

    I was excited when I first saw this but now I find that most of them are links to presentation slides. That is extremely useless, one can hardly learn anything at all from just the slides in most presentations, they’re so random.

    I’m going to try my luck searching for the title of some of these talks on Google to see if I can find video for any of them or at least a blog post, like Rebecca’s.

    0
  46. 51

    Thank You!

    0
  47. 52

    Wow, I should book a week off work just to read these. Such a treasure trove of knowledge and best practice.

    1
  48. 53

    In a word: incredible. Thanks for sharing such a worthwhile collection of handy ways to continue climbing the enjoyably-challenging and never-ending learning curve.

    Wonderful :)

    0
  49. 54

    Danilo Santucci

    March 5, 2013 9:16 pm

    Monster list. Thanks so much.

    :-)

    0
  50. 55
  51. 56

    Great list Addy, still get a lot out of it this late in the year. Any chance you’ll do another roundup this year?

    0
  52. 57
  53. 58

    Hey!

    Any chance of getting something similar for 2014?

    1
    • 59

      +1
      want a similar recommendations for 2014! But I’m sure this post is still very very helpful!
      it’s so regretful I’ve just noticed this post, how I wish I had seen it last year! oh, I mean the year before!

      0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top