Beer Bubbles CSS
Another random conversation led to this experiment . . . it’s animated CSS which is pretty cool but I can’t take any credit for it.
I found this example on Codepen and then mainly gutted it to make what you see below (also a minor experiment with flexbox).
See the Pen CSS Animated Beer Pour (Forked from CSS Beaker Pen) by Tom (@twwoodward) on CodePen.
Related posts
Angular and Google Sheets JSON
flickr photo shared by Kecko under a Creative Commons ( BY-ND ) license Man. This was a slog and really highlighted gross inadequacies in my conceptual understanding of pretty much everything. That being said, with an end-around, it works. The whole thing is below but there were really two pieces where I got stuck and flailed away on Stackoverflow and other places for quite some time. Getting the JSON I always struggle with nested data and getting things right. It seems so stupid simple now . . . response.feed.entry but I’m often unclear when it’s periods, when it’s =>, or when it’s something entirely different. You mix that with a few levels of confusion around the process and you end up with many variables you can screw up. For instance, if I remember correctly response[‘feed’][‘entry’] also works. Searching all of the JSON I’m cheating here. I couldn’t get the scope of the filter to be all of the data returned in the JSON. It kept stopping at the first element- id. So I cheated. I wrote a formula on the spreadsheet to mash all the cells together per row and pointed the filter at that data. Ugly. But functional. I don’t know what it’ll end up being. Not what it is but now that the framework is built, we can […]
NGINX Redirect Tutorial
We recently assigned a few custom domains to rampages. That ended up causing two complications. The first was that some people were using https associated URLs previously (news to me). The always impressive Tim Owens (reclaim hosting support cannot be complimented enough) took care of that for me. @twoodwar Merry Christmas 🙂 #vcualtlab pic.twitter.com/fpT7AQjt2I — Tim Owens (@timmmmyboy) June 16, 2016 The second was the need to redirect some file levelI’m not sure that’s the right terminology URLs to some new subdomains. I plain English, I needed https://uc.vcu.edu/focused-inquiry/ to go to http://focusedinquiry.vcu.edu. In any case, Tim gave me some tips and I sallied forth to do the redirects.I was initially confused about whether I was doing this in htaccess or not. Some of our sites are still using Apache and htaccess. Rampages is not. I was also unclear previously about whether htaccess had any connection to NGINX or not. It does not. 🙂 Put this in my public failure CV. This was my first time doing anything in NGINX so it was a learning experience. I document the steps here in the hope that it’ll be useful to someone else. Keep in mind I’ve only done this on my server so I’m assuming it’s fairly broadly applicable but I can’t be sure of that. I also attempted to either explain […]
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 […]
[…] been fairly busy. That said, I’ve been meaning to play around with CSS animation thanks to Tom Woodward’s post last month featuring beer bubbles. And after talking with Bryan Mathers about more seamless animation of the artwork […]