Wrapping Up the Wikipedia Viewer Project
I posted my project to several online forums and received feedback on how to improve my code. A few things that were brought to my attention:
- Accessibility: I’d created some accessibility issues when I removed the focus styling from my input, button, and link elements.
- Semantics: I was nesting paragraph tags within <a> tags unnecessarily, when a simple <a> tag would have sufficed.
Here’s a look at how I improved my tabbed navigation experience:
I’m still working on implementing other peoples’ suggestions, so there are still a couple things on my to-do list for this project. These include:
- Making sure that every entry card has a summary. The API sends back empty strings for many entry summaries. I want to fix this to ensure that, if a summary string is empty, my app will grab a blurb from the Wikipedia entry.
- Better page alignment. I want to center the search bar in the middle of the screen and implement some jQuery effects to pull everything toward the top of the page when the results populate.
- Keyboard Accessibility (WebAIM)
- Accessibility (Google Web Fundamentals for Developers)
- Web Accessibility by Google (Udacity) — A Free Course
- Wikipedia Viewer: Wikipedia API & Cross-Origin Requests
Designing the twitch.tv Project
I was trying to figure out what my design should look like for this upcoming project.
To start the brainstorming process, I logged onto Dribbble and started adding cool designs to a bucket.
I was really inspired by designer Sander van de Vondervoort’s user card design for another streaming app. I made a Photoshop mock-up of what a Twitch streamer’s info card might look like if I ‘borrowed’ this design.
I’m going to continue planning the design before I start the coding process. I’m hoping this will help solidify the page structure from the get-go and keep the CSS from becoming too unwieldy.
Until next time…that’s all folks!