DEV Community: Max Zander

Favicons: Perhaps My Favorite Detail

Max Zander — Mon, 16 Aug 2021 02:45:23 +0000

Are you familiar with favicons? Are you about to open google to search for what a favicon is? Well here — let me save you a trip!

Favicons are the little icons that represent websites. You've probably noticed them on the tabs in your browser, next to the site's title. There's even a favicon on this very page!

But anyway, in my opinion, the favicon is one of my absolute favorite details to add to a project, so I wanted to bring it to your attention.

Creating a Favicon

So at its most basic, a favicon is an image. If you have a logo that you're using, you can go to a website like https://favicon.io/ and convert your logo (or other image) to a favicon and download the converted images.

If you have generated an application, using a favicon is extra simple! You may find a placeholder favicon in your app's public folder and you can actually just replace the placeholder image!

If you haven't before, make sure to really take a look into favicons — I think they're a wonderful tiny detail that makes all the difference!

Devise-ing A Backend...

Max Zander — Sun, 08 Aug 2021 17:34:31 +0000

So if you know me or have been following my work and/or blog, you probably know that I have been building a few sites for some small businesses. In order to create a way for the site owner of one of these sites to update upcoming events, etc. without having to go through me, I have decided to build an accessible backend for a site which is currently operating as a frontend-only site (feat. a good deal of hardcoding).

I am building that backend with Ruby on Rails using a Postgres database. I decided to add authentication so that the site can be login-able (meaning, something that can only be accessed via password by a user that is meant to have access) and, to accomplish this, I decided to use Devise.

So what is Devise? Devise is a gem (or package) that makes authentication super easy. There's a lot that makes Devise cool, but one of the best things about Devise is that it has bcrypt built in! This means that it will salt and hash passwords for you!

For those of you who don't know what that means: when a password is "salted" a unique and random string of additional characters is added to the given password. When the password is "hashed", all of those characters (both given and added during salting) are scrambled and converted into an indecipherable new string that cannot be converted back. NB: The addition of the "salt" is what would differentiate the passwords of two users who both chose "password" as their password, for example. When a user logs in, the site is able to compare the value of the entered password to the saved salted and hashed password to validate the password.

But while that's all awesome, my favorite thing about Devise is how much it does for you while being so simple to use! You generally want to add Devise immediately upon generating the application and, by simply by adding gem 'devise' to your Gemfile, running bundle install (or bundle update if you already have Devise on your machine), and then running rails g devise:install, you can add Devise to your application. You'll note that there is now a devise.rb file in your config/initializers folder and in your config/locales folder, there is a devise.en.yml file, which holds all of the notifications that Devise will use. (More things have been generated, but at this time, these are the two changes that you can actually see.)

In config/routes.rb, add a root route, such as:

root to: "home#index"

and in app/views/layouts/application.html.erb, add:

      <p class="notice"><%= notice %></p>
      <p class="alert"><%= alert %></p>

to add flash messages.

You can then generate your users by running rails g devise user. This will generate a migration for you, as well as a model, and routes (in config/routes.rb, you'll now notice devise_for :users)! Run rails db:migrate to migrate the database.

Now, if you recall, I was mentioning how much Devise does for you. If you start up your server and check out your routes, you'll see a bunch there! Follow one of those and you'll even see a view that already exists for you! And believe it or not, we already have working signup, flash messages, etc. Crazy, right?!

But in order to give us access to all of those things we saw in our routes, we're going to want to generate our views as well. So popping back over to our terminal, we can run rails g devise:views and that will add an app/views/devise folder! Now we can access and edit those views.

And like I said before, Devise does a lot for you and that includes giving you access to built-in helper methods, like current_user (which returns the Current user object) and user_signed_in? (which returns either true or false depending on if user has been signed in and a session exists for them).

This is just an intro to Devise and what it can do for you, and I wanted to share it with you since I think it's so great and handy! I'm very happy to be using it again for this project and, should you find yourself using Devise on a project at some point in the future, I hope that you enjoy it too!

An open letter to my future self

Max Zander — Sun, 01 Aug 2021 19:51:15 +0000

Hey Max,

How's it going? I've been thinking about you a lot lately. Whenever I start learning a new skill or reinforce an old one, I think of you. Each time I get word that a company has decided to go in a different direction, you pop into my head. I know it isn't wise to get attached to a job you don't have, but I guess that logic hasn't stopped me from doing so. But when I think about you and how happy to you are at your job, I know that both of us are exactly where we are supposed to be.

I also wanted to write to tell you how proud I am of you. You kept going even when the going got tough. You took a thing that you thought was cool and you learned it and turned it into a career. You've surpassed anything that you thought was possible and continue to learn. You're getting that experience that I'm currently lacking and want so badly to have. That's amazing. I'm thrilled and again, I'm so crazy proud of you. You've (hopefully) found a great group of people to work with and to grow with and I hope that you are using your experience to help encourage others who are just starting out and feeling the way you felt. It is definitely hard to spend so much time with what at times seems like no payoff, but you realized that there is a payoff and it's worth the wait. I admire that.

There's a lot I can learn from you and at the end of the day, I guess that's kinda why I think about you so much. Eventually, I will just be a memory and I guess you'll be grateful for the journey I'm on. I need to remember that more. Hell, I have a lot to be grateful for now and as I sit here thinking about you, I'm becoming extra aware of that. I guess I owe you that too, so thanks for that too.

Anyway, thanks for sticking with it. I can't wait to catch up to you — I know you're doing amazing things!

Looking forward and working hard,

Max

Returning to Liquor Cabinet: Fixing A Bug

Max Zander — Sun, 25 Jul 2021 20:33:33 +0000

So this last week I decided to deploy another old app of mine. If you read my post Searching for Ways to Search: Two Methods Of Performing A Search With A Rails Back-End And A React-Redux Front-End, you may recall my app "Liquor Cabinet". "Liquor Cabinet" is an app I built at the end of my time at Flatiron School with a React with Redux front-end and a Ruby on Rails back-end. I actually haven't altered all that much of it since then because I liked the idea of having something on my Github profile that can show the growth I've experienced since graduating. ("Liquor Cabinet" is built with a lot of class components, very few hooks, etc.)

Anyway, I decided to revisit the app this week to deploy it, so converted the database to Postgres and popped that up onto Heroku, updated the fetches on the front-end to reflect the new URL endpoint, and put that up onto Netlify (if you want to learn more about that process, you can read this post here).

Fast-forward a couple of days and I'm talking to a couple of folks at a super cool company and one of them mentions to me that he is trying to use "Liquor Cabinet" but it isn't working. My first instinct was that it was actually a Heroku issue. "Liquor Cabinet" uses "free dynos" and, as I mentioned in my post about deploying a full-stack app, if the app uses "free dynos" and no server requests happen for 30 minutes, the server will stop running. If someone tries to make a request to the server, it will wake itself back up and start running again, but it does take a second. So I told him that he should wait a second and try again. Still no dice. I asked what he was searching for and tried it on my end and it seemed to work fine. But then I realized something. I was capitalizing my search. Could it be a case-sensitivity thing? How could I have missed that? I asked if he was searching with a capitalized first letter or not. He said that he wasn't and I asked him to try it capitalized. Bingo — it worked. I thanked him for exposing the bug and as soon as I got off the call, I hopped on VSCode to fix it.

My first thought was to go into the drinks_controller.rb file and look at the search method:

  def search
    @drinks = Drink.where("main_liquor LIKE ?", "%" + params[:q] + "%")
    render json: @drinks
  end

I thought that maybe if I tacked some methods on to params[:q] I may be on to something. I booted up my rails server...Not quite.

I took another moment to think about how the data was going back and forth between the front-end and the back-end. I looked at my Search.js and how I was handling the submission of the form. Turning to my actions.js, I looked at how my search fetch was happening:

export const searchDrinks = liquor => {

    return(dispatch) => {
        return fetch(`http://localhost:3001/api/v1/search?q=${liquor}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({liquor})
        })
        .then(resp => resp.json())
        .then(liquor => {
            console.log("liquor", liquor)
            dispatch({ type: "FIND_DRINK", payload: liquor })
        })
    }
}

Essentially, what we have going on here is that we are taking the input from the search bar and calling that liquor. We're then sending a POST request (used to send data, rather than say a GET request which is used to request data) to the back-end database, interpolating in the searched liquor to the end of the URL endpoint. Since data can only travel as a string, we're taking the JSON at the endpoint and turning it into a string and then, once it makes it back to the front-end, we're turning that string back into JSON and applying the reducer to update state. Cool.

Anyway, as I looked back on that, suddenly, the solution was obvious! Here's an example of what URL of a successful search on the back-end looks like: http://localhost:3001/api/v1/search?q=Whiskey. Can you spot what we're about to do?

The solution laid in altering what's being interpolated into the fetch request. Since what we're interpolating is exactly what the user is searching for, we just have to alter it to fit the format of the database (in this case, capitalizing the first letter). So how do we do that?

So let's say our searched liquor is whiskey. Since our searched term is a string, we need to use string methods. If we were to call .toUpperCase() on liquor, we would get WHISKEY. Since we only need the first letter capitalized, we need to separate out that letter. We can use .charAt() to return out just the character we need and chain on toUpperCase() to that character. If we then call the string method .slice() on liquor and only provide a starting index, we can return the rest of the letters as a new string. Concatenating those two returned values, we can get the whole word with just the first letter capitalized:

liquor.charAt(0).toUpperCase() + liquor.slice(1)

Popping that into the fetch looks like this:

 return fetch(`http://localhost:3001/api/v1/search?q=${liquor.charAt(0).toUpperCase() + liquor.slice(1)}`

And that worked! Cool. But then I was thinking about other ways that this solution could be broken and realized that, while I was successfully capitalizing the first letter on the entered search term, I wasn't accounting for someone searching with caps lock on or someone else searching with rAndOMizeD cApITal LetTeRS. Testing that out in the app, my suspicions were confirmed.

Having just fixed the first issue, this was a super simple fix. I went back into actions.js and called .toLowerCase() on the sliced out characters. This will take whatever the user inputs and make it lowercased, also fitting the necessary search format.

All together, the fetch now looked like this:

 return fetch(`http://localhost:3001/api/v1/search?q=${liquor.charAt(0).toUpperCase() + liquor.slice(1).toLowerCase()}`

and that both worked and accounted for any weird capitalization. Testing it out in the app, we were looking good and successful!

I'm super glad I had this experience and it just goes to show how important it is to have other eyes on your work! If you would like to check out this app, you can do so here!

Let's Talk About Sets Baby...

Max Zander — Mon, 19 Jul 2021 02:35:49 +0000

🎶 Let's talk about sets... 🎶

So if you read my blog post Data: Types vs. Structures, you might recall me talking about a data structure known as a Set. I was doing a code challenge this last week and found sets to be incredibly helpful in finding an efficient solution, so I decided to take a minute this week to 🎵talk about sets (baby)🎵.

Sets (or set objects) are a collection of values and, as I mentioned in my aforementioned previous post, the values in a set are unique (meaning they can only occur once). This can prove super helpful for finding out if something belongs to a set of values or if you need to figure out how many unique values exist in a a given set of data.

So now that we've established what sets are, let's talk a little bit about how to use them:

First of all, how do we create a set? Well, to create a new set we say:

new Set()

and if we want to add an argument, we can either add data directly:

let triadSet = new Set([1, 3, 5])
// the Set now looks like this: [1, 3, 5]

or we can convert existing data to a set:

let array = [1, 3, 5, 3, 1]
let triadSetFromArray = new Set(array)
// the Set now looks like this: [1, 3, 5]

You'll note that the triadSetFromArray doesn't repeat the second 3 or 1 because (again), the values in a set are unique!

If we want to add to our set, we can call a method add() to do so:

triadSetFromArray.add(8);
// the Set now looks like this: [1, 3, 5, 8]

N.B. The add() method adds the new element to the end of the set object.

If you want to remove an element from a set object, you can do that by calling the delete() method:

triadSetFromArray.delete(8);
// the Set now looks like this: [1, 3, 5]

So let's say you've created your great new set, triadSetFromArray and you want to check what it contains. Sets have a method has() that you can call to check on the contents. has() returns a boolean value depending on the contents and works like this:

triadSetFromArray.has(5);
// true

triadSetFromArray.has(4);
// false

Now let's say you've been given the array above and are tasked with returning the amount of unique items exist in the array. Well, sets have a size property that you can call to retrieve that kind of data.

let array = [1, 3, 5, 3, 1]
let triadSetFromArray = new Set(array)

return triadSetFromArray.size
// 3

And if you decide that you're over the entire set object and you want to get clear out the whole thing (or, you know, you have a better reason to do it 😉), you can call the clear() method to do so:

triadSetFromArray.clear();
// The Set now looks like this: []

So there's a little introduction to Sets. I think they're awesome and super helpful and I very much recommend adding them to your arsenal!

Solving Leetcode's "Move Zeroes" with JavaScript

Max Zander — Mon, 12 Jul 2021 03:24:37 +0000

So before I even get into my solution for how I solved Leetcode's "Move Zeroes" problem, I just want to mention something super obvious. ALWAYS READ YOUR INSTRUCTIONS!! Now, you may be saying to yourself, "But Max, of course one reads the instructions! Why would you say something so obvious?!", but let me tell you that part of growing is learning from your mistakes. Going to solve this problem, I first read the instructions and then looked at the examples:

Given an integer array nums, move all 0's to the end of it while maintaining the relative order of the non-zero elements.

Note that you must do this in-place without making a copy of the array.

Example 1:
Input: nums = [0,1,0,3,12]
Output: [1,3,12,0,0]
Example 2:
Input: nums = [0]
Output: [0]
Constraints:

1 <= nums.length <= 104

-231 <= nums[i] <= 231 - 1

So what did I do? After looking at the examples, I saw [1,3,12,0,0] as sorted in order with the zeroes moved to the end and so my first few times around, I sorted my nums array before moving the zeroes!

So yeah, moral of the story: ALWAYS READ YOUR INSTRUCTIONS! In fact, I would recommend, reading the instructions, looking at the examples, and then reading the instructions again! Because even if you look at it quickly and say to yourself, "Oh! That's an easy one!", you very well might have missed something.

Ok so, sidebar aside, let's talk about how to solve the actual problem!

So let's look at the problem again:

Given an integer array nums, move all 0's to the end of it while maintaining the relative order of the non-zero elements.

Note that you must do this in-place without making a copy of the array.

Example 1:
Input: nums = [0,1,0,3,12]
Output: [1,3,12,0,0]
Example 2:
Input: nums = [0]
Output: [0]
Constraints:

1 <= nums.length <= 104

-231 <= nums[i] <= 231 - 1

So what's the goal? We are given an array called nums and have to take that array and leave everything as is except for any zeroes (0), which we move to the end of the array. All this while not making a copy of the array.

So first things first, we want to create a variable to keep track of non-zeroes. Let's call it "nonZero":

var moveZeroes = function(nums) {
    let nonZero = 0;
};

Cool. So now that we have our nonZero variable, let's loop through the nums array to look for non-zeroes. We can accomplish this with a simple for loop. If the current element in our array is not equal to zero (0), we can set it to the current index of nonZero and then increment nonZero to keep going:

var moveZeroes = function(nums) {
    let nonZero = 0;
    for(let i=0; i < nums.length; i++){
        if(nums[i] !== 0){
            nums[nonZero] = nums[i];
            nonZero++;
        };
    };

Now, to take care of our zeroes, we're going to use another loop.

NB: This is a separate, non-nested loop, which will ultimately keep our solution to O(2n) time complexity, which since constants don't matter in Big O expressions, can just be simplified to **O(n)* time complexity!*

This loop is going to go through the array at the nonZero index and replace those elements with the appropriate zeroes and it looks a little something like this:

    for(let i = nonZero; i < nums.length; i++) {
        nums[i] = 0;
    };

All together, the solution looks like this:

var moveZeroes = function(nums) {
    let nonZero = 0;
    for(let i=0; i < nums.length; i++){
        if(nums[i] !== 0){
            nums[nonZero] = nums[i];
            nonZero++;
        };
    };

    for(let i = nonZero; i < nums.length; i++) {
        nums[i] = 0;
    };
};

But again, perhaps the most important thing to take away from this post is to please READ YOUR INSTRUCTIONS MORE THAN ONCE because it will save you SO much time and complexity! (See what I did there? 😂)

Seemingly Subtle Differences: Padding vs. Margin

Max Zander — Mon, 05 Jul 2021 03:39:55 +0000

TLDR: Margin is outside of border around the content/element; Padding is within border the content/element.

If you're like me, your initial foray into development/programming is/was into HTML and CSS. Even now, as I do a lot of JavaScript-based development, the principles I learned then are extremely relevant. (Sure, a lot of this can be attributed to the general importance/power of CSS and JSX being so seemingly similar to HTML, but bear with me.)

Anyway, since I use CSS literally all the time, I wanted to take a second to clarify a seemingly subtle (but useful and important) difference that took me a little bit to get back when I was first learning CSS, and that is the difference between the margin and padding properties.

Now, this is not terribly complex, but the big thing that you need to remember is that the difference lies in the relation to the content.

If we think about the border around the content as being able to push in or out, the margin property has to do with the amount of space would be pushing out. You can potentially see the margin property given generally or you can see it broken down into margin-top, margin-right, margin-bottom, margin-left. If it is given by itself, and you see a single value listed:

margin: 5px;

That means that the margin-top, margin-right, margin-bottom, and margin-left values are all 5px. If you instead see it with two values:

margin: 5px 3px;

We read it based on a clockwise motion. So in this case, we would have margin-top and margin-bottom at 5px and margin-right and margin-left at 3px. If you see three values:

margin: 5px 3px 2px;

We still read it based on a clockwise motion and, in this case, we would have margin-top at 5px, margin-right and margin-left at 3px, and margin-bottom at 2px. If you do see four values though, this is one for each and we still read in a clockwise motion:

margin: 5px 3px 2px 1px;

(margin-top at 5px, margin-right at 3px, margin-bottom at 2px, and margin-left at 1px).

Now for the padding property. If we go back to the pushing in or out idea, the padding property has to do with the amount of space would be pushing in. Padding is the amount of space between the content and its border aka within the element itself.

Like with margin, padding can take up to four values and is read in the exact same way (clockwise). But one more difference that is worth mentioning is that, while margin can take negative values, padding cannot take negative values.

All in all, these are two very important properties to master, as they are super helpful for working out your layout and figuring out spacing on the page. And while the differences may seem subtle, keep them straight and you'll be on your way to some beautiful design work!

Are You Stuck on Sticky?

Max Zander — Mon, 28 Jun 2021 01:48:51 +0000

So lately, a few people have been asking me about the sticky navbar on the website I built for a small crafting business called Adrian's Dream. If you're not really sure what that means, it looks a little something like this:

Take a look at the navbar in that GIF. See how it isn't scrolling with the page? That's a sticky navbar.

Now, since it has come up enough, I figured I'd write a quick post about how to do it and I promise accomplishing it is way easier than you might think.
(Spoiler Alert: We're doing it with CSS!)

So first off, I want to briefly review the position CSS property. According to the Mozilla Docs:

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

Now, not to go all here's-my-life-story-before-the-recipe on you, but before I tell you how to do it, I want to mention that the default value of the position property is position: static. What that means is that the element with a static property will be positioned in a set place in the document, so if you scroll, the element will scroll along with everything else on the page.

So how do we create a sticky navbar? Simple! We use position: sticky!

Let's say we have a navbar with a className of "navbar" (<nav className="navbar">). If we (amongst the rest of our CSS) add our position and top as follows:

.navbar {
    position: sticky;
    top: 0;
}

Now we have a navbar that is positioned at the very top of the document and, if we scroll down, it will be stuck to that position (not scrolling along with everything else). Boom. Easy, right?

Now go forth and code!

Advice to my former self, beginners (and an announcement!)

Max Zander — Sun, 20 Jun 2021 19:45:58 +0000

So since I published my last blog post, something very exciting happened...

I GOT ENGAGED!!

So in honor of my amazing fiancée and how supportive she has been of me throughout my entire journey into coding, I want to give some advice to my former self (circa the beginning of my journey) and anyone else who may find it useful!   Here is some advice in honor of Ashley:

A — Algorithms and data structures are going to be super important and good to know. Re: Algorithms — try to solve them on your own. It’ll be tough at first, but you’ll get there. Enjoy that satisfaction, but realize that your earliest solution is probably not the most efficient. (If you don’t know what that means yet, learn about Big O Notation!) But study solutions and take the time to understand them. Taking that time will make it an actual skill that can be applied to things and not just to a very specific case. And review your data structures so that you know a) when certain data structures are most useful and b) which methods work with which structures. Feeling confident in this will lead to WAY more confidence when you’re applying/interviewing for jobs!

S — Sometimes the solution is right in front of your face. If nothing seems to be working and you’re getting super stressed out, take a second. Breathe. Don’t be afraid to put it away for a little bit. Honestly, fresh eyes do WONDERS. (And Spoiler Alert: it’s probably a missing semicolon, but it might be the wrong number of equals signs 😉👌)

H — Help is available. Whether you’re pair-programming or you need to use Google or you just need to find somebody to message directly, it’s totally normal to need help. Nobody knows everything and there’s no shame there. Ask questions, take in answers, learn, and grow!

L — Learning is a process. Look, I know you know this, but it’s good to remember. Keep reviewing the things that you’ve learned already so that those skills don’t get stale. Also, look at the kind of jobs that you would love to have. What skills are they looking for? Start learning those! Need help learning a topic? Check out Udemy, LinkedIn Learning, and YouTube! There are some great resources out there that can launch you into developing new skills!

E — Every. Day. In addition to everything listed above, you should be coding every single day! And if you’re not writing new code, review some old code! That’s super helpful too! Regardless of long you’ve been coding, is there anything that you would write differently now? (ex. I used to write React code with a lot of class components. Now, I would write React with mostly functional components and hooks. Growth!)

Y — You’ve got this. There will be easy days and there will be stressful, difficult days. This is totally normal. You’re learning new languages and that’s undeniably tough. Take some time every now and again to reflect on where you were a few months ago or a year ago. You’ve come a long way and, even if there’s still a long way to go, you’re a champ and you should be proud of yourself. Remember that, even if skill development or the job search or anything else is taking time, you’re on the path you’re meant to be on and it’s all going to work out the way it is supposed to. So yeah, you’ve got this!  

Anyway, if you read all the way through this, I hope it was helpful. And, in the spirit of this last week, remember to remember all of the joy of what you’re doing (and life in general, but that’s a whole other thing!).

A Query, if you will...

Max Zander — Fri, 11 Jun 2021 03:57:57 +0000

So here's a query for you: Do you know about media queries?

If you don't, I'd like to take a moment today to introduce you to them.

So, what exactly is a media query?

Basically, a media query is something used in CSS to set certain rules conditionally. Media queries are super useful if you want to make your page/project responsive (fitting to various screen sizes).

We define media queries by using the @media rule. Frequently, we see if used in the following way:

@media screen and (max-width: 1025px){
     // conditional CSS goes here
}

where it says max-width may appear a little differently (ie. min-width, etc.)

Media queries can be super helpful if you want something to only appear in a desktop view or perhaps appear differently in a mobile view. An example of that would be having a button that does not display on mobile devices/screens smaller than 812px:

@media screen and (max-width: 812px){
     button { display:none; }
}

BONUS If you have been following along with my blog posts and have been using styled-components, you can use media queries in the following way:

const ConditionalBackground = styled.div`
     background-color: #ff6b35;
     @media screen and (max-width: 960px){
          background-color: #15b7d7;
     }
`

So why is this important?

Like I said, media queries are super helpful for formatting your design to fit various screen types. Nowadays, so many people use mobile devices to surf the web or check out apps. If you want people to want to use your applications, it will certainly be to your benefit to make sure that what they see is what you intend.

If you're still reading, here's a final query for you: what are you waiting for?! Go give it a shot!

A Gift Wrap

Max Zander — Sat, 05 Jun 2021 23:39:44 +0000

Hey friends! This is a super quick post that I wanted to write as a little PSA for any of you beginners out there who use VSCode. If you are like me, you may not have gone through all of the settings in VSCode yet and, perhaps you have not realized yet that a text wrapping setting exists to keep your code from overflowing horizontally. I just wanted to bring it to your attention and tell you how to turn it on.

From the menu bar, open the dropdown menu for Code and select Preferences. From there, open up your Settings.

You can jump straight to this point by using the shortcut:
⌘ + , (Mac) or Ctrl+, (PC).

Within Settings, go into the section for Text Editor and scroll all the way down until you get to Word Wrap. Turn that on.

Boom. Check that out. Much easier to read and you don't have to create your own line breaks!

I hope that's helpful. Now go be productive!

Implementing Smooth Scroll

Max Zander — Sun, 30 May 2021 16:34:58 +0000

When I initially built the site for Adrian’s Dream, I used react-router-dom to set my routes for each individual page. As I was designing and building though, I realized that what I really wanted was to have everything on a single page and, rather than having the navbar redirect us to a different page, I wanted it to scroll to the clicked component.   So in this post, I am going to tell you about react-scroll and how to use it.

To get started, run:

npm install react-scroll --save

to add react-scroll to your package.   

Now we jump to our navbar component and we change our Link import from:

import { Link } from 'react-router-dom';

to:

import { Link } from 'react-scroll';

(Before we move on, we need to make sure that we have ids for each of the places on the page that we want to scroll to. So if you don't have those yet, go ahead and add those.)

Now for the fun part! We're going to actually implement the functionality. Back in our navbar component, we are going to change what's in our Link tag so that each one looks as follows:

   <li className='nav-item'>
       <Link
       to='about'
       className='nav-links'
       onClick={closeMobileMenu}
       spy={true}
       smooth={true}
       offset={-70}
       duration={500}>
           ABOUT
       </Link>
  </li>

To quickly break that down:

We are linking to our id
We have our className
We set our onClick to close the menu when it is in mobile view (no applicable for desktop view)
We set spy to true (which makes Link selected when scroll is at its targets position)
We set smooth to true (which sets the animation)
The offset makes up for any additional pixels that need to be scrolled due to padding or something, and the duration is how long (in milliseconds) it is going to take.

And honestly, that's it! Set that for each nav-item and you've got yourself a smooth-scrolling page!

Please check out Adrian’s Dream for any of your crafting needs! It's a wonderful company with a meaningful story.