Orangutangy

Category: Experiments

  • Back end-less back end

    Want to try this for my gradebook which runs on a quick node.js express server.
    http://hood.ie/intro/

  • Sass maps for color families

    First time using Sass maps. Trying to easily create lots of css classes for a particular color.

    Line 2 defines the keys and colors.

    Line 9 This mixin loops through and outputs the actual css.

    line 19 finally calls the mixin.

  • Thoughts: comparing skills, contributions

    2 thoughts.
    On comparing skills
    Someone can always do things better than me and I must learn to have the confidence to accept that. Acceptance means not being reckless and stubborn about my position but also not being frozen and submissive to the status quo.

    On contributions
    For years I’ve struggled with my thoughts on community service but I think I finally have a question that I need to answer, “How do I want to contribute?”. I need to hold off the loudspeaker of news telling only problems and let myself decide on how to help on my own terms.

  • Git repo on remote server

    I’m beginning to really love git. However, I’m still a newbie especially when it comes to scalable architecture. How do I deploy my files onto my shared server using git?

    Steps

    1. Be able to SSH into your server without asking for a password
      • Verify or create a public RSA key (on your machine)
        • This is found (on your machine): ~/.ssh/id_rsa.pub
      • SSH onto your server (via terminal)
        • ssh -p 2222 username@domainname.com
      • Put the key into a authorized_keys file (on your server)
        • This would be found (server): ~/.ssh/authorized_keys

    Resources I cobbled together

    http://blog.realtweeter.com/use-git-on-hostgator-shared-hosting-account/
    http://www.arlocarreon.com/blog/git/push-git-repo-into-shared-hosting-account-like-hostgator/
    http://git-scm.com/book/en/Git-on-the-Server-Setting-Up-the-Server

  • Today’s experiment: Parallax scrolling

    Codepen link

  • Completed: Loading layer animation

  • Pottery Fall 2012

    Just got my bowls back from firing. I think they turned out pretty well for being my second class! I love the two-tone yellow-orange. Note to self: Floating red + yellow !

  • On WebSQL, mobile programming

    Been experimenting with Phonegap, but I’ve run into some major struggles with WebSQL and specifically the craziness of clear tutorials/documentation on it. I spent over an hour not knowing why AUTO_INCREMENT wasn’t working before learning that the WebSQL version of that function is AUTOINCREMENT (one word). FYI, there’s several versions of SQL, so search for your specific use case if stuck on syntax errors. Props to twoHard blog for solving that one.

    I also want to point out 2 books that have helped tremendously as I learn Javascript and PhoneGap:

     

  • Picking a CSS framework.

    I really like the 960gs, but I want to make an adaptive site. So I’ve been on the hunt for a css framework that includes 2 things: a set of media queries, a set of grid classes.  It’s been frustrating since many of the frameworks seems to have one but not the other. Of course I want to get this up in < 1 day. So far I think Simple grid is the best followed closely by Skeleton.

    Frameless grid

    • Very little documentation. Seems to require LESS framework compiling?
    • Can’t figure out how to use quickly
    • Stack overflow: How to read less css

    Less grid

    • Still have to define pixel widths for each media format? slow!

    Skeleton

    • based on 960gs
    • Worried about page load, unminified, non-cdn
    • Have to Redefine lots styles.

    Simple grid

    • Nice nesting of columns.
    • Seems the easiest to start up.
    • Worried about page load, unminified, non-cdn
  • New Portfolio site

    New Portfolio site

    Working on a new personal site design. I decided against wordpress since it takes too long for me to go through and update all the templates to my wishes. One of the new things I’m trying is responsive design and CSS3. Try resizing the window…

    New homepage (work in progress)

    Medium-small

  • Sifteo Cubes: Notes on Developing

    Warning Sifteo cube development is still very ALPHA. And as usual, Documention is sparse/erratic. Here’s my personal notes trying to “get started”.

    • Need to download Sifteo’s developer’s kit, SiftDev SDK. It includes:
      • 6 Demo projects, with some brief documentation on features used
      • SiftDev, a developer’s version of Siftrunner
      • Siftulator (A cube simulator – kinda broken!)
    • Download & install the MonoDevelop (the IDE that your use to compiles/runs the apps)

    Running the demos:

    1. Open up the MonoDevelop app.
    2. Open up the .sln project.  File > Open Project > … navigate to the demo folder and find the demo you want to run
    3. Fix the broken project references.
      • Project > Edit references
      • Delete the reference to Sifteo
      • Find the Sifteo.dll file by navigating to the Sifteo_SDK/Siftdev.app/Contents/Resources/Runtimes/Mono/Current/Sifteo.dll
      • Click Add, and it will appear in the right pane.
      • Hit OK to apply changes
    4. Run the code. Menu Run > Run
    5. Open up the SiftDev app.
    6. Connect/pair your cubes
    7. Load the app by going to the Developer menu > load apps… > Select the folder of the demo
    8. Click on the app and hit Play!,

    PS: I’m running Mac 10.6.8, SiftDev 1.1.2, MonoDevelop 2.8.6.5, Siftulator 00_05_09

  • Mobile app – part 2

    Mobile app – part 2

    Ok- so after going to a phonegap SF meetup tonight– I got super excited and needed to get something done tonight. I needed to get something small done since I only had about 3 hours.

    Goal: Generate & show QR code on iphone simulator

    1. Started by following this tutorial on embedding a map:
    2. At first I couldn’t click on links or view external images. Was baffled until I noticed errors on bottom panel.
    3. Next I gutted the code to just show a url of an image.
      • Google has a nifty qr code generator. Based on the url, google will return a qr png image.
      • function run() { var url = “https://chart.googleapis.com/chart?chs=150×150&cht=qr&chl=Hiya”; document.getElementById(‘map’).setAttribute(‘src’,url); }
    4. And that’s it! Run and done!

    Next up: Reading QR codes…

    Seems like there’s 2 main phonegap iphone plugins: ZXing and ZBar. I need to read up on both.

    Edit- Ok I lied- I got bored and decided to add a form submission to change the qr image. I used jquery mobile to get the quick and dirty styling. ~1hr (’cause I forgot how to handle forms)

  • Mobile app experimentation

    Everyone tells me that two fields are rather hot right now in design: UX (User experience) and Mobile design. So, in the two weeks I took off for the holidays, I figured I’d do some dappling in some mobile app creation starting with a simple iPad game. I want to document some of my thoughts around the process as I go through it- just in case I forget (always)

    1. Purchased IOS Dev account.  $99  (Actually $107 w/tax)
    2. Downloaded Phone gap for iPad
    3. Downloaded  & installed xTools on Apple’s site (>4gb! So large a download!)

    Tools Used

    • Phonegap
    • jQuery mobile
    • Sencha?
    • Crafty

    Articles read

    Update 12/26: Got phonegap working on xTools

    Was able to get phonegap up and running. Basically allows you to use js instead of ios. You still use xTools for the iphone simulator and the deployment of your in-process project. It’s pretty wild to see your own ‘app’ on an iPhone.

    Update 12/28: Trying out Crafty JS

    Saw Crafty JS was a good game JS library, so I’m trying it out following this tutorial.

  • Rounded Corners in CSS tutorial

    I just learned that you can add more than 1 background image to an element through CSS. It appeared in one of my student’s CSS exercises and I was floored! Could multiple background images be a solution to create the infamous rounded corners? Simple answer: YES. (more…)

  • Augmented Reality – Test 1

    Yukiko's test of Augmented reality

    I just got my augmented reality demo to work! It was really easy – Just one afternoon of work. To try it out you need: A webcam, a printout of this page. Click on this link and hold up your printout to your webcam in order to play with the demo.

    I pretty much followed this video tutorial by The Flash Blog. It describes how to use the FLAR and Papervision 3d toolkits with Flex to detect a symbol in a video feed and map a 3D model to its plane. I just adapted his tutorial to Flash. (I’ll post my .FLA shortly)

    Here were my overall steps:

    1. Download FLARToolkit
    2. Download Marker Generation tool (Air app)
    3. Made marker in Photoshop and printed it out
    4. Ran the Marker Generation app and saved a .pat pattern file
    5. Created FLARdemo.as class file, Flardemo.fla
      • in the .fla, declare Flardemo object, add to display
      • setupFLAR() – import .pat file
      • setupCamera()
      • setupBitmap() – load video feed into flartools
      • setupPV3D()
        • Create scene, camera, container
        • create lights, materials, objects
        • Create render engine, FLAR trans matrix, viewport
        • Add to display list
      • Create onEnterFrame event handler
        • Feed video to FLAR
        • test for symbol detection, if yes then,
          • get and set transform matrix
          • render papervision!
    Some overall troubles and solutions included:
    • Since in Flash, not flex, I needed to declare, create, and add to display list a FLARdemo object in my .fla file. This wansn’t described in the Flash blog tutorial.
    • Also since I was working in Flash, library imports were a bit more complicated. I eventually gave up and cut/pasted from another tutorial that he was following. A less documented, but code provided tutorial is located here by a guy named Mikkoh.