Submitted over 3 years ago

Bookmark - ReactJS, Webpack, Sass, BEM, Mobile first, IO API

tediko•6,700

@tediko

Preview site View code

This is a solution for...Bookmark landing page

HTML
CSS
JS

3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hello👋!

This is my 30th solution on Frontend Mentor! 🥳 The project was made using ReactJS which I just started to learn. I've always liked breaking my code into modules or parts so I instantly liked building my app using components that manage their own state. I also enjoyed writing JSX syntax which makes the code very readable and transparent. The fact that rendering logic, functionality is inherently coupled with UI logic is awesome. I look forward to learn more about React because many of its benefits can be seen at first glance. List of things I learned or used creating this project:

I used ReactJS library to create an app. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. Read More(1) - Watch tutorial(2).
Implemented defer to my script tag. The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script is fetched asynchronously, and it’s executed only after the HTML parsing is done. Read More
Prevented body scrolling on iOS while the mobile menu is open. So far I was using helper class with overflow: hidden on the <body> element to prevent scrolling. But unfortunately, that does not work on iOS. (It does work when nav is on top of the window whole time but it doesn't when we add position: fixed to it when we want our nav to be always on top of our viewport). I use position: fixed on body in combination with storing the scroll position of the user so we can restore the scroll position after the fact. Read More

In this project I also added touch-enabled mobile navigation, accessibility skip to content link, sticky nav menu using Intersection Observer API and others. You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.

I would like to thank @ApplePieGiraffe for giving me great resources about React and also @brasspetals for sending me good article about how to section your HTML. During the course of the project, I noticed how much I could use a code formatter like a prettier. I will definitely start using it in the next project, if you have any tips about it, please. Any good resources about react files architecture? Additional feedback or a criticism will be appreciated! 😅

Thanks! 😁

Community feedback

Please log in to post a comment

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