# Asaynment: Pagsusuri ng Makabagong Kasangkapan sa Web Development ## Mga Panuto Ang ecosystem ng web development ay binubuo ng daan-daang espesyal na kasangkapan na tumutulong sa mga developer na bumuo, mag-test, at mag-maintain ng mga aplikasyon nang mas epektibo. Ang iyong gawain ay magsaliksik at unawain ang mga kasangkapan na kumplemento sa mga tinalakay sa araling ito. **Ang Iyong Misyon:** Pumili ng **tatlong kasangkapan** na **hindi saklaw ng araling ito** (iwasang pumili ng mga code editor, browser, o command line tools na nakalista na). Magtuon sa mga kasangkapan na naglutas ng partikular na mga problema sa modernong workflow ng web development. **Para sa bawat kasangkapan, magbigay ng:** 1. **Pangalan ng kasangkapan at kategorya** (hal., "Figma - Kasangkapan sa Disenyo" o "Jest - Framework sa Testing") 2. **Layunin at benepisyo** - Ipaliwanag sa 2-3 pangungusap kung bakit gagamitin ng isang web developer ang kasangkapan na ito at anong mga problema ang nilulutas nito 3. **Link sa opisyal na dokumentasyon** - Magbigay ng link sa opisyal na dokumentasyon o website ng kasangkapan (hindi tutorial sites) 4. **Konteksto sa totoong mundo** - Banggitin ang isang paraan kung paano ang kasangkapan na ito ay akma sa isang propesyonal na workflow ng development ## Mga Iminungkahing Kategorya ng Kasangkapan Isaalang-alang ang paggalugad sa mga kasangkapan mula sa mga kategoryang ito: | Kategorya | Mga Halimbawa | Ano ang Ginagawa Nila | |-----------|--------------|------------------------| | **Build Tools** | Vite, Webpack, Parcel, esbuild | Binubuo at ina-optimize ang code para sa production na may mabilis na development servers | | **Testing Frameworks** | Vitest, Jest, Cypress, Playwright | Tinitiyak na gumagana nang tama ang code at natutukoy ang mga bug bago ang deployment | | **Design Tools** | Figma, Adobe XD, Penpot | Gumagawa ng mockups, prototypes, at design systems nang sama-sama | | **Deployment Platforms** | Netlify, Vercel, Cloudflare Pages | Nagho-host at namamahagi ng mga website na may awtomatikong CI/CD | | **Version Control** | GitHub, GitLab, Bitbucket | Pinamamahalaan ang mga pagbabago sa code, kolaborasyon, at workflow ng proyekto | | **CSS Frameworks** | Tailwind CSS, Bootstrap, Bulma | Pinapabilis ang pag-style gamit ang mga pre-built na component libraries | | **Package Managers** | npm, pnpm, Yarn | Nag-iinstall at namamahala ng mga code libraries at dependencies | | **Accessibility Tools** | axe-core, Lighthouse, Pa11y | Nagtetest para sa inclusive design at pagsunod sa WCAG | | **API Development** | Postman, Insomnia, Thunder Client | Nagtetest at nagdodokumento ng mga API habang nagde-develop | ## Mga Kinakailangan sa Format **Para sa bawat kasangkapan:** ``` ### [Tool Name] - [Category] **Purpose:** [2-3 sentences explaining why developers use this tool] **Documentation:** [Official website/documentation link] **Workflow Integration:** [1 sentence about how it fits into development process] ``` ## Mga Alituntunin sa Kalidad - **Pumili ng kasalukuyang mga kasangkapan**: Pumili ng mga kasangkapan na aktibong pinapanatili at malawakang ginagamit sa 2025 - **Magtuon sa halaga**: Ipaliwanag ang mga partikular na benepisyo, hindi lamang kung ano ang ginagawa ng kasangkapan - **Konteksto ng propesyonalismo**: Isaalang-alang ang mga kasangkapan na ginagamit ng mga development team, hindi lamang ng mga indibidwal na hobbyist - **Iba't ibang pagpipilian**: Pumili ng mga kasangkapan mula sa iba't ibang kategorya upang ipakita ang lawak ng ecosystem - **Makabagong kaugnayan**: Bigyang-priyoridad ang mga kasangkapan na naaayon sa kasalukuyang mga trend at pinakamahusay na kasanayan sa web development ## Rubric | Mahusay | Maganda | Kailangan ng Pagpapabuti | |---------|---------|--------------------------| | **Malinaw na ipinaliwanag kung bakit ginagamit ng mga developer ang bawat kasangkapan at anong mga problema ang nilulutas nito** | **Ipinaliwanag kung ano ang ginagawa ng kasangkapan ngunit kulang sa konteksto tungkol sa halaga nito** | **Nagtala ng mga kasangkapan ngunit hindi ipinaliwanag ang layunin o benepisyo nito** | | **Nagbigay ng mga opisyal na link sa dokumentasyon para sa lahat ng kasangkapan** | **Nagbigay ng karamihan sa mga opisyal na link na may 1-2 tutorial sites** | **Umasa sa tutorial sites kaysa sa opisyal na dokumentasyon** | | **Pumili ng kasalukuyang, propesyonal na ginagamit na mga kasangkapan mula sa iba't ibang kategorya** | **Pumili ng magagandang kasangkapan ngunit limitado ang iba't ibang kategorya** | **Pumili ng mga lipas na kasangkapan o mula lamang sa isang kategorya** | | **Ipinakita ang pag-unawa kung paano ang mga kasangkapan ay akma sa mga workflow ng development** | **Ipinakita ang kaunting pag-unawa sa konteksto ng propesyonalismo** | **Nagtuon lamang sa mga tampok ng kasangkapan nang walang konteksto sa workflow** | > 💡 **Tip sa Pananaliksik**: Maghanap ng mga kasangkapan na binanggit sa mga job postings para sa mga web developer, suriin ang mga popular na survey ng developer, o galugarin ang mga dependencies na ginagamit ng matagumpay na mga open-source na proyekto sa GitHub! --- **Paunawa**: Ang dokumentong ito ay isinalin gamit ang AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na mapagkakatiwalaang pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.