Re-learning the basics
Tags: react, showdev, wecoded
Published: 2021-05-19 16:53:47

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](https://www.frontendmentor.io/challenges). The first challenge I attempted was the [Single price grid component](https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc).

### 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](https://reactjs.org/)
- [Styled Components](https://styled-components.com/)
- [TypeScript](https://www.typescriptlang.org/)

### What I built

This is what I was trying to build
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0iqdmwa9lojfp2q073ut.png)
 
This is what I actually built
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wv2lqwj98h7gpq1kemav.png)

#### 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](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) 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](https://www.w3schools.com/html/html5_semantic_elements.asp)
- [Recap] [css transitions](https://css-tricks.com/almanac/properties/t/transition/)
- [New] [css filters](https://til.hashrocket.com/posts/4jhm8rrq7c-lighten-and-darken-with-css-brightness-filter)

```css

transition: filter 0.5s ease-in-out;

&:hover {

filter:  brightness(90%);

}

```

- [Recap] Setting up Storybook
- [Recap] SASS - mainly used the [parent selector (&) example above](https://sass-lang.com/documentation/style-rules/parent-selector)
- [Recap] Basic TypeScript for React Functional Components
- [New] Styled Components (example below). I have recently used [emotion](https://emotion.sh/docs/introduction) (which is built on Styled Components) and wanted to compare the differences. 
```js

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](https://storybook.js.org/docs/react/get-started/introduction) - 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](https://github.com/ayelishaamoah/frontend-projects/tree/main/src/solutions/SinglePriceGridChallenge), 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.