Skip to content

Instantly share code, notes, and snippets.

View webapprentice's full-sized avatar

Web Apprentice webapprentice

View GitHub Profile
@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>
<!-- ----------------------------------------------------- -->
<div id="transcript">&nbsp;</div>
<br>
<div id="instructions">&nbsp;</div>
<div id="controls">
<button id="start_button">Click to Start</button>
</div>
<style>
<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>
<!-- ----------------------------------------------------- -->
<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>
<!-- ----------------------------------------------------- -->
<div id="map_canvas"></div>
<style>
#map_canvas {
margin-left: auto;
margin-right: auto;
padding: 0;
width: 600px;
height: 400px;
}
@webapprentice
webapprentice / tutorial_16_example_1.html
Created November 12, 2013 20:43
Translate your Site with the Google Website Translator
<meta name="google-translate-customization" content="64be6db56529e461-bedaae94d1d3034d-g1586aeda755216da-1d"></meta>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js" data-pin-hover="true"></script>
<img src="/assets/slideshow_3.png" alt="Bronze mice by the Old Bridge in Heidelberg" width="300px" />
<p><a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fweb-apprentice-demo.craic.com%2Ftutorials%3Ftutorial%3D43%26demo%3D1&media=http%3A%2F%2Fweb-apprentice-demo.craic.com%2Fassets%2Fslideshow_3.png&description=Web%20Apprentice%20Demo%20%2346%20-%20Embed%20Pinterest%20Buttons" data-pin-do="buttonPin" data-pin-config="none">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
Bronze mice by the Old Bridge in Heidelberg
</p>
<img src="/assets/slideshow_1.png" alt="Heidelberg Saturday Market" width="300px"/>
<p>Heidelberg Saturday Market</p>
<form action="/tutorial_45_demo_1" method="post">
<p>
Name: <input type="text" name="name" size="40">
</p>
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=YOUR_RECAPTCHA_PUBLIC_KEY_GOES_HERE">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=YOUR_RECAPTCHA_PUBLIC_KEY_GOES_HERE"
height="300" width="500" frameborder="0"></iframe><br>
<style type="text/css" media="screen">
textarea {
display: block;
margin: auto;
width: 600px;
height: 5px;
}
#editor_div {
display: block;
margin: auto;
<script src="/javascripts/ckeditor/ckeditor.js"></script>
<form action="/tutorial_43_demo_1" method="post">
<textarea class="ckeditor" rows="5" cols="40" name="editor"><%= @text %></textarea>
<br>
<input type="submit" value="Submit">
</form>
<hr>
<p>Raw text sent to the server:</p>