DEV Community: Chelsea Snider

What I've Learned from Developing a Portfolio & Utilizing the scrollToSection() Method.

Chelsea Snider — Sun, 18 Feb 2024 19:04:01 +0000

Building my portfolio presented unexpected challenges for me as a developer. Despite the fact that I have experience with more technically complex projects, such as developing full stack applications. Making a website for yourself to market and advertise your experience and knowledge as the product is surprisingly difficult.

My projects, such as Medisense and ClosetSwap, were born from various inspirations and aspirations. Designing and envisioning features for products you're passionate about is relatively straightforward. However, when the product is yourself, and you're tasked with marketing and communicating your value, it becomes a different challenge altogether.

I've always found it surprisingly difficult to craft a simple bio for dating apps or social media websites. Making a portfolio for the first time to express my abilities and talents was on a different level. I felt stuck and tried a few different versions of my portfolio on my own. Eventually I realized I lacked inspiration, and I needed to review other portfolios to get a grasp on what I wanted to design.

In all honesty, I think my design abilities could be improved, and it's clear from looking at other portfolios that mine is actually very basic. The important thing is that I made an effort and I am learning.

In my research of other portfolios I did learn about modern design and I discovered new techniques in development such as, scrollToSection(), which I think will become one of my favorite JavaScript methods for basic navigation! I've used react-Router-Dom before, but it wasn't the best tool for this particular project. Something relatively straightforward with a dash of style.

Introducing: scrollToSection() in ReactJS

scrollToSection is a JavaScript method that allows you to smoothly scroll to a specific section of a webpage with just a single click. This technique not only enhances user experience but also adds a touch of elegance to the overall design. It's surprisingly straightforward to implement it.

Step 1: Importing Components and Rendering

First, we import the necessary components that represent different sections of our webpage. These components will be rendered within the App.js component's return statement. This is a basic setup in ReactJS for web development. You create components and import them into App.JS to be rendered.

import React from "react";
import Navbar from "./components/Navbar/Navbar";
import Hero from "./components/Hero/Hero";
import Skills from "./components/Skills/Skills";
import WorkExperience from "./components/WorkExperience/WorkExperience";
import ContactMe from "./components/ContactMe/ContactMe";
import Projects from "./components/Projects/Projects";
import Footer from "./components/Footer/Footer";

const App = () => {

   return (
      <>
         <Navbar />
         <div className="container">
            <Hero />    
            <Skills />   
            <Projects />      
            <WorkExperience />               
            <ContactMe />
         </div>
         <Footer />
      </>
   );
};

export default App;

Step 2: Using useRef to Target Components

Next, we utilize React's useRef hook to create references for each component. These references will be used later for smooth scrolling navigation.

We will then wrap the corresponding components within the return statement with div tags that reference our useRef variables.

import React, { useRef } from "react";
//component imports go here

const App = () => {
   const homeRef = useRef(null);
   const skillsRef = useRef(null);
   const projectsRef = useRef(null);
   const workExperienceRef = useRef(null);
   const contactMeRef = useRef(null);

return (
      <>
         <Navbar />
         <div className="container">
            <div ref={homeRef}>
               <Hero />
            </div>
            <div ref={skillsRef}>
               <Skills />
            </div>
            <div ref={projectsRef}>
               <Projects />
            </div>
            <div ref={workExperienceRef}>
               <WorkExperience />
            </div>
            <div ref={contactMeRef}>
               <ContactMe />
            </div>
         </div>
         <Footer />
      </>
   );
}

Step 3: Defining scrollToSection() Method for Smooth Scrolling

Now, let's define the scrollToSection() method within the App.js component. This method smoothly scrolls to the specified section when called.

We retain the separation of concerns by implementing scrollToSection() in App.js, keeping global state management and associated logic inside the App component. This keeps the Navbar component's focus on navigation and user interaction.

This function uses switch cases to select which particular section, depending on the specified component, to scroll to. Smooth behavior is enabled, and each case scrolls to the offsetTop point of the appropriate section.

Notice the navigation tag in the return statement: <Navbar scrollToSection={scrollToSection} />. Here, we pass scrollToSection() as a prop to the Navbar component, allowing navigation buttons to trigger smooth scrolling to a specifc component.

\\imports go here

const App = () => {
   const homeRef = useRef(null);
   const skillsRef = useRef(null);
   const projectsRef = useRef(null);
   const workExperienceRef = useRef(null);
   const contactMeRef = useRef(null);

   const scrollToSection = (section) => {
      switch (section) {
         case "hero":
            window.scrollTo({
               top: homeRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         case "skills":
            window.scrollTo({
               top: skillsRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         case "projects":
            window.scrollTo({
               top: projectsRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         case "work":
            window.scrollTo({
               top: workExperienceRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         case "contact":
            window.scrollTo({
               top: contactMeRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         default:
            break;
      }
   };

   return (
      <>
         <Navbar scrollToSection={scrollToSection} />
         <div className="container">
            <div ref={homeRef}>
               <Hero />
            </div>
            <div ref={skillsRef}>
               <Skills />
            </div>
            <div ref={projectsRef}>
               <Projects />
            </div>
            <div ref={workExperienceRef}>
               <WorkExperience />
            </div>
            <div ref={contactMeRef}>
               <ContactMe />
            </div>
         </div>
         <Footer />
      </>
   );
};

export default App;

Step 4: Setting up Navbar to Accept and Utilize the scrollToSection() Logic

Lastly, in our Navbar component, we need to pass in the prop {scrollToSection}. This allows us to set up the buttons to interact with the scrollToSection() method located in App.js.

All we have to do is utilize an onClick function to trigger the scrollToSection logic, using the switch case names to determine which exact component each button should be bound to.

import React, { useState } from "react";
import "./Navbar.css";

const Navbar = ({ scrollToSection }) => {

   return (
      <>
         <nav className="nav-wrapper">
            <div className="nav-content">
               <ul>
                  <li
                     onClick={() => scrollToSection("hero")}
                     className="menu-item"
                  >
                     Home
                  </li>
                  <li
                     onClick={() => scrollToSection("skills")}
                     className="menu-item"
                  >
                     Skills
                  </li>
                  <li
                     onClick={() => scrollToSection("projects")}
                     className="menu-item"
                  >
                     Projects
                  </li>
                  <li
                     onClick={() => scrollToSection("work")}
                     className="menu-item"
                  >
                     Work Experience
                  </li>
                  <li
                     onClick={() => scrollToSection("contact")}
                     className="menu-item"
                  >
                     Contact Me
                  </li>          
               </ul>
            </div>
         </nav>
      </>
   );
};

export default Navbar;

And with those steps, I've explained how to implement the scrollToSection() method! It really is amazing how powerful javaScript is, and how you can utilize it in order to add interactivity to your web page. If you have any questions, please feel free to reach out to me on linkedin and check out my portfolio!

https://www.linkedin.com/in/chelsea-snider/
https://chelseasnider.netlify.app/

Thank you for reading, and I hope you learned how to implement the scrollToSection() method to use in your own projects :)

What I've Learned from Developing a Portfolio & Utilizing the scrollToSection() Method.

Chelsea Snider — Sun, 18 Feb 2024 19:04:01 +0000

My projects, such as Medisense and ClosetSwap, were born from various inspirations, and aspirations. Designing and envisioning features for products you're passionate about is relatively straightforward. However, when the product is yourself, and you're tasked with marketing and communicating your value, it becomes a different challenge altogether.

Introducing: scrollToSection() in ReactJS

Step 1: Importing Components and Rendering

import React from "react";
import Navbar from "./components/Navbar/Navbar";
import Hero from "./components/Hero/Hero";
import Skills from "./components/Skills/Skills";
import WorkExperience from "./components/WorkExperience/WorkExperience";
import ContactMe from "./components/ContactMe/ContactMe";
import Projects from "./components/Projects/Projects";
import Footer from "./components/Footer/Footer";

const App = () => {

   return (
      <>
         <Navbar />
         <div className="container">
            <Hero />    
            <Skills />   
            <Projects />      
            <WorkExperience />               
            <ContactMe />
         </div>
         <Footer />
      </>
   );
};

export default App;

Step 2: Using useRef to Target Components

Next, we utilize React's useRef hook to create references for each component. These references will be used later for smooth scrolling navigation.

We will then wrap the corresponding components within the return statement with div tags that reference our useRef variables.

import React, { useRef } from "react";
//component imports go here

const App = () => {
   const homeRef = useRef(null);
   const skillsRef = useRef(null);
   const projectsRef = useRef(null);
   const workExperienceRef = useRef(null);
   const contactMeRef = useRef(null);

return (
      <>
         <Navbar />
         <div className="container">
            <div ref={homeRef}>
               <Hero />
            </div>
            <div ref={skillsRef}>
               <Skills />
            </div>
            <div ref={projectsRef}>
               <Projects />
            </div>
            <div ref={workExperienceRef}>
               <WorkExperience />
            </div>
            <div ref={contactMeRef}>
               <ContactMe />
            </div>
         </div>
         <Footer />
      </>
   );
}

Step 3: Defining scrollToSection() Method for Smooth Scrolling

Now, let's define the scrollToSection() method within the App.js component. This method smoothly scrolls to the specified section when called.

By defining scrollToSection() in App.js, we maintain separation of concerns, keeping global state management and related logic within the App component. This ensures that the Navbar component remains focused on user interaction and navigation.

In this method, we use switch cases to determine each specific section to scroll to based on the parameter passed. Each case scrolls to the corresponding section's offsetTop position with smooth behavior enabled.

\\imports go here

const App = () => {
   const homeRef = useRef(null);
   const skillsRef = useRef(null);
   const projectsRef = useRef(null);
   const workExperienceRef = useRef(null);
   const contactMeRef = useRef(null);

   const scrollToSection = (section) => {
      switch (section) {
         case "hero":
            window.scrollTo({
               top: homeRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         case "skills":
            window.scrollTo({
               top: skillsRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         case "projects":
            window.scrollTo({
               top: projectsRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         case "work":
            window.scrollTo({
               top: workExperienceRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         case "contact":
            window.scrollTo({
               top: contactMeRef.current.offsetTop,
               behavior: "smooth",
            });
            break;
         default:
            break;
      }
   };

   return (
      <>
         <Navbar scrollToSection={scrollToSection} />
         <div className="container">
            <div ref={homeRef}>
               <Hero />
            </div>
            <div ref={skillsRef}>
               <Skills />
            </div>
            <div ref={projectsRef}>
               <Projects />
            </div>
            <div ref={workExperienceRef}>
               <WorkExperience />
            </div>
            <div ref={contactMeRef}>
               <ContactMe />
            </div>
         </div>
         <Footer />
      </>
   );
};

export default App;

Step 4: Setting up Navbar to Accept and Utilize the scrollToSection() Logic

Lastly, in our Navbar component, we need to pass in the prop {scrollToSection}. This allows us to set up the buttons to interact with the scrollToSection() method located in App.js.

All we have to do is utilize an onClick function to trigger the scrollToSection logic, using the switch case names to determine which exact component each button should be bound to.

import React, { useState } from "react";
import "./Navbar.css";

const Navbar = ({ scrollToSection }) => {

   return (
      <>
         <nav className="nav-wrapper">
            <div className="nav-content">
               <ul>
                  <li
                     onClick={() => scrollToSection("hero")}
                     className="menu-item"
                  >
                     Home
                  </li>
                  <li
                     onClick={() => scrollToSection("skills")}
                     className="menu-item"
                  >
                     Skills
                  </li>
                  <li
                     onClick={() => scrollToSection("projects")}
                     className="menu-item"
                  >
                     Projects
                  </li>
                  <li
                     onClick={() => scrollToSection("work")}
                     className="menu-item"
                  >
                     Work Experience
                  </li>
                  <li
                     onClick={() => scrollToSection("contact")}
                     className="menu-item"
                  >
                     Contact Me
                  </li>          
               </ul>
            </div>
         </nav>
      </>
   );
};

export default Navbar;

Thank you for reading, and I hope you learned how to implement the scrollToSection() method to use in your own projects :)

Learn to Test, Test to Learn

Chelsea Snider — Sun, 13 Aug 2023 19:22:06 +0000

The past few weeks have been spent studying diligently to learn an unfamiliar stack. I've been taking classes on Angular, Java, Spring Boot and development methodologies. The most intriguing subject I have started to learn is test-driven development, something that I have never used in my work before.

This week, I've been learning Jasmine, and I'm starting to understand how crucial it is to test your components before deciding to use them. I've had arguments over testing at dinner tables with other developers; some saw its value, while others believed that writing components or code blocks twice would reduce their efficiency.

Even though writing tests may be tedious, as a new developer I can see the importance of testing. I don't want to accidentally write bad code and have it pushed to production, or inadvertently be responsible for making bugs and easy mistakes.

There are a lot of nice features about Jasmine as well! I like that it's written in a plain english format. It's easy to understand the tests that you are writing, and plainly stating what is expected of the tests.

The importance of writing tests in order to become a better developer is paramount to my personal journey. As I continue learning and growing, I want to put my best foot forward, lear best practices, and writing the best possible code. Creating clean, error free, and creative code is my ultimate goal.

In closing, I would like to share a quote that I came across while researching test driven development by Kent Beck.

“If you're happy slamming some code together that more or less works and you're happy never looking at the result again, TDD is not for you. TDD rests on a charmingly naïve geekoid assumption that if you write better code, you'll be more successful. TDD helps you to pay attention to the right issues at the right time so you can make your designs cleaner, you can refine your designs as you learn.”
― Kent Beck, Test-Driven Development: By Example

My Journey as a Software Developer Apprentice: Embracing Opportunities and Growth

Chelsea Snider — Wed, 12 Jul 2023 23:49:33 +0000

Hey everyone!

I'm Chelsea, and over the past year, I've started on an exciting journey to pursue a career in software development! As someone in their thirties, I made a pretty massive change in my career and life.

Previously, I worked as an optical laboratory technician and I loved it! Sadly, the lack of stability and financial security convinced me to make a change. That's when I decided to work towards a career in software development. I enrolled in a coding boot camp called Carolina Code School and eventually I was accepted into an apprenticeship program hosted by Build Carolina.

Looking back, I can confidently say that this decision has been one of the best I've ever made. Coding used to intimidate me, but I decided to throw caution to the wind and go for it, and I'm incredibly happy that I did. I started coding back in high school with a basics coding course, we learned HTML 4, CSS, and visual basic. I loved working with HTML and CSS, building web pages was a lot of fun! Visual basic on the other hand was extremely intimidating and challenging for me at the time. Struggling with visual basic caused me to think that programming was out of my skillset. But many years later, I decided to try again by going to a coding bootcamp!

After joining Carolina Code School, the knowledge I've gained so far is just the tip of the iceberg, and I'm constantly amazed by the endless learning opportunities in this field! And I am so thankful that I don't have to use visual basic...

After graduating Carolina Code School, I decided to take a step further and apply for Build Carolina's apprenticeship course, and got in! Being accepted into the apprenticeship program has already been a highlight in my life. I'm excited about being an apprentice because I've experienced the positive impact of having mentors throughout my previous career. And I've been a mentor before myself. While I was working in the optical field, I worked with passionate mentors who fueled my own passion for the job. Now, in the software development field, I've had the privilege of meeting with software engineers who match the passion and enthusiasm for their work like my previous mentors. That speaks volumes, considering the high regard I have for my past mentors.

Yet, being an apprentice is an overwhelming experience. As a novice, you find yourself at the bottom of the totem pole, ready to absorb all the knowledge, but also nervous about making mistakes and meeting expectations. However, I constantly remind myself that masters take on apprentices to guide and shape us into becoming masters ourselves. This opportunity is a chance for me to grow and evolve into something even greater.

Now, as I start my apprenticeship journey, there are several key areas that I am eager to learn. First and foremost, my focus lies in acquiring a solid understanding of development, and that includes development methodologies like test-driven code. Also, I am enthusiastic about expanding my expertise in Angular, Spring Boot, and Java, because these technologies are used in my host company and they'd be great to add to my collection of skills. Additionally, I am excited to embrace the challenge of creating another full-stack application, because it will help me apply my newfound skills. By embracing these learning opportunities, I am confident that I will evolve into a well-rounded and skilled software developer.

In conclusion, my journey as an apprentice software developer has been exciting so far. The decision to transition careers and pursue coding has opened up a world of possibilities. I am deeply grateful for the invaluable guidance and support offered by my mentors and the nurturing environment provided by the apprenticeship program. While I am nervous about the challenges along the way, I am resolute in my commitment to face them head-on. I am constantly growing my skills and I am ready for the opportunities and challenges on the horizon.