Jesse Harlin
@5imian
jesseharlin.net
simiancraft.com
Mobile Hybrid Apps
Innovative Business Software
Mapviz and Dataviz
Virtual Reality
Interactive Art
<script type="text/javascript">// workaround for IE table layout bugs
function tableWorkaround(cols) {
if (document.all) {
document.write('<tr>'); for (var i = 0; i < cols; i++) {
document.write('<td></td>');
}
document.write('</tr>') };
}
function tableWorkaround2_colheader() {
if (document.all) {
document.write('<col width="0">') };
}
function tableWorkaround2(rowHeight) {
if (document.all) {
document.write('<td height="' + rowHeight + '">');
document.write('</td>') };
}
</script>
(thankfully mostly don't)
----------------
YAHOO.util.Dom.setStyle('test', 'opacity', 0.5);
var opacity = YAHOO.util.Dom.getStyle('test2', 'opacity');
YAHOO.store.basket = function() {
var privateVar = 'Something';
return {
publicThing: 'whatever'
}
}
"Did you like Java? Sure you do. You'll love this. Sorta."
var Animal = new Class({
initialize: function(age){
this.age = age;
}
});
var Cat = new Class({
Extends: Animal,
initialize: function(name, age){
this.parent(age); // calls init of Animal class
this.name = name;
}
});
var myCat = new Cat('Micia', 20);
alert(myCat.name); // alerts 'Micia'.
alert(myCat.age); // alerts 20.
"Modular, Object-Oritented. Feels ...uh..classy"
$$("div p a").each( function(element){
element.observe("click",function(pEvent){
// 'this' refers to the DOM element on which the event occurred.
$(this).up("p").setStyle({backgroundColor:"red"});
} );
} );
//
Try.these(Function...) -> firstOKResult
"We have a bling-bling function"
dojo.require("dijit.form.Button");
function basicFadeinSetup(){
//Style the dom node to opacity 0;
dojo.style("basicFadeNode", "opacity", "0");
//Function linked to the button to trigger the fade.
function fadeIt() {
dojo.style("basicFadeNode", "opacity", "0");
var fadeArgs = {
node: "basicFadeNode"
};
dojo.fadeIn(fadeArgs).play();
}
dojo.connect(dijit.byId("basicFadeButton"), "onClick", fadeIt);
}
dojo.addOnLoad(basicFadeinSetup);
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
$('.my-carousel').carousel({visible: true})
not everyone who uses JavaScript is a software developer with an eye for good code ...all sorts of ugly JavaScript code perpetuates itself on the Internet.
a quick and dirty approach (is taken) to writing JavaScript. It's only script code, after all, and just slapping the code into a text editor to get the desired result is all we need. It's not until we have to untangle a mess that we realize a more disciplined approach would have ultimately saved us time.
With all of these problems in the JavaScript environment – why do we still want to torture ourselves by writing JavaScript code?
- Scott Allen
"Microsoft Bruh", circa 2007
Don't write it, buy it.
timeline by Adam Bradley
@adamBradley
d3.selectAll("circle")
.transition()
.duration(750)
.delay(function(d, i) { return i * 10; })
.attr("r", function(d) { return Math.sqrt(d * scale); });
Text
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
// Transpile, concatenate and minify scripts
function scripts() {
return (
gulp
.src(["./assets/js/**/*"])
.pipe(plumber())
.pipe(webpackstream(webpackconfig, webpack))
// folder only, filename is specified in webpack config
.pipe(gulp.dest("./_site/assets/js/"))
.pipe(browsersync.stream())
);
}
const js = gulp.series(scriptsLint, scripts);
//By the way they're never this simple.
var path = require('path');
module.exports = {
mode: 'development',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
}
};
gulp.task('bundle', function () {
var bundler = browserify(config.js.src) // Pass browserify the entry point
.transform(coffeeify) // Chain transformations: First, coffeeify . . .
.transform(babelify, { presets : [ 'es2015' ] }); // Then, babelify, with ES2015 preset
bundle(bundler); // Chain other options -- sourcemaps, rename, etc.
})
Babel.js
CoffeeScript
LiveScript
Dart
Emscripten
Google Closure Compiler
Google Web Toolkit
Morfik
TypeScript
AtScript
Opa
Nim
Haxe
ClojureScript
WebSharper
PureScript
Reason
Elm
(but here's some advice)
Putting it together
1
2
3
4
5
Practice Daily
or at least regularly
1
Talent is a Pursued interest
anything you're willing to practice, you can do.
Gear Up
Old Problems, New Tools
2
Self-Assess
Professionally. Personally.
3
Maintain a Lifeboat
Metaphorically Speaking.
4
Don't Give Up!
5