Si e kodova Vibe faqen e internetit të Bibliotekës së Ikonave Pixel pa mësuar të kodoj (Faleminderit, AI kursori!)

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.

Pixel Icon Library 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.

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ë degë uebsajti në deponë e Bibliotekës së Ikonave Pixel GitHub . Pastaj instalova Cursor AI, dhe fillimi ishte çuditërisht i drejtpërdrejtë.

Vendosja e projektit me AI të kursorit

Ndërfaqja e përdoruesit të kursorit

Pas instalimit të Kursorit, gjëja tjetër ishte të kontrolloni për:

• GIT - për kontrollin e versionit
• Node.js - për paketën NPM

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.

Dritarja e bisedës së kursorit

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 Dokumentet e Instalimit Tailwindcss dhe ndoqa këto hapa:

• 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.

Zgjerimi i serverit të drejtpërdrejtë

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.

skedari 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 mbi Faqet
  • Cakto Degën në " Uebsajti " (Dega ku është kodi juaj. Në rastin tim, ishte në degën e faqes së internetit)
  • Klikoni Ruaj
• Opsionale:
  • Shtoni domenin tuaj të personalizuar (Siç kam përdorur: pixeliconlibrary.com)
  • Konfiguro DNS (Faleminderit Richard që më ndihmoi me këtë)
• Prisni disa minuta dhe faqja juaj e internetit do të jetë LIVE!

PIXELICONLIBRARY

Pixel Icon Library | Open-Source Pixelated Icons By HackerNoon

HackerNoon's Pixel Icon Library is an open-source collection of meticulously designed pixelated icons. Crafted on a 24px grid for perfect alignment, inspired by HackerNoon's retro design vibes, these icons capture the essence of internet's golden days.

Faqja e cilësimeve të faqeve të GitHub

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.

Dëshironi t'i hidhni një sy kodit pas faqes në internet? Shikoni depon e GitHub !