Category: Design

Categories
Design Development

3D Printed a Broken Bike Part

A little plastic part that worked to support the magnet above an exercise bike’s flywheel had broken, making the bike only work on it’s hardest level. Not fun to pedal against such a harsh setting.

So we decided to see if we could 3D print a replacement piece, since the supply chain is making getting access to parts pretty tough.

This was my first attempt at 3D printing. So I starting with tinkercad, and watched a few of their tutorials. The web interface seemed fairly easy to pick up, just had to set aside some time to try to recreate the broken part in CAD with the assistance of a metric ruler to make sure I was being accurate.

Turned out I really enjoyed drawing the part. Took me back to my mechanical drawing classes back in Shop class in grade school. Always enjoyed mechanical drawings.

All I had to do now was export my drawing to a .stl file format and find a printer to create it. I checked to see what options were nearby and some online options too. The nearby Ocean City Library had a 3D printer and only charged $1 an hour. Couldn’t pass that deal up.

So I emailed them my .stl file and had it all ready to pick up the very next day. They were really awesome about it. Asked me what color I preferred it be printed as, very helpful.

Got home with the new part, swapped it only the bike and like magic all seems to be working well again. Will be interesting to see how it holds up in use, but thus far seems to be quite durable.

It was awesome, I’m still excited it worked! Eager to try printing more 3D things.

Categories
Design Development

Microsoft Azure U.S. Hack for Accessibility

Had a lot of fun working on the Microsoft Azure U.S. Hack for Accessibility. Paired up with 4 really great and random teammates on this one. We would up making AI Dog, which was a service that specialize in providing accessible directions for users to safely and more easily navigate to a campus. Here’s the entry on DevPost.

I had a great experience working with this team and thought we came up with a very creative idea. There’s a lot going on in the project, but it ultimately uses the Google Streetview API to grab photos of a college campus, that we then analyze using the Azure Computer Vision API to determine whether the photo is an accessible scene or not. We then use the data from the location photos to determine the most accessible route a user is searching on using our accessible website.

One of our teammates did an amazing job setting up the backend in Python. I’ll try to find the path to his repo. It really was amazing work, I’m still impressed at his skills. It was ultimately turned into an Azure Function, which we could then call on a simple web page.

I helped out on the frontend. Using Bootstrap 5 for the basic grid and applying a good amount of Javascript for the UI.

I really thought we had a good shot at winning this one, but the other entrants were just as if not more deserving as well. What a great experience. If I could go back I’d have us spend just a little bit more time on the presentation.

Categories
Design Development

Terminal >Hackathon

So I entered another hackathon through DevPost. This one was for Terminal >Hackathon Tech Takes On Mental Health. We had to come up with something for mental health.

I paired up with with someone from the previous hackathon and I believe two others joined in. With the short turnaround I was the only developer on this one, but everyone chipped in other ways.

We would up making Tell Me Something Good. It’s a basic page that allows a user to input how they are feeling. It then sends that submission to the Google Cloud Natural Language REST API. The API takes the text submitted and analyzes it’s sentiment, returning a score. A 1 or it’s very positive, a -1 if it’s extremely negative, with increments in between.

It’s actually a pretty slick API. We threw all sorts of sentences and paragraphs at it, and the ML (machine learning) really does an amazing job of giving accurate results.

An example of the project can be found here on Glitch:

https://maize-sable-triceratops.glitch.me

and on GitHub here:

https://github.com/joedag32/cheerup-gcnl-api

This one was very fun too. It took me a little bit to the the authorization going with the REST API, but once I got it going it was very flexible and easy to work with. I’m starting to get some very creative uses of sentiment analysis.

Categories
Design Development

Microsoft Azure Hack for Social Justice

PrivIQ logo

Just wrapped up our team’s entry for the Microsoft Azure Hack for Social Justice hosted on Devpost. It was such a fun experience.

I signed up pretty early on, but was having a really hard time finding teammates. I asked some friends and some strangers with no luck. Just as I thought oh well, it’s a no go for me I got a request to join a team.

My team was great, with people located all over the country. Many in school and some with full-time jobs. It was a solid mix.

We ultimately developed PrivIQ. It is an Edge Extension that helps simplify if a site collects private data on a visitor.

My task was to create the NLP (neural linguistic programming). So I had to analyze privacy policy text and determine if the policy should alert a visitor that it does collect their private data.

I decided to use the Azure Text Analytics client library. Their API works great with Javascript and their Key Phrases service was a great fit. I was able to pass text from a privacy policy with a POST request to the API with Fetch and it would analyze the text and return an object of key terms.

What really impressed me most was how fast the Text Analytics analyzed and returned the response. I was sending over 5000 characters and it was milliseconds in its return. I wasn’t expecting such an immediate response.

So once we got our response of key words, we then compared them to our list of privacy terms we were looking for. Depending on how many matches were returned we either alerted the visitor through the Extension that yes your data is being collected, or that it may be being collected.

Luckily I got that part down with more than a week to spare. I’d say I got a lot better at sending and receiving POST requests to an API in vanilla Javascript. So that was a big plus!

Other team members worked on the design of the extension, the web scraper that would called the privacy text from a site and putting it all together in an Edge Extension.

Unfortunately we had a hard time getting our scraper to work in the Extension. There were some CORS issues (which did make sense), and we attempted to called an outside server side script like and API at the last moment, but alas ran out of time.

I would like to continue to learn how to better write an Azure Function. That’s the route I would have like to of taken.

We got our almost fully operational example submitted just a few minutes ago, and am really glad I participated. It really was a lot of fun and forced me to learn some new/better ways of coding.

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.