Since moving this site to Next.js, I've had to figure out the best way to serve my Google Analytics script. Here is how I did it, 

which is based on this example published by Vercel.

Getting Your Google Analytics Tracking ID 

If you haven't already, go to Google Analytics and sign up for an account. This post won't go into the details of that but it's pretty easy. Once you're logged in to your account, grab your Tracking ID that looks like this: 

Environment Variables With Next.js and Vercel

If you're not using Vercel for your deployment, that's ok - these steps will still apply to you and whatever hosting option you're using. There's just some extra sweet stuff that Vercel does to make life easier for this step. 

We're going to add our Tracking ID as an environment variable. This isn't super important since it's publicly available info when your page loads - but I like to have all my config in one spot and also why not. To make an environment variable public in Next, we need to start the name of this variable with 

. This tells Next to make sure that we can use it in the browser, which is exactly what we want when adding our analytics variable.

Create an .env.local file the root of your Next app. Make sure to go to your .gitignore and add .env.local so that you do not commit this file. 

Go to your hosting provider and add that variable and value. If you're using Vercel, it's really easy to do through the Dashboard of the project and configure it. What's also neat about using Vercel is that you can run 

 in the root of the project to generate the project's .env.local file on-the-fly, which rules.

Now we need to read this environment variable and in our analytics script. Add a file called 

 in the Pages folder. In this file, we can interact with the document's 

 tags. This is the file where you can add stuff including font URLs, custom meta tags, and in our case - Google Analytics. 

 file where you can interact with the document's  

, if you wanted to have a dynamic page title, for example, you could import Head from next/head to a Layout component to populate a custom page title or any custom script/meta value. You won't need to copy all of your analytics stuff over, either, since it just appends to the 

Now you'll want to send some test traffic to make sure it's working. Deploy your most recent changes. Go to your analytics account and click the "Send test traffic" button (Admin > Tracking Info > Tracking Code). You should see stuff populate - if not, go to your live site and inspect the script in the HTML. Make sure the script is there with your Tracking ID.

Once that's all good, you can filter out you and your team's IP addresses so that Analytics doesn't count your visits as page hits. 

  and copy it. Go to Admin > Filters > Add Filter. Add in all the relevant IPs that should be ignored. 

This should get you all setup with analytics in Next.js. Good luck!

Adding Google Analytics to a Next.js App

I was a teacher for three years right out of college and made a career switch to web development just over two years ago. Some of the stuff in this post I did prior to getting my first web dev job and some of these are based on a reflection of my experience while working over the past couple years. 

Please note - these are just some tips I think might be helpful for someone curious about making a career switch and aren't meant to be a step-by-step "guide" to getting a web gig. There's a lot of stuff not in here, too, that I could probably ramble about for a while in another post. 

This is really just a post to share some more practical steps to learning more about the web and getting a job. Thanks for reading!

Consider Learning SEO and Basic Marketing

There are a lot of agency jobs where someone is needed who is both technical and able to understand the jargon and purpose of good SEO. Learning SEO will teach you how to make data-driven decisions for the web and to learn more about how Google ranks content. As a new developer, it can be a good way to get in the door and is exactly what I did. Agencies frequently look for people who can wear many hats - SEO, development, project management, talking with clients. 

Technical SEO involves things like page speed optimization, accessibility implementations, and can also include installing marketing tools like Google Tag Manager, Google Analytics, Yotpo reviews, and the list goes on of random stuff you might be asked to add... More on the devlopment side of things, it can also include implementing user experience enhancements, building new pages, customizing existing features, and more.

More on the marketing side of things, I suggest signing up for an 

 weeklong trial. It’s a great way to learn about keyword research and understand how the web ranks things. Read through some of their tutorials (which are awesome) before signing up so you can maximize your time using the tool rather than having to learn what it is.

Other than knowing a bit about Git and GitHub, aren't many barriers to show off your learning progress immediately. No matter how simple it is - a cool linear gradient in CSS, a simple React project, or a tricky JavaScript problem - there are loads of ways to show employers that you know how to use Git while also showing how you're learning. I think that even the simplest things when you're starting out should be documented in a repo and shown to potential employers.

For example, I do little JavaScript challenges on 

 a couple times a month and push my answers to a Git repository called "programming challenges." It doesn't have to be super complicated or advanced - just show 

 you're learning! If you have stuff on CodePen or Codesandbox, push that to a repo, too! Show your potential employer that you’re a real life human being and how you think! Curiousity about the web goes a long way.

 to publish your projects. If a project is on GitHub, it's only a few clicks away to get it on a domain and show off.

This is where I think new developers can get kind of intimidated into thinking they have to have some flashy site with parallax scrolling to get hired. You don’t. It doesn’t matter. I’m pretty sure that most developers don’t have a personal site so if you have anything at all, you’re doing great. With all the 

 out there, you can get something up and running in a weekend. There's also those fancy GitHub about me pages. 

As you learn more about SEO, audit your site along the way. Add analytics to your site to check out your page views as you apply to new jobs. Hopefully they're going up!

Complete Every Optional Part of Job Applications

This is where we get a bit more general to regular old job advice. This one is pretty straightforward: fill out the application, complete the cover letter that's specific to the role, and tweak your resume. Leave no stone unturned when looking for a job. There could be an entire post about each one of these things but hopefully you get the idea.

This one is tough because not everyone is very social. Many of us are learning independently and going to a meetup along can be a big to-do. Just go regularly. Find one (or more) that you like and keep going.

I learned about web development alone at home through videos and articles. Hearing the word "svg" said out loud and talking about web development in person is invaluable and I wish I had started going to meetups sooner than I did.

There are lots of local Slack channels for developers throughout regions and cities. Google your city's name + "developer Slack" and join up. Introduce yourself and check around to see if there is a Slack Channel for job postings. Getting involved in a local Slack group is easy and a great way to network, get your name out there, and learn more about the local dev scene. Also loads of tech companies use Slack so it's a great way to get familiar with it.

. People there have always been really friendly and helpful in my experience.

Bootcamps usually take a portion of your salary or cost a lot of money up front. It's also very hit-or-miss with bootcamps. Depending on your situation, a bootcamp might be a great idea. If you have a bit of web knowledge already or a bunch of time to learn, though, consider just digging in and start applying to see what sticks.

The bootcamp scene also varies by city so make sure to check that out, too. If you're really considering it, try to ask around in a developer Slack or at a meetup to get more info.

There could be an entire post about this. Recruiters vary widely in quality but can also be a great way to start a career. There are so many things that could be said here but research it for yourself in your area. Personally, I would complete a bunch of direct applications for a while before going with a recruiter. That's not to say you should dismiss them entirely. While many are spammy and will get your hopes up since you've added 

 to your LinkedIn, there are loads of legitimate ones that might be a great option.

I think it’s cool to see who’s viewing your profile when applying for jobs. It also provides a bit of extra visibility into job posting statistics. It's kinda pricey, but I think there's a month long free trial out there somewhere.

These are all I can think of right now. I'll probably add to this when I think of some more. Please remember this is just my opinion. Thanks for reading!

Some Tips for Getting a WebDev Job

Whenever we introduce changes in the DOM that show, hide, or affect an element's display, we need to make sure that screen readers pick up on it and that the user can interact with it in a familiar, standardized way. For example, what if an API fails and we need to notify the user an error occurred? Let's say the decision is to show an error dialog box with a message and a close button at the top of the page when the error triggers - kind of a common pattern. 

If this dialog is outside the viewport when it shows up, we need to make sure that we scroll the user to it. We also want to allow the user to close it with their keyboard and not make them tab a hundred times to close it. To solve the first issue, we could try and mess with media queries and scroll position to see if we're near the top of the page and conditionally scroll. We could even try using 

. Both of these solutions require adding more code and complexity to our application. But when we try to solve for the second issue - making sure it's tab-friendly - we automatically get the benefit of the browser auto-scrolling to the focused element.  

Adding focus doesn't take care of all accessibility issues in our case, we would still need to add the appropriate aria-attributes and make sure they are toggled accordingly. It 

 address the original concern of scrolling to the top of the page conditionally, though, with some added accessibility benefits. In our case, thinking of accessibility first (using focus rather than scroll) saves time and more importantly allows us to rely on native browser behavior rather than scroll checks (although Intersection Observer really is super fun). 

In React, we need a create a ref in order to interact with a DOM element that is rendered. We can access its 

 property in order to make sure it exists and act accordingly.

Here's how I focused the dialog's close button in the example below with a ref:

Created some state for whether or not the dialog is shown

Created a ref that I passed to the button that closes the 

Here's the example - a bit contrived, but hopefully it helps show off how using 

 only scrolls when it needs to as you scroll down the page and simulate an error dialog:

Latest Posts

Adding Google Analytics to a Next.js App

Some Tips for Getting a WebDev Job

Focus and Scrolling to Refs and React

Projects

PlaylistPlay.land