Kim Fransson

Latest comments

• 

  P

  Tsotne Meladze•1,060

  @tsotneforesterSubmitted 5 days ago

  What are you most proud of, and what would you do differently next time?

  wow... what a delightful project. 🎉✨ I remember myself to take this challenge at the very beginning my web dev journey, and I could not fulfill it properly with vanilla JS, but I did most part... Now I have done it finally with react

  please test it and let me know what malfunctions, if any... 🙏

  I still got to add bonus features: smart cpu moves and url-wise game progress with some keyboard-less solution, that will definitely work pretty well here.

  

  Tic Tac Toe - React

  #react#styled-components#vite

  1

  20
  

  Kim Fransson•200

  @kim-franssonPosted 5 days ago

  Hi man! Awesome work with the subtle animations, I like the staggering animation of the squares when a game starts, very satisfying.

  Here are some of my feedback/improvements:

  Animation / Gameplay

  • I like the switch animation wiggle, but the background transition feels a little bit off/slow.
  • When playing against the cpu there is a slight delay, maybe you can add some loading/waiting animation? My first tic tac toe game I tried to add some sort of visualizing where the computer would put its mark here is my old solution
  • Regarding gameplay, X always starts, but then I alternate who will start the next game (think its more fair, you always have a slight upperhand if you always start, I think)
  • You can persist the state, so If I refresh the game is not reset.

  Accessibility

  • When tabbing interactive elements are missing focus outline.

  Fun improvements

  • Change CPU Difficulty setting
  • Different play modes GiiKER tic tac toe has some fun modes like infinity mode or memory mode.
  • Sound design

  All the best

  // Kim

  Marked as helpful

  0
• 

  Anto Joy Nellissery•80

  @antojoy23Submitted 21 days ago

  What are you most proud of, and what would you do differently next time?

  Using NextJS was an overkill for this challenge. But since I wanted to learn more about NextJS went ahead with it. If not would have gone for just React with Vite bundler without any framework like NextJS.

  What challenges did you encounter, and how did you overcome them?

  The animation to do the flip was challenging, checked out some online resource on how to do it and implemented it in a way which I would easier to implement in react and less use of dom manipulation

  What specific areas of your project would you like help with?

  I feel the animation can be better, maybe i need to use some external animation framework like Gsap but thought it would not be required for this challenge.

  Would like to create a more realistic flip which flips the entire half of the container. The current implementation feels like only the number flips.

  

  Launch Countdown done with NextJS (TS) and animation with pure css

  #next#react

  1

  30
  

  Kim Fransson•200

  @kim-franssonPosted 20 days ago

  Hi! Nice work, really like the overall structure and look and feel. Here is some quick feedback.

  Tips

  Insted of creating two divs for the background images, you could stack images using the background property.

  html {
      background: url("./assets/images/pattern-hills.svg") bottom / contain
          no-repeat,
        url("./assets/images/bg-stars.svg") repeat, var(--very-dark-blue);
    }
  

  First background layer:

  url("./assets/images/pattern-hills.svg") → Sets an image as the background.

  bottom / contain → Positions the image at the bottom and scales it to fit while maintaining its aspect ratio.

  no-repeat → Ensures the image appears only once.

  Second background layer:

  url("./assets/images/bg-stars.svg") repeat → Uses another image that repeats across the entire background.

  Third background layer: var(--very-dark-blue) → Sets a solid color (--very-dark-blue) as the base layer.

  Since CSS backgrounds stack, the solid color appears underneath, the stars repeat over it, and the hill pattern is placed on top at the bottom of the viewport.

  Animation

  This one may be a bit trickier and would probably break the current css. But you need to play around with perspective, transform-style: preserve-3d; and backface-visibility: hidden;.

  Here are an example of 3D like rotation. 100days CSS and the codepen. You may also need to play around with perspective-origin.

  Fun personal touches

  • Try to add sound effects for the countdown, and maybe even some background music? When adding sound you will probably need to add a on/off toggle (a lot of browsers suppress sound before interacting with the site).

  • Try and animate the background stars, maybe add a small rotation, making it look like the "earth is rotating".

  All the best, // Kim

  Marked as helpful

  1
• 

  P

  Daniel 🛸•44,770

  @danielmrz-devSubmitted 25 days ago

  What are you most proud of, and what would you do differently next time?

  🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

  🛠️ Built with:

  • Angular 🅰️
  • SASS 🎨
  • Angular Material 🆒
  • RxJS 🔄️
  • TypeScript 🔷
  • BEM Notation 🅱️
  • Third Party API 🆕 //
  • Mobile first workflow approach 📲

  Honesttly, I'm not very happy with the final result. But that's on me. I don't think I've made the best decisions on this project about routing, but I did it to practice a few new concepts. Again, not the best result, but at least it's finished.

  If you have any suggestions on how I can improve this project, feel free to leave me a comment!

  Feedback welcome 😊

  

  Planets fact site built with Angular and SASS

  #angular#rxjs#sass/scss#typescript#angular-material

  2

  80
  

  Kim Fransson•200

  @kim-franssonPosted 22 days ago

  Hi man nice work! Looks solid! Here are some minor improvements you could make or maybe think about for your next project.

  Accessibility

  • Background and foreground colors do not have a sufficient contrast ratio (Overview, structure and surface buttons for mercury, venus, jupiter, saturn and uranus). Improving this make the text a bit easier to read.
  • The links are not tabbable making it difficult for keyboard users to navigate.
  • The tab order is also not logical, overview -> structure -> surface -> wikipedia link. I had the same issue because of how the mobile vs desktop design are a bit different.

  Fun improvements

  • Make the size of the planet different depending on the actual scale of the planet. (small image for mercury, but a bigger image for jupiter)
  • Some cool hover effects for the planet links, I always end up doing something like this example shared-layout-animation
  • You can make the background image (the stars) more alive by rotating it or creating some falling stars animations.
  • You can dynamically change the metadata title / description or maybe event the favicon depending on which planet you are on!
  • Some cool hover effect for the planet sections (overview, structure and surface)

  All the best, Kim

  Marked as helpful

  0
• 

  P

  Daniil•610

  @DaniilGurskiSubmitted about 1 month ago

  What are you most proud of, and what would you do differently next time?

  Last time I did this project I decided to leave it for the future, now that I have more knowledge in react I decided to finish it. I'm happy with the fact that it is functional and responsive and although I'm not very happy with some things in the code. Also I wasn't sure how to do one feature specified in the design (highlighting the winning row / col / diagonal) so I left it unimplemented.

  What challenges did you encounter, and how did you overcome them?

  In fact, the whole project surprisingly wasn't that easy. The state management in the application was probably the most challanging for me. For a while I used only jotai, but later I abstracted some states in reducer because the code became hard to read.

  What specific areas of your project would you like help with?

  I would like to hear how you dealt with state management and determining the winner of the game as I think these are things I could improve on.

  

  Responsive Tic-tac-toe made with React

  #react#tailwind-css#typescript

  2

  21
  

  Kim Fransson•200

  @kim-franssonPosted about 1 month ago

  Hi!

  Nice work on completing the challenge! For tic tac toe I actually think its easier to "calculate" a winner by hard coding the "winning combinations" and then check if all values are the same for a "line".

  export function calculateWinner(squares: Squares) {
    const lines = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6],
    ];
  
    for (let i = 0; i < lines.length; i++) {
      const [a, b, c] = lines[i];
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }
  
    return null;
  }
  

  Then the game is over when we have a winner or if there are not more turns.

  export function calculateTurnsLeft(squares: Squares) {
    return squares.filter((square) => !square).length;
  }
  

  Making the code a bit simpler and easier to understand, and reason with.

  But for a more complex game like four in a row, hard coding the winning lines will probably not suffice :D

  Marked as helpful

  1