Welcome to Week 3, Day 7 of my Weekly UI challenge! Week 3 will focus on a results page UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day seven, our goal is to…
Tweak, refactor, and/or fix your code
Today is all about you and your design/code perfectionism. Did you want to change your component API to be more flexible? Did you mean to tweak spacing on Day 5 but didn't have time? Perhaps you needed more time to research how to fix a few more a11y issues before you get that perfect score on Day 6. We all have to get sleep, spend time with friends and family, and have other things pop up that may affect your workflow; today is your day to finish strong and get everything up to spec as you see fit.
Please add your repos and/or images of your designs in the comments for inspiration! I would love to see what you all created throughout the week.
Happy fixing! 🎉
Week 3 Calendar
- (Sunday 4/22) Design component ✅
- Result entry, sponsored/best seller indicators ✅
- Grid/list view toggles ✅
- Sorting ✅
- Pagination/load more ✅
- 100% a11y score ✅
- Tweaks, refactors, fixes 🎯
Top comments (3)
So I only had time to even think about this challenge today after seeing it a couple days ago, but here's how mine came out after working on all the steps!
The one thing I wasn't 100% satisfied with is that it probably wouldn't scale very well to a large number of articles, since the "load more" actually just operates by un-hiding the next 5 results in order rather than requesting items 6 through 10. The problem was that since I was using JSON data to mimic an API call, I was getting the full list of tags by collecting them as each post was processed, rather than having a separate database table of tag data to pull like I would with most CMS setups.
Still, though, I'm pretty pleased with it for a few hours' work! I've been implementing a lot of filtering behavior for work recently and I think I've refined some of my methods in working on this.
Wonderful, Carly! This looks great! I really like the overall design, and the colors compliment each other well.
Try "orwith" instead ov "and/or"!