best gaming chair

Degree Chooser

Areas of Study screenshot

We made a pretty slick degree chooser at work. Ours is labeled as Areas of Study, but ultimately we made an easier way for our visitors to sift through what degree(s) might appeal to them.

Live example:

https://stockton.edu/academic-affairs/academic-schools-programs.html

There’s a lot going on under the hood with this one, and we’ve utilized what I think are some pretty cool techniques to make it not only easy to use but also easy for our content managers to keep up to date.

Our CMS (content management system) is OU Campus which specializes in higher ed. They’re great for us. Their templating system relies on XML/XSLT (not always so great), so ultimately a content manager typically is editing an XML file on the staging server that is then transformed into an HTML file that live on the production server for visitors to see.

So to make editing as seamless as possible, we setup a table is OU Campus that our content manager can edit, just like any regular page. Just what they’re comfortable doing day in and day out. We then leverage some XSLT magic (there are parts of it that I still believe to be magic even though I wrote it) to transform the content managers edits. Here’s what’s happening when they edit:

  1. Content manager makes normal edits to a html table with columns, rows, etc. Each degree is a new row in the table.
  2. On publish the XSLT transforms the edited XML into 2 files. A standard HTML page of the table transform and grouped by degree type.
    1. This is the most basic but functional version of the page. It’s served up like this to meet any visitors who may be visiting with the most ancient of browsers. They will still at minimum get a fully functioning list of linked degrees.
    2. The table is also transformed via another XSLT file to a JSON file. This JSON file will serve as our data source of areas of study. The external JSON file makes it easier to use the data in other pages/applications too!
  3. So now we have 2 files. The HTML page which is fully functional, yet a tad boring and a JSON file just waiting to be used.

Next we used Vue to write the JavaScript for this little app. I found Vue to be pretty lightweight and translates well to our CMS and the talents of our team. It’s my current favorite way to code up JS projects.

We didn’t use the vue-cli, just some vanilla Vue for this one. If we do a 2.0 we’ll probably go with vue-cli as we have a much better understanding of it now and it’s benefits.

Vue

4. The Vue script not only filters by title, school, etc. but we also include a field for tags. This really opens the door for us to make sure that our degrees can be found not only on their proper name, but perhaps a name that is used at other institutions, or even if searched as a career driven term. This should be a big upgrade for all.

5. To top it off we collect Events in Google Analytics of terms searched on. This data will help us make sure that the tags being used make sense and if we should consider adding new tags or even renaming or launching new degrees in the future.

All in all a very fun project that really helps to modernize a highly used page on our site. We’re looking to incorporate the JSON data into other apps/uses as well.

Here’s the repository on GitHub:

https://github.com/joedag32/areas-of-study-app

Comments (0)

Vue JS 2 – The Complete Guide (incl. Vue Router & Vuex)

Vue.js logo

I’ve been eager to get better with Vue.js, and in additional to reading and watching all the great resources online, I also give the Vue JS 2 – The Complete Guide (incl. Vue Router & Vuex) on Udemy a shot.

The course was really great. I had to put it down for extended periods then come back due to my heavy workload at work, but the instructor Maximilian really put together a very solid Vue.js course. Highly recommended

The final project was a stock trading app. The final stock trading app did a good job of utilizing Vuex and Vue Router too, so that was a plus for sure.

Here’s some of the issues or differences I had on the final project:

  • The only part I really had a little difficulty on was the Javascript logic for creating the stock and adding it to the portfolio. Ultimately I did get it to work, but I was going with 1 stock component for all the uses, while the course example went with 2 separate stock components. While either could work, going with 2 components in this case did seem to be a bit easier to get going.
  • Sometimes I still go with ES5 style instead of going with the ES6 Higher Order functions. I forget .forEach, .map, etc. but am getting better of giving them a short as well as the good old for loop that I tend to lean on.
  • I went with Bootstrap 4 instead of 3 that was used in the tutorial
  • For now I’ve omitted the Firebase integration. I’ll probably go back and include that at some point, but was thinking of implementing it in a slightly different way that was was proposed in the lesson.
  • Had to change the publicPath in config for the project to work on GitHub Pages. This had me stumped for a few minutes, but made sense once I thought it through.

The source can be found on GitHub. It can also try it out on the GitHub Page Environment.

Great course and highly recommended if you understand Javascript and want to figure out how the Vue.js works.

Comments (0)

Instagram Feed using Javascript and XSLT/XML

Recently an Instagram widget that we were using on a site broke when the Instagram API was upgraded/deprecated (I guess it depends on which side you are on). The widget was no longer supported, so we were looking for some workarounds/solutions.

We investigated moving to another commercial widget, building a script using their API and whatever other options we could think of. We found InstagramFeed on GitHub, which is a really cool Javascript.

The CMS we work in uses XML/XSLT for it’s templating, so using the CMS’s built in Components, we built a simple Component that would give a content manager access to basic form controls so to create/edit the script. We then wrote some XSLT to build out the script call and output to generate the InstagramFeed script on our website. Nothing too amazing, but not too shabby for the very short turnaround.

Here’s the XSLT we used to output the script with the options of passing:

  • feed name or type, @ username or # tag
  • number of items to display
  • number of items for row
<xsl:template match="div[@id='instagram-feed-comp']">
  <xsl:param name="feed-type">
    <xsl:choose>
      <xsl:when test="starts-with(@data-feed, '@')">username</xsl:when>
      <xsl:otherwise>tag</xsl:otherwise>
    </xsl:choose>
  </xsl:param>
  <xsl:param name="feed-name" select="substring(@data-feed, 2)"/>
  <xsl:param name="items" select="@data-items"/>	
  <xsl:param name="items-per-row" select="@data-items-per-row"/>	
			
  <div id="instagram-feed-comp"></div>
  <script src="_host-path_/instagram-feed-min.js"></script>
  <script>
  (function(){
    new InstagramFeed({
      '<xsl:value-of select="$feed-type"/>': '<xsl:value-of select="$feed-name"/>',
      'container': document.getElementById("instagram-feed-comp"),
      'display_profile': false,
      'display_biography': false,
      'display_gallery': true,
      'callback': null,
      'styling': true,
      'items': <xsl:value-of select="$items"/>,
      'items_per_row': <xsl:value-of select="$items-per-row"/>,
      'margin': 1,
      'lazy_load': true
    });
  })();
  </script>
</xsl:template> 

We hate XSLT, but you can do some very cool stuff with it if you can find good documentation and examples out there.

Once we make our template match, we’re assigning data attributes we have setup in our Component (not shared here) as XSLT params for later output. We create a new param feed-type that checks whether the feed-name starts with an @ or # to determine if it’s an Instagram account or a hashtag to display.

Next we just output a div for the script to append to, the include script for the Instagram Feed, and the function with options we want for our display. The scripts creators really did a great job documenting the options. GitHub and the web in general are so awesome at times!

We output XSL value-of’s where we want our Component values to output in the script. Again, very simple but works great without our CMS. A content manager can very easily add and update their Instagram feed on their respective page without knowing and Javascript or having access to source code.

Comments (0)

Recent Hobbies

I’ve found a few new hobbies/projects to learn during the recent pandemic. Some tech, some around the house, and others just random.

Vue.js

I’ve really gotten into the vue.js JavaScript framework. Recently I’ve been aiming to get stronger with JavaScript, and eventually found my way to Vue.

Thus far I’m using the framework to develop a degree/program finder at work, and another single page app for another project. I’ll have to write up a post on both projects when I launch them. Very excited.

Firebase

A bit tied together with my Vue interest, I’ve really been having fun with Firebase. Firestore and Authentication are what I’m mostly toying with at the moment. I am really excited to deploy into some final projects. The documentation is great.

Baseboard Trim

I finally put my miter saw to use and fixed the baseboard trim in my bathroom. Getting the trim to match at a corner was the biggest challenge.

Since some of the previous trim had gotten wet and moldy, I was able to salvage a piece of the clean original to match my corner, with a completely new piece of baseboard for the side with no corners. Very difficult to see the trim isn’t a perfect match on that piece.

Sprinkler Heads

Not too difficult, but I also dig up and replaced a few sprinkler heads. Installing and adjusting to get them just right wasn’t too hard. Just some trial and error, and digging.

RingFit Adventure

I have been playing RingFit Adventure for 90+ straight days now. While not a replacement for the gym, it’s been a pretty solid source of activity. It has me doing more core and balance work now, which is nice. Great idea making an exercise rpg, I think I’m up to level 106 now.

Kindle PaperWhite

One of the first (and few purchases) of the pandemic for me was a Kindle. It’s been awesome! Screen and battery are amazing, I’ve been borrowing books online through my local library. Probably have read 8 or so on it.

Comments (0)

OUTC19

OUTC19 Hackaton Winners!

Attended the OUTC conference in Anaheim, CA again this year. Presented again on Using Google Lighthouse to Find a Faster Website.

The trip out there was a little rocky with a decent amount of turbulence. While I typically do not travel very well, I was happy to not feel super lousy when arriving at LAX! Usually I’m in bad shape for the first day after a flight.

I was able to check in super early at the hotel, and took a much needed shower. I do think that was a key factor in me not feeling too poorly that day.

Arriving early on Sunday, we headed out to Irvine Regional Park. This place was awesome! The mountains, openness, so many cool things to do. Though I probably only saw 1% of the park, it was pretty awesome to take in all the differences that I would not find in New Jersey. A great experience.

Getting back to the hotel, we were served In-N-Out Burger from a food truck. The Double Double really it the spot, I was starved. It was great to meetup with earlier OUTC friends Caleb and Mark. They’re good guys.

Later that night, with a little bit of hard work was able to get HBO Go to stream on the large TV in the hotel room. On the west coast there was the option to watch it a t 9:00 pm or stream it at 6:00 pm EST. I had to present the next day and flew in that morning, so getting it to stream and watch the early time was a great success.

On Monday the sessions kicked off. I presented at 2:00 pm, and while I think I got off to a shaky start overall I think it went well. It wasn’t a very talkative crowd, but I could tell most everyone was following along and testing their site out using Google Lighthouse. It was fun.

The OU Campus 11 demo was pretty cool. I am excited at the direction the interface is going in. I think our content managers will be very happy with the coming updates.

I always look forward to hearing about their Product Roadmap, and that took place on Tuesday. The mentioned the following:

  • WCAG 2.1 (April 25)
  • Web Hooks (June) – Trigger actions outside of OUCampus. Can be assigned on folder.
  • Image Size Sets (July) – Set size (crop or not), group to set, assign to folder
  • File Uploads for LDP Forms (September)
  • Feed Manager (Winter) – easier feed management
  • OUCampus 11 (Winter)
    • Phase 1 – look and feel
    • Later phases to workflow
  • Formstack – available in Marketplace
  • Looking Further Forward
    • OU Calendar
    • Layout Builder
    • Accessibility Check/Insights Improvements
    • V11 Phase 2+

We’re exciting to see exactly how Web Hooks will work. There is some decent potential there.

I attended the Gadgets workshop again on Wednesday. It was a different take on that workshop, and I did find it to be useful. I’m always looking to improve my javascript game.

Later that night was the Hackaton. While I’ve been lucky enough to of been on the winning team in the last two events, I wanted to try a different role this year. I partnered up with Aaron, Soe, Fernando, and Nick in that order based solely on seating position when the Hackaton begun.

Aaron really wanted to develop a command line interface for OU. Fernando was all in with the idea, and quite frankly I was a little on the fence. In the past I’m leaned on user driven ideas, not so much admin. But Soe and Nick were all in, and I really wanted to try to enter with someone else’s idea this year.

I can’t say this enough, but we really worked so well as a team. Fernando was a command line genius and Aaron and Soe were great coders as well. They did such a great job, and far exceeded what I thought would get done in that timeframe.

Nick and I decided to focus on the presentation and marketing aspect of our team. We came up with talking points and images to be used. We even used the official presentation template (since I was a presenter) and got some big chuckles from the audience. Presentation can be a big factor in hackathons and we had a lot of fun with that.

It was a good thing that we worked so well as a team as there was some very stiff competition this year. Translation tools, image compression gadgets, XSLT data parsing, so many great entrants. In the end we did win, and I somehow would wound with with three in a row. Insane.

The last days workshops were very cool too, but there was so much going on in them I will have to revisit my sandbox and review the code before I forget too much. I’m very interested in learning more about PCF data outputs, especially outputting to JSON.

The flight home was smooth and a great way to end a great conference. While I’m not learning quite as much as I used to, it is fun to be in the role of the veteran who is now sharing knowledge with the newer folks to the platform. Glad I was able to attend again and looking forward to working in all the new ideas that were shared!

Comments (0)

OUTC18

Finally back home from the OUTC18 conference which took place in Anaheim this year. This is now the third OUTC that I have attended and I continue to come back impressed. Getting to meet and discuss not only colleagues from other schools, but also the development and support staff is very beneficial.

The flight over wasn’t too bad. I did feel quite lousy for a good part of Sunday after the flight which unfortunately is the norm for me with travel. But, I was able to get close to normal after a In-N-Out Burger courtesty of OmniUpdate at their welcoming/registration. So within a few hours I did check off a big to-do from my California list within the first few hours. Not too shabby.

Monday had some solid sessions. The opening keynote and panel discussion were interesting. Learned about some new offerings from OmniUpdate and also got some insights as to where some folk think things are going.

I also took part in a Feedback meeting with members of the OmniUpdate development team and a colleague from Dartmouth. It was nice that the OmniUpdate folks took the time to learn about our longterm goals and how they may be able to address them in the future. I did appreciate their time.

Later that evening OmniUpdate had invited us to dinner in Disney California Adventure and we had a few hours to walk around the park. I didn’t go on any rides as there really wasn’t much time, but walking around and taking everything in was pretty interesting. Radiator Springs from the Cars movie really stood out as well as A Bug’s Life were interesting too.

Day two I presented early in the morning. I felt pretty tired and lousy as I just hadn’t adjusted to the travel, time zone shift and the lack of sleep. I don’t feel as though my presentation went very well, and was through my slides in about 15 minutes (for a 45 minute presentation). However, we went over the allotted time with some excellent questions and answers. It was great to be able to give advice to other schools looking to successfully migrate in a similar manner as we did recently.

The Tackling Quality Control with XSL had some excellent suggestions that we will certainly look into, and Turn OU Campus into a Marketing Machine really got me excited to try out Google Optimize. Both those sessions really stood out to me as something we could certainly benefit from.

I did enjoy the workshops more this year than in years past. I’m not sure if they were better or if I was just better prepared with a couple years under my belt. I certainly learned a lot and am eager to share with the team.

Wednesday night was the Hackathon. Even though I was on the winning team last year, none of my teammates were to be found as this year’s OUTC. So I asked a random guy who was sitting alone if we wanted to team up with me. Our team was formed.

We bounced around a few ideas, but thought that leveraging the Google Vision API (which is amazingly powerful) to suggest or apply alt tags to images would be pretty amazing. If you feed the Google Vision API and image it will analyze it and suggest what it thinks the image is. We testing a dog photo out. Not only did it respond that is was a dog, but it also responded that it was a golden retriever. We were sold.

With only a few hours to work with, we split up the tasks and went right to work. Ryan was developing the Gadget that we would use within OU Campus and I went to work on the Google Vision API portion.

While we realized that we weren’t going to be able to complete the task by the deadline, we did focus on getting the core functionality done, so that we could demo the power of what we thought we were only by leveraging that particular API.

The 7 or 8 teams gave their short presentation then the judges left the room to pick a winner. While they were gone, I was pretty sure that the team that developed the file lock would win, with maybe the Insights project.

The judges returned and after a group drumroll announced that the Google Vision team had won. Both my partner and I sat there looking around for several seconds. We both assumed that they had announced another team as we winner. We were truly shocked and not prepared for that. It was an extremely fun time and felt pretty great to be able to win the Hackathon again.

All in all it was a very beneficial conference, and one that I was very glad to attend. While I wasn’t as impressed with Anaheim as I have been with San Diego or LA, it was still a pretty amazing adventure and the weather was perfect (even though I was indoors for almost all of it). Great and very useful time.

Comments (0)