1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 17:46:39 -04:00

global header/navbar on all pages like a grown-up website (#17)

This commit is contained in:
2019-11-24 18:07:12 -05:00
committed by GitHub
parent 2bb25a6a5f
commit 8ccd15ab87
30 changed files with 616 additions and 640 deletions

View File

@ -1,21 +1,19 @@
---
title: "Jake Jarvis Front-End Web Developer in Boston, MA"
date: 2019-11-22 16:26:21-0400
date: 2019-11-24 13:57:25-0400
type: home
---
<header>
<img id="me" src="/me.jpg" height="160" width="160" alt="Photo of Jake Jarvis" title="Photo of Jake Jarvis">
<h1>Hi! I'm <a class="no-underline" rel="me author" href="/" title="Jake Jarvis">Jake Jarvis</a>. <span id="wave">&#x1F44B;<!--&#x1F3FB;--></span></h1>
<h2>I'm a frontend web developer based in <a href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3" title="&quot;Boston Accent Trailer - Late Night with Seth Meyers&quot; on YouTube" id="boston" target="_blank" rel="noopener noreferrer nofollow">Boston</a>.</h2>
</header>
<img id="me" src="/me.jpg" height="160" width="160" alt="Photo of Jake Jarvis">
<h2>Hey! I'm Jake. <span id="wave">&#x1F44B;<!--&#x1F3FB;--></span></h2>
<h3>I'm a frontend web developer based in <a href="https://www.youtube-nocookie.com/embed/rLwbzGyC6t4?hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3" title="&quot;Boston Accent Trailer - Late Night with Seth Meyers&quot; on YouTube" id="boston" target="_blank" rel="noopener noreferrer nofollow">Boston</a>.</h3>
<p>My recent focus has been on <a href="https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/" title="&quot;The Brutal Lifecycle of JavaScript Frameworks&quot; by Ian Allen" id="javascript" target="_blank" rel="noopener noreferrer nofollow">modern JavaScript frameworks</a> like <a href="https://reactjs.org/" title="React Official Website" id="react" target="_blank" rel="noopener noreferrer nofollow">React</a>, <a href="https://angular.io/" title="Angular Official Website" id="angular" target="_blank" rel="noopener noreferrer nofollow">Angular</a>, and <a href="https://vuejs.org/" title="Vue.js Official Website" id="vue" target="_blank" rel="noopener noreferrer nofollow">Vue</a> in front of <a href="https://nodejs.org/en/" title="Node.js Official Website" id="node" target="_blank" rel="noopener noreferrer nofollow">Node</a> and <a href="https://golang.org/" title="Golang Official Website" id="golang" target="_blank" rel="noopener noreferrer nofollow">Go</a> backends...</p>
<p>...but I'm fluent in classics like <a href="https://stitcher.io/blog/php-in-2019" title="&quot;PHP in 2019&quot; by Brent Roose" id="php" target="_blank" rel="noopener noreferrer nofollow">PHP</a>, <a href="https://www.ruby-lang.org/en/" title="Ruby Official Website" id="ruby" target="_blank" rel="noopener noreferrer nofollow">Ruby</a>, <a href="https://go.java/index.html" title="Java Official Website" id="java" target="_blank" rel="noopener noreferrer nofollow">Java</a>, <a href="https://isocpp.org/" title="Standard C++ Official Website" id="cpp" target="_blank" rel="noopener noreferrer nofollow">C++</a>, and <a href="https://www.python.org/" title="Python Official Website" id="python" target="_blank" rel="noopener noreferrer nofollow">Python</a> as well.</p>
<p>Whenever possible, I also prioritize my experience with <a href="https://bugcrowd.com/jakejarvis" title="Jake Jarvis on Bugcrowd" id="infosec" target="_blank" rel="me noopener noreferrer">information security</a>, <a href="https://martinfowler.com/articles/serverless.html" title="&quot;Serverless Architectures&quot; by Mike Roberts" id="server" target="_blank" rel="noopener noreferrer nofollow">server<span id="serverless">(less)</span> architecture</a>, <a href="https://github.com/kamranahmedse/developer-roadmap/blob/67a72aab113e79c11e292ada394606f079f6a263/images/devops.png" title="&quot;DevOps Roadmap&quot; by Kamran Ahmed" id="devops" target="_blank" rel="noopener noreferrer nofollow">efficient DevOps &amp; CI</a>, and the <a href="https://engineering.fb.com/data-center-engineering/tupperware/" title="&quot;Containerized Deployment at Facebook&quot; by Kenny Yu &amp; Chunqiang Tang" id="containers" target="_blank" rel="noopener noreferrer nofollow">containerization of everything</a>.</p>
<p>I fell in love with <a href="/y2k/" title="My Terrible, Horrible, No Good, Very Bad First Website" id="y2k" target="_blank" rel="noopener">frontend web design</a> and <a href="/notes/my-first-code/" title="Jake's Bulletin Board, circa 2003" id="jbb" target="_blank" rel="noopener">backend programming</a> when my only source of income was <a href="/birthday/" title="🎉 Cranky Birthday Boy on VHS Tape 📼" id="birthday" target="_blank" rel="noopener">the Tooth Fairy</a>. <span id="shh">(I've improved a little bit since those projects, I promise...)</span></p>
<p>I fell in love with <a href="/y2k/" title="My Terrible, Horrible, No Good, Very Bad First Website" id="y2k" target="_blank" rel="noopener">frontend web design</a> and <a href="/notes/my-first-code/" title="Jake's Bulletin Board, circa 2003" id="jbb">backend programming</a> when my only source of income was <a href="/birthday/" title="🎉 Cranky Birthday Boy on VHS Tape 📼" id="birthday">the Tooth Fairy</a>. <span id="shh">(I've improved a little bit since those projects, I promise...)</span></p>
<p>Since then, my side projects
<a href="https://tuftsdaily.com/news/2012/04/06/student-designs-iphone-joeytracker-app/" title="&quot;Student designs iPhone JoeyTracker app&quot; on The Tufts Daily" id="news-1" target="_blank" rel="noopener noreferrer nofollow">have</a> <!-- https://archive.fo/LZ3y0 --> <!-- /daily.pdf -->
<a href="/leo/" title="Powncer segment on The Lab with Leo Laporte (G4techTV)" id="news-2" target="_blank" rel="noopener">been</a>
<a href="/leo/" title="Powncer segment on The Lab with Leo Laporte (G4techTV)" id="news-2">been</a>
<a href="https://money.cnn.com/2007/06/01/technology/facebookplatform.fortune/index.htm" title="&quot;The new Facebook is on a roll&quot; on CNN Money" id="news-3" target="_blank" rel="noopener noreferrer nofollow">featured</a> <!-- https://archive.fo/Juzjc -->
<a href="https://adage.com/article/small-agency-diary/client-ceo-s-son/116723/" title="&quot;Your Next Client? The CEO&#39;s Son&quot; on Advertising Age" id="news-4" target="_blank" rel="noopener noreferrer nofollow">in</a> <!-- https://archive.fo/Hzuyx -->
<a href="https://books.google.com/books?id=RRUkLhyGZVgC&amp;lpg=PA226&amp;dq=%22jake%20jarvis%22&amp;pg=PA226#v=onepage&amp;q=%22jake%20jarvis%22&amp;f=false" title="&quot;The Facebook Effect&quot; by David Kirkpatrick (Google Books)" id="news-5" target="_blank" rel="noopener noreferrer nofollow">various</a>
@ -24,3 +22,4 @@ type: home
</p>
<p>You can find some of my work on <a href="https://github.com/jakejarvis" title="Jake Jarvis on GitHub" id="github" target="_blank" rel="me noopener noreferrer">GitHub</a> or <a href="https://www.linkedin.com/in/jakejarvis/" title="Jake Jarvis on LinkedIn" id="linkedin" target="_blank" rel="me noopener noreferrer">LinkedIn</a>, my adventures on <a href="https://twitter.com/jakejarvis" title="Jake Jarvis on Twitter" id="twitter" target="_blank" rel="me noopener noreferrer">Twitter</a>, <a href="https://www.facebook.com/jakejarvis" title="Jake Jarvis on Facebook" id="facebook" target="_blank" rel="me noopener noreferrer">Facebook</a>, <a href="https://www.instagram.com/jakejarvis/" title="Jake Jarvis on Instagram" id="instagram" target="_blank" rel="me noopener noreferrer">Instagram</a>, or <a href="https://mastodon.social/@jakejarvis" title="Jake Jarvis on Mastodon" id="mastodon" target="_blank" rel="me noopener noreferrer">Mastodon</a>, and my standard <a href="/resume.pdf" title="View PDF Resume" id="resume" target="_blank" rel="noopener">PDF resume here</a>.</p>
<p>If any of this fits with what you're looking for, I'd love to hear from you via <a href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Send Email" id="email">email</a><sup>&nbsp;<a class="no-underline" href="https://keybase.io/jakejarvis/pgp_keys.asc?fingerprint=87fb4b6006dd1beb3ed47fabd36cb66f4002b25b" title="Jake Jarvis&#39;s Public Key on Keybase" id="pgp" target="_blank" rel="noopener noreferrer nofollow">D36C B66F 4002 B25B</a></sup>, <a href="https://twitter.com/messages/compose?recipient_id=229769022" title="Send Direct Message on Twitter" id="dm" target="_blank" rel="noopener noreferrer nofollow">DM</a>, or <a href="sms:+1-617-917-3737" title="Send SMS: +1 (617) 917-3737" id="sms">text</a>!</p>
<p id="blog"><a href="/notes/" title="My Blog" rel="me"><span>&#x1F4DD;</span> Read more at my blog...</a></p>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 258 KiB

After

Width:  |  Height:  |  Size: 352 KiB

View File

@ -22,17 +22,17 @@ I've been trying out [Netlify Analytics](https://www.netlify.com/products/analyt
---
## 👍&nbsp; Pros
## 👍&nbsp; Pros {#pros}
Pretty much all of the benefits of Netlify Analytics stem from the fact that it's **purely server-side software**. This is what singularly sets it apart from [Google Analytics](https://analytics.google.com/analytics/web/) — by _far_ the [status quo](https://trends.builtwith.com/analytics/Google-Analytics) — and even self-hosted, open-source applications I've tried like [Matomo](https://github.com/matomo-org/matomo) and [Fathom](https://github.com/usefathom/fathom).
### ⚡&nbsp; Speed
### ⚡&nbsp; Speed {#speed}
To start using Netlify Analytics, you press a few buttons on the Netlify dashboard and voilà. No need to copy and paste some obfuscated JavaScript snippet into the `<head>` of each page, which is a painful task for those of us who care about speed and efficiency on the web.
On top of sending yet another DNS request to one of Google's domains — and more HTTP payloads for each outgoing click, file downloaded, etc. — Google's `analytics.js` script is currently 43 KB. For a site like [nytimes.com](https://www.nytimes.com/), which transfers **nearly 20 MB** on its homepage, this is negligible. But for simple sites like mine, which I've [painstakingly optimized](https://gtmetrix.com/reports/jarv.is/uOzCBKlv) (mostly for fun, don't judge), that doubles the size of my homepage. Matomo's script, weighing in at 65 KB, made it even worse.
### 🕵️‍♂️&nbsp; Privacy
### 🕵️‍♂️&nbsp; Privacy {#privacy}
This is the big one.
@ -46,7 +46,7 @@ Instead, Netlify Analytics pulls and compiles data from server logs on each of t
Netlify does store some short-term data, like IP addresses, as any normal hosting provider does. But for the purposes of analytics, the data is anonymized and only used to determine things like unique visitors vs. individual page views — and not shown to the customer. [Netlify's DPA](https://www.netlify.com/gdpr/) (Data Processing Agreement) is one of the most conservative I've seen on the web.
### 🛑&nbsp; AdBlock Immunity
### 🛑&nbsp; AdBlock Immunity {#adblock-immunity}
Ad blocking is becoming commonplace on the World Wide Web with [over 25% of users](https://www.statista.com/statistics/804008/ad-blocking-reach-usage-us/) reportedly installing extensions to do so as soon as their new browser touches the net. And for good reason, since most of them also [block cross-site tracking scripts](https://moz.com/blog/analytics-black-holes) like Google's by default.
@ -62,15 +62,15 @@ _Side note: This section has also become cluttered with requests from script kid
---
## 👎&nbsp; Cons
## 👎&nbsp; Cons {#cons}
### 💰&nbsp; Price
### 💰&nbsp; Price {#price}
Netlify is one of the most awesome free-as-in-beer services on the web today, providing a fast CDN and instant deployments at zero cost (up to a pretty insane amount, of course). But if you want to add Netlify Analytics, your bill suddenly jumps to [$9 a month](https://www.netlify.com/pricing/#analytics). **Nine dollars!** That's over **$100 per year!** If you have more than 250,000 visitors per month, the cost can be even higher (to the point where you'll need to contact Netlify's sales team).
It makes sense that Netlify needs to subsidize the cost of providing free enterprise-grade web hosting for the rest of its non-enterprise users to stay alive. But when Google Analytics is free, this is a pretty tough ask for any hobbyist — even if Google is [getting more from them](https://support.google.com/analytics/answer/1011397?hl=en) than they are from Google. 😬
### 📈&nbsp; Accuracy
### 📈&nbsp; Accuracy {#accuracy}
{{< image src="images/sources-bandwidth.png" alt="Referrer and bandwidth tracking on Netlify Analytics" >}}
@ -82,7 +82,7 @@ Another benefit of using Google's own analytics service becomes glaringly appare
One more note: since Netlify doesn't process IP addresses or user agents, bots crawling your site (like [Googlebot](https://support.google.com/webmasters/answer/182072?hl=en) and [Bingbot](https://www.bing.com/webmaster/help/which-crawlers-does-bing-use-8c184ec0)) get counted towards your stats, possibly overinflating your ego a little more than it should.
### ⏱️&nbsp; Historical Data
### ⏱️&nbsp; Historical Data {#historical-data}
{{< image src="images/overview.png" alt="Overview of Netlify Analytics stats" >}}

View File

@ -19,7 +19,7 @@ More recently, though, little-known hidden Easter eggs on ["404 Not Found"](http
---
## 1. Elizabeth Warren — [elizabethwarren.com](https://elizabethwarren.com/asdfasdf404)
## 1. Elizabeth Warren — [elizabethwarren.com](https://elizabethwarren.com/asdfasdf404) {#warren}
I'm a _huge_ sucker for Kate McKinnon's spot-on impression of Warren on Saturday Night Live. And [unfortunately](https://twitter.com/realdonaldtrump/status/1097116612279316480), seeing a campaign embrace SNL is like a breath of fresh air these days. [Watch all of the Kate McWarren videos so far here; you won't regret it.](http://www.nbc.com/saturday-night-live/cast/kate-mckinnon-15056/impersonation/elizabeth-warren-287903)
@ -27,7 +27,7 @@ I'm a _huge_ sucker for Kate McKinnon's spot-on impression of Warren on Saturday
---
## 2. Bernie Sanders — [berniesanders.com](https://berniesanders.com/asdfasdf404/)
## 2. Bernie Sanders — [berniesanders.com](https://berniesanders.com/asdfasdf404/) {#sanders}
Although the designer who selected this GIF likely had _thousands_ of choices when searching "[Bernie finger wagging GIF](https://www.google.com/search?q=Bernie+finger+wagging+GIF&tbm=isch&tbs=itp:animated)," the text beside it is well-written and funny — even though we both know putting a page at [berniesanders.com/zxcliaosid](https://berniesanders.com/zxcliaosid/) probably won't be a top priority of a President Sanders.
@ -35,7 +35,7 @@ Although the designer who selected this GIF likely had _thousands_ of choices wh
---
## 3. Joe Biden — [joebiden.com](https://joebiden.com/asdfasdf404)
## 3. Joe Biden — [joebiden.com](https://joebiden.com/asdfasdf404) {#biden}
Uncle Joe has a nice and simple 404 page. I like it, along with the Ray-Bans and his choice of vanilla ice cream.
@ -43,7 +43,7 @@ Uncle Joe has a nice and simple 404 page. I like it, along with the Ray-Bans and
---
## 4. Beto O'Rourke — [betoorourke.com](https://betoorourke.com/asdfasdf404)
## 4. Beto O'Rourke — [betoorourke.com](https://betoorourke.com/asdfasdf404) {#orourke}
A ballsy move, considering Beto's infamous [DUI arrest](https://www.politifact.com/texas/statements/2019/mar/14/club-growth/beto-orourke-arrested-dwi-flee-scene/) in the '90s — but still a clever ask for a donation and a great use of a GIF, even if it's left over from his Senate campaign.
@ -51,7 +51,7 @@ A ballsy move, considering Beto's infamous [DUI arrest](https://www.politifact.c
---
## 5. Kamala Harris — [kamalaharris.org](https://kamalaharris.org/asdfasdf404)
## 5. Kamala Harris — [kamalaharris.org](https://kamalaharris.org/asdfasdf404) {#harris}
Another clean and simple page with a top-notch GIF. It injected some emotion into visiting [kamalaharris.com/alskdjf](https://kamalaharris.com/alskdjf).
@ -59,7 +59,7 @@ Another clean and simple page with a top-notch GIF. It injected some emotion int
---
## 6. Pete Buttigeg — [peteforamerica.com](https://peteforamerica.com/asdfasdf404/)
## 6. Pete Buttigeg — [peteforamerica.com](https://peteforamerica.com/asdfasdf404/) {#buttigeg}
I love, love, _love_ Pete's design for his whole campaign, and his beautiful 404 page is no exception. In case you didn't know, Pete for America has an entire ["Design Toolkit"](https://design.peteforamerica.com/) publicly available for all to view and use, with really cool and in-depth explanations for all of their choices — even their [color palette](https://design.peteforamerica.com/colors). Very progressive indeed.
@ -67,7 +67,7 @@ I love, love, _love_ Pete's design for his whole campaign, and his beautiful 404
---
## 7. Cory Booker — [corybooker.com](https://corybooker.com/asdfasdf404/)
## 7. Cory Booker — [corybooker.com](https://corybooker.com/asdfasdf404/) {#booker}
Love the photo choice. But although pains me to go against my Senator from my home state, I still _cannot stand_ his choice of font. Oh well, I guess that's now a criterion for running for president in 2020.
@ -75,7 +75,7 @@ Love the photo choice. But although pains me to go against my Senator from my ho
---
## 8. Andrew Yang — [yang2020.com](https://www.yang2020.com/asdfasdf404)
## 8. Andrew Yang — [yang2020.com](https://www.yang2020.com/asdfasdf404) {#yang}
Not sure if donating to Yang 2020 will help put a page at [yang2020.com/alsdjfzoif](https://www.yang2020.com/alsdjfzoif) — the actual URL I visited to grab this screenshot — but the Bitmoji Andrew looks pretty chill.
@ -83,7 +83,7 @@ Not sure if donating to Yang 2020 will help put a page at [yang2020.com/alsdjfzo
---
## 9. Amy Klobuchar — [amyklobuchar.com](https://amyklobuchar.com/asdfasdf404)
## 9. Amy Klobuchar — [amyklobuchar.com](https://amyklobuchar.com/asdfasdf404) {#klobuchar}
This is the 404 page of someone who won't forget the [Midwestern roots](https://en.wikipedia.org/wiki/Uff_da) she comes from once she moves into the White House...or writes a memoir about her campaign from her Minnesota home.
@ -91,7 +91,7 @@ This is the 404 page of someone who won't forget the [Midwestern roots](https://
---
## 10. Steve Bullock — [stevebullock.com](https://stevebullock.com/asdfasdf404)
## 10. Steve Bullock — [stevebullock.com](https://stevebullock.com/asdfasdf404) {#bullock}
I'll never publicly say anything against a good Dad joke. This is no exception.
@ -99,7 +99,7 @@ I'll never publicly say anything against a good Dad joke. This is no exception.
---
## 11. Michael Bennet — [michaelbennet.com](https://michaelbennet.com/asdfasdf404)
## 11. Michael Bennet — [michaelbennet.com](https://michaelbennet.com/asdfasdf404) {#bennet}
Another quality Dad joke here.
@ -107,7 +107,7 @@ Another quality Dad joke here.
---
## 12. John Delaney — [johndelaney.com](https://www.johndelaney.com/asdfasdf404)
## 12. John Delaney — [johndelaney.com](https://www.johndelaney.com/asdfasdf404) {#delaney}
Yet another Dad joke? I honestly had the hardest time ranking these three.
@ -115,7 +115,7 @@ Yet another Dad joke? I honestly had the hardest time ranking these three.
---
## 13. Marianne Williamson — [marianne2020.com](https://www.marianne2020.com/asdfasdf404)
## 13. Marianne Williamson — [marianne2020.com](https://www.marianne2020.com/asdfasdf404) {#williamson}
A 404 page only a motivational author and speaker running for president could envision.
@ -123,7 +123,7 @@ A 404 page only a motivational author and speaker running for president could en
---
## 14. The Donald — [donaldjtrump.com](https://donaldjtrump.com/asdfasdf404)
## 14. The Donald — [donaldjtrump.com](https://donaldjtrump.com/asdfasdf404) {#trump}
I guess this would be slightly humorous...four years ago. Time to move on from your middle-school crush, Donny.
@ -135,25 +135,25 @@ I guess this would be slightly humorous...four years ago. Time to move on from y
These candidates haven't configured a custom 404 page, settling for the default Drupal or WordPress text. Do they _really_ think they can run the free world with their websites in this shape? 🙄 _&lt;/s&gt;_
### Julián Castro — [julianforthefuture.com](https://www.julianforthefuture.com/asdfasdf404)
### Julián Castro — [julianforthefuture.com](https://www.julianforthefuture.com/asdfasdf404) {#castro}
{{< image src="images/castro.png" alt="Julián Castro" >}}
---
### Wayne Messam — [wayneforusa.com](https://wayneforusa.com/asdfasdf404)
### Wayne Messam — [wayneforusa.com](https://wayneforusa.com/asdfasdf404) {#messam}
{{< image src="images/messam.png" alt="Wayne Messam" >}}
---
### Tulsi Gabbard — [tulsi2020.com](https://www.tulsi2020.com/asdfasdf404)
### Tulsi Gabbard — [tulsi2020.com](https://www.tulsi2020.com/asdfasdf404) {#gabbard}
{{< image src="images/gabbard.png" alt="Tulsi Gabbard" >}}
---
### Joe Sestak — [joesestak.com](https://www.joesestak.com/asdfasdf404)
### Joe Sestak — [joesestak.com](https://www.joesestak.com/asdfasdf404) {#sestak}
{{< image src="images/sestak.png" alt="Joe Sestak" >}}