FEM Pomodoro App
Ang progressive web app na ito ay isang timer na inspirado sa Pomodoro at may kakayahang magamit ng user kahit naka-offline. May mga pagpipilian para baguhin ang hitsura nito at nagbibigay ng abiso sa mga notification.
- Javascript
- Sass
- HTML
- Javascript
- Sass
- HTML
Para sa proyektong ito, ginamit ko ang HTML, Sass, at JavaScript. Pinili ko ang mga teknolohiyang ito upang patatagin ang aking pag-unawa sa mga pangunahing kasangkapan sa web development bago sumabak sa mas komplikadong mga framework. Siguro nagtataka ka kung bakit pinili ko ang Sass kaysa sa plain old CSS. Ang pagbasa sa isang napakalaking CSS file ay pwedeng maging bangungot. Ang Sass, sa kabilang banda, ay nagpapanatili ng lahat ng bagay na maayos at malinis. Kung kailangan kong baguhin ang isang estilo, magagawa ko ito nang hindi nasisiraan ng ulo sa paghahanap sa mga linya ng code.
Nabatid sa Proyekto
Pagkatapos kong tapusin ang aking CodeGuage course tungkol sa JavaScript, sabik na akong subukan ang mga bagong natutunan ko. Ang paggawa ng Pomodoro web app ang tila perpektong hamon. Bukod sa makakatulong ito sa akin na maging produktibo, ang magandang disenyo nito ay isang kapanapanabik na proyekto na talagang nakakaengganyo. Simple lang ang aking pangunahing layunin: makakuha ng >hands-on na karanasan sa pamamagitan ng paggawa ng isang de-kalidad at functional na proyekto na maipagmamalaki ko.
Habang kino-code ko ang settings part ng aking Pomodoro app, napansin kong lumalaki na ang JavaScript file ko—umabot na sa 587 lines! Alam kong kailangan ko itong ayusing. Pagkatapos maghanap sa internet, napagtanto kong walang iisang tamang paraan para istraktura ang JavaScript code. Madalas akong naghahanap ng "tamang" pamamaraan, pero sa realidad, maraming paraan para resolbahin ang isang problema. Natagpuan ko ang MVC architecture at nagpasya akong gamitin ito kahit hindi ito karaniwang pagpipilian para sa JavaScript. Minsan, kailangan mong gamitin ang kung ano ang gumagana para sa iyo, kahit na hindi ito ang karaniwan.
Isa pang hamon ay ang pag-unawa sa technical documentation. Mahirap intindihin ang mga ito, lalo na noong sinusubukan kong i-implement ang push notifications. Napaka-teknikal ng wika. Ito ang nagpakita ng pangangailangan kong masanay sa ganitong mga teksto at mga teknikal na termino upang maging mas mabilis at epektibo sa aking trabaho.
Maliban doon, karamihan sa aking mga tanong ay basic, tulad ng paano mag-implement ng timer, gawing accessible, o magdagdag ng progress bar, pero nakuha ko ang mga sagot nang mabilis salamat sa online community na maaasahan. Sa kabuuan, isa itong napakagandang karanasan sa pag-aaral na tumulong sa akin na mapabuti ang aking mga kasanayan sa pag-code at pagresolba ng mga problema.
Naku! Saan ba ako magsisimula? Ang Frontend Mentor Challenge na ito ay nagbigay sa akin ng ilan sa mga pinakamahalagang kaalaman na nakuha ko, kabilang ang Open Graph (OG),
Sa simula, tulad ng aking mga nakaraang proyekto sa Frontend Mentor, balak kong isulat ang code nang mabilis nang hindi masyadong iniisip ang kalidad. Ngunit nagbago ang lahat nang mapanood ko ang isang bidyo mula sa isa sa aking mga paboritong C++ channel, The Cherno. Sa bidyo, binigyang-diin niya na ang oras na ginugol sa isang proyekto ay hindi garantiya ng kalidad nito. Kung ikaw ay mag-code nang hindi natututo, maaaring hindi maganda ang kalalabasan ng code. Tumama sa akin ang kanyang mga salita dahil ginagawa ko ang mga Frontend Mentor challenge na ito upang subukan lamang ang aking bilis sa pag-code at oras ng pagkumpleto ng proyekto.
Ang realization na ito ay nag-udyok sa akin na lumabas sa aking comfort zone at mas malalim na mag-research at matuto. Bilang resulta, naglaan ako ng mas maraming oras sa pag-aaral at pagpapabuti ng aking mga kasanayan.
Ibang mga Gawa
- MongoDB
- Express.js
- React
- Node.js
- Tailwind
- Zustand
Pamahalaan at subaybayan ang iyong mga gawain gamit ang aking full-stack MERN web app. Piliin ang dark o light mode ayon sa iyong gusto. Puwede kang mag-sign up para i-save ang iyong data o gamitin ito nang walang account, salamat sa local storage. Masiyahan sa madaling drag-and-drop na pamamahala ng gawain.
Galugarin
- Next.js
- Tailwind
- Zustand
Ang multi-page e-commerce website na ito, na ginawa gamit ang Next.js, ay ganap na responsive at gumagamit ng local storage upang mapanatiling naka-store ang mga item sa cart. Mayroon itong modernong disenyo at madaling pag-navigate para sa mas pinagbuting karanasan sa pagbili.
GalugarinMagmensahe
May ideya ka ba na gusto mong maisakatuparan? Magtulungan tayo at gumawa ng kahanga-hangang proyekto. Kung ito man ay isang web app, online store, o personal na portfolio, mayroon akong karanasan at dedikasyon upang matulungan kang mangyari ito.