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.
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:
Just click Enable to turn the flag on, and you should see a prompt to restart the browser that looks like this:
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.
The Build With Chrome team redesigned the site to support both mouse and touch input.
Updates to the Chrome Developer Tools: async call stacks, edit locations, goto :line:column
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
Sindre Sorhus also created envcheck - a useful environment checker that will double-check you have everything needed to run Yeoman smoothly.
This month the community have been building full-stack webapps, Hybrid apps and even a remote desktop client with Yeoman generators. We enjoyed reading:
This month also saw new generators released for KrakenJS, Meteor, ChaplinJS and a number of other projects. Some of our choice picks:
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
With thanks for the rest of the Yeoman team for their reviews
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 for high performance data exchange
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:
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
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:
I also recorded a 30 minute bonus walkthrough of the Polymer Jukebox app I show in the talk.
Covered in the bonus video:
We also make use of Yeoman sub-generators for scaffolding our new Polymer elements. e.g to create the boilerplate for an element
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:
A few other articles that are worth checking out on the subject:
The most basic use of the synthesis API is to pass the
However, you can also alter parameters to effect the volume, speech rate, pitch, voice, and language:
Setting a voice
The API also allows you to get a list of voice the engine supports:
Then set a different voice, by setting
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
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.
Chrome 33 has full support for the Web Speech API, while Safari for iOS7 has partial support.
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: