Yeoman – Level-up Your Daily Workflow

After Yeoman was announced in the end of June while it was still in private beta developers were looking forward to use it soon. It was introduced as a tool that helps developers building web-apps while not having to care too much about the general boilerplate-coding to build a solid base for every project and to help performing tasks to bring your project into production.

Now that Yeoman is available for everyone as Open Source the question how to use it in daily projects arises. I’ll try to give you a short overview on what you can expect from it and what will be helpful. If you haven’t had a look at it this article might help you.
Continue reading “Yeoman – Level-up Your Daily Workflow”

An Approach on Building an Advanced Initial Boilerplate

Since some time I found myself defining a good starting point for a new project over and over again. While I use HTML5 Boilerplate in nearly all of my projects it’s not enough as an initial package. Since I’m using SASS (in its dialect SCSS) and have some other things I define over and over again I decided to set up a package that lets me start easily and includes a lot of tools that are necessary for my projects.

This is an introduction to init, the starting point for projects that require a bit more than just HTML5 Boilerplate.

Visit project on GitHub       Download

Not just HTML5 Boilerplate …

With HTML5 Boilerplate we are creating an awesome starting point for front-end developers that want to use a solid boilerplate that has defaults that are useful for everyone. Besides that we want to keep it simple and straightforward. That’s why adding a preprocessor or complex dependencies to HTML5 Boilerplate is not possible.

For the team I’m working with at /gebrüderheitz and me it’s important to have a solid basis for projects we do that we can use over and over again. Other developers have this need too and that’s why there is Twitter Bootstrap or ZURB’s Foundation (just to name two) out there.
Just while developing this project my buddy Kahlil came up with a nearly similar approach: HTML5 Boilerplate on Crack. He has different things in his package then init has. Keep an eye on that.

Simplify Development

For init I decided to use Grunt.js as a development- and deployment-tool. Grunt is a Node.js based task-oriented tool that simplifies developing and deploying JavaScript a lot. Since Grunt has a big and valuable community there are a lot of plugins that you can use with it to help developing HTML and CSS too.
Currently we are thinking about including Grunt into HTML5 Boilerplate, which is a great step in moving the project to the next stage.

As stated before I love using SASS as a preprocessor and I have some structure I like to apply to my SCSS-development files which I already outlined in my post about my personal coding guidelines. This requires to have Ruby installed on your local machine to compile SCSS into a CSS-file or to use a tool like CodeKit that does everything for you. I am actually a big fan of CodeKit but also like to have the compilation as part of my whole build process for a website.

SCSS compilation is integrated in init’s Gruntfile.
By running grunt watch you start a process which watches for changes in your SCSS-files and compiles the CSS-file automatically unsing Sindre Sorhus’ awesome Grunt-plugin grunt-sass. Besides that the watch-task recognizes changes in your JavaScript files and lints them on the fly.

If you’re not dependent on any special server-environment you can easily fire up ./server.sh on your console to start a small Ruby-server with a tab in your favorite browser.

There are a lot of other goodies in the project. Please visit GitHub and read the project’s readme-file for more information.

I’d also encourage everyone to keep an eye on Yeoman since I think it can do a lot more then my package does and will be awesome. It will be available soon.

It’s Open Source

This project is Open Source and I would love to see some people chiming in and discussing the project in its current state to make it better. I’d love to get some feedback from all of you!

Apart from that please feel free to use it for your projects. It’s all under MIT License and thus pretty much there for all your needs.

Thanks for being awesome, community <3!!

RECESS – A CSS cleaning tool build on top of LESS

Developed at Twitter to support our internal styleguide, RECESS is a simple, attractive code quality tool for CSS built on top of LESS.

Incorporate it into your development process as a linter, or integrate it directly into your build system as a compiler, RECESS will keep your source looking clean and super managable.

As I think reading the source is essential for developers to become good at what they do viewing this source in readable style is essential too. RECESS is a tool which helps you developing good-looking CSS with LESS. It is developed at Twitter and has now been open-sourced.

RECESS is a Node.js module and is maintained by @fat. You can find out more about it by viewing the source at GitHub.

BTW: I’ve decided to not minimize and concatenate my blog’s source anymore. So, feel free to dig deep!