એક કામ કરતા ડિઝાઇનર માટે, પોર્ટફોલિયો સાઇટ એક અટપટી મધ્યમ સ્થિતિમાં હોય છે. તે દેખાવમાં શાર્પ હોવી જોઈએ, તરત જ લોડ થવી જોઈએ, અને કામના કલાકોમાં ઘટાડો કર્યા વિના અપ-ટુ-ડેટ રહેવી જોઈએ. મારું જૂનું સેટઅપ Webflow પર હતું, જે ડ્રેગ-એન્ડ-ડ્રોપ બિલ્ડર્સ અને પ્રોફેશનલ આઉટપુટ વચ્ચેના અંતરને મોટાભાગના સાધનો કરતા વધુ સારી રીતે પૂરું પાડતું હતું. પરંતુ જ્યારે £300 ના વાર્ષિક બિલ સાથે રિન્યુઅલ નોટિસ આવી, ત્યારે મારે એક અઘરો પ્રશ્ન પૂછવો પડ્યો: શું હું મૂલ્ય માટે ચૂકવણી કરી રહ્યો હતો, કે ફક્ત સુવિધા માટે?

મેં તેને ફરીથી શરૂઆતથી બનાવવાનું નક્કી કર્યું. નવું સ્ટેક Astro અને Sanity છે. થોડા સમય સુધી તેનો ઉપયોગ કર્યા પછી, અહીં બરાબર એ જણાવેલ છે કે શું કામ કરી ગયું, શું નહોતું કરી શક્યું, અને અગાઉના સાધનોની સરખામણીમાં તે ક્યાં બેસે છે.

પોર્ટફોલિયો માટે Astro શા માટે?

મોટાભાગના આધુનિક વેબ ફ્રેમવર્ક પહેલા JavaScript મોકલે છે અને પછી અન્ય બાબતો વિચારે છે. Astro આ ધારણાને ઉલટાવી દે છે. તે બિલ્ડ ટાઇમ પર સાદા સ્ટેટિક HTML જનરેટ કરે છે અને ફક્ત ત્યારે જ બ્રાઉઝરને JavaScript મોકલે છે જ્યારે કોઈ ચોક્કસ કમ્પોનન્ટની ખરેખર જરૂર હોય. તેઓ આને islands architecture કહે છે, પરંતુ વ્યવહારિક પરિણામ સરળ છે: મારા પોર્ટફોલિયો પેજનું વજન લગભગ કંઈ જ નથી.

રાઉટિંગ ફાઇલ-આધારિત છે, તેથી નવું પેજ બનાવવું એ ફોલ્ડરમાં ફાઇલ નાખવા જેટલું જ સરળ લાગે છે. કમ્પોનન્ટ્સમાં એવું સિન્ટેક્સ વપરાય છે જે તમને React, Vue, અથવા Svelte વાપરતા હોવ તો પરિચિત લાગશે. જ્યારે પણ હું કોઈ પ્રોજેક્ટ કેસ સ્ટડી ઉમેરવા માંગુ છું, ત્યારે મારે કોઈ નવો પેરાડાઇમ શોધવો પડતો નથી.

તેમ છતાં, હું જટિલ વેબ એપ્લિકેશન બનાવવા માટે Astro નો ઉપયોગ નહીં કરું. જો તમે ઓથેન્ટિકેશન સેટ કરી રહ્યા હોવ, ગ્લોબલ સ્ટેટ મેનેજ કરી રહ્યા હોવ, અથવા રીઅલ-ટાઇમ ડેટા હેન્ડલ કરી રહ્યા હોવ, તો તમારે ફ્રેમવર્ક સાથે સંઘર્ષ કરવો પડશે. જોકે, માર્કેટિંગ સાઇટ્સ, બ્લોગ્સ અને પોર્ટફોલિયો માટે, તે રસ્તામાં આવતું નથી. પેજ ઝડપી લાગે છે કારણ કે તે ખરેખર ઝડપી છે. હેડલાઇન અથવા પેરાગ્રાફ રેન્ડર કરવા માટે કોઈ hydration overhead ની રાહ જોવી પડતી નથી.

WordPress થી Sanity તરફ પ્રયાણ

આ રીબિલ્ડ પહેલા, મારો વિકલ્પ હંમેશા Advanced Custom Fields સાથેનું WordPress રહેતું હતું. ACF WordPress ને સુપરપાવર્સ આપે છે, પરંતુ તમે હજુ પણ બીજાના બનાવેલા ઘરમાં ગોઠવણ કરી રહ્યા હોવ છો. Sanity તેનાથી ઉલટું કામ કરે છે. તમે કોડમાં એક સ્કીમા લખો છો જે વ્યાખ્યાયિત કરે છે કે તમારું કન્ટેન્ટ મોડેલ કેવું દેખાશે, અને Sanity તમારા નિર્ણયોની આસપાસ એડિટિંગ ઇન્ટરફેસ બનાવે છે.

મેં તે કંટ્રોલનો ઉપયોગ કરીને ફરીથી વાપરી શકાય તેવા બ્લોક્સમાંથી એક સરળ પેજ બિલ્ડર બનાવ્યું. મેં એકવાર હીરો સેક્શન વ્યાખ્યાયિત કર્યું. મેં એકવાર ટેસ્ટિમોનિયલ કેરોયુઝલ વ્યાખ્યાયિત કર્યું. મેં એકવાર કાર્ડ ગ્રીડ વ્યાખ્યાયિત કરી. હવે હું નવો કોડ લખ્યા વગર અથવા પેજ ટેમ્પલેટને અડ્યા વગર તે બ્લોક્સને કોઈપણ ક્રમમાં ગોઠવીને નવા પેજ બનાવી શકું છું.

માનસિકતામાં તફાવત મહત્વનો છે. WordPress સાથે, મને ઘણીવાર એવું લાગતું હતું કે હું એવા સાધન સાથે ઝઘડી રહ્યો છું જે બ્લોગ બનવા માંગતું હોય. Sanity સાથે, મને લાગે છે કે હું સોફ્ટવેર બનાવી રહ્યો છું. કન્ટેન્ટ શોર્ટકોડ્સ સાથે મિશ્રિત સ્ટાઇલિશ HTML ને બદલે ક્લીન સ્ટ્રક્ચર્ડ ડેટા બની જાય છે. મારા પ્રોજેક્ટનું વર્ણન પોર્ટેબલ ઓબ્જેક્ટ્સ તરીકે રહે છે જેને હું ઈચ્છું તો મોબાઈલ એપ અથવા ન્યૂઝલેટરમાં મોકલી શકું છું.

એક ક્લીન ડિપ્લોયમેન્ટ વર્કફ્લો

મારો જૂનો WordPress વર્કફ્લો FTP અપલોડ્સ, સ્ટેજિંગ સબડોમેન્સ અને પ્લગઇન અપડેટ્સનું મિશ્રણ હતું જે હંમેશા ખરાબ સમયે બગડી જતું હોય તેવું લાગતું હતું. માત્ર એક ટાઈપો સુધારવા માટે પણ મારે મનમાં એક ચેકલિસ્ટ રાખવું પડતું હતું.

નવો વર્કફ્લો ટૂંકો છે:

  • હું લોકલી ફેરફારો કરું છું અને તેને તરત જ જોઈ શકું છું.
  • જ્યારે કોડ યોગ્ય લાગે ત્યારે હું GitHub પર કમિટ કરું છું.
  • Vercel પુશને પકડી લે છે અને સાઇટને આપમેળે ડિપ્લોય કરે છે.

અહીં કોઈ FTP ક્લાયન્ટ નથી. સિંક કરવા માટે કોઈ સ્ટેજિંગ ડેટાબેઝ નથી. રિપોઝિટરી એ જ સોર્સ ઓફ ટ્રુથ છે.

કન્ટેન્ટ પણ તે જ રીતે કામ કરે છે. જ્યારે હું Sanity ની અંદર કોઈ પોસ્ટ પ્રકાશિત કરું અથવા અપડેટ કરું, ત્યારે એક વેબહૂક Vercel ને સાઇટ ફરીથી બનાવવા માટે કહે છે. સ્ટેટિક પેજ તાજા કન્ટેન્ટ સાથે ફરીથી બને છે, અને CDN અપડેટ થાય છે, મારે સર્વરને અડવાની જરૂર પડતી નથી. મેન્યુઅલ કોપી કરવા, એક્સપોર્ટ કરવા અથવા પ્લગઇન ડેટાબેઝ માઈગ્રેશન ખરેખર કામ કરશે કે નહીં તેની પ્રાર્થના કર્યા વિના બધું સિંક રહે છે.

ટોકન્સ સાથે ડિઝાઇન અને કોડને જોડવા

આ રીબિલ્ડમાં એક શાંત સિદ્ધિ યોગ્ય ટોકન સિસ્ટમ સેટ કરવી હતી. હું એક સિંગલ JSON ફાઇલ રાખું છું જે સાઇટના દરેક કલર, ટાઇપ સ્કેલ અને સ્પેસિંગ વેલ્યુને નિયંત્રિત કરે છે. તે ફાઇલ બોસ છે.

હું તે જ કિંમતો સીધી Figma માં લાવવા માટે Token Studio નો ઉપયોગ કરું છું. જ્યારે મારી ડિઝાઇન ફાઇલ surface-default કહે છે, ત્યારે તે બરાબર તે જ નંબર તરફ નિર્દેશ કરે છે જે કોડ વાપરે છે. એક નાની સ્ક્રિપ્ટ બિલ્ડ ટાઇમ પર JSON ને CSS કસ્ટમ પ્રોપર્ટીઝમાં રૂપાંતરિત કરે છે, જેથી મારી સ્ટાઇલશીટ્સ હાર્ડકોડેડ હેક્સ કોડ્સને બદલે --color-surface-default જેવા વેરિયેબલ્સનો સંદર્ભ આપે છે.

વ્યવહારમાં આ કેમ મહત્વનું છે તે અહીં છે. જો મને સમજાય કે મારો બ્રાન્ડ રેડ કલર મોબાઈલ સ્ક્રીન પર થોડો વધુ આક્રમક લાગે છે, તો હું JSON ફાઇલમાં એક વેલ્યુ બદલી નાખું છું. Figma લાઇબ્રેરી અપડેટ થાય છે. CSS અપડેટ થાય છે. સાઇટ પરના દરેક ઇન્સ્ટન્સ અપડેટ થાય છે. મારે grep કરવાની જરૂર નથી.