Skip to content
OverviewSolutions
58
Comments
9
Chris Psilocybin
@xphstos

All comments

  • Matias Altier•130
    @matiasaltierSubmitted 3 months ago
    What specific areas of your project would you like help with?

    I would like help with the semantics of my code or how I could optimize it.

    Recipe Page - BEM

    1
    Chris Psilocybin•1,185
    @xphstosPosted 3 months ago

    Great job! You really nailed the semantics—especially with your use of sections, ordered, and unordered lists.

    If I were to be picky, I’d suggest replacing the <div> with the class omelette_recipe with an <article>. It fits perfectly within the definition of article content.

    And if I wanted to be really picky, I’d recommend adding the nutrition_description inside the table as a <caption>. It’s essentially a caption for the table, after all!

    That’s all I’ve got. Fantastic work—keep it up!

    Marked as helpful
    0
  • John Pugh•340
    @JohnPugh688Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Finally getting my first project using javascript. I managed to get things working but i really don't know how to be honest. my hope is with time and more projects it will begin to make more sense.

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

    Struggling with javascript to be honest as there seems to be so many ways to achieve the same goal and its hard to know the best way. Im also struggling with using tailwind with javascript. I find it hard to find solutions online when i encounter problems.

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

    I would love to know what others use to link the html to the javascript when working with tailwind css as i find with all the classes you add with tailwind it makes more sense to get it with an id but you can only have one id and numerous class names. what is the common practise amongst developers using Tailwind css?

    Newsletter challenge using TailwindCss and Javascript

    2
    Chris Psilocybin•1,185
    @xphstosPosted 3 months ago

    Pretty clean solution! I like it!

    Regarding on selecting items in JS, there is no correct or incorrect way. That's the best and the worst part of using HTML, CSS and JS.

    There are some best practices though that enforcing us with some confidence about our code.

    1. Is using IDs to element we use with JS. IDs must be unique although this will error only if you validate your HTML.

    2. Using data-attributes. Data attributes can have a predefined format, like data-js="NAME". Again we're responsible to make them unique and even if we use the same name multiple times, there is no harm.

    3. Special CSS class. That's what you did and it's fine! You get the same treatment as using data attributes.

    4. Using a combination of the above just to be sure our selector is unique. For example, in our very simple case of a form, a selector like .js-email[name="email"] is more than enough. Keep in mind that if you work with components, that newsletter component could live on multiple pages and one of them could be another page containing a form (like a contact form) that also asks for user's email. Suddenly our selector seems random enough to be confusing. Usually in cases like that you could use #newsletterForm input[name="email"] and #contactForm input[name="email"]

    Again, kudos for your solution! You just have a small error in your code. In email-input.js:18 you write email.ariaPlaceholder.style.textColor = "#ff625730"; Style is not an attribute of ariaPlaceholder, probably added there by mistake.

    0
  • Eli Silk•660
    @elisilkSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    Thanks to the comments and looking at some other solutions, I was happy with my revised grid solution that takes advantage of the grid-auto-flow and the grid shorthand to position the cards correctly.

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

    If anyone knows how to get the top borders of each of the cards to have a straight edge rather than curved that would be helpful.

    Solution with flexbox and grid layout and CSS custom properties

    2
    Chris Psilocybin•1,185
    @xphstosPosted 3 months ago

    Nice work! Great effort overall!

    I just want to clarify that there's no "wrong" way to approach things, especially when it comes to CSS. It's rare for a CSS solution that visually matches the design to be considered incorrect.

    That said, one thing you might want to consider is using grid in your .layout-grid element.

    Here's a tip: You can create a 3x2 grid where the first and last cards span across 2 rows on desktop. This way, you won't need the 3 .col elements.

    Marked as helpful
    1
  • Chris Psilocybin•1,185
    @xphstosPosted 11 months ago

    You should think it like this.. Does the learning tag and the published has anything to do the image? Not quite, the learning has to do with the content of the card, meaning it's a tutorial article and the publish date obviously has to do with when the article was published. The image is not even needed to give meaning to the content of the article. Figcaption should describe the contents of a figure if those are media elements and only if it gives value to the user.

    In our case I don't see the value. It's plain decorative.

    Marked as helpful
    0
  • Chris Psilocybin•1,185
    @xphstosPosted over 2 years ago

    Hey there! First of all, great work on your solution!

    My approach on using the "correct" unit is based on accessibility. That's why I usually go for rem / em. I never mess with the default rem to pixel value and that leaves me with 16px to be equal with 1rem. That also helps me because in all of my design I use the 8point grid system. You can read more on that here. Not only I have a better/easier way to calculate all my margins/paddings but it's also pretty much accessible. As I mentioned in most browsers the default value of 1rem is 16px. A visually impared user it's pretty much likely to change that value to a bigger one, like 18 or 20. That change immediatelly reflects in all aspects of my design not only in fonts. Every padding and margin will scale up and I get to keep my design's cohesion.

    Percentages are useful in many cases, in this example a case for percentages would be the graph bars. You set the chart's height to a fixed value like 12.5rem or 200px and then use percentages in bar's height. Based on max value in dataset being the 100% height and the rest are calculated accordingly...

    As for what's the lowest screen resolution you need to test your design, a safe option is to go as low as 320px. The old iPhone SE uses this resolution. Android phones using this resolution are way way too old to be "alive" and working but I've seen many people using that iPhone model. A "modern" resolution is 375px and the greatest and latest models from Samsung / iPhone / Huawei etc. are using 425px or close to that.

    It's not like we're supporting browsers like IE but damn we could go as low as 320px 😛 So 320px is a bit low but pretty inclusive I should say.

    Marked as helpful
    1
  • Ting-Huei Chen•180
    @hejkeikeiSubmitted over 2 years ago

    Any feedback would be appreciated:)

    I would like to know: Q. How did everyone center the dollar sign? The pseudo class first-letter only works for block element, the property vertical-align only works for inline element. Therefore, I turn my span into inline-block so that both first-letter and vertical-align work.

    Pricing component with toggle solution

    1
    Chris Psilocybin•1,185
    @xphstosPosted over 2 years ago

    Hey there! Good job on this one! Regarding your question about the dollar sign.

    If you have two inline elements with different font-size you can have them aligned (vertically) if both of them have the same line-height and adjust the vertical-align property of the shorter one. That's actually the "hard" or the "old" way if you prefer.. For example, we have this piece of html:

    <p>
  <span class="sign">$</span>
  <span class="value">199.99</span>
</p>

    We could have them aligned with this:

    span {
  line-height: 3rem;
}

span.sign {
  vertical-align: top;
}

span.value {
  font-size: 2rem;
}

    Nowadays we have flexboxes to do that work for us. Again, for the same piece of code we could have the following css.

    p {
  display: flex;
  align-items: center;
}

span.value {
  font-size: 2rem;
}

    This time we set the parent as a flex container and we align vertically all the children. We could also have this by setting the parent element with a position: relative and then set position: absolute at the sign element. Now "just" need to vertically align it by giving it top: 50% and transform: translateY(-50%). The issue now is that the sign falls over the our value. We need to "know" the signs width and apply it as padding in parent element or as margin in our inner element that's right after our sign element. As you can guess it's not the optimal way but an option nonetheless.

    To be honest your solution is a very creative and modern approach! The only drawback it works only for one character, other than that I love it!!!

    As for me, I choose the "old" way just because.. no particular reason. You can see my solution here.

    Marked as helpful
    1
  • Chris Psilocybin•1,185
    @xphstosPosted over 3 years ago

    Hi!

    Sadly, border radius doesn't work with border images. That's why I would suggest that all "border" should be made with pseudo elements (before, after) and just hide their overflow with overflow: hidden; on each card.

    Marked as helpful
    0
  • Paulo Emerencio•80
    @Paulo-EmerencioSubmitted over 3 years ago

    Is there something wrong with this mixin:

    @mixin responsive($property, $size) {
   @media ($property: $size) {
      @content
   }
}

    It worked as expected, but VsCode refuses to put the variable color on the $property in the second line, and github also let it unpainted.

    Profile card component with scss

    2
    Chris Psilocybin•1,185
    @xphstosPosted over 3 years ago

    My question for that mixin would be why? Why write all that when you can simple nest the query on any rule you like?

      @media (max-width: 1024px) { ... }

    If you want to be faster just write a shortcut for this on your code editor, there is no need for a mixin like that. :)

    Marked as helpful
    0
  • Chris Psilocybin•1,185
    @xphstosPosted over 3 years ago

    Looks great! Your only "big" mistake is that you explicitly declare your grid-rows and that leaves that big gap between the centered cards. If you remove that one line then the design is pixel perfect with the mockup!

    Marked as helpful
    0