Choc is a tool for thinking powerful thoughts by stepping through code. It is an implementation of several ideas found in Bret Victor’s Learnable Programming. Bret Victor’s Learnable Programming was an eye-opener. This tool is the JavaScript execution of that eye-opener Choc →
Tag Archives: javascript
Magnific Popup
Image masking using canvas
All you need to do is add the canvasmask.js script and add a class of mask to each image you want to mask. You also need to provide a PNG file as the mask using the data-mask attribute. <img src="red-panda.jpg" alt="Red panda" class="mask" data-mask="centerblur.png"> Canvas Masking Demo → Canvas Masking Source →
Photoshop Google Maps Tile Cutter Script Update
It’s been 1.5 years already since I created PS_BRAMUS.GoogleMapsTileCutter, a Photoshop Script which automatically chops up a large image into tiles for use with Google Maps. Today a huge update was released. Sparked by an initial pull request by Nick Springer, PS_BRAMUS.GoogleMapsTileCutter now sports a UI dialog in which you can set the options before …
Continue reading “Photoshop Google Maps Tile Cutter Script Update”
Responsive Elements
FlowType.JS
Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size—and subsequently the line-height—based on a specific element’s width. This allows for a perfect character count per line at any screen width. …
Annyang — Control your site using voice commands
<script type="text/javascript" src="annyang.min.js"></script> <script type="text/javascript"> if (annyang) { // Let’s define our first command. First the text we expect, and then the function it should call var commands = { ‘show tps report’: function() { $(‘#tpsreport’).animate({bottom: ‘-100px’}); } }; // Initialize annyang with our commands annyang.init(commands); // Start listening. You can call this here, or …
Continue reading “Annyang — Control your site using voice commands”
NProgress.js
SlimerJS — A scriptable browser for Web developers
SlimerJS allows you to interact with a web page through an external JS script. It is useful to do functional tests, page automation, network monitoring, screen capture, etc. webpage .open(url) // loads a page .then(function(){ // executed after loading // store a screenshot of the page webpage.viewportSize = { width:650, height:320 }; webpage.render(‘page.png’, {onlyViewport:true}); // …
Continue reading “SlimerJS — A scriptable browser for Web developers”