Skip to content

Instantly share code, notes, and snippets.

@Nexuist
Last active August 12, 2016 13:32
Show Gist options
  • Save Nexuist/07a5df752e706ba4c24cc8486126cffa to your computer and use it in GitHub Desktop.
Save Nexuist/07a5df752e706ba4c24cc8486126cffa to your computer and use it in GitHub Desktop.
A quick story on salvaging a failing school project and going from lazy and late to efficient and just-in-time.

Preamble

'Twas the morning of November 19th, 2015.

I was in school. Biotech.

We had a big project due on DNA. Part of it was to have some kind of interactive experience to guide the user through certain aspects of DNA: discovery, protein synthesis, recombination...

Guess who hadn't started?

Yup. From about 7:50 to 8:30AM, I worked intensely on writing the code below to make something presentable. Honestly, it came out better than expected. We were able to browse the page on an iPad and provide an above-average experience to our peers. As a result, we aced the project :)

Here's a screenshot:

Page showing introduction

I wanted to put this up for historical purposes, but also to demonstrate the power of using open-source tools to create professional(ish?) solutions really quickly.

Standing On The Shoulders of Giants

On my short journey, there were a few tools I used to simplify the process. They are:

  • jade-server - This tiny package lets you host jade files directly from the command line. Ideal for rapid prototyping while developing, and for providing a way to share your work across devices (such as the iPad we used) in a way that "just works."

  • jade - HTML for minimalists. A JavaScript templating engine with a simple but powerful and extensive syntax. In the site, I wrote a custom mixin named media to generate dynamic jade snippets to save even more time.

  • Bootstrap - Probably the 2nd most attributable to our success, Bootstrap handles browser inconsistencies, layout, element styling, and a lot more. I could focus on researching the content and figuring out what it should look like, while Bootstrap did the heavy lifting behind the scenes.

  • Bootswatch - Stock Bootstrap is powerful, but the Web would be a very boring experience if every website looked exactly like stock Bootstrap. Bootswatch solves this problem by providing several themes to throw on top of Bootstrap to have a professional, semi-unique look while maintaining all of the flexibility that Bootstrap provides.

  • Wikipedia - Our teacher was chill and let us use it, so we did (we cited it too!) I wanted to use this space to commend it again, as Wikipedia was the most attributable source to our success. Bootstrap made the content look pretty, but Wikipedia helped make the content. Wikipedia runs off the open source MediaWiki.

  • Chrome Developer Tools - Ideal for debugging, mobile simulation, real-time modification, etc.

Conclusions

  1. I should've probably done this at home.

  2. I'm glad I didn't, because coding under pressure is actually kind of fun.

  3. Jade + Bootstrap is a sweet front-end coding stack if you know how to use it.

  4. Open source is a blessing.

Thanks for stopping by!

doctype html
html
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1')
meta(http-equiv='Content-Type', content='text/html; charset=UTF-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
title DNA
link(href='http://bootswatch.com/sandstone/bootstrap.min.css', rel='stylesheet')
link(rel='icon', type='image/ico', href='http://www.deplex.net/favicon.ico', sizes='32x32')
link(rel='apple-touch-icon', href='http://www.deplex.net/apple.png', sizes='128x128')
link(href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', rel='stylesheet')
script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js')
script(src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js')
style.
body {
position: relative;
}
.img-thumbnail {
mix-height: 200px;
max-height: 200px;
min-width: 250px;
max-width: 250px;
}
body(data-spy='scroll', data-target='.navbar', data-offset='50')
nav.navbar.navbar-default.navbar-fixed-top
.container-fluid
.navbar-header
button.navbar-toggle(type='button', data-toggle='collapse', data-target='#myNavbar')
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='#') DNA
div
#myNavbar.collapse.navbar-collapse
ul.nav.navbar-nav
li
a(href='#intro') Introduction
li
a(href='#disc') Discovery
li
a(href='#prot') Protein Synthesis
li
a(href='#recom') Recombination
li
a(href='#ge') Genetic Engineering
.container-fluid(style='margin-top: 60px; padding: 60px !important;')
#intro.page-header
h2 Introduction #[small What is Deoxyribonucleic acid?]
blockquote
p Deoxyribonucleic acid (DNA) is a molecule that carries most of the genetic instructions used in the development, functioning and reproduction of all known living organisms and many viruses.
small
a(target='_blank', href='https://en.wikipedia.org/wiki/DNA') Wikipedia
p DNA provides the instructions used by ribosomes to create proteins. These proteins carry out all necessary tasks an organism needs to do in order to survive. Thus, DNA is actually one of the most important scientific discoveries ever made because it allows us to understand how animals (including ourselves) function.
#disc.page-header
h2 Discovery #[small Who helped discover DNA?]
mixin media(source, name, facts)
.media
.media-left
a(href = source, target = "_blank")
img.media-object.img-thumbnail(src = source)
.media-body
h2.media-heading= name
ul
each fact in facts
li= fact
+media("http://80.251.40.59/veterinary.ankara.edu.tr/fidanci/Ders_Notlari/Ders_Notlari/Nukleik_Asitler/Watson%20ve%20Crick%202.jpg", "James Watson and Francis Crick", ["Watson: 1928-Current", "Crick: 1916-2004", "Discovered structure of DNA in 1954", "Analyzed information collected by Maurice Wilkins and Rosalind Franklin without their permission", "Due to their work, human understanding of life was fundamentally changed and the modern biological era was ushered in"])
+media("https://upload.wikimedia.org/wikipedia/en/9/97/Rosalind_Franklin.jpg", "Rosalind Franklin", ["Was an English chemist", "Also an X-ray crystallographer", "X-ray Crystallograpy - A method used to identify the atomic and molecular structure of crystals", "Created X-ray diffraction images of DNA at King's College, London, which were then looked over by Watson & Crick"])
+media("http://www.whatisbiotechnology.org/assets/images/people/wilkins.jpg", "Maurice Wilkins", ["1916-2004", "Developed method of X-ray diffraction which was used to create radar and the field of X-ray crystallograpy", "Instructed Raymond Gosling to send Watson Franklin's image without her permission", "Motivated Watson to restart research efforts when he saw it"])
+media("http://www.forensicgenealogy.info/images/franklin_gosling.jpg", "Raymond Gosling", ["1926-2015", "\"Gosling worked on X-ray diffraction with Maurice Wilkins analyzing samples of DNA which they prepared by hydrating and drawing out into thin filaments and photographing in a hydrogen atmosphere.\"", "Developed the X-ray diffraction image known as \“Photograph 51\”, in May 1952, which was extraordinary evidence in proving Watson & Crick’s theory right"])
+media("http://www.villages-news.com/wp-content/uploads/2015/08/Linus-Pauling.jpg", "Linus Pauling", ["1901-1994", "His interest in molecular structure lead him to publish his first papers on how atoms share their electrons", "He held multiple professor and head of institute titles from 1925-1955", "Linus published over 800 books on scientific topics in his lifetime", "He also worked on the DNA structure problem, and his previous work assisted Watson & Crick"])
#prot.page-header
h2 Protein Synthesis #[small How are proteins made? (Andi)]
ul
li Central Dogma - states that RNA will be made from DNA through transcription & proteins will be made from RNA through translation
li DNA
ul
li Double helix made up of nucleotides
li Uses deoxyribose as sugar
li RNA
ul
li Single strand but also made up of nucleotides
li Uses ribose as sugar
li Transcription
ul
li Process of RNA being made of DNA
li Uses RNA Polymerase enzyme
li Initation
ul
li RNA Polymerase binds to DNA promoter region
li Unzips DNA
li Begins transcription
li Elongation
ul
li RNA strand elongates as RNA Polymerase continues to add RNA nucleotides
li RNA Polymerase reads backwards
li Termination - RNA Polymerase will hit termination region and signal end of transcription
li Result: mRNA strand (messenger RNA)
li RNA Processing
ul
li Occurs before mRNA is sent out of nucleus
li Caps are added to its ends to make it more stable (eukaryotes only)
li Introns (noncoding regions) are removed in order to make final product, only parts left are exons (coding regions) and caps
li Translation
ul
li Process of mRNA being used to synthesize proteins
li mRNA attaches to a ribosome (rRNA) which combines amino acids to create polypeptides which in turn are chained together to create proteins
li Codons - sequences of 3 nucleotides that make up the mRNA that are used to code for a certain amino acid
li tRNA is used to bring in correct amino acids in the order described by mRNA
#recom.page-header
h2 Recombination #[small What is recombination? (Dylan)]
ul
li Recombination is the process of breaking down DNA into pieces and then recombining them in a new and different sequence or pattern. Most recombination happens in the process of meiosis and makes new sex cells
li Recombination occurs in a different way in bacteria
li An important point of Recombination is the process of crossing over when the section of DNA are exchanged and change the structure of DNA
li Recombination helps to create DNA for two identical daughter cells
#ge.page-header
h2 Genetic Engineering #[small What is genetic engineering? (Dylan)]
ul
li Genetic engineering (GE) is the altering the genetic composition of an organism by artificial means, often being the transfer of specific traits, or genes, from one species or organism into a plant or animal of a different species
li An example of the way scientist us GE is in modifying plants and crops to be able to survive better against different weather and insects
li Scientist are trying to input different genes into many animals to prevent the spread of different disease. There have been some fish that are genetically to grow larger and faster than other wild fish of that species
li Bio Engineering uses the process of transformation to take the gene that codes for one thing out of the DNA of the organism and inserts the gene coded for something else into the strand
li They take the DNA that codes for a specific trait out of something then clones the gene or copying it over. They uses the process of transgene which is where they insert the gene into a bacteria insert the bacteria into the plant and the bacteria inserts the gene into the plant cell. The use traditional breeding after inserting the gene into the plant/animal to improve the final product and genetically improve the pool or species group
.page-header
h2 Citations
h4 Information
ul
li
a(href = "http://ghr.nlm.nih.gov/handbook/basics/dna") http://ghr.nlm.nih.gov/handbook/basics/dna
li
a(href = "https://en.wikipedia.org/wiki/Genetic_recombination") https://en.wikipedia.org/wiki/Genetic_recombination
li
a(href = "https://en.wikipedia.org/wiki/DNA") https://en.wikipedia.org/wiki/DNA
li
a(href = "http://www.sustainabletable.org/264/genetic-engineering") http://www.sustainabletable.org/264/genetic-engineering
li
a(href = "https://en.wikipedia.org/wiki/Genetic_engineering") https://en.wikipedia.org/wiki/Genetic_engineering
h4 Images
p Simply tap on an image to be taken to its source.
<!-- This is the compiled version of DNA-Minisite.jade. I included it in case you wanted to view the entire page for yourself, but did not have jade or jade-server installed. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DNA</title>
<link href="http://bootswatch.com/sandstone/bootstrap.min.css" rel="stylesheet">
<link rel="icon" type="image/ico" href="http://www.deplex.net/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="http://www.deplex.net/apple.png" sizes="128x128">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
.img-thumbnail {
mix-height: 200px;
max-height: 200px;
min-width: 250px;
max-width: 250px;
}
</style>
</head>
</html>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#myNavbar" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">DNA</a>
</div>
<div>
<div id="myNavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="#intro">Introduction</a>
</li>
<li>
<a href="#disc">Discovery</a>
</li>
<li>
<a href="#prot">Protein Synthesis</a>
</li>
<li>
<a href="#recom">Recombination</a>
</li>
<li>
<a href="#ge">Genetic Engineering</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div style="margin-top: 60px; padding: 60px !important;" class="container-fluid">
<div id="intro" class="page-header">
<h2>Introduction
<small>What is Deoxyribonucleic acid?</small>
</h2>
</div>
<blockquote>
<p>Deoxyribonucleic acid (DNA) is a molecule that carries most of the genetic instructions used in the development, functioning and reproduction of all known living organisms and many viruses.</p>
<small>
<a target="_blank" href="https://en.wikipedia.org/wiki/DNA">Wikipedia</a>
</small>
</blockquote>
<p>DNA provides the instructions used by ribosomes to create proteins. These proteins carry out all necessary tasks an organism needs to do in order to survive. Thus, DNA is actually one of the most important scientific discoveries ever made because it
allows us to understand how animals (including ourselves) function.
<div id="disc" class="page-header">
<h2>Discovery
<small>Who helped discover DNA?</small>
</h2>
</div>
<div class="media">
<div class="media-left">
<a href="http://80.251.40.59/veterinary.ankara.edu.tr/fidanci/Ders_Notlari/Ders_Notlari/Nukleik_Asitler/Watson%20ve%20Crick%202.jpg" target="_blank">
<img src="http://80.251.40.59/veterinary.ankara.edu.tr/fidanci/Ders_Notlari/Ders_Notlari/Nukleik_Asitler/Watson%20ve%20Crick%202.jpg" class="media-object img-thumbnail">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">James Watson and Francis Crick</h2>
<ul>
<li>Watson: 1928-Current</li>
<li>Crick: 1916-2004</li>
<li>Discovered structure of DNA in 1954</li>
<li>Analyzed information collected by Maurice Wilkins and Rosalind Franklin without their permission</li>
<li>Due to their work, human understanding of life was fundamentally changed and the modern biological era was ushered in</li>
</ul>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="https://upload.wikimedia.org/wikipedia/en/9/97/Rosalind_Franklin.jpg" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/en/9/97/Rosalind_Franklin.jpg" class="media-object img-thumbnail">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">Rosalind Franklin</h2>
<ul>
<li>Was an English chemist</li>
<li>Also an X-ray crystallographer</li>
<li>X-ray Crystallograpy - A method used to identify the atomic and molecular structure of crystals</li>
<li>Created X-ray diffraction images of DNA at King's College, London, which were then looked over by Watson &amp; Crick</li>
</ul>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="http://www.whatisbiotechnology.org/assets/images/people/wilkins.jpg" target="_blank">
<img src="http://www.whatisbiotechnology.org/assets/images/people/wilkins.jpg" class="media-object img-thumbnail">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">Maurice Wilkins</h2>
<ul>
<li>1916-2004</li>
<li>Developed method of X-ray diffraction which was used to create radar and the field of X-ray crystallograpy</li>
<li>Instructed Raymond Gosling to send Watson Franklin's image without her permission</li>
<li>Motivated Watson to restart research efforts when he saw it</li>
</ul>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="http://www.forensicgenealogy.info/images/franklin_gosling.jpg" target="_blank">
<img src="http://www.forensicgenealogy.info/images/franklin_gosling.jpg" class="media-object img-thumbnail">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">Raymond Gosling</h2>
<ul>
<li>1926-2015</li>
<li>&quot;Gosling worked on X-ray diffraction with Maurice Wilkins analyzing samples of DNA which they prepared by hydrating and drawing out into thin filaments and photographing in a hydrogen atmosphere.&quot;</li>
<li>Developed the X-ray diffraction image known as “Photograph 51”, in May 1952, which was extraordinary evidence in proving Watson &amp; Crick’s theory right</li>
</ul>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="http://www.villages-news.com/wp-content/uploads/2015/08/Linus-Pauling.jpg" target="_blank">
<img src="http://www.villages-news.com/wp-content/uploads/2015/08/Linus-Pauling.jpg" class="media-object img-thumbnail">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">Linus Pauling</h2>
<ul>
<li>1901-1994</li>
<li>His interest in molecular structure lead him to publish his first papers on how atoms share their electrons</li>
<li>He held multiple professor and head of institute titles from 1925-1955</li>
<li>Linus published over 800 books on scientific topics in his lifetime</li>
<li>He also worked on the DNA structure problem, and his previous work assisted Watson &amp; Crick</li>
</ul>
</div>
</div>
<div id="prot" class="page-header">
<h2>Protein Synthesis
<small>How are proteins made? (Andi)</small>
</h2>
</div>
<ul>
<li>Central Dogma - states that RNA will be made from DNA through transcription & proteins will be made from RNA through translation</li>
<li>DNA</li>
<ul>
<li>Double helix made up of nucleotides</li>
<li>Uses deoxyribose as sugar</li>
</ul>
<li>RNA</li>
<ul>
<li>Single strand but also made up of nucleotides</li>
<li>Uses ribose as sugar</li>
</ul>
<li>Transcription</li>
<ul>
<li>Process of RNA being made of DNA</li>
<li>Uses RNA Polymerase enzyme</li>
</ul>
<li>Initation</li>
<ul>
<li>RNA Polymerase binds to DNA promoter region</li>
<li>Unzips DNA</li>
<li>Begins transcription</li>
</ul>
<li>Elongation</li>
<ul>
<li>RNA strand elongates as RNA Polymerase continues to add RNA nucleotides</li>
<li>RNA Polymerase reads backwards</li>
</ul>
<li>Termination - RNA Polymerase will hit termination region and signal end of transcription</li>
<li>Result: mRNA strand (messenger RNA)</li>
<li>RNA Processing</li>
<ul>
<li>Occurs before mRNA is sent out of nucleus</li>
<li>Caps are added to its ends to make it more stable (eukaryotes only)</li>
<li>Introns (noncoding regions) are removed in order to make final product, only parts left are exons (coding regions) and caps</li>
</ul>
<li>Translation</li>
<ul>
<li>Process of mRNA being used to synthesize proteins</li>
<li>mRNA attaches to a ribosome (rRNA) which combines amino acids to create polypeptides which in turn are chained together to create proteins</li>
<li>Codons - sequences of 3 nucleotides that make up the mRNA that are used to code for a certain amino acid </li>
<li>tRNA is used to bring in correct amino acids in the order described by mRNA</li>
</ul>
</ul>
<div id="recom" class="page-header">
<h2>Recombination
<small>What is recombination? (Dylan)</small>
</h2>
</div>
<ul>
<li>Recombination is the process of breaking down DNA into pieces and then recombining them in a new and different sequence or pattern. Most recombination happens in the process of meiosis and makes new sex cells</li>
<li>Recombination occurs in a different way in bacteria</li>
<li>An important point of Recombination is the process of crossing over when the section of DNA are exchanged and change the structure of DNA </li>
<li>Recombination helps to create DNA for two identical daughter cells</li>
</ul>
<div id="ge" class="page-header">
<h2>Genetic Engineering
<small>What is genetic engineering? (Dylan)</small>
</h2>
</div>
<ul>
<li>Genetic engineering (GE) is the altering the genetic composition of an organism by artificial means, often being the transfer of specific traits, or genes, from one species or organism into a plant or animal of a different species</li>
<li>An example of the way scientist us GE is in modifying plants and crops to be able to survive better against different weather and insects</li>
<li>Scientist are trying to input different genes into many animals to prevent the spread of different disease. There have been some fish that are genetically to grow larger and faster than other wild fish of that species</li>
<li>Bio Engineering uses the process of transformation to take the gene that codes for one thing out of the DNA of the organism and inserts the gene coded for something else into the strand</li>
<li>They take the DNA that codes for a specific trait out of something then clones the gene or copying it over. They uses the process of transgene which is where they insert the gene into a bacteria insert the bacteria into the plant and the bacteria
inserts the gene into the plant cell. The use traditional breeding after inserting the gene into the plant/animal to improve the final product and genetically improve the pool or species group</li>
</ul>
<div class="page-header">
<h2>Citations</h2>
</div>
<h4>Information</h4>
<ul>
<li>
<a href="http://ghr.nlm.nih.gov/handbook/basics/dna">http://ghr.nlm.nih.gov/handbook/basics/dna</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Genetic_recombination">https://en.wikipedia.org/wiki/Genetic_recombination</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/DNA">https://en.wikipedia.org/wiki/DNA</a>
</li>
<li>
<a href="http://www.sustainabletable.org/264/genetic-engineering">http://www.sustainabletable.org/264/genetic-engineering</a>
</li>
<li>
<a href="https://en.wikipedia.org/wiki/Genetic_engineering">https://en.wikipedia.org/wiki/Genetic_engineering</a>
</li>
</ul>
<h4>Images</h4>
<p>Simply tap on an image to be taken to its source.</p>
</p>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment