Rafal

Pro
@grizhlieCodes
Maidenhead, UK
1,085Points

Here to practice my understanding of coding, get some awesome feedback and leave whatever knowledge I can for others to benefit from. Started learning front-end web dev in 2020. Currently I work in finance as an entry level analyst in the telecoms industry and mess about with graphic design :)

I'm currently learning...

- SvelteKit - JavaScript - thinking more programatically - Creating webstores - Sprinkles of backend code - Good UI principles - Giving better feedback to others - Planning projects more carefully

Latest Solutions

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

    Job Listing - Custom Search Modal - Sveltekit - SASS

    • HTML
    • CSS
    • JS
    P
    Rafal1,085
    Submitted

    Howdy!

    (Feedback requests on the bottom)

    Initially I wasn't sure what I could learn from this project as I have covered similar things in the past. Then it occured to me to build a custom search-modal and change the behaviour from the original design. I thought it'd be more interesting to build, sorry that it won't match the generated screenshot comparison πŸ˜πŸ˜…...

    A few fun items to mention:

    • I have added keyboard shortcuts to make this feel more 'appy'.
    • If you open up the search modal and use arrow keys and hit enter once you've selected a filter, it will work.
    • If you are on Mac/Windows the shortcuts will change from Ctrl/Cmd + S. I thought it only right to add this.
    • Added a VERY BRIEF custom scroll bar because why not.
    • I have found a jewel of 'filtering' an array with an array. The jewel is using .every() along with .includes().

    Super short example you can run in codepen:

    const filters= [1, 2, 3]
    const data= [1,3,4,5,6]
    const data2 = [1,6,8,4,2,3,9]
    
    const checkMatch = (filterArray, dataArray) => {
         return filterArray.every(filter => dataArray.includes(filter))
    }
    
    console.log(checkMatch(filters, data)) //returns false
    console.log(checkMatch(filters, data2)) //returns true
    

    I don't think that I spent a lot of time perfecting the design, I'll trust that it's close enough without too many errors.

    If I need help with anything it'd be criticism of my HTML. Could I have added more semantic HTML? If so, where and why? If you're really hot and bothered feel free to rip my javascript apart but I know fully well how tiring that is when the project is not yours πŸ˜….

    Cheers!

  • Desktop design screenshot for the Testimonials grid section coding challenge

    Testimonials Grid Component - Used SASS and 'componenty' logic

    • HTML
    • CSS
    P
    Rafal1,085
    Submitted

    Edit: I tried fixing the small styling variances but I'll stop. It seems (to me) that my figma design differs from the generated screenshot comparison.

    (Seeking advice on: automating a mosaic/masonry-layout without a library. This is a rather complicated matter so I don't expect a response besides resources that I might have already looked at (e.g.: the masonry library).)

    Alrighty - so I wanted to do something more interesting than just build this grid out and call it a day.

    What I have attempted is to build this with some scalability in mind, as if it was a 'real' component in a site. If we add dark or light to any particular .testimonial we will achieve a different kind of styling immediately. Suppose this data was coming from a JSON file with a given theme for a card. Then we can go one more layer deep and add a particular background-color utility class, for example ..bg-gray-300 or .bg-purple-500. We have now set a different background on top of the dark/light styling.

    I kept the font styling identical per dark/light testimonial. I also kept the borders around testimonial-author-images more minimal. If I spent more time on this project I would have added a few more utility-class type of scenarios that would style them more uniquely if a specific bg-col was chosen.

    I also made the quotation-mark into a utility class. So if you add highlight as a class to any given testimonial you will add a quotation mark. They differ according to dark/light background colors. The purple testimonial has its' own unique color since it was the original 'highlighted' testimonial.

    What I wish I spent time on: writing some JS to create a mosaic-layout with css grid that automatically plots the various testimonials according to the viewport but quite frankly I'm not ready to dive into that sort of Javascript yet. It would take too much time due to the various calculations I'd need to consider. So for now a simple grid with grid-template-areas will have to do.

  • Desktop design screenshot for the Sunnyside agency landing page coding challenge

    Sunnyside Agency - CSS Grid/Flex - Responsiveness Prioritised

    • HTML
    • CSS
    • JS
    P
    Rafal1,085
    Submitted

    Howdy!

    Another project I plan to do a video for. I mostly wanted to do this project to understand images, how their heights work, how their 'inbuilt ratios' automatically update their heights as the viewport expands horizontally.

    I also wanted to see how this plays into a grid solution and practiced a bit with grid-template-rows: min-content /// auto /// max-content. In the end it was a worthwhile project. I'll spend a bit more time polishing my understanding of my own solution - as weird as that sounds - and will attempt to record a useful video or two to use in replies for anyone who might be struggling with the concepts I explored.

    Cheerio 😁

  • Desktop design screenshot for the Stats preview card component coding challenge

    Stats Preview Card - Grid & Flexbox

    • HTML
    • CSS
    P
    Rafal1,085
    Submitted

    Howdy gang,

    As a rule I avoid pixel-perfection and tend not to use heights to keep everything as responsive and scalable as possible.

    Another example of a basic component coded in the most responsive fashion I currently understand. If you look through the code and find any improvements that pop to mind immediately please share!

    I don't think that I used 'height' for anything in this project to keep it responsive. Whilst not going for pixel-perfection I got pretty close. Think the height of the entire component in desktop is 5pixels short, I left it as such 😁.

    Cheers,

    Rafal

  • Desktop design screenshot for the Galleria slideshow site coding challenge

    Galleria Slideshow Site - Sveltekit, SCSS, Grid

    • HTML
    • CSS
    • JS
    P
    Rafal1,085
    Submitted

    Howdy!

    This looked awesome to make so decided to give it a quick try.

    I quickly realised that the biggest challenge is something I haven't attempted yet in this site: a fully responsive piece of code for a masonry layout, I don't like using libraries when I can avoid it so instead of using masonry (js) I will spend time making my own piece of code that works with CSS Grid - I might update this project once finished.

    This will take a bit more Javascript that I was willing to spend time on this week πŸ˜…, I got close but quickly reverted to a more 'manual' approach of getting close to the original design before I got obsessed.

    If anyone has dabbled with a masonry layout before and got very far, let me know please 😁, I'd love to bounce off my js thoughts against someone's brain.

    The rest was relatively simple. I think the interesting focus-point is always how to avoid 'fixed' sizes with CSS Grid, or CSS in general, and how far can we push for responsivity. More than anything I think this project armed me with a great set of questions that I will use in future grid-layouts. Opting more for min-content / max-content / fr units / minmax instead of just throwing out px / rem units around is the interesting and honestly FUN part of thinking with CSS grid.

    I have not attempted to be pixel perfect as I tend to avoid that these days to force myself to think in more responsive terms. Being very fixed on how close I am to something in pixels usually defeats this mindset quickly for me.

    Anyway, thanks for the fun and really calm design FEM 😁, I'm actually dying to see how other people will solve this challenge, I think I'm the first one ( πŸ₯³ ), perhaps some neat masonry code will be applied πŸ˜‹ or people will use more intelligent approaches to CSS grid than I did.

    Happy coding 😁

  • Desktop design screenshot for the Profile card component coding challenge

    Responsive User Card Component - Grid and Flex

    • HTML
    • CSS
    P
    Rafal1,085
    Submitted

    Howdy!

    Straight off the bat, I don't usually greatly care for background images so didn't spend time on that, just did 1 version by eye and left it.

    Most of my time I spent on CSS trying to ensure the card is as responsive and well structured as it can be, not to achieve a perfect card, but to ensure I'm maintaining best practices (as far as I understand them at the current time).

    Note: I avoid pixel-perfection as I try the sizing to be determined by the content, padding, margin and gaps.

    1. More content can be added and it doesn't break the design

    2. Whether this has a max-width of 350px or 500px, nothing breaks and everything remains responsive.

    3. I didn't use fixed height values anywhere outside of the body and grid-template-rows. This is because I try coding with the content creating the 'height' by itself. This is in effect more 'flexible' and dynamic.

    One thing I don't understand is how background-position works.

    To explain: lets focus on the top-left image. In order to make this position itself relative-to-the-body-center I had to use bottom-right, as opposed to the intuitive top-left. Top-Left made the background-image dissapear. Bottom-right, after setting it up, keeps it 'fixed'. To me this is extremely strange behaviour and I guess I'm missing some fundamental understanding in CSS 😯

Latest Comments

    • HTML
    • CSS
    • JS

    Galleria Slideshow Site with React

    3
    P
    Rafal1,085 | Posted about 1 month agocommented on Hayd's "Galleria slideshow site" solution

    Just posting a portion of the code separately, portion because I think I removed some CSS and some fine-tuning to the below JS, don't ask me why... The idea was for this code to run when the page was mounted in the browser (I was using Svelte) and position the images in the grid by telling each image how many rows it should span. Then grid-auto-flow: dense; would take care of the rest, because css-grid is magic.

    	const updateGrid = (gridItems) => {
    		gridItems.forEach((item) => {
    			const image = item.querySelector('img');
    			const rowHeight = 20; //js
    			const gap = 20; // js
                            // height of element before any manipulation
    			const itemHeight = image.naturalHeight; 
    			const rowSpan = Math.ceil((itemHeight + gap) / (rowHeight + gap));
    			item.style.gridRowEnd = 'span ' + rowSpan;
    			const articleHeight = (rowHeight + gap) * (rowSpan - 1);
    			item.style.height = articleHeight + 'px';
    		});
    	};
    
    	let mounted = false;
    	onMount(() => {
    		mounted = true;
    		const items = document.querySelectorAll('.art-piece');
    		// updateGrid(items);
    	});
    

    Auto-flow was set to dense of course and all that good stuff that grid offers. Also learned about the existence of naturalHeight in javascript, pretty useful stuff.

    0
    • HTML
    • CSS
    • JS

    Galleria Slideshow Site with React

    3
    P
    Rafal1,085 | Posted about 1 month agocommented on Hayd's "Galleria slideshow site" solution

    Solution looks great 😁!

    As for avoiding using masonry, I was pondering the same. I jumped on this one and I think I finished it first but after a little trial and error I realised it would take a ton of time to get an algorithm in place. I ended up folding and applying 4 columns. And I dislike using libraries for this sort of stuff as I end up learning less so for now I'm avoiding them.

    The concept however is simple. Application of it gets slightly complicated around step 4 (succeeding step 4 was the closest I got to) and rather complicated around step 5.

    1. You make the container into CSS grid.
    2. You set the columns as you see fit, assuming some repeat and auto-fit.
    3. The rows is where the 'magic' starts to take place. You set them to something like grid-auto-rows: 20px.
    4. Then we get into Javascript. We basically want to get the height of each image and apply grid-row: span x. The math behind this means that we need to include how many rows the image spans + count in the gap-heights. It gets rather messy from this point on.
    5. Because now we need to write an algorithm that best tries to create a grid that has columns as similar in height as possible. The most efficient way I think would be to order the images by height. Tallest images would be fitted as the first image in each column. Then you keep on applying some sort of logic that seems to work. I suck at math so I can't even imagine it, i'd need to trial-and-error.

    But that is the basic gist. I got until step 4. So it was fully functioning but I couldn't get the images to line-up. Something would always be sticking out. By using my own JS i got a design that is more or less the same as yours, 1 image was just sticking out on the bottom. Overall it worked but wasn't finished so I scrapped it for now πŸ˜….

    0
    • HTML
    • CSS

    Stats Preview Card using HTML+CSS (Grid)

    3
    P
    Rafal1,085 | Posted about 1 month agocommented on Azmi Fitra's "Stats preview card component" solution

    Hi Azmi, thanks for sharing your solution! I'm not great at giving praise, WIP, but overall I think you've shown that you can figure out how to solve a problem, turning design into code. I'll take a bit of time trying to share concepts of how you can solve it better, hope it's somewhat useful πŸ˜…. I tend to overshare, sorry in advance.

    Height and avoiding pixel-perfection

    Height is an odd one. I don't recommend using height for anything as it leads to an older way of thinking about CSS, when 'pixel-perfect' sizing was sought. As time passed a very generic screen most people had became a big question mark for the developer as screens started deafferenting in sizes, browsers were added and different browsers supported different things and a website all of a sudden had to fit a 49" display as well as an iPhone SE.

    So why should height be avoided? Imagine if you have a paragraph with content and you set the height to 50px. As soon as your width runs out because the screen is too small the content (text) will overflow. This break the user experience and makes us look bad, so lets avoid that.

    Instead, if you really want to use height use min-height instead. Min height will guarantee that your containers are responsive to the content they have if the screen gets too small for their particular widths. It could be an element with a min-width of 200px or 600px, it doesn't matter.

    Ultimately the point is to let the content dictate the size of the container. Because then it's responsive.

    *I'm sharing this video not to promote anything but to share concepts (I made this video for another FEM 'student'): have a watch if you're interested in how we can achieve this design, almost pixel perfect, without setting heights: link. *

    I'd love to do a video outlining these fundamental concepts but I'm lacking time this month 😫

    "Containing" Content

    This should be a simple one. We basically want to structure our HTML in a similar way as the design suggests. This is open for interpretation of course but lets see if we can agree on something:

    The card (.container) has 2 parts. Top and bottom and in tablet/desktop left and right. We can go 1 step further and call these 'sections' of the card.

    One part is .info-content and the other could be .img-container.

    Our grid becomes simpler then. We either have 2 rows and 1 column in mobile or 2 columns and 1 row in tablet +.

    Our text-content becomes a simple flex-container that is styled to be a column.

    Would you agree that this is a simpler approach or do you think I'm adding complexity? I personally think it's simpler. It's easier to focus on 1 part of code (lets say .info-content) instead of looking at the various individual elements within our grid. The code would look something like this:

    <div class="container">
         <section class="info-content">
                  <h1 class="info-content__heading">...</h1>
                  <p class="info-content__key-points">Discover the bene...........</p>
                  /* remaining code */
         </section>
         <section class="img-container">
                <img ....>
         </section>
    </div>
    

    Here I'm just showing an example of how you can structure this. You might have noticed I used <h1>, <p> instead of <span>. This is because <span> is used to 'style' text. It is not meant to be used for every single text-element you have. A more typical approach to use span is this:

    <p> 
         I am a paragraph! <span>I am some styled text that looks 
         different but is a part of the paragraph! </span> 
    </p>
    

    My approach of course makes your grid infinitely simpler.

    .container {
        grid: 
             "img" min-content
             "info" min-content / 1fr;
       /* 
        you can read the above as :
    
        grid:
             "grid-template-area" row-height (row1)
             "grid-template-area" row-height (row2) / grid-template-columns;
       */
    }
    

    And of course do similar for tablet/desktop.

    I have a ton of other suggestions but perhaps, PERHAPS, you can watch the video of my solution and just observe some things I did differently. Or just ask other questions here "how can I..." etc.

    If you have any questions I'm happy to respond to them. Here or on Youtube, or w/e works for you. I'm running out of time and I could continue for hours as I'm sort of fascinated with the most efficient ways of achieving things whilst leaving all code very readable.

    6
    • HTML
    • CSS

    Social proof section (HTML and CSS)

    12
    P
    Rafal1,085 | Posted about 1 month agocommented on (Rezzak) MOHAMED ERRAZAK ALLAH's "Social proof section" solution

    Again, looking pretty strong! I'll probably nit-pick and will focus on concepts more than actual code.

    Lets go with a list?

    1. **Avoid using height. If you want to use height I recommend min-height. **

    Why? GREAT QUESTION! The concept here is simple: we want to let the content decide how large a container is. When we write CSS we are working with alot of unknowns: What is the screen size of the user's client? What browser and what version are they using? Do they prefer darkmode or default? Etc.

    This gets into the core of FRONT END web development: we don't want to create pixel-perfect styling for the content. We want to create adaptable content that is responsive. You actually did really well in this regard, but like all of us a few improvements here and there will just carry you further!

    Back to the height.

    Lets say, for whatever reason, our user's display is 200px wide. And lets say your .review card is responsive in width. The content will not fit in the .review container! You'll see the .star-icon's breaking out of the container on the top. Why? height: 62px (you should be using 6.2rem btw, keep it consistent 😁)! The height will break it. Instead you could use min-height: 6.2rem and voila. Now the content is responsive on ultra-thin displays.

    Lesson: Don't use height as we simply don't know the users display etc. Allow content to rule the height and allow the browser to recalculate everything for you.

    This is mega important I think so ask me questions if I failed to explain it.

    1. What if the user, for whatever reason, is using a very wide display, lets say 34"+?

    Another responsiveness lesson: the background image you are using will be tucked away in the depths of the far-left-top corner of the users display. I have a 49" display and so it's very simple for me to test this. You could test it by zooming out whilst building your projects.

    The fix is rather simple too, one line of code to body:

    body {
            background-position: right 66vw top 0%;
    }
    

    This should be un-intuitive. If we want the background to be in the left why are we using right?? I've no clue how the math works unfortunately. But this keeps the image relatively 'centred'. If you tried doing this with left it would mess it up and it would at some point be located outside of the viewport. Depths of CSS I've not yet covered...

    1. Be brave with UI

    I'm really only talking about you being comfortable at judging when something is too small/large and just making an 'executive-decision' to change it.

    Lets take the .review card again. I think that during the mobile -> desktop transition it becomes too wide, taking up WAY more space than it needs to.

    1. Continuing point 3 but introducing clamp

    Lets use clamp for this to declare a min, optimal and max widths:

    .review { 
          /* other code*/
          width: width: clamp(22rem, 50vw, 41rem); 
    }
    

    I'm pretty sure if you removed ALL other widths associated with .review this code would be sufficient. To understand clamp check this video out.

    You can use clamp for anything tbh. Font size, width, padding, margin, name it. It allows you to easily write responsive measurements depending on a the screen width.

    Once you have played around with clamp you can use this tool I built to get the EXACT clamp code you need. Don't use it now, it wouldn't make much sense (yet). I'm not brilliant with math so the math I took from someone else πŸ˜….

    If you use SASS then you can use this SCSS code as a function. If you don't use SASS yet, don't worry about it.

    $breakpoints-units: (
      "mobile":        375,
      "mobile-wide":   480,
      "phablet":      560,
      "tablet-small": 640,
      "tablet":       768,
      "tablet-wide":  1024,
      "desktop":      1248,
      "desktop-wide": 1440
    );
    
    @function fluid($size, $minSize, $maxSize, $oneRem: 10){
      @if map-has-key($breakpoints-units, $size){
        $size: map-get($breakpoints-units, $size);
        $mobile: map-get($breakpoints-units, mobile);
        $minWidth: $mobile / $oneRem;
        $maxWidth: $size / $oneRem;
        $slope: ($maxSize - $minSize) / ($maxWidth - $minWidth);
        $yAxisIntersection: -$minWidth * $slope + $minSize;
        $vwUnits: $slope * 100;
        @return clamp(#{$minSize}rem, #{$yAxisIntersection}rem + #{$vwUnits}vw,#{$maxSize}rem);
      }
    }
    

    As an example of what the above code would do:

    /* If we type this in SCSS /*
    div {
        padding: fluid(tablet, 2, 4);
    }
    
    /* it will output the following CSS */
    
    div {
        padding: clamp(2rem, 1.0458015267rem + 2.5445292621vw, 3rem);
    }
    

    So our padding will be a minimum of 2rem (starting at around 375px). And it will grow with every pixel of increased viewport-width until it reaches 3rem.

    Magic πŸ§β€β™€οΈβœ¨.

    I think that's enough. I could blab on but it'd be less and less useful lol. Hope you get something out of this.

    1. Avoid setting height, set min-height if you must.
    2. Think of very small AND very large displays before you finish a project and implement tiny styling fixes.
    3. Challenge designed/your own UI. As an obvious example, a single word with font-size: 1rem shouldn't have padding: 10rem.
    4. Clamp baby!!! ✨🀩

    Edit

    Oh yeah. I noticed you were using max-width for your media queries. Generally this means you designed the Desktop version of the page first, is this correct?

    Either way, the best practice is to code the mobile version first and use min-width for media queries.

    The logic is quite simple too. A mobile page is easier to code and it gives your a MVP (minimum viable product). It's usually a simple, single column, layout that you can then easily style etc.

    As you increase in screen size, you have more real-estate to work with. Then we add complexity, you see this in designs often I'm sure. Things get more interesting for desktop sizes.

    And generally speaking it's easier to do the SIMPLE first and then add complexity. Because if we start with desktop, we are starting with complexity and then are trying to simplify it, this is often much more difficult than the alternative approach.

    1
    • HTML
    • CSS

    Order summary component (HTML | CSS)

    5
    P
    Rafal1,085 | Posted about 1 month agocommented on (Rezzak) MOHAMED ERRAZAK ALLAH's "Order summary component" solution

    Howdy, great job for this solution.

    Overall, I don't have much to add, very clean and concise code that shows strong understanding of a lot of core css.

    I did notice you added a height: 13.75rem to your image, there is no need. Also the max-height: 100% doesn't do anything. I'm pretty sure this is because the image was built for this width, so when it spreads to width: 100% the aspect ratio that calculates the height of the image is already at that 13.75rem. This probably means that object-fit won't do much here either since the image already fits perfectly to that width.

    Oh yeah, I saw rather strange amounts of margins of 0.9375rem so I can only assume you haven't come across this glorious method:

    :root {
        font-size: 62.5%;
    }
    

    Now if you type 1.5rem it will equal to 15px. 1rem = 10px, 0.1rem = 1px and so on. This is easier to work with, not sure if there's a benefit to doing all that 'math', lets let the browser handle all that work instead!

    The logic is simple: 100/16*10 = 62.5. We basically want to calculate the % of a rem unit that we need in order to get 1rem = 10px and this is what it all does.

    So now you can crack on and write margin: 1.5rem 😁

    Perhaps a hover-effect for the main button would be nice (payment-button)? Even changing opacity: 0.7 or something as it's usually quickest to implement.

    Ah, I had a look at your button afterwards and I noticed that you have:

    <button>
        <a href>Proceed to Payment</a>
    </button>
    

    Generally speaking you either want a link or a button. Having both makes little sense and might mess up the semantics a bit. An anchor can be styled like a button. An anchor can be given Javascript functionality that allows it to pass data to somewhere else whilst using the link.

    Oh ya - this is actually 'wrong' html I think. I made this mistake a week ago so it's still fresh: The interactive element [a] must not appear as a descendant of the button element. link

    Hope this was somewhat useful!

    2