Wordpress: A new frontier for core development...with Grunt

A build process

We’ve had an implicit build process in the WordPress codebase for a considerable time now. Most of that process is now contained within bumpbot, a little script that lives on the WordPress.org servers. Whenever we update CSS or JavaScript files, bumpbot comes around, minifies them, and commits the result. Despite bumpbot’s efforts, this process is less than ideal. Our source files (in this case, JavaScript and CSS) live alongside our production-optimized files, which causes confusion and makes contributing to core considerably more difficult. Our built output—the files optimized for machines—shouldn’t live alongside the source code that’s optimized for developers, and beyond that, shouldn’t be tracked in source control.

We’re adopting Grunt to write a real build process and help us manage and run our various tools. Grunt is a JavaScript task runner that has a robust ecosystem of plugins focused around building modern web applications. We can include tools such as integrated testing, minification, linting (for PHP, JS, and CSS), image optimization, and LiveReload—and that’s just the beginning.

Using Grunt will be an optional but encouraged part of WordPress development. These tools are all built atop Node.js, which Grunt needs in order to function.

Yes! Grunt is the tool that should be a part of every frontend engineer’s toolbox. Glad to see that core Wordpress is now using it.

Javascriptoo - every javascript project you should be looking into.

From the homepage:

every javascript project you should be looking into.*

*with examples, categories, install commands, CDN links, project and author stats, and more.

Not really a fan of the design, but I do like the functionality of the site, such as the ability to sort by “new”, “tweets”, “watchers”, “contributors”, and “forks”. Nice to be able to see that information clearly.

Comparison of CSS preprocessors

I’m a huge fan of CSS preprocessors. They allow you to work faster, and smarter with what is considered frustrating limitations of CSS, and these preprocessors are influencing what will hopefully be baked-in to CSS in the future.

I still think I prefer SASS, for it’s feature set, and Compass. But it’s hard to argue that LESS is made more popular for two big reasons:

  • It’s the default that comes with Twitter Bootstrap, the most popular frontend framework
  • The toolchain to get going is simple – just include a JS file, and start writing your LESS

Even Better In-Browser Mockups with Node.js

Garann Means writing for A List Apart:

Wouldn’t it be nice if we could go from just designing layouts and interactions to designing the whole client side of the application during the same process?

This is where Node comes in.

It seems, when people start using Node.js they fall into one of two camps:

  1. SERVER-SIDE JAVASCRIPT?! OMG, JAVASCRIPT ALL THE THINGS!
  2. Hey man, it’s a great tool for building fast, scalable network applications, and it’s perfect for data-intensive real-time applications that run across distributed devices…let’s use it for what it was intended.

I’m still waffling between the two. Some days I’m person #1, other days I’m person #2.