24

Accessible ACF-Based Tooltip Dictionary

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

Will Wonka asking you to tell him again what WordPress can't do.

Workshop to Event Workflow in WordPress

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

15

Javascript Highlighter to Form (or whatever)

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.

13

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