Funny stuff! But all kidding aside, I personally feel like PHP was ugly enough without goto. To me, one of the language’s biggest downfalls has always been that it practically encourages sloppy design, and this is a huge step in the wrong direction. How do you feel about it?

(Link via Isaac Schlueter)

And let’s just skip right past Internet Explorer and its plethora of headaches, shall we? We all know it sucks. Here’s why else it sucks to be one of us:

1. Everyone Thinks It’s Your Fault

   So you’re QA. You’re testing a website and something is broken. It looks to you like the frontend, because that’s what you see. What may separate good QA from excellent QA is the ability to determine where the error lies, but sometimes that’s out of QA’s scope.

   Regardless of who the owner is, chances are the issue will go to you first. You must then determine if it’s even your issue, and either fix it, or pass it on. Bringing us to …

2. You Are Also a Project Manager

   The frontend is the very last thing to get done. That’s because the design needs to be finished way in advance so that assets can be delivered, and the backend has to be complete before you have access to data to use in your implementation.

   This means that you must act as Project Manager to keep everyone else on track, because otherwise you can’t ever get to work! And that’s why …

3. You Always Seem Late

   Since you’re the last one that gets to begin implementing, chances are you’ve got less time than everyone else. And sometimes you can’t even get started until after your deadline! And even when you do finally get your assets and can get to it, sometimes …

4. You Must Know Photoshop

   To be fair, I actually use The Gimp, which works fine. What I mean by this point is that you must learn to use a competent image manipulation program. Why? Because although you may have an excellent design person/team, chances are they’re not going to cater to you and your crazy CSS hacks.

   You know what I mean. Sometimes you’re wanting to sprite your images to get better page performance, or sometimes you need to pull off some crazy rounded corners hack to get the positioning cohesive across browsers. You could go back-and-forth with design all day, or you could say “screw it” and alter the image yourself. It sucks but that’s how it gets done. And that’s part of …

5. You Must be a Jack-of-All-Trades

   In addition to competency with a decent image manipulation application, you’re going to need at least a familiarity in many other areas. It’s very rare to find a frontend engineer who doesn’t ever need to modify at least some server-side code.

   For example, although I am official a frontend engineer, I probably spend 30-50% of my time in PHP. That’s because, before I can even render the markup I need to tweak, I’ve got to setup the data I receive from the backend.

   Not to mention the various other tasks that randomly pop up in the webdev stack, such as Apache rewrite rules or cronjobs. I’m sure the same could be said for most jobs, but it seems like frontend engineers’ skillsets must be broader than most.

But it’s not all bad. Especially right now in Silicon Valley, frontend engineers are quite valuable, so it’s a great time to know how to code for the browser. Either way, did I miss something? Let me know!
]]> http://scriptnode.com/article/5-things-that-suck-about-being-a-frontend-engineer/feed/ 1 http://scriptnode.com/article/spacius-source-code/ http://scriptnode.com/article/spacius-source-code/#comments Tue, 10 Mar 2009 05:52:23 +0000 Matt Hackett http://scriptnode.com/?p=278 I’ve been meaning to “release” this for quite some time now, but I wanted to do it in small doses, with in-depth explanations of the code. Making a game can be somewhat overwhelming, but it’s just like any other large task: if you break it up into smaller pieces, it becomes much easier to manage.

But time is a commodity nowadays. I’ve got way less time to write, and when I do, I’d rather be writing code than tutorials (or honestly, playing video games). Sorry about that, but I hope the (well-commented!) source will help those of you out there who’d like to contribute to the slowly growing world of DHTML games.

You’ll notice that this code is over 6 months old. And I’m the kind of developer who constantly updates his style, methods and patterns. Given that, there may very well be many mistakes or bad practices in here, some of which I may have improved upon by now, but others maybe not. Either way, feel free to comment on them, and I’ll answer any questions as well.

Thanks for checking it out, and please be good to it. I’d love to know about any projects created with this source as a basis, and would appreciate links back here. Also please don’t claim it as your own, that’s not cool.

For now I am hosting the source code with GitHub.

Enjoy!

]]> http://scriptnode.com/article/spacius-source-code/feed/ 0 http://scriptnode.com/article/software-development-meme/ http://scriptnode.com/article/software-development-meme/#comments Thu, 18 Sep 2008 23:50:21 +0000 Matt Hackett http://scriptnode.com/?p=171 I’ve been tagged by the insanely creative Jacob Seidelin, which means it’s my turn to fill out the Software Development Meme!

How old were you when you first started programming?

I was about 12 years old. That combined with my love of Nintendo really makes it sound like I never left the house, but I found time to play sports and get in trouble, really… …

How did you get started in programming?

A mysterious friend of mine (Jim MacDonald, who all but doesn’t exist online) and I used to play games all day, like Dragon Warrior and Shining Force. Then one day he wondered how games were made, and found…

What was your first language?

QBASIC! This has gotta be the easiest language to learn, and that says a lot in an age where PHP exists. I think more developers would benefit from starting with this fantastically simple language.

What was the first real program you wrote?

I wrote a program I simply called Dragon, which was a direct ripoff of Jim’s game Wizard or something. It used QBASIC’s DRAW commands to draw shapes and PLAY for sound effects. It was a single-battle, turn-based game pitting you (a knight) against a dragon. It was amazingly bad but pretty fun (for 12-year-olds anyway).

What languages have you used since you started programming?

Professionally: Only PHP and JavaScript

For fun and/or school: BASIC, C, C++, Perl, Python, QBASIC, Turbo Pascal, Visual BASIC

What was your first professional programming gig?

Working for Dav Glass at SchoolCenter. I was a PHP programmer making a measly $10/hour coding content management tools for K-12 schools. I was quickly promoted to lead designer (odd, right?), then when the company realized we needed engineers more than designers, put back into the development department. About a year after Dav moved to Yahoo!, I followed.

If you knew then what you know now, would you have started programming?

Oh hell yes. I’m always trying to learn as much as I can. Learning new languages is fascinating, and learning more about what you already are familiar with to me should be a daily exercise. If I had had the knowledge I have now when I was younger, I can’t imagine what I would have built by now. Interesting to think about!

If there is one thing you learned along the way that you would tell new developers, what would it be?

In a normal curriculum in school, students are taught to read well before they are taught to write. I’m not sure why this isn’t the case in programming. You’ve always got these wannabe developers that try to run before they can walk, and they end up tripping. There’s no shame in beginning modestly.

I recommend to anyone of any programming level: read other people’s code. The Internet is the ideal place to learn.

What’s the most fun you’ve ever had… programming?

Everytime I learn a new language, my first task is to build a game. I’ve been doing this for over a decade, in every single language I’ve dabbled in. But I think it was the most fun in QBASIC. I built an intentionally awful game called Seanbaby’s Magic Bus Ride Trip for you guessed it… Seanbaby. Working in Flash is really fun too, but nothing beats JavaScript.

Who’s next?

Let’s go with Isaac Schlueter, since he’s a great writer and always has interesting things to say!

]]> http://scriptnode.com/article/software-development-meme/feed/ 1 http://scriptnode.com/article/twittertyper/ http://scriptnode.com/article/twittertyper/#comments Wed, 10 Sep 2008 01:11:51 +0000 Matt Hackett http://scriptnode.com/?p=157

I unfortunately am not allowed to participate, but in anticipation of Yahoo!’s Hack Day 2008, I put together a little app I’ll hopefully be able to port to YAP: twittertyper!

The concept is very simple. twittertyper displays the latest tweet from Twitter. To read the next one, first type out the tweet. The text is highlighted as you go. If you come across a character your keyboard (or operating system) won’t let you type, just press Esc to move on to the next character.

twittertyper currently just pulls in from the public timeline; no authentication is supported to pull from your timeline (maybe in a future version). This mini-app is built on YUI. Source code (uncompressed) is free to peruse.

Try it out!

Note: If you use Twitter, I’m sure you’re used to it being down. Errors happen often, but twittertyper attempts to handle them somewhat gracefully. Usually a page reload should suffice.

]]> http://scriptnode.com/article/twittertyper/feed/ 0 http://scriptnode.com/article/shark/ http://scriptnode.com/article/shark/#comments Sun, 03 Aug 2008 10:56:42 +0000 Matt Hackett http://scriptnode.com/?p=48 Well, this year’s Shark Week is over. In its memory, I offer up a script that makes sharks swim around on the screen. You should see a few sharks swimming about right now! Here’s the source code:

<br /> /**<br /> * Global Shark constructor<br /> * Options for ops: dir, speed, url, x, y, zIndex<br /> * @constructor<br /> * @public<br /> */<br /> Shark = function(ops) {</p> <p> var Y = YAHOO.util,<br /> DEFAULT_SPEED = 2,<br /> DEFAULT_ZINDEX = 1000,<br /> DELAY = 25,<br /> LEFT = ‘l’,<br /> RIGHT = ‘r’,<br /> SCREEN_WIDTH = Y.Dom.getViewportWidth(),<br /> SCREEN_HEIGHT = Y.Dom.getViewportHeight(),<br /> SHARK_WIDTH = 242,<br /> SHARK_HEIGHT = 82;</p> <p> var interval,<br /> that = this;</p> <p> that.active = true;<br /> that.dir = LEFT;<br /> that.el = {};<br /> that.onOutLeft = function(){};<br /> that.onOutRight = function(){};<br /> that.x = 0;<br /> that.y = 0;</p> <p> /**<br /> * Initializes the shark variables<br /> * @private<br /> */<br /> var init = function() {</p> <p> ops = ops || {};<br /> ops.speed = ops.speed || rand(DEFAULT_SPEED, (DEFAULT_SPEED * 2));<br /> ops.url = ops.url || ‘./’;<br /> ops.zIndex = ops.zIndex || DEFAULT_ZINDEX;</p> <p> if (ops.dir) {<br /> that.dir = ops.dir;<br /> } else {<br /> that.dir = [LEFT, RIGHT][rand(0, 1)];<br /> }</p> <p> if (ops.x === undefined) {<br /> if (that.dir == LEFT) {<br /> that.x = (SCREEN_WIDTH – 1);<br /> } else {<br /> that.x = -SHARK_WIDTH;<br /> }<br /> } else {<br /> that.x = ops.x;<br /> }</p> <p> that.el = document.createElement(’div’);<br /> that.el.className = ’shark’; // Doesn’t do anything. Just in case you want to use it<br /> that.el.style.position = ‘absolute’;<br /> that.el.style.height = SHARK_HEIGHT + ‘px’;<br /> that.el.style.zIndex = ops.zIndex;</p> <p> Y.Event.addListener(that.el, ‘click’, onclick);</p> <p> document.body.appendChild(that.el);<br /> reset();</p> <p> if (ops.y !== undefined) {<br /> that.y = ops.y<br /> plot();<br /> }</p> <p> that.start();</p> <p> };</p> <p> /**<br /> * Kills the shark<br /> * @param {Boolean} fade Whether to fade the shark in or not<br /> */<br /> that.kill = function(fade) {</p> <p> that.active = false;</p> <p> var done = function() {<br /> document.body.removeChild(that.el);<br /> stop();<br /> };</p> <p> if (fade) {</p> <p> var anim = new Y.Anim(that.el, {opacity : {to : 0}}, 0.5);</p> <p> anim.onComplete.subscribe(done);<br /> anim.animate();</p> <p> } else {<br /> done();<br /> }</p> <p> };</p> <p> /**<br /> * Move the shark<br /> */<br /> var move = function() {</p> <p> if (!that.active) {<br /> return;<br /> }</p> <p> if (that.dir == LEFT) {</p> <p> that.x -= ops.speed;</p> <p> if (that.x < -SHARK_WIDTH) {<br /> that.dir = RIGHT;<br /> that.onOutLeft();<br /> reset();<br /> }</p> <p> } else {</p> <p> that.x += ops.speed;</p> <p> if (that.x > (SCREEN_WIDTH – 1)) {<br /> that.dir = LEFT;<br /> that.x = (SCREEN_WIDTH – 1);<br /> that.onOutRight();<br /> reset();<br /> }</p> <p> }</p> <p> if (that.x > (SCREEN_WIDTH – SHARK_WIDTH)) {<br /> that.el.style.width = (SHARK_WIDTH – (that.x – (SCREEN_WIDTH – SHARK_WIDTH))) + ‘px’;<br /> } else {<br /> that.el.style.width = SHARK_WIDTH + ‘px’;<br /> }</p> <p> plot();</p> <p> };</p> <p> /**<br /> * Kills the shark. Note: intended to be overwritten<br /> */<br /> var onclick = function() {<br /> that.onclick();<br /> };</p> <p> /**<br /> * Default onclick behavior<br /> */<br /> that.onclick = function() {<br /> that.kill(true);<br /> };</p> <p> /**<br /> * Moves the shark element to the XY coordinates<br /> */<br /> var plot = function() {<br /> that.el.style.left = that.x + ‘px’;<br /> that.el.style.top = that.y + ‘px’;<br /> };</p> <p> /**<br /> * Returns a random number<br /> * @param {Number} from The starting point<br /> * @param {Number} to The stopping point<br /> * @return {Number} A random number within the range<br /> */<br /> var rand = function(from, to) {<br /> return (from + Math.floor((to – from + 1) * Math.random()));<br /> }; </p> <p> /**<br /> * Sets the background based on direction and randomizes the Y position<br /> */<br /> var reset = function() {</p> <p> that.el.style.background = ‘url(’ + ops.url + ’shark_’ + that.dir + ‘.gif)’;<br /> that.y = rand(0, (SCREEN_HEIGHT – SHARK_HEIGHT – 1));</p> <p> plot();</p> <p> };</p> <p> /**<br /> * Starts the move interval<br /> */<br /> that.start = function() {</p> <p> if (interval) {<br /> return;<br /> }</p> <p> interval = setInterval(move, DELAY);</p> <p> };</p> <p> /**<br /> * Stops the move interval<br /> */<br /> that.stop = function() {<br /> if (interval) {<br /> clearInterval(interval);<br /> interval = false;<br /> }<br /> };</p> <p> init();</p> <p>};<br />

You can create new sharks like this:

<br /> var myShark = new Shark();</p> <p>// Or setup some basics, like having him swim to the left<br /> var anotherShark = new Shark({dir : ‘l’});<br /> anotherShark.onclick = function() {<br /> alert(”I’m a shaaaaaaark!”);<br /> myShark.kill(true); // Kill it with a fade<br /> };</p> <p>// You may also want to host the shark images yourself:<br /> var hostedShark = new Shark({url : ‘http://mydomain.com/shark/’});<br />

The last example above shows setting a custom URL for the shark images. You can download those here:





There are a few different events you can subscribe to including onclick, onOutLeft and onOutRight, which I think are pretty self-explanatory.
Using these events, I put together a very simple game involving sharks, clicking and hopelessly trying to save a doomed diver. The ocean graphics came from one of my favorite CSS Zen Garden examples.

The shark script requires YUI (Animation, DOM and Event). I’ve included it in the third download option below:

• [Download shark.js] (3,747 bytes)
• [Download shark-min.js] (1,550 bytes; compressed)
• [Download shark-min-yui.js] (46k; compressed with YUI)

I’d love to see if anybody else has cool ideas of what to do with the shark script!




]]> http://scriptnode.com/article/shark/feed/ 3 http://scriptnode.com/article/weekly-round-up-week-of-71308/ http://scriptnode.com/article/weekly-round-up-week-of-71308/#comments Thu, 24 Jul 2008 07:43:30 +0000 Matt Hackett http://scriptnode.com/?p=41 Last week was an amazing week for web development. If you haven’t heard about these cool new projects, here’s what you’ve been missing out on:


The first thing I saw last week was Scott Schiller’s amazing Experimental dynamic XBM test, favicon “VU meter”. He put his very useful Sound Manager 2 flash API to interesting use: the favicon displayed in many browsers’ tabs and other places is a VU meter of the current song playing. Awesome! So, using that cool premise, what other neat things could be done…


Enter Mathieu ‘p01′ Henri’s super cool DEFENDER of the favicon! This unbelievable game is confined in a tiny 16×16 box, just big enough for your favicon! You can also hit Enter to transfer the game into a canvas element on the page. So creative, so retro, so cool! I’ve already spent way too much time playing this game, much to the misfortune of my poor squinting eyes.


Last but never least is the always impressive Jacob Seidelin with another mind-blowing demo of what JavaScript is capable of in the right hands. I’m sorry if it’s tiring that I keep reposting what Jacob is up to, but as long as he’s doing incredible things like this, it’s not gonna stop.

You may have already heard about Radiohead’s new video hosted on Google Code. If not, here’s the gist of it:

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Awesome right? Well Jacob saw this as a challenge from Radiohead and did what he does: implemented it in JavaScript and canvas. As usual, super cool stuff.

Well, this week’s almost over, so here’s to hoping that next is half as cool as last week was!

]]> http://scriptnode.com/article/weekly-round-up-week-of-71308/feed/ 0 http://scriptnode.com/article/spacius-a-space-adventure/ http://scriptnode.com/article/spacius-a-space-adventure/#comments Tue, 08 Jul 2008 19:19:43 +0000 Matt Hackett http://scriptnode.com/?p=38

I must have been feeling nostalgic, missing my wasted hours playing old Nintendo games as a kid, because last weekend I put together Spacius! A Space Adventure. My goal was to make a fun, simple game using only JavaScript that would work in any browser. That’s right folks, this game was made using just div elements! Really, there’s nothing hardcore in here that would require canvas, so I guess that shouldn’t blow any minds. But this game has been tested and works in IE6, IE7, FireFox 2/3, Opera 9.5 and Safari 3.

My one cop-out was falling back on flash for the audio, but until all browsers support HTML5 (or some mad genius makes a JavaScript-only audio player), this is the best I could do. Spacius! uses Scott Schiller’s fantastic Sound Manager 2 to enable sound. There’s a little latency, but it otherwise works like a charm.



One really cool thing about the way Spacius! works is that it takes the shape of its containing element. So it was really trivial to make an 800×600 pixel version.

Here’s how to play: Press the space bar to begin the game. Use the arrow keys to move the ship. Once playing, use the space bar to shoot balls of excitement. The S key toggles sound on/off.

There are six waves in Spacius!. The last one begins at 10,000 points, and it’s really hard so only total badasses will be able to get super high scores (yes, that’s a challenge).

Here are the UFO scores:


Bomber: 15 points


Bogey: 20 points


Meteor: 50 points


“Death Star”: 25 points

So what’re you waiting for?? PLAY NOW!

]]> http://scriptnode.com/article/spacius-a-space-adventure/feed/ 32 http://scriptnode.com/article/bresenhams-line-algorithm-in-javascript/ http://scriptnode.com/article/bresenhams-line-algorithm-in-javascript/#comments Sun, 06 Jul 2008 22:03:40 +0000 Matt Hackett http://scriptnode.com/?p=37 Today for Script Sunday I implemented Bresenham’s line algorithm
in the web browser. If you’ve got JavaScript enabled, you should see a red square in the upper-left hand corner
of the box below.
Clicking anywhere within the box should send the square to that location.

Here’s the source code:

<br /> /**<br /> * Bresenham’s line algorithm function<br /> * by Matt Hackett [scriptnode.com]<br /> * @param {Object} el The element to target (accepts both strings for id’s and element objects themselves)<br /> * @param {Number} x1 The starting X coordinate<br /> * @param {Number} y1 The starting Y coordinate<br /> * @param {Number} x2 The finishing X coordinate<br /> * @param {Number} y2 The finishing Y coordinate<br /> * @param {Object} params Additional parameters [delay, onComplete, speed]<br /> */<br /> var bresenham = function(el, x1, y1, x2, y2, params) {</p> <p> var<br /> interval,<br /> b,<br /> m,<br /> sx,<br /> y;</p> <p> var init = function() {</p> <p> var dx, dy, sy;</p> <p> // Default parameters<br /> params = params || {};<br /> params.delay = params.delay || 10;<br /> params.onComplete = params.onComplete || function(){};<br /> params.speed = params.speed || 5;</p> <p> // No point in doing anything if we’re not actually moving<br /> if ((x1 == x2) && (y1 == y2)) {<br /> plot(x1, y);<br /> params.onComplete();<br /> return;<br /> }</p> <p> el = ((typeof el === ’string’) ? document.getElementById(el) : el);</p> <p> // Initalize the math<br /> dx = x2 – x1;<br /> sx = (dx < 0) ? -1 : 1;<br /> dy = y2 – y1;<br /> sy = (dy < 0) ? -1 : 1;<br /> m = dy / dx;<br /> b = y1 – (m * x1);</p> <p> interval = setInterval(next, params.delay);</p> <p> };</p> <p> /**<br /> * Execute the algorithm and move the element<br /> */<br /> var next = function() {</p> <p> y = Math.round((m * x1) + b);<br /> plot(x1, y);<br /> x1 += (sx * params.speed);</p> <p> if (x1 >= x2) {<br /> clearInterval(interval);<br /> params.onComplete();<br /> }</p> <p> };</p> <p> /**<br /> * Move the target element to the given coordinates<br /> * @param float x The horizontal coordinate<br /> * @param float y The vertical coordinate<br /> */<br /> var plot = function(x, y) {<br /> el.style.left = x + ‘px’;<br /> el.style.top = y + ‘px’;<br /> };</p> <p> init();</p> <p>};<br />

The parameters are self-explanatory except for the (optional) params object. Here’s a breakdown:

• delay: The interval that the setInterval call uses [default: 10]
• onComplete: An optional function to call when the algorithm is finished
• speed: How quickly to move the element down the line [default: 5]

I’m not sure how much use this has in the “real world” but it’s typically pretty neat to see elements dancing around the page,
and I always love to see classic algorithms put to good use.
Enjoy!

• [Download bresenhams-line-algorithm.js] (1,769 bytes)
• [Download bresenhams-line-algorithm-min.js] (516 bytes; compressed)




]]> http://scriptnode.com/article/bresenhams-line-algorithm-in-javascript/feed/ 2