Follow the Cursor Arrows in Javascript

Matt came up with a really interesting visual idea where arrows follow the cursor. He found this codepen example which was pretty close to what he envisioned (only with pill shapes). The problem was that this version used Babel, jQuery, and Underscore. That’s good if you know all those pieces but less good if you don’t. I don’t. Could I do this with just plain javascript? Make the Boxes First, I didn’t want to cut and paste a whole bunch of divs (or use pug) so I figured javascript should make them. Since I think I’m funny my arrow boxes are in the arrow class and the div they’re inserted before has the id quiver. I’m making 300 boxes in this example and the CSS sets the arrows as background images. Watch the Cursor This bit watches the body element for the mouse move. The cursorFinder piece gets the X and Y coordinates of the mouse. In this case, we’re also spitting it out at the bottom of the page so we can see what’s going on. It’s pretty much from the W3 example. Now that we can see where the mouse is we need to tilt the divs based on where they are and where the mouse is. Tilting the Divs First, we have to get all the arrow […]


WordPress Timeline JS Plugin

Background I like Timeline JS. It’s a nice way to create multimedia timelines. I’d previously done some work that would take WordPress JSON API data and insert it into the Timeline JS view.1 It was nice for creating alternate and standardized views of blogs that might be useful for different reasons. It didn’t serve some other needs and while doing it through a generic URL was handy for many reasons it was odd in other scenarios. As a result I decided to make a new version as a plugin. If you don’t like reading stuff there’s a quick video of how it works below. Plugin Goals First, I wanted this to be a plugin rather than a theme. That adds a bit of complexity because you don’t have control of the whole scenario but it makes it much more portable and more likely to be used as it doesn’t require people to change themes or spin up an additional site. I wanted people to be able to use WordPress rather than a spreadsheet to create the content for Timeline JS. Doing that has a few advantages- the WYSIWYG editor, the ability to upload images directly in WordPress, the ability to use posts you’ve already written, etc. etc. I also wanted people to be able to choose what posts ended up […]

A drawing of a small terrier dog jumping through a hoop held by a monkey.

Code as Poetry, Time as a Variable – Options in the Ether

Backstory Driving into work I was listening to NPR and they were interviewing Nikki Giovani a poet from Virginia Tech. In high school I was one of those people who really suffered reading the The Red Wheelbarrow and other non-rhyming poems. They irritated me in the same way people seem to be annoyed by White Paintings or 4’33”. In any case, in college I took lots of English classes. One of those classes was on poetry with Donna Hickey. The class selection was driven more by fitting my schedule and a vague notion that I might minor in English rather than any real interest in poetry. The first day of class she had everyone list their favorite poets. I don’t recall what people chose but I remember feeling like my choices of Shel Silverstein and Dr. Suess was not of the same category. In any case, I had a great deal of fun with the course and using poems as games and puzzles to think around and through. I later took a graduate course with Dr. Hickey1 in poetry and made my first digital liberal arts website around 2001 or 2002. It focused on breaking down various Richard Hugo poems and creating attempts at multimedia experiences.2 That stuff is all long gone from the UR website. I might have backup […]


RVArts.org Version II

Lots of remakes going on lately. That’s good in that it means people still want to work with me (now our group) after doing it once and secondly they’re seeing things to change and improve which is how things get better. The harder part to figure out is that in you never really finish anything so you have to keep that partial snowball effect in mind as you figure out how much work you can take on. Or I suggest you do. I at least pretend I do but really if it’s cool and interesting enough I just say yes.1 So anyway, the old RVArts site was decent but it was an early work in terms of my capacity as someone who makes websites.2 This remake is a mix of technical and visual changes. Technically . . . This remake is about harvesting the content students create in a Facebook group and then using it with different material students create in WordPress. Right now the data is pulled from the Facebook group events into WordPress through the Event Aggregator which ties into Event Calendar Pro. Later in the game we opted to jump events right back to Facebook so we could have skipped all that and just used the FB API but sometimes you find that stuff out too late. […]


ANTH101 v 3.ish

“You cannot think your way into a new way of living. You have to live your way into a new way of thinking.” – Mike Wesch You can’t beat that quote as a way to frame a course and it’s nice to consider how digital content supports that kind of perspective on learning/living. It’s also a key consideration in how I think about building courses like this. You have to do it. You shouldn’t expect to be perfect the first time, or the second, or ever really but if you’re doing it right improving it should be worth the investment. You should get some joy out of the process and it should alleviate things that cause you pain. I’ve had the opportunity to work with Mike Wesch and Ryan Klataske at Kansas State over the last few years1 on the ANTH101 site. It’s been an interesting progression over time as the course has continued to evolve. We’ve gone done a variety of paths and dealt with human and technical issues. It has been interesting to participate in the ongoing co-evolution of aesthetics, mechanics, and content. It’s also a scenario where I wish I’d have done a much better job with screenshots so I could more accurately show you how the site has evolved.2 After an initial meeting at Kansas State […]

Small plastic toy shovel.

The Toy Shovel

The Eyes of A Child flickr photo by -Jeffrey- shared under a Creative Commons (BY-ND) license Once upon a time there was a young human who loved the beach. She had a toy shovel that she used at the beach all the time. She used that shovel to dig holes and make sand castles. Many fond days at the beach were spent with that shovel. This young human also had a dog. The dog did what dogs do. Her responsibility was to clean up the dog doo when the dog was done. She disliked this task intensely and would often complain about it. “Eureka!”1 exclaimed her parental unit one day. “Our daughter loves her beach shovel! Let’s have her use that shovel to clean up the dog mess instead of using the big metal shovel.” After a few sessions where she was required to use her beach shovel to clean up after the dog her parental unit asked “Isn’t cleaning up after the dog so much fun now? You get to do it with that shovel you love so much.” As you might guess, the daughter did not enjoy the shift. The beach shovel did not make cleaning up dog poo more pleasant. It actually made things worse. It was a poor fit for the unpleasant task compared to the […]


YouTube Full Screen Player Page from Playlist

The request was that we do something interesting with the random screens we have scattered around our area. It seemed like it’d be easy to make a little full-page player for a YouTube playlist with some lightweight overlays to emphasize the connection with our department. Handling the videos displayed via a playlist makes it easy to add/remove content and the making the logo overlays part of the webpage let us keep things consistent across videos we didn’t control. Since we weren’t activating sound by default turning on captions by default was also a key need. The codepen example is here. The HTML is dead simple. We’ve got a wrapper div which lets us make it full screen, an ytplayer div for the videos, and two divs to do the logos. The javascript is pretty much a cut/paste from the YouTube API docs. There are a few changes to reference the playlist instead of a single video and some stuff around closed captions and that’s noted below. The main tweak here is to get the fullscreen video to behave. I use this pattern from CSS tricks. The other stuff just staples some divs over the lower corners to show the logos.


Will Blackboard Eat It?

I have1 a number of preconceptions about ol’ Blackboard . . . I figured, like Mikey, Bb wouldn’t eat anything2 and I enviously watched Keegan and others play in the Eden that is Canvas. I decide the other day that I needed to just pry at the edges of Bb and see what I could do. It turns out, there is a whole lot of stuff you can do. I’m not saying it’s necessarily ready for basic faculty use but there are some huge doors we can open up given what’s available. All the following examples were done by going to Build Content>Blank Page then clicking the view HTML button and pasting stuff in. iFrames It seems like I can iframe in anything I want. That really surprised me so I started to see what I might embed. I tested initially on expected things like Google docs and charts — that stuff worked well. But could I do a Google Drive folder like I do in WordPress? Yes. Could I do something a bit less typical like awesome table? Yep . . . Rampages? Yes . . . So I’m pretty sure I’m close to unlimited in what I can iframe in. Jeff has already started roughing out some iframe widgets for Blackboard that meet particular faculty requests. Scripts and […]

website screenshot indicating blue div blocking access to central portion of embedded website

reveal js tweak for iframe backgrounds

*********UPDATE********* The stuff below sort of works, but since there’s only one parent element for all sections it won’t let you click on links later on. That’s no good. It’s also kind of weird to go from interacting with the iframe page to get back into the slideshow navigation (partially because I hid the navigation buttons). So . . . I went this route instead. The following code toggles the slide overlay. I set it up as a button at the top of my slides. It’s full width and black so not obtrusive. Click it lets me fully interact with the iframe page and clicking it again reactivates keyboard navigation for the slide deck. *********END UPDATE********* I’m a fan of reveal.js and have been using it to build all of my recent presentations. It feels like it fits what I do really well. The fact that it’s just a website that behaves a certain way means I can do all kinds of fun things that blend both the web-based examples and my ability to annotate and manipulate the web itself.1 There’s also quite a bit of beauty in tools that continue to offer more opportunities to grow as you learn. Anyway . . . One common action in my presentations is to embed a live website as a full size […]

Event Calendar & Participation

One pretty common need I’m starting to see around community-engaged learning is a way for students/faculty to submit events to a central calendar and then indicate their participation in various events. That comes with various program requirements. People want specific reflection patterns per event and have different ideas around what an event counts for in their program. That comes with additional metadata requirements, dashboard views etc. We did something like this with cultural events when we made the RVArts.org site.1 I’ve got at least three programs interested in this process and some are pursuing products like Give Pulse. So I took advantage of the request from the da Vinci Center to look at how quickly we could make a functional prototype that would – create a calendar of upcoming approved events for students allow students to submit reflections on those events with a particular structure allow students to submit additional events for approval generate data visualization and reporting for student reflection and for program analysis purposes I took the more difficult route and assumed we’d have no user accounts just to see what that felt like. With user accounts this become easier. Even with this restriction I was able to build out a functional custom theme in around three hours. Next time, it’d be considerably faster. We could easily bring […]