Jeff did a nice intro to HTML/CSS course today and made a chunk of solid CodePen resources. I did one small example but I got to the scoped contenteditable something that I’ve been waiting to use since I saw it come up a few weeks1 Anyway, new to me. What it lets you do is edit the css in your page live without using the inspector or anything else. It’s harder to explain than it is to see in the gif2 below. The reason this gets my interest is that it is in the realm of an explorable explanation where you get the chance to play alongside the direct instruction. Here’s a quick demo in CodePen. See the Pen ID HTML: Display by Tom (@twwoodward) on CodePen. 1 Months? Who knows? Time . . . and turns out it’s ancient history (2011! at least). 2 You thought I’d be guiding your pronunciation of this word here didn’t you? Wrong. I do not care.

We have more and more people building things in Top Hat. Top Hat has some useful features (and a very aggressive sales team) but it’s not a place that makes it easy to get your content out. I am working with some of our biology faculty who have gotten an Open Stax textbook in there but want to put their now edited version someplace that is not Top Hat. The following bookmarklet will select the Top Hat content into a format that lets you cut/paste it into an HTML editor. You can see some of the issues with typical awkward paths for trying to get content out in the video. It’ll also show you how to add a bookmarklet if you’re looking for that.

I’m co-teaching a class this semester on digital photography with John Freyer. It’s aimed at undergraduate non-art majors and it’s blended. There will be lots of field trips and a chunk of online work. There is no particular camera required. Many of the students will be using phones but some have DSLRs. I’m building the companion site as we go but you can see it at http://photographyismagic.com/ and the work is out there on instagram under #phomag and the various challenge hashtags (#phomag_eat and #phomag_hunt so far). The work aggregates to challenge pages where the challenge is described. This is the #phomag_eats page. In the week one post, I make an attempt to show some of the value I find in online photography communities and at least sketch out a bit of the diversity you can find there. I highlight Flickr, Wikipedia, and National Geographic’s Your Shot. With Flickr, I do a bit better job showing how the data provided by their interface might help you figure out technical things about your camera and the photos you want to shoot. I’ve always found Flickr’s ability to make exif data public to be a really nice feature that may be passed over if you’re not looking for it. It’s been an educational resource for me as I moved from automatic settings […]

We have a bunch of world language professors prying at the edges of Pressbooks. One of the requests yesterday was to be able to create a mini-dictionary of target language words at the beginning of sections written in that target language. Mousing over the words would show their English equivalent. The intent is to have ready assistance for those who need it so that writing in the target language can happen earlier in the course. ACF came to mind pretty quickly for this case. I really just needed the ability to generate two values that are paired together- the target language word and the English definition. I need to be able to make as many of these pairs as the person wants to put in there. That’s custom made for the ACF repeater field. Now that I had an easy way for people to add the words, I just needed a way to do the tooltip display. There are 12,000 ways to do this but I just looked around for one that bragged on its accessibility. I found this example on codepen and went with it. This bit of php builds that content. Now that we have the the content and way to handle the tooltip piece, I needed to stick it at the top of the posts. That’s just […]

I have been doing little other than semi-real web development for three weeks across a number of projects. It’s a level of sustained practice/work that I’ve probably never done before. Who knew that kind of focus could actually result in fairly dramatic improvement? One of the projects is the reconstruction of our ALT Lab department page and I have had the chance to really do some stuff that I’ve been considering for several years. There’s a lot going on in the site but I’ll focus on one little concept/workflow for the moment. We have two goals in this case. We want a browsable catalog of workshops we offer that can be shared with people so they can request them.1 We need a calendar of events. Those events will include workshops that are presented at a particular date. We use Events Calendar Pro for this and are very happy with it. Workshops – The Post Type Step one was to create a custom post type called ‘workshop’ and then assign some custom fields to it with ACF. That keeps the content fairly consistent in look/feel and gives us enough standardization to do other tricks. We ended up with a custom post interface that looks like the gif2 below. You can see the ability to add learning objectives, examples, audience etc. in […]

John Stewart asked if I had any easy ways to allow users to highlight some text and push that highlighted text to a form. I didn’t but that sounded like something useful in a variety of scenarios so I sketched out a working demo in Codepen which you can see below. It can push the content directly to a form field on the page but I also built a link that would populate to include the highlighted text as a URL parameter and grab the page URL as well. Like most things I make, it’s the result of some Stack Overflow responses being hit several times with a hammer. It’s decently commented up but is not the most optimized of code. This type of construction usually results in new ideas being incorporated on the fly and that makes for ugly code. I am ok with that as this prototype took about 15 minutes to create. We can polish things up if/when we have a more direct audience/intent. Until then, it’s a functional prototype which can be used to get faculty seeing possibilities. See the Pen highlight to field by Tom (@twwoodward) on CodePen.

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 […]