Recently I was asked to create a popup window for a website, the requirements were as follows:
- A popup box is to show up a few seconds after the page loads.
- Users will be able to dismiss the popup box and the box will not show again for the user for 6 hours.
- There will be a different popup box for each page (the site has a few hundred pages), and they show and hide independently.
Continue reading Better Client-side storage for popup window
This is an old post and react has changed the way it handles animation since
The React way
ReactJS provides a high-level API: ReactCssTransitionGroup to perform CSS3 Transition based animation. By using ReactCSSTransitionGroup, you get a class change when an item is entering, has entered, is leaving, and has left.
Continue reading ReactJS Animation done in two ways
Gulp vs Grunt
I recently made the switch from Grunt to Gulp and I’m pretty happy with it. The difference between Gulp and Grunt is in their setting of tasks. People say that Grunt is “configuration over code” and Gulp is “code over configuration”. In Grunt each task needs to be configured independently, for example:
Continue reading Setting up Gulp for Front End Develoment
Continue reading Pre-1885 Sydney Street Photos Explorer
I have always find regular expressions massively useful but can be quite hard to understand and use, especially for beginners. There are plenty tools out there that help you to find regex matching, but none of them look very pretty (very important!) so I made one by myself.
A while ago I wrote this project that let people quickly look up a country and retrieve brief info about it: http://chloechen.io/countryfinder/.
Continue reading ReactJs Country Finder
Recently I have set up vagrant and amp stack on my machine, and I encountered a few gotchas that I think are worth mentioning. So I think I will write a blog post about it for people who run into the same problem with me.
Continue reading Gotchas in setting up Vagrant on Mac OS X Yosemite
A radio animation, made with processing.js.
Source code of this animation and some of my other processing projects can be found here.
Here is another radio themed music wave animation using processing and processingjs:
Continue reading More animated waves
Grunt is a front-end task runner that helps with workflow automation. It works with Sass, Less, CoffeeScript etc.
Drupal Radix theme comes with Compass configured, and with the right version of Compass and Sass installed, I am able to run
Here is how to set up grunt in Drupal theme:
Continue reading Setting up Grunt in Drupal Radix theme