https://www.notion.so/Front-End-Dev-Challenge-feb43cb413e644e683ce7bf84cff7c16
This is the first time I've used next.js
-
how does css work? It seems to be in 3 places --
components/<component>.module.css
,public/static/styles.css
, and inpages/index.js
in a<style jsx>
part of the JS. -
The commands in
npm
arenext dev
andnext build
, sonextjs
is a sort of compiler for the website... but unlikebrowserify
orwebpack
that have specific goals -- compiling commonjs style JS, next is for the entire website, so this means things like optimizing which bundles you serve on which routes, and putting css into optimal bundles, and rendering some routes server side... so this makes me wonder exactly what it does? How does it's algorithm work when dealing with routes, server-side rendering, etc -
how do you view hover states in figma?
-
how to use sass for css?
-
what is the target of compilation? I would think there should be a folder like
public
that holds the compiled site -- static pages and single-page javascript
-
form validation is done with html5
pattern
attribute and default invalid helper text -- the simplest possible solution for showing error messages -
There is only 1 screen in this demo. I assume in real life you would want to show a different page if the user is logged in. Instead, i just added some green text if the user is logged in.
-
The image of the rocket inverts the color while the login is 'resolving'
-
We're using the browser's default validation UI to show problems with validating the login form. The is no display built for a server-side error with login because there is no server
- lighthouse
- performance -- how to measure the 'real' site vs a development site?