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.

WP Rest API Tips

Cowboy Jason Stanley performing a riding trick at the Round-Up, Pendleton, Oregon flickr photo by UW Digital Collections shared with no copyright restriction (Flickr Commons) I’ve been doing quite a bit more with the WordPress Rest API lately. There’s plenty of documentation and tutorials out there but most of it still feels a bit scattered to me so I’m going to stick a few of the basics here and add a few things that have come up repeatedly that aren’t quite as basic. There’s an attempt here to move upwards in complexity with the examples but to keep them as clean as possible. This will deal entirely with getting the data. I haven’t done much with using the API to write or modify data. Get the Info There are many ways to get data depending on your library of choice or if you’re using vanilla JS. I’ve played with fetch and Axios on the lighter side and jQuery, Vue, and Angular (v1) on the heavier/more involved side of things. I’ll use jQuery in this version because it’s fairly popular but here’s a Vue example. The example below does a basic jQuery ajax call for the JSON associated with blog information. See the Pen simple jquery get of WP JSON for the site by Tom (@twwoodward) on CodePen. The URL Structure/Accessing […]

Bootstrap Collapsible Shortcode Plugin

There are a bunch of these out there but the ones I knew of didn’t quite do what was needed by the Focused Inquiry faculty involved in this project. They wanted a couple things to be possible. The ability to link to specific elements via URL and have them expand. The URL to those elements to remain consistent even if the order of the elements was changed. An “email this URL” link to enable faculty to send the URL to students Plus/Minus indicators based on expanded/collapsed. Most shortcode plugins I’ve seen either don’t have an ID for the collapse element or make it sequential (which changes if you shift the order). Neither works well for a URL that needs to be consistent. I’ve never seen one to do the email element. In my head, I made this way harder than it needed to be. It ends up being just two shortcodes- one for the collapsible container and one for the item-level elements. I found this Bootstrap snippet that did most of the functional Bootstrap stuff that I needed. I found a script to let me expand elements via URL parameters. I reminded myself what a freaking mailto link structure looked like. Now I just had to figure out what variables needed to be set in the shortcode and how the […]

Playing with Words – Google Sheets to jQuery Drag/Drop

flickr photo shared by Internet Archive Book Images with no copyright restriction (Flickr Commons) This is a modification of the old refrigerator poetry concept based on a request from some of our World Languages professors but it’ll likely have some broader applicability. It essentially allows for three major things. You can create draggable elements (words, phrases, any HTML) from a Google spreadsheet You can create destination areas for those elements (also through the Google ss) You can make it so that elements that don’t match those destinations won’t “stick” there (spreadsheet again) It might be easier to see what’s up through the short video below. This was done mostly in jQuery but there are also a few Google Script elements that make life easier. The page below has everything except the CSS. It’s decently commented I think. The only real trouble I had was figuring out where/when to feed in the draggable/droppable elements. It kicked through after a bit of experimentation but I have a long way to go with javascript. Google Script There’s a directions sheet in the spreadsheet where I wrote a custom function. That allows me to write =getId() in the cell and have it generate the right URL for whatever spreadsheet it is in. You can also automatically copy my spreadsheet by going to the following […]

Free Speech? Random Scenario Generator

Talking to Dan about his sports law course resulted in this random generator which might be fun for others. It’s still developing but I like the potential for reinforcing some concepts about free speech in a fun way that allows you to repeatedly explore the topic without it getting tedious. I thought this would be a few minutes of work but I believe that Google has shifted the structure of their JSON feeds from the Spreadsheet. It could also be that I am insane. This particular experience did remind, rather unpleasantly, that I don’t fully understand how nested JSON parsing works. I ended up in the right place but only through about 40 minutes of slamming my head into various walls of misunderstanding. I also need to spend a bit of time applying the DRY concept to this bloated mess.

Display Google Sheets JSON with JQUERY

I’ve been doing my Google JSON display using Angular but I wanted to see what I could do with jQuery. This is based on the post here by Amit (to whom I am grateful for all the great stuff he puts out) with minor updates due to changes in how Google does things. Do make sure you’ve published your sheet at HTML and note that the 1 in the URL structure is the first page if you have multiple sheets.

Fridge Poetry – Google Sheets as Database

Back in 2013 I built a refrigerator poetry page using javascript. I really wanted to make it so anyone could add any words they wanted in some easy way but didn’t have the skills to do that at the time. It’s been hanging out in the back of my mind since then and the bits and pieces I’ve learned since then now make it pretty straightforward. This url will prompt you to copy a Google Sheet. That’s a nice little trick- just append /copy to the public sheet where it normally says /edit?usp=sharing if you copy the typical sharing URL. Sadly, it only works for Sheets. Once we’ve published the sheet, we now have a JSON feed of the data and the little URL trick in the Google Sheets gives you the URL to the fridge poetry page with Sheet ID included as a parameter. (That’s the chunk after the question mark.) The PHP to make all the words into divs is below. I usually do something like feed->entry->$t to parse out the JSON but that didn’t work with the Google Sheet data.1 I still don’t quite get things well enough to know why but this alternate path works well. Part of the difference there is using the TRUE parameter on the json_decode. The other new element for me […]

Rookie Javascript Mistakes

I frequently can accomplish things by cobbling together code I find on Stack Overflow and various tutorials/examples found elsewhere. Sometimes I have a decent idea what’s going. Other times . . . my lack of real understanding slows me down much more than I’d like. The following bits of increased knowledge come from playing around with three javascript plugins for jquery. You can see all of them in action at the site1 above. Chart.js – simple HTML 5 carts that are animated on construction countUp.js – does those rolling numbers ToolTipsy – slick customized tooltips “By seeking and blundering we learn.” – quite possibly Goethe2 Here are two easy things I did wrong when playing with way too many javascript libraries on the ECAR demo site. Lesson one – If a library is a jquery plugin then the script you write (initiator?) AND the plugin reference3 have to load after jquery. That order is just a little bit important. I had previously thought far less about the plugin source URL and probably accidentally put it in the right order. In my head it wasn’t a script.4 I thought about more like a reference put into action later and so I never really thought about the order. This is basic competency stuff but I did it wrong and spent a while […]

Javascript Puzzle Code Proof of Concept

This is the result of a conversation I had with Gardner and Jon yesterday. Essentially, we all found this O-P-E-N page1 pretty interesting. As we got to talking it seemed that there could be some interesting ways that that movement could feed back into what the site itself in ways other than just changing the physical display of the elements. I knew that elements of that were possible in javascript. This site was what was in my head during the discussion- in particular the way the top speed numbers climb as you scroll down. What I wanted was slightly different. My idea what that by moving an element, or series of elements in particular ways a hidden message would appear- kind of like solving a puzzle (more easter egg style, less jigsaw). I did not know how to do this but was certain it could be done. This was my path. I knew how to make draggable objects from the refrigerator poetry days (That was back in August. See how strange things resurface?). I opted to redo it using the default example in JQuery because I’ve been using that for some other things. Now I just needed to figure out how to get the coordinates back in a way that I could display. My initial searches led me to position() […]