Computer Coding
Home |  ColdFusion |  IBM |  Java |  JavaScript |  Spring |  Misc |  Sign in



HTML5Rocks


Debugging Asynchronous JavaScript with Chrome DevTools

Up your JavaScript debugging kung fu with asynchronous call stack traces in the Chrome DevTools.


Get on the CSS Grid!

When building a Web Application, one of the first things that’s needed is a way to lay out the content of your app.

Lots of designers use imaginary grids to lay out content, whether it’s for a site or app. The CSS group has been working hard to make layouts easier, and as part of that have produced the CSS Grid Layout Module which is now emerging in browsers.

This feature is available to try out in Chrome behind an experimental flag. It’s also implemented in IE since version 10, and likely to be in most browsers soon.

Executive summary

  • CSS Grid Layout lets you define rows and columns for your layout
  • Grids can adapt to make use of available space
  • Content order can be independent from grid container display order
  • Layouts can change based on media queries, making responsive design easier
  • Content can overlap (enabling layout that’s impossible with other methods)
  • Grid Layout is fast

Here’s an overview video that explains a lot about how CSS Grid Layout works (slides are here):

Try it out

Using CSS Grid Layout in Chrome now is easy. First thing you need to do is turn on the experimental flag to enable the feature.

First load the chrome://flags URL and scroll down to the option to Enable experimental Web Platform features as shown below:

Image of experimental flag option

Just click Enable to turn the flag on, and you should see a prompt to restart the browser that looks like this:

Image of Relaunch button

Now just click the Relaunch Now button to restart your browser and you’ll be all set to try out CSS Grid Layout.

Let us know what you think

CSS Grid Layout is a great new primitive for web content, but as usual we’re all keen to hear what developers think about it. There are lots of ways to give feedback – leave a comment here, send mail to the W3C CSS Working Group list with “[css-grid]” in the subject line, log bugs, or blog and tweet what you think of it. We look forward to seeing the great layouts you build with this super useful new feature.


Build with Chrome: Bringing LEGOŽ bricks to the Multi-Device Web

The Build With Chrome team redesigned the site to support both mouse and touch input.


DevTools Digest: Updates to the Developer tools in Chrome 33

Updates to the Chrome Developer Tools: async call stacks, edit locations, goto :line:column


The Yeoman Monthly Digest #3

Allo! Allo! This past month saw the Yeoman community grow to 472 generators. We?re excited to see so much passion for project scaffolding and are working on some new features to enable generators to extend and build on top of each other.

We?ll talk more about this soon, but for now here?s this month?s round-up of featured articles, generators and team blogs. We hope they?re useful!

From the Team blog

Exploring A Generator For Gulp.js

Generators New Year Cleanup!

Updates To Our Grunt, Bootstrap & Other Generators

Yeoman Q1 2014 Roadmap and Roadmap For The Angular Generator

What's New In The Backbone Generator

Sindre Sorhus also created envcheck - a useful environment checker that will double-check you have everything needed to run Yeoman smoothly.

Articles

This month the community have been building full-stack webapps, Hybrid apps and even a remote desktop client with Yeoman generators. We enjoyed reading:

A Remote Desktop Client with AngularJS and Yeoman

Angular Fullstack 1.2.0 available now

Automating React With Yeoman and Grunt

Cordova + Yeoman Web Best Practices v2.0

Building a new Yeoman generator

Goodbye, Sprockets! A Grunt-based Rails Asset Pipeline

Using Yeoman along with the ng-book

Yo Polymer ? A Whirlwind Tour Of Web Component Tooling

Should Yeoman Split Up It's Gruntfiles?

A Workshop On Bower, Yeoman And Flight

Samsung Smart TV app generator for Yeoman

Using Yeoman to scaffold out new websites

Announcing generator-angular-require

Web App with dream team; AngularJS, Cordova, Yeoman & Topcoat

Using the European npm mirror

Scaffold your projects with Yeoman?

Why use Yeoman?

Simple Scaffolding with the Ignite UI Yeoman Generator

Improving Your Development Workflow with Yeoman

Why you should use Yeoman

AngularJS, PhoneGap and my mobile toolset

Featured Generators

This month also saw new generators released for KrakenJS, Meteor, ChaplinJS and a number of other projects. Some of our choice picks:

Scaffold KrakenJS projects

A ChaplinJS generator

Scaffold ESLint rules

Scaffolding for Meteor projects

Scaffold Gulp plugins

Scaffold Gulp files

Scaffold KendoUI apps

Radian ~ A scalable AngularJS framework with a Yeoman generator

Scaffolding for Android

Scaffold Angular + Firebase apps

A generator for DocPad projects

Automating and Provisioning AWS Infrastructure for HTML5 Apps With Yeoman

A generator for mobile webapps

Scaffold slides with the Google I/O template

Simple webapp generator for Yeoman

Yeoman WordPress theme generator ? kickstart a grunting SCSS theme

Scaffold Closure projects

Scaffolding for Gulp webapps

An ExpressionEngine Add-on generator

Scaffold AMD projects

Scaffold Finatra apps

Scaffold pattern libraries

Finally, updates have also been made to our official Ember.js, Mobile WebApp and Karma generators. Changelogs for all of them will be landing soon.

Until next time

If you?ve written an article, given a talk or created a generator you think would be useful to others, please feel free to share it with us on Twitter or Google+. We?re always interested in seeing how our tools are used.

Until the next time we run yo digest, happy scaffolding and don't be afraid - Yeoman is here to help, not replace you :D

With thanks for the rest of the Yeoman team for their reviews


Supercharging your Gruntfile: How to squeeze the most out of your build configuration.

Learn how to squeeze the most out of your Gruntfile, by splitting it across multiple files, autoloading, concurrent tasks and smart notifications.


WebRTC data channels: WebRTC data channels for high performance data exchange

WebRTC data channels for high performance data exchange


Yo Polymer ? A Whirlwind Tour Of Web Component Tooling

Web Components are going to change everything you think you know about building for the web. For the first time, the web will have low level APIs allowing us to not only create our own HTML tags but also encapsulate logic and CSS. No more global stylesheet soup or boilerplate code! It?s a brave new world where everything is an element.

In my talk from DotJS, I walk through what Web Components have to offer and how to build them using modern tooling. I?ll show you Yeoman, a workflow of tools to streamline creating web-apps using Polymer, a library of polyfills and sugar for developing apps using Web Components in modern browsers today.

Create custom elements & install elements created by others

In this talk you will learn:

  • About the four different specs composing Web Components: Custom Elements, Templates, Shadow DOM and HTML imports.
  • How to define your own custom elements and install elements created by others using Bower
  • Spend less time writing JavaScript and more time constructing pages
  • Use modern front-end tooling (Yeoman) to scaffold an application using Polymer with generator-polymer
  • How Polymer super changes creating web components.

For example, to install Polymer's Web Component polyfills and the library itself, you can run this one liner:

bower install --save Polymer/platform Polymer/polymer

This adds a bower_components folder and adds the above packages. --save adds them to your app's bower.json file.

Later, if you wanted to install Polymer's accordion element you could run:

bower install --save Polymer/polymer-ui-accordion

and then import it into your application:

<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">

To save time, scaffolding out a new Polymer app with all the dependencies you need, boilerplate code and tooling for optimizing your app can be done with Yeoman with this other one liner:

yo polymer

Bonus walkthrough

I also recorded a 30 minute bonus walkthrough of the Polymer Jukebox app I show in the talk.

Covered in the bonus video:

  • What the ?everything is an element? mantra means
  • How to use Bower to install Polymer?s Platform polyfills and elements
  • Scaffolding our Jukebox app with the Yeoman generator and sub-generators
  • Understanding the platform features scaffolded out via boilerplate
  • How I functionally ported over an Angular app over to Polymer.

We also make use of Yeoman sub-generators for scaffolding our new Polymer elements. e.g to create the boilerplate for an element foo we run:

yo polymer:element foo

which will prompt us for whether we would like the element automatically imported, whether a constructor is required and for a few other preferences.

The latest sources for the app shown in both talks are now up on GitHub. I?ve refactored it a little further to be more organized and a little more easy to read.

Preview of the app:

Further reading

In summary, Polymer is a JavaScript library that enables Web Components now in modern web browsers as we wait for them to be implemented natively. Modern tooling can help improve your workflow using them and you might enjoy trying out Yeoman and Bower when developing your own tags.

A few other articles that are worth checking out on the subject:


Web apps that talk - Introduction to the Speech Synthesis API

The Web Speech API adds voice recognition (speech to text) and speech synthesis (text to speech) to JavaScript. The post briefly covers the latter, as the API recently landed in Chrome 33 (mobile and desktop). If you're interested in speech recognition, Glen Shires had a great writeup a while back on the voice recognition feature, "Voice Driven Web Apps: Introduction to the Web Speech API".

Basics

The most basic use of the synthesis API is to pass the speechSynthesis.speak() and utterance:

var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);

Try it!

However, you can also alter parameters to effect the volume, speech rate, pitch, voice, and language:

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';

msg.onend = function(e) {
  console.log('Finished in ' + event.elapsedTime + ' seconds.');
};

speechSynthesis.speak(msg);

Setting a voice

The API also allows you to get a list of voice the engine supports:

speechSynthesis.getVoices().forEach(function(voice) {
  console.log(voice.name, voice.default ? '(default)' :'');
});

Then set a different voice, by setting .voice on the utterance object:

var msg = new SpeechSynthesisUtterance('I see dead people!');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Whisper'; })[0];
speechSynthesis.speak(msg);

Demo

In my Google I/O 2013 talk, "More Awesome Web: features you've always wanted" (www.moreawesomeweb.com), I showed a Google Now/Siri-like demo of using the Web Speech API's SpeechRecognition service with the Google Translate API to auto-translate microphone input into another language:

DEMO: http://www.moreawesomeweb.com/demos/speech_translate.html

Unfortunately, it used an undocumented (and unofficial API) to perform the speech synthesis. Well now we have the full Web Speech API to speak back the translation! I've updated the demo to use the synthesis API.

Browser Support

Chrome 33 has full support for the Web Speech API, while Safari for iOS7 has partial support.

Feature detection

Since browsers may support each portion of the Web Speech API separately (e.g. the case with Chromium), you may want to feature detect each feature separately:

if ('speechSynthesis' in window) {
 // Synthesis support. Make your web apps talk!
}

if ('SpeechRecognition' in window) {
  // Speech recognition support. Talk to your apps!
}

Chrome Dev Summit: Platforms Summary

Dart

Dart compiles to JavaScript, sometimes generating code that's faster than hand-written JavaScript. Watch Dart co-founder Kasper Lund explain how the dart2js compiler performs local and global optimizations to emit fast and semantically correct JavaScript code. With tree shaking, type inference, and minification, Dart can help you optimize your web app.

Slides: Dart

Chrome Apps

Chrome Apps provide the power and user experience of native apps with the development simplicity and security of the Web, and integrate seamlessly with Google services like Drive. Chrome Apps run on Mac, Windows, Linux, and ChromeOS, as well as iOS and Android, right out of the box.

Slides: Chrome Apps

PNaCl

Portable Native Client is a technology that enables portable, secure execution of native applications in Chrome. This extension of the Native Client project brings the performance and low-level control of native code to modern web browsers without sacrificing the security and portability of the web.

PNaCl helps developers produce a platform-independent form of their native application and run it in the browser without any installs. Behind the scenes, Chrome translates PNaCl applications to machine code at runtime to achieve near-native performance. On other browsers, PNaCl applications can use Emscripten and pepper.js to maintain functionality with a minimal performance hit.

Slides: PNACL



@2014 CompCoding.com