var canvas = null; var ctx = null; var frameRate = 1000/30; var frame = 0; var assets = ['/media/img/gamedev/robowalk/robowalk00.png', '/media/img/gamedev/robowalk/robowalk01.png', '/media/img/gamedev/robowalk/robowalk02.png', '/media/img/gamedev/robowalk/robowalk03.png', '/media/img/gamedev/robowalk/robowalk04.png', '/media/img/gamedev/robowalk/robowalk05.png', '/media/img/gamedev/robowalk/robowalk06.png', '/media/img/gamedev/robowalk/robowalk07.png', '/media/img/gamedev/robowalk/robowalk08.png', '/media/img/gamedev/robowalk/robowalk09.png', '/media/img/gamedev/robowalk/robowalk10.png', '/media/img/gamedev/robowalk/robowalk11.png', '/media/img/gamedev/robowalk/robowalk12.png', '/media/img/gamedev/robowalk/robowalk13.png', '/media/img/gamedev/robowalk/robowalk14.png', '/media/img/gamedev/robowalk/robowalk15.png', '/media/img/gamedev/robowalk/robowalk16.png', '/media/img/gamedev/robowalk/robowalk17.png', '/media/img/gamedev/robowalk/robowalk18.png' ]; var frames = []; var onImageLoad = function(){ console.log("IMAGE!!!"); }; var setup = function() { body = document.getElementById('body'); canvas = document.createElement('canvas'); ctx = canvas.getContext('2d'); canvas.width = 100; canvas.height = 100; body.appendChild(canvas); for(var i = 0; i < assetes.length; i++){ frames.push(new Image()); frames[i].src = asset[i]; frames[i].onload = onImageLoad; } setInterval(animate, frameRate); }; var animate = function(){ context.clearRect(0,0,canvas.width, canvas.height); frame = (frame + 1) % frames.length; }; setup();
onload image
var canvas = null; var context = null; setup = function(){ canvas = document.getElementById("my_canvas"); context = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // var img = document.getElementById("scream"); // ctx.drawImage(img,10,10); img = new Image(); img.onload = onImageLoad; img.src = "ralphyrobot.png"; }; onImageLoad = function(){ console.log("IMAGE!!"); };
onImageLoad
var onImageLoad = function(){ console.log("IMAGE!!!"); context.drawImage(img,192,192) };
Strong password
at least n characters
combination of upper- and lower-case characters
one or more digits
not related to other user data (name, address, username, …)
not a dictionary word
<script type="text/javascript"> function checkForm(form) { if(form.username.value == ""){ alert("Error: Username cannot be blank!"); form.username.focus(); return false; } re = /^\w+$/; if(!re.test(form.username.value)){ alert("Error: Username must only letters, numbers and undersocres!"); form.username.focus(); return false; } if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value){ if(form.pwd1.value.length < 6){ alert("Error: Password must contain at least six characters!"); form.pwd1.focus(); return false; } if(form.pwd1.value == form.username.value){ alert("Error: Password must be different from Username!"); form.pwd1.focus(); return false; } re = /[0-9]/; if(!re.test(form.pwd1.value)){ alert("Error: password must contain at least one number(0-9)!"); form.pwd1.focus(); return false; } re = /[a-z]/; if(!re.test(form.pwd1.value)){ alert("Error: password must contain at least one lowercase letter(a-z"!); form.pwd1.focus(); return false; } re = /[A-Z]/; if(!re.test(form.pwd1.value)){ alert("Error: password must contain at least one uppercase letter(A-Z"); form.pwd1.focus(); return false; } } else { alert("Error: Please check that you've entered and confirmed your password!"); form.pwd1.focus(); return false; } alert("You entered a valid password: " + form.pwd1.value); return true; } </script> <form ... onsubmit="return checkForm(this);"> <p>Username: <input type="text" name="username"></p> <p>Password: <input type="password" name="pwd1"></p> <p>Confirm Password: <input type="password" name="pwd2"></p> <p><input type="submit"></p> </form>
Event holder
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Quiz - Placeholder</title> </head> <body> <form action="#"> <label for="event-name"> <span>Enter the name of your event:</span> <input type="text" id="event-name" placeholder="Event Name"> </label> </form> </body> </html>
autocomplete
The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Quiz - Autocomplete</title> </head> <body> <form action="#"> <label for="email"> <span>Email:</span> <input type="email" id="email" placeholder="example@gmail.com" autocomplete="email"> </label> </form> </body> </html>
contact-form
Check input type with mozilla.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
<form class="date-and-time-picker"> <label for="date"> <span>what day do you want to leave?</span> <input id="date" type="date"> </label> <label for="time"> <span>What time do you want to leave?</span> <input id="time" type="date-time"> </label> </form>
data list
<input list="nano"> <datalist id="nano"> <option value="Android"></option> <option value="Data Analyst"></option> <option value="Front End"></option> <option value="Full Stack"></option> <option value="Intro to Programming"></option> <option value="iOS"></option> <option value="Tech Entrepreneur"></option> </datalist>
Another datalist
<html lang="en"> <head> <meta charset="UTF-8"> <title>Quiz - Datalists</title> </head> <body> <p>What kind of event are you hosting?</p> <input list="event"> <datalist id="event"> <option>Party</option> <option>Meeting</option> <option>Conference Talk</option> <option>Sports Game</option> </datalist> </body> </html>
<form> <label for="use-billing"> <span>Same as billing address</span> </label> <input type="checkbox" id="use-billing"> <br> <label for="tel-number"> <span>Telephone Number</span> <input type="tel" id="tel-number"> </label> </form>
Interconnection
application layer: http, smtp
transport layer: tcp, udp
network layer: IP
link layer: ethernet
physical layer: sonet
mobile network
<script> if (navigator.onLine) alert("I'm online! Whoo-hoo"); </script>
check manifest file.
localStorage.setItem(‘foo’, ‘bar’);
Camera and Audio Input
<input type="file" accept="image/*;capture=camera"> <input type="file" accept="image/*;capture=camcorder"> <input type="file" accept="image/*;capture=microphone">
problems with file input capture
-only works on mobile
-file open button is unstylable
-different app can break the flow
navigator.getUserMedia(constraints, successCallback, errorCallback);
function openCameraPane(callback, fullscreen) { if (fullscreen) document.body.webkitRequestFullscreen(); _myVideoCallback = callback; var constraints = {video: true}; navigator.getUserMedia(constraints,successCallback,errorCallback); }
function successCallback(stream) { var video = createVideoUserInterface(); video.src = window.URL.createObjectURL(stream); }
function snapshot(ev) { var video = document.querySelector('.camera-video'); var canvas = document.querySelector('.camera-picture'); var ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0); }
MediaStreamTrack.getSources(gotSources); <element>.requestFullscreen();
html5 geolocation API
maps, augmented reality, geocaching, nearby features
navigator.geolocation.getCurrentPosition( function(position){ do_something( position.coords.latitude, position.coords.longitude ) });
Vibration API
navigator.vibrate(1000)
viewport and media query
<meta name="viewport" content="width=device-width">
start this tag.
<meta name="viewport" content="width=device-width,initial-scale=1">
1vmin = 1vm or 1vh, whichever is smallest
1vmax = 1vm or 1vh, whichever is largest
available media query expressions
width, height, device-width, device-height, orientation, aspect-ratio,
device-aspect-ratio, grid, color, color-index, monochrome, resolution, scan
.menu-items-grid { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-around; padding: 0 1% } @media (orientation:portrait){ .menu-items-grid { flex-direction: column; } }
window.devicePixelRatio
@media (min-pixel-ratio:2){ .pretteybackground { background: url('images/hires_bkg.png'); } }
cellular radio lifecycle
Idle -> active -> short sleep -> long sleep
-lifecycle of an HTTP request
DNS lookup -> socket connect -> HTTP request -> Data download
avoid redirect
minimize or eliminate render-blocking resources (stylesheets, fonts, unknown-size, image)
animation framework
settimeout, setInterval -> requestAnimationFrame
touch UI
hover does not rely on
use large hit target
do not disable mouse support
touch events
->touchstart, touchmove, touchend, touch cancel
Input
html5 has tel input type.
<input type="tel">
<label> <input type="checkbox"> "Do you love lemurs?" </label>
interface
public interface Drawable { void draw(); } public class House implements Drawable { public void draw(){...} }
for (Drawable d : elements) { d.draw();}
public interface Moveable { void move(int seconds); } public class Car implements Drawable, Moveable