Vue and the WordPress REST API

I’ve continued to play around with using Vue and WordPress’s API. The Vue stuff is entirely new to me but it’s pushing my javascript knowledge. The main reason I’m excited about the WordPress/Vue (or whatever framework) combinations is simply speed. If you have any doubts give the pagination at the bottom of this demo site a shot. Crazy fast . . . and running stock on shared hosting. No caching plugins etc. The site is running the Vuetiful WordPress theme which has been an interesting thing to look at and see how it all works. Github is such a good thing. Below or linked here is the WP JSON/Vue pagination I eventually got working. It’s forked from this demo by Brian Krosgard.1 Even with that large head start, a few things hung me up. First, the navigation of the JSON elements is a bit tricky if you’re not used to it. You’ll want to use the _embed parameter2 to get access to the featured image data. That’s an option I didn’t know about previously. https://anth101.com/wp-json/wp/v2/posts?_embed&per_page=24&page=1 Since I named my main JSON objects ‘post’– to access the thumbnail URL, I’d use post._embedded[‘wp:featuredmedia’][0].media_details.sizes.thumbnail.source_url The part you need to pay attention to is the square brackets and the number following it. Notice there is no period between _embedded and [‘wp:featuredmedia’]. You might also […]

Portfolio Work – Interweaving the Personal API

I know. The title is pure click-bait. That’s part of why this blog is so wildly popular.1 I’ve been building a new portfolio site2 and I think some of this is kind of interesting even if it sounds boring. There are a few different goals in play. One challenge is to create a site that stays up to date with minimal work on my end. It’s a parallel of the small-pieces-loosely-joined mentality. I want tiny-actions-over-time (from the aforementioned small pieces) rather than widely-spaced-herculean efforts. I’m also trying to make sure that it fits in well with my current workflow and that I’m capturing the work I do elsewhere in ways that make sense. Another focus is to keep any work highly portable. I’ve had to re-enter data a number of times as I’ve migrated and I don’t want to do that any more. That’s going to be made possible mainly through some new API options and by working on my API/JSON, JavaScript skills. I’ll probably have to do chunks of it over anyway but I like to pretend I wont. I’ve got a ways to go but I’ve made some decent progress. The basic template/visuals are handled by Bootstrap. I’ve also got some simple Angular views, Timeline JS, JSON from Google sheets, WordPress WP Rest API v2, and Pinboard’s API. […]

Google Script to Copy Row Above to Blank Row Below

I had a spreadsheet that entered blank cells when there was more than one admin for a WordPress site. So if Site_1 had two admins, I’d get two rows of data. The first row for the site would have- siteURL | siteTitle | siteAdmin but the second row for that site would have something like- < blank > | < blank > | siteAdmin I started to just drag down and fill but there was lots of data and it just felt like something for the machine to do. The following Google Script did it for me in a few seconds despite a couple thousand rows of data. Not rocket science but it might be handy for someone and it was a really convenient example of variables and loops when I had a conversation with my son last night.

Radioactive Collage Maker

Radioactive is the book that VCU’s first-year students are reading. It’s an interesting book with interesting art and collage playing a major role in the design. I hadn’t really looked at it until this morning but I ended up in a conversation and an idea came to mind. “What if we could deconstruct elements of the text (words and images) and give them to students to recombine in interesting ways?” It seemed like a fun thing to do and within reach based on work I’d done earlier with Google Spreadsheet Fridge Poetry but I wanted a few more capabilities to help people create better visual products. I took my phone and took a bunch of quick pictures of pages from the book that seemed interesting and easy to cut out. That took about 10 minutes to photograph and drop the backgrounds.1 Another 10 minutes and I had a working prototype using the old Google Fridge Poetry. Not bad but I wanted to be able to rotate/resize images and be able to save the results as an image file (something I tried but failed at doing last time around). Resizing It turned out resizing was built into jQuery with the resizeable. $( “.resize” ).resizable(); Nice but it resizes the element holding the image rather than the image itself . . . […]

Bike Race Fortunes Randomizer

Richmond is going to host this bike international bike race in a few months. The more interesting part, for me anyway, is going to be 25 one credit courses each using the energy and activity of the bike race to power a particular disciplinary/interdisciplinary exploration. In the meantime, we wanted to make a coming soon page and I thought it might be amusing to randomly generate some cycling-related fortunes that could be sent out via Twitter if the person was sufficiently amused. That’s not a difficult task but it might help someone to see it laid out. The twttr.widgets.load(); was something it took me a bit to realize. You can see it in the script without it the Twitter button didn’t look right. The javascript . . . Sources for various elements Emma made the background image for the page and the wheel. Dan and Enoch submitted fortunes. Twitter button fix

JavaScript Poetry

I set myself the slightly odd challenge of creating a few interactive poems using JavaScript elements. I plan to do this every so often for a while.1 Each creation will have my own poetry,2 an image, and some element of JavaScript driven interactivity that relates to the poem. The theme came about because I was reading Don’t Bump the Glump to my youngest. I like playing with words and have a long list of strange ideas that I’ve never brought any further. I also want to keep learning JavaScript and to mess with a variety of js libraries. On the art/drawing side, I’m working on my vector drawing skills in Illustrator. The two examples I’ve done so far have just been thrown up as bare bones HTML sites3 and have used completely different js libraries. They’re both built off already existing examples that I modified. I don’t consider that cheating but will probably move more towards from scratch construction as I get better at things. The Grabbit The goal: Eyes that will track mouse movement. It’s iframed in above but the full size page is here. The start: A brief search led me to this Code Pen. It uses jQuery as the main library. I’ve got think more about mobile when doing interactive stuff with js. I think I can […]