Important Talk
A talk about all the important things!
Our goal as software engineers is to produce code that is:
- Reliable
- Efficient
- Understandable
- High Quality
- Blah blah blah ...
Let's worry about those later...
Today We're Talking About
- Easter Eggs
- Font Creation
- Text Manipulation
- Forcing Poor Performance
- Stickers
- Farts
Easter Eggs with Cheet.js
Map a sequence of keypresses to a callback.
DEMO TIME!
That was magical... tell me how.
cheet.js is a library that listens to key events and invokes a callback if the criteria of your easter egg is met.
npm install cheet.js
Easter Egg Examples
cheet('U U D D L R L R b a', function () {
alert('+30 lives');
});
cheet('i d d q d', function () {
alert('god mode enabled');
});
cheet('o n e a t a t i m e', {
next: function (str, key, num, seq) {
console.log('key pressed: ' + key);
console.log('progress: ' + num / seq.length);
console.log('seq: ' + seq.join(' '));
},
fail: function () {
console.log('sequence failed');
},
done: function () {
console.log('I am proud of you');
}
});
More Easter Egg Examples
cheet('o n c e', function () {
console.log('This will only fire once.');
cheet.disable('o n c e');
});
var sequences = {
cross: 'up down left right',
circle: 'left up right down'
};
cheet(sequences.cross);
cheet(sequences.circle);
cheet.done(function (seq) {
if (seq === sequences.cross) {
console.log('cross!');
} else {
console.log('circle!');
}
});
Font Creation
Because who doesn't need to create their own unique font?
DEMO TIME!
“I will never entertain the thought of creating my own font, but you're going to show us how to create one anyway aren't you?” -Michael Scott
Plumin.js is a library that creates and manipulates fonts using javascript.
npm install plumin.js
Font Creation Examples
(function(p) {
var font = new p.Font({
familyName: 'Demo',
ascender: 800,
descender: -100
}),
a = new p.Glyph({
name: 'a',
unicode: 'a',
advanceWidth: 496
}),
i = new p.Glyph({
name: 'i',
unicode: 'i',
advanceWidth: 268
}),
o = new p.Glyph({
name: 'o',
unicode: 'o',
advanceWidth: 536
}),
shape;
// a contour
shape = new p.Path.RegularPolygon({
center: [268, 124],
sides: 3,
radius: 248
});
shape.rotate(180, [268, 124]);
shape.scale(1, 1.4, [268, 0]);
a.addContour(shape);
// i contour
shape = new p.Path.Rectangle({
point: [60, 0],
size: [140, 500]
});
i.addContour(shape);
// o contour
shape = new p.Path.Ellipse({
point: [50, 0],
size: [436, 510]
});
o.addContour(shape);
font.addGlyphs([ a, i, o ]);
font.updateOTCommands()
.addToFonts();
})(plumin.paper);
Text Manipulation and Animation
It even works in IE!
DEMO TIME!
Fun with Blast.js
Blast text apart to make it manipulable.
npm install blast-text
Text Blastin' Example
// Blast apart an element using the "word" delimiter
$("div").blast({ delimiter: "word" });
// Before
Hello World
// After
Hello
World
// All Done
$("div").blast(false);
Text Blastin' Options
$("div").blast({
delimiter: "character" // Set the delimiter type
search: false // Perform a search *instead* of delimiting
tag: "span" // Set the wrapping element type (e.g. "div")
customClass: "" // Add a custom class to wrappers
generateIndexID: false // Add #customClass-i to wrappers
generateValueClass: false // Add .blast-word-val to wrappers
stripHTMLTags: false // Strip HTML before blasting
returnGenerated: true // Return generated elements to stack
aria: true // Avoid speechflow disruption for screenreaders
});
Forcing Poor Performance
Because you hate your users.
DEMO TIME!
Slowing things down with comcastify.js
A library that incrementally loads the elements on the page
https://github.com/theonion/comcastifyjs
Comcastifying Your Page
$(document).ready(function () {
comcastifyjs.letsPrepareTheseImages();
});
$(window).load(function () {
comcastifyjs.fixMyImagesLoadingSoFast({
loadMaxPercent: 0.75,
loadSpeed: 1000,
loadIncrement: 5,
boxColor: '#ece4d8'
})();
});
Stickers
Because you are developing web sites for small children.
DEMO TIME!
Getting sticky with Stickers.js
A library that provides a sticker effect.
https://github.com/cmiscm/stickerjs
Sticker Effect Configuring
Create some sticker DOM elements
Add the CSS to configure size and image/color
.sticker {
width: 180px;
height: 180px;
}
// add image
.example-1 .sticker-img {
background-image: url(example.png);
}
// add color
.example-2 .sticker-img {
background-color: #ff4a85;
}
Tell stickerjs what to target.
Sticker.init('.sticker');
Farts
Because no important talk is complete without farts.
DEMO TIME!
Farting with fartscroll.js
A library that delivers fart audio to your web page.
https://github.com/theonion/fartscroll.js
Farting Config
// Fart every 400 pixels scrolled in the window
fartscroll();
// Fart every 800 pixels scrolled
fartscroll(800);
// Fart every 2000 pixels scrolled. Maybe this is a long
// article and you want the user to question if they're hearing things
fartscroll(2000);
// SO MANY FARTS
fartscroll(5);
// Alright, that's probably enough examples. Just wanted one more excuse
// to say 'fart'.
fartscroll(400);