Rebalance – Webapp

October 11th, 2016
As an extension of the Rebalance design project, I've also built a sample webapp version. It works using the WebGL framework three.js. The animation during the breathing guide was built using HTML5 canvas. Here's a link to the webapp - Rebalance Sample. I've used the 3D female model I produced in Blender3D. The lighting is unique due to the setup within three.js. It was designed to be used on mobile, but it works fine on desktop. However, here's a brief video and images. The videos don't include the audio guide that plays with it. ...

Read More

Artisan building a WYSIWYG CSS editor

January 22nd, 2016
During my workflow in building websites I find myself experimenting a lot with design. Although I spend the time to design it in Photoshop fist, almost always I think of new ideas and inevitably change and improve the design as I develop the HTML, CSS. The problem is that during these experiments and improvements I'm doing it all in code. In example, if I want to move an element's position, color, font size, background-image, background-position, etc. I must write it all out in code. Instead, if I could have a visual interface (GUI) where I can just click and drag a control to change the style attributes it would be much faster than typing it out. In more of a solid example: if I wanted to change the background-color, instead of typing 'background-color:rgba(255,255,255,0.8);' I could just click the element I want to control, then click and drag on the color picker and get the exact color values I want in a few seconds. ...

Read More

Building an IDE Artisan

January 18th, 2016
I've used many IDEs over the years, mostly Sublime Text. The feature I've wanted to discover among them is something like a schematic or graph view of the classes in my project and how they're connected. Its often useful when building large scale applications to see the bigger picture. So to see which classes inherit from which, and which classes depend on another, and which class calls what methods on its dependent. Seeing all this in an abstract graphical view allow you to see the "architecture" of the classes. ...

Read More

Rebalance App Design

January 11th, 2016
The main project I've been working with at Psychological Technologies is an app called Rebalance. Its an app that you can pop up and use within minutes to relax and clear the mind. I've used it often enough now that I feel instantly calm almost as soon as I open the app. It works using a few exercises. My favorite is the breathing guide. ...

Read More