Si dizajner, gjithmonë kam qenë i magjepsur nga kryqëzimi i dizajnit dhe teknologjisë. Hendeku midis projektuesit dhe zhvilluesit më ka intriguar gjithmonë - thjesht nuk prisja ta kapërceja kaq shpejt. nga HackerNoon filloi si një projekt dizajni argëtues për të krijuar ikona të pikseluara që kapnin thelbin nostalgjik të gjuhës së dizajnit të HackerNoon—por duke e transformuar vetë një skedar Figma Design në një faqe interneti plotësisht funksionale? Kjo nuk ishte në kartën time për 2025 derisa zbulova Cursor AI. Duke pasur bibliotekën me burim të hapur përmes GitHub, xFigma dhe NPM, ne gjithmonë kemi dashur t'i bëjmë këto ikona më të aksesueshme për komunitetin. Ideja ishte e thjeshtë: le të ndërtojmë një faqe interneti ku projektuesit dhe zhvilluesit mund të shfletojnë, kërkojnë dhe shkarkojnë këto ikona për projektet e tyre. Pixel Icon Library Sfida? Unë kisha fjalë për fjalë zero përvojë me kodimin.💀 Futni Cursor AI, një redaktues kodesh me AI që u bë shpejt mentori dhe udhërrëfyesi im gjatë gjithë këtij udhëtimi. Ja se si i kalova kufijtë e mi nga dizajni në grumbullim të plotë me ndihmën e AI dhe disa . kodime serioze vibe Duke filluar nga Ground Zero Hapi i parë ishte të përcaktoja atë që doja të ndërtoja dhe të bëja një bilanc të asaj që kisha tashmë: Një bibliotekë ikonash pikselësh në formatin SVG. Një dizajn Figma për faqen e internetit. Një listë e veçorive që doja në faqen e internetit. Absolutisht nuk ka asnjë ide se si ta sjellë atë në jetë. Fillova duke ngritur një në . Pastaj instalova Cursor AI, dhe fillimi ishte çuditërisht i drejtpërdrejtë. degë uebsajti deponë e Bibliotekës së Ikonave Pixel GitHub Vendosja e projektit me AI të kursorit Pas instalimit të Kursorit, gjëja tjetër ishte të kontrolloni për: - për kontrollin e versionit GIT - për paketën NPM Node.js Me gjërat thelbësore të instaluara, ishte koha për të ndotur duart e mia. Klonova depon në sistemin tim, hapa dosjen e projektit në Cursor AI dhe nisa një bisedë me asistentin e integruar të AI. Duke pasur një përvojë solide me Claude, zgjodha Claude 3.7 Sonnet në modalitetin e agjentit për të më udhëhequr gjatë procesit. Me kërkesën e parë, shpjegova shkurt se çfarë doja të ndërtoja dhe rendita veçoritë e kërkuara së bashku me strukturën bazë të projektit, duke kërkuar sugjerime se cilat kuadro duhet t'i japin përparësi efikasitetit dhe shpejtësisë. Kursori ndihmoi me strukturën e nevojshme të dosjeve dhe sugjeroi që të qëndroja në HTML & Tailwind për projektin. Ai madje krijoi skedarët e kërkuar për fillimin e projektit. Ja se si struktura e dosjeve u duk pas kësaj: ├── index.html ├── src/ │ ├── style.css │ ├── output.css ├── assets/ ├── fonts/ ├── scripts/ Hapi tjetër ishte konfigurimi i Tailwind dhe fillimi me UI. Konfigurimi i Tailwind CSS dhe ndërtimi i ndërfaqes së përdoruesit Për habinë time, Kursori ngatërroi instalimin e Tailwind dhe ngatërroi komandat nga Tailwind v3.4 dhe v4.0. Pra, ishte koha që unë të ngrihesha! Shkova te dhe ndoqa këto hapa: Dokumentet e Instalimit Tailwindcss Për të instaluar Tailwind, hapni terminalin dhe ekzekutoni: npm install tailwindcss @tailwindcss/cli Importo Tailwind në skedarin src/style.css: @import "tailwindcss"; Për të konfiguruar Procesin e Ndërtimit, ekzekutoni: npx @tailwindcss/cli -i ./src/style.css -o ./src/output.css --watch Filloni të përdorni Tailwind në HTML: <link href="/src/output.css" rel="stylesheet"> Pasi u instalua Tailwind dhe klasat ishin gati për t'u përdorur, fillova të përcaktoja ngjyrat, fontet dhe atomet e tjera për agjentin AI përpara se të ndërtoja molekula, organizma dhe faqe më komplekse sipas modelit tim Figma. Më pas, instalova Paketën NPM të Bibliotekës Pixel Icon për të përdorur ikonat në projekt. Këtu janë hapat për instalimin e Paketës NPM: Instaloni paketën: npm i @hackernoon/pixel-icon-library Importoni CSS në HTML-në tuaj (I zhvendosa të gjithë skedarët e nevojshëm të fontit të ikonave në dosjen /fonts për lehtësinë e aksesit.) <link href="/fonts/iconfont.css" rel="stylesheet"> Për të shfaqur një ikonë, shtoni <i class="hn hn-icon-name"></i> Për ndërfaqen e përdoruesit, kam marrë një qasje element pas elementi për t'i mbajtur gjërat të organizuara dhe për ta bërë të lehtë kthimin në përsëritjen e mëparshme nëse është e nevojshme. Ja rendi: Nav Bar Fundi i faqes Seksioni i heronjve Shiriti i Kërkimit Kartat dhe rrjeti i ikonave Modeli i ikonave individuale U sigurova që të përcaktoja mbushjet, kufijtë, rrezen e kufirit, ngjyrat dhe dimensionet për të gjithë këta elementë duke shtuar gjithashtu gjendjet e pezullimit dhe klikimit. Përveç veçorive CSS, unë përfshiva edhe sjellje të përgjegjshme dhe ndërveprime në kërkesat. Për të gjeneruar një pamje paraprake për të gjithë kodin që po aprovoja, përdora shtesën . Kjo shtesë lançon një server zhvillimi lokal me një veçori të ringarkimit të drejtpërdrejtë për faqet statike dhe dinamike me një klik! Live Server Sfida e ikonave të të dhënave dhe zbatimi i funksionalitetit të kërkimit Me Elementet UI në vend, ishte koha për sfidën e vërtetë: shfaqja e të gjitha ikonave me detajet e tyre - Emri i ikonës, Etiketa e Llojit të Ikonës dhe Kodi SVG duke siguruar funksionalitet të qetë kërkimi. Për të kapërcyer këtë, Cursor sugjeroi një qasje të strukturuar: Krijimi i një skedari JSON me të dhëna meta të ikonave dhe kodin SVG Duke ngarkuar të dhënat nga JSON për t'i shfaqur ato në mënyrë efikase. Zbatoni kërkimin bazuar në emrin e ikonës. Shtoni filtra kërkimi bazuar në etiketat e llojit të ikonës - të ngurta, të rregullta, ikona të markave/mediave sociale, purrcats Për të automatizuar më tej këtë proces, i kërkova kursorit të krijonte një skript për të shtuar të gjitha të dhënat e ikonës në skedarin /data/icons.json. Tani, me funksionimin e kërkimit, filtrat e kërkimit në vend dhe modalitetin e ikonave që funksionon sipas synimit, gjithçka që mbetej për të bërë ishte shtimi i ndërveprimeve të mbetura në UI, testimi i plotë dhe vendosja! Vendosja dhe përtej Pasi isha i kënaqur me UI dhe testova plotësisht çdo funksionalitet, ishte koha për sfidën e radhës - Deployment!!! Meqenëse projekti ishte një sit statik, më duhej një zgjidhje pritëse që ishte e shpejtë, falas dhe e lehtë për t'u mirëmbajtur. Faqet e GitHub nuk ishin aspak të mira! Ajo ofroi: Integrim pa probleme me depon e GitHub, duke e bërë vendosjen pa mundim. Është falas për t'u përdorur dhe më i përshtatshmi për projekte statike si ky. Përditësimet janë shumë të lehta - gjithçka që ju nevojitet është një angazhim! Por, përpara se të mund ta shtyja të gjithë kodin tim në depo dhe të vendosja përmes Faqeve GitHub, më duhej të pastroja kodin dhe të kontrolloja për ndonjë problem të prodhimit. Pas një kthimi të shpejtë me Kursorin dhe disa ndryshimeve, gjithçka ishte gati për nisje! Këtu është gjithçka që duhet të bëni për të vendosur projektin tuaj nëpërmjet Faqeve GitHub: Shtyni të gjithë kodin tuaj në depon e GitHub dhe sigurohuni që ai të jetë publik Aktivizimi i faqeve GitHub për depo Shkoni te Cilësimet Klikoni Faqet mbi Cakto në " " (Dega ku është kodi juaj. Në rastin tim, ishte në degën e faqes së internetit) Degën Uebsajti Klikoni Ruaj Opsionale: Shtoni domenin tuaj të personalizuar (Siç kam përdorur: pixeliconlibrary.com) Konfiguro DNS (Faleminderit që më ndihmoi me këtë) Richard Prisni disa minuta dhe faqja juaj e internetit do të jetë LIVE! https://pixeliconlibrary.com/?embedable=true Një produkt për të qenë krenarë Nga dizenjimi i ikonave të artit piksel deri tek kodimi i vibeve në rrugën time drejt një faqeje plotësisht funksionale, ky projekt më shtyu përtej zonës sime të rehatisë në mënyrën më të mirë të mundshme. Duke parë prapa, ishte më shumë sesa thjesht ndërtimi i një faqe interneti - kishte të bënte me zgjerimin e horizonteve të mia krijuese dhe duke kuptuar se me AI, linja midis dizajnit dhe zhvillimit po mjegullohet më shpejt se kurrë. Dhe për mua është sikur të më hapet një rrugë e pafund para syve. Një stilist tek tjetri: Nëse mund ta bëj unë, mundeni edhe ju. Pra, çfarë po prisni? Le të fillojmë ndërtimin! PS: është LIVE! Faqja e internetit e Bibliotekës së Ikonave Pixel Dëshironi t'i hidhni një sy kodit pas faqes në internet? Shikoni ! depon e GitHub
