Best of JavaScript, HTML & CSS – Week of June 17, 2013

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

*

*

Top