About

This website is setup using Gatsby which is an open-source static site generator built on top of Node.js using React and GraphQL. I know very little about those technologies but setting it up was very easy. I also enjoy creating blogposts in the form of markdown files.

Because I don’t know React, developing this website can get challenging. At some point I encountered a problem that the icons I added haven’t displayed correctly on mobile devices. Fixing it was too hard/time consuming as I don’t have required knowlege and I gave up.

Then, ChatGPT3 was released and I decided to give it a try again. I uploaded my code and asked few questions. After testing and uploading error messages back to the conversation, I finally received code snippet that was working as expected.

Solution

ChatGPT3: Here’s how you can update the code to use JavaScript to apply different styles based on the screen size:

// First, you'll need to import the useEffect 
// and useState hooks from the react library:
import { useEffect, useState } from "react";

const NavBar = () => {
  // Next, use the useState hook to create a state variable 
  // called screenWidth that will hold the current screen width:
  const [screenWidth, setScreenWidth] = useState(window.innerWidth);

  // Use the useEffect hook to add an event listener that 
  // updates the screenWidth state variable when the window is resized:
  useEffect(() => {
      const handleResize = () => setScreenWidth(window.innerWidth);
      window.addEventListener("resize", handleResize);
      return () => {
          window.removeEventListener("resize", handleResize);
      };
  }, []);

  // Now you can update the layout of the page on smaller screens 
  // by using the screenWidth state variable to set the flexDirection style 
  // of the Section component
  return (
    <>
      <Section style={{ flexDirection: screenWidth > 600 ? "row" : "column" }}>
        <IntroName style={{ 
          marginTop: screenWidth > 600 ? "0px" : "-10px",
          fontSize: screenWidth > 600 ? "2em" : "1.5em",
          marginLeft: screenWidth > 600 ? "0px" : "auto",
        }}>
        <Link to="/" >
          Back to main page
        </Link>
        </IntroName>
        <Wrapper style={{ marginTop: screenWidth > 600 ? "0px" : "30px" }} >
          <SocialButton
            href="https://github.com/damianbudelewski"
            target="_blank"
            rel="noreferrer"
          >
      ...

Summary

For a single day, I become a frontend engineer that could solve the problem with the help of pair-programming AI buddy. Of course, adjusting the code, changing css and updating logic in few places were required, but the fact that I was able to do something that I couldn’t do before, without spending hours on learning React and JavaScript, is mindblowing 🤯

Thanks!