Skip to content

Instantly share code, notes, and snippets.

View webapprentice's full-sized avatar

Web Apprentice webapprentice

4 followers · 0 following
View GitHub Profile
@webapprentice
webapprentice / tutorial_33_example_1.html
Created December 23, 2013 21:23
<canvas id="canvas" width="800" height="256" ></canvas>
<p id="controls">
<input type="button" id="start_button" value="Start">
&nbsp; &nbsp;
<input type="button" id="stop_button" value="Stop">
</p>
<!-- ----------------------------------------------------- -->
@webapprentice
webapprentice / tutorial_32_example_1.html
Last active May 19, 2017 00:50
<canvas id="canvas" width="800" height="256" ></canvas>
<p id="controls">
<input type="button" id="start_button" value="Start">
&nbsp; &nbsp;
<input type="button" id="stop_button" value="Stop">
</p>
<!-- ----------------------------------------------------- -->
@webapprentice
webapprentice / tutorial_31_example_1.html
Last active May 19, 2017 00:50
<canvas id="canvas" width="512" height="256" ></canvas>
<p id="controls">
<input type="button" id="start_button" value="Start">
&nbsp; &nbsp;
<input type="button" id="stop_button" value="Stop">
</p>
<!-- ----------------------------------------------------- -->
@webapprentice
webapprentice / tutorial_30_example_1.html
Last active November 21, 2023 08:04
Simple example of Web Audio analysis and visualization
<canvas id="canvas" width="512" height="256" ></canvas>
<p id="controls">
<input type="button" id="start_button" value="Start">
&nbsp; &nbsp;
<input type="button" id="stop_button" value="Stop">
</p>
<!-- ----------------------------------------------------- -->
@webapprentice
webapprentice / tutorial_29_example_1.html
Last active December 30, 2015 10:09
Implement a CSS/JavaScript Magnifying Glass using code from TheCodePlayer (http://thecodeplayer.com/)
<!-- Code is derived from http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3 by TheCodePlayer -->
<p style='text-align: center'>The image used was taken by the NASA Cassini spacecraft and shows the moon
<a href="http://www.nasa.gov/mission_pages/cassini/multimedia/pia12568.html">Mimas of planet Saturn</a>
</p>
<br>
<div id="container">
<!-- This is the magnifying glass which will contain the original/large version as a background image -->
<div class="magnifier"></div>
@webapprentice
webapprentice / tutorial_28_example_3.kml
Created December 3, 2013 22:47
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document><Folder><name>OGRGeoJSON</name>
<Placemark>
<name>Seattle Space Needle</name>
<Point><coordinates>-122.3491667,47.6202333</coordinates></Point>
</Placemark>
<Placemark>
<name>Set of Lines</name>
<Style><LineStyle><color>ff0000ff</color></LineStyle><PolyStyle><fill>0</fill></PolyStyle></Style>
@webapprentice
webapprentice / tutorial_28_example_2.geojson
Last active December 30, 2015 04:29
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@webapprentice
webapprentice / tutorial_28_example_1.geojson
Created December 3, 2013 01:12
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@webapprentice
webapprentice / tutorial_27_example_1.html
Last active December 29, 2015 11:59
Simple example of using spin.js (http://fgnass.github.io/spin.js) from Felix Gnass
<style>
.spinner {
position: fixed;
top: 50%;
left: 50%;
}
</style>
<script src="/javascripts/spin.js"></script>
<script>
@webapprentice
webapprentice / tutorial_26_example_1.erb
Last active December 29, 2015 08:49
<!-- depends on gems: sinatra/rack and useragent -->
<style>
th {
white-space: nowrap;
text-align: left;
vertical-align: baseline;
font-weight: normal;
color: darkred;
}