Category Archives: CSS

Photobooth Is Our New WordPress Plugin.

Some of you may know about ZineScripts – our premium PHP, MySQL and jQuery script shop. It hasn’t seen new releases lately, but this changes today! We are happy to announce the availability of our very first WordPress plugin – Photobooth!

Photobooth for WordPress

Photobooth is a WordPress plugin that lets you add a beautiful photo booth to your site or blog. People can take their photos, apply Instagram-esque effects and upload them to the gallery directly from your website. And because it uses the awesome new HTML5 APIs no third-party plugins are required! See a demo here.

WordPress Photobooth

WordPress Photobooth

Photobooth is very easy to set up – you only need to upload it through your WordPress plugin management screen, and you are ready to go! No tinkering, config files or coding necessary. The plugin is perfect for website owners who wish to build a community around their blog. It is even great for teams – install Photobooth on an intranet WordPress blog and bring the fun to your office.

Responsive Design

Responsive Design

Photobooth is beautiful, responsive, and looks great on every screen size. The gallery uses AJAX to give you an even smoother experience by dynamically loading images when they are needed.


Here are some of the awesome things that you’ll like about Photobooth:

  • Admin Area
    Photobooth’s admin area is well integrated into WordPress, and gives you the ability to alter the plugin’s behaviour. You can change the URL where Photobooth will show, choose whether you want to pre-approve all images and more.
  • Social Sharing
    After taking a picture, users are prompted to share it on Facebook, Google+ or Twitter.
  • Approval Queue
    After a photo is uploaded, it gets into the approval queue, so you have control over what gets published on your site.
  • Popular Photo Widget
    Add Photobooth’s widget to your theme, and show the latest or the best photos in your sidebar. Your readers will love it!
  • HTML5 Enabled
    Photobooth uses the awesome new HTML5 web camera APIs, so that it can work without the need for third party plugins. In older browsers, it falls back to Flash for a consistent experience.
  • Privacy-minded
    Users can delete their photos for up to an hour after they take them, to prevent mishaps. In addition, until a photo is approved, no one else can see it.
  • Straightforward Installation
    Installing the plugin is as easy as uploading it from WordPress’ admin area and activating it. You can remove it or disable it at any time.
  • Permissive License
    Buy a single copy of the plugin and use it on all your WordPress-powered websites.

8 Tips For Promoting Your Dev Skills

Many front-end developers possess the creative and technical skills that clients are looking for, but don’t get noticed because they don’t have much exposure or reputation to demonstrate to potential clients. Some carry the idea that their area of work is in such high demand that clients will simply come to them – but this is rarely the case.

A great way to get your name out there, build a reputation, and accumulate a list of clients is to market your specific skills. This is not only an excellent technique for freelancers, but it could also be what sets you apart from competition fighting for a particular job. As a developer, you may not know where to even begin in the process of marketing yourself. Follow these tips to increase your chances of attracting clients by effectively portraying your strengths.

1. Find Your Niche

It’s tempting to spread yourself thin and learn a little bit of everything so you can say that you can do it all, but you’ll benefit more by becoming an expert in one niche (you can’t be everything to everyone, after all). Narrow your interests or skills to something like ecommerce, blog, or mobile app design. Become an expert by learning the ins and outs of that area, and then working and experimenting with it. You’ll begin to build the groundwork of a good portfolio, and it will make reaching potential clients a less daunting endeavor. Your leadership in a specific field will increase your demand, leading to a flow of work that allows you to choose the best projects for you.

2. Get Published

As a way to help establish your expertise, consider writing an article or case study about your niche skill set. You can start by posting helpful articles on your blog or website to interest readers, and then start submitting longer pieces to other reputable sites like SmashingMagazine or e-book publishing networks. Even publishing a book as HTML on your site, like Addy Osmani does, can do wonders for your reputation. The community awards valuable resources with its full attention. This can result in invitations for speaking at conferences, networking with other community members and consultancy work.

3. Participate In Online Communities

You can also build your reputation by investing in communities like Stackoverflow and Quora. Not only does it allow you to connect with other developers, but it also publicly showcases your ability to solve problems. And through open source software platforms like Github, you can publish your projects and invite a host of other community collaborators. Having a strong foundation within these communities can be invaluable when communicating your expertise and building your network.

4. Create A Microsite

Single page websites are the perfect platform to show off your skills. Especially if you design one that focuses on a not-for-profit purpose that is creative, beautifully designed and contains interesting content. These are the sites that are more likely to be shared by users, which is a great way of getting free and quick exposure. Don’t be afraid to go crazy with features like parallax scrolling, unconventional grids and sliding effects to adequately showcase your abilities. On the flip side though, while it’s important to showcase the breadth of your skills, often time’s simple pages, like this iPod visualization or this one, can go a long way. This is a great way to let potential clients (or your interviewer) not simply look at, but interact with something you’ve created.

This home security guide for SimpliSafe, chock full of creativity and quality content, is a great example of a project that you can have people interact with. This one takes the user through the process of securing a home, enhanced with a clever comparison to a castle defense system and imaginative parallax scrolling.

Layered Defense

Layered Defense

5. Develop An Online Tool

If you’ve ever found yourself wishing there was a tool to serve a specific purpose to aid you in your work, consider making one yourself. Patrons will surely be amazed by the fact that you have developed a tool or app that other developers use. Sometimes the simplest concepts can be the most helpful, so simplify your ideas to make them look effortless.

CodePen is an example of how online tools can be immensely helpful to front-end developers. Use this in-browser code editor as inspiration for the tools you create.



6. Create Free Resources or Plugins

Another effective direction to gear your personal projects is to create free, downloadable resources for developers through the web. Consider enabling users to give feedback on their performance, so you can show clients that you’re dedicated to following through and improving on your projects. You can even submit them to sites like Design Instruct to gain more published exposure.

This UI designer created a Sketching and Wireframing Kit to provide a convenient and useful resource for UI and wireframing elements to his readers. Easily accessed right from his website, he offers multiple download formats and an opportunity for user feedback.

Wireframing Kit

Wireframing Kit

7. Use Social Networking

Social networking is arguably the most efficient means of free advertising. Since it’s fueled by users and their online word-of-mouth, your name and work can easily spread, which is why this is a marketing strategy worth your time. You can use sites like Facebook, Twitter and Pinterest to contribute high quality posts to the public, and link them back to your blog, which should narrow its content to further fit your niche audience. Internet users and clients will likely expect you to have accounts on all these networking sites, but make it easier for them to check them out through social media links on your blog and/or website, writing pieces and all other marketing elements you create.

8. Connect All Your Work

By linking all of your work and media sites to each other and keeping all your content consistent, you transform yourself from a freelancer (or job applicant) to a brand, which is much easier to market. You’ll build a following of readers and clients that can give feedback and recommendations to others, while your client base continues to grow. The work that you have developed to show to potential clients will put you that much further ahead of your competition, and you can anticipate the demand for your work to multiply. So instead of waiting for clients to come to you, use these assertive strategies to reveal your skills.

20 Impressive Examples for Learning WebGL with Three.js

By now you have probably heard about Three.js – a library which makes working with 3D in the browser easy. With it, you can create the building blocks of 3D modeling – cameras, meshes, lights and more, and apply animations on them. Three.js can draw a scene using a Canvas element,  SVG, CSS3D or WebGL.

In this article, you will find a collection of demos, tutorials and resources that will inspire you to learn more about the library.

Experiments and Demos

The impressive demos that you see below are made with the Three.js library and WebGL as a renderer. It is possible to use WebGL directly, but choosing Three.js makes development easier and results in only a fraction of the code. Here are some of the things that are possible with the library:

1. Nucleal

Nucleal is a WebGL experiment, powered by the Three.js. It breaks photos down into thousands of particles that are transformed by physics. You can choose any combination of photo, speed and effects. The animations run smoothly which is even more impressive.



2. Lights

Lights is an amazing visual experience, powered by Three.js, which syncrhonizes colors and shapes to music. You fly through a scene filled with colorful shapes, which you can interact with by clicking. Headphones are recommended.



3. Just A Reflektor

“Just A Reflektor” is an interactive film that lets you cast a virtual projection on your computer screen by holding up your mobile device in front of your computer’s webcam. That way, you control all of the visual effects in the experience by moving your phone or tablet through the physical space around you. See some of the amazing effects on the tech page, and the behind the scenes video.

Just A Reflektor

Just A Reflektor

4. Arms Globe

Arms Globe is a visualization experiment which overlays the world trade of small arms and ammunition on top of a model of the earth which you can rotate in 3D space. You can filter the data set by years and types of ammunition. The visualization is very impressive and runs smoothly.

Arms Globe

Arms Globe

5. Google Street View Hyperlapse

This experiment downloads Google Streetview data between two destinations, and turns it into an animation of the trip. You can pause and take a look around, or you can drag a target on the map on the top-right which the camera will follow. Give it a few minutes to load or watch this video to see it in action.

Google Street View Hyperlapse

Google Street View Hyperlapse

6. Find Your Way To Oz

This is a promotional website for the Oz the Great and Powerful movie. It combines beautiful artwork with HTML5 and WebGL into immersive experience. It takes place in the circus from the beginning of the movie. You can interact with the environment and use your web cam.

Find Your Way To Oz

Find Your Way To Oz

7. Google Zeitgeist

Google’s Zeitgeist for 2012 included a WebGL powered world map which presented the search trends and important events from the past year. Click the “Watch the year in review” button to see it.

Google Zeitgeist

Google Zeitgeist

8. Ironbane

Ironbane is a massively multiplayer online game powered by WebGL and Three.js. You can collect items, interact with other players and explore the open world. The game follows a retro style inspired by Minecraft and runs smoothly. The game is open source and both the client and server side are written in JavaScript. You can play without opening an account, so you can quickly try it for yourself.



9. Cube Slam

Cube Slam is my favorite Three.js powered game from this list. It is a spin of the classic pong game, but moves it into 3D space. You can play against your friends or computer-controlled bear. The game uses WebRTC so you see a video of your friend’s webcam. For a behind the scenes, read through this blog postby one of the creators.

Cube Slam

Cube Slam

10. HexGL

HexGL is a futuristic, fast-paced racing game built using HTML5, JavaScript and WebGL, with the help of Three.js. It is a tribute to the original Wipeout and F-Zero series. It is a graphically heavy game, approaching the level of desktop games from a few years ago. Luckily, you can lower the level of detail before playing.Here is a video from the game author explaining how he made the game.



11. Chrome World Wide Maze

This is a Chrome Experiment by Google that lets you turn any web page into a 3 dimensional maze through which you move a ball. What is even cooler, is that the ball is controlled from your smartphone.

Chrome World Wide Maze

Chrome World Wide Maze

12. HelloRun

HelloRun is a WebGL game powered by Three.js that puts you in the hull of a spaceship and forces you to find your way by jumping through hurdles. The game has great visuals and progressively speeds up and becomes more difficult.



13. Hello Racer

Hello Racer is an impressive visualization of a Formula 1 racing car, powered by WebGL and Three.js. It features life-like reflections and shadows. You can even drive it around with the WASD keys.

Hello Racer

Hello Racer

14. 360 Car Visualizer

This is another experiment that features detailed car visualizations. This time you can choose the car model and color. The colors are applied dynamically and all the textures are updated to match.

360 Car Visualizer

360 Car Visualizer

15. Google Maps Cube

Google Maps Cube is a game that presents you with a 3D maps cube. Your job is to navigate a ball through the city and reach checkpoints.

Google Maps Cube

Google Maps Cube

16. CSS3D Periodic Table

This is an impressive demo of Three.js. Instead of WebGL, this experiment uses CSS3D to render the chemical elements boxes. You can choose between four layouts: table, sphere, helix and grid.

CSS3D Periodic Table

CSS3D Periodic Table

17. WebGL Globe

The WebGL Globe is a visualization experiment that, similar to the arms globe, presents data overlayed on a globe floating in 3d space. This example is centered around population by city, but you can see versions with different data sets here.

WebGL Globe

WebGL Globe

18. Obsidian

Obsidian is a WebGL demo that synchronizes floating shapes and colors to music. Although there is a slider at the bottom, this is not a video – the effects are generated in real time.



19. Indra’s Net

This demo presents a multidimensional web of raindrops that reflect each other and the world around them. Even though a very large number of objects is involved, the rendering is still quite fast.

Indra's Net

Indra’s Net

20. Planet Maker

Planet Maker is a web app powered by WebGL and Three.js that lets you create real or imaginary planets. You can choose from several surface texture options, tweak the lighting and atmosphere, add or remove clouds, upload your own imagery, or wrap a ring around them.

Planet Maker

Planet Maker

Bonus: WebGL Nyan Cat

Frankly, no collection of WebGL resources is complete without a nyan cat. Enjoy!

WebGL Nyan Cat

WebGL Nyan Cat

Find even more impressive WebGL demos here:

Tutorials and Examples

Now that you are sold on Three.js, where do you start? Here is a collection of tutorials, examples, presentations and videos to get you started.

Getting Started

  • Introduction to WebGL – this is a presentation with live code examples that will introduce you to WebGL and Three.js.
  • Getting Started With Three.js – a great tutorial that explains the basics of 3D modeling using the library. It is easy to read and beginner friendly.
  • Getting Started – this is the official getting started tutorial. It explains the basics for getting Three.js running.
  • Creating Particles With Three.js – another tutorial by Paul Lewis, in which he explains how to develop a cool particle system (demo).
  • WebGL Academy – if you wish to learn pure WebGL, without Three.js, you can follow this step by step guide. Here you write code in an editor and see a real-time preview of the result.


  • Basic Three.js Examples – These are beginner-friendly examples, that are easy to follow and well-documented. Start with this page once you’ve completed the getting started posts.
  • Three.js examples by Stemkoski – This page might look like it came out of the late 90s, but it actually quite relevant. It hosts a large collection of Three.js examples with thoroughly commented source code, which cover a broad range of topics.
  • Official Three.js Examples – These examples demonstrate every part of the library. Unfortunately the source code is lacking on comments and might be difficult to follow at times.


More Resources

  • The official Three.js reference – you should bookmark this and have it opened in a tab at all times.
  • The official wiki – contains a FAQ section and links to various articles and other resources that you might find useful.
  • Learning Three.js – this is a blog dedicated to publishing Three.js tutorials. Each post explains how to make one of the popular demos that you see throughout the web.
  • Three.js Editor – this is a code editor for three.js with live preview. You can use it to quickly try out things with the library. You can share your experiments with others and save your progress.
  • Alternative documentation – this is an autogenerated index of all the methods in the library.
  • Google+ page – here you can find fresh news and links about the library.
  • SO questions, tagged with three.js. Reading through the most popular questions and answers now will save you time and headaches later on.
  • WebGL Subreddit – this is not focused only on three.js, but is worth browsing nonetheless.

A Quick Guide to Web Storage

Almost every desktop or mobile application needs to store user data somewhere. But how about a website? In the past, we used cookies for the purpose, but they have serious limitations. HTML5 gives us better tools to solve this problem. The first is IndexedDB, which is an overkill as a cookie replacement, and Web Storage, which is a combination of two very simple APIs and which I will be showing to you today.

What is the Web Storage?

Generally speaking, Web Storage (also known as Dom Storage) refers to a set of APIs that attempt to provide a simple way to store client side data in the browser. It is more secure and faster than cookies, not to mention more powerful. Data is stored in the user’s browser and is not transferred across the network like cookies are. It is also possible to store larger amounts of data than cookies without affecting your website’s performance.

Web Storage provides two awesome objects for storing data:

  • localStorage: By using this object, you will store data without an expiration date, which means the data will be stored in the user’s local storage forever;
  • sessionStorage: By using this object, the data that you stored will be there until the visitor closes their browser (not the tab). A good use case for this is to save temporary data like the contents of a form the user is filling, in case they close the tab or reload the page accidentally.

Getting Started

So now that we know what Web Storage is, it is time to get our hands on it.


It is very simple to save data to localStorage – you only need to assign it as a property . Reading it is exactly as simple, as you can see in the example below:

localStorage.myText = 'This is some text which have been stored with localStorage object';
document.getElementById("text").innerHTML= localStorage.myText;


Storing and retrieving data from sessionStorage is done in the same way:

sessionStorage.myText = 'This is some text which have been stored with sessionStorage object';
document.getElementById("text").innerHTML= sessionStorage.myText;

Both objects have setItem()getItem() and removeItem() methods which you can also use:

localStorage.removeItem('username'); // Johnny is no more!

You can also iterate them like regular objects, and check their length:

for(var i in localStorage){ console.log(localStorage[i]);}

These are only the basics for using Web Storage, but they will be enough for you to implement the API in your web apps. There are more awesome things you can do with Web Storage, as you will see in in a moment.

Browser Support

As is usually the case with awesome HTML5 features, you have to look at the list of supported browsers before making use of it. Web Storage is supported by almost all the modern browsers including IE8+, so it is ready for use. Unfortunately IE7 and earlier versions of Internet Explorer don’t support the APIs, so you will have to use one of the fallbacks mentioned below, if you want to support them.

Javascript Libraries for Web Storage

Here are some cool JavaScript libraries that take Web Storage to the next level:


A simple (proof-of-concept) script loader that caches scripts with localStorage.




A light-weight, cross-browser, JavaScript local storage utility.


A tool that maps the structure of the databases in objects using the localStorage API.




The JavaScript library for using localStorage and sessionStorage more easy.




store.js exposes a simple API for cross-browser local storage.


Web Storage is a cool HTML5 feature and although it’s been a while since its introduction, now we have lots of great libraries for it. Remember that this is just a quick guide and and there are still more things to learn about Web Storage, but I hope that this article gets you started on the right track!

The 10 Weirdest Programming Languages

Programming languages are supposed to be easy to use and learn. They should give you structure and allow you to solve real problems. Their syntax should be clear and understandable, and their implementations bug-free and fast. Sometimes programming language designers create a language that goes against these principles, either as research or for fun. Here are 10 of the most weird and impractical ever created.


Few programming languages are infused with the internet age as much as LOLCODE. It was created in 2007 by Adam Lindsay, researcher at Lancaster University. The keywords of the language are all capitalized and meme-fied. You can almost imagine a cat using it in production!

   UP VAR!!1

As with most of the languages in this list, there is no standard library to speak of. This means that you won’t be able to use LOLCODE for anything more than reading a file or writing text to the console. If you need a more powerful version, check out LOLPython, which is inspired by LOLCODE and gives you access to all of Python’s powerful libraries.

For more code and examples, see this Wikipedia entry.


2) Glass

Glass is an esoteric programming language developed by Gregor Richards in 2005. It combines an unintuitive postfix notation with heavy object-orientation, requiring extensive juggling of a main stack combined with its object-oriented structure. According to the author no other language is implemented like this, because it would be idiotic.

Here is an example of a program that outputs a Fibonacci sequence:

=/(_nlm)(_n)*(_f)f.?(_o)(on).?" "(_o)o.?(_n)(_n)*(_a)a.?=(_nlm)(_n)*

See more examples and notes in this esolang wiki page.


3) Brainfuck

Brainfuck is the superstar of obscure languages, reaching almost a cult following. It is notoriously difficult to program in, with only eight simple commands and an instruction pointer. It is designed to challenge and amuse programmers, and was not made to be suitable for practical use. It was created in 1993 by Urban Müller. Here is what a “Hello world!” program looks like:


Read more about it here.


4) Chicken

Chicken is not only the name of the language, but also the only keyword that is allowed in it! The number of repetitions and new lines determines the opcode which is executed. An example program follows. Can you guess what it does?

chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken chicken
chicken chicken chicken chicken chicken chicken

Read more about it in this article.


5) Whitespace

Whitespace is a remarkable programming language. It understands only spaces, tabs and new lines, and ignores everything else. This makes it possible to have a regular program written in another language like JavaScript, the indentation of which is a program in whitespace! Here is an example that prints out “Hello, world!” (spaces are marked with an S and tabs with a T):

S S S T	S S T	S S S 
S S S S S T	T	S S T	S T	
S S S S S T	T	S T	T	S S 
S S S S S T	T	S T	T	S S 
S S S S S T	T	S T	T	T	T	
S S S S S T	S T	T	S S 
S S S S S T	S S S S S 
S S S S S T	T	T	S T	T	T	
S S S S S T	T	S T	T	T	T	
S S S S S T	T	T	S S T	S 
S S S S S T	T	S T	T	S S 
S S S S S T	T	S S T	S S 
S S S S S T	S S S S T	

Learn more here.


6) ///

/// is a minimalist language that consists of only one operation – string substitution in the form/source/replacement/. It was invented by Tanner Swett in 2006. The language is very limited, but some clever programmers are able to turn the string substitution operation into fully working programs that loop and output data. Here is a simple “Hello, world!” program:

/ world! world!/Hello,/ world! world! world!

Learn more here.


7) Befunge

Befunge is a two dimensional programming language. Your code is placed on play field with a fixed size. Each cell of the playfield can hold either code or data, and your program can replace any cell it wishes with either. The interpreter starts at the top-left cell and continues to the right. You can control the direction which the interpreter takes with special directional instructions. For example this is an infinite loop:


And this is a “Hello, world!”:

0"!dlroW ,olleH">:#,_@

Learn more here.


8) Piet

Piet is a programming language in which programs are bitmaps which look like abstract paintings. The basic building block for Piet programs is the color block. It supports 20 distinct colors, with some implementations having support for more. The compilation is guided by a “pointer” that moves around the image, from one continuous colored region to the next. Here is a “Hello world!” program:

Hello World in Piet

Hello World in Piet

Learn more on the language’s homepage.


9) Malbolge

Malbolge is a programming language invented by Ben Olmstead in 1998, named after the eighth circle of hell in Dante’s Inferno. The name was not chosen randomly – the language was specifically designed to be impossible to write useful programs in. A few years after its introduction, weaknesses were found in the design which make it possible to write Malbolge programs. You still have to be a cryptography scientist to write a meaningful program in it, though. Here is what ‘Hello World!” looks like in Malbolge:


Learn more here.


10) ~English

~English is a programming language that attempts to imitate natural sounding language. Its syntax is very loose to give the writer a greater freedom of expression. No functions can be defined by the programmer – he may only use the built-in ones. Here is an example program:

Display "Hello world!" and a newline.
Stop the program.

Learn more about the language here. You might also be interested in Shakespeare.


Honorary mention: JavaScript

JavaScript is the most popular programming language today. The side effect of this is that every idiosyncrasy of the language, however subtle it is, causes bugs in the code of thousands of programmers every day, which earns JS a place on this list. There is an entire website dedicated to JavaScript’s weirdness, but to give you an example, here are two small JS snippets that are perfectly valid (you can try them out in your console):

// This prints 10:

// And this "fail":

See these StackOverflow questions for more info: 12.



Esoteric languages like those included in this collection, are a way to propose and validate new ideas. Sometimes these ideas influence the entire industry. Most of the time, though, they are so impractical that they remain niche and esoteric.