Category Archives: Code

Introduction to Web and Information Design

By Matt | Published: August 25, 2015

I just finished teaching a course on the fundamentals of web and general information design. We focused on the principles of user experience, visual fundamentals such as gestalt principles and introduced the students to the wonderful world of frontend web design. Find out more here: http://mattlockyer.github.io/iat235/

Posted in Code | Leave a comment

Mobile Web Application Design and Development

By Matt | Published: April 25, 2015

Recently I taught a course on mobile applications using modern web technologies. We covered topics such as: touch, accelerometer, location, audio, viewport, angular js, react js and more, all using HTML CSS and JS. Check it out here: http://mattlockyer.github.io/iat381/

Posted in Code | Leave a comment

Audio and Visual Signal Processing in JavaScript

By Matt | Published: December 15, 2014

I recently taught a course in audio and visual programming and decided to use Javascript as the language. We explored the canvas, transformations, pixel manipulations, filters, kernels, the web audio api, pass filters and more. Take a look here: https://github.com/mattlockyer/iat455

Posted in Code | Leave a comment

Center image vertically and horizontally, CSS and jQuery a.k.a. image lightbox

By Matt | Published: January 20, 2014

In my opinion you should use libraries rather than role your own solution, but I came across this Stackoverflow question and couldn’t resist rolling my own lightweight, lightbox implementation. Here is a link and to my jsFiddle where the magic happens. Check out the results:

Posted in Code | Leave a comment

Playground – Multiplayer, Collaborative, Visual Experience for Mobile

By Matt | Published: June 5, 2013

Recently I was asked to join Tangible Interaction in developing a Chrome Experiment that used WebRTC, an emerging web technology that enables P2P browser interaction (tabs talking to other tabs), without sending the data over the server. We developed Playground, which enables 5 friends in close proximity (100m) to join a “room” where each player […]

Also posted in Works | Leave a comment

Code Tabs: Online HTML, JS, CSS, and Processing Editor with TABS

By Matt | Published: May 6, 2013

I’ve released an early stage version of my online editor for html, js, css, and processing called “Code Tabs” today. One thing missing from a lot of online editors is the ability to create custom tabs, a pretty essential feature for any project with more than a couple of hundred lines of code. I’ll be […]

Also posted in Works, News, Processing | Leave a comment

Code Tabs Preview

By Matt | Published: April 22, 2013

Simple HTML, CSS, JS, and Processing editor, with TABS! Features: TABS! No other online editor has them! Code hinting (autocomplete suggestions) for above languages Syntax highlighting (obvies…) Selection match highlighting Brace match highlighting Brace / Tag completion Brace / Tag folding Import and use any Javascript library (image ex: three.js) Import or Drag and Drop images […]

Also posted in Works, News, Processing | Leave a comment

Close a Twitter Bootstrap Popover when Clicking Outside

By Matt | Published: April 8, 2013

A vexing topic for me and a bunch of other people on stackoverflow, the problem being that Twitter Bootstrap Popovers don’t close when you click outside to anywhere else on the document. This might not be your desired outcome, simply: when clicking outside a popover, wouldn’t you want it to close? The code below makes […]

Also posted in Bootstrap | 4 Responses

Twitter Bootstrap Carousel Full Markup Example

By Matt | Published: April 8, 2013

I really like Twitter Bootstrap but I’ve noticed that their example page only shows minimal markup for some of the more exciting features, leaving out little details like the “carousel-caption” class that I had to use view source to find. If you were looking for how they do their clever captions at the bottom of […]

Also posted in Bootstrap | Leave a comment

HTML5 Canvas API, Paper.js, Raphael.js, Processing.js: Performance, Benchmarks and a New Trick

By Matt | Published: April 7, 2013

An original benchmark posted here showed that Processing.js was lagging by 68-68% behind native Canvas API calls performing essentially the same thing. I was curious where the bottleneck for Processing.js was in the original test so I exposed the processing canvas context to the sketch itself in the head of the document. Then I simply […]

Also posted in Processing | Leave a comment