Zhongde Liu

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


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