Skip to content
OverviewSolutions
5
Comments
2

Luke

@lukeSchwade140 points

designer trying to learn a bit of front-end

Latest solutions

  • Multi-page form displayed on one webpage

    Luke•140
    Submitted about 1 year ago
    0 comments

  • Time tracking dashboard that pulls from JSON data

    Luke•140
    Submitted about 1 year ago
    0 comments

  • E-commerce page with lightbox gallery and cart functionality

    Luke•140
    Submitted about 1 year ago

    I wanted to animate the cart entries so that the other ones slide up to fill the gap instead of instantly moving, but it seems that is not possible in vanilla CSS unfortunately, and I wasn't confident in my JS enough to implement it. If there is in fact a way to do that in CSS I'd love to know.

    0 comments

  • Newsletter signup with success message

    Luke•140
    Submitted over 1 year ago

    So my solution for the success message involved changing the pop-up message from display:none to display:initial, which felt not great as I did it. I didn't find much about best practices online, should I be loading an entire new element into the DOM somehow when the success fires instead of toggling visibility in js? Should I be looking into frameworks or is there another jump-off point for how to do that?

    1 comment

  • FAQ Accordion using flexbox, and JS animation

    #animation
    Luke•140
    Submitted over 1 year ago

    I'm familiar with the different options for drop-shadows in photoshop but actually implementing the glow behind the info panel in CSS is a different beast entirely. It would either be too bright on the dark half or too dark on the light half, and I eventually arrived at something that looks ok if you don't pixelpeep. Is there a way to adjust opacity on the dropshadow without altering the element it's linked to?

    0 comments

Latest comments

  • malhar016•20
    @malhar016
    What are you most proud of, and what would you do differently next time?

    Modularizing the UI small components made the rest of the part very smooth. Also, use of css grid, media query and styling SVGs was some of my weak areas so I am glad I could practice with this.

    The readme template was awesome, if provided like this I would defiantly put read me for all my projects.

    I have worked more on web-apps then mobile-apps so mobile-first UI doesn't come naturally to me.

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

    I couldn't place the background SVGs dynamically as each one needed different positions so checked some submitted gits and took reference of their styling.

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

    CSS - I think for this small app I have so much classes if I can get some refacotring advice on them then it would be nice.

    Mobile-First: Is it really needed? Why? What are the drawbacks if I don't follow it really.

    CSS Grid, Flexbox, React

    #react#webpack
    2
    Luke•140
    @lukeSchwade

    Looks great! So, to answer your question about Mobile-first, it's mainly because

    • a majority of web traffic is mobile (over 55%, more or less depending on the kind of website) so it stands to reason that you want to think about your biggest demographic first. This is reason enough in a professional environment, but also

    • Web designs are straightforward compared to mobile. Open any website, and notice that all the content is (usually) single-column centred with whitespace on both sides, which is easier for the eyes to track; you don't have all that wiggle room when everything has to fit snugly (but not too snugly) on a 425px wide mobile screen. It makes sense to tackle the more complicated problem first, then just add breakpoints for the easier problem.

    Think of it like this: your job is to squeeze 30 boxes of stuff into 1) a warehouse, and 2) a storage closet. The first problem is trivial, so you should start by solving the real challenge, which gets you thinking about what parts are essential (eg. do we really need this widget for the small version?)

    Marked as helpful
  • AntennaeVY•110
    @AntennaeVY
    What are you most proud of, and what would you do differently next time?

    I did it

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

    None

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

    How to animate the accordion & icon? the content snaps

    FAQ accordion

    1
    Luke•140
    @lukeSchwade

    If you want to dip into JS, I used this tutorial which was pretty straightforward, and was a great way to learn about constructing objects.

    A bug I ran into was the code uses element.offsetHeight, which doesn't include the margins of elements and the animation will be jerky if your <summary> and content is separated by a margin, so to fix it you have to add the elements margins into the calculation (hardcoded or otherwise), eg

    const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;

    had to be changed to

    const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight + 16}px`;

    (16px was height of my margin on <summary>, will be different if your elements have different margins in different places)