Author: Joe

Categories
application Design Development Projects website

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

Categories
Design Development

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.

Categories
Development

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.

Categories
Adventure Books Development Projects Uncategorized

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.

Categories
Adventure

My Pandemic Birthday

So this birthday was a bit different as it took place during a pandemic. So that ruled out adventuring somewhere, getting something to eat out, etc.

The day started with with my kind co-workers all putting up custom birthday themed backgrounds for our Microsoft Teams meeting. That was a very nice of them, it was funny. I also received some pretty amazing videos and greetings on social media.

Of note was an amazing happy birthday song by Michale Bolton and the most epic happy birthday video I’ve ever seen. I still chuckle at both while typing this.

After work I stopped over to my parents. Had dinner with them and we had some ice cream cake. The cake was great, it was from Dairy Queen and I have to admit it tasted much better than in the past. I think I was told they’re under new ownership, not sure.

Stacey stopped over the next day and brought some gifts with her. Got some nice dumbbells (couldn’t of been too fun for her to carry them up my steps), The OuterWorlds for PS4, an Escape the Crate escape room in a box, and The Master Theorem book.

The dumbbells are great. Not able to go to the gym, they’ll really come in handy. They’re nice ones too, not something you get at a yard sale. The Escape the Crate was great. It comes with 2 escape rooms, and we went through one of them that night. It was challenging, but very fun. A great idea.

The Master Theorem book has been quite the hit thus far. It’s full of really complex and unique puzzles. They’re tough, but it is very satisfying when you solve one. Highly recommended.

As well as a Lego mini-figure I also got an ice cream pie and a pint from Springer’s in Stone Harbor. Amazing ice cream, and a big surprise. Several days later I would begin to regret so much ice cream at once, but it was fine to have such treats!

So while it was a bit different without being able to go places, I was still quite happy. Definitely a memorable b-day!

Categories
Uncategorized

1st Week Working from Home

Due to the COVID-19 pandemic I started to work from home beginning last Wednesday. Work had been extremely busy and at times stressful dealing with the unique and trying situation, so social distancing is being put to the test.

Working on the web, my role translate favorably to a work at home schedule. My trusty MacBook Pro can handle any task I would have done in the office. So technology isn’t much of a concern. How things go without being able to interact directly with humans will be the true challenge.

The first few days were extremely busy. This in uncharted territory and our team is very busy and doing as best a job as we can given the circumstances. so even though I’m home, I’m still very much occupied.

I’m been able to communicate with the rest of my team via email and with our latest addition to our toolset, Microsoft Teams. When we found out late on Tuesday we would be working from home beginning the next name, I immediately had us setup some Teams and we gave ourselves a quick 10 minute run-through of how we may be able to use it from.

All things considering, it’s been working extremely well thus far. Everyone at our institution is available in the chat (assuming they’re using it), so that’s a huge plus for us. The video chat quality and ease of use has been most impressive. We have 14 users, with probably 10 or 11 using the video chat and the rest on audio chat with no issues. As clear as can be.

Microsoft Teams will officially be a part of my daily work going forward, even when we do return to the office. It’s been a great friend.

Work from Home Tools:

  • MacBook Pro 13″
  • Office 365
  • OneDrive
  • Google Drive
  • Adobe Creative Cloud
  • Visual Studio Code
  • Microsoft Teams
  • GitHub
  • A chair and table (it’s not a very comfy chair)
  • A place to stand and work (using an exercise mat to stand on really helps)

Supervising looks to be interesting. Teams has really done a solid job of making it not too awkward. We can have meetings without too much issue, sharing our screens when necessary, and just using old fashioned chat and link/file sharing to get the job done. Thus far not losing too much of a step.

The first week we were so busy in crisis mode, we didn’t have to get too creative in coming up with projects and managing folks. I’m sure the next days will be similar, but it will be interesting to see how it goes should things slow down. I’ve always been a self starter, but I’d like to see how everyone else adapts as well.