Submitted 7 months ago

Responsive card w/ javaScript

jquery, vite, sass/scss

LincolnBollschweiler•350

@LincolnBollschweiler

A solution to the Article preview component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

Figuring out Github Pages for a vite.js build, deploy workflow, and yaml was the biggest challenge.

Also happy that I saved off a copy of my base setup for use in upcoming projects.

What challenges did you encounter, and how did you overcome them?

The biggest hurdle was figuring out that Vite's documentation, suggesting that a default vite.config.js would work, was incorrect. The packaged css and js need to be accessed from the dist root with base: "./", NOT with base: "/" (which comes free, no config).

I tried to change the raw html <head> tag to point to "./" for the assets files, but it just resets on refresh.

In the end, I made a best guess in updating vite.config.js and it worked.

Code

Please log in to post a comment

Community feedback

kephalosk•400

@kephalosk

Posted 6 months ago

nice solution :) I noticed your deep nested s/css structure:

...
            &::after {
              content: "";
              position: absolute;
              top: 100%;
              left: 50%;
              transform: translateX(-50%);
              border: 0.5rem solid transparent;
              border-top-color: var(--darkGrayishBlue);
            }
          }
        }
      }
    }
  }
}

It's better to flatten the hierarchy. That looks cleaner and improves readability.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord