Skip to content
OverviewSolutions
8
Comments
19

Simon Davis

@Skidragon505 points

I'm a developer who likes state machines and picking apart sites that are built that fascinates me. I also like to develop games for fun, read books, karate/gymnastics, and learn foreign languages. I take pride in what I build in addition to ensuring scalability, accessibility, and usability.

I’m currently learning...

Typescript, Design Patterns, System Design, Algorithms, Data Structure, CSS, and Next.js.

Latest solutions

View more solutions

Latest comments

  • Simon Davis•505
    @Skidragon

    Hi Allan, nice job completing the challenge and it being useable! For the small buttons, grid-template-columns: repeat(4, 1fr) and grid-template-rows: repeat(4, 1fr) would have made a 4 by 4 grid then the big buttons at the bottom could have been grid-template-columns: repeat: (2, 1fr). Also the buttons should be button elements rather than div elements, I can't use the accessibility capabilities that buttons have like keyboard accessibility. Anyway three components could be made here to organize it: Button, Display, and RangeInput. Putting the CSS with those components into seperate files would be easier to read through the code and to create better names for the CSS rather than for1, for2, for3 or div1, div2, div3. Material UI has a variant property prop to change the buttons styles like 'primary' or 'secondary'.

    Marked as helpful
  • Simon Davis•505
    @Skidragon

    Hi Yingyi, good job on completing the project! It's kind of a combination of the browser and the API. The API wants to cache the advice for 2 seconds on the server to save extra db calls plus the server will use less resources and most modern browsers wants to cache data as much as possible since its cheaper to get data from the browser rather than browser -> server -> database -> server -> browser. They might be only using redis (key,value) store and might not need a seperate database.

    Calling with the same URL might make the browser store the URL as a key and the data as the value { URL: data }. So the solution I did was put a new Date() generated timestamp query param at the end of my URL: https://api.adviceslip.com/advice?timestamp=1647571215979. Last thing, the advice container doesn't need a media query, using width: 100%; and max-width: 40rem or something will do the trick instead of vw. Anyway I did wish they would send to the UI how long they will cache things to disable the button on the UI for the period.

    Marked as helpful
  • Simon Davis•505
    @Skidragon

    Hi Victoria, good job at making this and I had fun playing with it. I'm also working on this project and working with Xstate and spawning player instances depending on what the user chooses. Just some ideas that I'm throwing out here: Use a custom component using radio element to create the create game form buttons for accessibility purposes. Xstate.js is simplifying the game making process for me at the moment, essentially I have a game actor and spawn player actors to talk to each other. The game actor state holds the tokens, spawn the amount of players selected, keeps track of player's turn. The player actor tells the game actor that I matched these tokens correctly by storing it in its own state. Also the game actor has different phases like initializingGame -> choosingPlayer -> playerMoves -> checkWin -> choosingPlayer or gameOver. Here is the idea thus far: https://github.com/Skidragon/monorepo-portfolio/tree/memory/apps/memory

  • Simon Davis•505
    @Skidragon

    Hi Kijana, great job completing the project and adding in a search field! I do have a couple of suggestions, since this project isn't very big I would have made only 3 components: AdviceContainer to replace Box since it describes it better because every element is a box essentially, SearchField, and Footer. If the company expands more on the project then we can break out into more smaller components if need be. Also you could look into react-query, I've used it professionally and its great for fetching data and do mutations (create, update, delete). It even tells the status of the fetching process. Another way to challenge yourself is try to use typescript if you have the time. I recommend Jack Herrington youtube channel to learn from his playlist. I hope this is helpful!

    Marked as helpful
  • Simon Davis•505
    @Skidragon

    Hi @cooper, good job on making it full stack. I do have a couple of suggestions, since it's an e-commerce site, SEO is very important, I would look into Next.js because it helps with dealing with SEO, lazy loading images, and even if the user has javascript disabled, they can still see the web page since javascript can build the page on the server rather than client side. Also for the height of the footer, I would use padding with em units instead of height, it adjusts to the content inside the footer rather than a fixed height. I would watch Kevin Powel's em vs rem on youtube. I would make the stepper field input box as disabled and I think there is a type conversion happening because I'm able to add more items then the max. Here is my solution if you want to take a look:

    https://www.frontendmentor.io/solutions/nx-nextjs-typescript-graphcms-nestjs-and-styled-components-cPFj72mX9

    I didn't do every section since I would need to upload more images/content to the CMS.

  • Simon Davis•505
    @Skidragon

    Hi Nicolas, for width, I usually set the width: 100% then I set a max-width: 120ch or something. I use rem/em instead of pixels because some devices calculate pixels differently. For fetching requests, disabling it is good enough for the frontend since this API should be taking care of any attacks like DOS (Denial of service). If its not an API that uses caching and throttling the requests, you would need to have your own server to talk between the client and the API.

    Marked as helpful
View more comments