Svelte और Sapper

Feb 2, 2026

कैसे करना है

सैपर एक ढांचा है जो Svelte के शीर्ष पर बनाया गया है। यह सर्वर प्रतिपादन, लिंक प्रीलोडिंग, और सेवा श्रमिकों को बनाने की क्षमता के साथ बॉक्स से बाहर की गति पर केंद्रित है। Svelte के साथ संयुक्त, अंतिम परिणाम एक छोटे पदचिह्न के साथ एक अत्यधिक अनुकूलन, बिजली की तेज साइट है।

इस ट्यूटोरियल में, हम Svelte घटकों का उपयोग कर हल्के ब्लॉगिंग साइट बनाने के लिए सैपर का उपयोग करेंगे (हमारे देखें) ब्लॉग को कैसे शुरू करना है ब्लॉगिंग पर कुछ कम तकनीकी युक्तियों के लिए पोस्ट करें)। Svelte एक फर्क के साथ एक ढांचा है। यह संकलन समय पर कोड का विश्लेषण करता है और वेनिला जावास्क्रिप्ट में मॉड्यूल का एक सेट बनाता है, जो रनटाइम की आवश्यकता से बचाता है। यदि आपको लेआउट के साथ और मदद की ज़रूरत है तो सही कैसे प्राप्त करें पर हमारी पोस्ट देखें वेबसाइट लेआउट । या अन्य विकल्पों के लिए, इन शीर्ष देखें वेबसाइट बिल्डर्स और याद रखें, आपको भी अपने प्राप्त करने की आवश्यकता होगी वेब होस्टिंग बिंदु पर सेवा।

यहां फाइल्सिलो पर ट्यूटोरियल फाइलें डाउनलोड करें [3 9]

01. निर्भरता स्थापित करें

सबसे पहले, हमें निर्भरता डाउनलोड और स्थापित करने की आवश्यकता है। यह काम करने के लिए Svelte पर निर्भर करता है और सर्वर बनाने के लिए एक और ढांचा की आवश्यकता है, लेकिन शेष आवेदन पर निर्भर करता है। इस मामले में, हमें बाद में मार्कडाउन फ़ाइलों को निकालने में मदद करने के लिए कुछ संकुल की आवश्यकता है।

ट्यूटोरियल फ़ाइलें (ऊपर) डाउनलोड करें, उन्हें कमांड लाइन पर ढूंढें और निर्भरताओं को स्थापित करें।

> npm install

02. सर्वर का निर्माण

सैपर दो भागों में बनाया गया है - क्लाइंट-साइड फ्रेमवर्क और उस ढांचे के सर्वर-साइड प्रतिपादन। यह धीमे नेटवर्क पर उन लोगों के लिए अतिरिक्त गति बढ़ावा देने में मदद करता है। यह नोड का उपयोग करके बनाया गया है, जो सैपर मिडलवेयर को हमारे लिए भारी भारी उठाने की अनुमति देता है।

Open Server.js और एक्सप्रेस के साथ सर्वर बनाएँ। उनकी सिफारिशों का उपयोग करके, हम शामिल हैं दबाव हमारे द्वारा भेजे गए फाइलों को कम करने के लिए और सिरा स्थैतिक फाइलों की सेवा करने के लिए।

 एक्सप्रेस ()
  ।प्रयोग करें(
    संपीड़न ({दहलीज: 0}),
    SIRV ("स्टेटिक", {dev}),
    sapper.middeware ()
  )
  .लिस्टन (पोर्ट); 

03. आवेदन माउंट करें

क्लाइंट पक्ष पर, हमें एप्लिकेशन को माउंट करने के लिए सैपर को बताना होगा। यह रिएक्ट डोम के समान है प्रस्तुत करना या वू $ माउंट तरीके। क्लाइंट.जेएस के अंदर, सैपर शुरू करें और इसे रूट पर माउंट करें & lt; div & gt; तत्व। वह तत्व टेम्पलेट फ़ाइल में शामिल है, जिसे हम बाद में आएंगे।

 आयात * "@ सैपर / ऐप" से सैपर के रूप में;
Sapper.start ({
  लक्ष्य: document.getElementByID (
   "रूट")
}); 

04. विकास सर्वर शुरू करें

[7 9]

(छवि क्रेडिट: मैट क्राउच) [1 9] [9 7]

बुनियादी सर्वर और क्लाइंट फ़ाइलों के साथ, हम विकास सर्वर शुरू कर सकते हैं। यह सर्वर, क्लाइंट और सेवा कार्यकर्ता फ़ाइलों के निर्माण को बंद कर देता है, और यह डिफ़ॉल्ट रूप से पोर्ट 3000 पर शुरू होगा। जब भी कोई फ़ाइल बदलता है, तो यह उस एप्लिकेशन के हिस्से को पुनर्निर्माण करेगा जो बदल गया है।

कमांड लाइन पर सर्वर चलाएं। साइट को विकसित करते समय इस विंडो को खुला रखें।

 & gt; एनपीएम रन देव 

05. एक सर्वर मार्ग बनाएँ

"मार्ग" निर्देशिका के अंदर कुछ भी आवेदन के लिए एक मार्ग में बदल जाएगा। के साथ फाइलें .js एक्सटेंशन सर्वर मार्ग कहलाता है। इन मार्गों में कोई यूआई नहीं है, लेकिन इसके बजाय डेटा प्राप्त करने के लिए आवेदन द्वारा अनुरोध किया जाता है। हमारे मामले में, हम ब्लॉग पोस्ट लोड करने के लिए उनका उपयोग करेंगे।

मार्ग / ब्लॉग / index.json.js फ़ाइल बनाई जाएगी /blog.json हमारे सर्वर पर समापन बिंदु। ब्लॉग पोस्ट आयात करें और उनसे कुछ json बनाएँ।

 "./_posts.js" से आयात पोस्ट;
कॉन्स कंटेंट = json.stringify (
  poss.map (पोस्ट = & gt; ({)
    लेखक: post.author,
    छवि: post.image,
    शीर्षक: post.title,
    स्लग: post.slug
  }))
); 

06. ब्लॉग पोस्ट लौटाएं

सर्वर रूट्स निर्यात फ़ंक्शंस जो HTTP विधियों से मेल खाते हैं। उदाहरण के लिए, एक अनुरोध का जवाब देने के लिए, हम एक फ़ंक्शन नामक निर्यात करेंगे प्राप्त सर्वर मार्ग फ़ाइल से। बनाओ प्राप्त फ़ंक्शन जो आपके द्वारा किए गए डेटा के साथ प्रतिक्रिया देता है जिसे हमने एक JSON प्रारूप में पिछले चरण में एकत्र किया था। खुला हुआ http: // localhost: 3000 / blog.json ब्राउज़र में और पोस्ट की जांच कर रहे हैं।

 निर्यात समारोह प्राप्त करें (req, res) {
  res.writehead (200, {
    "सामग्री-प्रकार": "आवेदन / JSON"
  });

  res.end (सामग्री);
} 

07. इंडेक्स पेज बनाएं

सैपर में पेज नियमित रूप से Svelte घटक हैं। प्रत्येक घटक एक एकल फ़ाइल है .svelte विस्तार, और अपने आप के प्रबंधन के लिए सभी तर्क और स्टाइल शामिल हैं। किसी भी जावास्क्रिप्ट इस घटक को चलाने की जरूरत है एक अंदर रह जाएगा & lt; स्क्रिप्ट और जीटी; टैग - बस किसी भी HTML पृष्ठ की तरह।

के भीतर मार्ग / index.svelte , कुछ अन्य svelte घटकों को आयात करें जिनका उपयोग हम इस पृष्ठ को बनाने के लिए कर सकते हैं। निर्यात एक पदों वेरिएबल कि हम बाद में पॉप्युलेट करेंगे।

 & lt; स्क्रिप्ट और जीटी;
  से कंटेनर आयात करें
   ".. /components/container.svelte";
  से पोस्टमेडरी आयात करें
   ".. /components/postsummary.svelte";
  निर्यात पदों;
& lt; / स्क्रिप्ट & gt; 

08. ब्लॉग पोस्ट डेटा प्राप्त करें

पेज की स्थापना के साथ, हम ब्लॉग पोस्ट में लाने शुरू कर सकते हैं (आप उन्हें वापस लेना चाह सकते हैं घन संग्रहण )। जैसे ही पृष्ठ लोड हो जाता है, हमें इसे करने की आवश्यकता होती है। सर्वर के बारे में जागरूक होने के लिए और उसके बाद इस डेटा का अनुरोध करें जब यह पृष्ठ को प्रस्तुत करता है, तो इसे एक अलग में जाना होगा & lt; स्क्रिप्ट संदर्भ = "मॉड्यूल" & gt; टैग।

सर्वर पर, सैपर एक के लिए देखेगा प्रीलोड कार्य, और पृष्ठ को दिखाने से पहले इसे पूरा करने के लिए प्रतीक्षा करें। यहाँ, हम पॉप्युलेट कर रहे हैं पदों पिछले चरण से चर।

 & lt; स्क्रिप्ट संदर्भ = "मॉड्यूल" & gt;
  निर्यात Async फ़ंक्शन प्रीलोड () {
    कॉन्स रेज = प्रतीक्षा करें
     यह। Fetch ("blog.json");
    कॉन्स डेटा = await res.json ();
    वापसी {पोस्ट: डेटा};
  }
& lt; / स्क्रिप्ट & gt; 

09. पोस्ट सारांश प्रदर्शित करें

Svelte में, चर डिफ़ॉल्ट रूप से प्रतिक्रियाशील हैं। इसका मतलब है कि, जैसा कि वे अद्यतन करते हैं, हमारे घटक भी अपडेट करेंगे। के रूप में पदों परिवर्तनीय अब ब्लॉग पोस्ट की एक सरणी रखती है, हम इन पर लूप कर सकते हैं और उन्हें प्रदर्शित कर सकते हैं।

हम इसे एक का उपयोग कर कर सकते हैं #से प्रत्येक खंड मैथा। ये एक सरणी में प्रत्येक आइटम के लिए ब्रैकेट के अंदर क्या दोहराएंगे। घटक के निचले हिस्से में, किसी भी टैग के बाहर, पोस्ट प्रदर्शित करने के लिए HTML जोड़ें।

 & lt; कंटेनर और जीटी;
  & lt; उल & gt;
    {# सहायता के रूप में पोस्ट}
      & lt; li & gt;
        & lt; podersummary {... पोस्ट} / & gt;
      & lt; / li & gt;
    {/से प्रत्येक}
  & lt; / उल & gt;
& lt; / कंटेनर & gt; 

10. स्टाइल कंटेनर

हम किसी भी बार-बार तर्क रखने के लिए घटकों का उपयोग कर सकते हैं और जहां भी उनकी आवश्यकता होती है उन्हें उपयोग करें - शैलियों शामिल थे। & lt; कंटेनर और जीटी; घटक वर्तमान में कुछ भी नहीं करता है, लेकिन हम इसके अंदर सामग्री को अधिकतम चौड़ाई देने के लिए इसका उपयोग कर सकते हैं।

खुलना घटक / कंटेनर। सेवा , और अंदर कुछ शैलियों जोड़ें & lt; शैली & gt; टैग। किसी भी घटक के अंदर लागू होने वाली कोई भी शैलियों को उस घटक में स्कॉप किया जाता है, जिसका अर्थ है कि हम एक सामान्य चयनकर्ता का उपयोग कर सकते हैं।

[18 9] & lt; शैली & gt; div { मार्जिन: 0 ऑटो; पैडिंग: 0 1 रेम; अधिकतम चौड़ाई: 50rem; } & lt; / शैली & gt;

11. एक & lt; स्लॉट और जीटी परिभाषित करें;

यदि एक घटक को अन्य घटकों के लिए माता-पिता बनने के लिए डिज़ाइन किया गया है, तो हमें उन घटकों को पास करने का एक तरीका चाहिए। & lt; स्लॉट & gt; तत्व बस यही करता है, और कहीं भी रखा जा सकता है जो एक घटक के मार्कअप के अंदर समझ में आता है।

साथ में & lt; कंटेनर और जीटी; , हम एक स्टाइल में सामग्री लपेट रहे हैं & lt; div & gt; । प्रयोग करें & lt; स्लॉट & gt; के अंदर & lt; div & gt; के माध्यम से सब कुछ करने के लिए।

 & lt; div & gt;
  & lt; स्लॉट / & gt;
& lt; / div & gt; 

12. postummary प्रोप्स का पर्दाफाश करें

प्रत्येक घटक कुछ डेटा लाने वाला नहीं है। चूंकि हम मुख्य पृष्ठ घटक से पोस्ट लोड कर रहे हैं, इसे उन घटकों के माध्यम से पारित किया जा सकता है जो इसे अपने गुणों के माध्यम से प्रस्तुत करता है।

खुला हुआ घटक / popummary.svelte और फ़ाइल के शीर्ष पर कुछ विशेषताओं को परिभाषित करें। ये चरण 0 9 में जोड़े गए स्प्रेड ऑपरेटर द्वारा भर रहे हैं।

 & lt; स्क्रिप्ट और जीटी;
  निर्यात लेखक को;
  निर्यात छवि;
  निर्यात स्लग चलो;
  निर्यात शीर्षक;
& lt; / स्क्रिप्ट & gt; 

13. ब्लॉग पोस्ट सारांश प्रदर्शित करें

जब विशेषताएं आबादी होती हैं, तो उन्हें तब किसी अन्य चर की तरह पहुंचा जाता है। पोस्ट सारांश के प्रत्येक भाग के लिए अलग-अलग गुण होने से, हम मार्कअप को पढ़ने में आसान बनाते हैं।

घटक के निचले हिस्से में, सारांश बनाने के लिए कुछ HTML जोड़ें। कक्षाएं पूर्व परिभाषित शैलियों से संबंधित हैं।

& lt; अनुच्छेद & gt;
& lt; div class = "पोस्ट-छवि" शैली = "
 पृष्ठभूमि-छवि: यूआरएल ({छवि}) "/ & gt;
& lt; div class = "शरीर" & gt;
  & lt; div class = "लेखक-छवि" & gt;
    & lt; img src = {uther.image}
     alt = {uthor.name} / & gt;
  & lt; / div & gt;
  & lt; div class = "के बारे में" & gt;
    & lt; h1 & gt; {शीर्षक} & lt; / h1 & gt;
    & lt; अवधि वर्ग = "बायलाइन" & gt; द्वारा
     {uthor.name} & lt; / अवधि & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / अनुच्छेद & gt; 

14. ब्लॉग पोस्ट के लिए लिंक

[7 9]

(छवि क्रेडिट: मैट क्राउच) [1 9] [9 7]

इसी तरह के ढांचे जैसे कि अगले। जेएस, सैपर नियमित एंकर लिंक के साथ काम करता है। बिल्ड समय पर, यह आंतरिक लिंक का पता लगाने में सक्षम है, और अपने स्वयं के अनुकूलन भी करने में सक्षम है।

इसे एक लिंक में लपेटकर पिछले चरण से मार्कअप अपडेट करें। Slugged URL लिखने के लिए टेम्पलेट स्ट्रिंग बनाने की कोई आवश्यकता नहीं है।

 & lt; a rel = "prefetch" href = "/ blog / {slug}" & gt;
  & lt; अनुच्छेद & gt; ... & lt; / अनुच्छेद & gt;
& lt; / a & gt; 

15. स्लग द्वारा एक पोस्ट प्राप्त करें

सैपर यूआरएल पैरामीटर के आधार पर पेज बनाने में सक्षम है। हमारे मामले में, हम लिंक करते हैं / ब्लॉग / स्लग, जिसका अर्थ है कि यह घटक पर प्रस्तुत करता है /routes/blog/[SLUGE ]SVELTE ।

उस घटक के अंदर, ब्लॉग डेटा प्राप्त करें जैसे हमने इंडेक्स पेज के लिए किया था। पैरामीटर ऑब्जेक्ट में यूआरएल से पैरामीटर होते हैं, जो इस मामले में स्लग है।

 & lt; स्क्रिप्ट संदर्भ = "मॉड्यूल" & gt;
  निर्यात Async समारोह
   प्रीलोड ({params}) {
    const res = await awit.fetch (
     `ब्लॉग / $ {params.slug} .json`);
    कॉन्स डेटा = await res.json ();
  }
& lt; / स्क्रिप्ट & gt; 

16. यदि पोस्ट नहीं मिला तो त्रुटि

इंडेक्स पेज के विपरीत, एक मौका है कि यूआरएल में ब्लॉग पोस्ट नहीं है। उस स्थिति में, हमें एक त्रुटि प्रदर्शित करनी चाहिए। साथ में लाना , प्रीलोड विधि भी शामिल है त्रुटि यह इसके बजाय एक त्रुटि पृष्ठ पर प्रतिक्रिया बदलता है।

प्रीलोड विधि के अंत में, यदि कोई पोस्ट नहीं मिला तो एक त्रुटि दिखाएं। अन्यथा, सेट करें पद पृष्ठ के लिए चर।

 अगर (res.status === 200) {
  वापसी {पोस्ट: डेटा};
} अन्य {
  this.error (res.status,
    data.message);
} 

17. ब्लॉग पोस्ट प्रदर्शित करें

[7 9]

[2 9 3] [2 9 4] [2 9 5]

(छवि क्रेडिट: मैट क्राउच) [1 9] [9 7]

डेटा के साथ, अब हम पृष्ठ पर पोस्ट दिखा सकते हैं। पोस्टम्यरी घटक के समान, हम घुंघराले ब्रैकेट के अंदर पोस्ट की सामग्री के प्रत्येक भाग को प्रदर्शित करते हैं। घटक के निचले भाग पर, पृष्ठ पर प्रदर्शित करने के लिए कुछ मार्कअप जोड़ें।

 & lt; अनुच्छेद और जीटी;
  & lt; कंटेनर और जीटी;
    & lt; div class = "शीर्षक" & gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; div class = "बायलाइन" & gt; द्वारा
       {post.author.name} & lt; / div & gt;
    & lt; / div & gt;
    & lt; img class = "पोस्ट-इमेज" src = {post.image} alt = "" / & gt;
     {post.html}
  & lt; / कंटेनर और जीटी;
& lt; / अनुच्छेद & gt; 

18. इसके बजाय HTML प्रदर्शित करें

अब पृष्ठ को देखकर, सबकुछ वास्तविक पोस्ट सामग्री से सही ढंग से प्रदर्शित होता है। मार्कडाउन रूपांतरण एचटीएमएल उत्पन्न करता है, लेकिन हम देखते हैं कि पोस्ट पर टेक्स्ट के रूप में मुद्रित। सैपर में इस मामले के लिए एक एचटीएमएल पार्सर बनाया गया है। लगाना @html इसके सामने इस पार्सर का उपयोग करेगा।

 {@ एचटीएमएल POST.HTML} 

19. पेज & lt; शीर्षक & gt; मूल्य

हमारा ब्लॉग सही ढंग से कार्य करता है, लेकिन इसे खत्म करने के लिए कुछ बदलाव की आवश्यकता है। उनमें से एक को अपडेट करना है & lt; शीर्षक & gt; उस टैब को रिलायबल करने के लिए पृष्ठ पर इसे प्रदर्शित किया गया है।

Svelte एक का समर्थन करता है & lt; Svelte: हेड और जीटी; तत्व, जो इसके अंदर कुछ भी इंजेक्ट करता है & lt; हेड और जीटी; पृष्ठ का। पोस्ट के शीर्षक को सेट करने के लिए इसका उपयोग करें & lt; शीर्षक & gt; ।

 & lt; svelte: हेड और जीटी;
  & lt; शीर्षक & gt; {post.title} |
   सैपर ब्लॉग & lt; / शीर्षक & gt;
& lt; / svelte: हेड और जीटी; 

20. & lt; शीर्षक & gt;

शेष पृष्ठ के लिए HTML को मुद्रित करने के लिए प्रत्येक पृष्ठ एक टेम्पलेट के माध्यम से चला जाता है। यह वह जगह है जहां फ़ॉन्ट आयात और मेटा टैग जैसे कोई भी सेटअप दर्ज किया जाएगा। टेम्पलेट.एचटीएमएल खोलें, और की सामग्री के लिए एक हुक में जोड़ें & lt; Svelte: हेड और जीटी; पिछले चरण से तत्व। इसे बंद करने से ठीक पहले में जोड़ें & lt; / सिर & gt; टैग।

 & lt; हेड और जीटी;
  [...]% sapper.head%
& lt; / सिर & gt; अंतिम चीज जो हमें जोड़ने की आवश्यकता है, वह ब्लॉग के लिए एक लेआउट है। प्रत्येक पृष्ठ को घटक में लपेटने के बजाय, सैपर हमारे लिए यह काम करने के लिए "_layout.svelte" फ़ाइल की तलाश करेगा।
_Layout.svelte के अंदर, आयात करें & lt; शीर्षलेख और जीटी; घटक और दिखाएं कि प्रत्येक पृष्ठ के शीर्ष पर। यह मुखपृष्ठ पर एक सुविधाजनक लिंक प्रदान करता है। 

21. स्थायी शीर्षलेख जोड़ें

अंतिम चीज जिसे हमें जोड़ने की आवश्यकता है ब्लॉग के लिए एक लेआउट है। एक घटक में प्रत्येक पृष्ठ को लपेटने के बजाय, सैपर एक के लिए देखेगा _layout.svelte हमारे लिए यह काम करने के लिए फ़ाइल। के भीतर _layout.svelte , आयात करें & lt; शीर्षलेख और जीटी; घटक और दिखाएं कि प्रत्येक पृष्ठ के शीर्ष पर। यह मुखपृष्ठ पर एक सुविधाजनक लिंक प्रदान करता है।

 & lt; स्क्रिप्ट और जीटी;
  से हेडर आयात करें
   ".. /components/header.svelte";
& lt; / स्क्रिप्ट & gt;
& lt; मुख्य & gt;
  & lt; हेडर / & gt;
  & lt; स्लॉट / & gt;
& lt; / मुख्य & gt; 

यह सामग्री मूल रूप से वेब डिजाइनर में दिखाई दी। [3 9]

[35 9] वेब घटक: अंतिम गाइड

[35 9] वेब डिजाइनरों और देवों के लिए 30 क्रोम एक्सटेंशन [35 9] 2019 में स्मार्ट काम करने में आपकी सहायता के लिए 52 वेब डिज़ाइन टूल्स

---

कैसे करना है - सर्वाधिक लोकप्रिय लेख

एक घोड़े को कैसे आकर्षित करें

कैसे करना है Feb 2, 2026

2 का पृष्ठ 1: एक घोड़े को कैसे आकर्षित करे�..

---

Create a custom Slack bot

कैसे करना है Feb 2, 2026

(छवि क्रेडिट: वेब डिजाइनर) [1 9] स्लैक व्यवसायो�..

---

Stop the bots with Google reCAPTCHA

कैसे करना है Feb 2, 2026

(छवि क्रेडिट: भविष्य) [1 9] बॉट्स को हमेशा एक नं�..

---

How to create an Alexa skill for your site

कैसे करना है Feb 2, 2026

हम में से कई में अब घर के चारों ओर कुछ प्रकार का आव�..

---

How to use blend shapes to animate characters

कैसे करना है Feb 2, 2026

अपने rigging जबकि 3 डी मॉडल हड्डियों का उपयोग करना बहुत प्रभावी हो स..

---

Top tips for painting expressive hands

कैसे करना है Feb 2, 2026

हाथ शायद सबसे कठिन शरीर रचना तत्व जानने के लिए है�..

---

How to get more from GIFs

कैसे करना है Feb 2, 2026

[1 1] जीआईएफ सीमलेस चक्रों में काम करते हैं, जो रेबेका �..

---

Get started with prototyping in Adobe XD

कैसे करना है Feb 2, 2026

चूंकि यूएक्स डिजाइन पेशेवरों की मांग बढ़ती जा रही है, डिजाइनर आसानी से उप..

---

श्रेणियाँ

• एआई और मशीन लर्निंग
• AirPods
• वीरांगना
• अमेज़ॅन एलेक्सा और अमेज़ॅन इको
• अमेज़न एलेक्सा और अमेज़न इको
• अमेज़न आग टीवी
• अमेज़न प्रधानमंत्री वीडियो
• एंड्रॉयड
• Android फ़ोन और टेबलेट
• Android फोन और टैबलेट
• Android टीवी
• एप्पल
• Apple App स्टोर
• एप्पल HomeKit और एप्पल HomePod
• एप्पल संगीत
• एप्पल टीवी
• एप्पल घड़ी
• एप्लिकेशन और वेब Apps
• ऐप्स और वेब ऐप्स
• ऑडियो
• Chrome बुक और क्रोम ओएस
• क्रोमबुक और क्रोम ओएस
• Chromecast
• बादल और इंटरनेट
• बादल और इंटरनेट
• क्लाउड और इंटरनेट
• कंप्यूटर हार्डवेयर
• कंप्यूटर इतिहास
• गर्भनाल काटने और स्ट्रीमिंग
• कॉर्ड कटिंग और स्ट्रीमिंग
• कलह
• डिज्नी +
• DIY
• बिजली के वाहन
• EReaders
• अनिवार्य
• व्याख्यार
• फेसबुक
• जुआ
• जनरल
• Gmail
• गूगल
• गूगल सहायक और गूगल नेस्ट
• Google सहायक और Google नेस्ट
• गूगल क्रोम
• गूगल डॉक्स
• को Google डिस्क
• गूगल मैप्स
• गूगल प्ले स्टोर
• Google शीट
• Google स्लाइड
• गूगल टीवी
• हार्डवेयर
• एचबीओ मैक्स
• कैसे करना है
• Hulu
• Instagram
• इंटरनेट स्लैंग और लघुरूप
• IPhone और IPad
• Kindle
• लिनक्स
• मैक
• रखरखाव और अनुकूलन
• माइक्रोसॉफ्ट एज
• माइक्रोसॉफ्ट एक्सेल
• माइक्रोसॉफ्ट ऑफिस
• माइक्रोसॉफ्ट आउटलुक
• Microsoft PowerPoint
• ​​माइक्रोसॉफ्ट टीमें
• माइक्रोसॉफ्ट वर्ड
• मोज़िला फ़ायरफ़ॉक्स
• Netflix
• Nintendo स्विच
• पैरामाउंट +
• पीसी गेमिंग
• मयूर
• फोटोग्राफी
• फ़ोटोशॉप
• प्लेस्टेशन
• गोपनीयता और सुरक्षा
• निजता एवं सुरक्षा
• गोपनीयता और सुरक्षा
• उत्पाद मवेशियों को इकट्ठा
• प्रोग्रामिंग
• रास्पबेरी Pi
• Reddit
• Roku
• सफारी
• सैमसंग फ़ोन और टेबलेट
• सैमसंग फोन और टैबलेट
• स्लैक
• स्मार्ट होम
• Snapchat
• सामाजिक मीडिया
• अंतरिक्ष
• Spotify
• Tinder
• समस्या निवारण
• टीवी
• ट्विटर
• वीडियो गेम
• आभासी वास्तविकता
• के VPN
• वेब ब्राउज़र
• WhatsApp
• वाईफ़ाई और रूटर
• वाईफाई और राउटर
• विंडोज
• Windows 10
• विंडोज 11
• विंडोज 7
• एक्सबॉक्स
• यू ट्यूब के यूट्यूब टीवी
• YouTube और YouTube टीवी
• ज़ूम
• Explainers