Zhongde Liu

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


Leave a comment

Tools: Generating Placeholder Images

placeholder

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.)

 

Advertisements


Leave a comment

npm, node-gyp error and Windows

I wanted to try out the Sails framework. On installation (npm install sails) however I just got this error and the installation was unsuccessful.

npm ERR! ws@0.4.32 install: `(node-gyp rebuild 2> builderror.log) || (exit 0)`
npm ERR! spawn ENOENT

It is the same thing as in this closed issue on github. There was a reference to a buggy version of ws/socketIO. Googling some more you get a lot issues related to socketIO and Windows7 or this topic in general. For example:  https://github.com/websockets/ws/issues/240 or http://stackoverflow.com/questions/15200184/why-do-i-get-error-when-trying-to-install-socket-io-with-nmp

In fact as a windows(7) user you may stumbled upon these node-gyp error previously…. nody-gyp is used “for compiling native addon modules for Node.js”. Unfortunately the prerequisites on Windows are Python and Visual Studio!?. Including also several steps for a working setup… https://github.com/TooTallNate/node-gyp/wiki/Visual-Studio-2010-Setup.

I thought  “What the …”. I just wanted to try something out.

End of story: I used “–force” on the install command and it worked. But for how long and what actually happened or did not happen behind the installation curtain!? I hope node-gyp, or the related modules (ws) will get updates to fix these hurdles on windows machines…

 

Update: As of now Sails(0.11.0) and socketIO(1.3.5) are installing just fine on windows…


Leave a comment

Herokus Design Styleguide

Heroku just recently made their ui styleguide/style kit public available. This is another great example of a good structured and visual appealing reference for the frontend elements. You provide code examples and actual design in this living document for typography, buttons, forms, grids, etc…

http://purple.herokuapp.com/

Such a reference can make a huge impact in terms of communication between different departments and stakeholders. Combine it with wireframes you get a really fast instrument to talk over and improve new design plans.

If not, don’t wonder if your end result is a design chaos, and your css/html is duplicated all over the place…


Leave a comment

Standards/Guidelines for building an HTTP API/Webservices/REST

General Overview about HTTP API Design

Thoughts on RESTful API Design

A document describing the experience the author, Geert Jansen, gained from designing the RESTful API for Red Hat’s Enterprise Virtualization product.  Summarizes his thoughts about how a “good” REST Service should look.

https://restful-api-design.readthedocs.org/en/latest/

HTTP API Design Guide from Heroku

The Heroku team has published their HTTP API Design Guide. It is a short guide / best-practice collection, giving a nice overview which aspects you should consider when designing an API.

https://github.com/interagent/http-api-design

Data formats

Following two links describing how the response should be formatted: These are consistent, documented quasi-standards for use as response formats. Main topic is the linking and discoverability between resources.

JSON API :: A standard for building APIs in JSON.

Living document, written by Steve Klabnik and Yehuda Katz. Media-type: application/vnd.api+json

http://jsonapi.org/

JSON HAL – Hypertext Application Language

Mike Kelly wrote down a convention expressing hyperlinks in JSON (or XML) and named it HAL. Media-type: application/hal+json

http://stateless.co/hal_specification.html,  http://tools.ietf.org/html/draft-kelly-json-hal-06

Collection+JSON – Hypermedia Type

A format definition focused on collections. Media-Type: application/vnd.collection+json

http://amundsen.com/media-types/collection/

 


Leave a comment

Polyfill of some array ES5 functions

I collected the most used ES5 array methods as a polyfill for older browsers (IE …).

https://github.com/zhongdeliu/array-polyfill

Based on the great reference at MDN Arrays, it has fallbacks for
Array.every, Array.some, Array.filter, Array.forEach, Array.indexOf, Array.reduce.

To install / use it you either can clone the github repository or fetch it via Bower. Then include it per script tag, before your scripts.


Leave a comment

Ressources: Websites with free to use high quality images

There are some cool people out there, who are running some platforms/websites to share high quality photos for any use, especially also for commercial projects.

  1.  http://unsplash.com/
  2. http://publicdomainarchive.com/
  3. http://www.gratisography.com/
  4. http://picjumbo.com/
  5. http://www.raumrot.com/
  6. http://www.designerspics.com/
  7. https://stocksnap.io/
  8. http://freenaturestock.com/

Please take your time and read there specific licensing terms (maybe they have changed or do have limitations), if you are actually going to use some of the media.

Kudos to them!

If you have any additional ressources, please leave me a message.

Update 2016-08-04:


Leave a comment

js13kGames 2014

One week in, the js13kGames competition is currently running. This is a yearly event in the spirit of the 1k demos (e.g. 1kjs.com). Till 13th September 2014 you have code a game within the limit of 13kilobytes. Main Theme is: “The Elements: Earth, Water, Air and Fire”

http://js13kgames.com/

Go participate! Very nice practice and the opportunity to try something out!

 


Leave a comment

Links: AngularJS Styleguides

Here are some (opinionated) styleguides for AngularJS applications, I recently found on github. They are (currently) work-in-progress / living documents: (ordered by stars)

  1. https://github.com/mgechev/angularjs-style-guide
  2. https://github.com/johnpapa/angularjs-styleguide
  3. https://github.com/toddmotto/angularjs-styleguide

These style guides may give you a reference for the structure of your next AngularJS project.


2 Comments

Create/start a simple local HTTP Server

In order to develop or test some static code, without copying them into your apache webroot or something else, you easily can start a simple static webserver within the directory you are currently in with following tools.
Because you sometimes you just need a http:// (likely localhost) Url instead of a file://… one.

  1. If you have Python (https://www.python.org/) installed you can start a static web server with following command, depending on the installed version.
    python -m SimpleHTTPServer [port]//python2
    python3 -m http.server [port]//python3
  2. If you have PHP > 5.4.0 (http://php.net/) installed you can start one with:
    php -S localhost:[port]
  3. Using Ruby (https://www.ruby-lang.org/) you setup a simple server with this command:
    ruby -run -e httpd . -p [port]
  4. For node.js (http://nodejs.org/) I use the  “simple, zero-configuration command-line http server” package (https://www.npmjs.org/package/http-server).
    After the default npm installation

    npm install http-server -g

    you just type

    http-server -p[port]

    into your console.

These are some nifty tools (or “oneliners“), when it comes to browse a static/client app/website/file with your browser in your local environment without copying the files somewhere else.


Leave a comment

Code: “cast a number to int” with bitwise operators

In order to cast a number to an int value you can also use bit operations. In particular the Double NOT and the OR 0.

~~(3.14) // => 3
3.14 | 0 // => 3

As these operations are working on on signed 32-bit integers per default, the number is in fact truncated after the comma. This also works on negative numbers.

~~(-3.14) // => -3
-3.14 | 0 // => -3

You are asking Why? Why should anyone bother bitwise operators? one word: Performace. If you are crunching a lot, I mean, a lot, numbers, you should notice something. I made a quick jsperf http://jsperf.com/parseint-and-bitwise-operations. You see the bit operations are more than 10x faster than parseInt.

Sidenote: Math.floor is also pretty fast. However Math.floor results in a different result number when used with negative ones.

Math.floor(-3.14) // => -4