|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Foo</title> |
|
<meta charset='utf-8' /> |
|
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /> |
|
<style type='text/css'> |
|
body { |
|
background:#000; |
|
color:#fff; |
|
font-family:'Georgia'; |
|
margin:0; |
|
} |
|
|
|
@-webkit-keyframes blinker { |
|
from { opacity: 1.0; } |
|
to { opacity: 0.0; } |
|
} |
|
|
|
em { |
|
-webkit-animation-name: blinker; |
|
-webkit-animation-iteration-count: infinite; |
|
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0); |
|
-webkit-animation-duration: 800ms; |
|
} |
|
|
|
strong { |
|
font-weight:normal; |
|
color:#FFF707; |
|
} |
|
|
|
a { |
|
color:#FFF707; |
|
text-decoration:none; |
|
} |
|
|
|
div { |
|
cursor:pointer; |
|
cursor:hand; |
|
position:absolute; |
|
top:0; |
|
left:0; |
|
} |
|
|
|
</style> |
|
<script type='text/javascript'> |
|
window.onload = function() { |
|
var s = document.getElementsByTagName('div'), cur = 0, ti; |
|
if (!s) return; |
|
function go(n) { |
|
cur = n; |
|
var i = 1e3, e = s[n], t; |
|
for (var k = 0; k < s.length; k++) s[k].style.display = 'none'; |
|
e.style.display = 'inline'; |
|
e.style.fontSize = i + 'px'; |
|
if (e.firstChild.nodeName === 'IMG') { |
|
document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')'; |
|
e.firstChild.style.display = 'none'; |
|
if ('classList' in e) e.classList.add('imageText'); |
|
} else { |
|
document.body.style.backgroundImage = ''; |
|
document.body.style.backgroundColor = e.style.backgroundColor; |
|
} |
|
if (ti !== undefined) window.clearInterval(ti); |
|
t = parseInt(e.getAttribute('time-to-next') || 0, 10); |
|
if (t > 0) ti = window.setTimeout(fwd, (t * 1000)); |
|
while ( |
|
e.offsetWidth > window.innerWidth || |
|
e.offsetHeight > window.innerHeight) { |
|
e.style.fontSize = (i -= 5) + 'px'; |
|
if (i < 0) break; |
|
} |
|
e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px'; |
|
if (window.location.hash !== n) window.location.hash = n; |
|
document.title = e.textContent || e.innerText; |
|
} |
|
document.onclick = function() { go(++cur % (s.length)); }; |
|
function fwd() { go(Math.min(s.length - 1, ++cur)); } |
|
function rev() { go(Math.max(0, --cur)); } |
|
document.onkeydown = function(e) { |
|
if (e.which === 39) fwd(); |
|
if (e.which === 37) rev(); |
|
}; |
|
document.ontouchstart = function(e) { |
|
var x0 = e.changedTouches[0].pageX; |
|
document.ontouchend = function(e) { |
|
var x1 = e.changedTouches[0].pageX; |
|
if (x1 - x0 < 0) fwd(); |
|
if (x1 - x0 > 0) rev(); |
|
}; |
|
}; |
|
function parse_hash() { |
|
return Math.max(Math.min( |
|
s.length - 1, |
|
parseInt(window.location.hash.substring(1), 10)), 0); |
|
} |
|
if (window.location.hash) cur = parse_hash() || cur; |
|
window.onhashchange = function() { |
|
var c = parse_hash(); |
|
if (c !== cur) go(c); |
|
}; |
|
|
|
go(cur); |
|
}; |
|
</script></head><body> |
|
<div><h2 id="why-you-need-to-start-learning-javascript-today">Why you need to start learning Javascript today</h2> |
|
<p>-- Prabhas Pokharel</p> |
|
</div> |
|
<div><p>A. Convincing you.</p> |
|
<p>B. My JS Story</p> |
|
<p>C. Some tips</p> |
|
</div> |
|
<div><p>(1) JS is BIG.</p> |
|
</div> |
|
<div><p>what do you think is the top language on github?</p> |
|
</div> |
|
<div><p><img src="js_on_github.png" alt=""></p> |
|
<p>source: githut.info</p> |
|
</div> |
|
<div><p>Redmonk Programming Lanugages: "Top Language"</p> |
|
</div> |
|
<div><ul> |
|
<li><p>2015?</p> |
|
</li> |
|
<li><p>2014?</p> |
|
</li> |
|
<li><p>2013?</p> |
|
</li> |
|
</ul> |
|
</div> |
|
<div><p>(2) </p> |
|
</div> |
|
<div><p><img src="chrome-logo.png" alt=""></p> |
|
</div> |
|
<div><p>Web sites -> Web Apps</p> |
|
<p>(facebook, google search)</p> |
|
</div> |
|
<div><p>Desktop Apps -> Web Apps</p> |
|
<p>(office suite, sketching, mockups)</p> |
|
</div> |
|
<div><p>The front-end keeps growing</p> |
|
</div> |
|
<div><p><strong>Collaboration</strong>,</p> |
|
<p><strong>Instant Deployment</strong>,</p> |
|
<p><strong>Interactivity</strong></p> |
|
</div> |
|
<div><p>(3) But, js is not just about the browser</p> |
|
</div> |
|
<div><p><img src="node-logo.png" alt=""></p> |
|
</div> |
|
<div><p><img src="npm-logo.png" alt=""> |
|
<img src="npm-package-growth.png" alt=""></p> |
|
</div> |
|
<div><h3 id="even-gis-">Even GIS!</h3> |
|
<p><img src="turfjs.png" alt=""></p> |
|
<p>(<a href="http://turfjs.org">http://turfjs.org</a>)</p> |
|
</div> |
|
<div><p>(4) JS to make mobile apps</p> |
|
</div> |
|
<div><p>React Native: Build <strong>native</strong> apps with JS.</p> |
|
<p><img src="react-native-phone.jpg" alt=""></p> |
|
</div> |
|
<div><p>(5) Libraries Galore!</p> |
|
</div> |
|
<div><p>2 Things JS is eating:</p> |
|
<p><strong>Data Visualization</strong></p> |
|
<p><strong>Mapping</strong></p> |
|
</div> |
|
<div><p>(6) And you know what, if you don't want to <em>write</em> JS, you don't have to.</p> |
|
</div> |
|
<div><p><img src="compile-to-js.png" alt=""></p> |
|
</div> |
|
<div><p><strong>Cofeescript:</strong> JS with fewer braces</p> |
|
<p><strong>Dart:</strong> "Class-based and Object-oriented" language with C-style syntax.</p> |
|
<p><strong>Clojurescript:</strong> Functional Programming Language on top of JS</p> |
|
</div> |
|
<div><p>Anyone still need convincing?</p> |
|
</div> |
|
<div><h3 id="b-my-js-story">B. My JS Story</h3> |
|
</div> |
|
<div><p><strong>formhub.org</strong></p> |
|
<p><strong>yatayat</strong></p> |
|
<p><strong>Ona.io</strong></p> |
|
</div> |
|
<div><p><strong>yatayat</strong></p> |
|
<ul> |
|
<li>data store, collection, sync: OSM</li> |
|
<li>our project: visualization + interactivity</li> |
|
</ul> |
|
</div> |
|
<div><p><a href="http://yatayat.monsooncollective.org">demo</a></p> |
|
</div> |
|
<div><ul> |
|
<li>hosted on <strong>github pages</strong></li> |
|
<li>started with live API queries; later cached API results daily.</li> |
|
<li>short-lived API in node.</li> |
|
</ul> |
|
</div> |
|
<div><p>these days: |
|
write front-ends in <strong>cljs</strong></p> |
|
</div> |
|
<div><p><img src="om-ninja.png" alt=""></p> |
|
<p>(Shameless Plug: Email me and I may run v2).</p> |
|
</div> |
|
<div><h3 id="c-some-tips">C. Some tips</h3> |
|
<p>(Just start!)</p> |
|
</div> |
|
<div><h3 id="pick-a-project-get-started-">pick a project, get started!</h3> |
|
<ul> |
|
<li>make a quick prototype</li> |
|
<li>don't skip step 1</li> |
|
<li>code it up.</li> |
|
</ul> |
|
</div> |
|
<div><h3 id="js-learning">js learning</h3> |
|
<ul> |
|
<li><p><strong>javascript the good parts</strong></p> |
|
</li> |
|
<li><p><strong>codecademy</strong> / <strong>generalassembly</strong> / <strong>tons</strong> of online-learning platforms</p> |
|
</li> |
|
<li><p><strong>jsfiddle / codepen.io</strong>: live testing</p> |
|
</li> |
|
</ul> |
|
</div> |
|
<div><h3 id="resources">resources</h3> |
|
<ul> |
|
<li><p>you'll need css: <strong>css-tricks.com</strong> (learn css flexbox)</p> |
|
</li> |
|
<li><p>stack overflow is good, but <strong>understand the why</strong></p> |
|
</li> |
|
<li><p>if you're just copy-pasting, then what is the point?</p> |
|
</li> |
|
</ul> |
|
</div> |
|
<div><h4 id="editors">editors</h4> |
|
<p><strong>Atom</strong> and <strong>Brackets</strong> are both free. |
|
(I use brackets)</p> |
|
</div> |
|
<div><h4 id="the-utility-belt">The Utility Belt</h4> |
|
<p><strong>lodash.js</strong></p> |
|
</div> |
|
<div><h3 id="-frameworks-">"Frameworks"</h3> |
|
<p><strong>Backbone</strong> / <strong>Angular.JS</strong> / <strong>Ember.JS</strong> / <strong>React.JS</strong></p> |
|
</div> |
|
<div><p><img src="benchmarks.png" alt=""></p> |
|
<p>If you're starting, try out React.JS!</p> |
|
</div> |
|
<div><h3 id="some-caution">Some Caution</h3> |
|
<p><img src="js-the-good-and-bad.jpg" alt=""></p> |
|
</div> |
|
<div><h3 id="main-thing">Main thing</h3> |
|
<ul> |
|
<li>Get Started, hack on something.</li> |
|
<li>Improve (= get your code reviewed (eg, <strong>exercism.io</strong>))</li> |
|
<li>Kick ass!</li> |
|
</ul> |
|
</div> |
|
<div><h3 id="specific-opportunities-i-see-in-ktm">Specific opportunities I see in KTM</h3> |
|
<ul> |
|
<li>data viz</li> |
|
<li>web app products</li> |
|
<li>fb-integrations (fb has a javascript SDK)</li> |
|
</ul> |
|
</div> |
|
<div><ul> |
|
<li>need a project?</li> |
|
<li>know this stuff, want a job?</li> |
|
</ul> |
|
<h2 id="prabhas-pokharel-gmail-com">[email protected]</h2> |
|
</div> |
