An Interview With Giovanny Beltran, js13kgames Winner

js13kgames, a JavaScript coding competition for HTML5 game developers, announced this year’s winners a few weeks ago. Today we have an interview with Giovanny Beltran, winner of many categories at js13kgames, and one of the best entries in this year’s contest. Giovanny has been programming for 13 years, and began working with JavasScript five years ago. In his free time he likes to play and create game demos.


Giovanny is an organizer of BogotaJS and a Spanish-speaking indie game developer community called Juegos Indies. Originally he created games in Java but it was so difficult to share his creations with his partners, so for this reason he decided to learn JavaScript. JavaScript gave him an easier way to share his own game creations with friends.


Hey Giovanny, tell us what you’re working on these days?

I work full time for a biotech company called Miroculus, and in my free time I work on video games and experimenting with new web technologies.

We know you participated in the js13kgames challenge. Can you tell us about your entry?

Yes, I participated this year (2016) and in 2014. This year’s contest theme was Glitch. I’d been wanting to do a 2D shooter for a while. The idea was to combine the Glitch topic with a shooter game. Because Glitches are from the 80s and 90s, I went with the idea of building something retro to evoke the sensation and nostalgia of an old retro game. My entry was called Evil Glitch.

Nice. How does it work? Where did your ideas come from?

I enjoy playing shooter games and one in particular really inspired me. It’s called Devil Daggers. Devil Daggers is frenetic and fast. Every match lasts about 4 minutes maximum, but that’s enough time to fall in love with playing it. So, it gave me the idea to create a game that’s exciting to play, with fast rounds to give you the adrenaline for yet another round and keep playing until you win or beat your high score. The protagonist of Evil Glitch is a 2D character whose world is invaded by 3D characters.

What was it like developing and debugging Evil Glitch? Were there any surprises during the process?

I have an automated build process, it’s executed every time I make a change in the source code of the game. This build process concatenates all the files and creates a single js file (without using minify). There’s a debug constant to display performance stats and some variable values that act directly on the game. When you build a minified version, this debug variable goes to false and the minifier (closure) removes all the code that is inside of the debug context.

I should also say that the build system I used is based on the winning entry from last year’s js13kgames: Behind Asteroids by Gaëtan Renaudeau.

Did you use any specific tools and libraries for your entry? Any you like the most?

I used npm to automate the build process, livereload to update the game in real time, closure to minify, stats.js to validate memory and performance, glslmin to minify webgl shaders, webgl.js to handle shaders, shadertoy as a reference for shaders, jsfxr for sound effects and tinymusic for music. The last two tools are my favorites, as they help improve the experience of the game.

Looking for more? There is a big list of resources collected through the years available on resources section at js13kgames.

In your opinion, what’s the most challenging part of building games for the web?

Cross-browser compatibility is hard — making sure that the game behaves the same in all browsers. For this competition, the game must run at least in Firefox and Chrome, but in real life your game should run well in as many browsers as possible.

It’s also challenging to discover a way to monetize the games. Because these games are all available on the web, it’s all too easy to download the source code and reload the game elsewhere. This has actually happened already.

What did you present as a speaker at JSConf Colombia?

My talk for JSConf Colombia 2016 was selected before js13kgames 2016, so I was motivated to create a high level game with more detail and complexity than previous entries for the contest. I spoke about my experience developing Evil Glitch, and gave a workshop on the topic as well.

This is the link to my slides from JSConf Colombia.

Congratulations, you won!

Thank you, I really worked hard to get the best results possible, however I didn’t expect to win. It was a big surprise due to the level of other competitors in the js13kgames 2016.

Which js13kgames category did you won?

I won 1st place in the Desktop category. I also won first place in two other categories (Facebook and Twitter) –thanks to the community of players who tested and upvoted my entry on the social networks.

Finally, I won in one other category – I won the most votes from all the game developers who participated in the challenge. Thanks to everyone in the jam who voted for my entry!

What’s next for Giovanny Beltran? Are you going to participate in js13kgames next year? Any other contests or projects that you’re thinking about?

There are many competitions about video games, but I really like js13kgames, due to the complexity of making a game in 13 kilobytes. I am going to put Evil Glitches on Steam, this is something I didn’t have planned but many people made the suggestion and pushed me to do it. You will be able to download Evil Glitch from Steam soon. So, yes, I am going to keep participating in js13kgames a few more times. Let’s hope I can do even better next year.

Thank you, we hope to see you again with another awesome project or participating in another contest.

Thanks for the interview. I want to try new things on the Web and experiment with WebGL. Some of these goals are not easy, but I am sure that by dedicating the time I can accomplish all of them.

Thanks to Andrzej and the js3kgames crew for keep running the contest every year, and to the Colombia-Dev community, GameDevLatam community, and the JuegosIndies group for all the support.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Interview with Micah Elizabeth Scott, winner of the Web Workers Dev Derby

Micah Elizabeth ScottMicah Elizabeth Scott won the Web Workers Dev Derby with Zen photon garden, her impressive (and fun) interactive web raytracer. Recently, I had the chance to learn more about Micah: her work, her ambitions, and her thoughts on the future of web development.

The interview

How did you become interested in web development?

I’ve been into building things for as long as I can remember. I love
making things, and I’ll often learn new tools just for the sake of
giving myself a different set of challenges and constraints to work
with. My first big web project was an early collaboration tool for
open source development, dubbed “CIA” because it spies on your source
code commits.

Can you tell us a little about how Zen photon garden works?

Zen photon garden is a type of raytracer, which is to say it simulates
the path that individual rays of light take as they bounce around in a
scene. It’s a two-dimensional raytracer though, which opens up kind of
a neat new possibility for visualizing how light works.

A traditional three-dimensional raytracer traces rays “backwards”,
casting rays out from each pixel on a virtual camera, bouncing it off
of the objects in your scene, until it finally reaches a source of
light. Each pixel of the scene comes about by counting, on average,
how many photons would reach that portion of the virtual camera.

In Zen photon garden, light rays emanate from a lamp and move along
the image plane in two dimensions. Instead of visualizing the single
point where a ray reaches the camera, I visualize the entire ray as it
bounces through the scene. Each ray turns into a sequence of line
segments, beginning at the light source and bouncing off of any number
of objects before it’s eventually absorbed. This process repeats
hundreds of thousands of times, and the image you see is a statistical
average of these many light rays.

The inner loop of Zen photon garden is quite specialized. For each
light ray, I need to trace its path by intersecting it with the
objects in the scene, and each segment of this path is visualized by
drawing an anti-aliased line into a high-dynamic-range 32-bit
accumulation buffer. After tracing a bunch of these rays, the
high-dynamic-range buffer is mapped to an 8-bit-per-channel image
according to the current camera exposure setting, and that image is
drawn to a Canvas.

These anti-aliased lines need to be fast and very high quality. Any
errors in the uniformity of the line’s brightness, for example, will
affect the smoothness of the final image. To get the combination of
speed and accuracy I need, this line drawing algorithm is implemented
in pure Javascript by a pool of Web Worker threads. This pool has to
be managed carefully so that the app can draw with high throughput
when you leave it alone, but it can still respond with low latency
when you’re interactively adding objects to the scene.

What was your biggest challenge in developing Zen photon garden?

The hardest part of implementing Zen photon garden was making it run
as fast as possible on all of the latest web browsers. Thankfully
these days it’s relatively easy to write an app that runs on all
browsers, but making it run optimally is tricky when your application
is CPU-bound. Small changes to the inner loops would cause big
differences in how well each Javascript engine’s optimizer performs.
This required a lot of trial and error, and a few trips back to the
drawing board.

What makes the web an exciting platform for you?

To me the killer feature of the web is its universality. Modern web
browsers are nearly ubiquitous, and it’s the fastest way to take a
weird new experimental concept and get it into people’s hands right
now. As someone who loves exploring the intersection of art and
technology, this means it’s finally possible to send your friends a
link to your latest art project without having to worry about what
operating system they’re using or whether they have the right library
dependencies installed.

What new web technologies are you most excited about?

WebGL is really exciting to me, but as someone who used to write
graphics drivers and worry about security for a living it also kind of
terrifies me!

The web technology I’m most excited about would have to be asm.js
actually. I’ve always enjoyed getting my hands dirty with low-level
graphics code, and even in today’s world of GPU acceleration and
high-level 2D canvas APIs, I still find plenty of reasons to push
pixels. Having a way to get near-native performance in a very reliable
way across all major browsers would open up some great new creative
possibilities, and I’m excited to see where that leads.

If you could change one thing about the web, what would it be?

It’d be great if we could find a way to ease the tension between those
who see the web as a content platform and those who see it as a
software operating system. Right now it feels like HTML is too
unwieldy to be a document markup language, and it’s just barely
starting to get the services you’d expect from a modern operating

Do you have any advice for other ambitious web developers?

Plan to prototype a lot of things, keep the ideas that stick, and
throw the rest away. Respect the web as a platform, and try to be
playful about exploring its margins. Understand but don’t begrudge the
ways in which web programming is different from other kinds of

Further reading

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Interview with Giovanny Granada, winner of the Geolocation Dev Derby

Giovanny Granada won the most recent Geolocation Dev Derby with GoGeoTweet, his wonderful web-based visualization of Twitter activity happening nearby. Recently, I had the chance to learn more about Giovanny: his work, his ambitions, and his thoughts on the future of web development.

The interview

How did you become interested in web development?

I became interested in development because I saw that my motivation was to innovate, create new things, and experiment with different technologies toward the goal of creating new and complete tools.

Can you tell us a little about how GoGeoTweet works?

The application works by using the Geolocation API and the Twitter API to show Tweets published within 1km of you–a very useful tool if you’re at an event or a special place and would like to know what Twitter users are saying.

What was your biggest challenge in developing GoGeoTweet?

The biggest challenge was using the Geolocation API and the Twitter API show to show only Tweets within a 1km radius.

What makes the web an exciting platform for you?

The ability to create things using technologies of all types and obtain great results. Building free alternatives that are full of new experiences and that share knowledge is something you can only do on the web.

What new web technologies are you most excited about?

Right now I’m excited to explore and learn about WebGL, HTML5 and all of the Web APIs that are making the web better.

If you could change one thing about the web, what would it be?

I would change web standards to limit the way applications can be created (for example, prohibiting Flash), to discourage applications that do not use modern technologies. I am totally sure that the web would be better if that changed.

Do you have any advice for other ambitious web developers?

If you can imagine you can create! Let’s do it! There are no limits!

Further reading

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Interview with Sebastian Dorn, winner of the Drag and Drop Dev Derby

Sebastian DornSebastian Dorn won the Drag and Drop Dev Derby with Pete’s Adventure, his wonderful web-based interactive story. Recently, I had the chance to learn more about Seba: his work, his ambitions, and his thoughts on the future of web development.

The interview

How did you become interested in web development?

I think it was around the time I was in middle school. My father read an
IT magazine and since I was at least a little bit interested, I flicked
through it as well. There was a series in it about building web sites
and I thought “I want to try that, building my own site”.

So I built my first frames-using, table-layouted, GIF-plastered web
sites–every atrocity you can imagine and some more–using HTML and
CSS, but without knowing that something like CSS classes existed. Some
time later I found a free host and put my “Hello, this is me” site
online. Some years later I became interested in blogging, so I started
learning PHP and MySQL to write my own CMS.

Can you tell us a little about how Pete’s Adventure works?

My goal was to show some other aspect of Drag&Drop in each level:
Reading meta data like the file size from a dropped file, displaying a
dropped image or dragging an HTML element from inside the page around.
There isn’t really anything special in the code. Each level has its own
JS file with functions to prepare the stage by adding HTML and event

What was your biggest challenge in developing Pete’s Adventure?

Not really anything that had to do with coding. At first, I wanted to
use better drawings. But some horribly misshapen Petes later I gave up
on that and went ahead with the pixelated look you can see now.

Then there is the sound and music. I probably sat two hours at the piano
keyboard, trying to come up with melodies which could be easily looped.
This was the first time since the recorder lessons in middle school that
I tried to compose.

Ah, well, I got a little… agitated while trying to get the drop part of
Drag&Drop to work for the level where you drag the slimey note to Pete.
It only works in Firefox when you give the dragged element some transfer
data, for example an empty string.

What makes the web an exciting platform for you?

How easy it is to create and share. Even without a server backend you
can build exciting demos in HTML/CSS/JS and then just upload it
somewhere, toss a friend the link and they can see it. To view it, other
people only need an up-to-date browser–no plugins, no worrying about
OS compatibility.

What new web technologies are you most excited about?

Basically everything that helps making plugins obsolete.

I wonder if there will be more 3D in-browser rendering with WebGL in the
future. Animated, interactive films? Games? CAD software?

Firefox OS and building apps only with JavaScript sounds interesting,
too. I’m not really that much into mobile development at the moment, but
I’m interested in how that will develop. Will it become a really good
alternative to iOS/Android? Or will it end as obscure toy for enthusiasts?

If you could change one thing about the web, what would it be?

Making the Internet immune to large scale blocking and censoring. No
government should be able to cut off the communication channels of its

On a less political note: I would be very pleased to see the same audio,
video and image formats supported in every browser. Finding out that
WebKit doesn’t support APNG was as a surprise for me.

Do you have any advice for other ambitious web developers?

Learning a new language or feature thereof works better, if you put some
motivation behind it. Maybe you can build an useful browser extension
with it, or some fascinating demo to show off. Make it fun!

For other great advice I’d like to quote Jake from Adventure Time:
“Sucking at something is the first step to becoming sorta good at

Further reading

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Interview with Parashuram Narasimhan, winner of the Offline Dev Derby

Parashuram Narasimhan won the Offline Dev Derby with The conference, his web utility for beating unreliable conference connectivity. Recently, I had the chance to learn more about Parashuram: his work, his ambitions, and his thoughts on the future of web development.

The interview

How did you become interested in web development?

Like most computer science majors, I started with systems programming. However, during the early days of Firefox, I used to play around with Venkman (before Firebug) and other Firefox developer tools to take a peek at how web pages were written. The undocumented and nascent web platform got me interested, and I found myself hacking around the limitations of the web platform. That is how I started writing code for the web.

Can you tell us a little about how The conference works?

The conference is a set of static HTML pages that sync data with a remote CORS enabled CouchDB server. The Sync functionality is taken care by PouchDB which implements the Couch synchronization protocol.

With no server side code, all functionality and interactions are handled using on Backbone.js the browser. The static pages are styled using Twitter Bootstrap and are responsive for the mobile too.

What was your biggest challenge in developing The conference?

IndexedDB is not supported by all browsers today. Given the nature of the application, it was important for it to run on mobile devices that are easiest to use between sessions in a conference. Getting WiFi right at conferences is also hard, and the application had to work great with flaky connectivity. I had to use the IndexedDB polyfill to ensure that it runs across all browser, and even on mobile platforms.

What makes the web an exciting platform for you?

The openness of the web is the most exciting part. I just joined Microsoft Open Technologies and I am able to see how the open nature of the web is helping me with a lot of interesting projects at large scale. That combined with the current limitations is a great breeding ground for hackers and tinkerers to show amazing innovation. I like the idea of having to write once, and see it working everywhere. I am glad to see the web flowing out of the browser into systems like B2G and Windows 8.

What new web technologies are you most excited about?

Offline storage has always been my favourite and I would love to see it gain more traction. I am also impressed by the work done on pointer events and the efficiency at which the W3C working group is finalizing the standards. I also follow WebRTC and CSS3.

If you could change one thing about the web, what would it be?

The web seemed to have frozen before the HTML5 revolution. This was the time when native applications seem to become popular. I wish the web platforms had moved as fast, so that app developers considered it an alternative to writing applications for specific platforms. Looks like its getting there though.

Do you have any advice for other ambitious web developers?

In a project, the best code is the code that is not written. With so many web developers working on the web, I usually don’t have to reinvent the wheel and can always reuse someone else’s well tested code. It is good that I am embarrassed about the code I wrote in the past–it just tells me that I maturing as a programmer 😛

Further reading

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Interview with Koen Kivits, winner of the Multi-touch Dev Derby

Koen Kivits won the Multi-touch Dev Derby with TouchCycle, his wonderful TRON-inspired mobile game. Recently, I had the chance to learn more about Koen: his work, his ambitions, and his thoughts on the future of web development.

Koen Kivits

The interview

How did you become interested in web development?

I’ve been creating websites since high school, but I didn’t really get serious about web development until I started working two and a half years ago. I wasn’t specifically hired for web development, but I kind of ended up there. I came in just as our company was launching a major new web based product, which has grown immensely since then. The challenges we faced during this ongoing growth and how we were able to solve them really made me view the web as a serious platform.

Can you tell us a little about how TouchCycle works?

The game itself basically consists of an arena with 2 or more players on it. Each player has a position and a target to which it is moving. As each player moves, it leaves a trail in the arena.

Each segment in a player’s trail is defined as simple linear equation, which makes it really easy to calculate intersections between segments. Collision detection is then done by checking whether a player’s upcoming trail segment intersects with an already existing trail segment.

The arena is drawn on a <canvas> element that is sized to fit the screen when the game starts. The <canvas> has 3 touch event handlers registered to it:

  • touchstart: register nearest unregistered player (if any) to the new touch and set its target
  • touchmove: update the target of the player that is registered to the moving touch
  • touchend: unregister the player

Any touch events on the document itself are cancelled while the game is running in order to prevent any scrolling and zooming.

Everything around the main game (the menus, the notifications, etc.) is just plain HTML. Menu navigation is done with HTML anchors and a hashchange event handler that hides or shows content relevant to the current URL. Note that this means you can use your browser’s back and forward buttons to navigate within the game.

What was your biggest challenge in developing TouchCycle?

Multitouch interaction was completely new to me and I had done very little work with the <canvas> element before, so it took me a while to read up on everything and get to work. I also had to spend some time tweaking the collision detection and the way a player follows your touch in order to not have players crash into their own trails easily.

What makes the web an exciting platform for you?

The openness of the platform, in several ways. Anyone with an internet connection can access the web using any device running a browser. Anyone can publish to the web–there’s no license required, no approval process and no being locked in to a specific vendor. Anyone can open up their browser’s developer tools to see how an app works and even tinker with it. Anyone can even contribute to the standards that make up the very platform itself!

What new web technologies are you most excited about?

I’m probably most excited about WebRTC. It opens up a lot of possibilities for web developers, especially when mobile support increases. For example, just think of how combining WebRTC, the Geolocation API and Device Orientation API would make for an awesome augmented reality app. The possibilities are limitless.

If you could change one thing about the web, what would it be?

I really like how the web is a collaborative effort. A problem of that collaboration, however, is conflicting interests leading to delayed or crippled new standards. A good example is the HTML <video> element, which I think is still not very usable today despite being such a basic feature.

Browser vendors should be allowed some flexibility in the formats they support, but I think it would be a good thing if there was a minimum requirement of supporting at least 1 common open format.

Do you have any advice for other ambitious web developers?

As a developer I think I’ve learnt most from reading other people’s code. If you like a library or web app, it really pays to spend some time analysing its source code. It can be really inspiring to look at how other people solve problems; it can give you pointers on how to structure your own code and it can teach you about technologies you didn’t even know about.

Also, don’t be afraid to read the specification of a standard every now and then to really learn about the technologies you’re using.

Further reading

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Top Winner in Web Design Contest to Compete in WorldSkills

Michael Angel and Go for The Gold at the WorldSkills Web Design Contest

Michael Angel, the gold medal winner of the 2011 U.S. National Web Design Contest will go on to represent the USA in the WorldSkills Competition in Brazil in November and Leipzig, Germany in 2013.

“It’s an honor to be the technical expert trainer and a mentor to Michael,” said Bill Cullifer, Executive Director and Founder for “The WorldSkills competition recognizes the world’s best talents and Michael represents one of the best and the brightest up-and-coming Web professionals. I feel Michael has a strong chance to bring home the gold,” Cullifer said.

In 2011, Michael Angel, a student at the Computer Animation and Web Page Design program at the Center for Technology Essex in Essex Junction, VT captured gold at the SkillsUSA National Web Design competition managed by the membership-supported

image of 2011 web design contest winners

As a result, Angel was selected, along with the other top competitors, in 3,000 occupational specialties to compete in the upcoming WorldSkills International Competitions.

Here are some WorldSkills Competition Fast Facts:

•WorldSkills attracts over 200,000 visitors
•Over 60 countries and regions compete
•More than 1,000 competitors participate
•More than 1,000 media and journalist attend
•Only 1 in 17,000 students will be chosen to compete
•Over 3,000 specialist participate
•Sponsoring organizations invest over $35,000 on each competitor to cover travel, hotel, meals, uniforms and training
•The Web Design Contest was first introduced into WorldSkills at the 37th WorldSkills Competition in St. Gallen, Switzerland in 2003

Cullifer said that Angel has been given competition blueprints for a variety of Web Design projects that competitors are required to build on their own time and submit for judging by a panel of experts. The requirements range from Web accessibility, Graphic Design and Layout, Programming, Process and Professionalism. Angel also will have access to hundreds of hours of extensive training resources.

The Web Design Contests are designed to promote Web standards, industry best practices, professionalism and the elevation of profession, which Cullifer calls “one of the hottest career pathways in the world.”

About WorldSkills

WorldSkills International is a not-for-profit membership association open to agencies or bodies which have a responsibility for promoting vocational education and training in their respective countries or regions. WorldSkills International operates worldwide and is politically and denominationally neutral.

WorldSkills International provides a unique means of exchange and comparison of world-class competency standards in the industrial trades and service sectors of the global economy. The continued growth of WorldSkills International attests to the fact that traditional trade and craft skills along with the newer technology multi-skilled vocations make an essential contribution to the economic and social well-being of people everywhere.

As a free-standing, non-political organization, WorldSkills International provides a cost-effective means for international government and industry cooperation in achieving higher standards and status for vocational education and training on a worldwide basis.

About the National Web Design Conest

Since 2003, the not for profit organization collaboration with SkillsUSA has sponsored the National Web Design Contest taking place in Kansas City, MO in June of each year. The purpose of the Web Design Contest is to evaluate each contestant’s preparation for employment and to recognize outstanding students for excellence and professionalism in the field of Web design, Web development and Webmastering. Key milestones include awarding over a million dollars of education scholarships for participating students. Supporting organizations include, Boston University and Microsoft.


SkillsUSA is a partnership of students, teachers and industry working together to ensure America has a skilled workforce. SkillsUSA helps each student excel.
SkillsUSA’s mission is to help its members become world-class workers, leaders and responsible American citizens.
SkillsUSA serves more than 300,000 students and instructors annually.
The organization has 13,000 school chapters in 54 state and territorial associations.
More than 14,500 instructors and administrators are professional members of SkillsUSA.

Promotional Video

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Interview: Paul Brunt, WebGL Dev Derby winner

Paul Brunt won the WebGL Dev Derby with SnappyTree, his incredibly powerful (and even a little addicting) 3D tree designer. SnappyTree provides a wonderful example of what we can do with the Web today — it even has an export function for using your trees in native applications (move over Blender), not that we will need native 3D applications if progress like this continues.

Recently, I had the opportunity to learn more about Paul and his work. In our interview, Paul shared thoughts on the past, present, and future of web development and gave advice relevant to developers of all levels of experience.

The Interview

How did you become interested in web development?

I first became interested in web development in the late 90′s when I went on the internet for the first time. After a little bit of browsing around the web I thought I’d have a go at making a site myself. With the free space provided by the ISP and with a little assistance from Frontpage I managed to put together something you might tentatively call a website. Unfortunately that first site was short lived, the result of an accidental deletion. But, the seed had been planted so I built another, then another, then somewhere along the way I ended up doing it for a living.

Tell us about developing SnappyTree. Was anything especially exciting, challenging, or rewarding?

It had taken a few days of coding before I was in the position to start drawing anything to the screen. So, the most exciting part was seeing something that resembled a tree appear in the browser for the first time; although it wasn’t much to look at, and there were very obviously issues.

Getting skinning working correctly was extremely challenging; there where many horrible branch twisted iterations while trying to get it right, but I’m pretty happy with the end result.

Can you tell us a little about how SnappyTree works?

Snappy Tree works by taking an initial branch (the trunk) which then splits into two new branches. The direction of these new branches is determined by several user configurable factors symmetry, droopyness, etc. This process is repeated N times to produce the basic tree structure.

After the basic tree has been constructed a skin in generated around the branches before finally adding planes at the ends of the branches which are used for leaves and twigs. The final mesh data is then piped into Webgl for rendering and used to generate the collada or wavefront files for export.

What makes the web an exciting platform for you?

Increasingly it seems to be getting quicker and easier to develop for the web than any native platform, so I think the current rate of progress is the most exciting part. With so many new technologies emerging seeing how developers use them is always fun and often downright awe inspiring.

What up-and-coming web technologies are you most excited about?

I think the most exciting thing emerging right now is WebRTC. I’m really looking forward to seeing what uses developers can come up with. I can see a lot of potential outside of the obvious and it’s going the be a lot of fun discovering interesting uses for it.

If you could change one thing about the web, what would it be?

There are lots of little things I’d love to tweak in CSS and HTML; but, if it’s limited to just one thing I think I would change the “www.” convention. It’s difficult to pronounce, takes far too long to say and just sounds horrible.

What advice would you give to aspiring web developers?

Jump in the deep end and be ambitious. The best way to learn a new technology is to start a project around that technology. Even if you haven’t got a clue what you’re doing when you start you certainly will by the end.

Further Reading

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Interview: Ond?ej Žára, Websockets Dev Derby winner

Ond?ej Žára achieved a first in the Websockets Dev Derby this past May. In one month, he won three spots in the top five: a finalist spot for Collaborative Draw, third place for Atoms, and first place for Just Spaceships!.

I recently had the chance to learn more about Ondras, his work, and his thoughts on the future of web development. In our interview, he shared insight that should be interesting to new web developers and veterans alike.

Tell us about developing your winning demos. Was anything especially exciting, challenging, or rewarding?

I have submitted quite a number of projects to Mozilla Demo Studio, but the most critically acclaimed were related to WebSocket technology. Writing WebSocket demos was truly challenging, as the Mozilla Demo Studio site is hosted at HTTPS, which means that (at least in Firefox) the WebSocket backend must communicate via WSS. Therefore, in order to publish a working demo, I had to completely add TLS support to my TeaJS-based server.
Generally speaking, this was very beneficial: implementing TLS capabilities to TeaJS resulted in a new release with exciting features 🙂

How did you get interested in web development?

I experimented with new and interesting web technologies from my early age: first with VRML, later with JavaScript. One of my hobby projects, the WWW SQL Designer, was highly praised by many users: that convinced me that I should indeed focus on Web/JS development.

What makes the web an exciting platform for you?

The complete and immediate availability; in every computer, every OS, every sufficiently advanced mobile device. Web browser is one of the most sophisticated and optimized piece of software today; most of the interesting stuff in IT is related to the Web.

What up-and-coming web technologies are you most excited about?

I watch the new ECMA stuff with interest; the Dart language also looks very promising – mostly because of a much better DOM. When is Mozilla going to add Dart bindings to Firefox?

The Boot to Gecko project is also something to look at; along with Emscripten and jslinux.

Finally, the very recent E4H proposal looks rather sexy 🙂

If you could change one thing about the web, what would it be?

As a JavaScript person, my answer here is obvious: the HTMLElement should be fully cross-browser prototype extensible. That would be awesome. That would make this world definitely a better place 🙂

What advice would you give to aspiring web developers?

Do not trust what most other people say; try stuff for yourself! Most of the long discussion/support threads on the Web are old and obsolete; the same often applies to articles and news reports.

Also, do not use tools you don’t 100% understand. Avoid working with an external library/toolkit unless you are very familiar with what – and how – it does. To understand stuff, you need to look under the hood.

Is there anything else you would like to share?

I would like to thank Mozilla for the wonderful work it does, including the Firefox browser, Demo Studio website, Hacks weblog and Dev Derby competition 🙂

Further Reading

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Interview: Jay Salvat, Audio Dev Derby winner

Jay SalvatJay Salvat won the Audio Dev Derby with Buzz demo, his wonderful children’s game powered by the open web. Using a JavaScript library that he wrote himself, Jay demonstrated that web audio can be not only useful, but also practical and even engaging.

Recently, I had the opportunity to learn more about Jay: his work, his history, and his thoughts on the future of web development. In our chat, Jay shared insight and advice that should be useful to all web developers, newcomers and veterans alike.

How did you become interested in web development?

I am totally self taught. I come from sales and marketing schools. I quickly realized that I was not done for this life. I tried some stuff, first working for free as designer and then as a layout artist in print press and magazines. At the time internet barely existed.

With the 1997/8 internet big bang, I naturally passed from print design to web design to work in one of the first local web agencies. The agency was sold to a big international company and I then worked on ergonomics and interface designs for key accounts and managed a team of developers on these interfaces.

Seeing them work gave me the taste of development, so I starting to develop some personal projects. My skills as marketing guy, designer, developer allowed me to get some interesting results by myself.

Tell us about developing your Buzz demo. Was anything especially exciting, challenging, or rewarding?

The idea behind the Buzz library was to allow developers to creatively manage sounds on their websites. My fear was to see Buzz used to add sounds on button clicks or some unbearable music background loops. Everything I hate as a user.

I wanted to be clear and create a demo to show my vision of how sounds should be used on the web in 2012. This educational HTML5 game is inspired by games used by my 5 year old daughter on iPad.

What makes the web an exciting platform for you?

What is interesting is being able to quickly test ideas, share them with the world and see them used, improved, distributed and discussed by others. It’s invaluable to get hundreds of comments worldwide. It taught me a lot.

What up-and-coming web technologies are you most excited about?

HTML5/CSS3/JavaScript are really exiting and now make everything possible in a browser. I’m really interested by node.js as well allowing full JavaScript client/server side applications.

If you could change one thing about the web, what would it be?

Clearly, cross-browser compatibility (I’m looking at you Internet Explorer). It is very frustrating to work a few weeks on ideas, to finally get the desired result and then move to the testing phase on different browsers to see that everything is skewed or unusable. This is what happened to me on the markitup! 2.0 development, which I have never actually found the energy and time to correct.

I dream to not worry about vendors prefixes, hacks and ridiculous compatibility barriers.

What advice would you give to aspiring web developers?

Be curious, be a sharer. Whenever possible do not hesitate to expose your work as open source projects. This is a great challenge to make your code public and have it judged by peers. It’s exciting and rewarding.

Further reading

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)