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.
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 […]
Like the music post a while back, I’m not going to attempt to tie this to education in any way. I’ll start this off with a caveat similar to my posts on programming . . . I’m just a guy trying to do stuff. Almost all of it is on the very edge of, perhaps a bit beyond, my competency levels. It is not unlikely that I will either say something that’s a bad idea or document something poorly. You have been warned. To set the stage, I have four kids. We have three bedrooms so the youngest two share a room. It’s not a huge room so bunk beds have been a topic of conversation for a while. I decided I’d talked enough over Winter Break and decided to make them. I have little woodworking experience. To the point that I’m not even sure if people call this woodworking. Carpentry maybe? I’m probably doing something like calling heating up pre-made cookie dough baking . . . Full disclosure, I have a table sawI bent the metal legs and had to remove them. This speaks volumes about my experience level. and a circular saw. I put in hardwood floors in our first house. I used floor glue instead of nails.Glue was a terrible, terrible mistake. I built a gate for […]
flickr photo shared by cogdogblog under a Creative Commons ( BY ) license Because I still read the posts from the good people over at HCPS I came across Doug’s post on a script that Michael Price wrote. The script sets up a form that lets anyone upload a file to a Google Folder.There’s also the potential to use it like a Google Driven Piratebox. It intrigued me so when one of our professors was asking about allowing students to upload raw video for other students to use, I figured I’d check this out as a solution. You can/should get the basics from the video that’s in the post above. I made a few alterations based on our particular needs. One, I wanted the folder to be viewable by anyone so they could get the files easily. I could have set the sharing permissions after the creation of the file by hand but . . . I didn’t want to.Computers should enable me to be lazier in the long run. I also wanted to tighten up the connection between submission and being able to see all the results. It turns out you can’t currently iframe any of this without drama so I included a link to the folder after the submission and demo’d using the Google Folder WordPress plugin I […]