Make a fancy animated HTML5 Logo for your WordPress with pure JS (3/3)

Welcome to the last part of this series on how to create an animated HTML5 logo for your blog.
Hopefully you’ve finished your animated logo and are now ready to integrate it into your WordPress blog. (You should have finished it – you had half a year to do so ;-) )
This post will be on

  • how to improve the stability of our code
  • some cross browser considerations
  • we will introduce a multi purpose animator class

and finally go live with our logo!

Continue reading

Make a fancy animated HTML5 Logo for your WordPress with pure JS (2/3)

Today is all about animations. In simple terms, animation is movement over time.
However, we won’t change multiple images over time as it is known from the cartoon, but animate parts of one entity on the canvas.
Tha basis for this will be the stickman (or our own logo) which we created in part I of this series.

What we need right now is:

  1. a movement specification – which parts are animated and in which way
  2. a time interval – how long will the animation run
  3. the animation speed –  how much movement do we want to have in one timeframe

Continue reading

Make a fancy animated HTML5 Logo for your WordPress with pure JS (1/3)

This will be a beginners series about animating the WordPress header/logo.
One thing in advance: please use this technique carefully and ensure that visitors are not annoyed (I’m not a good example – I don’t care about my visitors ;-) )

We will not use jQuery or any other framework. Everything will be written in pure JavaScript. The only HTML we will produce is a HTML5 canvas tag. It should be no problem if you’re not familiar with canvas and HTML5 technologies. However, if you do not know much about it I promise that there is a lot you can learn in this series. The basis of this series is the current standard WordPress theme which is “Twenty Thirteen” and my own (super creative) stickman logo.

List of contents:

I – Scaffolding & HTML5 Canvas Logo
a) Create a local Page Dummy
b) Dynamic Creation of the Canvas
c) Draw to Canvas (from graphics editor to code)
d) Overlay the Logo and make Adjustments

II – Animations: The Stickman comes to Live
e) Animation Now and Then
f) A simple Animation
g) Time Controlled Animations

III
h) Make it responsive
i)  Make it cross browser
j) OO
k) Going live: WordPress Integration

Continue reading

Amazon EC2 Micro Instance and Graylog2 / ElasticSearch

Ok, this is not becoming my next “How to install …”
Instead I will only give a tip to those people trying to run Graylog2 on an Amazon EC2 instance type t1.micro.

If you just started and your first project includes the installaton of Graylog2 do not expect miracles from your tiny t1.micro instance ;-)

The AWS instance type site lists the specifications for all instance types:

t1_micro

Graylog2 comes with its own full-fledged MongoDB, ElasticSearch and Ruby on Rails web interface + web server.
Running all this stuff with only 0.615 GiB of Memory probably looks like this:

graylog_error
Continue reading

How to install Couchbase for Node.js on Amazon Elastic Beanstalk

Hello and welcome to this week’s episode of “How to install Couchbase” ;-)
(I could have called it “How to debug AWS Elastic Beanstalk” but I wanted to keep the tradition)

Since more and more people stumble across my blog in search for Couchbase installation tips, I wrote this guide in the same style.

This time I tried to deploy my HelloWorld app to an AWS Elastic Beanstalk instance.
Unfortunately, the only solution that worked for me was a little bit hacky and is not scalable(!).
I would be very happy about suggestions!
Continue reading

Metaprogramming experiments: Selector Properties

Hello everyone!

A few days ago I wrote a post about “Virtual Instances in JavaScript with Proxy API – JSDataViews“.
It’s an approach on how to calculate the data representation of a variable at runtime with the help of the new Proxy API.

Today I want to show another feature which is part of the core of JSDataViews

Selector Properties

A lot of people are familiar with jQuery. The development of jQuery is driven by the fact that the DOM is a hierarchical, complex data structure and people need an easy way to access and manipulate different parts of it.
Since JavaScript objects can reach a similar complexity I was looking for an easy and nice way to run similar queries on them.
Continue reading

How to install Couchbase for Node.js on a Windows 8 machine


Update: You’re reading the Couchbase Post of the Week!
pow


Working Installation

This should be a working step-by-step installation. If you’re interested in a particular error or how I got to this steps please read the article below.

1. Make sure you have python >=2.5 and < 3.0 (eg 2.7) installed
2. Download and install libcouchbase (search for windows)
2b. Ensure that your folder structure matches the
binding.gyp – (try to access C:\couchbase\bin\libcouchbase.dll in your explorer)
3. Download and install a C/C++ compiler (e.g. via Visual Studio Express for Win8)
4. Set path to python in your shell like so: set PYTHON=C:\Dev\Python27\python.exe
6. Run

(7.) If the gyp config does not match your visual studio edition use flags:

Tips for Mac Users

For additional information please refer to the node-gyp requirements page

Test it

Tugdual Grall has a simple test example on his page which unfortunately seems to be outdated. Here is a newer one:

I hope this helps some people out there ;-)

Continue reading

Virtual Instances in JavaScript with Proxy API – JSDataViews

Today I discovered an interesting new way of declaring variables. I used a technique to mimic a principle which is called “Views” and which is well known in the database world.

DB Views !== UI Views

On the PostgreSQL website Views are described as follows:

The view is not physically materialized. Instead, the query is run every time the view is referenced in a query.

The principle can be simply visualized using a set of data entries where each “View” builds a subset of these entries (colored boxes) when executed:

db views

Enter JS

Instead of declaring the final variable/dataset for the View we will create a function that behaves like a View object. I’ll call this a Virtual Instance since the data for this View is not existent before it is accessed. Instead, the function is evaluated and brings data into the  variable at runtime.
Continue reading