Starbeamrainbowlabs

Stardust
Blog


Archive

Mailing List Articles Atom Feed Comments Atom Feed Twitter

Tag Cloud

3d account algorithms announcement archives arduino artificial intelligence assembly async audio bash batch blog bookmarklet booting c sharp c++ challenge chrome os code codepen coding conundrums coding conundrums evolved command line compiling css dailyprogrammer debugging demystification distributed computing downtime embedded systems encryption es6 features event experiment external first impressions future game github github gist graphics hardware meetup holiday html html5 html5 canvas interfaces internet io.js jabber javascript js bin labs learning library linux low level lua maintenance network networking node.js operating systems performance photos php pixelbot portable privacy programming problems project projects prolog protocol pseudo 3d python reddit reference release releases resource review rust secrets security series list server servers software sorting source code control svg technical terminal textures three thing game three.js tool tutorial twitter ubuntu university update upgrade version control visual web website windows windows 10 xmpp

Test your next web based idea with RawGit

All too often I find myself wanting to test something web based quickly without starting a local web server (this is how my procedural castle generator started for example).

While a quick Github Gist or a Github Repository would be a great place to host things like this Github serves your code with the mime type text/plain, and the X-Content-Type-Options: nosniff header. Without the extra header your browser will inspect the content that is being sent by the server and automatically determine the actual content type - but the above header disables this functionality, rendering both Github Gist and a Github Repository useless for anything other than sharing code.

Thankfully all is not lost. Some time ago ago I discovered RawGit. RawGit is a service that lets you enter the raw view url of either a Github gist or a file in a Github repository, and it will serve it with the correct content type, allowing you to use gist and Github repositories to house your latest and greatest experiment.

It has a different url for development and production use, too. The development url doesn't cache anything and updates instantly, whereas the production url is cached indefinitely and is delivered via a CDN (content delivery network).

Because different files in the same folder or gist generate a similar url, you can include them in your HTML page in the same way as if you were doing it locally:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>Test page</title>
    </head>
    <body>
        <p>Page content here</p>

        <!---------------->
        <script src="tomatoes.js"></script>
    </head>
</html>

Find treasure with sound

The Audio Treasure hunter

Hello again!

Today I have a small minigame to show you. There is some treasure hidden in your browser window, so naturally it is your job to find it. Make sure your sound is turned on and then press <space> to hear where the treasure is. Then click somewhere on the page and listen to the sound that each location makes. Try and match the sound you hear from clicking with the sound you hear when pressing space.

Link: Audio Treasure Hunter

The sound that is made consists of two tones. The first one is tied to the horizontal position of your cursor. The left side has a low sound, and the right side has a high sound. The second tone is tied to the vertical position of your cursor. As you would expect, the bottom of your screen has a low sound and the top, a high sound.

If your are finding it too easy or hard, your can cycle through the different modes by pressing <m>. The harder modes decrease the time between the two tones and reduce the size of the treasure.

I can do it in ~3-4 clicks if I try hard enough. What is your best?

Art by Mythdael