<commit_before><!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Code2Live</title>
    <meta name="keywords" content="HTML, CSS, Ruby, JavaScript, Ruby on Rails,Object-Oriented,code,web design,coding,app,web app,mobile,development">
    <meta name="description" content="Developer portfolio, blog, and contact page">
    <meta name="author" content="<NAME>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <link rel='shortcut icon' href="imgs/favicon.ico" type='image/x-icon'>
    <link rel="author" type="text/plain" href="humans.txt">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
  </head>

  <body>
    <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <div class="wrapper">
      <header>
        <h1>Code or Die</h1>
        <h2>Event Horizon</h2>
          <nav>
            <ul>
              <li><a href="https://nchristiny.github.io/index.html" title="Main page">Home</a></li>
              <li><a href="https://nchristiny.github.io/about.html" title="About myself">About</a></li>
              <li><a href="https://nchristiny.github.io/contact.html" title="Contact me">Contact</a></li>
              <li><a href="https://nchristiny.github.io/blog/index.html" title="Back to blog index">Blog</a></li>
              <li><a href="https://nchristiny.github.io/projects.html" title="Current and past work">Projects</a></li>
            </ul>
          </nav>
      </header>

      <aside>
        <h2>Phase 0 Resources</h2> <!--Title-->
        <article>
          <h3>MASTERLIST</h3> <!--Subtitle-->
          <h4>August 16 2015</h4> <!--Date-->
        </article>
      </aside>

      <section class="main">
        <h3>An early coder reference.</h3> <!--Spiffy blurb-->
        <p>Here is a huge list of helpful links, cheat-sheets and other resources that aided me during Phase 0 for Dev Bootcamp. I have compiled them here for my future reference and also to help anyone else who may come across it. Enjoy responsibly.</p>

        <h3>Study aides, tools and tweaks</h3>
        <ul>
        <li><a href="http://www.300hours.com/blog/9-ambient-sound-apps-to-increase-your-study-focus#.VdDPtlNVhBe" title="ambient sound apps to help study focus">9 Ambient Sound Apps to Increase Your Study Focus</a>.</li>
        <li>Some other music/soundscape apps I have used are: <a href="http://songza.com/" title="music conierge">Songza</a>, and <a href="http://www.noisli.com/" title="soundscapes website">Noisli</a>.</li>
        <li><a href="https://www.focusboosterapp.com/how-to-use-the-pomodoro-technqiue" title="Pomodoro technique and Focus Booster">Focus Booster</a> is a free desktop app for OS X or Windows, and is based on the Pomodoro Technique. Tweak it as you see fit. For example, I like my focus sessions to last a bit longer, so I adjusted the timer's settings. I have not used the online paid service, I just use the free desktop timer to time-box. </li>
        <li><a href="http://code.tutsplus.com/" title="tuts+ free code tutorials">Tuts+ code</a> offers articles, tutorials and a nice newsletter with free and discount offers.</li>
        <li>For example, Tuts+ offers this free Sublime Text tutorial: <a href="http://code.tutsplus.com/courses/perfect-workflow-in-sublime-text-2/lessons/welcome" title="Perfect Workflow in Sublime Text 2">Perfect Workflow in Sublime Text 2</a> - (still largely relevant for Sublime Text 3.)</li>
        <li>Speaking of Sublime Text, I recommend <a href="https://blog.generalassemb.ly/sublime-text-3-tips-tricks-shortcuts/" title="Getting started with Sublime Text 3">this blog post on the GA blog.</a> Pay special regard to the package control section to unlock Sublime Text's full potential. In my opinion, this is the main reason to use Sublime Text, (apart from the aesthetics!)</li>
        <li><a href="http://iterm2.com/documentation-highlights.html" title="iTerm 2 terminal emulator">iTerm 2</a>, a Mac OS X terminal emulator that does amazing things, such as split panes, autocomplete, paste history, instant replays. Free with suggested donation. </li>
        <li><a href="http://ejohn.org/blog/write-code-every-day/#postcomment" title="write code everyday">This blog post by <NAME></a> talks about the importance of practicing your craft everyday - without fail. Related to <NAME>'s lifehack: <a href="http://lifehacker.com/5886128/how-seinfelds-productivity-secret-fixed-my-procrastination-problem" title="lifehacker article">'Don't break the chain'.</a> Printable calendars (A4 paper size) to use with this technique are available here: <a href="http://luminarious.planet.ee/calendar/" title="printable calendar">here</a>.</li>
        <li><a href="https://hackdesign.org/lessons" title="HackDesign lessons">HackDesign</a> offers a free course on UX, UI, graphic design principles, typography and best practices. They also offer a page called Toolkit, a large list of popular tools used by professionals in the industry. Free, sign up for the newsletter for goodies.</li>
        <li>Speaking of free goodies, I always learn something new or receive a free offers (such as free vector icons etc) from <a href="http://www.webdesignernews.com/" title="Web designer news">Webdesigner News</a>, "Curated stories for designers. Their newsletter is regularly jam-packed with great articles.</li>
        <li>No tutorial list would be complete without a reference to <a href="http://www.tutorialspoint.com/tutorialslibrary.htm" title="Tutorials Point">Tutorials Point</a>, an exhaustive resource to many, many programming languages. </li>
        <li>The free eBook "Becoming a Better Programmer" from Stephen Young's website, <a href="http://aestheticio.com/" title="Stephen Young website">Better Programmer</a>. There are a number of cool, informative articles here and the book itself is very comprehensive. Highly recommended.</li>
        <li>Also I should mention this free eBook by <NAME>, <a href="http://designingfortheweb.co.uk/index.php" title="Designing for the Web">Designing for the Web</a>.</li>
        <li>Finally I would be remiss if I did not mention Code Newbie: They are amazing. They host a Slack channel to which you may get access after the free sign up, and they host special coding hours, for example Ruby Monday, (missed a golden opportunity to host it on <a href="https://youtu.be/a00_tPLcE_g" title="Goodbye Ruby Tuesday">Tuesday</a>!) Their Twitter Q &amp; A's are legendary and they often have awesome podcast interviews with movers and shakers of the coding industry. Check them out at: <a href="http://www.codenewbie.org/" title="Code Newbie">Code Newbie</a> and follow on Twitter: <a href="https://twitter.com/codenewbies" title="CodeNewbies twitter">@CodeNewbies</a>. They regularly send out free stuff as well and discount codes for online classes. Highly recommended for the early and beginner coder. </li>
        </ul>

        <h3>bash &amp; Command Line</h3>
        <ul>
        <li>Obviously, Zed Shaw's <a href="http://cli.learncodethehardway.org/book/" title="command line crash course">Command Line Crash Course</a> is a good place to start to get your bash on and to get a quick introduction to Unix operating system. </li>
        <li>Speaking of Unix, once you are ready to take a much more in-depth plunge, check out the extensive online book, <a href="http://www.faqs.org/docs/artu/index.html" title="The Art of Unix Programming">The Art of Unix Programming</a> by <NAME>. If that seems too daunting at first, at least read the first chapter summary: <a href="http://www.faqs.org/docs/artu/ch01s06.html" title="Basics of the Unix Philosophy">Basics of the Unix Philosophy</a>. These rules, such as Least Surprise, Modularity, Parsimony are principles that are shared across many different programming languages, so it really helps to understand these concepts early.</li>
        <li>To practice your shortcut skills, try <a href="https://www.shortcutfoo.com/" title="Shortcut Foo">Shortcut Foo</a> and <a href="https://typing.io/lessons" title="typing practice with code">typing lessons</a>. The latter link employs a good range of different coding languages for a nice challenge. These sites have paid options, but the basic lessons are free.</li>
        <li>You can go right to the <a href="http://www.gnu.org/software/bash/manual/bashref.html" title="bash reference manual">Bash Reference Manual</a> for the nitty gritty details. </li>
        </ul>

        <h3>Git and GitHub</h3>
        <ul>
        <li>Roger Dudler's handy git cheat sheet: <a href="http://rogerdudler.github.io/git-guide/" title="git the simple guide">git - the simple guide</a> is "just a simple guide for getting started with git. no deep shit ;)"</li>
        <li>As a corollary to the above, Sam Livingston-Gray's <a href="http://think-like-a-git.net/" title="think like a git">Think Like (a) Git</a> is an invaluable resource.</li>
        <li>GitHub provides a handy dandy <a href="https://github.com/styleguide" title="Styleguide">Styleguide</a> for HTML &amp; CSS, JavaScript, and Ruby. "It's dangerous to go alone. Take this!"</li>
        <li>Dev Bootcamp recommended ebook: Tower's <a href="http://www.git-tower.com/learn/git/ebook" title="Learn Version Control with Git ebook by Tower">Learn Version Control with Git</a>.</li>
        </ul>

        <h3>HTML/CSS &amp; design principles</h3>
        <ul>
        <li>I made use of the <a href="http://www.headfirstlabs.com/readme.php" title="Head First labs">Head First</a> series of books. For a comprehensive, (if somewhat overwhelming) survey of HTML books to consider, see <a href="http://www.skilledup.com/articles/best-html-books" title="best HTML books to learn from">100 Best HTML &amp; HTML5 Books to Learn HTML From</a> by <NAME> on skilledup.</li>
        <li>Of course, the <a href="https://www.codecademy.com/learn" title="Codecademy">Codecademy</a> HTML/CSS track is great.</li>
        <li>Wireframe online services: <a href="https://writemaps.com/" title="Writemaps">Writemaps</a> and for something much more stripped down, try <a href="http://wireframe.talltree.us/" title="talltree wireframe tool">Tall Tree's Wireframe tool</a>. My cohort fellows liked <a href="https://balsamiq.com/" title="Balsamiq">Balsamiq</a> as well.</li>
        <li>For designing moodboards, visit <a href="http://www.gomoodboard.com/" title="go moodboard service">Gomoodboard</a>.</li>
        <li>After mastering the basics, I found it useful to read up on latest developments in the industry and new frameworks, for example <a href="http://sass-lang.com/guide" title="Sass">Sass</a> &amp; <a href="http://compass-style.org/help/" title="Compass stylesheet framework">Compass</a>.</li>
        <li>Of course this also included a survey of <a href="http://getbootstrap.com/" title="Bootstrap">Bootstrap</a>.</li>
        <li>An exhaustive list of Bootstrap resources is located here:  <a href="http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources#howto" title="big badass list of twitter bootstrap resources">The Big Badass List of Twitter Bootstrap Resources</a>.</li>
        <li>For a programmer in a designer's world perspective of Bootstrap, check out <a href="https://24ways.org/2012/how-to-make-your-site-look-half-decent/" title="How to Make Your Site Look Half-Decent in Half an Hour">this post</a> by <NAME>.</li>
        <li>While on the subject of frameworks, check out <a href="http://foundation.zurb.com/" title="Foundation">Foundation</a> by Zurb and the associated <a href="http://zurb.com/library" title="Zurb Library">Zurb University resources</a>.</li>
        <li><a href="http://www.html5rocks.com/en/" title="HTML5 Rocks">HTML5 Rocks!</a></li>
        <li><a href="https://css-tricks.com/" title="CSS Tricks">CSS Tricks!</a></li>
        <li>When it is time to run with the big dogs, level up to <a href="https://developer.mozilla.org/en-US/" title="Mozilla Developer">Mozilla Developer site</a> and the related blog site: <a href="https://hacks.mozilla.org/" title="Mozilla Hacks">Mozilla Hacks</a>.</li>
        <li><a href="http://www.quirksmode.org/" title="Quirksmode">Quirksmode</a> is an invaluable cross-browser and mobile compatibility tester. Check out creator <NAME>'s<a href="http://www.quirksmode.org/blog/archives/2015/05/tools_dont_solv.html" title="Peter-Paul Koch blog"> informative blog posts</a> too.</li>
        <li>Responsive Design and Mobile First? See these <a href="http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly" title="Fast Co Design website">GIFs</a>, read the <a href="http://alistapart.com/article/responsive-web-design" title="A List Apart blog post">original article by <NAME></a>, and pick up the <a href="http://abookapart.com/products/responsive-web-design" title="Responsive Web Design">book</a>.</li>
        <li>Of course, we cannot speak of Responsive Design without also mentioning <a href="http://alistapart.com/article/planning-for-performance" title="Responsible Responsive Design">Responsible Responsive Design</a> by <NAME>.</li>
        <li>While you're at it, read this seminal article by <NAME>, <a href="http://alistapart.com/article/dao" title="A Dao of Web Design blog post">A Dao of Web Design</a>. I recommend subscribing to the A List Apart email alerts. </li>
        <li>For even yet more on responsive design, I found that this post by <NAME> was useful: <a href="http://www.sanwebe.com/2015/06/responsive-navigation-tutorials-demo" title="more responsive design">40 Responsive Navigation Solutions (Examples &amp; Codes)</a>. You can find a nice variety of techniques here using jQuery, plain old CSS and JavaScript.</li>
        <li><a href="http://htmlarrows.com/" title="HTML Arrows">HTML Arrows</a> by Zeppelin provides a great place to look for HTML symbol codes in a convenient repository. For even more, see the <a href="http://www.unicode.org/charts/" title="Unicode character code charts">Unicode Character Code Charts</a>.</li>
        <li>Favicons should be easy to implement. <a href="http://realfavicongenerator.net/" title="Real Favicon Generator">Real Favicon Generator</a> helps get them right, cross platform and cross browser.</li>
        <li>No list on HTML5 resources should miss this: <a href="http://html5doctor.com/article-archive/" title="HTML5 Doctor">HTML5 Doctor</a>. For example, here is a nice little flowchart for sectioning HTML5 elements: <a href="http://html5doctor.com/downloads/h5d-sectioning-flowchart.png" title="HTML5 sectioning flowchart">HTML5 Element Flowchart</a>.</li>
        <li><a href="https://gsnedders.html5.org/outliner/" title="HTML5 Outliner">HTML5 Outliner</a> is an online outliner. Pretty neat.</li>
        <li>Once you get your code, you need to validate it. Use these online tools to see if your pages pass muster. <a href="https://validator.w3.org/nu/" title="Nu HTML Checker">Nu HTML Checker</a>, and the official <a href="https://validator.w3.org/#validate_by_input" title="W3C Markup Validation Service">W3C Markup Validation Service</a>.</li>
        <li>For publishing HTML friendly code-snippets, try <a href="http://hilite.me/" title="hilite">Hilite</a>. You can choose the style, (ah there you are Monokai, my old friend.)</li>
        <li><a href="https://html5boilerplate.com/" title="HTML5 Boilerplate">HTML5 Boilerplate</a> and <a href="http://www.initializr.com/" title="Initializr">Initializr</a> are two supremely useful tools that should be part of your arsenal as a developer. You should at least know the existence of these tools.</li>
        <li>Ever wonder what the purpose of the robots.txt file is? Wonder no more: <a href="http://www.robotstxt.org/robotstxt.html" title="The Web Robot pages">About /robots.txt</a>. Check out the corollary: <a href="http://humanstxt.org/" title="About Humans.txt">About /humans.txt</a>.</li>
        <li><a href="http://cssstats.com/" title="CSS stats">CSS Stats</a> will give you a shakedown visualization on stats concerning the CSS of any webpage. Try it out on your favorite sites or your own. </li>
        <li>Great blog post by <NAME>, <a href="http://www.myinkblog.com/css-tips-i-wish-i-knew-when-i-first-started/" title="my ink blog">CSS Tips I Wish I Knew When I First Started</a>. Keep in mind this blog post was from quite a while ago and the state of CSS is in constant flux, as most things are in this industry, so be sure and find out the latest techniques yourself to stay current. See above links for CSS Tricks et al.</li>
        <li><a href="http://www.sitepoint.com/simple-clearing-of-floats/" title="simple clearing of lfoats">Clear a float in CSS</a> from SitePoint blog post by <NAME>. Again, note that it is quite old and you should always be prepared with the salt shaker.</li>
        <li><a href="http://meyerweb.com/eric/css/" title="Eric Meyers website">Eric Meyer's</a> website, the creator of reset.css and many other nice things. His site offers blog posts, tools, plugins, and other useful snippets and hacks.</li>
        <li>A kind of CSS validation tool, <a href="http://csslint.net/" title="CSS Lint">CSS Lint</a> has the capacity to ferret out the most obscure of problems or potential pitfalls in your stylesheets. "It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency."</li>
        <li>When you absolutely posiively have to find the specificty of something, use the online <a href="http://specificity.keegan.st/" title="CSS specificity calculator">CSS Specificity Calculator</a>.</li>
        <li>CSS Gradients are still a pain to write, but at least there is a tool that helps: <a href="http://www.colorzilla.com/gradient-editor/" title="Ultimate CSS Gradient Generator">Ultimate CSS Gradient Generator</a> from ColorZilla. I use the ColorZilla Chrome plug in and really like it. To find a completely randomized CSS Color Gradient, <a href="http://paintbycode.github.io/gradient-generator/" title="Gradient Generator">roll the dice</a> on this randomized gradient generator. On a related note, <a href="http://paletton.com/" title="Paletton live colorizer">Paletton Live Colorizer</a> will help you find the right colors you need. "It is designed to create palettes of colors that work well together according to classical color theories."</li>
        <li>If you ever need to add more color names to your vocabulary, check out <a href="http://riccardoscalco.github.io/crayon/" title="Crayon.css">Crayon.css</a>. "Crayon.css is a list of CSS variables linking color names to hexadecimal values, usable with postCSS or with your favorite CSS preprocessor, being it Stylus, Sass or Less."</li>
        <li><a href="http://www.atozcss.com/videos/" title="A to Z CSS videos">A to Z CSS videos</a> are a series of great bite-sized tutorials on a particular topic in CSS by <NAME>. </li>
        <li>I could go on and on with this section on CSS and HTML, but I think I will wrap it up with some links to typographic resources: <a href="http://www.instantshift.com/2015/04/21/highquality-free-fonts-2015-04/" title="40 Latest High-Quality Free Fonts For Professional Designers">40 Latest High-Quality Free Fonts For Professional Designers</a>, the online calculator for whitespace, <a href="http://leaverou.github.io/contrast-ratio/" title="Contrast Ratio">Contrast Ratio</a>, font size calculator: <a href="http://www.modularscale.com/" title="Modular Scale calculator">Modular Scale calculator</a> and the related site, <a href="http://type-scale.com/?size=16&scale=1.500&text=A%20Visual%20Type%20Scale&webfont=&font-family=%27Open%20Sans%27%2C%20serif&font-weight=400&font-family-headers=&font-weight-headers=inherit&background-color=white&font-color=%23333" title="Type-Scale">Type-Scale.</a> </li>
        <li>Check out this article by <NAME> on 3D CSS design: <a href="https://subvisual.co/blog/posts/62-perfecting-a-css-3d-animation" title="subvisual blog post on 3D CSS">Perfecting a CSS 3D animation</a>.</li>
        <li>I highly recommend getting a free <a href="http://codepen.io/" title="CodePen">CodePen</a> account and start experimenting yourself. Follow them <a href="https://twitter.com/codepen" title="CodePen twitter">@codepen</a> for absolutely stunning work by the community. Some of the work is truly awe inspiring.</li>
        <li>Finally, from a purely design perspective, beware of anyone who claims that your webpage should "obey" the Golden Ratio or Golden Rectangle or any other sort of mystical nonsense. Watch this short video to learn how this notion has been thoroughly debunked: <a href="https://vimeo.com/88132964" title="Debunking 10 Golden Ratio Myths">Debunking 10 Golden Ratio Myths</a>.</li>
        </ul>

        <h3>Ruby</h3>
        <ul>
        <li><a href="http://tryruby.org/" title="Try Ruby">Try Ruby</a>.</li>
        <li><a href="https://rubymonk.com/" title="Ruby Monk">Ruby Monk</a>.</li>
        <li><a href="http://mariabpiper.tumblr.com/post/116045895341/ruby-docs-for-newbs" title="Ruby Docs blog post by <NAME>">Ruby Docs for Newbs,</a> blog post by <NAME>.</li>
        <li><a href="http://www.rubyist.net/~slagell/ruby/" title="Ruby User’s Guide">Ruby User's Guide</a>. Comprehensive and easy to follow.</li>
        <li><a href="http://rubykoans.com/" title="Ruby Koans">Neo Ruby Koans</a>. This should be required reading/activity for any aspiring Rubyist. After learning the basics, follow this path to enlightenment, young grasshopper.</li>
        <li><a href="http://mislav.uniqpath.com/poignant-guide/book/" title="poignant guide to ruby">Poignant Guide to Ruby</a> by _why the Lucky Stiff.</li>
        <li>For more information on the programmer known as _why, see this Slate article: <a href="http://www.slate.com/articles/technology/technology/2012/03/ruby_ruby_on_rails_and__why_the_disappearance_of_one_of_the_world_s_most_beloved_computer_programmers_.html" title="Where’s _why?">Where’s _why?</a> by <NAME>.</li>
        <li><a href="http://nsomar.com/untiabout-ruby-selftled/" title="Blog post on Ruby’s self">Blog post on Ruby's self</a> by <NAME>.</li>
        <li>On Ruby Test Driven Development (TDD): <a href="http://pragmaticstudio.com/blog/2005/3/18/ruby-learning-test-1-are-you-there-world" title="Ruby Learning Test">Ruby Learning Test</a> from Pragmatic Studio. </li>
        <li>Related to TDD, Udemy offers this course: <a href="https://www.udemy.com/learn-test-driven-development-in-ruby/?couponCode=rdit" title="The TDD Course for Beginners">The TDD Course for Beginners: Learn by Practicing 7 Katas</a>. Remember that I mentioned that CodeNewbie sometimes gave out free stuff? This was one of them! If the coupon code in the above link is expired, you may have to pay for this course if you are still interested in it.</li>
        <li>Rspec: <a href="https://www.relishapp.com/rspec/" title="official documentation Rspec">official documentation</a>.</li>
        <li><a href="https://sourcemaking.com/refactoring" title="Refactoring">Refactoring</a>, a handy guide from SourceMaking.</li>
        <li><a href="http://blog.codinghorror.com/code-smells/" title="Code Smells">Code Smells</a>.</li>
        <li><a href="http://rubylearning.com/satishtalim/writing_our_own_class_in_ruby.html" title="Ruby Learning post">Writing our own Class in Ruby</a>.</li>
        <li>On the importance of writing good variable names: <a href="https://web.archive.org/web/20131212155508/http://www.makinggoodsoftware.com/2009/05/04/71-tips-for-naming-variables/" title="Making Good Software blog post">blog post by <NAME></a>.</li>
        <li>Design principle: <a href="http://xp.c2.com/YouArentGonnaNeedIt.html" title="post on extreme programming"> You Arent Gonna Need It</a>. Not particularly about Ruby, but relevant to Object Oriented Design.</li>
        <li>Functional Programming in Ruby, a <a href="https://code.google.com/p/tokland/wiki/RubyFunctionalProgramming" title="blog post">blog post by <NAME></a>.</li>
        <li>Finally <a href="http://www.rubyflow.com/" title="RubyFlow">RubyFlow</a> is an up to date list of current topics in Ruby. <a href="http://rubyweekly.com/" title="Ruby Weekly">Ruby Weekly</a> is another curated digest of recent and relevant news in Ruby. They often post job listings as well. </li>
        </ul>

        <h3>JavaScript</h3>
        <ul>
        <li><a href="http://codetunnel.io/9-javascript-tips-you-may-not-know/" title="JavaScript tips">Some JavaScript tips you may not know.</a></li>
        <li><a href="http://www.smashingmagazine.com/2010/04/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/" title="Smashing Magazine article">Seven JavaScript Things I Wish I Knew Much Earlier In My Career</a>, article by <NAME> in Smashing Magazine, an excellent resource in of itself.</li>
        <li><a href="http://codecombat.com/" title="CodeCombat">CodeCombat</a>, a fun and easy way to learn code (not just JavaScript, but that's what I have used.) Totally addictive. </li>
        <li>Blog post by <NAME>, <a href="https://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/" title="blog post">Truth, Equality and JavaScript</a>.</li>
        <li><a href="http://code.tutsplus.com/tutorials/the-basics-of-object-oriented-javascript--net-7670" title="tutsplus code page">The Basics of Object-Oriented JavaScript</a> on Tuts+ Code.</li>
        <li><a href="http://underscorejs.org/#" title="underscore.js">underscore.js</a> a JavaScript library. Often used with <a href="http://backbonejs.org/" title="backbone.js">backbone.js</a> and jQuery.</li>
        <li>Blog post by <NAME>, <a href="http://www.clientcide.com/deep-thoughts/how-to-become-a-javascript-badass/" title="blog post on Clientcide">How to Become a JavaScript Badass</a>.</li>
        <li>Fun little interactive learning tool, <a href="http://ejohn.org/apps/learn/" title="Learning Advanced JavaScript">Learning Advanced JavaScript</a> by <NAME>.</li>
        <li>Finally I found this article informative: <a href="http://benalman.com/news/2010/11/immediately-invoked-function-expression/" title="blog post">Immediately-Invoked Function Expression (IIFE)</a> by <NAME>.</li>
        <li><a href="http://www.sitepoint.com/essential-tools-libraries-modern-javascript-developers/" title="JavaScript Tools and Libraries">Essential Tools &amp; Libraries for Modern JavaScript Developers</a>. (Suggested by fellow DBC Cicada, <NAME>.)</li>
        <li><a href="http://blog.bitovi.com/longevity-or-lack-thereof-in-javascript-frameworks/" title="JavaScript Framework longevity">Longevity (or Lack Thereof) in JavaScript Frameworks</a>, blog post by <NAME>, found via Paul B. again. (Thanks, Paul!)</li>
        </ul>

        <h3>SQL</h3>
        <ul>
        <li><a href="https://www.sqlite.org/cli.html" title="SQLite">Command Line Shell For SQLite</a></li>
        <li><a href="http://www.w3schools.com/sql/sql_datatypes.asp" title="SQL Data Types">SQL Data Types for Various DBs</a></li>
        <li><a href="http://www.vertabelo.com/blog/notes-from-the-lab/18-best-online-resources-for-learning-sql-and-database" title="SQL learning resources">18 Best Online Resources For Learning SQL and Database Concepts</a></li>
        </ul>

        <h3>General Recommendations</h3>
        <ul>
        <li>Make a professional Twitter account. Follow people in the industry.</li>
        <li>Get a <a href="https://en.wikipedia.org/wiki/Rubber_duck_debugging" title="Rubber Duck Debugging wikipedia article">Rubber Duckie</a>. Or use a significant other if they can stand it. I sometimes employ my cats as stand-in rubber duckies.</li>
        <li>Watch all the Dev Talks videos that are provided. </li>
        <li>Try all of the optional exercises that are suggested.</li>
        <li>Do the assigned reading, (which sounds obvious, but you would be surprised...)</li>
        <li>Quit your day job. (Obviously for most folks this may not be an option before On-Site Phase 1, but if you can swing it, I say go for it.)</li>
        <li>Stay positive. I know this sounds really flippant and easy for someone to just say, but sometimes you may feel like you have made the wrong decision. If you feel you are in the weeds, do not dwell on it. Take a walk, a shower, drink a cup of tea or a beer, take a break, and try again. And above all else, <em>ASK FOR HELP</em>. Your cohort, your guides and tutors, even random Twitter citizens can lend a helping elbow to help prop you back up and send you on your way. Believe in yourself. Don't give up.</li>
        </ul>

        <h3>Errata</h3>
        <ul>
        <li><a href="http://whatcolourisit.scn9a.org/" title="What Colour is it?">What Colour is it? </a> is a CSS experiment that changes background color hex code as time goes by. Trust me, just click the link.</li>
        <li><a href="http://www.se.rit.edu/~tabeec/RIT_441/Resources_files/How%20To%20Write%20Unmaintainable%20Code.pdf" title="How to Write Unmaintainable Code">How To Write Unmaintainable Code</a>, a tongue-in-cheek essay by <NAME>.</li>
        <li><a href="https://medium.com/@ilovetypography/the-last-word-on-helvetica-71422b01f2bb" title="Helvetica as a tool">The Last Word on Helvetica?</a> blog post on Medium by <NAME>.</li>
        <li><a href="https://web.archive.org/web/20131208070042/http://www.joelonsoftware.com/articles/Wrong.html" title="Blog post">Making Wrong Code Look Wrong</a> by <NAME>.</li>
        <li>Programmers are a verbose lot. And by that I mean they swear like sailors. Stack Overflow is littered with examples, many quite hilarious. Here is one of my favorites, the first reply under the question here: <a href="http://stackoverflow.com/questions/3718625/what-does-rubys-arrayshift-do" title="Stack Overflow">What Does Ruby's Array#shift do?</a> Needless to say, I will not be forgetting #shift/#unshift anytime soon.</li>
        <li>For more funny/terrible stories you can check out <a href="http://thedailywtf.com/" title="The Daily WTF">The Daily WTF</a> or the <a href="https://www.reddit.com/r/programminghorror/" title="Programming Horror">Programming Horror subreddit</a>.</li>
        <li>On a decidedly more family-friendly note, here are some more programming jokes that I now get: <a href="https://medium.com/@jerstew/web-development-jokes-d97bc7c8891b" title="blog post on Medium">A web developer walks into a bar…</a></li>

        </ul>

        <p>I will be starting Phase 1 bright and early tomorrow morning! I've got the first day jitters. Go Cicadas! And thanks for reading. If anyone has a suggestion to add to this list, hit me up via Twitter, <a href="https://twitter.com/chileannick" title="my twitter">@ChileanNick</a>. <i>Excelsior</i>!</p>

      </section>

      <footer>
        <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Code or Die</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://nchristiny.github.io/blog/index.html" property="cc:attributionName" rel="cc:attributionURL"><NAME></a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://nchristiny.github.io/" rel="dct:source">http://nchristiny.github.io/</a>.
      </footer>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
      <script src="js/plugins.js"></script>
      <script src="js/main.js"></script>
      <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-64368113-1', 'auto');
        ga('send', 'pageview');

      </script>

    </div>
  </body>
</html><commit_msg>Add jQuery section<commit_after><!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Code2Live</title>
    <meta name="keywords" content="HTML, CSS, Ruby, JavaScript, Ruby on Rails,Object-Oriented,code,web design,coding,app,web app,mobile,development">
    <meta name="description" content="Developer portfolio, blog, and contact page">
    <meta name="author" content="<NAME>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <link rel='shortcut icon' href="imgs/favicon.ico" type='image/x-icon'>
    <link rel="author" type="text/plain" href="humans.txt">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
  </head>

  <body>
    <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <div class="wrapper">
      <header>
        <h1>Code or Die</h1>
        <h2>Event Horizon</h2>
          <nav>
            <ul>
              <li><a href="https://nchristiny.github.io/index.html" title="Main page">Home</a></li>
              <li><a href="https://nchristiny.github.io/about.html" title="About myself">About</a></li>
              <li><a href="https://nchristiny.github.io/contact.html" title="Contact me">Contact</a></li>
              <li><a href="https://nchristiny.github.io/blog/index.html" title="Back to blog index">Blog</a></li>
              <li><a href="https://nchristiny.github.io/projects.html" title="Current and past work">Projects</a></li>
            </ul>
          </nav>
      </header>

      <aside>
        <h2>Phase 0 Resources</h2> <!--Title-->
        <article>
          <h3>MASTERLIST</h3> <!--Subtitle-->
          <h4>August 16 2015</h4> <!--Date-->
        </article>
      </aside>

      <section class="main">
        <h3>An early coder reference.</h3> <!--Spiffy blurb-->
        <p>Here is a huge list of helpful links, cheat-sheets and other resources that aided me during Phase 0 for Dev Bootcamp. I have compiled them here for my future reference and also to help anyone else who may come across it. Enjoy responsibly.</p>

        <h3>Study aides, tools and tweaks</h3>
        <ul>
        <li><a href="http://www.300hours.com/blog/9-ambient-sound-apps-to-increase-your-study-focus#.VdDPtlNVhBe" title="ambient sound apps to help study focus">9 Ambient Sound Apps to Increase Your Study Focus</a>.</li>
        <li>Some other music/soundscape apps I have used are: <a href="http://songza.com/" title="music conierge">Songza</a>, and <a href="http://www.noisli.com/" title="soundscapes website">Noisli</a>.</li>
        <li><a href="https://www.focusboosterapp.com/how-to-use-the-pomodoro-technqiue" title="Pomodoro technique and Focus Booster">Focus Booster</a> is a free desktop app for OS X or Windows, and is based on the Pomodoro Technique. Tweak it as you see fit. For example, I like my focus sessions to last a bit longer, so I adjusted the timer's settings. I have not used the online paid service, I just use the free desktop timer to time-box. </li>
        <li><a href="http://code.tutsplus.com/" title="tuts+ free code tutorials">Tuts+ code</a> offers articles, tutorials and a nice newsletter with free and discount offers.</li>
        <li>For example, Tuts+ offers this free Sublime Text tutorial: <a href="http://code.tutsplus.com/courses/perfect-workflow-in-sublime-text-2/lessons/welcome" title="Perfect Workflow in Sublime Text 2">Perfect Workflow in Sublime Text 2</a> - (still largely relevant for Sublime Text 3.)</li>
        <li>Speaking of Sublime Text, I recommend <a href="https://blog.generalassemb.ly/sublime-text-3-tips-tricks-shortcuts/" title="Getting started with Sublime Text 3">this blog post on the GA blog.</a> Pay special regard to the package control section to unlock Sublime Text's full potential. In my opinion, this is the main reason to use Sublime Text, (apart from the aesthetics!)</li>
        <li><a href="http://iterm2.com/documentation-highlights.html" title="iTerm 2 terminal emulator">iTerm 2</a>, a Mac OS X terminal emulator that does amazing things, such as split panes, autocomplete, paste history, instant replays. Free with suggested donation. </li>
        <li><a href="http://ejohn.org/blog/write-code-every-day/#postcomment" title="write code everyday">This blog post by <NAME></a> talks about the importance of practicing your craft everyday - without fail. Related to <NAME>'s lifehack: <a href="http://lifehacker.com/5886128/how-seinfelds-productivity-secret-fixed-my-procrastination-problem" title="lifehacker article">'Don't break the chain'.</a> Printable calendars (A4 paper size) to use with this technique are available here: <a href="http://luminarious.planet.ee/calendar/" title="printable calendar">here</a>.</li>
        <li><a href="https://hackdesign.org/lessons" title="HackDesign lessons">HackDesign</a> offers a free course on UX, UI, graphic design principles, typography and best practices. They also offer a page called Toolkit, a large list of popular tools used by professionals in the industry. Free, sign up for the newsletter for goodies.</li>
        <li>Speaking of free goodies, I always learn something new or receive a free offers (such as free vector icons etc) from <a href="http://www.webdesignernews.com/" title="Web designer news">Webdesigner News</a>, "Curated stories for designers. Their newsletter is regularly jam-packed with great articles.</li>
        <li>No tutorial list would be complete without a reference to <a href="http://www.tutorialspoint.com/tutorialslibrary.htm" title="Tutorials Point">Tutorials Point</a>, an exhaustive resource to many, many programming languages. </li>
        <li>The free eBook "Becoming a Better Programmer" from Stephen Young's website, <a href="http://aestheticio.com/" title="Stephen Young website">Better Programmer</a>. There are a number of cool, informative articles here and the book itself is very comprehensive. Highly recommended.</li>
        <li>Also I should mention this free eBook by <NAME>, <a href="http://designingfortheweb.co.uk/index.php" title="Designing for the Web">Designing for the Web</a>.</li>
        <li>Finally I would be remiss if I did not mention Code Newbie: They are amazing. They host a Slack channel to which you may get access after the free sign up, and they host special coding hours, for example Ruby Monday, (missed a golden opportunity to host it on <a href="https://youtu.be/a00_tPLcE_g" title="Goodbye Ruby Tuesday">Tuesday</a>!) Their Twitter Q &amp; A's are legendary and they often have awesome podcast interviews with movers and shakers of the coding industry. Check them out at: <a href="http://www.codenewbie.org/" title="Code Newbie">Code Newbie</a> and follow on Twitter: <a href="https://twitter.com/codenewbies" title="CodeNewbies twitter">@CodeNewbies</a>. They regularly send out free stuff as well and discount codes for online classes. Highly recommended for the early and beginner coder. </li>
        </ul>

        <h3>bash &amp; Command Line</h3>
        <ul>
        <li>Obviously, <NAME>'s <a href="http://cli.learncodethehardway.org/book/" title="command line crash course">Command Line Crash Course</a> is a good place to start to get your bash on and to get a quick introduction to Unix operating system. </li>
        <li>Speaking of Unix, once you are ready to take a much more in-depth plunge, check out the extensive online book, <a href="http://www.faqs.org/docs/artu/index.html" title="The Art of Unix Programming">The Art of Unix Programming</a> by <NAME>. If that seems too daunting at first, at least read the first chapter summary: <a href="http://www.faqs.org/docs/artu/ch01s06.html" title="Basics of the Unix Philosophy">Basics of the Unix Philosophy</a>. These rules, such as Least Surprise, Modularity, Parsimony are principles that are shared across many different programming languages, so it really helps to understand these concepts early.</li>
        <li>To practice your shortcut skills, try <a href="https://www.shortcutfoo.com/" title="Shortcut Foo">Shortcut Foo</a> and <a href="https://typing.io/lessons" title="typing practice with code">typing lessons</a>. The latter link employs a good range of different coding languages for a nice challenge. These sites have paid options, but the basic lessons are free.</li>
        <li>You can go right to the <a href="http://www.gnu.org/software/bash/manual/bashref.html" title="bash reference manual">Bash Reference Manual</a> for the nitty gritty details. </li>
        </ul>

        <h3>Git and GitHub</h3>
        <ul>
        <li>Roger Dudler's handy git cheat sheet: <a href="http://rogerdudler.github.io/git-guide/" title="git the simple guide">git - the simple guide</a> is "just a simple guide for getting started with git. no deep shit ;)"</li>
        <li>As a corollary to the above, <NAME>-Gray's <a href="http://think-like-a-git.net/" title="think like a git">Think Like (a) Git</a> is an invaluable resource.</li>
        <li>GitHub provides a handy dandy <a href="https://github.com/styleguide" title="Styleguide">Styleguide</a> for HTML &amp; CSS, JavaScript, and Ruby. "It's dangerous to go alone. Take this!"</li>
        <li>Dev Bootcamp recommended ebook: Tower's <a href="http://www.git-tower.com/learn/git/ebook" title="Learn Version Control with Git ebook by Tower">Learn Version Control with Git</a>.</li>
        </ul>

        <h3>HTML/CSS &amp; design principles</h3>
        <ul>
        <li>I made use of the <a href="http://www.headfirstlabs.com/readme.php" title="Head First labs">Head First</a> series of books. For a comprehensive, (if somewhat overwhelming) survey of HTML books to consider, see <a href="http://www.skilledup.com/articles/best-html-books" title="best HTML books to learn from">100 Best HTML &amp; HTML5 Books to Learn HTML From</a> by <NAME> on skilledup.</li>
        <li>Of course, the <a href="https://www.codecademy.com/learn" title="Codecademy">Codecademy</a> HTML/CSS track is great.</li>
        <li>Wireframe online services: <a href="https://writemaps.com/" title="Writemaps">Writemaps</a> and for something much more stripped down, try <a href="http://wireframe.talltree.us/" title="talltree wireframe tool">Tall Tree's Wireframe tool</a>. My cohort fellows liked <a href="https://balsamiq.com/" title="Balsamiq">Balsamiq</a> as well.</li>
        <li>For designing moodboards, visit <a href="http://www.gomoodboard.com/" title="go moodboard service">Gomoodboard</a>.</li>
        <li>After mastering the basics, I found it useful to read up on latest developments in the industry and new frameworks, for example <a href="http://sass-lang.com/guide" title="Sass">Sass</a> &amp; <a href="http://compass-style.org/help/" title="Compass stylesheet framework">Compass</a>.</li>
        <li>Of course this also included a survey of <a href="http://getbootstrap.com/" title="Bootstrap">Bootstrap</a>.</li>
        <li>An exhaustive list of Bootstrap resources is located here:  <a href="http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources#howto" title="big badass list of twitter bootstrap resources">The Big Badass List of Twitter Bootstrap Resources</a>.</li>
        <li>For a programmer in a designer's world perspective of Bootstrap, check out <a href="https://24ways.org/2012/how-to-make-your-site-look-half-decent/" title="How to Make Your Site Look Half-Decent in Half an Hour">this post</a> by <NAME>.</li>
        <li>While on the subject of frameworks, check out <a href="http://foundation.zurb.com/" title="Foundation">Foundation</a> by Zurb and the associated <a href="http://zurb.com/library" title="Zurb Library">Zurb University resources</a>.</li>
        <li><a href="http://www.html5rocks.com/en/" title="HTML5 Rocks">HTML5 Rocks!</a></li>
        <li><a href="https://css-tricks.com/" title="CSS Tricks">CSS Tricks!</a></li>
        <li>When it is time to run with the big dogs, level up to <a href="https://developer.mozilla.org/en-US/" title="Mozilla Developer">Mozilla Developer site</a> and the related blog site: <a href="https://hacks.mozilla.org/" title="Mozilla Hacks">Mozilla Hacks</a>.</li>
        <li><a href="http://www.quirksmode.org/" title="Quirksmode">Quirksmode</a> is an invaluable cross-browser and mobile compatibility tester. Check out creator Peter-<NAME>'s<a href="http://www.quirksmode.org/blog/archives/2015/05/tools_dont_solv.html" title="Peter-<NAME> blog"> informative blog posts</a> too.</li>
        <li>Responsive Design and Mobile First? See these <a href="http://www.fastcodesign.com/3038367/9-gifs-that-explain-responsive-design-brilliantly" title="Fast Co Design website">GIFs</a>, read the <a href="http://alistapart.com/article/responsive-web-design" title="A List Apart blog post">original article by <NAME></a>, and pick up the <a href="http://abookapart.com/products/responsive-web-design" title="Responsive Web Design">book</a>.</li>
        <li>Of course, we cannot speak of Responsive Design without also mentioning <a href="http://alistapart.com/article/planning-for-performance" title="Responsible Responsive Design">Responsible Responsive Design</a> by <NAME>.</li>
        <li>While you're at it, read this seminal article by <NAME>, <a href="http://alistapart.com/article/dao" title="A Dao of Web Design blog post">A Dao of Web Design</a>. I recommend subscribing to the A List Apart email alerts. </li>
        <li>For even yet more on responsive design, I found that this post by <NAME> was useful: <a href="http://www.sanwebe.com/2015/06/responsive-navigation-tutorials-demo" title="more responsive design">40 Responsive Navigation Solutions (Examples &amp; Codes)</a>. You can find a nice variety of techniques here using jQuery, plain old CSS and JavaScript.</li>
        <li><a href="http://htmlarrows.com/" title="HTML Arrows">HTML Arrows</a> by Zeppelin provides a great place to look for HTML symbol codes in a convenient repository. For even more, see the <a href="http://www.unicode.org/charts/" title="Unicode character code charts">Unicode Character Code Charts</a>.</li>
        <li>Favicons should be easy to implement. <a href="http://realfavicongenerator.net/" title="Real Favicon Generator">Real Favicon Generator</a> helps get them right, cross platform and cross browser.</li>
        <li>No list on HTML5 resources should miss this: <a href="http://html5doctor.com/article-archive/" title="HTML5 Doctor">HTML5 Doctor</a>. For example, here is a nice little flowchart for sectioning HTML5 elements: <a href="http://html5doctor.com/downloads/h5d-sectioning-flowchart.png" title="HTML5 sectioning flowchart">HTML5 Element Flowchart</a>.</li>
        <li><a href="https://gsnedders.html5.org/outliner/" title="HTML5 Outliner">HTML5 Outliner</a> is an online outliner. Pretty neat.</li>
        <li>Once you get your code, you need to validate it. Use these online tools to see if your pages pass muster. <a href="https://validator.w3.org/nu/" title="Nu HTML Checker">Nu HTML Checker</a>, and the official <a href="https://validator.w3.org/#validate_by_input" title="W3C Markup Validation Service">W3C Markup Validation Service</a>.</li>
        <li>For publishing HTML friendly code-snippets, try <a href="http://hilite.me/" title="hilite">Hilite</a>. You can choose the style, (ah there you are Monokai, my old friend.)</li>
        <li><a href="https://html5boilerplate.com/" title="HTML5 Boilerplate">HTML5 Boilerplate</a> and <a href="http://www.initializr.com/" title="Initializr">Initializr</a> are two supremely useful tools that should be part of your arsenal as a developer. You should at least know the existence of these tools.</li>
        <li>Ever wonder what the purpose of the robots.txt file is? Wonder no more: <a href="http://www.robotstxt.org/robotstxt.html" title="The Web Robot pages">About /robots.txt</a>. Check out the corollary: <a href="http://humanstxt.org/" title="About Humans.txt">About /humans.txt</a>.</li>
        <li><a href="http://cssstats.com/" title="CSS stats">CSS Stats</a> will give you a shakedown visualization on stats concerning the CSS of any webpage. Try it out on your favorite sites or your own. </li>
        <li>Great blog post by <NAME>, <a href="http://www.myinkblog.com/css-tips-i-wish-i-knew-when-i-first-started/" title="my ink blog">CSS Tips I Wish I Knew When I First Started</a>. Keep in mind this blog post was from quite a while ago and the state of CSS is in constant flux, as most things are in this industry, so be sure and find out the latest techniques yourself to stay current. See above links for CSS Tricks et al.</li>
        <li><a href="http://www.sitepoint.com/simple-clearing-of-floats/" title="simple clearing of lfoats">Clear a float in CSS</a> from SitePoint blog post by <NAME>. Again, note that it is quite old and you should always be prepared with the salt shaker.</li>
        <li><a href="http://meyerweb.com/eric/css/" title="Eric Meyers website">Eric Meyer's</a> website, the creator of reset.css and many other nice things. His site offers blog posts, tools, plugins, and other useful snippets and hacks.</li>
        <li>A kind of CSS validation tool, <a href="http://csslint.net/" title="CSS Lint">CSS Lint</a> has the capacity to ferret out the most obscure of problems or potential pitfalls in your stylesheets. "It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency."</li>
        <li>When you absolutely posiively have to find the specificty of something, use the online <a href="http://specificity.keegan.st/" title="CSS specificity calculator">CSS Specificity Calculator</a>.</li>
        <li>CSS Gradients are still a pain to write, but at least there is a tool that helps: <a href="http://www.colorzilla.com/gradient-editor/" title="Ultimate CSS Gradient Generator">Ultimate CSS Gradient Generator</a> from ColorZilla. I use the ColorZilla Chrome plug in and really like it. To find a completely randomized CSS Color Gradient, <a href="http://paintbycode.github.io/gradient-generator/" title="Gradient Generator">roll the dice</a> on this randomized gradient generator. On a related note, <a href="http://paletton.com/" title="Paletton live colorizer">Paletton Live Colorizer</a> will help you find the right colors you need. "It is designed to create palettes of colors that work well together according to classical color theories."</li>
        <li>If you ever need to add more color names to your vocabulary, check out <a href="http://riccardoscalco.github.io/crayon/" title="Crayon.css">Crayon.css</a>. "Crayon.css is a list of CSS variables linking color names to hexadecimal values, usable with postCSS or with your favorite CSS preprocessor, being it Stylus, Sass or Less."</li>
        <li><a href="http://www.atozcss.com/videos/" title="A to Z CSS videos">A to Z CSS videos</a> are a series of great bite-sized tutorials on a particular topic in CSS by Guy Routledge. </li>
        <li>I could go on and on with this section on CSS and HTML, but I think I will wrap it up with some links to typographic resources: <a href="http://www.instantshift.com/2015/04/21/highquality-free-fonts-2015-04/" title="40 Latest High-Quality Free Fonts For Professional Designers">40 Latest High-Quality Free Fonts For Professional Designers</a>, the online calculator for whitespace, <a href="http://leaverou.github.io/contrast-ratio/" title="Contrast Ratio">Contrast Ratio</a>, font size calculator: <a href="http://www.modularscale.com/" title="Modular Scale calculator">Modular Scale calculator</a> and the related site, <a href="http://type-scale.com/?size=16&scale=1.500&text=A%20Visual%20Type%20Scale&webfont=&font-family=%27Open%20Sans%27%2C%20serif&font-weight=400&font-family-headers=&font-weight-headers=inherit&background-color=white&font-color=%23333" title="Type-Scale">Type-Scale.</a> </li>
        <li>Check out this article by <NAME> on 3D CSS design: <a href="https://subvisual.co/blog/posts/62-perfecting-a-css-3d-animation" title="subvisual blog post on 3D CSS">Perfecting a CSS 3D animation</a>.</li>
        <li>I highly recommend getting a free <a href="http://codepen.io/" title="CodePen">CodePen</a> account and start experimenting yourself. Follow them <a href="https://twitter.com/codepen" title="CodePen twitter">@codepen</a> for absolutely stunning work by the community. Some of the work is truly awe inspiring.</li>
        <li>Finally, from a purely design perspective, beware of anyone who claims that your webpage should "obey" the Golden Ratio or Golden Rectangle or any other sort of mystical nonsense. Watch this short video to learn how this notion has been thoroughly debunked: <a href="https://vimeo.com/88132964" title="Debunking 10 Golden Ratio Myths">Debunking 10 Golden Ratio Myths</a>.</li>
        </ul>

        <h3>Ruby</h3>
        <ul>
        <li><a href="http://tryruby.org/" title="Try Ruby">Try Ruby</a>.</li>
        <li><a href="https://rubymonk.com/" title="Ruby Monk">Ruby Monk</a>.</li>
        <li><a href="http://mariabpiper.tumblr.com/post/116045895341/ruby-docs-for-newbs" title="Ruby Docs blog post by <NAME>">Ruby Docs for Newbs,</a> blog post by <NAME>.</li>
        <li><a href="http://www.rubyist.net/~slagell/ruby/" title="Ruby User’s Guide">Ruby User's Guide</a>. Comprehensive and easy to follow.</li>
        <li><a href="http://rubykoans.com/" title="Ruby Koans">Neo Ruby Koans</a>. This should be required reading/activity for any aspiring Rubyist. After learning the basics, follow this path to enlightenment, young grasshopper.</li>
        <li><a href="http://mislav.uniqpath.com/poignant-guide/book/" title="poignant guide to ruby">Poignant Guide to Ruby</a> by _why the Lucky Stiff.</li>
        <li>For more information on the programmer known as _why, see this Slate article: <a href="http://www.slate.com/articles/technology/technology/2012/03/ruby_ruby_on_rails_and__why_the_disappearance_of_one_of_the_world_s_most_beloved_computer_programmers_.html" title="Where’s _why?">Where’s _why?</a> by <NAME>.</li>
        <li><a href="http://nsomar.com/untiabout-ruby-selftled/" title="Blog post on Ruby’s self">Blog post on Ruby's self</a> by <NAME>.</li>
        <li>On Ruby Test Driven Development (TDD): <a href="http://pragmaticstudio.com/blog/2005/3/18/ruby-learning-test-1-are-you-there-world" title="Ruby Learning Test">Ruby Learning Test</a> from Pragmatic Studio. </li>
        <li>Related to TDD, Udemy offers this course: <a href="https://www.udemy.com/learn-test-driven-development-in-ruby/?couponCode=rdit" title="The TDD Course for Beginners">The TDD Course for Beginners: Learn by Practicing 7 Katas</a>. Remember that I mentioned that CodeNewbie sometimes gave out free stuff? This was one of them! If the coupon code in the above link is expired, you may have to pay for this course if you are still interested in it.</li>
        <li>Rspec: <a href="https://www.relishapp.com/rspec/" title="official documentation Rspec">official documentation</a>.</li>
        <li><a href="https://sourcemaking.com/refactoring" title="Refactoring">Refactoring</a>, a handy guide from SourceMaking.</li>
        <li><a href="http://blog.codinghorror.com/code-smells/" title="Code Smells">Code Smells</a>.</li>
        <li><a href="http://rubylearning.com/satishtalim/writing_our_own_class_in_ruby.html" title="Ruby Learning post">Writing our own Class in Ruby</a>.</li>
        <li>On the importance of writing good variable names: <a href="https://web.archive.org/web/20131212155508/http://www.makinggoodsoftware.com/2009/05/04/71-tips-for-naming-variables/" title="Making Good Software blog post">blog post by <NAME></a>.</li>
        <li>Design principle: <a href="http://xp.c2.com/YouArentGonnaNeedIt.html" title="post on extreme programming"> You Arent Gonna Need It</a>. Not particularly about Ruby, but relevant to Object Oriented Design.</li>
        <li>Functional Programming in Ruby, a <a href="https://code.google.com/p/tokland/wiki/RubyFunctionalProgramming" title="blog post">blog post by <NAME></a>.</li>
        <li>Finally <a href="http://www.rubyflow.com/" title="RubyFlow">RubyFlow</a> is an up to date list of current topics in Ruby. <a href="http://rubyweekly.com/" title="Ruby Weekly">Ruby Weekly</a> is another curated digest of recent and relevant news in Ruby. They often post job listings as well. </li>
        </ul>

        <h3>JavaScript</h3>
        <ul>
        <li><a href="http://codetunnel.io/9-javascript-tips-you-may-not-know/" title="JavaScript tips">Some JavaScript tips you may not know.</a></li>
        <li><a href="http://www.smashingmagazine.com/2010/04/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/" title="Smashing Magazine article">Seven JavaScript Things I Wish I Knew Much Earlier In My Career</a>, article by <NAME> in Smashing Magazine, an excellent resource in of itself.</li>
        <li><a href="http://codecombat.com/" title="CodeCombat">CodeCombat</a>, a fun and easy way to learn code (not just JavaScript, but that's what I have used.) Totally addictive. </li>
        <li>Blog post by <NAME>, <a href="https://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/" title="blog post">Truth, Equality and JavaScript</a>.</li>
        <li><a href="http://code.tutsplus.com/tutorials/the-basics-of-object-oriented-javascript--net-7670" title="tutsplus code page">The Basics of Object-Oriented JavaScript</a> on Tuts+ Code.</li>
        <li><a href="http://underscorejs.org/#" title="underscore.js">underscore.js</a> a JavaScript library. Often used with <a href="http://backbonejs.org/" title="backbone.js">backbone.js</a> and jQuery.</li>
        <li>Blog post by <NAME>, <a href="http://www.clientcide.com/deep-thoughts/how-to-become-a-javascript-badass/" title="blog post on Clientcide">How to Become a JavaScript Badass</a>.</li>
        <li>Fun little interactive learning tool, <a href="http://ejohn.org/apps/learn/" title="Learning Advanced JavaScript">Learning Advanced JavaScript</a> by <NAME>.</li>
        <li>Finally I found this article informative: <a href="http://benalman.com/news/2010/11/immediately-invoked-function-expression/" title="blog post">Immediately-Invoked Function Expression (IIFE)</a> by <NAME>.</li>
        <li><a href="http://www.sitepoint.com/essential-tools-libraries-modern-javascript-developers/" title="JavaScript Tools and Libraries">Essential Tools &amp; Libraries for Modern JavaScript Developers</a>. (Suggested by fellow DBC Cicada, Paul B.)</li>
        <li><a href="http://blog.bitovi.com/longevity-or-lack-thereof-in-javascript-frameworks/" title="JavaScript Framework longevity">Longevity (or Lack Thereof) in JavaScript Frameworks</a>, blog post by <NAME>, found via Paul B. again. (Thanks, Paul!)</li>
        </ul>

        <h3>jQuery and DOM</h3>
        <ul>
        <li><a href="https://www.codecademy.com/tracks/jquery" title="Codecademy jQuery track">Codecademy jQuery track</a>.</li>
        <li><a href="http://jquery.com/" title="Official jQuery documetnation">Official jQuery documetnation</a>.</li>
        </ul>

        <h3>SQL</h3>
        <ul>
        <li><a href="https://www.sqlite.org/cli.html" title="SQLite">Command Line Shell For SQLite</a></li>
        <li><a href="http://www.w3schools.com/sql/sql_datatypes.asp" title="SQL Data Types">SQL Data Types for Various DBs</a>.</li>
        <li><a href="http://www.vertabelo.com/blog/notes-from-the-lab/18-best-online-resources-for-learning-sql-and-database" title="SQL learning resources">18 Best Online Resources For Learning SQL and Database Concepts</a>.</li>
        </ul>

        <h3>General Recommendations</h3>
        <ul>
        <li>Make a professional Twitter account. Follow people in the industry.</li>
        <li>Get a <a href="https://en.wikipedia.org/wiki/Rubber_duck_debugging" title="Rubber Duck Debugging wikipedia article">Rubber Duckie</a>. Or use a significant other if they can stand it. I sometimes employ my cats as stand-in rubber duckies.</li>
        <li>Watch all the Dev Talks videos that are provided. </li>
        <li>Try all of the optional exercises that are suggested.</li>
        <li>Do the assigned reading, (which sounds obvious, but you would be surprised...)</li>
        <li>Quit your day job. (Obviously for most folks this may not be an option before On-Site Phase 1, but if you can swing it, I say go for it.)</li>
        <li>Stay positive. I know this sounds really flippant and easy for someone to just say, but sometimes you may feel like you have made the wrong decision. If you feel you are in the weeds, do not dwell on it. Take a walk, a shower, drink a cup of tea or a beer, take a break, and try again. And above all else, <em>ASK FOR HELP</em>. Your cohort, your guides and tutors, even random Twitter citizens can lend a helping elbow to help prop you back up and send you on your way. Believe in yourself. Don't give up.</li>
        </ul>

        <h3>Errata</h3>
        <ul>
        <li><a href="http://whatcolourisit.scn9a.org/" title="What Colour is it?">What Colour is it? </a> is a CSS experiment that changes background color hex code as time goes by. Trust me, just click the link.</li>
        <li><a href="http://www.se.rit.edu/~tabeec/RIT_441/Resources_files/How%20To%20Write%20Unmaintainable%20Code.pdf" title="How to Write Unmaintainable Code">How To Write Unmaintainable Code</a>, a tongue-in-cheek essay by <NAME>.</li>
        <li><a href="https://medium.com/@ilovetypography/the-last-word-on-helvetica-71422b01f2bb" title="Helvetica as a tool">The Last Word on Helvetica?</a> blog post on Medium by <NAME>.</li>
        <li><a href="https://web.archive.org/web/20131208070042/http://www.joelonsoftware.com/articles/Wrong.html" title="Blog post">Making Wrong Code Look Wrong</a> by <NAME>.</li>
        <li>Programmers are a verbose lot. And by that I mean they swear like sailors. Stack Overflow is littered with examples, many quite hilarious. Here is one of my favorites, the first reply under the question here: <a href="http://stackoverflow.com/questions/3718625/what-does-rubys-arrayshift-do" title="Stack Overflow">What Does Ruby's Array#shift do?</a> Needless to say, I will not be forgetting #shift/#unshift anytime soon.</li>
        <li>For more funny/terrible stories you can check out <a href="http://thedailywtf.com/" title="The Daily WTF">The Daily WTF</a> or the <a href="https://www.reddit.com/r/programminghorror/" title="Programming Horror">Programming Horror subreddit</a>.</li>
        <li>On a decidedly more family-friendly note, here are some more programming jokes that I now get: <a href="https://medium.com/@jerstew/web-development-jokes-d97bc7c8891b" title="blog post on Medium">A web developer walks into a bar…</a></li>

        </ul>

        <p>I will be starting Phase 1 bright and early tomorrow morning! I've got the first day jitters. Go Cicadas! And thanks for reading. If anyone has a suggestion to add to this list, hit me up via Twitter, <a href="https://twitter.com/chileannick" title="my twitter">@ChileanNick</a>. <i>Excelsior</i>!</p>

      </section>

      <footer>
        <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Code or Die</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://nchristiny.github.io/blog/index.html" property="cc:attributionName" rel="cc:attributionURL"><NAME></a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://nchristiny.github.io/" rel="dct:source">http://nchristiny.github.io/</a>.
      </footer>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
      <script src="js/plugins.js"></script>
      <script src="js/main.js"></script>
      <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-64368113-1', 'auto');
        ga('send', 'pageview');

      </script>

    </div>
  </body>
</html>
{'fraction_non_alphanumeric': 0.14203097285776037, 'fraction_numerical': 0.012192395403258262, 'mean_word_length': 4.06240096581906, 'pattern_counts': {'":': 0, '<': 1346, '<?xml version=': 0, '>': 1346, 'https://': 89, 'lorem ipsum': 0, 'www.': 93, 'xml': 6}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 2, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1530140', 'n_tokens_mistral': 21629, 'n_tokens_neox': 20272, 'n_words': 6653}