I’ve begun reading the excellent book, The Nature of Code and watching its accompanying videos by the equally cool Daniel Shiffman, and I’m truly fascinated by what I’m learning. Daniel uses a casual and fun teaching style to explain how to get started with creative coding using Processing, to create motion graphics that literally come to life.
I’m relearning some of the math and physics I learned in college, but this time within the context of actually creating something with them.
I wrote a while ago about my adventures with Twitter Bootstrap and SASS, trying to discover a way of getting the same effect of Bootstrap’s presentational classes (like .row, .span6, etc.) without actually including them in my HTML. The conclusion, at least when it came to media queries, left me with mixed feelings. It wasn’t effortless to pull off, and not very flexible.
With one of my ongoing projects, grunt-express-workfow — a scaffold for new web applications — I needed a way to easily incorporate Responsive Web Design (RWD), and I wanted to do it in pure SASS.
Back in part 1 of this series I introduced a small number of tools that make a web engineer’s life easier: Grunt, Yeoman, Express, and Nodemon. In part 2 I provided a repository of files and explained how to use them to have a running server that’s capable of automatic browser and app server reboots for rapid development.
Now, in part 3, I’ll explain how we can use this workflow to automatically run unit tests when development files or test files change, backend or frontend, and how to expose internal functions and properties in our Node or RequireJS modules to the testing environment so that we get less bugs.
Update: The grunt-express-workflow project has been updated to include a full front-end and back-end testing framework by leveraging Grunt, Karma, Mocha, and Istanbul. Read all about how to test your code easily in part 3 of this series.
In part 1 of this series I introduced a small number of tools that make a web engineer’s life easier: Grunt, Yeoman, Express, and Nodemon. In this second part of the series I’ll explain how to get started using them together.
You learn something new everyday. Today I learned that the statement object.property = null is significantly more performant than delete object.property in all modern browsers. Even though using delete feels safer because the property is totally gone and thus can’t be used unintentionally (say, with a loop of Object.keys or _.each(object, ...)), definitely consider instead using checks like if (typeof object === 'object' && !!object.property) {} if you’re into performance, or even just to be safer.
In this series, I’m going to explain how to instantly and easily start a custom back-end server based on Node.js and Express, and automatically see your incremental front-end and back-end changes applied both in your browser and on the server. Also, a bonus: how to debug your Node.js server in WebKit Inspector / Chrome Developer Tools. Excited yet? Let’s get started.
Intro If you’re still reading this, you just might be a web engineer.
Update: The instructions in this post were for Bootstrap 2.x, and are very likely outdated.
There’s no question why Twitter Bootstrap is the most watched repo on Github. It’s amazing - saving developers everywhere from reinventing wheels and giving them the time they need to work on features that apply specifically to their project. In my mind, there are only two things that could make Bootstrap better:
Sass! The ability to make custom semantic CSS classes.