--- title: "The top front-end links and tutorials of 2016" publication: "Frontend Focus" issue: 270 published_at: "2016-12-21" canonical_url: "https://frontendfoc.us/issues/270" --- The top front-end links and tutorials of 2016 The most popular items in FrontEnd Focus this year — [Read this e-mail on the Web](http://frontendfoc.us/issues/270) Frontend FocusIssue 270 — December 21, 2016 **In this issue, we're taking a look back at the top items of 2016.** If you've missed any issues, this is a great time to catch up with the stories that caught everyone's imaginations in the world of front-end development :-) We're taking a break for Christmas and will be back in January. Thanks for all of your support this year and we hope you have a great holiday season :-)[12 Handy Chrome DevTools Tips](https://medium.com/@david.gilbertson/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d?utm_source=frontendfocus&utm_medium=email)These are mostly simple tips but may uncover a few features you hadn’t got around to trying yet. (`$0` was a handy one I didn’t know about.) David Gilbertson [Do You Know These Eight HTML5 Tags?](http://www.sitepoint.com/eight-html5-tags-you-might-not-know/?utm_source=frontendfocus&utm_medium=email)Practical explanations and examples. Includes a look at contextual highlighting with ‘mark’, quotations with ‘q’, and more. SitePoint [Debugging The Web with Paul Irish](https://www.youtube.com/watch?v=HF1luRD4Qmk)In 30 minutes, Paul Irish shared what’s new in Chrome’s DevTools and how they’ll help you when debugging your sites and front-end work. A lot of useful stuff. Paul Irish [![Progress\](https://copm.s3.amazonaws.com/e5ceaa53.png)](http://www.telerik.com/campaigns/kendo-ui/free-trial-4?utm_medium=newsletter&utm_source=frontendweeklyprimary&utm_campaign=dt-kendo-trial-4-oct15&utm_content=trialad)[Try Kendo UI - the most complete JavaScript/HTML UI library with 70+ widgets](http://www.telerik.com/campaigns/kendo-ui/free-trial-4?utm_medium=newsletter&utm_source=frontendweeklyprimary&utm_campaign=dt-kendo-trial-4-oct15&utm_content=trialad)Kendo UI delivers everything you need to build modern web applications under tight deadlines - from the must-haves Data Grids and DropDowns to Spreadsheet and Scheduler. Choose from 70+ UI components and combine them to create beautiful, responsive apps. ProgressSponsor [A Basic HTML5 Template For Any Project](http://www.sitepoint.com/a-basic-html5-template/?utm_source=frontendfocus&utm_medium=email)What are the bare elements you need and how can they come together? Originally published in 2013 but updated for 2016. Louis Lazaris [Dirty Tricks From The Dark Corners Of Front-End](https://speakerdeck.com/smashingmag/dirty-tricks-from-the-dark-corners-of-front-end?utm_source=frontendfocus&utm_medium=email)A superb slidedeck from a workshop given by Smashing Magazine’s proprietor. You should learn a few things from this. Vitaly Friedman [Bootstrap 4: A Visual Guide to What’s New](https://medium.com/wdstack/bootstrap-4-whats-new-visual-guide-c84dd81d8387?utm_source=frontendfocus&utm_medium=email)Literally see what’s new in the next version of the popular front-end framework, including cards, font changes, a new XL grid tier, and tweaks to button styling. Carol Skelly [HEAD: Everything To Go In Your HTML's 'head'](https://github.com/joshbuchea/HEAD?utm_source=frontendfocus&utm_medium=email)Starts from the usual basics (title, charset, etc.) but works up to a significant number of meta and link tags useful in various situations. Josh Buchea [The Art of Debugging (on the Web)](https://remysharp.com/2015/10/14/the-art-of-debugging?utm_source=frontendfocus&utm_medium=email)A ton of useful insights, tips, videos, and more, on debugging issues in Web apps, front end development, etc. Remy Sharp [Testing with Realistic Networking Conditions](http://calendar.perfplanet.com/2016/testing-with-realistic-networking-conditions/?utm_source=frontendfocus&utm_medium=email)A look at a variety of approaches and tools for testing Web sites using network conditions end users are likely to experience. Patrick Meenan Jobs [![Supported by Hired.com\](http://s3.cooperpress.com.s3.amazonaws.com/hired1.png)](https://hired.com/join/?utm_source=petercooperpress&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-swe%29%28q2-17-frontend-focus%29&utm_content=newsletter) - [One Application, 4,000+ Opportunities - Try Hired](http://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_campaign=q4-16-frontendfocus)Finding the right role can be daunting, but not on Hired. Get empowered to find the right role with multiple job offers and free personalized support. Hired Can't find the right job? Want companies to apply to _you?_ [Try Hired.com.](https://hired.com/?utm_source=newsletters&utm_medium=petercooperpress&utm_term=cat-tech-frontend&utm_campaign=q2-17-frontend) In Brief [Chrome's DevTools in 2016 and Beyond](https://developers.google.com/web/updates/2016/06/devtools-digest?utm_source=frontendfocus&utm_medium=email) news Google [Houdini: Maybe The Most Exciting Development In CSS You've Never Heard Of](https://www.smashingmagazine.com/2016/03/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of/?utm_source=frontendfocus&utm_medium=email) news Philip Walton [Free O'Reilly eBook - 'Intelligent Caching' - Optimize Front End Performance at Scale](https://vault.stackpath.com/download-intelligent-caching?utm_source=coopermedia-fef&utm_campaign=oreilly-intelligent-caching&utm_medium=email) Use "Intelligent Caching" as a resource and guide for optimizing performance on your website or application. [Download now](https://vault.stackpath.com/download-intelligent-caching?utm_source=coopermedia-fef&utm_campaign=oreilly-intelligent-caching&utm_medium=email) StackPathSponsor [How Well Do You Know CSS 'Display'?](https://www.chenhuijing.com/blog/how-well-do-you-know-display/?utm_source=frontendfocus&utm_medium=email) tutorial A helpful, in-depth run through of what each value of an element’s ‘display’ property can do for you, including `inline-block`, `flex`, `run-in`, and others. Chen Hui Jing [12 Little-Known CSS Facts (The Sequel)](http://www.sitepoint.com/12-little-known-css-facts-the-sequel/?utm_source=frontendfocus&utm_medium=email) tutorial Louis Lazaris [How to Center in CSS](http://howtocenterincss.com/?utm_source=frontendfocus&utm_medium=email) tutorial A golden oldie that resurfaced this year. Oliver Zheng [A Guide to Writing Maintainable CSS](http://maintainablecss.com/?utm_source=frontendfocus&utm_medium=email) tutorial Write CSS without worrying that overzealous styles will cause problems. Adam Silver [Full Width Containers in Limited Width Parents](https://css-tricks.com/full-width-containers-limited-width-parents/?utm_source=frontendfocus&utm_medium=email) tutorial Chris Coyier [Getting Started with Webpack 2](https://blog.madewithenvy.com/getting-started-with-webpack-2-ed2b86c68783?utm_source=frontendfocus&utm_medium=email) tutorial Drew Powers [A Case Study on Boosting Front-End Performance](https://css-tricks.com/case-study-boosting-front-end-performance/?utm_source=frontendfocus&utm_medium=email) story CSS Tricks [How and Why GitHub Switched to SVG for Its Icons](https://github.com/blog/2112-delivering-octicons-with-svg?utm_source=frontendfocus&utm_medium=email) story GitHub [Is jQuery Still Relevant?](http://developer.telerik.com/featured/is-jquery-still-relevant/?utm_source=frontendfocus&utm_medium=email) opinion Telerik Developer Network [The Headless Web](https://medium.com/dev-channel/the-headless-web-de81ab21651f?utm_source=frontendfocus&utm_medium=email) opinion Creative (and fascinating) thinking about the future of the Web. Paul Kinlan [Discover the world’s most trusted SQL Server comparison tool](http://www.red-gate.com/products/sql-development/sql-compare/?utm_source=frontendfocus&utm_medium=displayemail&utm_content=compare_trusted&utm_campaign=sqlcompare&utm_term=email-25068) Enjoy a free trial of SQL Compare, the industry standard for comparing and deploying SQL Server schemas. Red GateSponsor [Flexbox Patterns: User Interface Examples with Code](http://www.flexboxpatterns.com/home?utm_source=frontendfocus&utm_medium=email) code Examples of practical ways to use Flexbox to build UI components for your own site. CJ Cenizal [WTF, Forms? Friendlier HTML Form Controls](http://wtfforms.com/?utm_source=frontendfocus&utm_medium=email) code Friendlier HTML form controls with a little CSS magic from GitHub’s Director of Design. Mark Otto Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/). [Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/270) Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK