लोक प्रत्यक्षात काय पाहतात, ते शाळेच्या सूचना फलकाच्या रूपात शिकवलेले: रचना, दिसणे, आणि कोणी स्पर्श केल्यावर काय घडते. प्रत्येक धडा म्हणजे क्रमांकित आकृती असलेली शाळेची गोष्ट — आणि फलक रेपोच्या आतच आहे: तीन साध्या फाइल्समधले खरे web ॲप (HTML, CSS, JavaScript — framework नाही, build पायरी नाही) आणि बोलण्यासाठी एक छोटे काउंटर, जे प्रत्येक धडा वाचतो, मोडतो आणि सुधारतो.
# the 60-second wow — a real web app, live:
git clone https://github.com/BaluRaut/learn-ui-school.git && cd learn-ui-school
python3 ui/mock_api.py # serves the board + its tiny counter on http://127.0.0.1:8000
python3 ui/smoke_test.py # does the board stand? 10 checks (second terminal)
तुम्हाला काय दिसायला हवे (छाटलेले — यश असे दिसते):
✅ lang attribute on <html>
✅ one <h1>
✅ every input has a label
✅ images have alt
✅ skip link + live region
✅ design tokens defined
✅ dark theme via tokens
✅ focus is visible
✅ API returns students
✅ API rejects a bad form (400)
🎉 the board stands
🎒 धडा 01 आधी: तुम्हाला ब्राउझर आणि Python 3 लागतो (फक्त फलक ज्याच्याशी बोलतो त्या छोट्या काउंटरसाठी) — Node नाही, npm नाही, framework नाही. चांगले शेजारी: API शाळा (हा फलक ज्यासाठी चिठ्ठ्या भरतो ते काउंटर) आणि CI/CD शाळा (फलक भिंतीवर कसा लागतो). हे काय नाही: React चा कोर्स — धडे 04–05 मध्ये हाताने केल्यानंतर frameworks काय automate करतात ते धडा 07 दाखवतो.
🗣️ मोठ्याने समजावा — धडा 12 नंतर: (1) <div onclick> पेक्षा <button> का बरा — फुकट मिळणाऱ्या तीन गोष्टी सांगा? (2) पान तुमच्या लॅपटॉपवर चालते आणि फोनवर मोडते — कोणत्या दोन CSS सवयी हे टाळतात? (3) "UI = render(state)": तुम्ही DOM हातानेही बदलले तर काय बिघडते? (4) screen reader वापरणारा विद्यार्थी नोंदवू शकत नाही — तुम्ही काय तपासाल, क्रमाने? (5) फलकाने आधीच तपासलेले काउंटरने पुन्हा का तपासावे? (6) hash केलेली फाइलनावे आणि मोठा max-age यांचा एकमेकांशी काय संबंध?
🎓 याच शाळेतून:API · Database · CI/CD · AWS — तेच उपमांचे विश्व, तीच ब्रँच-मागून-ब्रँच पद्धत.
📐 धड्यांच्या आकृत्या — क्रमांक अनुसरा
प्रत्येक धडा एका क्रमांकित बॉक्स-आणि-बाण आकृतीत — स्वतंत्र पानावरही.
1 📌 UI का
सूचना फलक — लोक जे पाहतात तेच उत्पादन; ब्राउझर, DOM, एक HTML फाइल.
🧒 सोप्या शब्दांत
शाळेचे office records अचूक ठेवू शकते आणि प्रत्येक slip ला उत्तर देऊ शकते, तरीही बाहेर उभ्या पालकाला काहीच दिसत नाही. Notice board वरच हे सगळे शेवटी दिसू लागते. Web page पण असेच चालते: HTML म्हणजे board वर काय लावले आहे, CSS म्हणजे ते कसे दिसते, आणि JavaScript म्हणजे कोणी हात लावला की काय घडते.
📖 नवे शब्दUI — app चा तो भाग जो लोक पाहतात आणि वापरतातHTML — मजकूर आणि रचना: headings, याद्या, formsCSS — दिसणे: रंग, अंतर आणि मांडणीJavaScript — वागणे: click केले किंवा type केले की काय घडतेDOM — browser मधले page चे जिवंत रूप, जे code बदलू शकतो
⏪ आधी
उत्तम database आणि API असूनही माणसाला काहीच दिसत नव्हते, कारण कोणी पाहू शकत नाही तोपर्यंत JSON हे product नसते.
💡 काय
UI म्हणजे सूचना फलक: HTML म्हणजे काय लावले आहे, CSS म्हणजे ते कसे दिसते, आणि JS म्हणजे कोणी स्पर्श केल्यावर काय होते.
⚙️ कसे
localhost:8000 वरचा browser एक HTML file, एक stylesheet आणि एक script load करतो, आणि API ने पाठवलेले विद्यार्थी काढतो.
🎯 का
लोकांना जे दिसते तेच product आहे: UI मध्येच Database आणि API schools शेवटी डोळ्यांना दिसतात.
🚀 पुढे
पुढे फलकाला semantic HTML चा सांगाडा मिळतो (lesson 2), मग layout, events, state, आणि शेवटी खरा deploy.
🧪 Try it here — फलक सोला: आधी फक्त HTML, मग CSS, मग JS
फलकाचा सांगाडा — semantic elements, forms, labels, alt मजकूर.
🧒 सोप्या शब्दांत
चांगल्या notice board वर स्पष्ट विभाग असतात: वर शीर्षक, मध्ये विद्यार्थ्यांची यादी, खाली footer. HTML प्रत्येक भागाला तो जे आहे त्या नावाने ओळखते, म्हणजे screen reader वापरणारा विद्यार्थी अनुक्रमणिकेसारखा एका विभागातून दुसऱ्यात जाऊ शकतो. Form च्या प्रत्येक box ला label मिळते, आणि प्रत्येक चित्राला त्याचे वर्णन करणारे वाक्य.
📖 नवे शब्दsemantic element — एखादा भाग काय आहे ते सांगणारा tag, जसे <header> किंवा <nav>landmark — page चा मुख्य भाग, जिथे screen reader थेट जाऊ शकतोlabel — input box शी जोडलेला मजकूर, काय लिहायचे ते सांगणाराalt text — चित्र न पाहू शकणाऱ्यांसाठी शब्दांत केलेले त्याचे वर्णन
⏪ आधी
फक्त साध्या divs ने बनलेले पान screen readers, Tab key आणि search engines ना कोणता भाग काय आहे याचा नकाशाच देत नाही.
💡 काय
Semantic HTML प्रत्येक element त्याच्या अर्थासाठी निवडते: landmarks, क्रमाने headings, labels असलेले forms आणि चित्रांसाठी alt text.
⚙️ कसे
Label चे for= input च्या id कडे निर्देश करते, required आणि minlength कोणताही JS चालण्याआधी चुकीचे input नाकारतात, आणि role=status घोषणा करते.
🎯 का
ui/index.html च्या सुमारे 80 ओळी screen readers, keyboards आणि search engines ना एकच स्पष्ट अनुक्रमणिका देतात.
🚀 पुढे
पुढे CSS layout ने style येते (lesson 3), आणि हाच अर्थ accessibility lesson चा पाया बनतो (lesson 6).
🧪 Try it here — खऱ्या <button> च्या जागी सजवलेला <div> ठेवा आणि box मध्ये Tab दाबा
फलकाची मांडणी — box model, flexbox, grid; एकच फलक फोनवर आणि भिंतीवर.
🧒 सोप्या शब्दांत
Board वरची प्रत्येक notice जागा घेते: स्वतः कागद, border च्या आतली थोडी जागा, border, आणि पुढच्या notice पर्यंतचे अंतर. CSS हे boxes मांडते, एकाच ओळीत (flexbox) किंवा cards च्या नीटनेटक्या जाळीत (grid), म्हणजे तोच board छोट्या phone वर आणि भिंतीवरच्या मोठ्या screen वर बसतो.
📖 नवे शब्दbox model — प्रत्येक element म्हणजे content, padding, border आणि margin, एकात एक frames सारखेpadding — border च्या आतली जागाmargin — border च्या बाहेरची जागा, शेजाऱ्यांना दूर ढकलणारीflexbox — items एका ओळीत किंवा एका स्तंभात मांडतेgrid — items वेळापत्रकासारखे ओळी आणि स्तंभांत ठेवते
⏪ आधी
Padding आणि border मुळे अचानक वाढणाऱ्या widths आणि float hacks मुळे फलक phone वर किंवा मोठ्या screen वर बिघडायचा.
💡 काय
CSS layout म्हणजे box model, एका ओळीसाठी flexbox आणि पानासाठी grid, म्हणजे एकच फलक phone आणि भिंत दोन्हीवर बसतो.
⚙️ कसे
box-sizing: border-box width 140px वरच ठेवते, gap सह flex header एका रांगेत लावतो, आणि minmax(120px, 1fr) सह grid auto-fill cards गुंडाळतो.
🎯 का
थोडेच layout नियम pixel दुरुस्त्यांची पाने बदलतात, आणि वेगळ्या versions शिवाय फलक कोणत्याही screen ला जुळवून घेतो.
🚀 पुढे
पुढे JavaScript फलकाला जिवंत करते (lesson 4), आणि नंतर design tokens layout ला सामायिक गणवेश देतात (lesson 8).
🧪 Try it here — box-model चे dials फिरवा आणि फलक फोनच्या रुंदीत दाबा
फलक जिवंत होतो — events, DOM बदल, काउंटरकडे fetch.
🧒 सोप्या शब्दांत
विद्यार्थ्याने class menu मधून '3B' निवडले की board वर फक्त 3B चे विद्यार्थी दिसायला हवेत. JavaScript ती निवड (event) ऐकते, page ला जे लक्षात आहे ते बदलते, आणि board पुन्हा काढते. ती office counter ला slip पण पाठवू शकते (fetch) आणि उत्तर आले की ते board वर लावते.
📖 नवे शब्दevent — user ने केलेली कृती, जसे click, type किंवा निवडevent handler — तो event घडला की चालणारा codefetch — API कडून data मागण्याची browser ची पद्धतrender — सध्याच्या data वरून board पुन्हा काढणे
⏪ आधी
Static पान प्रतिसाद देऊ शकत नाही: class निवडले किंवा form पाठवला तर एकतर काहीच होत नाही किंवा पूर्ण पान reload होते.
💡 काय
JavaScript events ऐकते, state बदलते, फलक पुन्हा काढते, आणि fetch ने counter ची slip भरते.
⚙️ कसे
#class-filter वरचा change event state.filter 3B करतो आणि render() बोलवतो; fetch 5 s timeout सह API बोलवतो आणि items काढतो.
🎯 का
फलक ताजे data दाखवतो, आणि मंद किंवा अयशस्वी request वर गोठलेल्या पानाऐवजी स्पष्ट error संदेश दाखवतो.
🚀 पुढे
Lesson 5 हे सत्याचा एकच स्रोत बनवतो, आधी state मग render, आणि components म्हणजे data चे functions.
🧪 Try it here — जिवंत फलक वापरा: filter बदला, विद्यार्थी नोंदवा — event log वाचा
सत्याचा एकच स्रोत — state → render, data चे functions म्हणून components.
🧒 सोप्या शब्दांत
वर्गशिक्षक एकच हजेरीपट ठेवतात: कोणते विद्यार्थी आहेत, कोणता class दाखवला आहे, यादी अजून load होते आहे का, आणि काही चुकले का. Board म्हणजे त्या हजेरीपटावरून काढलेली फक्त एक प्रत. Board बदलायचा असेल तर हजेरीपट बदला आणि पुन्हा काढा; board वर थेट खाडाखोड कधीच नाही. प्रत्येक विद्यार्थ्याचे card एकाच छोट्या कृतीने काढले जाते.
📖 नवे शब्दstate — page ला सध्या जे माहीत आहे त्याचा एकच हजेरीपटcomponent — data पासून page चा एक तुकडा बनवणारी छोटी, पुन्हा वापरता येणारी कृतीrender — state वरून page पुन्हा काढणेsingle source of truth — खरी माहिती एकाच ठिकाणी; बाकी सगळे तिथूनच घेतले जाते
⏪ आधी
अनेक ठिकाणांहून DOM हाताने बदलला की screen data पासून दूर जाते, आणि त्या फटींमध्ये bugs लपतात.
💡 काय
एक state object हेच सत्य, आणि DOM म्हणजे त्याचे चित्र; StudentCard(s) सारखे components म्हणजे data चे functions.
⚙️ कसे
State मध्ये students, filter, loading आणि error असतात; ते बदला, render() बोलवा, आणि फक्त 3A चे विद्यार्थी काढले जातात.
🎯 का
एकच सत्य असल्याने screen नेहमी data शी जुळते, आणि loading व error सुद्धा state असल्याने ते दाखवणे सोपे जाते.
🚀 पुढे
React, Vue आणि Svelte सारखे frameworks नेमके हेच state आणि render चक्र automate करतात, हे lesson 7 दाखवतो.
🧪 Try it here — state object बदला आणि render(state) फलक पुन्हा काढताना पहा
काही विद्यार्थी mouse वापरू शकत नाहीत, काहींना screen नीट दिसत नाही, आणि काहींना हलणारी चित्रे त्रासदायक वाटतात. Accessible board सगळ्यांसाठी चालतो: Tab क्रमाने प्रत्येक button पर्यंत पोहोचतो, प्रत्येक box ला label असते, मजकूर वाचता येईल इतका गडद असतो, आणि screen reader '5 pupils shown' असे सांगतो. एकाही विद्यार्थ्याला वापरता येत नसेल, तर board अजून पूर्ण नाही.
📖 नवे शब्दaccessibility — अपंगत्व असलेल्यांसह सगळ्यांना page वापरता येईल असे बनवणेscreen reader — page मोठ्याने वाचून दाखवणारे softwarecontrast — मजकूर पार्श्वभूमीपासून किती उठून दिसतो; किमान 4.5:1focus — keyboard सध्या ज्या control वर आहे तोARIA — साध्या HTML ला सांगता येत नाही तेव्हा screen readers साठी जादा labels
⏪ आधी
फक्त mouse आणि उत्तम दृष्टी असल्यावरच चालणारा फलक keyboard users, screen reader users आणि इतर अनेकांना बाहेर ठेवतो.
💡 काय
Accessibility म्हणजे प्रत्येकाला फलक वाचता येणे: keyboard, labels, contrast, focus, ARIA आणि screen readers सगळे चालतात.
⚙️ कसे
Tab skip link आणि प्रत्येक control क्रमाने :focus-visible ring सह गाठतो, text ला 4.5:1 contrast लागतो, आणि reduced motion पाळले जाते.
🎯 का
जास्त लोक फलक वापरू शकतात, आणि फक्त keyboard वापरणारे, switch users आणि तुमचे स्वतःचे tests सगळे एकाच वाटेने जातात.
🚀 पुढे
Lesson 10 मधला smoke test प्रत्येक वेळी labels, alt text, skip link आणि :focus-visible तपासतो.
🧪 Try it here — फलक मुद्दाम मोडा आणि checks चालवा; रंगांची जोडी तपासा
एका धड्यात React, Vue, Svelte — ते काय automate करतात, साधे JavaScript कधी पुरते.
🧒 सोप्या शब्दांत
विद्यार्थ्याचे card हाताने बनवता येते, किंवा तयार संच वापरून. React, Vue आणि Svelte असे संच आहेत: data बदलला की ते तुमच्यासाठी page पुन्हा काढतात. सगळ्यांमागची कल्पना एकच आहे, तुकडे अधिक data म्हणजे page, म्हणून छोट्या board साठी साधी JavaScript पुरेशी आहे; board आणि team मोठी झाली की संच निवडा.
📖 नवे शब्दframework — तुमच्यासाठी page पुन्हा काढण्याचे काम सांभाळणारा तयार संचReact · Vue · Svelte — components आणि data पासून page बनवणारे तीन लोकप्रिय संचuseState — component ला एखादी किंमत लक्षात ठेवू देण्याची React ची पद्धतvanilla JS — कोणताही संच नसलेली साधी JavaScript
⏪ आधी
छोटा फलक अनेक screens असलेले मोठे app बनला की state आणि DOM updates साठी हाताने लिहिलेले plumbing गोंधळाचे होते.
💡 काय
React, Vue आणि Svelte एकच कल्पना automate करतात, components आणि state मिळून view बनतो, आणि छोट्या फलकांसाठी vanilla JS पुरेसे.
⚙️ कसे
तोच StudentCard चार प्रकारे लिहिला आहे: JSX आणि useState सह React, ref सह Vue, compile होऊन नाहीसा होणारा Svelte, आणि vanilla template.
🎯 का
खालची कल्पना समजली की team आणि ecosystem पाहून निवड करता येते, आणि कोणताही नवीन framework पटकन शिकता येतो.
🚀 पुढे
Frameworks सोबत design tokens वर बांधलेल्या component libraries येतात (lesson 8) आणि मोठे bundles ज्यांचे वजन तपासावे लागते (lesson 9).
🧪 Try it here — तेच card चार बोलींत — आणि एका बदलाने किती DOM nodes ना हात लागतो ते मोजा
शाळेचा गणवेश — एका token पत्रकातून रंग, अंतर, अक्षरे आणि dark mode.
🧒 सोप्या शब्दांत
शाळेचा गणवेश म्हणजे कोणीही शिवला तरी सगळ्यांचे रंग सारखेच. Design tokens म्हणजे page चा गणवेश: एक कागद रंग आणि अंतरांना नावे देतो, जसे --accent किंवा --space-2, आणि प्रत्येक भाग आकड्यांऐवजी तीच नावे वापरतो. Accent एकदा बदला की पूर्ण board बदलतो; dark mode म्हणजे फक्त किमतींचा दुसरा संच.
📖 नवे शब्दdesign token — नाव दिलेली किंमत, जसे --space-2 = 12px, आकड्याऐवजी सगळीकडे वापरली जाणारीdesign system — प्रत्येक page सारखे दिसावे म्हणून सामायिक tokens आणि भागCSS variable — CSS मधले किंमत धरणारे नाव, var(--name) असे वापरले जातेdark mode — फक्त token किमती बदलून बनवलेली गडद रंगांची theme
⏪ आधी
12px आणि एकच गुलाबी hex code सगळीकडे copy केल्याने एक रंग बदलणे किंवा dark mode आणणे म्हणजे प्रत्येक file बदलणे.
💡 काय
Design tokens म्हणजे शाळेचा गणवेश: :root वरच्या --accent आणि --space-2 सारख्या नावाच्या किमती, ज्या प्रत्येक component वापरतो.
⚙️ कसे
.card padding: var(--space-2) आणि border-radius: var(--radius) वापरतो; dark mode फक्त tokens च्या किमती बदलतो, components कधीच नाही.
🎯 का
--accent एकदा बदला आणि संपूर्ण फलक बदलतो, म्हणून design एकसारखे राहते आणि नवीन theme जवळजवळ फुकट मिळते.
🚀 पुढे
Tokens वाढून अनेक apps मध्ये वापरली जाणारी design system बनतात, आणि smoke test tokens styles.css मध्ये आहेत का ते तपासतो.
🧪 Try it here — तीन tokens बदला आणि theme पलटा — components कधीच बदलत नाहीत
दिसायला खूप वेळ लागणारा notice board वाचक गमावतो. Phone जी प्रत्येक file download करतो तिला वेळ लागतो: आपला पूर्ण board 12 KB आहे, तर एका framework चा bundle 300 KB असू शकतो, हळू 3G phone वर सुमारे 2 सेकंद. म्हणून कमी पाठवा, चित्रे लहान करा, खालची चित्रे गरज असेल तेव्हाच load करा, आणि आधी आणलेल्या files phone ला जपून ठेवू द्या.
📖 नवे शब्दbundle — download साठी एकत्र बांधलेल्या सगळ्या code fileslazy loading — चित्राजवळ scroll केल्यावरच ते load करणेcache — जपून ठेवलेली प्रत, म्हणजे phone ला ती पुन्हा download करावी लागत नाहीCore Web Vitals — वेगाचे तीन गुण: मुख्य मजकूर दिसणे, tap ला प्रतिसाद, काही न उडी मारणेCLS — load होताना page किती उड्या मारतो
⏪ आधी
3G वर 300 KB framework bundle म्हणजे पहिल्या paint आधी 2 s, आणि आकार राखून न ठेवलेल्या images मुळे पान उडी मारते.
💡 काय
Performance म्हणजे फलक जलद load करणे: कमी bytes पाठवा, images शहाणपणाने load करा, चांगले cache करा आणि Core Web Vitals पाहा.
⚙️ कसे
संपूर्ण फलक 12 KB आहे; images ना width, height आणि loading=lazy मिळते, आणि app.3f2a9c.js सारखी hashed file वर्षभर cache होते.
🎯 का
जलद पाने वाचकांना टिकवतात, विशेषतः मंद phones वर, आणि चांगले Core Web Vitals म्हणजे कमी उड्या आणि जलद प्रतिसाद.
🚀 पुढे
Lesson 12 मधला deploy cache busting साठी hashed नावांवर अवलंबून असतो आणि खऱ्या वाचकांकडून LCP, INP आणि CLS मोजतो.
🧪 Try it here — फलक काय पाठवतो ते निवडा आणि bytes, 3G वरचे सेकंद, आणि उडी वाचा
फलक अजून उभा आहे का? — unit, component, end-to-end, visual, आणि smoke test.
🧒 सोप्या शब्दांत
वादळानंतर तुम्ही पाहता की notice board अजून उभा आहे का: प्रत्येक notice आहे का, प्रत्येक box ला label आहे का? अनेक छोट्या, जलद तपासण्या प्रत्येक तुकडा वेगळा तपासतात; काही हळू तपासण्या खरा browser वापरून माणसासारखा form भरतात. आपला smoke test code बदलला की प्रत्येक वेळी काही सेकंदात 10 तपासण्या करतो.
📖 नवे शब्दunit test — एक छोटे function वेगळे तपासतो; जलद, म्हणून खूप लिहाcomponent test — नमुना data वापरून एक तुकडा काढतो आणि निकाल तपासतोend-to-end test — robot browser खऱ्या माणसासारखा page वापरतोvisual test — कोणीही न ठरवलेले दिसण्यातले बदल पकडण्यासाठी screenshots ची तुलनाsmoke test — मूलभूत गोष्टी जागेवर आहेत याची जलद तपासणी
⏪ आधी
CSS किंवा HTML मधला छोटा बदल फलक शांतपणे मोडू शकायचा, आणि खऱ्या user ला दिसेपर्यंत कोणाच्याच लक्षात यायचे नाही.
💡 काय
UI testing म्हणजे pyramid: खूप unit tests, काही component tests, थोडे end-to-end tests, आणि visual screenshot diffs.
⚙️ कसे
python3 ui/smoke_test.py सुमारे 25 ओळींत 10 तपासण्या चालवतो, जसे प्रत्येक input ला label आणि प्रत्येक img ला alt text आहे का.
🎯 का
तळाचे जलद tests बहुतेक bugs स्वस्तात पकडतात, आणि वरचे मंद end-to-end tests खरा प्रवाह अजून चालतो हे सिद्ध करतात.
🚀 पुढे
प्रत्येक थर CI मध्ये चालतो (CI/CD school), आणि smoke test lesson 12 मधल्या deploy वर पहारा देतो.
🧪 Try it here — जिवंत फलकावर दहा smoke checks चालवा — काहीतरी मोडल्यानंतर
Board office counter कडून विद्यार्थ्यांची माहिती आणतो, पण कोणते boards आपली उत्तरे वाचू शकतात ते counter ठरवतो; त्या नियमाला CORS म्हणतात. प्रत्येक fetch चे तीन चेहरे काढावे लागतात: 'Loading…', निकाल, किंवा स्पष्ट error. आणि उत्तर कधीच थेट HTML म्हणून चिकटवू नका, नाहीतर एखादे लबाड नाव तुमच्या board वर code चालवू शकते; या हल्ल्याला XSS म्हणतात.
📖 नवे शब्दCORS — कोणत्या websites त्याची उत्तरे वाचू शकतात ते server सांगतोorigin — scheme + host + port, जसे https://board.school.orgloading state — उत्तराची वाट पाहताना page काय दाखवतेXSS — असा हल्ला जिथे कोणाचा तरी मजकूर तुमच्या page वर code म्हणून चालतोtoken — user कोण आहे हे सिद्ध करण्यासाठी page पाठवतो तो pass
⏪ आधी
कोणालाच न समजणाऱ्या CORS error ने fetch अयशस्वी व्हायचा, आणि API मंद झाला की पान गोठायचे किंवा कोरे व्हायचे.
💡 काय
Backends शी बोलणे म्हणजे CORS, browser मधले tokens, loading आणि error states, आणि XSS सुरक्षितपणे हाताळणे.
⚙️ कसे
Browser आधी OPTIONS preflight पाठवू शकतो, आणि Access-Control-Allow-Origin मध्ये फलकाचे नाव असेल तरच पान उत्तर वाचू शकते.
🎯 का
फलक वेगवेगळ्या origins मध्ये चालतो, loading, error आणि यश स्पष्ट दाखवतो, आणि API data ला कधीच script म्हणून चालू देत नाही.
🚀 पुढे
पुढे capstone मध्ये फलक build होतो, CDN वर deploy होतो आणि खऱ्या वाचकांकडून त्यावर लक्ष ठेवले जाते (lesson 12).
🧪 Try it here — CORS साठी origin आणि header निवडा; मग वाईट नाव चिकटवा आणि textContent विरुद्ध innerHTML पहा
Board तयार झाला की तुम्ही त्याच्या प्रती प्रत्येक गावात लावता, म्हणजे जवळच्या वाचकांना तो लवकर दिसतो; याला CDN म्हणतात. प्रत्येक push वर tests चालतात, मग files प्रकाशित होतात, आणि नवीन files ना नवीन नावे मिळतात, म्हणजे कोणीही जुन्या प्रतीत अडकत नाही. मग लक्ष ठेवत राहा: खऱ्या वाचकांचे phones errors आणि board किती लवकर load झाला ते कळवतात.
📖 नवे शब्दdeploy — नवीन version लोकांना वापरता येईल अशा ठिकाणी ठेवणेstatic hosting — चालू ठेवायला server program नसताना साध्या files देणेCDN — वाचकांच्या जवळ, अनेक शहरांत तुमच्या files च्या प्रतीcache busting — नवीन versions ना नवीन file नावे, म्हणजे जुन्या प्रती वापरल्या जात नाहीतmonitoring — errors आणि मंदपणासाठी खऱ्या वापरावर लक्ष ठेवणे
⏪ आधी
फक्त तुमच्या laptop वर चालणारा फलक कोणाच्याच कामाचा नाही, आणि live झाल्यावर वाचकांच्या phones वरचे errors दिसत नाहीत.
💡 काय
Deploy static files GitHub Pages किंवा S3 वर CDN मागे ठेवतो, आणि observe करणे खऱ्या वाचकांकडून errors आणि vitals गोळा करते.
⚙️ कसे
git push CI मध्ये smoke_test.py चालवतो, CDN सह Pages किंवा S3 वर publish करतो, आणि beacon JS errors सह LCP, INP आणि CLS कळवतो.
🎯 का
Static hosting म्हणजे चालू ठेवायला server नाही, आणि खऱ्या वाचकांचे data पुढे नेमके काय दुरुस्त करायचे ते सांगते.
🚀 पुढे
हा capstone Database, API आणि UI schools ला एका live product मध्ये जोडतो, जे CI/CD सुरक्षितपणे पुढे पाठवत राहू शकते.
🧪 Try it here — एक commit मेलरूममधून CDN पर्यंत ढकला — आणि फाइलचे नाव का बदलते ते पहा
