मेरी वेबसाइट बदसूरत है क्योंकि इसे मैंने बनाया है

• कोई और मेरी वेबसाइट को और शानदार बना सकता था, लेकिन तब वह मेरी नहीं रहती
• वेबसाइट की पहचान उसे बनाने वाले व्यक्ति की पसंद, जुनून और सीधे हाथों के काम से आती है
• सादगी और अपनापन पाने के लिए CSS और JS को न्यूनतम रखा गया है, और सीधे CSS variation rules लागू करके अव्यवस्था, दोहराव और पुरानी किताबों की दुकान जैसा एहसास रचा गया है
• साइट को इस तरह डिज़ाइन किया गया है कि वह user interaction पर सिर्फ CSS से प्रतिक्रिया दे, और इसकी खासियत बिना सजावट वाली texture और अप्रत्याशित बदलाव हैं
• वेबसाइट लगातार बदलती रहती है, अपने मालिक के साथ बढ़ती और रूप बदलती है, और हर किसी की अपनी 'बदसूरती' को जीवित रखती है

---

मेरी बनाई वेबसाइट, और उसकी बदसूरती का मतलब

• अगर माँ फ्रिज पर कोई शानदार चित्र लगाना चाहतीं, तो वह Vermeer, Lichtenstein, Wyeth जैसे प्रसिद्ध कलाकारों की पेंटिंग की नकल लगातीं
• लेकिन माँ ऐसी कला नहीं, मेरे बनाए हुए चित्र चाहती थीं

• कोई समझदार designer मेरी साइट को शानदार बना सकता था, लेकिन फिर वह मेरी नहीं रह जाती

• रोटी पकाने के लिए कुछ लोग गेहूँ उगाना, नमक निकालना और yeast तैयार करना चाहते हैं, लेकिन मैं ऐसा नहीं करता
• मेरी अपरिपक्व पसंद Olive Garden के breadsticks ढेर सारे खाकर भी संतुष्ट हो जाती है

• ऐसी पसंद का फर्क व्यक्तिगत स्वामित्व की भावना से आता है
• अपने-अपने कारणों से, हर कोई अपना अलग इंटरनेट स्पेस सजा रहा है

अलग-अलग personal web का अस्तित्व

• कुछ लोग solar-powered self-hosted वेबसाइट चलाते हैं
• कोई Substack के ज़रिए अपनी समझ साझा करता है
• और YouTube पर manufacturing sites में गहराई से जाने वाले लोग भी हैं
• Gwern कुछ बिल्कुल अलग कर रहा है

• यह सब उस भीतरी प्रेरणा और इच्छा से निकलता है कि "यह मेरे अलावा कोई और नहीं कर सकता"
• मेरे पास रोटी, server या chip बनाने की प्रेरणा नहीं है, लेकिन वही इच्छा humor, systems, software और structure जैसी चीज़ों में व्यक्त होती है
• जब भावना बहुत तीव्र हो जाती है, तो वह fiction, HTML/CSS, घटिया robots, उदास गाने जैसी चीज़ों में फूट पड़ती है

• इसलिए मेरी वेबसाइट मेरी है

सादगी और व्यक्तित्व का सह-अस्तित्व

• पहले मैं सिर्फ सादगी और अपनापन चाहता था
  • noise हटाना
  • contrast बढ़ाना
  • menu depth कम करना
  • उबाऊ HTML
  • न्यूनतम CSS
  • JS से बचना आदि
• 2023 में मेरी साइट ऐसी थी (मूल लेख की छवि देखें)

अव्यवस्था का डिज़ाइन, और CSS की कहानी

• किसी बिंदु पर मैंने ज्यादा चौड़ी horizontal space इस्तेमाल करने का फैसला किया, और वहीं से समस्या शुरू हुई
• शुरुआती योजना सरल थी: ul पर flex-wrap लागू करना
• लेकिन text भी wrap होने लगा, जिससे हर लिंक की सीमा साफ़ नहीं दिखी

• कुछ लोग इसे inline की तरह पढ़ते थे, तो कुछ inline-block की तरह महसूस करते थे
• मैंने spacing बढ़ाने, हर लिंक के चारों ओर border लगाने, या लिंक के बीच dot डालने की कोशिश भी की, लेकिन कुछ पसंद नहीं आया

• इसलिए मैंने लिंक में variation देने का तरीका चुना

• होमपेज की अव्यवस्था वास्तव में कुछ सरल नियमों से आती है

  li:nth-child(4n + 0) { transform: rotate(1deg); }  
  li:nth-child(4n + 1) { transform: rotate(-0.6deg); }  
  li:nth-child(4n + 2) { transform: rotate(0.5deg); }  
  li:nth-child(4n + 3) { transform: rotate(-0.75deg); }  
  li:nth-child(6n + 0) { font-family: Times; }  
  li:nth-child(6n + 1) { font-family: Helvetica; }  
  li:nth-child(6n + 2) { font-family: Georgia; }  
  li:nth-child(6n + 3) { font-family: Times; }  
  li:nth-child(6n + 4) { font-family: Arial; }  
  li:nth-child(6n + 5) { font-family: "Trebuchet MS"; }  
  

• मूल रूप से मैंने ज्यादा बदलाव लाने के लिए coprime integers इस्तेमाल किए थे, लेकिन दोहराए जाने वाले pattern की सूक्ष्मता मुझे उल्टा और पसंद आई

• मुझे minimalism पसंद है, लेकिन उसका ठंडापन नहीं
• "पुरानी किताबों की दुकान" जैसी गर्माहट दिखाने के लिए मैंने कुछ CSS surprise elements और जोड़े

  li:nth-child(5n + 2) { font-weight: 100; }  
  li:nth-child(7n + 2) { letter-spacing: -1px; }  
  li:nth-child(41n + 31) { transform: rotate(181deg); }  
  

• वेब अब भी interactive media है, इसलिए मैं चाहता था कि JS के बिना भी यह cursor movement पर प्रतिक्रिया दे
• नीचे दिए CSS की मदद से "घास को छूने जैसा एहसास" बनाया गया

  li:nth-child(2n + 0):hover { transform: rotate(-2deg); }  
  li:nth-child(2n + 1):hover { transform: rotate(2deg); }  
  

• इससे cursor movement पर real-time reaction लागू हुआ
• और scrolljacking किए बिना scroll की अनुभूति को उभारना चाहता था, इसलिए textured background से पेज को कागज़ जैसा बनाया
• css-doodle का इस्तेमाल करके texture compose किया

  svg {  
  viewBox: .5 .5 10 10;  
  fill: #000;  
  circle*1000 {  
    cx, cy: @r(10), @r(10);  
    r: @r(.005, .01);  
    }  
  }  
  

• light mode में कागज़ की धूल, और dark mode में रात के आसमान के तारों जैसा एहसास दिया गया
• 2024 में मेरी साइट इस तरह बदल गई (मूल लेख की छवि देखें)

बदलता मैं, बदलती वेबसाइट

• बहुत जल्द मेरी वेबसाइट पूरी तरह अलग रूप ले लेगी
• क्योंकि मैं अपनी वेबसाइट का मालिक हूँ, और मैं खुद भी लगातार बदल रहा हूँ

• आप भी बदलेंगे
• आपका जुनून और मूल्यबोध किसी और चीज़ में फैल जाएगा
• भले वह बदसूरत लगे, आपकी अपनी रचना लगातार जीवित और गतिशील रहेगी

---

लेखक Taylor Troesh taylor.town के mayor हैं, scrapscript के लेखक हैं, और अधपकी चीज़ों का स्वाद लेने वाले व्यक्ति हैं

[secret3056]

मैंने जाकर देखा, और सच में काफ़ी समझ से परे है...

https://taylor.town/

[tsboard]

मैं इस लेख की बात से गहराई से सहमत हूँ। मैं भी अपनी कमजोर design sense को छिपाने के लिए designers द्वारा बहुत सोच-समझकर बनाए गए frameworks का सहारा लेते हुए कोशिश करता रहा हूँ, लेकिन फिर भी अब तक लगातार अपने तरीके से करता आ रहा हूँ.
हर बार बेहतर design के बारे में सोचते हुए, यह-वह सुधारते हुए बनाना और चलाना अपने आप में मजेदार है।
शायद इसी तरह की गतिविधियों की वजह से उससे और लगाव भी हो जाता है, और मजा भी आता है। हाहा

[GN⁺]

Hacker News की राय

• हाहा, सही बात है। मेरे आसपास के ज़्यादातर डेवलपर दोस्त तो बहुत पहले ही Hugo या Jekyll जैसे तैयार templates पर अपनी साइटें ले गए, लेकिन मैं ज़िद में अभी भी अपने ब्लॉग को ऐसे सिस्टम पर चलाए हुए हूँ जिसमें CSS भी और backend भी मैंने खुद बनाया है। मेरे लिए असली खुशी 'वेबसाइट होने' में नहीं, बल्कि 'वेबसाइट बनाने की प्रक्रिया' में है। मज़ेदार हिस्से को किसी और को क्यों सौंपूँ, यह समझ नहीं आता। यह कुछ वैसा है जैसे कोई classic car खुद maintain करे। चाहो तो बस एक साफ-सुथरी और मज़बूत कार खरीद सकते हो, लेकिन फिर मज़ा नहीं रहेगा। मंज़िल अहम नहीं है, मैं तो मज़े के लिए यह करता हूँ। कंपनी में मैं दिनभर ऐसी साइटें बनाता हूँ जिनमें अपनी मनचाही design या features खुलकर तय नहीं कर सकता, इसलिए अपनी personal site पर पूरा control रखने की आज़ादी मैं कभी नहीं छोड़ सकता
  • मेरी वेबसाइट भी पूरी तरह मेरी बनाई हुई है, और पिछले 10 साल में मैं इसे लगभग 10 बार फिर से बना चुका हूँ। हर साल कुछ न कुछ redesign करने में मज़ा आता है। होम पर matrix JS code है (https://oxal.org पर क्लिक करो तो चौंक भी सकते हो), build मैं अपने बनाए Static Site Generator genox से करता हूँ, CSS theme के लिए भी अपना बनाया sakura इस्तेमाल करता हूँ, ब्लॉग(https://oxal.org/blog/) पर जाओ तो एक छोटा cyborg आपके साथ चलता है (base image chatgpt से बनाई, फिर Piskel में खुद sprite animation बनाया), VPS पर manual deploy करता हूँ (make से build), private location पर files upload करने के लिए कई shell scripts चल रही हैं, favicon भी कॉलेज के समय pixel art में बनाया था (लिंक), अपना font बनाने की कोशिश की थी लेकिन छोड़ दी और Naruto से प्रेरित font लगा दिया, और 'view-page-source' से source code देखने पर भी अलग मज़ा आता है। अपनी साइट को देखकर लगता है कि इसमें एक software engineer के रूप में मेरी growth के निशान दर्ज हैं, इसलिए यह साधारण-सी रचना भी मेरे लिए बहुत कीमती है
  • मेरा homepage(https://pablo.rauzy.name/) भी पूरी तरह शुरू से खुद बनाया हुआ है। Build के लिए सिर्फ custom Bash script और Makefile का इस्तेमाल किया है, और यह पूरी तरह static structure है। JS की एक भी line नहीं है। CSS पर experiment करते हुए responsive layout, mobile menu वगैरह भी खुद बनाए। शायद मैंने अपने लिए कुछ rubrics या methodologies भी खुद बना ली थीं, और यही trial-and-error असली मज़े में बदल गया
  • मैं भी उसी सफ़र पर हूँ। Hugo से शुरू किया था, लेकिन आख़िरकार मैंने अपना static site generator(Loulou) खुद बना लिया। इसे बनाना शुरू से अंत तक शुद्ध मज़ा था, और खुद बनाकर देखना सच में बहुत मूल्यवान अनुभव रहा। मेरी साइट यहाँ है
  • 'वेबसाइट रखने में नहीं, बनाने में आनंद है' — यही एक वाक्य पूरी बात का सार है। यह कुछ वैसा ही है जैसे 'Journey Before Destination(मंज़िल से पहले यात्रा)' वाला Radiant knights का विश्वास। कई मिथकों में भी यही बात दोहराई जाती है। Heracles भी जब इंसान था तब अद्भुत काम करता था, और देवता बनने के बाद वह सब रुक गया। संदेश यही है कि संघर्ष और इंसानी पक्ष को अपने से छिनने मत दो। अगर उदास हो तो birdsong music(https://birdymusic.com) सुनने की सलाह दूँगा। आज देखी गई साइटों में यह सबसे शानदार भी हो सकती है, या सबसे अजीब भी
  • अगर वही मकसद है, तो ठीक है। लेकिन कुछ वेबसाइटें बस किसी खास काम को सादगी से पूरा करके खत्म होना चाहती हैं। उदाहरण के लिए यह साइट सिर्फ एक specific काम कर देती है
• (मूल पोस्ट में दिखी) बदसूरत साइट की तस्वीर ब्लॉग पोस्टों से भरी है, लेकिन असली लेख किसी दूसरी वेबसाइट पर पोस्ट किए गए हैं। अगर वहाँ marketing cookies या membership popup न हों, तो मैं तो सीधे उसी बदसूरत साइट पर जाना पसंद करता
  • Screenshot में [e-mail] वाला mail दिख रहा है। मुझे भी वही जिज्ञासा हुई, तो मैं taylor.town(https://taylor.town/) पर गया। और यह टिप्पणी पोस्ट करने के बाद साइट बहुत धीमी लोड होने लगी, तो शायद Hacker News effect यानी HN hug of death आ गया है
  • मुझे लगा था यह आम 'enshittified web' (गिरती quality वाले web) पर आलोचनात्मक लेख होगा। मुझे यह साइट अच्छी नहीं लगी, लेकिन इसमें यह बात मज़ेदार है: (1) printed book बेचने का banner है (2) cookie consent popup है (3) 'Good Internet' header आधुनिक खराब वेबसाइटों के तमाम प्रतीकों के बीच हल्का-सा दिखता है (4) headline cookie popup से ढँक जाती है, पढ़ना मुश्किल है (5) cookie consent banner हटाने पर अब स्थायी cookie settings icon और "+ Become a Member" button सामने रहता है। इसकी तुलना में taylor.town सच में अच्छा web है
  • शायद बदसूरत साइट का background, font, या color choices इतने खराब हैं कि पढ़ना असुविधाजनक हो जाता है, इसलिए लेख दूसरी साइट पर डाले गए हैं। जैसे: taylor.town/wealth-000. मैंने भी अपनी personal site खुद बनाई है, लेकिन वह बदसूरत नहीं है। मुझे लगता है उस व्यक्ति ने अपनी साइट जानबूझकर बदसूरत बनाई है, थोड़ा self-indulgent अंदाज़ में
• मुझे लगता है 'बदसूरत लेकिन दिलचस्प' और 'बदसूरत और उबाऊ' साइटों के उदाहरण अलग-अलग होते हैं। यह साइट दूसरे प्रकार के ज़्यादा करीब है। सच कहें तो ऐसा लगता है जैसे CMS बस markdown folders को घुमा-फिराकर titles को links की तरह उगल रहा हो। इसमें information architecture नाम की चीज़ ही नहीं है; categories, icons, images, dates कुछ भी नहीं, इसलिए सब कुछ एक ही वज़न के साथ दिखता है। बस थोड़ा 'अलग' दिखने के लिए layout बदल दिया गया है। ज़्यादातर developer blogs पर traffic search engine से आता है, इसलिए homepage design शायद उतना महत्वपूर्ण न हो, लेकिन अगर वे readers को actively explore कराने वाली architecture बनाना चाहते थे, तो कोशिश और नतीजा दोनों थोड़ा निराशाजनक लगे। आखिर में यह किसी default Ghost template वाले blog से बहुत अलग महसूस नहीं होता
  • इसकी ज़रूरत नहीं है। अहम बात यह है कि लेखक ने इसे readers को खुश करने के लिए नहीं, खुद को संतुष्ट करने के लिए बनाया है। इसलिए बाहरी राय यहाँ बहुत महत्वपूर्ण बिंदु नहीं है
  • लगता है आप लेखक के संदेश का मूल बिंदु चूक गए
• Framework से वेबसाइट बनाओ तो सबका look-and-feel एक जैसा हो जाता है, उसमें कोई मज़ा नहीं। Business purpose हो तो समझ आता है, लेकिन अगर मकसद खुद को या अपने काम को दिखाना है, तो एक personality वाली वेबसाइट ज़्यादा मायने रखती है। SEO या retention के लिहाज़ से भले inefficient हो, लेकिन अपनी individuality डालना बेहतर लगता है। आजकल के website builders बहुत ज़्यादा structured और एकरूप हो गए हैं, यह मुझे पसंद नहीं। पुराने Geocities या Freewebs के दिन याद आते हैं—पढ़ने में मुश्किल background images, auto-play music, mouse के पीछे चलने वाला cursor, आग के सामने घूमता skull—सच में उनकी याद आती है
• यह philosophy इंटरनेट के शुरुआती दौर जैसी लगती है, इसलिए बहुत अच्छी लगती है। Flash sites के अजीब navigation और दूसरी समस्याओं के कारण उस दौर की बहुत आलोचना होती थी, लेकिन उन कमियों के अलावा साइटों को अलग ढंग से बनाने वाली creativity का सम्मान करना चाहिए। आज का इंटरनेट बहुत uniform हो गया है, और आगे AI-generated content की वजह से शायद और भी होगा। इसलिए ऐसे non-standard कोनों को देखना अच्छा लगता है
• मैं इस philosophy से पूरी तरह सहमत हूँ। मेरी वेबसाइट पूरी तरह 'मैं' नाम के व्यक्ति को व्यक्त करती है। कोई कहे बदसूरत है, बहुत unprofessional है, फिर भी मुझे यही style पसंद है। वेब पर, और दुनिया में भी, ऐसी nonconformist सोच और ज़्यादा होनी चाहिए
• लेख पढ़कर बहुत अच्छा लगा। पुराने "old web" की सबसे अच्छी बात यह थी कि कोई साफ़-साफ़ standards तय नहीं थे, इसलिए लोग अलग-अलग तरह के प्रयोग करते हुए चीज़ें बना रहे थे। थोड़ा ज़्यादा chaotic ज़रूर था, लेकिन किसी सच में शानदार और personality से भरी साइट को अचानक खोज लेने का जो रोमांच था, वह अलग ही था। आज का web बहुत structured, formal और template/framework-आधारित हो गया है, इसलिए यह एक predictable consumption space बन चुका है। exploration का मज़ा गायब हो गया है
• 2023 में उस व्यक्ति की वेबसाइट बदसूरत नहीं थी, बल्कि minimal लगती थी। अब यह सचमुच बदसूरत हो गई है। पहले मुझे लगा था कि मैं 2023 वाले version की बात पढ़ रहा हूँ, इसलिए बात से सहमत था, लेकिन सच में बदसूरत version देखने के बाद संदेश के प्रति मेरा रवैया उल्टा नकारात्मक हो गया
  • 'अब यह सच में बदसूरत है इसलिए संदेश बदल जाता है' — यह बात मुझे ठीक से समझ नहीं आती। इस लेख का पूरा संदेश यही है कि दूसरों की नज़र से परे, अपने लिए पसंद और आनंद के साथ मनचाहा बनाना ही अर्थपूर्ण है। बहुत लोगों को इसका बदसूरत लगना ही मुझे साइट और उसके संदेश को और आकर्षक बनाता है। जैसे ही आप सिर्फ appearance पर अटक जाते हैं, असली point छूट जाता है
  • पुराना design साफ़, minimal और... कुछ खास नहीं था। अब यह जानबूझकर फैलाई हुई chaos है। बदसूरत हो या नहीं, यह ज़ोरदार ढंग से याद रह जाती है। कमियाँ हैं (जैसे बाद में कोई खास link फिर से ढूँढना मुश्किल हो सकता है), लेकिन वह उस व्यक्ति के लिए महत्वपूर्ण नहीं है। उसे सच में 'असुविधा', 'dissonance', 'जिज्ञासा', और सबसे बढ़कर '/सिर्फ मेरा/' चाहिए था
• अभी मेरी कोई personal site नहीं है। जब बनाऊँगा तो HTML+CSS+JS या JQ से ही ठीक से बनाना चाहता हूँ। Apache या nginx जैसे web server पर विचार कर रहा हूँ। AWS free tier या shared hosting पर डालने का सोच रहा हूँ। बस div को एकदम center में align करना सीख जाऊँ, फिर तुरंत शुरू कर सकता हूँ
  • मैं AWS free tier पर S3+cloudfront के साथ 1 साल से 0 रुपये में चला रहा हूँ। शायद यह सबसे अच्छा value-for-money setup है। मेरी साइट एक single-page HTML+CSS है, template ChatGPT ने बना दिया था और मैंने वैसा ही इस्तेमाल कर लिया। Mobile/desktop दोनों पर ढंग से चलाने की skill नहीं थी, इसलिए फिलहाल इसी से संतुष्ट हूँ
  • कुछ मिनट लगाकर Neocities पर सीधे शुरू करने की सलाह दूँगा
  • समझ नहीं आता div को center करना meme कैसे बन गया

      width: 60%; // 원하는 만큼 너비 지정
      margin: 0 auto;
    

    अब बस blog शुरू कर दो
  • मैंने भी यही किया था : domi.work मैंने भी इसे बदसूरत बनाया है :)
  • मैं भी कुछ ऐसा ही करता हूँ, बस इसमें 11ty जोड़कर static build करता हूँ और netlify pages पर deploy कर देता हूँ
• साफ-सुथरे template से बनी साइटें सब एक जैसी दिखती हैं, लेकिन खुद बनाई हर साइट में दुनिया में सिर्फ एक बार मिलने वाली 'हर कोने में अजीब-सी अलग बात' होती है। Personal project हो तो Tailwind landing page के बजाय मैं 'wabi-sabi HTML' चुनूँगा