Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
P

Francisldn

@francisldn
London
100Points

Currently a freelance smart contract developer learning frontend development. Dev contributor @ Airswap | #JS #TS #Solidity #react #nodejs #truffle #hardhat | Open to new opportunities

I’m currently learning...

React library and hooks, NextJS, Typescript, responsive design - focusing on building portfolio projects

Latest Solutions

  • Desktop design screenshot for the Job listings with filtering coding challenge

    Responsive Job Listing Search with NextJS, Tailwind and Typescript

    #next#react#typescript#tailwind-css
    • HTML
    • CSS
    • JS
    0
    Submitted

    What I have learnt

    NextJS framework

    • This is my first time using NextJS so I spent some time initially to learn about the details of the framework. One useful thing I learnt was how to create the Layout component for NavBar and nest the pageProps within the Layout component.
    • The main challenge in NextJS for me is how to use various data fetching components such as getStaticProps, getServerSideProps and getStaticPaths which I don't get to use in this project but hopefully I will for the next project.
    • I find that <Image> which is the native NextJS img component is not very easy nor flexible to use, so I have resorted to using <img> which offers more flexibility in terms of CSS styling.

    Tailwind CSS

    • This is my first time using Tailwind CSS and I really love it - for the ease of use, flexibility and responsiveness. As this is my first time using Tailwind, I also spent some time to familiarize myself with the various utilities offered by Tailwind. There was an initial learning curve in knowing the various class names that are available but it is relatively easy to pick up.
    • It is also convenient to create re-usable CSS classes in Tailwind in the normal CSS file
    • To define custom colors, fonts or other settings, it is possible to do so in tailwind.config.js
    • Specifying the layout and styling for various screen-sizes is really easy with Tailwind without having to write media queries, which saves a lot of time

    Typescript

    • I find that using Typescript instead of JS has slowed down my development time significantly due to the need to resolve Typescript errors. However I hope this will pay off in the longer term for practicing type-safe secure coding practices.
    • To resolve MouseEvent type error, one can cast the event.target as an Element or HTMLElement.

    Search function

    • To implement the incremental search function, I discovered Array.includes function which makes it really easy to filter with multiple strings. Example of the code as below:
    for(let i=0; i<newList.length; i++) {
          newFilterData = newFilterData.filter(({tags}) => tags.includes(newList[i]))
        }
    

    I seem to have problems with the HTML tags in Next but I'm still yet to figure out how to resolve them. Any help would be much appreciated.

    Any comments/suggestions welcome!

  • Desktop design screenshot for the GitHub user search app coding challenge

    Github Search using Typescript React and SCSS

    #react#typescript#sass/scss
    • HTML
    • CSS
    • JS
    • API
    1
    Submitted

    SCSS setup

    • As this is my first time using SCSS, setting up the folder structure took a while for me, but once it was set up, it provided a much easier development experience compared to using vanilla CSS. In particular, I would like to highlight a few things as below. 1. Nesting of CSS selectors - SCSS allows for nesting of selectors which allows for easier maintenance and reading 2. Creating variables using @mixin and @functions which provides for reusability 3. Creating CSS group properties such as colors and font which then allows for easy retrieval using map-get function 4. SCSS function such as lighten() enables user to easily change color to lighter shade

    Typescript React

    • I have used React in JS before, but this is my first time using Typescript React for development. Given the strongly-typed nature of Typescript, it took a longer development time as I had to figure out how to resolve certain error messages which are specific to Typescript. I had found Typescript intimidating in the past and was put off by the longer time requirement for development, but this experience has helped me appreciate Typescript a bit more and understand ways to deal with Typescript-specific errors. I did encounter an error which I could not resolve and I have posted it on Stackoverflow here. It is a problem regarding using useRef react hook to add cssText. Would highly appreciate it if anyone has any insight into this problem.

    Responsive mobile and tablet layout

    • It took me a while to adjust the desktop layout to tablet and mobile. I eventually used position: absolute to organise the layout as required. I have learnt various CSS position properties through the process.

    Dark/light mode & localStorage

    • I have learnt how to set dark and light mode using CSS properties and how to store the state in localStorage, using localStorage.getItem() and localStorage.setItem() functions. This allows user to store their viewing mode preference in the local storage and their preference will be persisted for their next visit.
  • Desktop design screenshot for the Art gallery website coding challenge

    Art gallery website challenge

    #react#react-router
    • HTML
    • CSS
    8
    Submitted

    The focus of this project is about creating layout using CSS, in particular CSS grid. I was unable to render the heading - Modern Art Gallery in 2 different colours. Any feedback/help in this would be much appreciated.

  • Desktop design screenshot for the Interactive rating component coding challenge

    Interactive Feedback Form Component

    #react#react-router#material-ui
    • HTML
    • CSS
    • JS
    2
    Submitted

    I find it most challenging to find ways to persist state when routing to a new page. For the purpose of this project, I have chosen to store the "rating" state in URL and call useParam to retrieve the state on a new page. Would like to find out if there are other ways to do this.

Latest Comments

  • Solution screenshot
    • HTML
    • CSS
    • JS
    • API

    Github Search using Typescript React and SCSS

    1
    P
    Francisldn100 | Posted 16 days agocommented on Francisldn's "GitHub user search app" solution

    While tackling this challenge, I have encountered an issue which I could not resolve: https://stackoverflow.com/questions/72095723/problem-with-using-useref-to-add-csstext-in-typescript

    Would highly appreciate if anyone can share any insight into this issue.

    0
  • Solution screenshot
    • HTML
    • CSS

    QR-code-component

    4
    P
    Francisldn100 | Posted 16 days agocommented on Nicolas Eiriz's "QR code component" solution

    Hi @NicolasEiriz, regarding your question, this is caused by the default body height setting. Body height is by default set to the height of the elements (.card + .attribution) on the page. So you should add below to expand the body height to 100% of the viewport height. Then flexbox will automatically center the elements.

    body {
    min-height: 100vh;
    }
    

    Refer to this article to learn more.

    0
  • Solution screenshot
    • HTML
    • CSS

    Art gallery website | HTML, CSS, JS

    9
    P
    Francisldn100 | Posted 20 days agocommented on Christopher Adolphe's "Art gallery website" solution

    Well done @christopher-adolphe, love your solution, so many learning points for me. Cool animation with GSAP. I'm gonna start using it in my project.

    0