I want to record traffic to my site, but I want to make sure that the statistics are anonymous. Let's practice our Javascript and system design.
+ + + +I'm trying to break into the industry, and I think knowing the memory-safe programming language Rust will set me apart from my peers. Let's begin this journey.
diff --git a/js/portfolio.js b/js/portfolio.js new file mode 100644 index 0000000..83f5059 --- /dev/null +++ b/js/portfolio.js @@ -0,0 +1,40 @@ +// Add event listeners to the skill cards +const skillCards = document.getElementsByClassName("skill-card"); +for (let card of skillCards) { + console.log(card); + card.addEventListener("mouseover", function focusElement() { + let cardHeader = this.querySelector("h2"); + + this.style.transitionDuration = "200ms"; + this.style.backgroundColor = "#e74c3c"; + this.style.padding = "20px"; + + cardHeader.style.transitionDuration = "400ms"; + cardHeader.style.fontSize = "2rem"; + + + }); + + card.addEventListener("mouseout", function unfocusElement(e) { + this.style.backgroundColor = "#2c3e50"; + this.style.padding = "10px"; + + let cardHeader = this.querySelector("h2"); + cardHeader.style.transitionDuration = "200ms"; + cardHeader.style.fontSize = "1.5rem"; + }); + +} + +function showDetails(elem) { + let projectDetailsId = "project-details-" + elem.id; + let details = document.getElementById(projectDetailsId); + if (details.style.display === "none") { + console.log("DISPLAYING"); + details.style.display = "block"; + elem.textContent = "Show Less"; + } else { + details.style.display = "none"; + elem.textContent = "Show More"; + } +} diff --git a/portfolio/index.html b/portfolio/index.html index 2b22072..8b0c70d 100644 --- a/portfolio/index.html +++ b/portfolio/index.html @@ -14,7 +14,7 @@ rel="stylesheet" /> - +diff --git a/posts/index.html b/posts/index.html index 30e17a1..49a124d 100644 --- a/posts/index.html +++ b/posts/index.html @@ -14,7 +14,7 @@ rel="stylesheet" /> - +
rust
I'm trying to break into the industry, and I think knowing the memory-safe programming language Rust will set me apart from my peers. Let's begin this journey.
I want to record how many visitors I get on my site. I'll give you a hint: it's not many. However, I would like a general number.
+This kind of project also helps me practice my system design a little bit, because there's a unique challenge: How can I call an API using Javascript while keeping that API secure? I don't want bad actors enumerating my API and potentially getting access to my data.
+Let's dive in.
+One very important part of this project is that the information has to be anonymous. No IP addresses, no hardware information, no geolocation, etc. So what can we gather?
+Well, for starters, we can gather that a page view did, in fact, take place. Let's start there.
+We'll need to set up an event listener and detect when the page loads. After the page loads, we'll wait just a few seconds to make sure the site visit was actually done by a human.
+// littleBrother.js
+
+document.addEventListener('DOMContentLoaded', () => {
+ // Only record a proper view after a few seconds has passed
+ setTimeout(recordView, 2000)
+});
+I named my little started script littleBrother.js as a call back to Big Brother. It's just not quite as bad.
First, we:
+recordView functionTo properly handle the view and the associated data we'll collect later, I'm going to stuff all this information into a simple class.
+// littleBrother.js
+
+class View {
+ constructor () {
+ this.timestamp = new Date();
+ }
+}
+we'll add a few more fields to this class later.
+Now that we have a container to hold our view, lets actually record the view.
+// littleBrother.js
+
+function recordView () {
+ console.log('View recorded.');
+
+ // Construct the view
+ let view = new View();
+}It's that simple. After our timer from above elapses, call this function, who creates the View object.
+I want this information to be anonymous, but I still want some more basic information. Let's also gather:
+So far, we've had it really easy: just construct a new object and get it ready to send off the server so that a "view" is recorded. Let's take it a step further.
+I did some local testing and had mixed results using some of the web APIs available in vanilla Javascript, so I came up with this:
+
+// Grabbing the operating system with some basic error handling
+ let navigatorData = navigator.userAgentData;
+ let platform;
+ if (!navigatorData) {
+ console.log('userAgentData not available. Using navigator.')
+ navigatorData = navigator;
+ platform = navigator.oscpu;
+ if (!platform) {
+ platform = 'Unknown';
+ }
+ } else {
+ platform = navigatorData.platform;
+ }
+First, we attempt to grab the userAgentData object. Sometimes, though, I found this value to be undefined when testing on various browsers. We'll do a bit of error checking here:
navigatorData variable is falseoscpu value.If the truthiness value of navigatorData is true, then we know that the userAgentData is available to us, so we can just call the platform property.
I'm almost positive there are better, more comprehensive ways to accomplish this, but this has worked for me so far. Let's adjust our View class.
+class View {
+ constructor () {
+ this.timestamp = new Date();
+ this.platform;
+ }
+}Now, we can set this property.
+// littleBrother.js
+
+function recordView () {
+
+ console.log('View recorded.');
+ console.log(navigator.appName);
+
+ // Grabbing the operating system with some basic error handling
+ let navigatorData = navigator.userAgentData;
+ let platform;
+ if (!navigatorData) {
+ console.log('userAgentData not available. Using navigator.')
+ navigatorData = navigator;
+
+ platform = navigator.oscpu;
+ if (!platform) {
+ platform = 'Unknown';
+ }
+ } else {
+ platform = navigatorData.platform;
+ }
+
+ // Construct the view and get it ready for transport
+ let view = new View();
+ view.platform = platform;
+}
+This part is super easy, but super important to accurately track page views. Since we already constructed our View object earlier, and I don't have to do much extra work here, I'm going to add and directly set some new properties on my View class.
+class View {
+ constructor () {
+ this.timestamp = new Date();
+ this.platform;
+ this.path;
+ this.site;
+ this.fullURL;
+ }
+}Now we simply set the values like so in the recordView function.
// littleBrother.js
+
+function recordView () {
+ // Let the unload script know that this isn't a bounce visit
+ bounceVisit = false
+
+ console.log('View recorded.');
+ console.log(navigator.appName);
+
+ // Grabbing the operating system with some basic error handling
+ let navigatorData = navigator.userAgentData;
+ let platform;
+ if (!navigatorData) {
+ console.log('userAgentData not available. Using navigator.')
+ navigatorData = navigator;
+
+ platform = navigator.oscpu;
+ if (!platform) {
+ platform = 'Unknown';
+ }
+ } else {
+ platform = navigatorData.platform;
+ }
+
+ // Construct the view and get it ready for transport
+ let view = new View();
+ view.platform = platform;
++ view.path = window.location.pathname;
++ view.site = window.location.origin;
++ view.fullURL = window.location.href;
+}
+That's it! We now have some basic stats that are indeed anonymous.
+We now have some decent information that we can record in a datastore. That's all we'll do for now, as we'll need to actually start designing our system next, and recruit some help from our friendly cloud compute providers.
+This file is not being distributed with the site just yet, so don't go looking for it! I want to have the system in place before taking up your bandwidth with an extra HTTP request.
+