Explore methods that modify the original array alongside their descriptions and sample code. Distinguish between mutating and non-mutating methods through filtering.
This project had a dual focus. Primarily, it aimed to acquire proficiency in web scraping using Playwright. Secondly, it sought to revamp the existing website, DoesItMutate. I frequently rely on this website to refresh my memory regarding array methods that induce mutations. However, one drawback I encountered was the cumbersome navigation to specific arrays. The sole search method available is the browser's built-in search, which often yields multiple results, particularly inconvenient on mobile devices. In my redesign, I addressed this issue by incorporating a sticky sidebar for swift method selection on desktops and a user-friendly search bar with a dropdown menu of all methods for mobile users. Transferring all data manually from the original website would have been time-consuming, making this project an ideal opportunity to leverage a web scraper for automation.
To delve deeper into my development process, feel free to visit my website for a comprehensive explanation.
- Desktop and mobile friendly design
- Array method cards with descriptions, code samples, and links to MDN web docs
- Array method filtering by "mutation" or "no mutation"
- Sticky sidebar navigation for quick array method selection
- Search bar on mobile for quick array method selection
- Web scraping using Playwright
You can view the design system and wireframe on 🎨Figma
🌐 Live
Original website DoesItMutate created by @rem
👤 Antonio Lopez
- Website: Antonio Lopez
- Github: @antonio-lopez