Giter VIP home page Giter VIP logo

qr-code-challenge-react-sass's Introduction

Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

  1. Overview
  2. Screenshot
  3. Links
  4. My process
  5. Built with
  6. What I learned
  7. Continued development
  8. Useful resources
  9. Author
  10. Acknowledgments

Overview

Screenshot

QR code component screenshot

Links

  1. Solution URL: QR code github
  2. Live Site URL: QR code challenge live

My process

Built with

  1. Semantic HTML5 markup
  2. ReactJS (used create-react-app command to setup the project)
  3. SASS Ruby
  4. React Testing Library
  5. Prettier formatter

What I learned

  1. Importance of rel="noreferrer”. When we use target="_blank" in HTML code to open a link in a new tab or window, there's a potential security risk, especially in older web browsers. If we do not add this information to the link, there's a chance that the newly opened tab or window can know details about the page that opened it. This might not be a problem in many cases, but it could potentially be exploited by bad websites.

Improvements from previous version

  1. Instead of getting fonts from another link, I hosted it locally to improve web performance metrics. PageSpeed Insights mobile PageSpeed Insights desktop
  2. In another iteration, I was able to vertically position the QR code to the center of the mobile screen especially when the bottom bar of the browser exists. In my case, svh unit is suitable since this project does not involve any scrolling QR code mobile version
  3. Segregated the SCSS files to enhance modularity and maintainability

Continued development

  1. Explore more testing such as clicking the footer links, and taking one to the respective sites.
  2. PageSpeed Insight detected that there is no Content Security Policy (CSP) in enforcement mode. A strong CSP significantly reduces the risk of cross-site scripting (XSS) attacks. Learn how to use a CSP to prevent XSS

Useful resources

  1. Scrimba's React course - A hands-on mode of practicing React. It was a refresher for me.
  2. Steps to build React project using create-react-app
  3. Sass
  4. New viewport unit - Talked about when svh is used

Author

  1. Website - Rupali Roy Choudhury
  2. Frontend Mentor - @rupali317

Acknowledgments

I express my gratitude towards my mentor - Deborah for the insightful code review session

qr-code-challenge-react-sass's People

Contributors

rupali317 avatar priyankarc16 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.