best gaming chair

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.

Comments (0)

Microsoft Developer – Beginner’s Series to JavaScript

In my never ending quest to be a better developer I came across a new JavaScript series from Microsoft. I have to say I was pretty impressed with it. The videos are short and focused for folks who already have some programming knowledge. Still a bit in shock that Microsoft has embraced JavaScript, would have never guessed that a few years back, but very glad they have and are sharing so much with the community.

The particular videos that really stood out to me were the JavaScript Object Notation (JSON) and Objects in Javascript videos. Those were tough concepts for me to grasp when I had first started learning the language, and while I know them pretty well now, the author did a pretty amazing job of explaining how they work. It really clicked with me, and wish I had seen those two years ago!

I could still use some work on Promises and Async/Await, but the videos on those topics were extremely helpful too. While I can still use them, I can’t 100% say that I fully understand what I’m doing when I use them and wouldn’t want to have to explain how they work to others myself just yet. Ha, someday I’ll have them mastered.

Comments (0)

Hacktoberfest 2020

Hacktoberfest 2020 logo

While 2020 certainly hasn’t been the finest of years thus far, there have been some bright spots to the year. I’ve found that the my amount of online learning has gone up with so many of my other activities having gone down.

This year I’ve gone full speed into Hacktoberfest, and have already submitted my 4 pull requests! ok, 2 of them were rather simple pull requests, but 4 nonetheless. Hopefully I will get a t-shirt when it’s all said and done.

I believe my finest pull request went towards confetti.js. A pretty slick little script o display confetti on a page. I added the ability to customize the colors used in the confetti, and sent a Pull Request in. Hopefully it’s something they can incorporate.

Hacktoberfest does a really great job of going over the basics of using GitHub. While I do use GitHub often, there’s always something new to learn or a better way to do things using it.

While I typically keep myself rather busy, Hacktoberfest really just gets me excited to contribute to open source projects. A great event and looking forward to contributing to more projects, and hopefully score a free t-shirt!

Comments (0)

Codecademy – Learn JavaScript

A few months back I started the Learn JavaScript course on Codecademy. I was already fairly proficient with JavaScript, but always looking to up my skill plus get a better grasp of some of the ES6 and ES8 techniques that I know but when it comes to code typically stick with ES5.

This was my first course on Codecademy, and I have to say I was really impressed. The interface was great, very intuitive with the concepts chunked up into an easy to follow way.

I didn’t try the Projects and Quizzes as they’re part of the Pro membership (which I’m not seriously considering giving a shot), but everything else was pretty great. I’d say I learned a couple of new tricks and am a lot more comfortable using the newer ES6 syntax in my projects now.

I’d highly recommend Codecademy to those looking to learn to code or to improve their coding skills.

Comments (0)

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)