Tuesday, February 26, 2013

How I learnt Programming? Facebook Mark

All the programming celebrities talking about everyone in the United States can learn how to program! Motivation matters. Cheerios.

Code Speak and the Metaphors

We frequently have to remind those around us that we are all beginners once. As women, we often are very apologetic and somewhat nervous to ask for patience from others, though we generously give much patience.

In intensive learning environments, fast-tracked events/conferences/classes, especially concerning the tough topic of learning to program,

I had to learn to embrace my learning styles: I like to have complex concepts explained to me in simple terms, I liked to be offered keywords that I can research, I don't like to hear unnecessary diminishing commentaries even if they are from my mentor/instructor/teaching assistant or anyone offering help.

I *am* sensitive, and I can't help it! For example, I heard comments such as : oh that's super easy, it took me just 15 minutes (that was clearly not true, takes about 15 minutes to set up the work environment). It was super easy for me, I don't know why you took so long... There's no need to go on-and-on about the negativity.

The conclusion of the rant is that: when I ask for an answer, I just need the answer, not some showy commentary or some pointy fingers :) thank you very much.

Many beginner coders (including plenty of ladies) have asked me to explain programming concepts in metaphors. And I thought that was quite interesting! Because it was rather the art of expression, and plenty hard to find the right answer, so I have to constantly refine and look for the most adequate metaphors. It is a writing challenge. The mishap of metaphors is that they are not as perfect as the definitions of the programming language/methods/elements. But sometimes those definitions are so cryptic, using a proxy to gain some level of understanding is definitely better than nothing.

Here are a few metaphors that I have heard, which seem to be working well. What are you favorite code speak metaphors? Comment tweet shoutout and chat about :) This is an initial draft, it will be revised, and augmented with user input.

  • Text editor for code: the Word Document of codes
  • Git version control: the saving function of Word Document and having multiple versions as backups or variations
  • Database: a massive excel file with multiple worksheets (tables) except that DB have them connected one way or another rather than just lining up
  • Ruby, Python, Javascript, Php: flips sides of the same coin, different programming languages trying to achieve similar messages, i.e. like dialects or just different languages
  • An object: is like a box with some common attributes like height, width, length, but also has some basic functions like storage. 
  • MVC: putting app files in different folder structures to separate the various components, like putting different clothing accessories in different drawers
  • High level programming languages: the programming language sound way more like plain English than machine speaks (codes) XP
  • HTML versus CSS: HTML contains the information, but CSS is really the graphics that makes the info pretty and presentable
  • jQuery: a simple library of javascript that makes interactive web design easy

Saturday, February 23, 2013

CodingDojoCo - HTML & CSS in two days!

I would not have believed this if I didn't do it with my own hands! Thank you dojo, sensei and tomo :)

[Link] The Wonderful Quest of a New Programmer

The guest post that I wrote for Women 2.0, a website of great resources for women in tech or interested in tech!

The Naked Web

A shocking lesson learnt at the bootcamp - CodingDojoCo during week one. The naked web is nothing like you have imagined. Before the class, I thought I can completely ignore CSS. But the reality is that HTML is amazing but CSS delivers the eye candy. Here's a quick look: CNN and CNN partial screenshots without the CSS. Shocked? See what I mean by Michael shows us what is possible for us? The key is to show that everyone can learn.

First Week at the Coding Dojo, a coding bootcamp

Woke up Saturday morning, exhausted. Haven't had to work so hard and be a "sponge" for a while. Shockingly even compared to Stanford and consultant life, this was a big ramp up. I told my sensei: for the first time ever, I had to seriously look at the syllabus (I was mostly a free spirit in college, cram at the end or just power through).

Two every important parts of a given boot camp: the instructors including mentors and equally important, the peers. 

Long-term front-end developers, webmasters, writers/editors, musicians and people who recently left their job like me all ended up here. People came here to learn skills they never knew or to connect the scattered dots that they learnt here and there. And whenever I get comfortable, I will be dazzled by my peers' impressive work and dedication, and get back down to earth again.

Perhaps more important than the actual video and live tutorials, is the "preaching of the sensei" much like the master of the Karate Kid: he will push you to stick with the fundamentals and improve gradually, except, the difference is: he will also show you the way.

The sensei will have to show us the way not just by exemplifying it. None of us had any doubts that there are computer geniuses out there, but the question is: can we be a web developer? Or can we even code? Our instructor Michael did that by showing us that we are all able to easily write the HTML for all websites, the styling and design are the tricky part. Strip out of the CSS, websites can look very ugly when naked.

Then the influence of the peers matter a great deal. The perceived dedication of group members check the not so focused students into place (that is very much the story of me). I was grumpy about commuting back and forth between San Francisco, until I met people came down from LA and Orange County, code in the day and seek housing in the evenings. Half of the class show up before 8AM, an hour before the class starts.

When you seriously start to rethink everything you do - is when someone who never programmed before came up with a great idea! It takes away all the pride and arrogance. At times, things get overwhelming, that's when you have to calm yourself and not let it get to you.

Programming is as much about the psychology and personality as the knowledge that you are acquiring. What stressed me out the most during the first week is that I don't have the programming personality. I had to come to terms with my short falls as well as my strength. Wow, it's crazy that it starts to be like a dojo.

Friday, February 15, 2013

Klout - impression - are you an influencer

Startup lifestyles in Silicon Valley:

The geek girls got together to see klout and the wonderful ladies who work there: from community manager, HR to operations and the front end back end developers.

Klout had us write down more than just the names on our name tags. What topics are you influential in? That is a great question. I wrote down Yelp, Codecademy, travel and Stanford. Everyone thought I worked at Yelp.

In case you don't know (my) Klout currently scores 5 social networks and renders one score that represent how influential an individual is within her social networks. And it was one of the first ones to do so, with many perks. Literally, you can receive freebies if your klout score is high enough.

Really, there isn't much down side to signing up. The female engineers at klout didn't have amazing scores, but they got all the geek girl SUPER excited. Working at the Javascript powerhouse, these are hand selected employees hired upon unanimous vote, a long interview process, and a lot of questions. Congratulations to their success! Everyone was super approachable.

As for how the score is determined, of course, that is the secret "recipe" of Klout. It is aiming to deliver more useful contents to users, not just judge them on their scores, after going through 3 rounds of front-end redesign and at least 3 rounds of back-end sort out of its Big Data processing.

Want to hear more about programming and startup lives in the Silicon Valley?
You can help by supporting my education here. I am striving to make more information available!

Thursday, February 14, 2013

Programming Girl Battle Chest - throne : ergoergo

This new ergoergo stool is now my throne of choice! Unlike a yoga ball (which didn't work for me :( I can now rock around and enjoy a minor core workout while keeping a healthy spine. I discovered these at the container store! So happy. After I started to learn programming, it was super hard to sit all day long. This does the trick for me.

[The above is a Amazon link, your purchase will help me with my programming quest. I can hence then keep this blog updated with the excitement of Silicon Valley. True to today, I just found this wonderful stool and I am using it :) If you want to request a picture of me :P comment!]

Codecademy now an essential tool for beginners

Did you know that Codecademy was down yesterday? It surely will be obvious if you are a beginner using the tool. A few girls at the Javascript study groups already told me that they weren't able to get their meeting going due to the outage.

A friend who tried a new tool was dissatisfied and quickly missed Codecademy. The funny thing was, she wasn't even a fan before. The outage (which unfortunately erased a few progress marks, and is currently being worked on by the Codecademy team for restoration) has somehow showed her just how important this tool is.

 Cheers to those yet to discover just how carefully designed the lessons are in this website. And one reason we loved it? It helped so many of us who didn't like reading tutorial books get started on coding. I still receive tweets on a daily basis about working moms, business practitioners, just everyday people learning how to code with Codecademy. Happy thoughts.

[Updated Feb 17]
For those affected by the outage, unfortunately some efforts are lost. As Codecademy does not charge a penny, and has gained quite a user base, it is hard for users like me to get mad beyond submitting a ranting support ticket. Codecademy supplied the apologies through multiple popups, but it wasn't enough, data was still lost. In the true spirit of #gamification - an element of the site - a 404 error badge was distributed to those affected! (super cute indeed) And it was promised that this will be a rare badge (reading between the lines : we are sorry and it won't happen very often, hence rare badge)

Monday, February 11, 2013

Anatomy of a Hackathon!

I am a geek girl making in progress (You may know me as that Codecademy Girl from Crunchies 2012 and the Venture Beat article about me. ). If you want to support my effort to learn coding please join me here and support my campaign, fundraising:

You can read about me on VentureBeat and the Crunchies award!

Currently there are 2 comments and 70+ twitter reactions.

With the support of my first two angel-referees, I attended my very first hackathon. Here's a diagram with it explained. Please note that this is only version one. I will keep updating this.

The grand conclusion is that there are totally beginner friendly hackathons, and it is a lot of fun, despite at times it may be intimidating to be with a roomful of experts.

  • People take turns to go up and present their ideas/projects, can optionally form groups/tables
  • Work on a group project, spontaneous project, or your very own
  • Optional: at times there may be a beginner friendly table, join it to work on a tutorial, get help, ask questions, do whatever you want
  • Keep in mind, every hackathon is different, some may have competitions, deadline, no beginner table, etc... I will post different versions of this diagram soon~
  • Endless food/drinks. I learnt that unlike writing an essay, coding doesn't flow with alcohol. I quickly switched from one sip of beer to a doubleshot Starbucks. 

In my newsletter to angel-referee fund contributors, I will detailed my findings in newsletters~ The goal is to have something to share with the public but also some perks for the contributors that are exclusive.

Thursday, February 7, 2013

Be an Angel or a Referee - help a girl learn how to code

I started a personal "kickstarter" fund to raise money for my programming education. If you are interested in hearing me out, and potentially donate/contribute a small amount to help a "fuzzy" girl learn coding. Please watch my "pitch" here :D

You can donate with the link below. So far I have raised $90 from three fund angels! One is a consultant,, one senior mobile app developer and another social network app developer. You help means a lot!

The money is put into great use and for programming education only. Meanwhile, I will produce visual learning aids from my coding journey to help other learn.

Just this week, I went to my first hackathon ever, I am working on multiple programming courses (which cost money) and multiple free tutorials (use free resources whenever possible): Ruby, jQuery, HTML+CSS, Rails... I am on multiple coding projects concurrently.

One day I studied programming so much that my brain actually aches. Your support matters!

Today I put some first dollars into use to sign up for a $25 monthly subscription program for video tutorials. Meanwhile, I am sweating through multiple coursera and Youtube videos. It is getting hard pretty quickly! I am not just doing web design, but really web programming, so I need to get pretty technical, and start preparing for the intensive 9 week web development bootcamp that is coming right up!

In any case the first $25 is spend but if you sign up for Tree House too, you can learn programming through video tutorials, and that you can help me save money and also give yourself a huge discount by using my referral link. Here you go:

Thank you for helping a beginner programmer in need!

Monday, February 4, 2013

A List of Online Learning and Education Resources


Embedded Javascript Below

Studying websites by wireframe - pricing plan

As a part of my wireframing class, I decide to study a few popular websites and understand why their design/visuals are so great. Here's what I came up with after studying shopify.

I found this exercise very helpful. Wireframing (what I call reverse engineering wireframing) helps crystalize existing design ideas, simplify it to help the student understand what elements of design are present. Doing this exercise helped me realize that a seemingly simple page contains a lot of well-thought-out components. See full conclusion below after 3 screenshots.


I would argue that the seemingly simple shopify pricing and plan page is very well designed: encompasses many variations of call-to-action, presents relevant information keywords and FAQ, highlights desired outcomes. That’s a lot of information on a small seemingly bare page, with all the right elements but more robust information.

React UI, UI UX, Reactstrap React Bootstrap

React UI MATERIAL  Install yarn add @material-ui/icons Reactstrap FORMS. Controlled Forms. Uncontrolled Forms.  Columns, grid