Dwitter - JavaScript के 140-अक्षरीय डेमो का संग्रह

• Dwitter एक ऐसा प्लेटफ़ॉर्म है जहाँ 140 अक्षरों के भीतर JavaScript कोड से विज़ुअल डेमो बनाए और साझा किए जा सकते हैं
• हर पोस्ट को ‘dweet’ कहा जाता है, और यह कोड के साथ तुरंत चलने वाला ग्राफ़िक एनीमेशन दिखाता है
• उपयोगकर्ता कमेंट, remix, hashtag के ज़रिए इंटरैक्ट करते हैं, और कोड के बदलाव व पुनर्निर्माण सक्रिय रूप से होते हैं
• hot, new, top(साप्ताहिक/मासिक/वार्षिक/संपूर्ण) जैसे कई sort मानदंडों से लोकप्रिय कंटेंट देखा जा सकता है
• छोटे कोड से जटिल विज़ुअल इफ़ेक्ट बनाने का यह रचनात्मक प्रोग्रामिंग प्रयोगों का मंच है

---

Dwitter.net का परिचय

• Dwitter.net एक वेब प्लेटफ़ॉर्म है जहाँ 140-अक्षर-सीमित JavaScript कोड से विज़ुअल डेमो बनाए जाते हैं
  • हर डेमो को ‘dweet’ कहा जाता है, और यह ब्राउज़र में तुरंत चलने वाले animated graphics बनाता है
  • उपयोगकर्ता लॉग इन करने के बाद नया dweet लिख सकते हैं या मौजूदा काम को remix कर सकते हैं
• साइट पर hot, new, top(साप्ताहिक/मासिक/वार्षिक/संपूर्ण) जैसे कई sort विकल्पों से लोकप्रिय कंटेंट खोजा जा सकता है
• हर dweet में share, fullscreen, report, comment जैसी सुविधाएँ शामिल हैं

प्रमुख dweet उदाहरण

• “Bubble universe colour expansion” को इसके बहुरंगी रंगों और स्पष्ट विज़ुअल इफ़ेक्ट के लिए सराहा गया
  • कमेंट में “A whole universe!” जैसी प्रतिक्रियाएँ आईं
• “Ants! 🐜” छोटा कोड इस्तेमाल कर चींटियों के झुंड को दिखाने वाला काम है, जिसे “god level dweetage!” जैसी प्रशंसा मिली
• “Trees, shadows, hills.” पेड़ों, छाया और पहाड़ियों को दिखाने वाला एनीमेशन है, जिसे “Amazing stuff!” जैसी प्रतिक्रिया मिली
• “Flight Over Destroyed City ✈️” बर्बाद शहर के ऊपर उड़ते विमान का दृश्य बनाता है
  • कमेंट में “i love the smell of sulfur and uranium in the morning” जैसी हास्यपूर्ण प्रतिक्रियाएँ भी आईं
• “Solar Orbit ☀️🌘” ने 140 bytes के भीतर ग्रहों की कक्षा को दिखाया, जिससे “How did you fit a whole planetary system in 140 BYTES OF JAVASCRIPT!?!?” जैसी हैरानी भरी प्रतिक्रिया आई

कम्युनिटी गतिविधि और remix संस्कृति

• हर dweet को दूसरे उपयोगकर्ताओं के कोड के आधार पर remix किया जा सकता है, और मूल लिंक स्पष्ट रूप से दिया जाता है
• कमेंट में तकनीकी फ़ीडबैक, अनुभव और हास्य का मिश्रण होता है, जिससे जीवंत कम्युनिटी माहौल बनता है
• hashtag फ़ीचर के ज़रिए #space, #galaxy, #lighting, #scene जैसे विषयों के आधार पर खोज संभव है

तकनीकी विशेषताएँ

• ज़्यादातर कोड eval(unescape(escape...)) जैसे रूप में compress किए जाते हैं, और 140-अक्षर सीमा के भीतर अधिकतम विज़ुअल इफ़ेक्ट हासिल किए जाते हैं
• कोड में मुख्य रूप से Canvas API का उपयोग कर आकृतियाँ, रंग और movement दिखाए जाते हैं
• हर dweet में कोड की लंबाई (जैसे “// 136/140”) दिखाई जाती है, इसलिए optimization और compression तकनीकें अहम भूमिका निभाती हैं

रचनात्मक प्रोग्रामिंग प्रयोगों का मंच

• Dwitter, code golf और visual art को मिलाने वाला एक रूप है, जो डेवलपर्स के बीच रचनात्मक प्रतिस्पर्धा को बढ़ावा देता है
• साधारण कोड से जटिल विज़ुअल परिणाम बनाने की प्रक्रिया को प्रोग्रामिंग सौंदर्यशास्त्र के रूप में देखा जाता है
• यह प्लेटफ़ॉर्म कलात्मक अभिव्यक्ति और तकनीकी compression की सीमाओं को परखने वाली प्रयोगशाला की तरह काम करता है

[roxie]

वाकई अद्भुत है।

[GN⁺]

Hacker News की राय

• HN पर इसे देखकर अच्छा लगा :D
  सर्वर को थोड़ी देर के लिए रीबूट करना पड़ा, उसके लिए माफ़ी। पिछली बार ऐसा हुआ था तब जो सबक सीखा था, उसकी वजह से DigitalOcean droplet का साइज़ एडजस्ट कर दिया
• यह शानदार है, लेकिन अगर सीमा character count से तय होगी, तो multibyte Unicode characters का इस्तेमाल करके ASCII characters को compress करने का metagame बन जाता है
  उदाहरण के लिए, eval(unescape(escape\<<97 wide characters>>`.replace(/u../g,'')))` जैसी form में 97 Unicode characters को 194 ASCII में restore किया जा सकता है
  बेहतर होता अगर Ford Prefect और Mr Prosser की बातचीत की तरह यह सहमति होती कि “मान लेते हैं 194 characters को 140 characters में फिट कर दिया गया है, और बस दिखा देते हैं”
  demoparty की 4096-byte limit की तरह, यह उसी तर्क जैसा है जहाँ असल में Crinkler से 12~20KB को compress करके fit किया जाता है
  • beta.dwitter.net/top beta frontend में “compressed” टॉगल है, जिससे इसे मनचाहे तरीके से देखा जा सकता है
  • सिर्फ UTF-8 bytes के आधार पर limit लगाना भी एक तरीका है (जैसे: 140 bytes)
  • 140 bytes लगभग 160 ASCII characters के बराबर हैं। control characters को छोड़ दें तो 170 तक जा सकते हैं
  • शायद यह HN पर देखी गई सबसे ज़्यादा replies पाने वाली comment है :-)
  • HHG(Hitchhiker’s Guide) reference पहचानने वाले के रूप में यह देखकर खुशी हुई
• इस सर्दी Dwitter अपना 10वां साल पूरा कर रहा है
  एक पुराना इंटरव्यू मिला, दिलचस्प है: Medium interview
  असली जादू community में है: Discord community
• Dwitter पर 140 characters के भीतर बने generative sketches का एक संकलन तैयार किया गया है
  • Fractals
  • Chaos
  • Attractors
  • Spiral Art
  • Fireworks
  • Procedural Scenes
  • Wavelets
  • Top Dweets
  • आप निश्चित रूप से dwitter.net के स्टार्स में से एक हैं। मैं हर रात doomscroll की जगह dweetscroll करता हूँ, और आपकी creativity बहुत प्रेरित करती है
• पहले Dwitter के Authotokey edition में एक छोटे competition में हिस्सा लिया था और gear animation से जीत गया था
  animation GIF
  विवरण के लिए Autohotkey forum post देखें
• Dwitter जैसी साइटें देखने पर इंसानी creativity पर भरोसा फिर से बनता है
  constraints होने पर diversity और भी ज़ोर से फूटती है। visual illusions, छोटी पंक्तियाँ, और अनपेक्षित दिशाओं में experiments जैसी चीज़ें सामने आती हैं
  constraints focus दिलाते हैं, और failure की cost कम करके experimentation को बढ़ावा देते हैं
  ज़्यादातर platforms features जोड़कर creativity बढ़ाने की कोशिश करते हैं, लेकिन उल्टा चीज़ों को जटिल बना देते हैं
  मैं अक्सर इस नियम के बारे में सोचता हूँ कि constraints fun बनाते हैं
  जानना चाहूँगा कि constraints ने कब बेहतर नतीजे दिए, और कब वे बनावटी लगे
• Twitter के शुरुआती दिनों में मैं 140-byte code golf में गहराई से डूब गया था
  उस अनुभव ने मेरे code के बारे में सोचने का तरीका पूरी तरह बदल दिया
  छोटे community में byte-saving techniques साझा करते हुए Mandelbrot rendering से लेकर Sudoku solver तक सब बनाया
  10 साल बाद जब अपनी कंपनी के codebase में अपना पुराना UUID implementation मिला, तो सच में हैरानी हुई
  संबंधित लिंक: YouTube video, Byte-saving techniques, UUID gist
• आज पहली बार पता चला:

  js_func`string`
  

  यह valid JS syntax है। js_func को tagged template literal के रूप में call किया जाता है
  अब मैं console.log\weeee`` जैसी चीज़ें इस्तेमाल करने वाला हूँ
  • कुछ libraries इस syntax से JSX-जैसा syntax बिना build process के support करती हैं
    उदाहरण: htm, lit.dev
  • मैंने भी हाल ही में इस feature का इस्तेमाल code के भीतर image generator में किया
    छोटे SVG data को inline code में store करके 13KB का sampler बनाया
    उदाहरण लिंक
  • अब समझ आया कि यह syntax SQL और GraphQL templates में क्यों इस्तेमाल होता है
    उदाहरण:

    sql`SELECT * FROM users WHERE id = ${userId}`
    gql`query GetUser { user(id: ${userId}) { name email } }`
    

• Dwitter पसंद है, लेकिन eval के इस्तेमाल पर रोक होनी चाहिए
  इसकी जगह और ज़्यादा shortcuts जोड़ने चाहिए। उदाहरण के लिए s का मतलब Math.sign है, लेकिन इसे और बढ़ाया जा सकता था
  • ऐसी platforms का पहले होना ज़रूरी है, तभी rules को ‘तोड़ने’ के तरीके निकलते हैं
    बाद में इसे बदलने पर fixed target गायब हो जाता है और आकर्षण कम हो जाता है
    beta.dwitter.net encoding accessibility बेहतर करते हुए भी fixed target बनाए रखता है
    Math.sin या CSS color encoder जैसे exceptions practical reasons से जोड़े गए थे
    Dwitter 2 में और ज़्यादा predefined characters जोड़कर users को खुद extend करने देने की भी चर्चा हुई थी
    आखिरकार अहम चीज़ creativity है। rules को मोड़ना भी अपने आप में creative act है
  • अगर scoring को UTF-8 byte units के आधार पर बदल दिया जाए, तो eval की समस्या जड़ से हल हो सकती है
    string literals के ज़रिए data compression संभव रहेगा, लेकिन overall code compression कम हो जाएगा
  • मैं dwitter.net को लंबे समय से इस्तेमाल कर रहा हूँ, और eval की अनुमति से संतुष्ट हूँ। rules वही हैं (या शायद कोई rules ही नहीं)
• इससे जुड़े उदाहरण:
  • Show HN: A Stargate in 140 chars of JavaScript (नवंबर 2020)
  • Dwitter – A social network for short JavaScript demos (फ़रवरी 2017)