Taking a step back

The past few days I’ve been banging my head against the wall trying to learn object-oriented programming.

Here’s what happened:

Monday

I sat down and decided to convert my teleabsence robot code to a ‘finite state machine.’  But I didn’t really know what that meant.  All I knew was that I wanted my robot to do a bunch of things at the same time, and I discovered the idea of a finite state machine via this Adafruit tutorial on multitasking the Arduino.  I followed the tutorial and got my lights blinking at different rates, but I just couldn’t understand how to translate what I had learned to my robot.

I decided to take a step back and learn wtf a finite state machine was.  I read a bunch of tutorials, but still didn’t get it.  I decided to go even further back and watch some lectures.  I settled on this MIT course, Introduction to Electrical Engineering and Computer Science.  I finished the lecture on Object Oriented Programming (OOP) and did the design exercises.  You can see my code here.

Tuesday

I’m feeling a little disheartened at this point.  I spent all of Monday reading and studying and doing problems, but I still wasn’t understanding how to apply any of this to my robot project.  I was feeling my enthusiasm dip just as I described in my learning with context post.

But I powered on!  I finished the next lecture on state machines and did the associated software lab (you can see my code here) and quiz (code here).

Then I tried giving my robot another stab and was totally stumped.

Feeling discouraged

I felt completely discouraged.  When I looked at my robot code it was like looking at it through a fog.  Who was I kidding trying to learn this stuff at 31?  These kids I see in the audience at the MIT lecture at half (ish) my age.  I’m 15 years too late to the game.

I had to remind myself that I had been learning OOP for TWO DAYS and I just needed to keep at it.  Of course it was hard!  Plus the class is in Python and my robot is in Arduino (kind of like C++).  This meant there was be an extra step of learning new syntax on top of new programming concepts.

Wednesday (Today)

Today I woke up redetermined to figure it out.  Of course it was going to take longer than two days to learn this stuff.  What I needed to do was figure out what exactly I wanted to learn and focus on that.  I need to stop jumping back and forth between projects and focus on what exactly I need to learn.  And I need to give myself enough TIME to learn this stuff.  I need to forgive myself for not magically understanding everything right away.

My mini-crisis last night, though, made me want to write a psychoanalytical post.  I think about this a lot, my mindset, how I learn, what I want, why I want it, etc., and I thought it might help to get it all out.

Fixed vs. Growth mindset

If you’ve never heard of Carol Dweck, go watch her TED talk now.  And read her book. She studies mindsets and learning.

I’ve thought a lot about my own mindset and approach to learning, what’s served me well, and what’s changed over the years.  I think it’s simplistic to say I have a fixed mindset and that’s why I’m not focused enough to learn this stuff.

Dweck also notes that mindsets change over time and depending on the subject matter.  You might have a fixed mindset when it comes to math, but a growth mindset when it comes to running.

I’ve thought about how my mindset has changed over time.  I often think about how focused I was in HS.  I would go to the art studio and stay there for hours painting or sculpting.  I’d forget to eat.  I’d do problem sets for math over and over.  Erase the answers and do them again.

I kind of had a growth mindset in high school, but only insofar as my grades were concerned.  I would believe I could get an A if I studied hard (and study hard I did!) but I didn’t believe I was ‘smart enough’ to really do subject X.

For example, I got a 5 on the BC AP Calculus exam, and a perfect score on my BC Calc final, and a very high grade in the class overall.  Part of the reason is because I wasn’t admitted to the class to begin with.  I was told my math skills weren’t good enough for BC, that I was placed into AB Calc.  My first day of senior year the AB Calc teacher caught me in the cafeteria and asked why I was in his class.  You should be in the BC class, he said.  I showed up for BC Calc and the teacher wasn’t happy I was there, but said he’d let me have a try.

I took that challenge and ran with it.  I aced the class.  But I never thought to myself, hey, I’m really good at this.  I should be a mathematician.  I thought ‘real’ mathematician’s got the material right away.  They didn’t have to study and struggle.

It took me many, many years to realize that I was wrong.  Yes, some people struggle less with some things, but everybody struggles with something.  And if you do something over and over again for long enough (build enough context) you can be good at nearly anything.

Fuck you mindset

I didn’t really have a ‘real’ growth mindset.  I wasn’t intrinsically motivated to learn this stuff, though I did believe that with effort I could do anything.  What I really had was a fuck you mindset.

In HS, what I really loved was showing people they were wrong about me.  I loooved upturning expectations.  My parents like to tell this story about when I was a kid how they were worried I was a slow learner.  I was terrible at spelling and was put into a remedial class in the 4th grade.  They didn’t think I’d amount to much.  I think that story stuck with me.  I incorporated it into the narrative of who I was.  I was someone you weren’t expecting.  I was smarter than I looked.  I wasn’t a typical girl.  Whatever.

However, that part of me, the “fuck you” part kind of died off as I got older.

As an adult, nobody cares.  Nobody has particular expectations of you.  There are no grades.  Markers of success are in your mind.  The external markers that do exist don’t have a linear path to obtaining them like good grades in HS.  You might want to make the Forbes 30 under 30 list (I know people who wanted to make it, and people who did make it).  But you can’t just work hard and make the list.  It doesn’t work like that.  You have to work hard, but you also have to be well connected, noticed by whoever it is that’s putting that list together, etc etc etc.  It’s luck as much as it is hard work.

So as I got older I realized that nobody really cares and learning something or getting good at something just to prove somebody wrong isn’t really a sustainable motivator.  I needed to figure out what it is exactly that I enjoy.

Figuring out what I like to do

From the first coding class I took back in 2011, I fell in love.  This was something that I could do for hours on end and not get bored.  This was something I really enjoyed.

As an adult, though, it’s a lot harder to throw yourself into learning a new skill.  You don’t have external motivators (my fuck you mindset wasn’t going to serve me here!), you have other responsibilities (job, relationship), you don’t have a clear path (take these 16 classes and become an engineer!).

I KNOW all this.  I know it so hard.  It’s embedded in my fucking bones.  But I still need to remind myself of it now and again.  When I hit my wall yesterday, I needed to take a step back and remind myself, Ann.  It’s been TWO DAYS.  You’re discouraged because there is no purpose, no degree at the end of the tunnel, there’s not even an end to the damn tunnel.  And that’s ok.

It’s ok because this time I’m doing it because I LIKE doing it.  I like programming.  I like seeing my robot run around and I want to make it run around even better.  So that’s what I’m going to do.  I’m going to slog through learning OOP.  I’m going to figure it out in python and figure it out on Arduino.  And at the end of the day I have no idea if any of this will lead to a job or an award or anyone caring at all, but none of that matters.  I’m going to keep my head down and figure this shit out.

Coding Part III: Design

Hi there!  Read Part I of my coding journey here, Part II here, and get the chrome extension here!

The dreaded “D” word (Design)

I am a terrible graphic designer.  I draw, paint, and sculpt and people always think because I “do” art I must be good at design.  They apply this to everything from graphic design to interior design.  However, these are totally different disciplines and I am a terrible designer.  So I won’t even pretend that I came up with some fancy design.  Instead, I googled around a whole bunch until I found a layout that I liked and copied it.

The design my tabs are based off of is from Jen Simmons’ blog.  I LOVED her big fat serif font so I found a similar free font from Google Open Fonts called Abril Fatface.  I used this for the names of the women.  For my body font, I picked a regular looking serif called Lora, also from Google.

Jen Simmon’s very helpfully had an example in her blog post that was exactly what I wanted my page to look like.  However, I wanted to use the new CSS grid layout system that had just launched (March 2017!).

I used her page as a visual template, but did my CSS from scratch.  I’m not very familiar with CSS.  I can never make floats and spans and whatever else do what I want them to do.  The Grid layout system is AMAZING.  It’s soooo easy to use and intuitive.  I was thanking my lucky stars this had just come out.

The key design decisions for me here were:

  1. I needed three layout options: 1. text-only, 2. text+image from Wikipedia, and 3. backup local image.
  2. I wanted a responsive page.

Below is what I came up with.  As you can see, the layout is heavily influenced by Jen Simmons’.

Here is the code for my styles.css layout!

Screen Shot 2017-04-20 at 2.53.39 PM  Screen Shot 2017-04-20 at 2.53.31 PM  Screen Shot 2017-04-20 at 2.53.21 PM.png

text and image from Wikipedia

Screen Shot 2017-04-20 at 2.57.29 PM  Screen Shot 2017-04-20 at 2.57.36 PM Screen Shot 2017-04-20 at 2.57.43 PM

text only from Wikipedia

Screen Shot 2017-04-20 at 3.00.52 PM.png

backup image from local directory

The code

Now that I knew what I wanted my page to look like, I had to code it.

My img variable was the key.  I had three options:

  1. Wikipedia did not return an img.  Img = “”
  2. Used a local image (no Wikipedia image or text).  Img = /imgs/X.jpg.  Img[0] is always “/”
  3. Wikipedia returned an image (and text).  All other options.

I used two classes in my CSS.  One for one column and one for two.  In my javascript I added an if statement to look to see which of these three options above was in my img variable.  Then I added the appropriate class to my html using jQuery.

if (img == "") {
   $(".tab").addClass("onecol");
   $("#imgdiv").remove();
 } else if (img[0] == "/") {
   $(document.body).css("background", "url(" + img + ") no-repeat center center fixed");
   $("#imgdiv").remove();
 } else {
   $(".tab").addClass("twocol");
   $("#img").attr("src", img);
 }

Trimming text length

I also did a few other checks to account for other funkiness that came up in testing.  For example, really long Wikipedia extracts would go off the page.  I didn’t like that the user needed to scroll to get to the “Read more on Wikipedia” link.  However, I couldn’t just put in a character limit because I didn’t like the idea of the summary getting cut off mid-sentence or mid-paragraph.  This was a bit of a pain, but I added a loop that counted up to 1200 characters to be displayed, and then when it reached the limit trimmed the extract to the nearest full paragraph.

I did this instead of just displaying the first or first and second paragraphs because paragraph length on Wikipedia is super inconsistent.  I didn’t want to just display the first paragraph since some women had a one sentence first paragraph and I wanted to capture more content from those cases.

// extract is the string from Wikipedia of the summary section. 
// It includes html tags.
if (extract.length > 1200) { 
  extractArray = extract.split(/(]*>)/);
  extract = "";
  var chars = 0;
  var stop = 0;
  // display up to 1200 chars of content - disregard html tags
  extractArray.forEach(function(item) {
  chars = chars + item.length;
  if (item == "" || item[0] == "<") {
    extract = extract + item;
    chars = chars - item.length;
  } else if (chars <= 1200 && stop == 0) {
    extract = extract + item;
    chars = chars + item.length;
  } else {
    stop = extractArray.indexOf(item);
    };
 });

Final thoughts & to dos

This was a really great learning experience.  I used jQuery, html, CSS Grids and lots of other new skills.  The whole thing is far from perfect, I wish I could detect faces and dynamically position the images so this wouldn’t happen:

Screen Shot 2017-04-20 at 4.53.39 PM.png

Since most of the images are portrait, when the page scales down to a single column and the image area is landscape, photos can get cut off in weird places.

I also didn’t make the local file option responsive.

I would like a dynamic way to have the list of women.  That way I wouldn’t need to update the files in the chrome store if I want to add or change any names.

I have many other “I wish” and “Next time”‘s, but for now, that’s pretty much it!

Here is the complete code for my chrome extension!  You can install the extension from the chrome store here.

Thanks for reading!

Other random things I learned:

  • If you don’t specify the data type of the result you want from your .get request, jQuery will try to guess it and it might not be right.  I was banging my head against the wall trying to figure out why I was getting back a string and then I read this:
    • The type of data that you’re expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string). source
  • I tried using the wikiblurb library since CS50 is all about standing on the shoulders of others and using good libraries.  I really liked that they had the links in the Wikipedia blurbs they got back, but I wanted more customization and it seemed like a bigger pain to customize around their library than to not use it.
  • I looked at stars.chromeexperiments.com to try to see how they used wikipedia extracts.  However, the blurb wasn’t matching up to what I was seeing in wikipedia, so I’m guessing that the blurb wasn’t getting pulled dynamically.  When I dug up the code (can’t seem to get to it again!) it looked like the blurb data was being held in a file somewhere as opposed to coming from a json request to the wikipedia API.  See screenshot below of the difference.

Screen Shot 2017-04-17 at 5.40.45 PM.png

  • Object-fit was key to replicating Jen Simmons’ image behavior (filling it’s portion of the screen).
  • Some useful documentation of named grid areas.  This was very helpful in using CSS grids to do my layout.

Coding Part II: Radfems

 

Hi there!  Read Part I of my coding journey here and get the chrome extension here!

Part of what reignited my desire to code was a project I did in December 2016 called He to She.  It was a simple chrome extension that changed instances of masculine pronouns (he, his, him) to feminine ones (she, hers, her).  It was pretty janky (code is here) and was largely written with the help of tutorials.

But it was SO much fun to write!

And I wanted to do more.

For my next project, I wanted to create a chrome extension that brought up a new woman in STEM with each new tab.  There are plenty of new tab extensions out there and I figured it should be within my realm of understanding.

Nope!

It was way beyond my capabilities.  So I headed back to the drawing board with CS50.  This time, I was determined to finish.  I had projects to create!

Granted, it wasn’t a straight shot.  I got distracted and built a shelf and a robot, but I got through the course in the end.

So there I was with a blank sublime text page, an idea for a project, and no idea how to start.

Sketching out the plan

I began by sketching out the user experience of my project:

  1. User opens a new tab.  A page with a random woman to know in STEM appears.  There is a picture, her name, and a short bio pulled from Wikipedia.  At the bottom of the page, there is a link to read more on Wikipedia.

Then, I broke down the actions I would need to figure out:

  1. Get the name of a woman in STEM
    1. I decided to put a pre-determined list of names in a txt file since I couldn’t find a good RSS feed or other such list of women in STEM
  2. Get info on the woman from Wikipedia
  3. Get picture of the woman from Wikipedia
  4. Add Wikipedia information to the new tab page
  5. Add some sort of backup option if the user is offline or Wikipedia doesn’t work
  6. Format the page so it looks pretty!

Using the Wikipedia API

I decided to tackle the info from Wikipedia first.  This was, in my mind, the meat of the program and so it was important to get it working.

To do this, I knew I would need to get a JSON object from Wikipedia.  JSON (JavaScript Object Notation) is basically an easily readable bundle of information from a website.

To get a JSON object, you need to request it.  One way to do this is to use JQuery to request a JSON object from an API.

Side note: We had used JQuery in CS50, so I understood the basic concepts, but I hadn’t sat down and read the documentation.  Like I said in Part I, I like getting context then going back for the foundation.  For me, it’s much easier to write a program using JQuery then go back and read the documentation than to read the documentation top to bottom and sit down to write a program.

CS50 is set up in to facilitate that style of learning.  They give you serious training wheels so you don’t really need to understand what you’re writing.  It’s up to you to follow up and read documentation to truly understand what you’re doing.

Back to my project: I started looking into whether Wikipedia had an API and found this page.  I also found this page about parsing JSON responses from JQuery and this one about Wikipedia extracts.  I used the URL from the Wikipedia extract page and some of the code from the parsing JSON page to put together a first working version of my javascript code.  A screenshot of my first successful grab of Wikipedia info below!

Screen Shot 2017-04-14 at 9.59.41 AM.png

link to v1 js code on Github

Seeing the words appear on the page was IMMENSELY satisfying, but I was a long way from a launch ready extension.

Making my JSON request dynamic

My next step to make my JSON request dynamic.  In v1, I had hard-coded in a single URL that retrieved the summary info for the wikipedia page for “Weather.”  I looked around for how I might build the wikipedia request and had an a-ha moment after re-reading the JQuery documentation on .getJSON.

I realized that “Data that is sent to the server is appended to the URL as a query string.”  This meant I could pass a number of parameters into “data” as an object, and the output would be url.com?A=B&X=Y for the object {A: B, X: Y}.

So I looked again at my wikipedia URL and translated the query string into a data object like so:

https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles=Weather&redirects=1
{ "format" : "json",
  "action" : "query"
  // etc etc etc
}

You’ll notice that the empty parameters like exintro=& are linked to empty strings in my data object like this –> {“exintro” : “”}

I also (later on) read on the Wikipedia API documentation page that you can (and should) pass multiple variables to the same parameter using the pipe symbol “|”.

For example, prop=extracts&prop=pageimages became:

{ "prop" : "extracts|pageimages" }

My final query looked like this:

 var wikiAPI = "https://en.wikipedia.org/w/api.php?";
 var test = $.getJSON( wikiAPI, {
 format: "json",
 action: "query",
 prop: "extracts|pageimages",
 exintro: "",        // this is to get just the intro paragraph
 titles: fem,        // variable with name of the random woman to lookup
 piprop: "original", // this is to get the image
 redirects: "true"   // this returns the final page after any redirects

Loading in my ladies

Now that that was done I had to figure out how to load in a list of ladies, and retrieve a random lady to look up.  In CS50, we had used separate text files to hold long lists so I decided that’s what I would do.  I created a .txt file and manually typed in a list of women in STEM.  (The list is basically a mashup of various buzzfeed/wikipedia/other lists, with some women who’s bios are super short removed, so suggestions/edits welcome!).

To do this, I would need to use a GET request.  This is exactly what I had done with the Wikipedia request, so this would be easy!  Also, since my file was local and I didn’t need to send any additional parameters, my GET request was VERY straightforward.  Just $.get(filename).  See below for my code:

 $.get("radfems.txt")
   .done(function(femlist) {
   var femlist = femlist.split(/[\n,]+/);
   console.log("getFemList success");
   randomFem(femlist, callback);
   })
   .fail(function() {
   console.log("getFemList error");
   })
   .always(function() {
   console.log("getFemList complete");
   })

You’ll see there are no additional parameters passed to my GET request outside of the filename.

The next piece was to parse the returned object.  Basically, I got back a big string, and I wanted to split it into an array of names.  Unfortunately, I had formatted my text file so that each woman was separated by both a comma and a newline.  I didn’t want to go back and reformat, so I decided to use a regular expression (regex) to match the comma+newline pattern.

Using an online regex tester, I tested out my regex and got back an array of my women’s names.  Success!

Retrieving a name

Now that I had my list of women loaded in, I needed a way to get a random name to then lookup in Wikipedia.  This part was very straightforward.  I used the built in Math.random() utility to generate a random number, and then used that number as the index to get a woman from my array.

var random = Math.floor((Math.random() * femlist.length));
 var fem = femlist[random];
 while (fem == "") {
 fem = femlist[random];
 };
 getFemInfo(fem, callback);

Local/backup image

The last piece of the puzzle was having some sort of backup image or text for when the user was offline.  I googled around and found this women in STEM bio series jewelry designer aubergdesigns had created.  I pulled a few of these images to use as my backups.

I put these images into their own “imgs” folder, and then linked to a random image in that local folder whenever the Wikipedia request failed.

 var test = $.getJSON( wikiAPI, {
    .... // this part is shown above...trying to keep it concise!
 })

 .done(function(test) {
   .... // this part is really long, see github for code
.fail(function() {
 console.log("getFemInfo error");
 getLocalFem(callback);
 })

// LOCAL FILE RETRIEVAL FUNCTION
var getLocalFem = function(callback) {
 console.log("getLocalFem");
 var random = Math.floor((Math.random() * 3));

 var img = "/imgs/" + random + ".jpg";
 callback("", "", img, "");
}

Callback functions

Up until this point, I had been using a global object container (more here) to store a number of variables – such as the name of the woman I was looking up and the Wikipedia page ID – that I wanted to access from several functions.

However, I had read that it’s generally discouraged to use global variables.  I think using a global object container is less discouraged, but still I wanted to see if there was another way.

Much googling led me to the concept of callback functions.  I wanted certain functions not to execute until the data they needed was ready, so I thought it made sense to use callback functions.  Essentially, a callback function is a function that is passed to another function as an argument.  The callback function is then called/executed WITHIN the other function.

I like examples so I googled around some more and found this code for displaying a quote in each new tab which helped me to understand how callbacks are used in the wild.  (I often find it helpful to look at longer pieces of code in Github, as examples in documentation are often really short snippets and I find it helpful to see more context.)

I then structured my code similarly to the code from csoni111.

  1. updateFem: I called a main updateFem() function once my document (the new tab) loaded.  That function contained the code to actually place my content on the page.
  2. getFemList: In order to be able to place content, I needed to get content.  I passed the function for placing content (my callback) to the next function which loaded the list of fems from my text file.
  3. randomFem: Once the list was loaded, I passed my callback (function to place content) onto the next function – the one that got a random name.
  4. getFemInfo: After I had a random name, I passed my callback over to the next function to get information from Wikipedia.
    1. callback: If I was able to successfully retrieve info from Wikipedia, I passed the info to the callback function to execute.
    2. getLocalFem –> callback: If I was unsuccessful (e.g. if I was offline when I opened a new tab), I retrieved a backup image from a local directory and passed this to the callback function to execute.

The callback was the very last function I wanted to execute.  I thought of it as an empty box with a bunch of gears inside that was getting handed from function to function.  Once all the other functions had executed, the final function handed all the necessary parts to my callback function and told the callback function to execute.

So that was the info retrieval side of things.  Read on to Part III to learn about how I displayed my content!

Coding & learning with context

Hello, world!

I’m incredibly proud of this next project.  It captures perfectly the goal of Zeynep and my quitting quitting project.

I started taking CS50x in December of 2015.  At the time, I thought I could blow through the class in a month if I plugged away at it for 10 hours a day.  I had big plans of taking additional math and CS classes after CS50x and possibly going back to school for a master’s in CS.  What, a master’s in CS?!?  But you majored in Art and International Relations!  Yes, dear reader.  I had the exact same thought.

So then, why a master’s in CS?  I wanted a career change.  I hated my job (project management) and I wanted to make things.  I had taken a Udacity Intro to Python course back in 2011 and loved it.  But I didn’t really know where to go from there.  I ended up writing a bunch of Google Apps Scripts since they were easy to get started with, and useful for my job.  But I wasn’t really learning much else.  I felt I had hit a wall and wanted to be back in a school-like environment.

I spent HOURS reading through reddit and quora blogs about going back for a second bachelor’s in CS, or going to a coding bootcamp.  The consensus seemed to be a second bachelor’s was a waste of money and a bootcamp wasn’t rigorous enough.  Instead, most people suggested taking the core classes on your own and applying directly for a master’s program.  So that’s what I was doing, or so I thought.

My biggest problem, at least in the last few years, has been split attention.  There are SO MANY projects I want to do and not nearly enough time to do them all.  Instead of picking one things and diving into it, I would start down one path, get frustrated that I wasn’t making progress fast enough, and then switch to something else.  The end result was that I got nothing done.

The problem with this approach was that I was a beginner at a lot of the things I wanted to do.  It’s like wanting to play Beethoven’s Symphony #5 on the piano, but not knowing how to play the piano.  You have two options.

  1. Watch a bunch of YouTube tutorials of people playing Symphony #5 and copy their finger movements exactly.  Eventually, you’ll be able to play that one piano piece, but nothing else.  You won’t have really learned to play the piano.  HOWEVER, with every note you hit you could hear Symphony #5 somewhere in there, struggling to get out which kept up your enthusiasm.  Also, you will have learned a LOT about piano playing (though you may not realize it) which will serve as a good foundation to learn to play the piano later.
  2. Start with the basics (reading musical notes, practicing scales) and work your way up to playing Symphony #5.  You’ll actually learn to play the piano, but during the learning process you won’t be playing Symphony #5.  That means you’ll need to keep reminding yourself what all that boring scale playing is leading to.  However, you’ve built a strong foundation about music playing that you can apply beyond Symphony #5.

That’s what it was like for me with programming.  The Udacity course was like starting with method #2, but stopping with scales.  After the course was done, I had no idea how to apply anything I learned to the projects I wanted to create.  I didn’t know how to go from playing scales to playing a real piece of music.

So I shifted to method #1.  I dove into a bunch of Apps Scripts projects, frankenstein-ing programs together using other people’s code, tutorials, and the Apps Scripts documentation.  I didn’t really get half the errors I was seeing.  I didn’t really understand why things worked when they did, but I could generally get things working.

However, this was deeply unsatisfying.  Which is why I came to CS50.  I wanted to be back in a school-like environment.  To learn things the “right way.”

Taking CS50 after having spent two years frankenstein-ing code was GREAT.  Going with method #1 gave me context so that when I saw lessons in CS50, I could think “Oooooohhh, THAT’S why that works” instead of thinking, “Ok, I get the theory now how do I apply it?”  I had already applied it and now I was backing into the theory.

But back to December 2014.  Taking CS50 was great, but it was hard.  I was itching to get started on projects and the thought of having to take 11 weeks of courses was overwhelming.  I got frustrated that I wasn’t making progress fast enough and quit.

This is totally counterintuitive and I know it, but I still do it all the time.  I think it’s going to take too long to learn something, so I quit.  But then 11 weeks later I’m sitting there thinking, why didn’t I just invest in this 11 weeks ago?  The problem?  Learning scales is boooring and I wanted to play the Symphony NOW!

Anyway, I quit the course in Jan 2015.  There was the issue that I wasn’t progressing fast enough coupled with my life getting busy.  I was also taking a sci-fi writing course at the time which I really threw myself into.  It was my 10 hour a day project.  On top of that, I was applying to new jobs.  I started a new job in April 2015 and just got distracted getting up to speed and working hard at the new gig.

But the new job was still in project management so, inevitably, I begin to feel the itch.  I wanted to *make* things.  So I picked the course back up Dec 2016 and really got to it in Feb/March 2017.  I finished the course last week (April 2017) and it was HARD.

I admit there were a few additional stop and starts in there, though not quite as long, and I skipped two problem sets, but I got through it!

My next post is about my final project!  Read on here…

Teleabsence

Hello readers!

Today I’ll be updating you on my teleabsence robot.  I was inspired by Leila Takayama’s research on telepresence systems.  I was curious how a person’s interactions with others might be affected if they were not in control of the system.

The first system I wanted to build was a teleabscence robot.  I wanted the robot to turn away from people who approached it and tried to speak with the person dialed into the system.

My original idea was to use a microphone to detect if someone was speaking to robot, and then have the robot roll away.  There was one big problem with this approach.  Hobby microphones aren’t very sensitive so it wouldn’t be able to tell the difference between someone talking to the robot, someone talking near the robot, or the remote user talking over the telepresence system.

My next idea was to use a contactless IR sensor.  I wanted the robot to be able to differentiate between a wall and a person, and a person talking in the same room vs. someone talking to the robot.

I wired up the system, had it work for a hot second, and then fried the IR sensor while trying to rewire the system to consolidate 3 breadboards –> 2.  The sensor was pretty expensive (~$15) and it wasn’t all that great at detecting people to begin with, so I decided to take a different approach.

I thought about buying a motion detector (which I think is the easiest way to detect people), but decided to change the behavior of the robot so that it would act how I wanted it to act with the parts I had:

The first step was to wire the system up.  Since I didn’t buy a full-on robot car kit, I needed to figure out how to set up the motor driver and distance sensor.  I followed this tutorial for the driver, and this one for the ultrasonic distance sensor.

Then I loaded in code for a simple object avoiding robot to make sure everything was working as intended.  I think this code is a little different than what’s in Github (the robot doesn’t back up for 2 seconds before turning), but below is an early system test.

There are many problems with this simplistic system, but one of the biggest is that the field of view just wasn’t very big.  The robot wasn’t able to see (and avoid) objects that came in at an angle (see video below) or objects that were below or above the distance sensor (e.g. wires or a chair with a low crossbar).

Another problem that’s more obvious in the first video is that the chassis is pretty janky.  One of the screws on the motor had come off which is why the robot drifts to the left instead of going straight.

However!  The robot was *basically* working.

Shortly after the above videos were taken I fried the IR sensor and decided to go with a behavior change instead of a motion detector.

Originally I had wanted my robot to roam around aimlessly, but quickly go in the opposite direction if anyone tried to approach it.  However, it was quite tricky to tell the difference between a person and any other object that’s obstructing it’s path.

I decided for v1 to instead have the robot stay still, but then turn away if someone tried to approach it.   If the person continued to “bother” the robot (approach it 3x), then it would retreat to a safe distance.

In addition, I wanted the robot to still be able to avoid objects (walls etc.) if it encountered something while it was retreating.  As far as I can tell, there is no way to check the sensor input while the robot is moving forward, since in order to code the forward motion I needed to put in a delay.

What I did to deal with this issue was to add a second ping within the forward function.  If the robot encountered an object, it would simply stop.  Then after the forward function was finished being called (total 2 seconds), the main loop would begin again and the car would turn since it has encountered an object (remember, it stopped when it encountered the obstruction <= 20 cm away, so the obstruction is still there).

Now that I had the code working the way I wanted, I turned to the design of the casing.  I wanted my robot to look approachable, and decided to create something that looked like Miyazaki’s soot sprites from Spirited Away.sootballs.gif

Unfortunately, I didn’t take into account that a soot sprite is tiny and adorable, and my robot is (relatively) huge.

My husband thinks it looks like a runaway toupe.  My classmates thought it looked like a cat.  See for yourself below…

But wait!  You’re probably thinking.  where is the telepresence/absence aspect?  Good eye 😀  I haven’t implemented that yet since getting to this was all I could manage in the time I had for the class.

If you’re interested, my v1 robot code is here.

Next time, I’ll discuss the soldering and v2 design process.

Thanks for reading!

The shelf

My first task is complete!  I didn’t really follow the prime number format, but I finished my first Ikea hack.  The finished piece is below.

IMG_2194

Time: 1-2 hours a day for 5 days

Difficulty: Moderate

Pain-in-the-ass-ness: 4 out of 5.  Shelves are a pain to hang and spray paint is pretty much a no go unless you have access to outdoor space or a large garage.

Worth it?  Myeh.  I’m pretty happy with how it turned out, but I was pretty irritated during the process.

###

Why I did it

This project started as a vague concept to sell Ikea hacking services.  My first step was to hack a few pieces to get a feel for the process and get some nice images for my website.

How I did it

I was loving the brass trend and spotted these fabulous shelves on Pinterest.  These look DIY-ed and I figured they’d be super easy to recreate, so I took them on as my first challenge.  (I realized later he has DIY instructions for the shelves here.)

Materials

Since I was just testing out the concept, I decided to go for a small shelf unit instead of a full-on wall of shelves.

  • (2) Rubbermaid 30″ double track shelf tracks (I got mine at home depot)
  • (4) 11.5″ Shelf brackets (also from home depot)
  • (1) Can of Krylon metal paint primer in white
  • (1) Can of Montana Black spraypaint in gold (can’t find it on their site, I got it from Blick)

IMG_2100.JPG

Step 1: Painting

I started by sanding down the brackets and giving them two coats of primer.  I used medium grit sandpaper and went over the brackets until they were no longer shiny.  This took maybe an hour or so.  It’s a really dusty process, so I’d recommend wearing gloves.

Next I gave the brackets three coats of gold spray paint.  At first, I went on pretty thick and got a really shiny, smooth finish.  The bracket I tested this on looked like a block of gold.  Unfortunately, because I went thick I ended up with big drips down the sides.

I wiped the test bracket down with mineral oils to get rid of the paint, then re-sanded and primed.

On my second go-round, I tried to do multiple passes of thin coats.  I don’t know if it was the paint, my spraying technique, or the wind, but the paint didn’t go on as a smooth mist.  It looked pretty spackled.  As I built up the second and third layer, the finish ended up being bumpy.

I did a test spot where I sanded in between the first and second layers, but this did nothing to smooth the finish.  The sanding also took the shiny-ness away from the gold, leaving an ugly brown color.  I decided to just leave it as it was.  As the paint dried, it ended up spreading out and smoothing a bit, so it looked fine in the end.

IMG_2181

Here are the finished brackets drying in my shower where there is a strong vent to draw away the toxic paint air D:

Step 2: Hanging

To hang the shelves, I used all-purpose drywall anchors rated for 85lbs (which is complete overkill, but I had these lying around) and 2.5″ screws (which I also had lying around).  I didn’t use the screws that came with the anchors because I liked the flat look of the black screw rather than the big, bulbous top of the silver screw.

You’ll notice the black screws are much longer, but that ended up being fine since the bracket sticks out from the wall quite a bit, so when you take that into account the black screw was a good length for the anchors.

img_20170405_205135.jpg      IMG_20170405_205512.jpg

I followed the technique in this video to get the brackets lined up.  I used a different type of anchor from the video, so I had to pre-drill holes before hammering my anchors in.

Next, I marked off the top screw location of my second bracket and drilled my anchor hole.

Sadly, I hit a bracket 😦  I don’t have a drill bit to go through metal, so I didn’t have any choice but to drill a second hole slightly to the right.  Luckily (trying to be an optimist here!) I had just painted the wall, so I’ll be able to spackle and match the paint color to cover just the drill hole.

IMG_2190

Disaster!

Finally, I got the anchors in and put up the second set of tracks.  Then I slotted in the brackets, placed my shelves (cannibalized set of billy bookcase shelves) and that was that!

IMG_2194

Here is my shelf with my trusty drill.  (I thought the lower right corner looked lonely in the first picture.)

IMG_2196

And a close up of the brackets.  You can see there is a little bumpiness to the finish, but overall I think it looks quite nice.

IMG_2197

Thanks for reading!

My prime number plan

As you may have read in our about page, Zeynep and I are embarking on a prime number challenge.  This post and my prime number plan are day 1 of my challenge!

I left my job a month and a half ago with the intention of working on a bunch of personal projects.  When I first left, it was amazing.  I had time to dive into projects (we had just moved, so I painted two walls, rearranged, and hung up a bunch of pictures), I started taking an art class, I went to a two day design conference.  It was great.

Then I had a whirlwind visit from my relatives.  They were in town for a week and it was full on host mode.  After they left, I had trouble recapturing the energy of those first two weeks of freedom.  I felt deflated (it had been a month since I quit my job…but what did I have to show for it?) and I wasn’t really sure which project I wanted to pursue.

I felt paralyzed by the tyranny of choice.  There was so much I wanted to do and I didn’t know what to start.  I ended up spending a few hours on one project, then jumping to the next.  However, switching gears like this is hard and I ended up accomplishing nothing.  This made me feel more deflated and I ended up spinning my wheels and getting more and more discouraged for two weeks.

That’s when Zeynep and I came up with the idea for this blog.

I knew I needed to focus. I needed to pick one thing and stick to it in order to start seeing results.  Then, those small wins would get me excited and lead to ever larger results.  I know intellectually that’s how this is supposed to work, but going from 0 to 1 is the hardest part.  Once the wheels are in motion, you have momentum on your side.  It’s getting started that’s tough.

So here goes.  This is our shot at getting us from 0 to 1!  I’ve thought about what I want to do, and I know that this will change with time, but here’s how I see my prime number challenge going:

 

  • 1 : write blog post and plan my prime number challenge <– done!  Winning already 😀
  • 2 :  work on furniture
  • 3 : a robot-a-day
  • 5 : finish upgraad.com
  • 7 : 7 days of Ikea salad bowls (I’ll explain all these in later posts…haha)
  • 11 :  11 days of robots!
  • 13 : a Python project per day (for unlucky #13!)
  • 17 : 17 days of Ikea-robot mashup hacks
  • 19 : instructable-a-day
  • 23 : …
  • 29 : …
  • 31 : …

Ok…soooo….that was hard.  I ran out of ideas of what to do.  Hopefully what I do in the front half of the challenge will inform the second half.

I’ve been sorta working on robots (learning arduino), sorta working on coding, and sorta working on hacking Ikea furniture (original intention was this could become a side gig since being unemployed is not great for the bank account…).

I’m hoping this challenge will get me to focus on a series of short sprints to get projects going, and then I’ll see which ones I want to keep pursuing, and which I should drop.

Thanks for reading…more to come tomorrow!