Re-learning the basics

As a developer, it can be easy to focus too much on the job at hand without taking the time to reflect on what we've learnt, so I wanted to give myself the chance to get back to basics and solidify what I've learnt and will see if there are any gaps in my knowledge that I can fill.

To do this I decided to work through some of the challenges set out on Frontend Masters. The first challenge I attempted was the Single price grid component.

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See a hover state on desktop devices for the Sign-Up call-to-action

My process

I started by setting up my project that involved creating a dedicated repository for all of the challenges, each challenge will have a README and be fully self-contained. I began by creating a bare-bones project with Create React App (CRA) that included TypeScript support. Then I added Storybook for the component library and Styled Components (A popular CSS-in-JS library) for the component styling.

Built with

• Semantic HTML5 markup
• Flexbox
• Responsive markup
• React
• Styled Components
• TypeScript

What I built

This is what I was trying to build

This is what I actually built

Thoughts

I chose to do this as a time-boxed exercise so that meant I couldn't spend as long as I would have liked to fine-tune the styling.

I think that my fonts are a bit off, specifically the font weight and spacing but if this was a real-life task, I'd hope to have a more comprehensive design document that includes font weights and line heights. I think you might get this level of detail with the paid tier of Frontend Masters and would make it easier to create a pixel-perfect component.

However, being able to spot those nuances and recreate them with CSS is an area for improvement - you might not always have the luxury of having a fully fleshed out design specification or design system.

I think I also should have used the same text content to make it possible to compare a like-for-like design.

What I learned/ refreshed

During this project, I refreshed my knowledge on the following areas of Frontend Development and learnt a couple of CSS tricks that I hadn't used before.

• [Recap] Responsive design and how to use media queries to build responsive layouts
• [Recap] Responsive font sizes - I tried using both em and rem and have decided that rem is more predictable
• [Recap] Semantic HTML elements
• [Recap] css transitions
• [New] css filters

transition: filter 0.5s ease-in-out;

&:hover {

filter:  brightness(90%);

}

• [Recap] Setting up Storybook
• [Recap] SASS - mainly used the parent selector (&) example above
• [Recap] Basic TypeScript for React Functional Components
• [New] Styled Components (example below). I have recently used emotion (which is built on Styled Components) and wanted to compare the differences.

export const ButtonStyle = styled.button`

background-color: ${(props: ButtonStyleProps) => props.variant === 'primary' && theme.colours.secondaryOne};

`

}

N.B I think I will need to spend a bit more time using Styled Components before comparing as I'm not sure if the way I am using props is the most efficient approach - this seems much cleaner in Emotion if you have a few styles that need to change based on the same property that is passed into the component.

I would also like to explore theming with Styled Components - this is easy with Emotion and I would like to see if it's as straightforward with Styled Components

Continued development/ next steps

• Deploy the component library so that I can add a publicly accessible link to these posts
• Rebuild the component using CSS grid (or think about using grid in an upcoming project)
• Read more about accessibility and see if there are any updates needed to bring the component in line with accessibility standards
• Think about how small the 'atoms' should be when designing components

Useful resources

• Storybook - I have enjoyed working with Storybook as you can create smaller components in isolation and then bring them together

Here is a link to the repository, if anyone has any feedback on how to improve the component that would be hugely appreciated.

Any feedback on the article itself would also help me out for posts I write in the future.

Comments

[ruthmoog]

This looks great Ayelisha!

I've been refactoring my portfolio so I can start using variables for cleaner css, & I'll look into rem too on your recommendation. Sounds good 👍🏻 Thanks for sharing this!