Re-Scraping Instagram

Back when Instagram’s API rules didn’t completely suck, I wrote a few posts on scraping it so that some of our faculty could use those data in their research. Then all their rules changed and everything broke. That’s their prerogative but it’s also my option to complain about it. But because I posted about it, I got a comment from raiym1 who let me know he wrote a PHP scraper that avoided the API limitations. I’ve now got that up and running and set up a simple GET so that the URL determines the tagged content that is returned. The PHP for that page is below and allows you to replace the API URL in the old Google Scripts with a new url like http://bionicteaching.com/creations/ig/scrape.php?tag=fish You can then make your own custom displays based on that. I made a quick custom page template for the artfulness WP theme (currently showing filler data from the exciting ‘fish’ tag). This example has the tag hardcoded in but could easily use a custom field to pass the value. 1 On this post. And apparently this theme doesn’t support direct links to comments. About time I wrote my own theme . . .

Lynda Domain URL Tip

WordPress Essential Training Lynda.com is new to VCU. It’s good stuff and I wanted to use it more with students but the vanilla links lead you to the non-VCU authentication page which equals confusion and despair. Luckily, there is a simple solution. Just append ?org=vcu1 to the end of the URL and it’ll prompt the user for authentication and all the good things will happen. So this . . . https://www.lynda.com/WordPress-tutorials/WordPress-Essential-Training/372542-2.html becomes this . . . https://www.lynda.com/WordPress-tutorials/WordPress-Essential-Training/372542-2.html?org=vcu Just a little tip to make life more pleasant. 1 or whatever your org is – I spent some time trying vcu.edu and failing

WordPress/Google Spreadsheet Chimera Community

flickr photo shared by NASA on The Commons with no copyright restriction (Flickr Commons) Many professors don’t want students having to go into the backend of WordPress. Imagine also that you’re dealing with many hundreds of students and don’t want the hassle of people asking you about password resets or any other attendant drama. You’re willing to give up some things in return for as much simplicity as possible. You’ve got a few options for front-end editors. Gravity Forms is one I use all the time but it doesn’t give you the full WP editor which is pretty handy if you’re asking students to write posts of any complexity. AccessPress Anonymous Post Pro Forms is another option that I used on this project. It’s worth checking out and I think there’s a free version as well. Alan and Brian’s SPLOT tools are also worth checking out if your actions fit into those patterns consistently. That helps address one problem but it opens up a few other issues. We’ve got lots of students and lots of individual sections. How do we group them into courses or teams? How do we aggregate individual student’s work to their own page if they aren’t authors (in the WordPress sense)? Can we do that without drama? After a few false starts, I think this works […]

Hide/Show Angular via URL Variables

flickr photo shared by Internet Archive Book Images with no copyright restriction (Flickr Commons) For some reason I’ve been hiding/showing things a lot recently. One nice little trick I saw (and have already used) was based on the target class. You can see it working – hidden here and expanded here. Notice the #details piece in the URL. The CSS that makes it work is below. Nice and simple. That’s nice if it’s one element you can address via an id. It doesn’t work if you want to hide and show multiple items which might have the same id. I wandered around a bit and found a more interesting way to do it in Angular. The following javascript gets the variable from the URL. It’s straight from this article. So this URL http://bionicteaching.com/tools/hcps/hcps-tools.html?school=varina_hs would pass varina_hs to the variable school. If the school=varina_hs chunk is gone, then the box is invisible. I need to add that variable to the Angular scope so it can be accessed in the template. So now that we have that we can use it. Wandering around a bit I found ng-if. It’s essentially a way to show or hide and element based on whether the statement returns true. This code will return TRUE under either of two conditions. If the JSON element entry.gsx$school.$t has the […]

Custom Web Form to Google Sheets

Sometimes the options given in Google Forms just won’t quite work for what you want to do. Maybe you want a particular look, or an interaction, or whatever that Google Forms just won’t do. Luckily, it’s not too hard to make a custom form that can do whatever you want and still has the ability to write the submitted data to a Google Spreadsheet and the form HTML is still served by Google. The following steps should get you up and running and comments in the scripts should provide additional details. Make a new spreadsheet in Google Sheets. Go to Tools>Script Editor Select all that stuff and replace it with the content below. Replace the string of ****** with the ID of your spreadsheet. Then save it. If you get any permissions prompts approve them. Make a new HTML page (File>New>HTML File) and name it index.html Select all and replace it with this.1 Save it. To make sure things work, let’s publish it (Publish>Deploy as Web App). Now go to that URL and submit something and see if it goes to the spreadsheet. If so, great. Now you can start customizing the form to reflect your needs. This form should now write to a spreadsheet like this. Do keep in mind that each form field you want to write to […]

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.

25

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.

Appropriating Appropriate Styles – Quickly

Suppose you had to build a web page pretty quickly (an hour or so) and suppose you had to have it mostly match the theme from some other site you had nothing to do with. You’ll want it to be responsive etc. You’ll do the whole University-brand identity thing. Suppose you’re a pretend web developer. Here’s my pattern (based loosely on actual events). Here’s the original page. The screenshot below was made with the Full Page Screen Capture Chrome plugin. Step One – Framing I’m using Bootstrap on this one because I’ve become decently familiar with it. I may use flexbox in the future but speed was the deal so I went with something I knew. I figured I’d echo the framing of the first site (which is pretty typical in any case)- VCU banner header with some navigation a big picture a couple of text blocks spanning about a 1/3 of the page the footer There’s some default navigation stuff I can paste in.1 From there I start to look at the body of the page as Bootstrap components. In my head I’m sketching it out in rectangles. In Bootstrap, that’s essentially Container>Rows>Columns. Everything is based on a 12 column width, so if you want to make something 1/3 of the page in width, you’d do put it in […]

NGINX – HTTPS & HTTP (When Needed)

After HTTPS was turned on to deal with one issue it, of course, kicked off another unforeseen one. All of the screencast.com content failed to laod. You can see that happening above. It’s never a bad idea to take a look at the console using Chrome’s developer tools when weird stuff happens to a site. Since I couldn’t change anything on the screencast.com side of things, I needed to be able to load this particular site as HTTP rather than HTTPS. I tried a variety of paths based on various Stack Overflow suggestions. I’m not entirely sure I didn’t fix it in various other ways but this one seems to work. I will note that NGINX is a bit like regit and htaccess in that as I get deeper and deeper I begin to suspect it is actually witchcraft. So, to give full directions. I’m SSH’ing into the server via Terminal. I’m navigating to where my NGINX file lives. I’m opening the file in Nano. The 443 server block was already in place. I added the location element within that block. It waits for requests on 443 and should stop the http://rampages.us/psy323 site from being pushed up to https. I also added a second server block listening at the regular port 80 that does nothing with the psy323 address. Next […]

Using Chart JS in FileMaker Pro 15’s Web Viewer

I’m doing a project in FileMaker. FileMaker 15. I think the last time I used FMP seriously was 2010-ish- version 11 had just come out. It’s still the same program but there have been some interesting changes. It’s also weird now because I have an entirely different set of experiences with technology that I didn’t have back then. FMP’s charting/graphing still leaves much to be desired. I was trying to create a particular chart and thought I’d be slick. I tried many things. Many, many things. I even tried creating stacked bar charts with the initial bar color begin set to transparent (that would have worked) but FMP does not let you set custom color schemes for charts (which is insane). In any case, I started wandering the Internet and found a video on integrating Google Charts with FMP 14 and the web viewer. The easiest path seems to be — get your HTML working without FMP variables – make sure all your css/js etc. are full URL paths Once it’s working, escape all your double quotes by doing a find/replace all with \” Paste this into a web view component (make sure you wrap the whole thing in double quotes) you’ll then have something like this in your editing view switch to browse to make sure it works If […]