I'm intrigued by the LongForm
component and how the components are structured, in general. I come from using either SCSS
or styled-components
. Understanding how to format the styles correctly took me a bit to grasp.
I admit I found myself wanting to inspect the mockup image in hopes of finding specs. Working without a designer is rough and this exercise just cements my belief that teams should be cross-disipline.
Hooks are the new "IT" thing in react. We don't use them in production where I'm at but, man I wish we did. I added some in this project. I used useContext
rather than useState
because the parent component needed to inform the children of the state rather than one component needing to track its own state.
Have I mentioned how much I miss working alongside a designer?
I had to make a few things darker than the mockup because the colors didn't pass AA accessibilty.
LinkedListing
links- the
See open positions button
- The diversity section had to go to
DARK_PINK
I have questions about the :global()
selector. I read a couple articles but it wasn't entirly clear why I need this but I figured out how to use it based on the example in LongForm
and Split
.
Typography - I found the super informative fonts README but I still wasn't sure how to use the fonts I needed in the most DRY manner. I usually like to create components for varying typography usages. Here's a visual example from one of my previous gigs. Using components allows me to avoid recreating commonly used typography styles. It takes collaboration between design and dev to establish these.
These are some notes I made along the way about decisions I made related to the company values
- By seperating jobs into content chunks it allows for quick modification or additions to the jobs page in the future.
perksData.js
allows one place to swap out perks and icons as often as needed without breaking the implementation
- Not all components were provided so I took the liberty of creating a couple component blocks
Accordion
- I wanted to add a cool transition so it slides out but doing it quick means I sacrifice accessibility which is bad news bears. In a future iteration I would research the best ways to create a smooth collapse/expand transition that doesn't interfere with the content for screen readers.
Tile
BodyText
- I've decided to add each section of the page under
components/content
sopages/jobs
isn't too heavy. - To handle the expand/collapse of the perks I used the
useContext
hook to establish state. It doesn't warrant an app-wide state so I wrapped the provider around thePerks
content component only.
copy.js
allows devs to quickly swap copy if the message requires changing (i.e. a/b testing proves content A over content B)