Tag Archives: Frontend

Best Practices for Speeding Up Your Web Site – Yahoo Developer Network

I spent some time spelunking through my bookmarks for this article. Overall, this article has some really good practices to follow in general on coding a website.

Best Practices for Speeding Up Your Web Site

Advertisements

Scaling HTML Canvas

I did some Googling on how to scale a HTML canvas and found these two SO questions.
Continue reading

Drawing Lines Onto HTML5 Canvas

There are a few things I want to quickly fix on my Sierpinski triangle JavaScript. I reworked how I drew the triangle onto the canvas this morning and I like how it turned out. Next I’m going to attempt to dynamically plot an equilateral triangle onto the canvas.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
						
/* 
    draw()
     - Draws a triangle from three given points.
     - Is able to a set fill color.
     - Is able to a set line color.
     - Is able to a set line width. 
*/
function draw( pointA, pointB, pointC, fillStyle, strokeStyle, lineWidth ){

	// Setting start point
	context.moveTo( pointA.x, pointA.y );

	// Connecting the points
	context.lineTo( pointB.x, pointB.y );
	context.lineTo( pointC.x, pointC.y );
	context.lineTo( pointA.x, pointA.y );
							
	// Line style variables may be false 
	if( fillStyle != false ){
		context.fillStyle = fillStyle;
		context.fill();
	}

	if( strokeStyle != false )
		context.strokeStyle = strokeStyle;

	if( lineWidth != false )
		context.lineWidth = lineWidth;

	// Draws the line
	context.stroke();
}

draw( {x: 20, y: 20}, {x:20, y:60}, {x:60, y:20}, false, false, false );

HTML DOM Events

I spent around 10 minutes adding some extra mouse events to my particle simulation JavaScript this morning.

Continue reading

HTML Mouse Tracking

I’ve was Googling on how work with mouse events and found these gems.

Continue reading

Simple Particle Animation in JavaScript

I’ve been hitting a few walls trying to learn how to do some simple sprite animation but here is simple JavaScript animation that was pretty fun to work with to see how you can code with the canvas.

This animation randomly drops a circle onto the canvas and was originally created by Josh Marinacci.

http://projects.joshy.org/presentations/HTML/CanvasDeepDive/presentation.html

Also check out his blog, he has some interesting stuff on there.

http://joshondesign.com/

Continue reading

Recursive Sierpinski Triangle in HTML5

I’ve made this recursive Sierpinski triangle written using HTML5’s canvas and JavaScript. Next I’m going to try to make a 3D version in WebGL.
Continue reading