//TNG The Nitty Gritty

The low down on web technology

Type Is Back Big Time ⇢

Great video interview of the guys at edenspiekermann_ about the role of type in branding.

Page Weight Matters ⇢

After a week of data collection, the numbers came back… and they were baffling.

Great story about the importance of a low page weight.

Release: grunt-textfile

by Kahlil Lechelt

gruntplugin JavaScript text file based blogging

If you are using a text file based blogging software like Jekyll, Kirby or Middleman you probably were annoyed at some point to manually have to create your text file with correctly formatted file and/or folder name including post-specific meta data.

grunt-textfile
grunt-textfile

I surely am, especially in the case of link blogging since you tend to post multiple links in a short amount of time and these posts are really short you don't want to spend a lot of time on them.

We use Kirby for TNG and in order to create a new link post we have to create a new folder which has a specific naming pattern and a text file that also has a specific name and contains some meta data. I love Kirby and managing my content in text files but, boy, that is tedious!

Enter grunt-textfile!

I am happy to announce the release of grunt-textfile today. If you use Grunt in your project anyway it is very easy to add and configure for your specific text file based content management needs.

After you configured the plugin in the Gruntfile all you have to do is to call the task on the command line with the desired options i.e.:

grunt textfile --title="grunt-textfile Is Where It's At!"

Head over to the repo and check it out.

Let me know about any bugs or feedback in the issues. Pull requests are always welcome if you want to add some functionality!

Writing grunt-textfile

Man, I ♥ Grunt.js to death, yo.

It is amazing how powerful and flexible it is. The documentation is really great now and the API gives you a lot to work with. I specifically made use of the grunt.template and grunt.option methods.

Using the Grunt.js API

grunt.template takes care of processing the text file templates and since the grunt object is available within the template you can use the grunt API right there. This means it allows you to insert things like grunt.template.today('yyyy-mm-dd') or grunt.option('link'). No extra parser to write.

Once you set up the template like that you can do the following:

// Check if the file exists.
if (!grunt.file.exists(filePath)) {
  // Warn the user if the file doesn't exist.
  grunt.log.warn('Template file "' + filePath + '" not found.');
  return false;
} else {
  // Read the file.
  template = grunt.file.read(filePath);
}

// Process the template and normalize the line feeds.
result = grunt.util.normalizelf(grunt.template.process(template));

After that I just concatenate the path for the resulting file and write it to that location with grunt.file.write(fullPath, result).

Using String.js

To replace the keywords in the file/folder name patterns, I am using String.js. It is a very capable string manipulation library that works like jQuery:

// Cache the String.js object.
sFilename = S(options.urlFormat);
// Check for the keywords with .contains().
if(sFilename.contains('PREFIX')) {
  // For Kirby blogs: count the directories in target dir and iterate the prefix.
  dirs      = grunt.file.expand({filter: 'isDirectory'}, options.dest + '/*');
  // Replace the keyword with the correct prefix.
  sFilename = sFilename.replaceAll('PREFIX', dirs.length + 1);
}
if(sFilename.contains('SLUG')) {
  // Replace keyword with the slug. Use slugify() method.
  sFilename = sFilename.replaceAll('SLUG', S(grunt.option('title')).slugify());
}
if(sFilename.contains('DATE')) {
  // Replace keyword with date generated with grunt.template
  sFilename = sFilename.replaceAll('DATE', grunt.template.today(options.urlDateFormat));
}

// Return the actual string by returning the .s property of the String.js object
return sFilename.s

Testing

In order to test the plugin I am generating a test file and compare it with an expected file. I also move helper functions into lib/textfile.js and expose them via exports. These functions can then be easily called and tested via nodeunit.

Conclusion

If you manage your blog's content in text files I hope you give grunt-textfile a try. Let me know if you run in to any problems or miss any features.

Discussion On Mobile First Yeoman Generator ⇢

@addyosmani:

We want to create a mobile-first scaffolding solution for Yeoman that helps web app developers quickly kickstart projects with sane defaults.

Chime in!

Seriously.js ⇢

Seriously.js is a real-time, node-based video compositor for the web. Inspired by professional software such as After Effects and Nuke, Seriously.js renders high-quality video effects, but allows them to be dynamic and interactive.

Mozilla showing off some crazy stuff here.

Inside World Wide Maze ⇢

The game features abundant use of HTML5 features. For example, the DeviceOrientation event retrieves tilt data from the smartphone, which is then sent to the PC via WebSocket, where players find their way through 3D spaces built by WebGL and Web Workers.

Woah.

Gruber's Vesper ⇢

@gruber launched his first iPhone app. John directed it, Dave Wiskus designed it and Brent Simmons implemented it. You can hear them talk about all the behind the scenes in the Debug podcast.

Vesper
Vesper

Vesper is a simple and elegant tool for collecting your thoughts. I’ve been using it all day, every day for months now. I think you’ll like it.

I love the app. The design and the attention to detail is tremendous and the simplicity of the idea is striking. I think this is the first time I am using tags in a sane and useful way. Definitely listen to the podcast episode, the insights into the their thinking and the way they worked are great for anybody who wants to build something.

Logic in Media Queries ⇢

@chriscoyier on Mobile First:

Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.

Chris Coyier wrote up a nice collection of logical operators in Media Queries including and, or, not and a lot of other useful tips.

Kirby 2 Reference Platform ⇢

@bastianallgeier:

I wrote a library, which extracts all kinds of documentation from the actual source code of Kirby 2 and builds the content structure and all the text files out of it. This makes it possible to write the documentation only once – in the source – and update the platform for every new release with just a click.

Ah, very cool.

DailyJS AngularJS Tutorial ⇢

@alexyoung:

Most of what I’m going to talk about here has been packaged up into Yeoman, which has some Google employees behind it (Paul Irish, Addy Osmani) and includes technology from Twitter (Bower). The rest of this post will break down the emerging next generation Google/Twitter open source stack.

Another great series by Alex Young.

Remote Work Rocks ⇢

Mike Hostetler, founder of appendto() talks about how to learn to do remote working in a company. ♥

Releasing The Kraken ⇢

A very interesting 15 min talk on how they started using Node.js, NPM and Bower at Paypal.

JavaScript Weekly Issue 132 ⇢

Wow this issue of JavaScript Weekly was packed to the brim with JS goodness once again!
Some stars among this great assortment of links are Paul Irish's talk on FluentConf, Brendan Eich's talk at FluentConf a talk on using Underscore productively by Brian Lonsdorf, an article on how to optimize your JavaScript for Firefox OS and an article on how to get started with AngularJS and PhoneGap.

Learn AngularJS In 5 Steps ⇢

revolunet.com:

In this post i’ll give some advices for the AngularJS newbies and share with you the best pointers to learn and understand the core concepts quickly.

An awesome little link list to get started with AngularJS. Might I also add my resources list on Github?

Staying Up To Date On The Front-End ⇢

The web is a rapidly evolving universe. An important part of our job as front-end developers is keeping up to date and staying close to new tools, trends and workflows.

Hundreds of blog posts and articles are published every day, but there is no way you can read all of them. We think you should have a strategy to keep up to date, so we have created this recipe.

This is a good start.