npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

generator-playground

v0.1.4

Published

A generator for Yeoman

Downloads

10

Readme

generator-playground Build Status

A generator for Yeoman that scaffolds a simple web project for when you need to quickly play with an idea. It will create an HTML, CSS and Javascript file, already linked with each other, ready to be edited. It can also add normalize.css or jQuery. It includes a Grunt configuration with an Express server to host the files and livereload to directly see the modifications in your browser when you save. It also initialises a Git repository, so you can version your experiments.

Nice to have features that might land in the future:

  • allow for different features of HTML (HAML, Jade...), CSS (LESS, SASS...), JS (Coffeescript, Typescript...)
  • add CSS and JS linting with desktop notifications.

Getting Started

Yeoman runs using node.js, so you'll need it installed on your machine. Installing the generator is a matter of a simple npm command.

$ npm install -g generator-playground

Yeoman, Grunt and Bower, which are needed for the generator to work fine should have been installed automatically (yeah package.json's peerDependencies section) and you should be ready to go. Head over to the folder you wish scaffold a project and type:

$ yo playground

The generator will work its magic and scaffold the necessary files and folders. You're ready to go!

Start the express and livereload servers using grunt server. This will also open your default browser to see index.html. All that's left is popping up your favourite text editor and edit the index.html, css/style.css and/or js/app.js.

You could even go with a crazy one liner to do all of this at once (might want to alias this if you plan on using it often):

$ yo playground && (sublime-text . index.html css/style.css js/app.js &) && grunt server

Note: Replace the sublime-text command with the one corresponding to your editor, maybe the one stored in the $EDITOR environment variable.

Have fun coding!

License

MIT License

Release History

  • 2014-10-31 v0.1.4 Fixed jQuery path in the index.html and generated bower.json when no lib is added
  • 2013-12-24 v0.1.1 Fix to Travis CI build
  • 2013-12-23 v0.1.0 Initial functionnalities

Bitdeli Badge