Skip to content
OverviewSolutions
10
Comments
10

tris6

@tris6170 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Time Tracking Dashboard

    tris6•170
    Submitted 4 months ago

    I'm very keen to see other solutions. I suspect my code is overly-verbose from being new to many of these problems.

    For positioning the colored strips overlapping the content, my properties became very pixel-perfect rather than intrinsic.

    My JS also selects every timefield using its' own individual ID. So I have 15 lines of just .getElementById. I wonder if there's a more elegant way to map ID to variables.

    2 comments

  • Newsletter Sign-up Form

    tris6•170
    Submitted 5 months ago

    I'm not sure if I was supposed to HTML route to a success page. I simply put the form card in one div, the success card in another, and used buttons to toggle between displaying and hiding each other.

    The portrait breakpoint is probably not as efficient as it could be. I did a lot of micro-managing container sizes. There is probably more room to size containers intrinsically to the content.

    My naming conventions are a little all-over-the-place. JS functions have a mix of uppercamel and camel. And across CSS and JS, a mix of underscores, hyphens, and camel. I'm sure I'll get into a good system as I get more familiar working across both languages.

    1 comment

  • Article Preview Component

    tris6•170
    Submitted 5 months ago

    I'm still very unsure how best to handle SVGs in a modular way. I wanted to keep the icons in external files, and tried a few src and object properties to embed them, but could not get CSS to modify the embed. I eventually gave up: copy-and-pasted SVG paths straight into the HTML, and select svg from there.

    Looking at Stack Overflow, it seems like many are struggling with the same issue. There seems to be a lack of established best practice for modular SVG work without long-winded JS work-arounds. So, not really sure.

    1 comment

  • Testimonials Grid Section

    tris6•170
    Submitted 5 months ago

    Nothing seemed ambiguous for this project.

    1 comment

  • Four Card Feature

    tris6•170
    Submitted 5 months ago

    In general I feel a bit torn between chasing pixel perfection and using progressive enhancement principles. It was jarring to study Every Layout, and immediately move on to these design recreation exercises. I guess each approach has their place across different projects, and the nuance will get clearer with more experience.

    1 comment

  • Product Review

    tris6•170
    Submitted 8 months ago

    It felt like I spent a lot of lines fine-tuning margins. I possibly could get the layout in a more elegant way.

    1 comment
View more solutions

Latest comments

  • tris6•170
    @tris6Posted 4 months ago

    Great use of looping to populate the fields! I need to study your JS logic, how to achieve that number of lines.

    Using fixed widths rather than vw would likely look better at more container widths.

    1
  • tris6•170
    @tris6Posted 5 months ago

    Impeccable code! JS is efficient. CSS has fantastic use of min-/max- properties and sizing with relative units.

    0
  • tris6•170
    @tris6Posted 5 months ago

    Really efficient code, especially with the use of pseudo-selectors.

    End result itself looks great! Only fault I can see is the alignment of the icons in the share bar.

    Marked as helpful
    0
  • tris6•170
    @tris6Posted 5 months ago

    Nice! I'm studying your CSS because the methods are quite different to mine.

    Looks like the background color and card gap is a little off.

    0
  • tris6•170
    @tris6Posted 5 months ago

    Nice efficient code! I'm studying your use of selectors and properties to do this in only 120 lines.

    I've read in a few places it's good to only have one <H1> in a page. Might be something to watch out for.

    There's also room to match the box sizing and title formatting more closely. But as a learning experience I can understand there's not much to be gained from this detail.

    0
  • z-mn•150
    @z-mnSubmitted 8 months ago
    What specific areas of your project would you like help with?

    Any form of feedback as to where I can improve would be appreciated.

    Responsive card using media queries

    1
    tris6•170
    @tris6Posted 8 months ago

    Great code organization and nice use of reusable skin classes! And thanks for introducing me to place-content property. (Where this been all my life? I've been using two lines like a sucker!)

    Just a little flag that your H1 is a little smaller, thinner and spacier than the design. But, I do prefer your look to the mockup, so not neccessarily a bad thing.

    Marked as helpful
    0
View more comments