updating my resume: now with icons! (free inkscape template)

i realized i hadn’t updated my resume since before I graduated from MIT ^^;

also it was butt-ugly

so i updated it

i’m not super-happy with it (still too little whitespace), but going to call it a day

after/before

 librewrite ODT

as mentioned in older blog posts, the old one was an openoffice / librewriter template, which I am re-posting below:

the newer one I made in inkscape, with a lot of work done by hand :/ (namely, I really hate that I manually indented some of the lines)

inkscape SVG

oh well. here’s the inkscape source files

(all the icons are from openclipart, so they are public domain. Well, I made the “man at work” icon into a “woman at work” icon, which I hereby release into public domain if you really care).

!!! the bad part: inkscape doesn’t let you create links out of individual words, and also (I think) has issues exporting those links to the PDF form, so take it as you wish.

also, when you’re copy-pasting text to move it around (e.g. when ordering things chronologically) inkscape loses the formatting

also, I recommend writing your text up first, because editing text in inkscape can be very slow.

next, updating my portfolio? meh, so much work. maybe I will just make a jquery bootstrap-esque carousel, haha

design principles

alright, the main updates were

  1. I’ve now seen people react to and judge resumes, including my own, and also I’ve grown old and jaded and have a shorter attention-span, so I’m way more decisive about cutting stuff out when it eats up my whitespace. Goodbye, high-school internships and all my MIT undergraduate “research” (UROPs), which weren’t that productive. Oh, you don’t fit on one line? Goodbye, keyword “skills”
  2. I decided I liked icons
  3. I realized that press / prizes / grants matter to people
  4. I added a personal statement and the “keyword roles” (both blocked out in grey), since people at bigger companies (hi Apple) get confused when trying to pigeonhole me into an Employee Role.
  5. Shifting from an openoffice table-based layout to Inkscape allowed me a lot more flexibility in laying things out
  6. Use a google voice number instead of my actual number, it’s just sensible to do so.

Aside from that, some simple design principles

  1.  Try to keep margins even
  2. Keep formatting similar for logically related things (e.g. all the dates are in italics)
  3. Limit myself to three different font sizes, max
  4. Three colors, max (black, 60% grey, and blue)
  5. A single font
  6. Use all the variations in text at my disposal — dotted lines, CAPITAL Letters, grey/black text, bold italics
  7. More whitespace! All hail whitespace!
  8. Write just enough to be interesting / spark a conversation about my project. buzzword buzzword buzzword. (as opposed to delineating everything I did)
  9. As a recent graduate, definitely one-page resume max

MAJOR Caveat: I’ve yet to get a job based on my resume or portfolio. ^^; At this point, I sink time into them as “information design” / “graphic design” exercises, for fun. I am interviewed for and accepted for jobs (contract, full-time, or internship) the normal way: networks (the MIT network is pretty strong) and through projects / work I’ve done.

 

UPDATE

After talking to a few people, everyone agrees the new version looks better.

  • “You like … look like a person rather than a piece of paper”
  • “The left one gets my attention”

Ways I could improve:

  • probably my new version is not very OCR / machine-readable due to its weird structure (esp. with the personal statement)
  • “Last thing: when someone looks at your resume, they don’t want to know your history; rather, they want to know your potential. They want to know how you would fit in any of a variety of positions that they have in mind.”

Also, I loved this description of MITERS / being president of MITERS:

For instance, when I think of MITers, “student-run shop” is pretty much the blandest possible description of the place. When I think of MITers, I think of people voiding warranties to make things that are amazing. I think of people throwing caution to the wind and making cool things because they can. And as the president of MITers, I envision you as a bull-rider with a gentle touch — you have to let the crazy happen, because that’s the magic of the place, but you still have to keep things under control.

Oh, and some more info about inkscape pdf export:

“also a couple more things you might want to be aware of with inkscape PDF exports:
0. it cannot embed fonts, only outline them, and causes the PDF to no longer be machine-readable. this may impact your ability to gain visibility by the unfortunate robo
t screening systems many US companies use (then again, personal opinion is that i don’t care to work at most of those companies that do this anyway … you’re good if you think the same way, but if you’re planning to throw your resume into a career fair website you might want to be careful)
1. i think Inkscape’s outlining isn’t very optimized — in PS/PDF language it’s possible to outline one glyph and then reference it multiple times, which Scribus does, but i think Inkscape just outlines a separate copy of each appearance of each glyph, which makes the resulting PDF larger than it really should be
… not deal-breakers but just to be aware of”

AP Engineering proposal, ala AP Studio Art: with portfolios (quick note)

just a quick note — Prof. Frey’s idea from a few years ago, which I hope to get more people thinking about:

AP engineering class, portfolio-based

Advance Placement

to encourage schools to teach engineering skills & give teachers a structure and the professional education to adopt engineering into the school curriculum, we could try to implement an AP Engineering class.

portfolio?

to give it relevance to larger numbers of students, this wouldn’t be purely an abstract class, like AP Physics A/B (which I really liked!), with a theoretical test at the end

but instead, like AP Studio Art, you submit a portfolio of projects you built.

Here are some samples: http://apcentral.collegeboard.com/apc/members/exam/exam_information/220194.html

or the more engaging 2014 version: http://studioartportfolios.collegeboard.org/

(sweet oranges, this is some beautiful metalworking:

http://studioartportfolios.collegeboard.org/work/student-1-3d-concentration/ what was I doing in high school? haha )

scale

What AP Studio Art demonstrates is that you can have people submitting & judging a subjective portfolio at scale nation-wide in a reliable-enough manner for students to receive college credit for it.

Thus, the idea of an AP Engineering class where students submit portfolio work is not so outlandish.

However, of note, number of students who took it:

  • 2012, AP Studio Art: 16,188
  • 2012, AP Physics B: 80,584

I never took AP Studio Art, so I’m not super familiar with how it’s run. Therefore, I do not know if the lower number of students taking AP Studio Art is due to less student interest (not enough student demand) or scaling problems (such as AP Studio Art being expensive to run as a class).

differences

I suspect that an engineering portfolio should show more teamwork than an AP Studio Art portfolio.

a sign of the times

MIT recently instituted a “Maker Portfolio” section. I have a bit of bleahh feeling with all this “maker” talk (since it has been so commercialized by “maker media”), but here is a picture:

Screenshot from 2013-08-20 17-52-14

 

side-note

there ought to be an engineering portfolio website… as mentioned in an earlier blog post, most portfolio websites are oriented toward UX/UI/webdesign/photographers

nostalgia: computer games we played in school in the 90s in georgia

in which i spend way too much time going “what was that one game where you can either fix a pond ecosystem or a toilet?”

i’ve been taking a trip down memory lane (there’s so much future to live, not sure what the point is, but it is kind of fun :] )

Here are some of the games I remember playing (with the help of google. sweet oranges, this took Advanced Googling Skills), along with images / videos / play online / download links

1) Super Solvers: Midnight Rescue!

Super Solvers - Midnight Rescue_1

This was a fun detective game. For some reason, I remember it being in black-and-white… anyway, I remember liking the soundtrack a lot, turns out it’s this super-classy song (skip to 0:58 for the part in the game):

Here’s a video of it:

Read more about it / picture sources:

Ooh! I found another version of the game (I never played this) which you can play in your browser at the Internet Archive Software Library:

2) Number Munchers

861943-numbermuncher11

I didn’t remember playing this game, even by the screenshots, until I played some version of it online and heard the music.

3) Oregon Trail II

Oregon-Trail-II-screenshot

I think I played II, not super sure. Here’s a song:

Here’s a full playlist:

image source: Wikipedia.

Play online: https://archive.org/details/msdos_Oregon_Trail_Deluxe_The_1992

’nuff said.

4) The Amazon Trail

the-amazon-trail_10

Screenshot from 2015-01-28 23:26:54

 I remember this one better than Oregon Trail. Whoo! I had fun playing this.

5) O’Dell Down Under

Screenshot from 2015-01-28 23:35:13

Fishies and exploring the ocean! I realllly liked this game 😀

Image source:

(video has the original soundtrack :] )

  • Wikipedia
  • Not available online, sadly, but here’s a possible download link: http://www.old-games.com/download/3331/odell-down-under

6) Treasure MathStorm!

5809-3-super-solvers-treasure-mathstorm

I have super fond memories of this too! 😀 heehee catching elves

(video has the original soundtrack :] )

7) Math Blaster

Number_Recycler

 

Possibly the “Episode 1: In Search of Spot” version? I don’t remember being super-entertained by this, but I do remember playing it and enjoying it. Here’s what it sounded / played like as a video:

Home / Misc.

Some games I remember playing or watching other people play were

  • myst (soundtrack) (some scenes) this game was great. I never had the patience to solve it all myself without looking up guides online, but it was a ton of fun to explore the world and mythology regardless
  • starcraft
  • red alert
  • neopets
  • megaman

Wrap-up

Those are the main ones I remember playing! I also remember a pond ecosystem / toilet plumbing simulator (yes, one game!), but I think it is forever lost to time. Oh well, there’s more future to live!

What games do you remember playing in school?

Protip: If your game is on https://archive.org/details/software, you can often play it online right in your browser.

FASTA files for BRCA1, BRCA2, SMA, KIR, MHC (bash scripting Entrez Direct)

I needed to create some FASTA files of important regions of the human genome for work. BRCA1 & 2 are important in breast cancer research, SMA is implicated in  spinal muscular atrophy, and KIR and MHC are important for your immune system (e.g. why you have to have organ donor “compatibility”). I wrote a bash script that used Entrez Direct to automatically download these files from the NCBI servers.

FASTA files

If you just want the FASTA files to play with, they are here.

They were downloaded from the NCBI website and based on the NCBI Gene database coordinates against hg38.

source code

https://github.com/nouyang-curoverse/GA4GH_regions

This repository contains a link to download the final FASTA files, the ids.csv file I used as the master list of “mhc” and “kir” genes, the bash script file, and the xsl “xml transform” file I used to extract the information I needed from the xml file.

what i learned

Hey, what’s a gene anyway? If you use various databases (ensembl, ncbi, genenames, lumc, omim, lrg), you”ll get a whole range of coordinates for the same gene.

Take, for instance, BRCA2:

Start End Length Source
32,889,611 32,974,403 84,792 ensembl
32,884,617 32,975,809 91,192 lrg
32,889,617 32,973,809 84,192 ncbi entrez
32,889,616 32,973,808 84,192 OMIM
32,890,598 32,972,907 82,309 COSMIC sanger
32,889,641 32,907,422 17,781 CGAP

 

In the end I standardized around using the NCBI Gene database and ignored the rest.

Hey, what’s the KIR gene region anyway? Turns out there’s a gazillion KIR genes, and there’s not exactly a “list” of them. Same for HLA. I just used my best human judgement and culled them from searches on NCBI Gene. From the git repo Readme:

For the HLA genes, I used the IMGT list of gene names, found at ftp://ftp.ebi.ac.uk/pub/databases/ipd/imgt/hla/fasta/ . For the KIR genes, I used NCBI Gene query to list all the KIR genes. http://www.ncbi.nlm.nih.gov/gene and "Homo sapiens"[porgn] AND KIR

The final list is in ids.csv.

The manual process was to download the FASTA file from the NCBI Gene database.

Screenshot from 2015-01-24 23:47:21

 

But for some genes, that is the KIR and HLA genes, each gene (e.g. just HLA-E) has many “alternate locii” versions.

Screenshot from 2015-01-24 23:49:03

Downloading these by hand would take days. Therefore, I needed to figure out a way to script this. My initial thought was to write a scraper using Google Sheet Scripts or a python library like Beautiful Soup. However, I thought this was dumb, because this NCBI Gene site is clearly the front-end to some database that hopefully had an API for programmatic access of some kind.

After a few days (seriously, this all took way longer than I thought it would) and with help from the biostars community I was able to figure out how to use Entrez Direct and write a bash script to automate the process for all the  genes.

(It has a hacky fix, where the bash script needs to be run again for each line in the file,

for run in {1..48} #change this!

 

I was too lazy to debug it that day and just wanted to get this finally done).

 

The source code is provided here, and contains reasonable comments and spits out some debugging info when you run it.

That’s all.

Leave a comment if you have questions 🙂

appendix

Emailed from me to ga4gh-dwg :

With help from biostars*, I finished pulling out the KIR and HLA regions and fixed the SMA region.

The updated collection may be publicly viewed at
https://workbench.qr1hi.arvadosapi.com/collections/download/qr1hi-4zz18-7zk4muy5grnaqpv/4qji0cfumh25dttlwteo6rj2b83z2b8vz1l0rja3uzo82bf3s/

The updated collection README and scripts are at
https://github.com/nouyang-curoverse/GA4GH_regions (the FASTA files are named by gene name and ncbi gene id, e.g. BRCA1-672.fa)

Of note, I did not mirror the IMGT HLA contents (ftp://ftp.ebi.ac.uk/pub/databases/ipd/imgt/hla/fasta/), even though that was requested on the minutes from the DWG meeting, due to their policy https://www.ebi.ac.uk/ipd/imgt/hla/licence.html .

Feedback appreciated!

Thanks,
–Nancy

*credit to https://www.biostars.org/p/122680/ and https://www.biostars.org/p/122522/

Bootstrap Carousel Tutorial: getting started, then customizing — example code & bugs

Recently I had “great fun” modifying bootstrap v3’s image gallery slideshow thingy, Carousel (click here to see an interactive example).

It has some nice features built-in, like indicators for what slide you are on, auto-scaling so it works on any browser window size, and an easy way to select options like cycling the carousel continuously, changing the interval between auto-slides, or reacting to keyboard events.

I made some modifications to get it to look and behave the way I wanted. Namely, I wanted readable captions underneath the images. Bootstrap has the captions overlaid on the image by default, and white-on-white doesn’t work so well.

I mostly succeeded… here’s a screenshot:

Screenshot from 2015-01-21 15:36:57
Live at doc.arvados.org someday soon…

…although I still dislike how verbose the Carousel code is. Oh well, our docs site was already using Bootstrap.

The how-to on bootstrap’s page is pretty terse and kind of confusing for me, so I’m writing up a more detailed explanation here.

stuff needed

From http://getbootstrap.com/getting-started/, download the zip file. You’ll need

1. css/bootstrap.css (you can use the .min version if you’d like, which is just compressed into non-human-readable form)

2. js/bootstrap.js (you can also get away with just carousel.js).

You’ll also need jquery.js from http://jquery.com/download/, try the link “Download the compressed, production jQuery 1.11.2”.

Note: We’ll include the javascript files at the end of HTML so most of the page loads quicker.

how to

Alright, now how do you include all these files? (see this gist for the full HTML file, or download a self-contained zip file of all the files: bootstrap-carousel-example).

Put the CSS at the top, either by linking to a .css file or including the CSS directly:

<head>
  <link href="./css/bootstrap.css" rel="stylesheet">
  <style>
    /* put your custom CSS here if you'd like, for instance... */
    .carousel { 
      margin: 1em; 
    }
  </style>

Inside the body section, put your Carousel HTML.  It’s kind of long so just check out the gist. Put the javascript at the bottom, either by linking to a .js file or else including it directly

<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script type="text/javascript">
// Put your custom javascript options here, for instance...
$(document).ready(function() {
    $('.carousel').carousel({interval: 100});
    });
</script>
</body>

</html>

step 3: profit?

If you load the html file in your browser, magic should now happen.

For reference, you can download this zip file where everything is set-up already: bootstrap-carousel-example

step 4: customize

What if we want the images to cycle faster, or the images to not cycle at all?

Okay, I’ve already shown how you can select some of the built-in bootstrap options using javascript:

$(document).ready(function() {
    $('.carousel').carousel({interval: 100});
    });

You can select individual carousels on a page by naming the carousel

<div id="carousel-keyfeatures" class="carousel slide" data-interval="false">

and then using a more specific jquery call

$(document).ready(function() {
    $('.carousel-keyfeatures').carousel({interval: 100});
    });

Alternatively, if you want some option to apply to all carousels on a page / site, you can pull this code out into a separate file

./js/carousel-override.js

and include it in each HTML file

<script src="./js/carousel-override.js"></script>

A third way to change an the options on a carousel is to include it in the HTML, like so:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">

step 5: sweeter customizations!

Now, to make more custom modifications, I had to fiddle with the CSS. A few hours later, I made the modifications you can see at this gist. Alternatively, download the zip file and uncomment the line

<link href="./css/carousel-override.css" rel="stylesheet">

trouble-shooting tips (bugs!)

First, cool tools:

1) Use firefox or chrome’s powerful built-in developer tools. The default shortcut to bring them up is ctrl-shift-c (you actually can’t get rid of our change this shortcut easily, which is annoying).

You can delete things, edit things without refreshing the page or modifying files, and other wonderful tools.

Screenshot from 2015-01-21 16:44:34
Screenshot of Firefox’s “Inspector” tool in use.

2) Use a Javascript hint tool, such as http://jshint.com/.

If you just use the Console tool in Firefox Inspector to see the javascript error messages, it is fairly cryptic.

SyntaxError: missing ) after argument list

Tools like JSHint can provide some more helpful feedback about what went wrong.

bugs

these things tripped me up:

1) the Bootstrap website makes ( and { look very similar on my computer, so I skipped the curly brackets and used

$('.carousel').carousel( interval: 2000 )

instead of the correct

$('.carousel').carousel({ interval: 2000 })

UPDATE 03 April 2015

I filed a bug on github: https://github.com/twbs/bootstrap/issues/16225, or as follows:

Font in code blocks on http://getbootstrap.com/ does not distinguish { and ( clearly, can cause anguish for newcomers to javascript. Please remove the Courier New font fallback option. Just monospace works well.

In Detail

I was following the the example at http://getbootstrap.com/javascript/#carousel, and my brain removed the “extra parenthesis” I think, similar to how you don’t notice I doubled “the” in this sentence unless I point it out.

This is a screenshot of the bootstrap website “code” block font currently on my computer:
js-bootstrap-font

Please remove the courier new font fallback option. Just monospace works well.

 code, kbd, pre, samp {
   font-family: monospace;
 }

Results in the much-better

js-bootstrap-font-better

(Most open-source projects in have nice websites but no issue tracker nor contact info for their own website or their documentation, only for their github repo around the actual code, and it’s not always clear where to file a bug…)

END UPDATE

2) I didn’t realize I needed to include the jquery file first, so I got cryptic messages like “$ is undefined”.

3) I spent a while debugging a weird gap that left the rightmost controls in midair. It occurred when the browser window was too big. Turns out I needed to hardcode a max-width, which I just hardcoded to be slightly smaller than the smallest image width I had.

appendix

Here are the files used in this tutorial again:

Gist

bootstrap-carousel-example.zip