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

Just a reminder for my readers that my weekly update of the best blog posts, articles and new libraries/frameworks in HTML, CSS and JavaScript has moved to my Flippin' Awesome site. Here is this week's edition: Best of JavaScript, HTML & CSS – Week of June 10, 2013

Posted by on 17 June 2013 | 8:45 am

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

Woops! Where are all the links this week? Well, I've decided to transition this weekly update over to my new Flippin' Awesome site. You can catch this week's post here. Be sure to subscribe to the RSS feed there if you want to ensure you don't miss out. This week's update is a jam-packed one, so be sure to check it out. As a side note, I will continue to maintain this blog but it will likely become a place for any non-tutorial related technical content - a place to post links to articles I write or publish more "opinion" type articles. I hope you'll continue to follow.

Posted by on 10 June 2013 | 8:55 am

Best of JavaScript, HTML & CSS - Week of May 27, 2013

Much of the community, it seems, was busy either at the Fluent or JSConf conferences this week, on opposite ends of the country (myself included - thus the lighter than usual tweeting of these links). While that seems to have meant fewer tutorials, however, there were a number of significant new libraries and frameworks released this week. Tutorials Ryan Anklam discusses simple mistakes you can make when working with JavaScript inheritance and prototypes. JavaScript Inheritance – How To Shoot Yourself In the Foot With Prototypes! Stéphanie Walter looks at the state of responsive web design, what is and will be possible and what needs improving. The State Of Responsive Web Design Donovan Hutchinson recreates the first Portal training scene in just CSS. Portal CSS Mary Lou shares some attractive icon buttons with hover effects using CSS animations and transitions. Simple Icon Hover Effects Dr. Axel Rauschmayer continues his JavaScript quirks series by showing how some objects look like arrays but really are not. JavaScript quirk 8: array-like objects Estelle Weyl discusses the “clown car” technique for responsive images using the media queries, the SVG format and the <object> element. Clown Car Technique: Solving Adaptive Images In Responsive Web Design Hakim El Hattab shares some loading indicators for forms using CSS transitions and animations. Ladda Libraries and Frameworks Chris Coyier shares some ideas for a Sass Style Guide. Sass Style Guide Alex Young continues his Angular tutorial series by discussing using Yeoman and Grunt. AngularJS: Adding Dependencies Mobile Simon MacDonald goes through the steps needed to upgrade your old style plugins to the new style. Why Don't My Plugins Work in PhoneGap Android 2.7? New and Updated Libraries and Frameworks Pure is a set of small, responsive CSS modules that you can use in web projects. Pure React is a JavaScript library from Facebook and Instagram for building user interfaces. React The Maria framework for building MVC applications in JavaScript has hit 1.0.0. Introducing Maria: The Real MVC jTypes is a JavaScript library for implementing differential inheritance using encapsulation, inheritance, and polymorphism. jTypes Announced by Irene Ros at Fluent, d3.chart is a framework for building reusable charts using d3.js. The Miso Project :: d3.chart Gif.js is a full-featured JavaScript GIF encoder that runs in your browser. Gif.js Wisp is another compile to JavaScript dialect with a clojure syntax, s-expressions and macros. Wisp Playground Backbone-associations allows you to specify one-to-one and one-to-many relationships between Backbone models. backbone-associations Etc. Tom Lieber explains a new Brackets extension called Theseus that allows inspecting variables and control even in asynchronous code. Better JavaScript Debugging with Theseus

Posted by on 3 June 2013 | 7:45 am

Best of JavaScript, HTML & CSS - Week of May 20, 2013

There's a lot to cover this week, so I'll make the intro brief. Sorry for the delay in posting but with the US holiday yesterday and today I arrived in San Francisco for Fluent, it is a busy week for me too. If you happen to be here, you can catch me speaking tonight at the Ignite event and again on Thursday at the conference. Tutorials Good article by James Padolsey on "cargo-culting" in JavaScript, which is essentially copying the practices of others without understanding them. Cargo-Culting in JavaScript Ariya Hidayat shows how ECMAScript 6 will allow the use of block scopes. ECMAScript 6 and Block Scope Dr. Axel Rauschmayer continues his JavaScript quirks series by showing how closures can inadvertently share variables. JavaScript quirk 7: inadvertent sharing of variables via closures Wilson Page shares a case study on building the new Financial Times web app covering flexbox, modularization & more. Building The New Financial Times Web App (A Case Study) David Walsh shows how to use CSS generated content. CSS content and attr Chris Coyier posts the keywords and syntax for various logic in media queries. Logic in Media Queries Harry Roberts explains how loose selectors in CSS relate to poor scoping in programming, and how to avoid them. ‘Scope' in CSS Raymond Camden discusses the different pieces that make up web components and why he thinks they are awesome. The Future of the Web Mary Lou posts an experimental natural language form using custom input elements instead of the usual form display. Natural Language Form with Custom Input Elements David Storey shows how to use Flexbox for source-order independence, flexible sizing or just centering elements. Designing CSS Layouts With Flexbox Is As Easy As Pie Marco Barria shares some very cool experiments that use CSS animations and transitions on pseudo-elements. Examples of Pseudo-Elements Animations and Transitions Rebecca Murphy discusses how to write testable JavaScript code. Writing Testable JavaScript Anthony Colangelo explains how to use modules to make JavaScript application code well-organized and easy to reuse. The Design of Code: Organizing JavaScript Raymond Camden explains how to capture camera/picture data using HTML and JavaScript. Capturing camera/picture data without PhoneGap Alex Young explains the background and reasoning behind JavaScript modules. Terminology: Modules Raymond Camden shows a useful example of how to use the page visibility API. Using the Page Visibility API Alexander Futekov posts a different and very cool example of creating a 3D parallax effect for buttons and other elements. 3D Button Parallax You know you want to find an excuse to use these pure CSS Star Wars lightsaber checkboxes. Pure CSS3 Lightsaber Checkboxes Libraries and Frameworks Azat Mardanov shows how to use Express.js parameters, error Handling and other middleware. Intro to Express.js Parameters, Error Handling and Other Middleware Jonathan Creamer posts a useful deep dive into Require.js features. Deep dive into Require.js Alex Young continues his AngularJS series by taking a closer look at dependency injection. AngularJS: More on Dependency Injection Joel Hooks shares the lessons he's learned after a year working on a large AngularJS Project. Lessons Learned: A Year with a Large AngularJS Project Jake Bresnehan shares a number of Sass mixins he has created. Handy Sass Mixins Renaun Erickson walks through his first experience building an example application using the MontageJS MVC framework. My First MontageJS Application Andrew Bergess shows you how to get started using the new Two.js framework for drawing. Drawing With Two.js Mobile Rob Lauer demonstrates how to build a game that collects in-app payments using the mozPAy API for Firefox OS Building a Game with In-App Payments for Firefox OS Allan Berger discusses techniques for getting website ready for Retina display. The Right Way to Retinafy Your Websites New and Updated Libraries and Frameworks The latest Brackets build includes better file management and a further improved extension manager. Brackets Sprint 25 Build JSON Editor Online is a web-based tool to view, edit and format JSON using a side-by-side treeview and code editor. JSON Editor Online - view, edit and format JSON online Helium is a JavaScript-based tool that runs in the browser and discovers unused CSS across many pages on a web site. helium-css AopJS is an aspect oriented library for JavaScript that can be used standalone or as a jQuery plugin. aopjs Anchorify.js is a simple JavaScript library for automatically creating anchored headings in your HTML documents. Anchorify.js Etc. Prepros compiles Less, Sass, Scss, Stylus, Jade, Coffeescript, Haml and Markdown with live CSS injection on Windows. Prepros App

Posted by on 28 May 2013 | 3:57 pm

Best of JavaScript, HTML & CSS - Week of May 13, 2013

A busy week of tutorials this week, with the majority focusing on straight HTML, CSS and JavaScript (i.e. no frameworks). This week was also Google I/O where they announced a new web/UI framework called Polymer that is currently available as a pre-alpha. Also, please be sure to check out the three new articles on Flippin' Awesome this week covering topics in CSS, LESS, Sass and JavaScript. Tutorials Eric Feminella explains how to use the method chaining pattern to both simplify your API and make it more fluent. Fluent APIs and Method Chaining Chris Coyier shows how to create a cool slider with sliding backgrounds effect similar to the Yahoo Weather App for iOS in HTML, CSS and JavaScript. Slider with Sliding Backgrounds Christian Heilmann responds to the CSS Tricks “image swivel” demo, giving it his "vanilla web diet" treatment. Giving “image swivel” the vanilla web diet treatment Gary Sieling shows how to do full-text indexing with client-side JavaScript, based upon PDF.js and using Lunr. Building A Full-Text Index In Javascript David Walsh shows how to fix an issue where by buttons in Firefox are a few pixels larger than in other browsers. Firefox Button Height Fix Alex Young explains a technique to "rotate" the subject of a photo by hiding/showing multiple stacked photographs. Photo Swivel Mary Lou shares an experimental morphing devices slideshow using CSS Transitions for showing responsive web design screenshots. Morphing Devices David Walsh explains how to use CSS counters for incrementing and in generated content. CSS Counters Dr. Axel Rauschmayer continues his series on JavaScript quirks, focusing on the scope of variables and hoisting. JavaScript quirk 6: the scope of variables Alex Walker shows how he built the functionng Pong game demo in just HTML and CSS. CSS3 Pong: Insane things to do with CSS #17 Stephen Burgess shares a cool experiment creating dynamic bezel lines with HTML canvas and JavaScript. Dynamic Bezel Lines Experiment Alessandro Vendruscolo explains how to use CSS animations to detect, in JavaScript, when a media query is triggered. Media Query Change Detection in JavaScript Through CSS Animations Raymond Camden continues his JavaScript design patterns series with a practical example of the revealing module pattern. JavaScript Design Patterns - The Revealing Module Pattern David Walsh shows that it is possible to have multiple background CSS animations but with caveats. Multiple Background CSS Animations Alan Stearns posts an example demonstrating how CSS Regions allow you to define where content flows. Define flow areas directly with CSS Regions Cody Lindley created this thorough reference for using regular expressions in JavaScript. Definite bookmark material. JavaScript Regular Expression Enlightenment Alan Greenblatt shows the technique he used to create a soft blur effect using CSS Filters. Creating a Soft Blur Effect with CSS Filters Libraries and Frameworks Mária Jur?ovi?ová shares many useful, and lesser known, tips and tricks for LESS CSS. LESS Tips and Tricks Jaime Quiroz shares the code and techniques he used to create a 3D CSS animated box with Sass and Compass. Create a 3D CSS Animated Box with Sass Renaun Erickson shows how he built a 3D sample using three.js by compiling ActionScript via the Randori.js project. Code Three.js in ActionScript with Randori Compiler Alex Young continues his AngularJS tutorial series. In this edition he explains how to write tests and mock data. AngularJS: Tests Krasimir Tsonev walks through building a real-time web chat application using ExpressJS and Socket.io. Real Time Chat With NodeJS, Socket.io and ExpressJS Mobile Andrew Trice shows you how to build your PhoneGap apps using the newly released Android Studio. PhoneGap & Android Studio Joseph Labrecque posts how to use JSON to save more complex objects in local storage. PhoneGap: Saving Arrays in Local Storage New and Updated Libraries and Frameworks At Google I/O, Google announced a new web UI framework called Polymer that includes core platform features and a web application framework. Polymer Project Bookshelf is a promise based ORM for Node.js that extends the Model & Collection foundations of Backbone.js. Bookshelf.js - Javascript ORM with some Backbone Stampit lets you create JavaScript objects from reusable, composable behaviors. Version 0.2. was just released. Stampit 0.2 Released Codeblock.js turns example code into editable, runnable code blocks that visitors can poke at and play with. Codeblock.js Etc. Lee Brimelow shows off a responsive design plugin he's building for Brackets that looks really impressive. Responsive Design Tool for Brackets GitHub ArchiveRoom lets you explore GitHub archive data in 3D in the browser. Not hugely useful but cool. GitHub ArchiveRoom - Explore your GitHub archive data in 3D!

Posted by on 20 May 2013 | 9:20 am

Best of JavaScript, HTML & CSS - Week of May 6, 2013

While there were a lot of great tutorials and new projects, as expected, this week, only one new project has the ability to thoroughly transform a common interaction with the browser and web pages. This project, of course, is fartscroll.js by the Onion. Enoy! Tutorials Alex Grande shares lessons from his own experience for tacklng web design as developer. Web Design Tips for Developers Zoltan Hawryluk shows how you can create a cross-browser image gallery that sits behind a clipped image using polyclip.js. Creating Image Galleries with Clipped Images Using CSS Pointer Events and SVG Aaron Hardy discusses the concepts of dependency injection and inversion of control containers in JavaScript. Dependency Injection And IoC Containers David Walsh shows how to have external JavaScript script get properties from its own script tag. Referencing a Script’s Own Tag Paul Lewis discusses what can trigger painting in the browser, and how you can prevent unnecessary paints. Avoiding Unnecessary Paints Dudley Storey explains how to use the CSS :empty selector and some potential use cases for it. Vanishing Acts: The CSS :empty Selector Sayanee Basu explores ten new features coming in ECMAScript 6. Use ECMAScript 6 Today Dominic Szablewski wrote an MPEG1 Video Decoder in JavaScript as a fun experiment and shares his experience. MPEG1 Video Decoder in JavaScript Chris Coyier shows techniques to create line clamping, whereby text is limited to a certain number of lines, using CSS and JavaScript. Line Clampin' Pedro Botelho creates a semo that showcases a ton of page transition effects using CSS animations. A Collection of Page Transitions Libraries and Frameworks Excellent and thorough walkthrough of RequireJS fundamentals by Burke Holland. RequireJS Fundamentals Dan Riti discusses TBone, a Backbone extension to remove the complexity of manually managing data dependencies. Relieve Event Binding Aches in Backbone.js David Graunke demonstrates how to build a simple spreadsheet application in 20 minutes using Angular.js. Building a Spreadsheet in 20 Minutes with Angular.js Alex Young continues his AngularJS tutorial series building a feed reader with this edition focused on data binding. AngularJS: Managing Feeds Ben Nadel shares HashKeyCopier, an AngularJS utility class he created for merging cached and live data. HashKeyCopier - An AngularJS Utility Class For Merging Cached And Live Data Mobile Jim Cowart explains finite state machines and they can help manage online/offline capabilities in your mobile app. Is This Thing On? (Part 2) New and Updated Libraries and Frameworks As the name implies, CSS Modal are modal windows built in pure CSS. CSS Modal Easywebworker has an API intended to make it easily execute web worker functions from the browser. Easywebworker Simplify.js is a JavaScript 2D/3D polyline simplification library to boost performance while retaining line shape. Simplify.js - a high-performance JavaScript 2D/3D polyline simplification library Two.js is a 2D drawing api that is renderer agnostic, meaning you can use the same api tfor svg, canvas, and webgl. Two.js Version 2 of the soma.js framework includes dependency injection. soma.js v2 write scalable javascript apps Swarm is a JavaScript real-time model sync library that uses WebSocket in the browser and node.js on the server. Swarm: real-time model sync library Dookie is a library built on top of the Stylus CSS preprocessor and provides useful mixins, utilities and functions. Dookie css library For those of you that think JavaScript stinks, the Onion has created Fartscroll.js. fartscroll.js by theonion Etc. Raymond Camden updates his Edge Inspect Viewer app built with Node, Express and Topcoat. Update to my Edge Inspect Viewer Some really great advice from Peter Cooper on how to promote your libraries and code projects. How to Spread The Word About Your Code The Adobe Web Platform team open sources a demo app that showcases CSS Custom Filters. Custom Filters Demo App Available on GitHub Adobe explores the future of digital layout using content from National Geographic. Adobe Explores the Future of Responsive Digital Layout with National Geographic Content

Posted by on 13 May 2013 | 8:38 am

Best of JavaScript, HTML & CSS - Week of April 29, 2013

As usual, a number of great posts this past week with no particularly discernible trend. Hopefully everyone attending Adobe MAX, which kicks off today, is having a great time. I am wishing I were there (this is my first time missing since joining Adobe). Tutorials Joshua Bader shares a cool effect that uses CSS and JavaScript to create a 3D effect on items that adjusts as the page is scrolled. 3D Inset Parallax Effect Steve Faulkner explains how you should mark up subheadings, subtitles, alternative titles and taglines now that the hgroup is obsolete. How to mark up subheadings, subtitles, alternative titles and taglines Dr. Axel Rauschmayer continues his series on JavaScript quirks by discussing how to handle parameters to a function. JavaScript quirk 5: parameter handling Hugo Giraudel shows how to combine CSS counters and the figure element to automatically number figures in a web page. Automatic Figure Numbering with CSS Counters Molly Holzschlag posts a good, thorough overview of the HTML5 canvas. All About HTML5 <canvas> Horia Olaru discusses Chromium Embedded Framework as a cross-platform way to display HTML content in a desktop app. The Chromium Embedded Framework Terrence Ryan shows how to recreate an interactive Facebook Chatheads interface entirely in HTML and CSS. Facebook Chatheads in CSS Libraries and Frameworks Burke Holland tells you the 5 things you should stop doing with jQuery. Are you doing them? 5 Things You Should Stop Doing With jQuery Learn how to fire up customizable local web servers on NodeJS and use Edge Inspect for easy local and device web app testing. Quick and Easy Local and Device Web App Testing Rod Vagg shows how to use a LevelDB data store within your Node app. LevelDB and Node: Getting Up and Running Pamela Fox explains the issues she was having with Backbone widgets and history management and how she used jQuery BBQ to resolve them. Managing history in Backbone widgets with jQuery BBQ Rey Bango continues his Ember tutorial series with this part focusing on using Handlebars to define the interface. Getting Into Ember: Part 4 Garann Means explains how to use Node to easily mock up the front and back end of applications. Node at Work: A Walkthrough Addy Osmani shows how you can use Grunt and grunt-traceur to author In ES6 and transpile to ES5. Author In ES6, Transpile To ES5 As A Build-step: A Workflow For Grunt Mobile Raymond Camden demonstrates how to use progress event to display the status of a file transfer in PhoneGap apps. Using the Progress event in PhoneGap file transfers Jim Cowart starts a series exploring how to detect and manage online/offline connectivity in web/mobile applications. Is This Thing On? (Part 1) Raymond Camden explores the variety of notification options on PhoneGap for iOS. Visual comparisons of PhoneGap Notification UIs New and Updated Libraries and Frameworks Outside of bug fixes, Cordova 2.7 includes new features to the InAppBrowser. What's new in Cordova iOS 2.7.0 Intern is intended to be a versatile, easy-to-use, standards-based browser testing stack for JavaScript. Intern: A next-generation JavaScript testing stack Gallery CSS is a pure HTML and CSS gallery (as in, no JavaScript). Gallery CSS grunt-webfont will generate custom icon webfonts from SVG/EPS files via Grunt. grunt-webfont Sco.js is a Bootstrap extension that aims to improve upon some of the existing components. Sco.js : a twitter bootstrap javascript extension The Brackets Sprint 24 build is a major release with advanced JavaScript intelligence, Quick View and much more. Brackets Sprint 24 Build The iio Engine is an app framework for HTML5 that is built with canvas and JavaScript and interfaces with Box2D. iio Engine Etc. The latest issue of Appliness featuring tons of tutorials and an interview with Faruk Ates. May Issue with Faruk Ates! Starling.js is a JavaScript and HTML5 canvas port of the popular Flash game framework and is coming soon. Introducing Starling.js Catch up on April's HTML, CSS, JavaScript and Mobile Content on Flippin' Awesome. April's HTML, CSS, JavaScript and Mobile Content on Flippin' Awesome

Posted by on 6 May 2013 | 7:39 am

Build Your First Mobile App with PhoneGap Build

As many of you know, I recently launched a new web site for articles and tutorials covering web and mobile development called Flippin' Awesome. One of the features I've been releasing over the last month was a detailed 7 part series I wrote covering how to build a mobile app using jQuery Mobile and PhoneGap Build. This was based on a workshop I gave at Web Unleashed last year and walks through in detail every step of the process. It only assumes you have some web development experience and does not require any prior experience building mobile apps or using PhoneGap. If you are looking for a way to get started, please check it out. All seven parts are listed below. Create Your First Mobile App with PhoneGap Build Setup Using PhoneGap Build Connecting to an API Adding jQuery Mobile Adding Pages with jQuery Mobile Using the Storage API Using the Nofication API  

Posted by on 3 May 2013 | 12:59 pm

Designing responsively from the ground up with Edge Reflow

A few weeks ago, my latest Adobe Inspire article was published. It follows up an intro to responsive web design article I wrote for the prior issue. In this case, it imagines I were to redesign this web site using Edge Reflow (currently available as a preview via the free Creative Cloud subscription) to make the design responsive. Obviously, the current version is not at all responsive (laughably unresponsive even). However, if I were to take my initial assets from Photoshop to build a layout in Edge Reflow, I could then hand that to my web developer (still me in this scenario) who could interactively see how it should look and behave in various widths and use the CSS and other design hints inside Reflow to guide his development of the HTML and CSS for the actual site. It's a bit of a new workflow from what many teams are accustomed to right now, where they may hand off a series of PSD's that staticly illustrate how various screen sizes should look (I know because I received a ton of questions along these lines when I have presented it both to the HTML5 Developers Conference and the Adobe Community's Tech Wednesday). In this case, the designer and developer are, in essence, "speaking the same language." Hope you enjoy the article.

Posted by on 2 May 2013 | 3:15 pm

Best of JavaScript, HTML & CSS - Week of April 22, 2013

This was a crazy busy week filled with awesome posts. I know there is a lot below but, seriously, you should set aside some time to browse through and read the ones that catch your eye because there are some posts this week that you really ought not to miss. Between the series on JavaScript quirks and the "mess" of JavaScript inheritance and others, it seems JavaScript's uniqueness is a hot topic this week. Enjoy! Tutorials Donovan Hutchinson shows how to recreate the title animation from Zelda: A Link to the Past using just HTML and CSS. Zelda: A Link to the CSS Pavan Podila explains the promise pattern and shows how to use this in JavaScript to validate a form. Promise-Based Validation Rodney Rehm shares the quirks and issues you may face when working with CSS3 transitions. Thank God We Have A Specification! Mary Lou shares how to create a YouTube menu effect whereby clicking a menu icon slides to reveal menu items beneath. Simple YouTube Menu Effect David Walsh shows how to create background animations using just CSS. CSS Background Animations Shane Tomlinson on how to writing testable front-end Javascript examines common anti-patterns and their solutions. Writing Testable Frontend Javascript Part 1 – Anti-patterns and their fixes Mary Lou shares an experimental responsive full-screen layout with page transitions (feels kinda Metro). Fullscreen Layout with Page Transitions Kyle Simpson finishes his series on JavaScript objects by showing the code for architecting objects based on his proposals. JS Objects: De"construct"ion Kyle Simpson continues his series on JavaScript object by discussing how trying to make JS more "inheritance friendly" is a distraction. JS Objects: Distractions Kyle Simpson describes misconceptions about JavaScript's prototype and how he believes "inheritance" is not a helpful label for describing how JavaScript works. JS Objects: Inherited a Mess Christophe Coenraets on how to build pluggable data adapters to decouple your web and PhoneGap apps from a specific data access strategy. Building Pluggable and Mock Data Adapters for Web and PhoneGap Applications Louis Lazaris shows how to combine the tabindex with :focus to make any element easily change styles on click. Using tabindex with :focus Dr. Axel Rauschmayer continues his series on JavaScript quirks by discussing normal equality (==) and why you shouldn't use it. Quirk 3: normal equality (==) Chris Coyier explains the concept of magic numbers in CSS, why they are bad and how to avoid using them. Magic Numbers in CSS Jesse Cravens shows how to set up push notifications to the browser using server sent events and a Ruby back-end. Push Notifications to the Browser with Server Sent Events Julien Knebel builds a 3D rotating icosahedron using just CSS/Sass and HTML. CSS 3D icosahedron Dr. Axel Rauschmayer continues his series on JavaScript quirks with a short post on automatic global variable creation. JavaScript quirk 4: unknown variable names create global variables Ana Tudor builds a very cool circular tooltip with just HTML and CSS. Circular Tooltip Libraries and Frameworks See how you can automate common file system and templating tasks for developers using Automaton and Node. Task Automation with Automaton and Node Alex Young continues his AngularJS tutorial covering controllers, views, directives, data binding and routing. AngularJS: Rendering Feeds A good introduction to package managers for front-end developers including NPM and Bower by Cody Lindley. Package Managers: An Introductory Guide For The Uninitiated Front-End Developer Andrew Burgess shows how to get started with the Connect framework on NodeJS. Meet the Connect Framework Matt Baker explains how using Reactive.js with D3 can simplify the process of rendering and updating charts. Reactive Charts with D3 and Reactive.js Mobile The final part of my series on creating your first mobile app with jQuery Mobile and  PhoneGap Build covers the Notification API. Create Your First Mobile App with PhoneGap Build – Using the Notification API Christophe Coenraets builds a version of his employee directory sample app that stores application data in the cloud using Parse's JavaScript SDK. Sample App: Storing your Application Data in the Cloud with Parse.com and the JavaScript SDK The HTML5 VIDEO tag on iOS downloads between 61K to 298K of video data without the user initiating playback. HTML5 VIDEO bytes on iOS New and Updated Libraries and Frameworks ScriptCraft is a Minecraft mod that lets you create mods using Javascript. ScriptCraft observe-shim is a shim for the proposed object.observe JavaScript functionality in ECMAScript Harmony. observe-shim Snap.js is a JavaScript ibrary for creating Facebook and Path style side menus. Snap.js Verlet-js a verlet integration physics engine in JavaScript that supports particles and distance and angular constraints. Verlet-js Editr is HTML, CSS and JavaScript playground that you can host on your server. Editr ptb/flexgrid is a responsive grid system using the flexbox specification.s ptb/flexgrid Etc. LayoutIt! is a drag-and-drop interface builder that creates a UI using Bootstrap. LayoutIt! - Interface Builder for Bootstrap Another new Brackets extension, JSDownloader by Raymond Camden makes it quick and easy to download common libraries. New Brackets extension - JSDownloader Piotr Walczyszyn released a new Chrome extension called Responsive Inspector with a bunch of features for testing responsive web designs in the browser. Responsive Inspector (beta) released! Dan Schaffer on a new Brackets extension for building and running JavaScript unit tests using Jasmine, QUnit or YUI. xUnit – JavaScript Unit Testing Extension The new markdown extension for Brackets by Glenn Ruehle will live preview markdown text. Markdown Extension for Brackets Tom Krcha shows how to export Illustrator vector shapes as JavaScript and HTML5 Canvas using the his Drawscript plugin. How to bring Illustrator vector shapes into JavaScript HTML5 Canvas with Drawscript

Posted by on 29 April 2013 | 8:36 am

Best of JavaScript, HTML & CSS - Week of April 15, 2013

This week was filled with articles and tutorials around any number of libraries, tools and frameworks including jQuery, Grunt, Ember, Node and more. New releases include jQuery 2.0 which drops legacy IE support and hand.js, a polyfill for pointer events. Enjoy! Tutorials Raymond Camden shows how to build a Google Maps proof-of-concept application that has multiple updating markers. Building a Google Maps Application with Updating Markers Mary Lou demonstrates how to build a space-saving, responsive multi-level menu. Responsive Multi-Level Menu Dr. Axel Rauschmayer explains the differences between several means of checking for undefined in JavaScript. Checking for undefined: === versus typeof versus falsiness Chris Coyier discusses several techniques for using custom fonts without a performance hit. Preventing the Performance Hit from Custom Fonts TJ VanToll posts a comprehensive reference of CSS pseudo-elements to style form controls on various browser engines. List of Pseudo-Elements to Style Form Controls Anush creates a good reference on all the available CSS Selectors and how to use them. CSS Selectors Adam Hyland starts an interesting and informative deep dive into random number generation in JavaScript. Random Number Generation in JavaScript Chris Coyier uses ::before and ::after CSS pseudo elements to create line-on-sides Headers. Line-On-Sides Headers Libraries and Frameworks Peter Keating shows how you can automate CSSCSS redundancy checks using his Grunt plugin. Automating CSSCSS using Grunt Remy Sharp discusses the evolution of his use of jQuery and when and where it is most useful or beneficial to rely on it. I know jQuery. Now what? Ryan Anklam walks through how to get started creating tasks in Grunt to automate your workflow. Kick Ass Cross-Platform Workflow With Grunt Christophe Coenraets shows how to build RESTFul services powered by Node.js, MongoDB and the Express framework. Implementing RESTFul Services with Node.js and MongoDB Alex Young starts a new tutorial series building a feed reader with AngularJS, YQL and Yeoman. AngularJS: Let's Make a Feed Reader Rey Bango continues his tutorial series on learning Ember.js by covering accessing and managing data within Ember. Getting Into Ember.js: Part 3 Ariya Hidayat shows how to use PhantomJS to capture web pages as images and even how to limit the captured area. Web Page Clipping with PhantomJS Christophe Coenraets does a major overhaul of his very popular sample Backbone.js and Twitter Bootstrap application. Sample Application with Backbone.js and Twitter Bootstrap: Updated and Improved Dave explains a new SproutCore feature, classNameBindings, that adds/removes CSS classes based upon local properties. classNameBindings: Dynamic CSS classes made easy Mobile Posted part 6 of my guide to creating your first mobile app with PhoneGap Build which covers using the storage API. Create Your First Mobile App with PhoneGap Build – Using the Storage API Tomomi Imura covers handling touch events versus mouse events versus the new pointer events proposal. Touchy-Feely with DOM Events: Rethinking Cross-Device User Interaction New and Updated Libraries and Frameworks The new jQuery is smaller, lighter and faster but in exchange leaves behind support for IE 6, 7 and 8. jQuery 2.0 Released Packery uses the  uses a bin-packing algorithm to allow you to create complex layouts. Packery Hand.js is a polyfill for supporting Pointer Events for handling mouse, pen and touch input. Hand.js: a polyfill for supporting pointer events on every browser tus aims to create an open protocol, as well as client and server implementations for resumable file uploading. Handling Uploads Sucks Sly is a JavaScript library for one-directional scrolling for scrollbar replacement, parallax scrolling and more. Sly Etc. Andrew Trice shows how to add gesture support in Edge Animate compositions using hammer.js. Enabling Gestures in Edge Animate Compositions Raymond Camden shares a proof of concept Brackets extension that relies on the built-in Node support. Proof of Concept - Connecting a Node app with Brackets Christian Cantrell shares a video to introduce CSS FilterLab for creating custom CSS Filters. CSS FilterLab: A Visual Playground for Custom Filters

Posted by on 22 April 2013 | 8:25 am

Best of JavaScript, HTML & CSS - Week of April 8, 2013

A lot of general, framework-less HTML, CSS and JavaScript tutorials this week and a lot of newly released libraries. Also, please be sure to check out the three new articles that just launched on my new site for web developers: FlippinAwesome.org. Tutorials Steve Souders takes a look at how different browsers behave with the HTML5 video preload attribute. HTML5 Video Preload Thomas Reynolds takes a look at how the Google I/O 2013 experiments for animation with organic motion were built. Case Study: Google I/O 2013 Experiment Chris Mills creates an advanced cross-browser flexbox example that addresses differing levels of flexbox support. Advanced cross-browser flexbox A good crash course on CSS transitions from Paula Borowska. All the Glory of CSS Transitions Peter Gasston discusses the new HTML template element showing how to use it today in Chrome Canary & Firefox nightly. Introducing HTML's new template element Christian Cantrell shows some CSS regions and exclusions demos running on Chrome for mobile. CSS Regions and Exclusions on Mobile Razvan Caliman explains how you can use CSS Regions to create adaptive layouts where controls flow into regions. Adaptive Web App UI with CSS Regions Ben Nadel experiments with a method for determining the type of JavaScript variable. Looking At Prototypal Inheritance To Determine Data Types In JavaScript Gabriele Romanato explains a number of ways you can utilize CSS generated content. How To Benefit From CSS Generated Content And Counters Ariya Hidayat explains how most modern browsers will automatically inline certain JavaScript functions for performance reasons. Automatic Inlining in JavaScript Engines Dr. Axel Rauschmayer discusses another JavaScript quirk, that the language has two values that represent an empty value. JavaScript quirk 2: two "non-values" – undefined and null Libraries and Frameworks Sara Soueidan shows how you can recreate the type of animations and visualizations on Windows 8’s home screen using HTML, CSS and JavaScript. Creating Windows-8-like 3D animations with CSS3 and jQuery Aurelio De Rosa shows how he built a polyfill for the HTML’s new placeholder functionality as a jQuery plugin. How to create an advanced HTML5 placeholder polyfill Mobile I continue my series on building your first mobile app by showing how to add new pages to the app with jQuery Mobile. Create Your First Mobile App with PhoneGap Build – Adding Pages with jQuery Mobile Shazon Abdullah details what’s new in Cordova iOS 2.6.0. What's new in Cordova iOS 2.6.0 New and Updated Libraries and Frameworks Yeoman releases 1.0 beta 4 including Windows support and refreshed Angular, Backbone and Ember generators. Yeoman Update: announcing 1.0 beta 4, Windows support, Refreshed Angular, Backbone, Ember generators The Brackets Sprint 23 build is available and includes live highlighting for HTML and a new toolbar. Brackets Sprint 23 Build Helium is a JavaScript tool that scans your site to find and display unused CSS. helium-css Andy Matthews revives an abandoned jQuery plugin called Sticky which allows you to easily create notifications. Sticky-Seriously simple notifications for jQuery Matt Baker explains functional reactive programming and how to use the Reactive.js library to do this in JavaScript. Reactive.js: Functional Reactive Programming in Javascript Responsive Nav is a JavaScript plugin to create a toggled navigation for small screens using touch events and CSS3 transitions. Responsive Nav — Responsive Navigation Plugin Squel.js has an API for creating SQL query strings in Javascript, recommended for server side JS development. Squel.js - SQL query string builder for Javascript Collage.js is a framework for building interactive collages on a limitless two-dimensional canvas. Collage.js Lungo is an HTML5 cross-device framework by Tapquo that is available for iOS, Android, Blackberry and FirefoxOS. Lungo - HTML5 Cross-Device Framework Etc. Addy Osmani covers using the Chrome DevTools Heap Profiler and Timeline Memory views to diagnose memory leaks. Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools My latest article for Inspire shows you how to get started building responsive web designs using Adobe Edge Reflow. Building responsive web designs with Adobe Edge Reflow

Posted by on 15 April 2013 | 7:40 am

On Corporate Community Management

The role of community manager has become a burgeoning career over the past few years, even if it is still somewhat loosely defined. By one definition perhaps, I have been a community manager for many years going back to my days running the local user group and conference. For the past two and a half years though, I was actually employed as a community manager in various capacities by Adobe. Mine was probably not a typical community manager role, if such a thing exists. Nonetheless, there are issues community managers face seem to be in common. Therefore, I decided to share some of my own guidelines and experience, specifically as it relates to representing a large corporation, in the hopes that it will benefit someone. I should note that these guidelines are my own and don’t represent my employer. Not that I think they’d disagree, but just to be clear. None of these will be earth shattering (and given that I don’t read a lot on the topic, are probably not new) but they have served me well. Don’t rest on your company name or budgetOne of the things that I’ve seen happen from time to time is that people from big corporations come in and simply assume that the company they represent gives them stature in the community. If there is one sure way to turn off the community you represent, this is it. Even if you have that stature or garner that attention, be humble about it. Think of it this way, people generally love Lebron James when he gets attention by playing hard and excelling but hate him when he seemed to take the adoration for granted. You probably aren’t Lebron James, so don’t take the attention you get for granted. Remember community is an ecosystemIn any ecosystem, some elements might garner more attention than others, but even the ones we rarely see and easily ignore play a vital part in the overall health. The point here is don’t always go after the big names - the guys that speak at conferences and seem to have their own fan club. Sure, they are important, but not at the risk of ignoring the rest of your community. In fact, when push comes to shove you’ll often find it is the guys just getting the job done (using your product or service) that will be there when you need it most. They tend to be invested in your product or service for their jobs and at their companies in ways that the big names aren’t and are often in a unique position to help when you need it provided you’ve made them feel welcome. Know what people are doingThis is probably my most important rule but it isn’t easy at all to do. The point here is, I rarely approach someone without first knowing something about them. If I am approaching someone who is a well-known author or speaker, I have read their articles, I subscribe to their blog and/or Twitter, and I have probably watched their presentations online. If I approach someone at a company, I try to see what the company has been up to. Granted, I tend to do all this on a daily basis just by reading a ton and following a lot of people. However, that can be very time consuming. If that isn’t possible, here’s a way to approach it: before going to a conference or trade show, research the speakers and sponsors you want to talk to (follow their blogs, Twitter, etc) and even follow whatever hashtag or search exists for the event to see who some of the attendees are and what they are saying. You are a professional, and I doubt you’d show up to an interview unprepared, so don’t think you can just wing it in your job. Attend the community events (don't just socialize with coworkers)I have seen this too many times. Well known community manager (or community whatever) from big name company X shows up at the conference right before his/her session and then you never see him/her again. This ties into my first point about not resting on your company name and reputation. Go to the speaker dinner (if you’re a speaker), attend the general conference social events, hang out with attendees whenever possible. If your coworkers are there, by all means hang out, but make sure you make time to be seen outside your little group. Also, when you go to social events, don’t be afraid to walk up to someone you don’t know and say hello. It is your job to meet them not the other way around. Answer emailsYes, you are busy. It’s very possible, if not likely, you receive more than the average amount of email. However, the worst thing you can do is not answer them. In my own experience, this usually isn’t done out of malice or a sense of superiority. Generally, in my case, I want to help and I want to get a solid answer, so rather than admit I don’t have the time, I postpone responding until the magical day I will suddenly find time. Of course, months can pass and it doesn’t happen, but by then you are now too embarrassed to respond with nothing. If you don’t have the time to answer right away, just say so. People will understand (and if they don’t they didn’t really deserve your help anyway). What is more rude? Telling someone you don’t have the time to properly answer/help at the moment but wanted to respond? Or leaving their email perpetually unanswered and ignored? This leads right into my final guideline: Don’t overcommitI think I am fairly successful at the prior guidelines. I may fail from time to time but I shoot a solid percentage. However, this guideline I fail at regularly. Because of the high profile nature of your role and whatever else you may bring to the table, you will often be asked to do many things. As a community manager, you probably are the type to want to please everyone and help out as much as you can. This frequently leads to overcommitting, if not on budget, then on time. It’s probably in your nature to overcommit, so this rule should probably say “Don’t overcommit too much.” The point is, be wary of how much you commit. Promising something and not coming through will be worse for you and your company than not promising in the first place. Your community probably knows the demands on you, so be open and honest with them. What are your guidelines?Obviously many of these are probably most applicable, at least in the way I expressed them, to the industry I work in. For example, many of these apply to attending events of some sort, which may not apply to you. I’d love to hear some other people’s own personal guidelines, so please share.  

Posted by on 10 April 2013 | 3:18 pm

Best of JavaScript, HTML & CSS - Week of April 1, 2013

This week features a lot of library and framework-focused tutorials including jQuery, Ember, Sass, Jasmine, Grunt and Backbone. It was an active week despite everyone being occupied by posting and reading about Blink and, to a lesser degree perhaps, asm.js. I am also happy to announce the launch of 3 new articles on my new web development tutorials site Flippin' Awesome on the topics of Jasmine and Backbone, Windows Phone 8 with PhoneGap and PhoneGap Build with jQuery Mobile. I apologize for singling these out, but I have been spending much of my nights and weekends getting this site rolling - so I hope you enjoy it. Tutorials Dirk Schulze explains how the new CSS Masking spec brings clipping and masking graphics into HTML. CSS Masking David Walsh shows how you can use CSS @supports and CSS.supports in JavaScript to detect browser feature support. CSS @supports John Resig explains where Asm.js came from and why it exists. Asm.js: The JavaScript Compile Target Raymond Camden shows how to delay playing an Edge Animate animation until it is visible on the page. Delaying an Edge Animate asset until visible Jason Grigsby explains how embedding media queries inside SVG images lets you define how an image should look at different sizes without knowing how it will be used. Media Queries in SVG images Cloud Four Blog Alan Stearns shares a technique for defining presentational boxes with shadow DOM. Defining Presentational Boxes with Shadow DOM Dr. Axel Rauschmayer shows how you can avoid some common bugs in your JavaScript code by enforcing the use of toString(). Enforcing toString() A nice article by Carrie Cousins explaining the different between Em and Rem and their place in responsive web design. What's the Deal With Em and Rem? Sarah Forst shows how to make fancy buttons using just CSS. Shiny CSS Buttons, No Images Required Dr. Axel Rauschmayer starts a series on JavaScript quirks by covering the various ways the language implicitly converts values. JavaScript quirk 1: implicit conversion of values Libraries and Frameworks Ken Tabor shares how-to's and advice on using Jasmine to unit test your Backbone.JS application. Backbone Model Unit Testing with Jasmine Hugo Giraudel demonstrates how to position items on circle with CSS and Sass. Items on circle with CSS Jack Franklin shows how you can create custom builds of jQuery, with only the parts you need, today using Grunt. Custom jQuery Builds with Grunt Jonathan Creamer walks through all the steps to build a large, maintainable and testable Knockout.js application. Building Large, Maintainable, and Testable Knockout.js Applications Joe Zimmerman continues his detailed introduction to Backbone.Marionette by discussing its module system. A Thorough Introduction To Backbone.Marionette (Part 2) Alex Young continues his Backbone.js tutorial series by covering using Backbone with jQuery plugins. Backbone.js Tutorial: jQuery Plugins and Moving Tasks Jack Franklin shows how you can write your own custom CSS methods using jQuery. jQuery CSS Hooks Rey Bango continues his tutorial series by walking through the first steps in creating a basic Ember app. Getting into Ember.js: The Next Steps Mobile I continue my series on creating your first mobile app with PhoneGap Build, with a focus on adding jQuery Mobile. Create Your First Mobile App with PhoneGap Build – Adding jQuery Mobile Jesse McFayden explains everything you need to know to start developing for Windows Phone 8 with Apache Cordova. Developing for Windows Phone 8 in Apache Cordova New and Updated Libraries and Frameworks Sidr, by Alberto Varela, is a jQuery plugin for easily creating side menus. Sidr - A jQuery plugin for creating side menus Huey is a Javascript utility that finds the dominant colour of an image and returns it as an RGB array. huey Store is a simplified and improved API for accessing browser localStorage. store Ariya Hidayat shows how to use groundskeeper to automatically remove any console.log calls in your JavaScript before deploying. Automagic Removal of JavaScript Logging Chardin.js is a jQuery plugin that provides a simple way to overlay user instructions on your site. Chardin.js/ Etc. The Appliness April issue is out and features an interview with Chris Coyier and tons of tutorials. Appliness April with Chris Coyier! Sarah Hunt posts a video showing how to bring a responsive Animate composition into Edge Reflow. How to add an Edge Animate Project to Edge Reflow Output Eric Bidelman shares his thoughts on Chrome's new rendering engine called Blink. Blink. Chrome's new rendering engine The new release of Edge Reflow includes improved layout and styling capabilities and improved performance/stability. Reflow New and Improved! Peter Farland discusses how you can potentially infer JavaScript variable types and how this is being used to create type-aware code hinting in Brackets. Type-Aware JavaScript Code Intelligence

Posted by on 8 April 2013 | 8:51 am

Best of JavaScript, HTML & CSS - Week of March 25, 2013

This is a very, very full update this week. I also have my own announcement to make. I have recently launched a new site featuring articles and tutorials for web designers and developers called FlippinAwesome.org. I have already begun posting a multi-part series teaching PhoneGap Build as well as some great contributions from Jen Looper and Aurelio De Rosa. Please check it out and share your thoughts - and I am hoping I can make this a valuable ongoing resource for you. Tutorials Jonathan Sampson and Ralph Whitbeck show how to build Windows Store apps for Windows 8 using jQuery. Building Windows Store Applications With jQuery 2.0 Boris Smus shows how to serve high quality images on the web today, without polyfills, JavaScript and CSS hacks. Easy High DPI Images Chris Coyier shows how to have elements slide-in as you scroll down similar to the G+ app on Android using CSS and JavaScript. Slide In (as you scroll down) Boxes Zoe Gillenwater demonstrates that you can add a CSS transition to the z-index property but it might not work as you expect. CSS3 transitions and z-index Very cool tutorial by Donovan Hutchinson shows how to make a 3D rotating iPhone with CSS. Make a 3D iPhone with CSS Bem Jones-Bey explains what "shape-outside" is in CSS exclusions and how to use it. Freeing the Floats of the Future From the Tyranny of the Rectangle Hans Muller uses CSS exclusions to create a polygonal shape-inside that penetrates an HTML element's content box. Hans Muller's WebKit Blog: Penetrating Text Kevin Dangoor shows how the Brackets Quick Open feature was built and the JavaScript used to get the best matches. Brackets Quick Open: That’s No Regex! Divya Manian examines the practice of using long decimal percentage values in responsive design, how it can break in Safari and alternatives you can use. Using decimal percentage values in responsive design Alex Sexton shares tips and techniques for optimizing and deploying large JavaScript applications. Deploying JavaScript Applications Philip Walton shares some strategies for dealing with the global nature of CSS, whether in your own project or when creating a library. CSS: Everything is global and how to deal with it Libraries and Frameworks Burke Holland examines Angular Directives, explaining what they are, what problems they solve and how you can use them to create your own re-usable components. AngularJS Directives and The Computer Science of JavaScript Kris Schultz teaches the basics of AngularJS by walking through building your first application using the framework. Getting started with AngularJS Alex Young continues his Backbone.js tutorial series, updating to version 1.0 and adding new functionality. Backbone.js Tutorial: Updates for 1.0, Clear Complete Tom Coleman shows how to quickly prototype web applicatoins with Meteor and Meteorite. Prototyping with Meteor Scott Douglass shows how to get your environment set up to begin building EmberJS applications. Ember: Up and Running Node 0.10 includes significant changes to the streams module ad Alex Young explains everything you need to know. Five Minute Guide to Streams2 Mobile I posted the first three parts of a multi-part series walking you through creating your first mobile application with PhoneGap Build and jQuery Mobile. Create Your First Mobile App with PhoneGap Build Saad Mousliki demonstrates how to build a contact manager app using HTML, JavaScript, Wakanda Studio and PhoneGap. Build a Contacts Management App Using HTML5, JS, CSS3, and Wakanda Studio Raymond Camden documents his experiences integrating the Google Analytics plugin with PhoneGap and PhoneGap Build. Google Analytics and PhoneGap New and Updated Libraries and Frameworks CSSDB is a curated collection of CSS, Sass, LESS and Stylus libraries. CSSDB: A Database Of CSS Libraries ScreenCheck is a cool responsive web design tool for testing your website at different screen resolutions. CyberCrab - Responsive Resolution Tester Matteo Bicocchi released a new library based on his efforts to get HTML5 audio to work properly on mobile. Making HTML5 audio actually work on mobile PeerCDN uses WebRTC to serve a site's static resources over a peer-to-peer network of visitors currently on the site. PeerCDN Enyo 2.2 was released including Windows 8, Windows Phone 8 and BlackBerry 10 support. Enyo 2.2: Even More Platforms, List Madness screenfull.js is a wrapper for cross-browser usage of the JavaScript fullscreen API. screenfull.js demo The Brackets Sprint 22 Build includes many of the most requested code editing features and extension installation. Brackets Sprint 22 Build Bootstrap Tag Autocomplete is a Bootstrap plugin to autocomplete Twitter-style tags for contenteditable div elements. Bootstrap-Tagautocomplete cdnjs is a new, open-source CDN that hosts any library - from JavaScript, CSS, SWF and more. cdnjs - the missing cdn Bespoke.js is a microframework for you to build your HTML presentations on. bespoke.js Etc. Mozilla and Epic Games port Unreal Engine 3 to the browser using a "highly optimized version of JavaScript." Mozilla and Epic Games port Unreal Engine 3 to the browser, no plugins necessary Hakitzu: Code of the Warrior is a strategy game designed to teach kids JavaScript while controlling their characters. 'Hakitzu' Teaches Kids to Code With Robot Warriors Nintendo releasing Nintendo Web Framework, a new tool for building apps for the Wii U using HTML 5 and JavaScript. Nintendo hopes to win app and web devs to Wii U with JavaScript tools John McCutchan shows how you can profile mobile HTML5 Apps remotely using Chrome DevTools. Profiling Mobile HTML5 Apps With Chrome DevTools Addy Osmani covers a number of useful Chrome DevTools extensions for popular frameworks and tools. DevTools Extensions For Web App Developers

Posted by on 2 April 2013 | 1:51 pm

Acai Berry Select

Harvested by Brazilians for hundreds of years as a food staple and for their rejuvenating and detoxifying properties, Acai berries (fruit of Amazonian Acai Palms) have been all over the media, from articles in fitness magazines to features on popular television programs like Today show. Click here for your Risk Free Trial