Super Mario jumping endlessly to create bit coins.

Duplicate Featured Image Remover

Origin Story In a number of scenarios we’ve used plugins to use the first image in the post as the featured image. That’s nice in that if people forget or are unaware of the featured image it’ll happen automatically and that fits in nicely with how various themes use featured images in various layouts. Where it doesn’t work as nicely is when the featured image is shown in a way that feels duplicative in the single post view. Something like below. I was reminded of one way to solve this after reading Alan’s post yesterday. I’m also trying to do a better job of blogging more1, commenting more, and linking back to posts.2 Who knows maybe people will start believing in RSS readers again? Function For this example I just grabbed the HTML from the base Understrap template and set a featured image and put it in the post body as well. The exact nature of the javascript will change depending on how the theme is setup but this is fairly generic stuff and would likely work on a variety of themes. I commented up the few lines involved so you can see what each one does. Here’s the codepen with the whole thing. I’m repeating my pattern of just copying code there to make life easier for sharing examples […]

12

Making an Index Using Javascript

Working with a faculty member we had a rather long page that was originally written in Google Docs. It had many sections that were (mostly) designated by H tags of various denominations. The goal was to and put it on a website quickly build an index of anchor links. I did not wish to do the index portion by hand. With javascript things like this are relatively pleasant. You can see the whole thing in this codepen but I’ll break it down a bit below. First we can get all the H tags with querySelectorAll. I can console.log(headers) and I’ll see a NodeList of all the headers it found. I tend to work console.log all my variables as I go just to make sure it’s really happening the way I think it is. My next move is to add an id to each of these headers so that we can navigate to them via anchor links. with this forEach loop each header will get an id of header-whatever number we’re on in the loop. Now that I have headers that I can link to as anchor links, I need to build the index and put it somewhere. In this case it was easy for me to add a div to the source manually so I did. That will be where […]

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

03

Javascript for Added Accessibility

Imagine you’ve got a legacy WordPress site built using one of those drag/drop themes. Now complicate it by having a chunk of content created by a non-standard javascript-based slider plugin. Continue to imagine you have a very, very short window of time to bring it up to WCAG2.0 accessibility standards.1 Child themes aren’t a viable option because of the complexity and the tools that built this mess don’t even pretend to allow you to address most of the concerns. Enter our good friend javascript. I can now take our empty section elements and give them aria2 labels as Site Improve demands. One of the slider plugins was also attaching the same ID in two places. The weird one was on the HTML tag at the top of the document. That threw errors and was weird but it was also applied via javascript after the page finished loading so it was harder to get at. Awkward but apparently functional. 1 As interpreted by Site Improve . . . and yes it should have been there already but interpretation of WAVE vs Site Improve has some significant differences. 2 I’m pronouncing this like the opera solos but it’s actually stands for Accessible Rich Internet Applications

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

JSON display from spreadsheet

Google Form to Video Display

This is another SPLOT-ish tool that takes videos uploaded through a Google Form and then displays them.1 This particular proof of concept was built in about ten minutes as a result of a conversation with our World Language faculty who are going to be doing student-to-student video work with people from other countries. We’re likely to use Zoom as the platform. It makes recording the video easy and the compression of the video is pretty impressive. Initially I was concerned about file size but between that and seeing that Google allows up to 10GB file uploads via their vanilla forms. The caveat there is that the “file upload option is only available for G Suite customers with a Google Form shared within their organization.” Good enough for our purposes but a bit limited if you wanted to use it more broadly. Form Stuff I opted to auto-log the VCU email address since the file upload required that anyway and only used two other elements- a file upload piece and a single categorical element. You could get much more complex if you had the desire. Just make sure you’ve created a results spreadsheet and published it to the web. The Pieces My form is here. The spreadsheet is here.NOTE: Google now creates two IDs when you publish this. There’s an ID […]

I’m not dead yet . . . Google Scripts to Check on a Bunch of WP Sites

John Stewart is going to write up something more systematic and structured as he’s taken these rough ideas up a notch but I figured I’d throw this functional Google Script code in here before I lost it. I believe I got up to five positive statements on blogging more in-process stuff so I’m taking that as an overwhelming mandate. These Google Script functions are meant to loop through a set of URLs in a Google Sheet pulled as an array to see if the site’s still in use. The first two take a look at the WP REST API endpoints for posts and pages. That way if the person only writes pages you won’t be tricked. I’d probably write them all to the sheet because I’m paranoid. The third (aka the hassle as I hadn’t ever messed with XML using javascript) looks at the RSS/XML feed in case the site is not updated enough to have a functional API endpoint or if it’s broken for some reason. This won’t help you out if they’re just writing pages but there’s only so much a person can do. John made a more robust structure with error checking, the piece where it writes to the spreadsheet etc. and I’ll loop in his post once it’s up.

Rethinking Our Project Page (and other stuff)

Image from page 211 of “Bulletin” (1961-1962) flickr photo by Internet Archive Book Images shared with no copyright restriction (Flickr Commons) I’ve been lucky enough to hire two awesome people who have started over the last month or so.1 We’re also going to get a new supervisor on July 3rd. That’s led me to have a bit of breathing room and a reason to start re-thinking some things. One of those things is how we combine documenting our work. Can we document what we do in a way that will create more people interested in doing these things? Can we do a much better job bringing active faculty to the forefront? Can we serve the end of the year report needs regarding various data elements? Can we gather data we might reflect on regarding our own processes? How do we knit all this stuff together from various services without a lot of extra work? The Old I’ve done this more than a few times. The latest incarnation at VCU was the examples page (pictured above). It is semi-decent but was done in haste. It tries to affiliate tools and instructional concepts with examples. Conceptually, it’s pretty close to TPACK in that way. It has done a marginal job thus far. It houses examples and people can browse them. It doesn’t […]

Non-Standard Shapes- Another Odd WP JSON Display

It’s better to see this in the full page view but it grabs a WP JSON feed and makes up non-standard polygon shapes based on the posts using the featured image as the background. Try reloading the page and the shapes will change. If you hover over them they’ll behave in very odd ways as well. That’s all easier to see on the full page view. It’s a strange proof of concept but one I’ll be putting to work for an odd art site in the future. I’ll tame it a bit as I’ve made a number of completely odd decisions just to see what would happen. It could be I’ll end up using data from the posts to influence the shapes more intentionally. That opens up a whole world of strange dataviz possibilities. That is one of the things I love about doing this kind of WordPress interaction. It’s light enough that I’ll run down a path like this and just try it out. I probably wouldn’t have bothered if it required a full child-theme or page template. It’s a low threshold with a high ceiling and now I have another example of something people don’t think WordPress could do for my NMC presentation next week. See the Pen socially engaged artists – jquery by Tom (@twwoodward) on CodePen.