A Smarter WordPress Theme Design & Development Workflow with node.js, ruby, sass, bower and grunt
I was lucky to be one of the speakers at the WordCamp Mumbai, Mar 15-16, 2014. When I stumbled upon their Call for Speakers, I was excited with the speaking opportunity and an uncanny chance to visit Bombay after so many years. Thankfully, the organizing team accepted my proposal and thus, presented and spoke on, “A Smarter WordPress Theme Design & Development Workflow with node.js, ruby, sass, bower and grunt.”
Special thanks goes to Saneef Ansari, my business partner at Theme6 for helping me out iron the kinks and pushing codes so I could release our initial draft framework of WP-Portkey.
The idea behind the presentation was to introduce existing WordPress Designers and Developers to a more automated workflow so they can focus on what they do best - design and develop WordPress themes.
Browse, Download Files;
Here are the breakdown of the slides;
- Introducing myself - I’m Brajeshwar and I tweet @brajeshwar.
- We also have to refresh our browsers, on various permutations and combinations of Platforms, devices and browsers.
- We also needed to upload the files to our server - demo servers, client’s servers, etc.
- We also needed to clean the folders, files and create archives that can be uploaded for users to download or to merchant’s servers to sell the commercially paid ones.
- Well, there are better and smarter ways to work and improve the workflow so all the mundane and grunt of the task can be done effortlessly and seamlessly.
- This will help developers or a designers to focus on what they do best - design and development of the WordPress Theme.
- This will eventually saving time which can lead to a better Return on Investment, thus earning you more money.
- Tools such as Node.js and Ruby have lots of modules, gems that can help automate, simplify our design and development process. No, we’re not going to learn to write any codes neither in Node.js nor Ruby.
- “Bower is a package manager for the web. It offers a generic, un-opinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.” We can use Bower to manage the libraries and frameworks that will be used for WordPress Theme Development.
- Sass, Less or Stylus are powerful professional grade CSS extension languages to help and aid in CSS Development. The ability to use variables, mixins, placeholders, extend and inheritance are some of the powers of these extensions that makes life of a CSS developer easier, way easier.
- This changes the whole thing.
- Why not try it, make mistakes and take small steps to master how to use these tools. The community is huge and people are eager to help. Just get started - Now.
- Then, everything will be just running
grunt deploy, etc.
- Grunt can even burst the cache so your users or clients won’t complain about not working on their computer while you swear, “it works on my computer, have you cleared your cache.”
- Grunt can also help you release a clean archive which you can upload for your users or even to your merchant for distribution to paid users and new potential buyers.
- Deploy with Grunt, sit back and relax.
- Thanks to everyone for being part of my presentation. Follow me on twitter @brajeshwar