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!
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 saw new generators released for KrakenJS, Meteor, ChaplinJS and a number of other projects. Some of our choice picks:
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! :D
With thanks for the rest of the Yeoman team for their reviews
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.
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
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:
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
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:
A few other articles that are worth checking out on the subject:
Allo’ Allo’ and Happy Holidays! Welcome to the second issue of the Yeoman monthly digest – our regular round-up of articles, tips, generators and videos to help you stay on top of what’s new with your favourite man-in-a-hat. We hope you find the updates below helpful!
It’s tempting to try every Grunt plug-in out there – there’s a bajillion! It’s also easy to get carried away. Before you know it, you’re staring at your terminal far longer than you used to be, waiting for your tasks to complete. It can be frustrating during your build, but super frustrating during your watch.
Fortunately, the community has been working towards speeding up your development cycle even more.
Some other tips:
loadNpmTask-ing it yourself
yo 1.0.7-pre is now available for testing on npm and we look forward to talking more about our roadmap for 2014 in the coming weeks. In the mean time, there's lots of juicy new updates to both our official generators and those you've been authoring below.
That's a wrap! If there are Yeoman resources you would like to suggest for the next issue, please feel free to suggest them to @yeoman on Twitter or +Yeoman on Plus and we’ll be sure to check em’ out. Happy Holidays and have a fantastic new year!
With special thanks to Stephen Sawchuk, Sindre Sorhus and Pascal Hartig for their review of this issue
Allo’ Allo’. Welcome to the first issue of the Yeoman monthly digest – a regular round-up of community articles, videos and talks to help you stay on top of what’s new with your favourite man-in-a-hat. We hope you find the articles, videos and updates below helpful!
Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appears to grow each year. What if however, you could automate a lot of this?
In the slides from my FOWA keynote, I walk through a landscape of tools to keep you productive on the front-end. Learn how to iterate faster, get real-time feedback, avoid bugs through tools and incorporate these into a functional developer workflow.
Front-end tooling has come a long way in the last few years. That said, it’s hard not to think that developing for the web today is awesome without thinking that it’s now more complex.
The key to staying effective is choosing tools you’ll actually use. Spend time analyzing your personal workflow and select those tools that will help you become more effective.
If you have any questions, comments or tooling suggestions you’d like to share, please feel free to let us know in the comments below!
Chrome DevTools can now tell you exactly what typeface is being used to render text.
Font stacks are a funny thing, more of a suggestion than a demand. Because the family you suggest may not be present, you're letting each user's browser handle the fall-through case, pulling something that will work and using that.
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
As a developer, you want to know what font is actually being used. Here's how it works:
Under Computed Styles, you'll now see a summary of the typeface(s) used for that element. There's a few things to note here:
sans-serifis actually resolving to.
Enjoy and please leave a comment if you have any feedback.