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

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

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


Leave a comment

Note: Whitespace raises jQuery error (Ajax, jQuery 1.9)

Just stumbled upon a bug/feature when migrating to jQuery 1.9.

So the case is: You are trying to convert following String:

"   <div>Hallo</div>"

into a jQuery object. Pay attention to the leading whitespace.

Prior to 1.9 you get what you would expect. With 1.9, you will get an error.  Reason is this core change, documented here http://jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring. As I’m not the only one with this issue, there are already several posts about it (the intention, the pros, contras…). This is the according thread in the jQuery tracker: http://bugs.jquery.com/ticket/13223 .

There is also mentioned to re-implement the old behavior.


Leave a comment

Code: load handler with cached images and IE

Just had a strange case, that the load event of an image is not fired. After a short research I found the issue…

Not working code:
$('img').attr('src', 'image.jpg').load(function() {
//Do something - but it doesn't
});

Working code:
$('img').load(function() {
//Do something - it does
}).attr('src', 'image.jpg');

The thing is IE (and Opera) will load the cached image directly before your event handler is attached…

It is jQuery Notation but also applies to Vanilla JS.


1 Comment

HTML5 Video Encoding – Codecs

There is no single combination of containers and codecs that works in all HTML5 browsers.

For maximum compatibility you need more than one version:

Container: WebM
Video-Codec: VP8
Audio-Codec: Vorbis

Container: Ogg
Video: Theora
Audio: Vorbis

Container: MP4
Video: H.264 baseline-profile
Audio: AAC (low complexity)

For MP4 Mobile pay attention to possible  max-resolutions on the different devices:
480×320 (base), 640×480 (no older androids, blackberrys) or more e.g. 1280×720 (only ‘new’ devices)…

 

More Info and references:

http://fortuito.us/diveintohtml5/video.html

http://blog.zencoder.com/2010/09/30/how-to-encode-video-for-mobile-use/

 

Frameworks/Libs for HTML5 implementation:

http://mediaelementjs.com/

http://videojs.com/