Best of JavaScript, HTML & CSS – Week of June 17, 2013
The modern web is always changing, and this article is more than two years old.
A lot of newly released projects this week including a significant update to TypeScript. Also, if you happen to be looking to learn JavaScript (or learn it better), check out Axel Raushmayer’s basic JavaScript tutorial. Sorry for the delay in this post but I am traveling this week in Seattle.
Tutorials
Toby Ho explains JavaScript Generators, shows you how to use them and what they can be useful for.
What are Generators?
Axel Raushmayer posts a thorough and bookmark-worthy introduction to JavaScript.
Basic JavaScript: an introduction to the language
Scott Jehl discusses the lack of element-based media queries and a couple approaches to try to work around this.
Working around a lack of element queries
Alan Greenblatt helps you understand the Canvas blending spec which has been implemented in Chrome Canary.
Understanding Compositing and Blending
A really cool set of examples by Brian Chan where he recreates some well known logos in pure CSS.
Logos In Pure CSS
Mary Lou recreates the Google Trends grid, letting you choose how many items to display and adding CSS transitions.
Dynamic Grid with Transitions
Chris Coyier replicates some of the look of the Google Hangouts chat window on desktop using CSS.
Replicating Some Of Google Hangouts Chat Design
Mike Pennisi on information hiding in JavaScript, i.e. concealing implementation details from consumers of the code.
Information Hiding in JavaScript
Johnny Simpson digs into a sample project that utilizes the HTML5 History API and ‘selective’ loading.
Controlling History: the HTML5 History API and ‘Selective’ Loading
Libraries and Frameworks
Sam Holt posts a flowchart explaining when to use or not use Twitter Bootstrap for your project.
When to Use (or Not Use) Twitter Bootstrap
Alex Young discusses using local storage with MV* frameworks like Backbone or AngularJS.
MV* and Local Storage
Umar Hansa shows how to integrate Chrome DevTools into a Sass development workflow.
Developing With Sass and Chrome DevTools
Mark Dalgleish discusses the benefits on using promises inside AngularJS views.
Using Promises in AngularJS Views
Joe Zim shows how to create modal dialog boxes utilizing Backbone views with Marionette.
Using Marionette to Display Modal Views
Jesse Cravens explores using the Handlebars.js template library with Ember.js views.
Ember.js Views and Live Templates with Handlebars.js Part 1
New and Updated Libraries and Frameworks
Angular Kendo UI is a complete set of directives for every widget in both the Web and DataViz suites for Kendo UI.
Announcing Angular Kendo UI
Yass.js is an adaptive image script adding support for srcset and using a mobile-first perspective.
yass.js
Grumpicon let’s you try Grunticon for converting your SVG icons via drag-and-drop on the browser.
Grumpicon. A Web app for the Grunticon workflow.
A new extension lets you preview content from Brackets on your devices using Edge Inspect CC.
edge-inspect-extension
TypeScript 0.9 is the largest update so far, adding generics, overloading on constants, enums and much more.
Announcing TypeScript 0.9 – TypeScript
Flippant.js is a small JavaScript/CSS library for flipping things over – useful for inline editors as in the demos.
Flippant.js
blend.js is a JavaScript library used to partition images and let you apply effects on them within an HTML5 canvas.
blend.js
Cartero is a client side asset manager that currently works with works with Node.js / Express.
cartero
phoria.js is a JavaScript library for simple 3D graphics on a canvas 2D renderer.
Phoria 3D
Etc.
Learn how to build responsive layouts from the ground up using Edge Reflow in this video series from Piotr Walczyszyn.
Responsive Web Design Using Edge Reflow – Video Series
Use the new Edge Inspect JavaScript API to integrate the tool into your continuous integration build process.
Introducing the Edge Inspect JavaScript API
