Zhongde Liu

This is my personal "Clipboard" of web development stuff I come across

Leave a comment

Tools: Generating Placeholder Images


When writing initial HTML for something you often need some placeholder images. Then you normally go to some placeholder image service or download an image, copy it into you app file system and figuring out the correct path to it.

To ease this process I wrote a little tool in order to generate simple base64 encoded placeholder images. Currently can specify the image dimension and some font-settings for the image size description. The base64 encoded image representation enables you to insert this image directly as a Data Uri into the src (<img> tag) or url (css statement) of your document. Inlining the image comes with the big advantage that you don’t rely on the availability of the external service.

Go here for the tool: http://zhongdeliu.github.io/placeholder-image/

(Also the first time I used GitHub Pages btw.)


Leave a comment

Build tools: Grunt – gulp – npm run

Grunt (http://gruntjs.com/) is the de facto standard regarding (frontend) build tools.

But there are alternatives.

Especially gulp (http://gulpjs.com/) is getting a bit of a momentum. gulp has a more “coding” mentality in contrast to the configuration heavy grunt setup.  It already has all the essential plugins (jshint, uglify, sass, less, etc…) for a sophisticated build workflow. In my opinion the coding style within the gulpfile offers  more readability than the big configuration objects  in gruntfiles.

Another way is to (“mis-“)use the “npm run” command to run scripts/commands, which are noted in the “scripts” field within the package.json file. James Halliday wrote a nice blog post about it: http://substack.net/task_automation_with_npm_run.

Of course there are the classical ways to perform a build: make, ant, rake, etc…

Leave a comment

List: Interesting tools regarding Javascript Development

Mentioned here: http://www.youtube.com/watch?v=f7AU2Ozu8eo