Astro, WCAG Accessibility, CSS Grid & Animations, Javascript Fetch API

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 3 years ago

  Hey Mark, excellent job on this challenge. Your solution looks fantastic, and I love the hover animation you've added to the cards! 😍

  Regarding loading in the data from the JSON file, the way you've done it with the URL from your GitHub repo is fine and mimics the way you'd pull data from an API. You could also use a relative path with fetch to retrieve the data the same way from the file. Either way works well.

  I'd never actually heard of Astro before seeing your solution. It looks interesting! I'd love to hear your thoughts about it and whether you're enjoying working with it.

  Keep up the great work! 👍

  Marked as helpful

  2

  ---

  

  Mark Teekman•365

  @markteekmanPosted about 3 years ago

  @mattstuddert Thanks for taking a look at my solution and thank you for the compliments! 🙂

  Ah yes, thanks for the tip on fetching data from the local file source itself! I will try that on a next challenge which works with a data file 😃

  Astro is indeed very interesting! I stumbled upon it a couple of months ago and the promise of a (as I see it) back to basics Static Site Builder which ships zero JavaScript dependencies seemed really cool. I'm a great fan of working with as minimal as a setup as is needed, but workflows you can create with Vue, React, Angular and other frameworks (such as component based development) are really nice to have. But if you run a small project using such a framework can become bloated quickly. Astro is a very clean Static Site Builder, where you can use this component based development concept using .astro components. It's kind of structured like how Vue does it, where you create Single File Components and have your HTML, JavaScript and (S)CSS styles all in one file. You can even combine it with Vue, React, Angular if you wanted to, so your not restricted to just using the .astro structure. This makes Astro really flexible! You also have Sass compilation, scoped styles, Hot Module Reloading, a Dev server and a bunch of other features right out of the box! And all that with a very lean final build, making the projects you ship really fast and clean. They are still working up to a solid V1, but it's really usable already I would say 🙂 I use it for all my projects nowadays, I even made a Accessible Astro Starter repository and a Accessible Astro Components NPM package. I would say Astro is really worth checking out sometimes 😃

  Thanks again Matt!

  1

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 3 years ago

  @markteekman, it sounds great! Thanks for explaining it in more detail. I may well look into it and practice it on a Frontend Mentor challenge myself at some point! 😄

  0

  

  Mark Teekman•365

  @markteekmanPosted about 3 years ago

  @mattstuddert do let me know what you think if you ever try it out 😊

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 3 years ago

  @markteekman, yeah I definitely will! 👍

  0
• 

  MikevPeeren•2,100

  @MikevPeerenPosted about 3 years ago

  Hey Mark,

  Nice job, the only thing that bothered me some is the outline on click. Is that done for A11Y reasons ?

  Marked as helpful

  1

  ---

  

  Mark Teekman•365

  @markteekmanPosted about 3 years ago

  Thanks @MikevPeeren! 🙂

  That one is indeed for accessibility reasons and to provide a better outline then the browser default which is not recommended. Although, I get what you mean, it shouldn't be so prominent when you click, only when you tab focus to it 🤔

  I did read about :focus-visible which only shows the outline on keyboard focus interactions in this article on CSS Tricks. But as long as support for Safari fails I don't think it's right to use it just yet, but thanks for refreshing me about this feature, I will keep it in mind 🙂

  1
• 

  Duyen Nguyen•950

  @Duyen-codesPosted about 3 years ago

  Hey! Just wanna come it and tell you that your solution is great! Love the animations and everything. I am also working on this challenge but have been stuck on how to inject JSON data to my html. I'm learning HTML, CSS and JS at the moment. I've had a look at your solution for inspiration but too hard for me to understand how and why :) But yeah thanks anyway.

  1

  ---

  

  Mark Teekman•365

  @markteekmanPosted about 3 years ago

  @Duyen-codes thank you for the kinds words 😊 I too had some trouble with the JSON data, it's actually the first time I did this here! I had to do some research on it, but I found the JavaScript Fetch API very helpful in that matter. Also, if you're just starting out with JavaScript, I strongly recommend Learn JavaScript Today by Zell Liew. It's covers all topics in a very easy to understand way and you'll build practical front-end components with it. I found it very useful when I started learning JavaScript :)

  0

  

  Duyen Nguyen•950

  @Duyen-codesPosted about 3 years ago

  @markteekman Thanks so much for sharing! I'll definitely look into those resources. After finishing all newbie projects on FEM, I kind of feel comfortable with HTML and CSS (micro and macro layouts with Flex and grid especially), now Im moving on to junior level and I just feel very stuck. Thanks again for the share! Keep coding!

  1