वर्चुअल गार्डन गेम से CSS Grid सीखें

• Grid Garden एक गेम-आधारित learning tool है जिसमें CSS code लिखकर गाजर के बगीचे में पानी दिया जाता है, और इस तरह CSS Grid layout को चरणबद्ध तरीके से अभ्यास किया जाता है
• पहला चरण ऐसा है जिसमें पानी सिर्फ उसी क्षेत्र तक पहुँचे जहाँ गाजर हैं, इसके लिए grid-column-start property से starting column तय किया जाता है
• grid-column-start: 3; का मतलब है कि पानी देने वाला क्षेत्र बाएँ से तीसरी vertical grid line से शुरू होगा
• उदाहरण वाला बगीचा display: grid और grid-template-columns, grid-template-rows से बना 5x5 grid है, जिसमें हर row और column 20% में बँटा है
• पूरा गेम 28 levels से बना है, और अगर आप CSS आगे सीखना चाहते हैं तो Flexbox Froggy और Anchoreum के साथ सीखना जारी रख सकते हैं

---

CSS Grid को गेम के नियमों से सीखने का तरीका

• Grid Garden एक ऐसा गेम है जिसमें CSS code लिखकर गाजर का बगीचा उगाया जाता है
• खिलाड़ी CSS Grid properties को इस तरह adjust करता है कि पानी सिर्फ वहीं जाए जहाँ गाजर हैं
• पहले level में grid-column-start से उस column की position तय की जाती है जहाँ से पानी शुरू होगा

पहला level: grid-column-start और 5x5 बगीचा

• grid-column-start: 3; का अर्थ है कि पानी देने वाला क्षेत्र grid की बाईं ओर से तीसरी vertical boundary line से शुरू होता है
• उदाहरण code का #garden एक CSS Grid container के रूप में सेट है
  • display: grid;
  • grid-template-columns: 20% 20% 20% 20% 20%;
  • grid-template-rows: 20% 20% 20% 20% 20%;
• यह setting rows और columns को 20%-20% में बाँटकर एक 5x5 grid बनाती है

level संरचना और आगे खेलने लायक गेम

• स्क्रीन पर 28 levels में से level 1 दिखाया जाता है
• CSS को और सीखने के लिए Flexbox Froggy और Anchoreum भी साथ में सुझाए गए हैं

[GN⁺]

Hacker News की टिप्पणियाँ

• मुझे हमेशा लगा है कि Rachel Andrews की यह सीरीज़ बेहतरीन learning material है: https://www.smashingmagazine.com/2020/01/understanding-css-g...
  backend पर काम करने वाले नज़रिए से भी इसने आधुनिक UI apps को हल्का और सरल बनाने के लिए मज़बूत आधार दिया
  Bootstrap भी नहीं चाहिए था, Tailwind भी नहीं

  • Bootstrap CSS को abstract कर देता है ताकि CSS अच्छी तरह न जानने पर भी आसान चीज़ें संभाली जा सकें, लेकिन Tailwind तो बस tokenized CSS के ज़्यादा करीब है
    CSS जाने बिना Tailwind इस्तेमाल नहीं किया जा सकता, और इस्तेमाल करते-करते CSS सीखना पड़ता है
    इसलिए उल्टा यह काफ़ी हल्का और सरल महसूस होता है
  • Jen Simmons की Layout Land वीडियो सीरीज़ भी recommend करता हूँ: https://www.youtube.com/layoutland
  • Bootstrap शुरू से ही ज़्यादा उस काम के लिए है जहाँ आप CSS Grid या Flexbox के बारे में सोचना नहीं चाहते
    वहीं Tailwind वह हिस्सा आपके लिए नहीं संभालता
    अगर Grid या Flexbox नहीं जानते, तो Tailwind भी pure CSS जितना ही मुश्किल हो सकता है

• यह game काफ़ी अच्छा और मज़ेदार है, लेकिन “यह वास्तव में कैसे काम करता है” पर ध्यान देने के बजाय बस values बदल-बदलकर मौजूदा problem हल करने का लालच ज़्यादा रहता है
  अगर इसे गहरी समझ तक ले जाना है, तो problem सुलझाने की आज़ादी और दी जा सकती है, लेकिन 2~3 बार से ज़्यादा कोशिश करने पर कोई छोटी penalty देने का तरीका भी ठीक लग सकता है

  • frontend code लिखने वाले नज़रिए से, ख़ासकर CSS में, चीज़ें हमेशा trial and error ही होती हैं, और जैसा कहा गया, अक्सर brute force जैसा महसूस होता है
    मिलती-जुलती problems पर काम करते हुए जो सीखा है उसे लागू करते हैं, और कभी-कभी बस तब तक छेड़छाड़ करनी पड़ती है जब तक काम न बन जाए
  • self-control की समस्या के लिए game को दोष नहीं दिया जा सकता

• कुछ बिखरे हुए notes:

  1. अच्छी बात: answer को absolute position से verify करता है
     इसलिए अगर जवाब valid है, तो grid के अलावा किसी और तरीके से भी level पार किया जा सकता है
  2. बुरी बात: हर attempt पर Google Analytics भेजता है
  • 1 नंबर वाली बात पर, शायद सब सहमत होंगे कि पहले task का सबसे मज़बूत solution position: relative; left: 31.4em; है

• एक पुरानी नौकरी में हम हर हफ़्ते टीम के साथ लगभग 30 मिनट का show-and-tell करते थे, और एक हफ़्ते मैं यह लेकर आया था ताकि जो लोग coding नहीं करते वे भी जवाब देने की कोशिश करें
  यह देखना दिलचस्प था कि कौन कितनी दूर तक जा सकता है; कुछ लोग तुरंत समझ गए और कुछ को यह काफ़ी मुश्किल लगा
  कुल मिलाकर सबको यह पसंद आया, और मुझे लगा कि जिन लोगों को ज़िंदगी में कभी coding नहीं करनी होगी, उनके लिए भी बुनियादी programming intuition बनाने का यह अच्छा तरीका था
  कई साल बाद भी सहकर्मी इसे इस अंदाज़ में याद करते थे, “तो तुम दिन भर यही करते हो?”; यह मेरे काम का सबसे आसान हिस्सा था, फिर भी वे मुझे किसी जादूगर की तरह देखते थे, जो काफ़ी मज़ेदार था
  फिर भी अच्छा यह लगा कि खुद थोड़ा करके देखने के बाद वे काम की ज़्यादा कद्र करने लगे

• मुझे लगा था कि Flexbox ने CSS की दुनिया बदल दी, फिर Grid आया और वह सच में कमाल का और predictable था
  अब CSS में बची हुई तकलीफ़ें ज़्यादा उन अजीब cases में हैं जैसे “sibling elements जो जगह इस्तेमाल नहीं कर रहे, वह कोई component भर ले, और उसके children में से एक भी अपने siblings की बची हुई सारी जगह ले ले, और अगर जगह कम पड़े तो scroll overflow हो”
  Flexbox और Grid के बीच कुछ अजीब interactions हैं, और size-calculation layout की priority उलझ जाती है; ऐसे कई cases हैं जिन्हें मैं अभी तक पूरी तरह नहीं समझ पाया हूँ
  हो सकता है ज़्यादातर समस्या मेरी ही हो, लेकिन Flexbox या Grid खुद की तुलना में यह अब भी intuitive नहीं लगता

• एक पल के लिए मुझे लगा कि बात https://csszengarden.com/pages/about/ की हो रही है
  बहुत पहले CSS सीखने और design inspiration पाने के लिए यह कमाल का resource था

  • मैं अब भी उस दौर को web development का golden age मानता हूँ
    वही समय था जब web standards movement के नतीजे दिखने शुरू हुए थे
    अफ़सोस कि उसके बाद React आया और अच्छी चीज़ें खिड़की से बाहर फेंक दी गईं
    लगता है tag soup भी अगर node_modules के भीतर गहराई में दफ़्न हो तो लोगों को चल जाता है

• पहले की कुछ बड़ी चर्चाएँ:
  2019: https://news.ycombinator.com/item?id=21050501
  2018: https://news.ycombinator.com/item?id=18753358
  2017: https://news.ycombinator.com/item?id=14041367

• यह game और Flexbox Froggy CSS layout में मज़ेदार entry के लिए अच्छे हैं

  • वेबसाइट Flexbox Froggy का link देती है, लेकिन account registration माँगने वाले link के ज़रिए
    सीधे जाना हो तो https://flexboxfroggy.com/ पर जाएँ

• उम्मीद थी कि इससे जिस छोटे और सरल web frontend problem पर काम कर रहा हूँ, उसके लिए कोई अच्छा solution ढूँढने में मदद मिलेगी
  लेकिन पहले 10 levels करने के बाद मुझे CSS और भी ज़्यादा नापसंद होने लगी

• CSS Grid मुझे इसलिए पसंद नहीं है क्योंकि यह HTML की semantic structure लगभग छीन लेता है
  Flexbox में कम से कम HTML tree पेज की किसी संरचना से मेल खाता है, लेकिन CSS Grid इस्तेमाल करते ही चीज़ें कुछ ऐसी दिखने लगती हैं
  <-! random amount of divs without classnames -->
  फिर पेज में क्या हो रहा है यह समझने के लिए अचानक CSS से मिलान करना पड़ता है
  यह बहुत प्रभावी ज़रूर है, लेकिन देखने में बदसूरत है

  • यह अलग विषय है, लेकिन शायद इसका हल ऐसा IDE हो सकता है जो HTML और CSS के बीच सारे रिश्ते समझकर, symbols को हाथ से मिलाए बिना, चीज़ों को visually manipulate करने दे