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 […]

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. […]

Book Review Site via Angular and a Google Form

I had an interesting conversation with a pair of elementary school teachers. It led to me saying I’d put our two older kids on Good Reads in lieu of some less pleasant ways of documenting their reading. It’s not a place I’d necessarily drop a group of 3rd graders. As we spoke, I figured I could build a little version of one very quickly with Angular and a Google Form. It’s worth noting that once you set up one Angular page tied to a Google Sheet, you can just copy that over and make websites very, very quickly. It’s just a matter of re-aligning the json data. I hadn’t done anything with Angular in a while and while doing this I found out a few other neat little tricks that’ll be of use at some point. One was this slick star rating CSS option. It will show the star rating based on a div percentage. I really liked it but my rating scale was 1 to 5 and Google didn’t really support doing something with percentages. However, I didn’t realize you could do math right in Angular. It turns out you can and I did it like so. The entry.gsx$_cyevm.$t part is just the name of the data chunk that holds the 1 to 5 rating scale. I can divide […]

Blurry Reflections – WP JSON API, Angular, & Images

I had a conversation with a professor from the School of Art yesterday that ended up someplace fun for me. The focus was on how technology might help art educators reflect on their work in a visual way. It took me a while to get that she really wanted something outside the norm but we got there eventually. One of the ideas that came up was taking the featured image from the last 30 posts and applying a blur to it (I had this DS106 assignment in mind). With bit of CSS and a new plugin (Better Rest API Featured Images Plugin1) I was able to repurpose the Angular template I used for counting links in about 5 minutes. I also made another version that tries to overlay all the images in one spot. Both need some tender loving CSS care and some additional focus to make sure they’re really capturing the right data but they’re examples that start to open the door to really different ways we can start to look at work in the digital realm. These abstractions can lead to reflection that wouldn’t necessarily be apparent from viewing the images in non-abstract form. You can see I tend towards black and white images. A number of my posts don’t seem to have featured images. (I’ll have to […]

Embed Collector Tool

Some people don’t have websites handy or their blogs won’t allow iframe embeds. They should still be able to have their students do stuff and get it all in one place. This is the Internet! And this tool is meant to deal with that. You can see a working example with three submissions (via a Google Form) here. It’ll take any iframe or HTML as a submission. The search box will also filter based on all the additional material associated with the element in the form. For instance in our example you can type “Sarah” and you’ll end up with one item. So the way this should work is you click here and accept the copy. You now have the spreadsheet and form. The directions are on the sheet labeled directions. I have a dramatic green arrow pointing at it in the image below. You can edit the form associated with the sheet under Form>Edit form. The only thing you have to leave/have in the form is the one called “The embed code.” Everything else can be deleted and/or changed. Stuff I Learned This pretty much a mashup of two recent projects – the personalized fridge poetry and the Angular/Google Sheets JSON stuff. This one runs entirely in javascript so to use the $_GET option, which javascript doesn’t have, I […]

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 […]

Auto Screenshots & New Project Site

Before Mark left us for the green dusty start-up fields of Austin TX we had a conversation about creating a better, faster way to do our examples page. The idea of having a resource like this is always popular but people don’t add content.1 My current belief is that it’s because it’s a hassle and despite good intentions people just don’t do it. After seeing what Mark did to associate users with their blogs in the mother blog plugin, I figured he could also automatically pull the theme, plugins, and admin email of any blog on our system based on the URL . . . and indeed he could. This theme requires Advanced Custom Fields and the Benson plugin to tie in the Angular stuff. The one thing he wasn’t able to do was to auto-generate the screenshot from the URL. I’ve looked into that in the past and done it in a variety of ways but none of them were quite satisfactory. I didn’t really want to end up reliant on a 3rd party system and then Mark sent me http2pic yesterday. So now I just needed to install it and get it working. That led to a bit of an adventure for me. There are directions on the github page but they’re written for someone who is a […]

30

Google Spreadsheet Unique Item Count

Google sheets can do some neat tricks. Here’s how you can generate a chart of unique words submitted and their counts. The form for collecting a single word. Loading… The formula to paste in column C. All credit to this Stack Overflow post. =QUERY({B:B,B:B},”select Col1, count(Col2) where Col1 != ” group by Col1 label count(Col2) ‘Count’”,1) The embedded chart. In messing around with options around this, I was also looking at getting JSON data out of Google sheets. https://spreadsheets.google.com/feeds/list/1gwiU0j-o50m1L5yEU7OR-v9GSuxNyQeD5_zosjBpYvE/1/public/values?alt=json To break that down https://spreadsheets.google.com/feeds/list/YOUR_SHEETS_UNIQUE_ID/THE_NO_1_FOR_THE_FIRST_SHEET/public/values?alt=json It works with Benson as seen over here which is pretty neat. Although I haven’t gotten search working.