uz
Feedback
ToCode

ToCode

Kanalga Telegramโ€™da oโ€˜tish

ื˜ื™ืคื™ื ืงืฆืจื™ื ืœืžืชื›ื ืชื™ื ืžืืช ื™ื ื•ืŸ ืคืจืง

Ko'proq ko'rsatish
1 419
Obunachilar
Ma'lumot yo'q24 soatlar
Ma'lumot yo'q7 kunlar
+130 kunlar
Postlar arxiv
ToCode
1 419
# ืฉื™ืžื• ืœื‘: ื ื•ื“ ืงื•ืจื ื’ื ืืช ื” gitignore ืฉืœื›ื ื›ืฉืžืคืจืกืžื™ื ื—ื‘ื™ืœื•ืช ื™ืฉื‘ืชื™ ื”ื™ื•ื ืื—ืจ ื”ืฆื”ืจื™ื™ื ืœืคืจืกื ื—ื‘ื™ืœื” ืœืคืจื•ื™ืงื˜. ื‘ื“ืจืš ื›ืœืœ ืื ื™ ืœื ืขื•ื‘ื“ ืื—ืจื™ ื”ืฆื”ืจื™ื™ื ื›ื™ ื”ื™ืœื“ื™ื ืคื”, ืื‘ืœ ื”ื™ื• ื›ืžื” ื“ื‘ืจื™ื ืฉืจืฆื™ืชื™ ืœืกื™ื™ื ื•ื—ืฉื‘ืชื™ ืฉืื ื™ ื™ื›ื•ืœ ืœื ืกื•ืช ืงืฆืช ืžื•ืœื˜ื™ ื˜ืืกืงื™ื ื’. ืžืคื” ืœืฉื ืื ื™ ืžื ืกื” ืœื‘ื ื•ืช ืืช ื”ื—ื‘ื™ืœื” ื•ืœืคื‘ืœืฉ, ื•ื‘ื—ืœื•ืŸ ืื—ืจ ืžืคืขื™ืœ npm install ื›ื“ื™ ืœืจืื•ืช ืฉื–ื” ืขื•ื‘ื“. ื”ื—ื‘ื™ืœื” ืขืฆืžื” ื”ื™ื ืคืจื•ื™ืงื˜ ืฆื“ ืœืงื•ื— ืฉื‘ื ื™ื” ืฉืœื• ืžื™ื™ืฆืจืช ืชื™ืงื™ื” ื‘ืฉื dist, ื•ื‘ื—ืœื•ืŸ ื”ืฉื ื™ ืฉืžืฉืชืžืฉ ื‘ื—ื‘ื™ืœื” ื™ืฉ ืงื•ื“ ืฉืขื•ืฉื” import ืžืื•ืชื” dist. ื‘ืงื™ืฆื•ืจ ื‘ื—ื–ืจื” ืœื‘ื ื™ื” ืžืคืขื™ืœ publish ื‘ื—ืœื•ืŸ ืื—ื“ ื• install ื‘ื—ืœื•ืŸ ื”ืฉื ื™ ื•... ืื™ืŸ dist ื‘ืกืคืจื™ื” ืฉื”ื•ืชืงื ื”. ื ื•, ื‘ื˜ื— ืฉื›ื—ืชื™ ืœื”ืคืขื™ืœ build ื‘ื™ืŸ ื›ืœ ื”ื™ืœื“ื™ื ืฉืงื•ืคืฆื™ื ืคื” ืžืกื‘ื™ื‘. ื ื™ืกื™ื•ืŸ ืฉื ื™ ื‘ื‘ื ื™ื”, ืฉื•ื‘ publish, ืฉื•ื‘ install ื•... dist ืขื“ื™ื™ืŸ ืœื ืฉื. ื‘ืกื•ืคื• ืฉืœ ื“ื‘ืจ ื‘ืจื—ืชื™ ืžื”ื™ืœื“ื™ื ืœืžืงื•ื ืฉืงื˜, ื”ืกืชื›ืœืชื™ ื‘ืฉืงื˜ ื‘ืกืคืจื™ื” ื•ืžืฆืืชื™ ืฉื ืงื•ื‘ืฅ .gitignore ืขื ื”ืฉื•ืจื”:
dist/
ื’ื™ื˜ ืœื•ื’ ื—ืฉืฃ ืฉื”ื™ืชื” ื›ื•ื•ื ื” ื˜ื•ื‘ื” ืžืื—ื•ืจื™ ื”ืฉื•ืจื” ื”ื–ืืช - ืื™ืŸ ืฆื•ืจืš ืœื”ื•ืกื™ืฃ ืืช ื›ืœ ืชื•ืฆืจื™ ื”ื‘ื ื™ื” ืœ git. ืื‘ืœ ื”ื™ื ื‘ืื” ืขื ื‘ืื’: ื‘ืœื™ ืงื•ื‘ืฅ .npmignore ื‘ืชื™ืงื™ื”, ื‘ืื•ืคืŸ ืื•ื˜ื•ืžื˜ื™ npm ื™ืชืขืœื ืžื”ืงื‘ืฆื™ื ื‘ .gitignore ื•ืœื ื™ืคืจืกื ืื•ืชื ืขื ื”ื—ื‘ื™ืœื” ืฉืœื›ื. ื•ื›ืžื• ืชืžื™ื“ ืื—ืจื™ ืฉืžื‘ื™ื ื™ื ืืช ื”ื‘ืขื™ื” ื”ืคื™ืชืจื•ืŸ ื”ื™ื” ืคืฉื•ื˜ ืœื™ืฆื•ืจ ืงื•ื‘ืฅ .npmignore ืจื™ืง, ื•ืœื”ืคืกื™ืง ืœื”ืืฉื™ื ืืช ื”ื™ืœื“ื™ื ื‘ื‘ืื’ื™ื ืฉืœื™...

ToCode
1 419
# ื˜ื™ืค ื˜ื™ื™ืคืกืงืจื™ืคื˜: ื”ืคืงื•ื“ื•ืช Parameters ื• ReturnType ื‘ืขื‘ื•ื“ื” ืขื ื˜ื™ื™ืคืกืงืจื™ืคื˜, ื‘ืžื™ื•ื—ื“ ื‘ืขื‘ื•ื“ื” ืขื ืงื•ื“ ื—ื™ืฆื•ื ื™, ืื ื—ื ื• ื ืชืงืœื™ื ื‘ื—ืชื™ืžื•ืช ืžืกื•ื‘ื›ื•ืช ืฉืœ ืคื•ื ืงืฆื™ื•ืช ื•ืฆืจื™ื›ื™ื ืœื›ืชื•ื‘ ืงื•ื“ ืฉืžืชื™ื™ื—ืก ืืœื™ื”ืŸ - ืœื“ื•ื’ืžื” ืื ื™ ืจื•ืฆื” ืœื›ืชื•ื‘ ืคื•ื ืงืฆื™ื” ืฉืœื™ ืฉืขื•ื˜ืคืช ืคื•ื ืงืฆื™ื” ื—ื™ืฆื•ื ื™ืช. ืขื“ื™ื™ืŸ ื›ืœืœื™ ืžื“ื™? ื‘ื•ืื• ื ื ืกื” ื“ื•ื’ืžื” ืกืคืฆื™ืคื™ืช ืขื ื˜ื™ื™ืคืกืงืจื™ืคื˜ ื•ืจื™ืืงื˜. ืื ื™ ืจื•ืฆื” ืœื›ืชื•ื‘ ืงื•ืžืคื•ื ื ื˜ื” ืฉืžืฆื™ื’ื” ื˜ืงืกื˜, ื•ื’ื ืกื•ืคืจืช ื›ืžื” ืคืขืžื™ื ืฉื™ื ื™ืชื™ ืืช ื”ื˜ืงืกื˜. ื‘ืฉื‘ื™ืœ ื–ื” ื™ื”ื™ื” ืœื™ ื ื•ื— ืœื”ื—ื–ื™ืง ืืช ื”ื˜ืงืกื˜ ื‘ืžืฉืชื ื” ืกื˜ื™ื™ื˜, ืœื”ื—ื–ื™ืง ืžืฉืชื ื” ืกื˜ื™ื™ื˜ ื ื•ืกืฃ ืฉืกื•ืคืจ ื›ืžื” ืคืขืžื™ื ื”ื˜ืงืกื˜ ื”ืฉืชื ื”, ื•ืœื›ืชื•ื‘ ืคื•ืงื ืฆื™ื” ืฉืžืขื“ื›ื ืช ืืช ืฉื ื™ื”ื ื™ื—ื“. ื‘ JavaScript ืจื’ื™ืœ ื”ื™ื™ืชื™ ื™ื›ื•ืœ ืœื›ืชื•ื‘ ืžืฉื”ื• ื›ื–ื”:
function setTextAndCount(stuff) {
    setText(stuff);
    setCount(c => c + 1);
}
ื•ื–ื” ืขื•ื‘ื“ ื™ื•ืคื™ ื•ืžืชืžื•ื“ื“ ืขื ืฉืชื™ ื”ื—ืชื™ืžื•ืช ืฉืœ setText, ื’ื ืื stuff ื”ื•ื ืคื•ื ืงืฆื™ื” ื•ื’ื ืื stuff ื”ื•ื ืขืจืš ืงื‘ื•ืข. ื‘ืชืจื’ื•ื ืœ TypeScript ื”ืคืฉื˜ื•ืช ื”ื•ืœื›ืช ืœืื™ื‘ื•ื“. ืคืชืื•ื ืื ื™ ืฆืจื™ืš ืœืกืคืจ ืœื˜ื™ื™ืคืกืงืจื™ืคื˜ ืžื” ืกื•ื’ ื”ืžืฉืชื ื” ืฉืื ื™ ืฆืจื™ืš ืœืงื‘ืœ, ื•ื‘ืฉื‘ื™ืœ ื–ื” ืฆืจื™ืš ืœื“ืขืช ืžื” ืกื•ื’ ื”ืžืฉืชื ื” ื‘ืกื˜ื™ื™ื˜ ื•ืœื”ื’ื“ื™ืจ Union Type ืฉืžื•ืจื›ื‘ ืžื”ืžืฉืชื ื” ื‘ืกื˜ื™ื™ื˜ ืื• ืžืคื•ื ืงืฆื™ื™ืช ื”ืขื“ื›ื•ืŸ ืฉืœื•. ืœื ื ืขื™ื. ื‘ืžืงื•ื ื–ื” ืื ื™ ื™ื›ื•ืœ ืœื”ืฉืชืžืฉ ื‘ Parameters ื›ื“ื™ ืœืงื‘ืœ ืืช ืจืฉื™ืžืช ื”ืคืจืžื˜ืจื™ื ืฉืœ ืคื•ื ืงืฆื™ื” ืžืกื•ื™ืžืช ื•ืœื”ืฉืชืžืฉ ื‘ื” ื‘ืชื•ืจ ื˜ื™ืคื•ืก. ื•ื‘ืชื•ืจ ื‘ื•ื ื•ืก ืื ื™ ืžืฉืชืžืฉ ื‘ ReturnType ื›ื“ื™ ืœืงื‘ืœ ืืช ืกื•ื’ ืขืจืš ื”ื”ื—ื–ืจ ืฉืœ ืคื•ื ืงืฆื™ื” ืžืกื•ื™ืžืช. ื”ืชืจื’ื•ื ืขื ืฉื ื™ ืืœื” ื ืจืื” ื›ื›ื”:
function setTextAndCount(
  ...args: Parameters<typeof setText>
): ReturnType<typeof setText> {
  setText(...args);
  setCount((c) => c + 1);
}
ื“ื•ื’ืžืช ืงื•ื“ ืžืœืื”? ื‘ื˜ื— ืœืžื” ืœื: https://codesandbox.io/s/restless-night-u4ukmn?file=/src/App.tsx:186-347 <iframe src="https://codesandbox.io/embed/restless-night-u4ukmn?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="restless-night-u4ukmn" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe>

ToCode
1 419
ืื ืืชื ื›ื‘ืจ ืžื ื•ื™ื™ื ืœืืชืจ ืชื•ื›ืœื• ืœื’ืœื•ืฉ ืœืงื•ืจืก ื•ืœื”ืชื—ื™ืœ ื›ื‘ืจ ืœืœืžื•ื“ ื“ื•ืงืจ, ื•ืื ืขื“ื™ื™ืŸ ืœื ืžื ื•ื™ื™ื ืชื•ื›ืœื• ืœื”ืชื—ื™ืœ ืืช ื”ืคืจืง ื”ืจืืฉื•ืŸ ืžื”ืงื•ืจืก ืฉืคืชื•ื— ืœืงื”ืœ ื”ืจื—ื‘ ื•ืื—ืจื™ ื–ื” ืœื”ื™ืจืฉื ื›ืžื ื•ื™ื™ื ื›ื“ื™ ืœื”ืžืฉื™ืš ืืช ื›ื•ืœื•. ืงื™ืฉื•ืจ ืœืงื•ืจืก ื“ื•ืงืจ: https://www.tocode.co.il/bundles/docker ืžืงื•ื•ื” ืฉืชื”ื ื• ืžื”ืงื•ืจืก ื™ื ื•ืŸ

ToCode
1 419
# ืงื•ืจืก Docker ื• Kubernetes ืื—ืจื™ ื™ื•ืชืจ ืžื“ื™ ื–ืžืŸ ื•ื”ืจื‘ื” ื”ืชืœื‘ื˜ื•ื™ื•ืช ืขืœ ื”ืชื›ื ื™ื, ืื ื™ ืฉืžื— ืœื”ืฉื™ืง ื›ืืŸ ืืช ืงื•ืจืก Docker ืฉืœ ื˜ื•ืงื•ื“. ื”ื ื” ืžื” ืฉืชืžืฆืื• ื‘ืคื ื™ื ื•ืงืฆืช ืจื›ื™ืœื•ืช ืžืื—ื•ืจื™ ื”ืงืœืขื™ื. ## ืžื” ื‘ืงื•ืจืก ื‘ 2013 ืกืœื•ืžื•ืŸ ื”ื™ื™ืงืก ืžืกืชื›ืœ ืขืœ ื”ืขื•ืœื ื•ืจื•ืื” ืฉื—ื•ืจ ื‘ืขื™ื ื™ื™ื: ืžืชื›ื ืชื™ื ื ืื‘ืงื™ื ื‘ืžื—ืฉื‘ื™ื ื›ื“ื™ ืœื”ืขื‘ื™ืจ ืืช ื”ืงื•ื“ ืฉืœื”ื ืžืžื›ื•ื ืช ื”ืคื™ืชื•ื— ืœืคืจื•ื“ืงืฉืŸ, ืื ืฉื™ QA ืžืขื‘ื™ืจื™ื ื“ื™ื•ื•ื—ื™ื ืขืœ ื‘ืื’ื™ื ื•ื”ืžืชื›ื ืชื™ื ืคืฉื•ื˜ ื–ื•ืจืงื™ื "ื–ื” ืขื•ื‘ื“ ืืฆืœื™ ืขืœ ื”ืžื—ืฉื‘" ื•ืฉืจืชื™ื ืฉืœื•ืงื— ื ืฆื— ืœืงื ืคื’ ื•ืืฃ ืื—ื“ ืœื ืžืขื– ืœื’ืขืช ื‘ื”ื. ืกืœื•ืžื•ืŸ ื”ื™ื™ืงืก, ืื’ื‘, ื”ื™ื” ื‘ืื•ืชื• ื–ืžืŸ ืžื™ื™ืกื“ ืฉืœ ื—ื‘ืจืช ืขื ืŸ ื‘ืฉื dotCloud, ืฉืื™ืคืฉืจื” ืœืžืชื›ื ืชื™ื ืœื”ืขืœื•ืช ืžืขืจื›ื•ืช ืฉื”ื ื›ืชื‘ื• ืœืขื ืŸ (ืงืฆืช ื›ืžื• ื”ืจื•ืงื• ื”ื•ื•ืชื™ืงื” ืžื”ื). ื”ื™ื™ืงืก ืจืื” ื˜ื•ื‘ ืžืื•ื“ ื›ืžื” ืงืฉื” ืœืžืชื›ื ืชื™ื ืœื”ืขื‘ื™ืจ ืืช ื”ืžืขืจื›ื•ืช ืฉืœื”ื ืœืขื ืŸ ืฉืœ ื“ื•ื˜ืงืœืื•ื“ ื•ื‘ืื•ืชื• ื–ืžืŸ ื”ื•ื ืจืื” ืืช ื”ื™ื›ื•ืœื•ืช ื”ื˜ื›ื ื•ืœื•ื’ื™ื•ืช ืฉืœ ื” Linux Kernel ื•ื”ื‘ื™ืŸ ืฉื”ื•ื ืขืœื” ืขืœ ืกื˜ืืจื˜ ืืค ื—ื“ืฉ. ื”ืžื•ืฆืจ ืฉื”ื™ื™ืงืก ื”ืชื—ื™ืœ ืœืคืชื— ืื– ื•ืžืžืฉื™ืš ืœืคืชื— ืขื“ ื”ื™ื•ื ื ืงืจื Docker. ื“ื•ืงืจ ื”ื•ื ื›ืœื™ ืฉืžืืคืฉืจ ืœื™ ืœืงื—ืช ืžืขืจื›ืช ืฉื›ืชื‘ืชื™, ืœืกื’ื•ืจ ืื•ืชื” ื‘"ืงื•ืคืกื”" ื•ืœื”ืขื‘ื™ืจ ืื•ืชื” ืœืžื›ื•ื ื” ืื—ืจืช. ืžื” ืฉืžื™ื•ื—ื“ ื‘ื“ื•ืงืจ ื–ื” ืฉื”ื•ื ืžืฆืœื™ื— ืœืงื—ืช ืืช ื›ืœ ื”ืงื‘ืฆื™ื ืฉืจืœื•ื•ื ื˜ื™ื™ื ืœืื•ืชื• ื™ื™ืฉื•ื ืฉื›ืชื‘ืชื™ ืœืชื•ืš ื”ืงื•ืคืกื” - ื›ื•ืœืœ ืกืคืจื™ื•ืช ืฉืœ ืžืขืจื›ืช ื”ื”ืคืขืœื”, ื›ืœื™ ืฉื•ืจืช ืคืงื•ื“ื” ืฉื”ืฉืชืžืฉืชื™ ื‘ื”ื, ื•ืืคื™ืœื• ืืช ืžืขืจื›ืช ื”ื”ืคืขืœื” ืขืฆืžื”. ื–ื” ืœื ืžื›ื•ื ื” ื•ื™ืจื˜ื•ืืœื™ืช ื›ื™ ื”ื‘ื™ืฆื•ืขื™ื ื”ื ื›ืžื• ืฉืœ ืชื•ื›ื ื™ืช ืจื’ื™ืœื”, ืื‘ืœ ื–ื” ื”ื›ื™ ืงืจื•ื‘ ืฉื ื’ื™ืข ืžื‘ื—ื™ื ืช ื”ืขื‘ืจื” ืืžื™ื ื” ืฉืœ ืงื•ื“ ื‘ื™ืŸ ืžื›ื•ื ื•ืช. ืงื•ืจืก Docker ืคื” ื‘ืืชืจ ืžื—ื•ืœืง ืœ-4 ืคืจืงื™ื: 1. ื‘ื—ืœืง ื”ืจืืฉื•ืŸ ืœื•ืžื“ื™ื ืื™ืš ืœื”ืฉืชืžืฉ ื‘ื“ื•ืงืจ ืžืฉื•ืจืช ื”ืคืงื•ื“ื” ื•ืื™ืš ืœื”ืฉืชืžืฉ ื‘"ืงื•ืคืกืื•ืช" ืฉืื—ืจื™ื ื™ืฆืจื• ื‘ืฉื‘ื™ืœื ื•. ืชืœืžื“ื• ืขืœ ื”ืžืื’ืจ Dockerhub ื•ืชืจืื• ืื™ืš ืขื ื“ื•ืงืจ ืืคืฉืจ ืœื”ืคืขื™ืœ ื›ืœ ืชื•ื›ื ื” ืฉืื ื—ื ื• ืฆืจื™ื›ื™ื ื•ืžื›ืœ ื’ื™ืจืกื” ื‘ืœื™ ืœื”ืชืงื™ืŸ ืื•ืชื” ื•ื‘ืœื™ ืฉื”ื™ื ืชืชื ื’ืฉ ืขื ื“ื‘ืจื™ื ืฉื›ื‘ืจ ื™ืฉ ืœื™ ืขืœ ื”ืžื—ืฉื‘. 2. ื‘ื—ืœืง ื”ืฉื ื™ ืœื•ืžื“ื™ื ืื™ืš ืœื”ืฉืชืžืฉ ื‘ Docker Compose ื›ื“ื™ ืœื‘ื ื•ืช ืกื‘ื™ื‘ืช ืคื™ืชื•ื— ืžืฉื•ื“ืจื’ืช. ื‘ื’ืœืœ ืฉืœื ื—ื™ื™ื‘ื™ื ื™ื•ืชืจ ืœื”ืชืงื™ืŸ ื“ื‘ืจื™ื ืขืœ ื”ืžื›ื•ื ื” ืฉืœื™, ืื ื—ื ื• ื ืจืื” ืื™ืš ืœื”ืงื™ื ืกื‘ื™ื‘ื•ืช ื‘ืงืœื•ืช ื•ืœืžืฉืœ ืœื”ื•ืกื™ืฃ ื‘ืœื—ื™ืฆืช ื›ืคืชื•ืจ ืฉืจืช Redis, Mongo ืื• ืคื•ืกื˜ื’ืจืก ืœืžืขืจื›ืช ืฉืœื™. 3. ื‘ื—ืœืง ื”ืฉืœื™ืฉื™ ื›ื‘ืจ ืœื•ืงื—ื™ื ืฆืขื“ ืงื“ื™ืžื” ืœื›ื™ื•ื•ืŸ ื”ื—ื™ื™ื ื‘ืขื ืŸ. ืื ื—ื ื• ื ืœืžื“ ืื™ืš ืœื‘ื ื•ืช ืื™ืžื’'ื™ื ื• Dockerfile-ื™ื ืžืฉืœื ื• ื›ื“ื™ ืฉื ื•ื›ืœ ืœืฉืชืฃ ืืช ื”ืขื‘ื•ื“ื” ืฉืœื ื• ืขื ืื—ืจื™ื. 4. ื•ื‘ื—ืœืง ื”ืจื‘ื™ืขื™ ื ืจืื” ืื™ืš ืœื”ืขืœื•ืช ืืช ื›ืœ ืžื” ืฉื›ืชื‘ื ื• ืœืงืœืืกื˜ืจ ืฉืจืชื™ื ื‘ืขื ืŸ ื‘ืืžืฆืขื•ืช ืชื•ื›ื ืช Kubernetes. ืื ืืชื ืžืชื›ื ืชื™ื ืฉืฆืจื™ื›ื™ื ืœืขื‘ื•ื“ ื‘ืกื‘ื™ื‘ื” ืฉื‘ื” ืžืฉืชืžืฉื™ื ื‘ื“ื•ืงืจ - ื”ืงื•ืจืก ื™ื™ืชืŸ ืœื›ื ื”ื‘ื ื” ื˜ื•ื‘ื” ืฉืœ ื“ื•ืงืจ ื•ื›ืœ ื”ื›ืœื™ื ืฉืกื‘ื™ื‘ื• ื•ื™ืœืžื“ ืืชื›ื ืœื”ืฉืชืžืฉ ื‘ืฉื•ืจืช ื”ืคืงื•ื“ื” ื‘ืฆื•ืจื” ื™ืขื™ืœื”. ื‘ืกื™ื•ื ื”ืงื•ืจืก ื›ื‘ืจ ืœื ืชืฆื˜ืจื›ื• ืขื–ืจื” ืžืืฃ ืื—ื“ ื›ืฉืงื•ื ื˜ื™ื™ื ืจ ืœื ืขื•ืœื” ืœื›ื ืื• ื‘ืฉื‘ื™ืœ ืœื›ืชื•ื‘ ืงื•ื‘ืฅ Dockerfile. ืื ืืชื ืขื•ื‘ื“ื™ื ืขืœ ืคืจื•ื™ืงื˜ ืฉืœื›ื ื”ื™ื›ืจื•ืช ืขื ื“ื•ืงืจ ื•ืงื•ื‘ืจื ื˜ื™ืก ืชืืคืฉืจ ืœื›ื ืœืคืชื— ืื•ืชื• ืชื•ืš ืฉื™ืœื•ื‘ ืชื”ืœื™ื›ื™ ืื•ื˜ื•ืžืฆื™ื” ื‘ Deployment ื•ืœื”ื™ื ื•ืช ืžื”ื›ืœื™ื ื”ืžืชืงื“ืžื™ื ื‘ืชืขืฉื™ื” ื‘ื”ืขื‘ืจืช ื”ืงื•ื“ ืœืคืจื•ื“ืงืฉืŸ. ื‘ืกื™ื•ื ื”ืงื•ืจืก ื™ื”ื™ื• ืœื›ื ืชืฉื•ื‘ื•ืช ื˜ื•ื‘ื•ืช ืœืฉืืœื•ืช ื”ื‘ืื•ืช: 1. ืžื” ื–ื” ืื•ืžืจ ืœืจื•ืฅ ื‘ืชื•ืš ืงื•ื ื˜ื™ื™ื ืจ, ืžื” ื”ืžื’ื‘ืœื•ืช ืฉืœ ื”ืงื•ื ื˜ื™ื™ื ืจ. 2. ืื™ืš ืœืขื‘ื•ื“ ืขื Docker ืžืฉื•ืจืช ื”ืคืงื•ื“ื”. 3. ืื™ืš ืœืขื‘ื•ื“ ืขื docker-compose ื‘ืฆื•ืจื” ื™ืขื™ืœื” - ื›ื•ืœืœ ื ื™ื”ื•ืœ ืฉืœ ืžืกืคืจ ืกื‘ื™ื‘ื•ืช ืขื‘ื•ืจ ื‘ื“ื™ืงื•ืช ื•ืขื‘ื•ืจ Staging. 4. ืื™ืš ืœืฉืžื•ืจ ืžื™ื“ืข ืจื’ื™ืฉ ื‘ืืžืฆืขื•ืช Secrets. 5. ืžื” ืงื•ืจื” ื›ืฉืงื•ื ื˜ื™ื™ื ืจ ืขื•ืœื”? ืžื” ื–ื” Entrypoint Script ื•ืžื” ื”ื”ื‘ื“ืœ ื‘ื™ื ื• ืœื‘ื™ืŸ Dockerfile? ืื™ืš ืžื—ื›ื™ื ืฉืกืจื‘ื™ืกื™ื ืžืกื•ื™ืžื™ื ื™ื”ื™ื• ื–ืžื™ื ื™ื ืœืคื ื™ ืฉืงื•ื ื˜ื™ื™ื ืจ ืขื•ืœื”, ื•ืื™ืš ืžืจื™ืฆื™ื ืงื•ื“ ืื™ืชื—ื•ืœ ื‘ืขืœื™ื” ืฉืœ ืงื•ื ื˜ื™ื™ื ืจื™ื 6. ืื™ืš ืงื•ื ื˜ื™ื™ื ืจื™ื ืžืชืงืฉืจื™ื ืื—ื“ ืขื ื”ืฉื ื™ ื•ืขื ื”ืขื•ืœื ื”ื—ื™ืฆื•ืŸ. ## ืžื” ื”ืฉืืจืชื™ ื‘ื—ื•ืฅ ื‘ืขื‘ื•ื“ื” ืขืœ ื”ืงื•ืจืก ื”ืชื—ืœืชื™ ืขื ื—ืœื•ื ืžืื•ื“ ื’ื“ื•ืœ ืœื™ื™ืฆืจ ืงื•ืจืก ืฉืžืœืžื“ ืขื‘ื•ื“ื” ื‘ืกื‘ื™ื‘ืช Micro Services ื•ื‘ืขื ืŸ. ื“ื•ืงืจ ื”ื•ื ื›ืžื•ื‘ืŸ ื›ืœื™ ืขื‘ื•ื“ื” ืžืจื›ื–ื™ ื‘ืกื‘ื™ื‘ื” ื–ื•, ืื‘ืœ ื—ื•ืฅ ืžืžื ื• ื™ืฉ ืขื•ื“ ืื™ื ืกื•ืฃ ื˜ื›ื ื•ืœื•ื’ื™ื•ืช ืฉืื ื—ื ื• ืžืฉืชืžืฉื™ื ื‘ื”ืŸ ื‘ื›ืชื™ื‘ืช ืžื•ืฆืจ ืžื‘ื•ื–ืจ ืžื‘ื•ืกืก Micro Services, ื˜ื›ื ื•ืœื•ื’ื™ื•ืช ื›ืžื• GraphQL, syslog, oauth, Message Queues. ื‘ืžืงื‘ื™ืœ ืื ืฉื™ Devops ื‘ื›ืœ ืืจื’ื•ืŸ ืžื™ื™ืฆืจื™ื ืชื”ืœื™ื›ื™ ืื•ื˜ื•ืžืฆื™ื” ื‘ืืžืฆืขื•ืช ื›ืœื™ CI, ื›ืœื™ื ื›ืžื• Github Actions ืื• Jenkins, ืฉืžื˜ืคืœื™ื ื‘ื›ืœ ื”ืชืฉืชื™ืช ืฉืžืขื‘ื™ืจื” ืงื•ื“ ืžืžื›ื•ื ื” ืœืžื›ื•ื ื”. ื‘ืžื”ืœืš ื”ืขื‘ื•ื“ื” ืขืœ ื”ืงื•ืจืก ื”ื‘ื ืชื™ ืฉืœืงืฉื•ืจ ืืช ื›ืœ ื”ื˜ื›ื ื•ืœื•ื’ื™ื•ืช ื”ืืœื” ืœืงื•ืจืก ืื—ื“, ื‘ืžืงื•ื ืœื”ื•ืกื™ืฃ ืœืงื•ืจืก ืจืง ืคื•ื’ืข ื‘ืœื›ื™ื“ื•ืช ื”ืคื ื™ืžื™ืช ืฉืœื•. ื•ื›ื›ื” ืœืื˜ ืœืื˜ ื”ื•ืจื“ืชื™ ื›ืœ ืคืขื ืขื•ื“ ื ื•ืฉื, ืขื“ ืฉื ืฉืืจืชื™ ืขื ืžื”ืœืš ืคืฉื•ื˜ ื•ื—ืฉื•ื‘ - ืžื“ื•ืงืจ ืœืงื•ื‘ืจื ื˜ื™ืก, ืื• ืžืคื™ืชื•ื— ืœืคืจื•ื“ืงืฉืŸ. ื‘ืชืงื•ืคื” ื”ืงืจื•ื‘ื” ืื ื™ ืžืชื›ื ืŸ ืœื”ืขื‘ื™ืจ ืžืกืคืจ ื•ื•ื‘ื™ื ืจื™ื ืขืœ ืคื™ืชื•ื— ื‘ืกื‘ื™ื‘ืช Micro Services ื•ืขืœ ื”ืงืžืช ืื•ื˜ื•ืžืฆื™ื•ืช. ื›ื‘ืจ ื‘ื—ื•ื“ืฉื™ื ื”ืงืจื•ื‘ื™ื ืžืชื•ื›ื ื ื™ื ื•ื•ื‘ื™ื ืจื™ื ืขืœ RabbitMQ ื•ืขืœ Auth0, ื•ื‘ืจื‘ืขื•ืŸ ื”ื‘ื ืื ื™ ืžืชื›ื ืŸ ืœืฉืœื‘ ื•ื•ื‘ื™ื ืจ ืขืœ Github Actions ื•ื”ืงืžืช ืื•ื˜ื•ืžืฆื™ื” ืฉืœ Deployment ื‘ืืžืฆืขื•ืชื•. ืื ืชื”ื™ื” ื”ืชืขื ื™ื™ื ื•ืช ืื•ืœื™ ืืจื—ื™ื‘ ื—ืœืง ืžื”ื ื•ืฉืื™ื ื”ืื—ืจื™ื ืœืงื•ืจืกื™ื ืžืฉืœื”ื.

ToCode
1 419
# ื˜ื™ืค ื“ื•ืงืจ: ืกื“ืจ ืคืขื•ืœื•ืช ื‘ Dockerfile ืงื•ื‘ืฅ ื” Dockerfile ื”ื‘ื ืžื’ื“ื™ืจ ื‘ื ื™ื” ืฉืœ ืืคืœื™ืงืฆื™ื™ืช Rails ืฉื’ื ืžื›ื™ืœื” ืงื•ื“ ืฆื“ ืœืงื•ื—, ืฉื‘ืชื•ืจื• ืžืชืงืžืคืœ ืขื node.js:
FROM ruby:2.7

WORKDIR /app
COPY . .

ENV RAILS_ENV=production
ENV NODE_ENV=production

RUN gem install bundler:2.2.5
RUN sh -c "apt-get update && apt-get install -y nodejs npm"

RUN bundle install

RUN sh -c "cd client; npm install"
RUN "./bin/rails assets:precompile"

CMD ["./bin/rails", "s"]
ืจื•ืื™ื ืžื” ื”ื‘ืขื™ื” ื›ืืŸ? ## ืกื“ืจ ืคืขื•ืœื•ืช ื•ืฉื›ื‘ื•ืช ื”ืคืงื•ื“ื•ืช RUN, COPY ื• ADD ืฉืœ ื“ื•ืงืจ ื™ื•ืฆืจื•ืช ื›ืœ ืื—ืช ืฉื™ื›ื‘ื” ื—ื“ืฉื”. ื‘ืจื’ืข ืฉื“ื•ืงืจ ืžืกื™ื™ื ืœื™ืฆื•ืจ ืฉื›ื‘ื” ื”ื•ื ืฉื•ืžืจ ืื•ืชื” ื‘ Cache, ื•ื›ืฉืžืคืขื™ืœื™ื ืคืขื ื ื•ืกืคืช build ื“ื•ืงืจ ื™ื•ื›ืœ ืœื”ืฉืชืžืฉ ื‘ืขื•ืชืง ื”ืฉืžื•ืจ - ื‘ืชื ืื™ ืฉืœื ื”ื™ื” ืฉื™ื ื•ื™ ื‘ืฉื™ื›ื‘ื” ืื• ื‘ืฉื›ื‘ื•ืช ืฉืžืขืœื™ื”. ื‘ืงื•ื“ ื”ื“ื•ื’ืžื” ื”ืคืขื•ืœื”:
COPY . .
ื™ื•ืฆืจืช ืฉื™ื›ื‘ื” ื—ื“ืฉื”, ืื‘ืœ ื–ื• ืฉื™ื›ื‘ื” ืžืื•ื“ ืœื ื™ืฆื™ื‘ื”. ื›ืœ ืฉื™ื ื•ื™ ื”ื›ื™ ืงื˜ืŸ ื‘ืงื•ื‘ืฅ ื‘ืชื™ืงื™ื™ืช ื”ืคืจื•ื™ืงื˜ ื™ื’ืจื•ื ืœ Cache ืœื”ื™ื•ืช ืœื ืจืœื•ื•ื ื˜ื™, ื•ืœื“ื•ืงืจ ืœื–ืจื•ืง ืืช ื”ืฉื™ื›ื‘ื” ื•ืืช ื›ืœ ื”ืฉื›ื‘ื•ืช ืฉื”ื•ื ื‘ื ื” ืžืขืœื™ื”, ื•ืœื™ืฆื•ืจ ืืช ื”ื›ืœ ืžื—ื“ืฉ. ื–ื” ืื•ืžืจ ืฉืขื ืงื•ื‘ืฅ Dockerfile ื›ื–ื” ืืชื ืชืฆื˜ืจื›ื• ืœื—ื›ื•ืช ื”ืจื‘ื” ื–ืžืŸ ื›ืœ ืคืขื ืฉื‘ื•ื ื™ื ืžื—ื“ืฉ ืืช ื”ืคืจื•ื™ืงื˜. ืชื™ืงื•ืŸ ืžืื•ื“ ืงืœ ืœื‘ืขื™ื” ื™ื”ื™ื” ืœืฉื ื•ืช ืืช ืกื“ืจ ื”ืคืขื•ืœื•ืช ื›ืš ืฉื›ืœ ืฉื™ื›ื‘ื” ืชื™ื•ื•ืฆืจ ื”ื›ื™ ืžืื•ื—ืจ ืฉืจืง ืืคืฉืจ. ื–ื” ื™ืจืื” ื›ืš:
FROM ruby:2.7

WORKDIR /app

ENV RAILS_ENV=production
ENV NODE_ENV=production

RUN gem install bundler:2.2.5
RUN sh -c "apt-get update && apt-get install -y nodejs npm"

COPY . .
RUN bundle install

RUN sh -c "cd client; npm install"
RUN "./bin/rails assets:precompile"

CMD ["./bin/rails", "s"]
ื”ืขืœื™ืชื™ ืœืžืขืœื” ืืช ืฉืชื™ ืคืงื•ื“ื•ืช ื” RUN ื”ื›ืœืœื™ื•ืช ื™ื•ืชืจ (ื”ืชืงื ืช bundler ื•ื”ืชืงื ืช node ื• npm), ื›ืš ืฉื”ืŸ ื ืžืฆืื•ืช ืขื›ืฉื™ื• ืžืขืœ ื” COPY. ืžื›ืืŸ ื“ื•ืงืจ ื™ื•ื›ืœ ืœืฉืžื•ืจ ื‘ Cache ืืช ื”ืžื›ื•ื ื” ืื—ืจื™ ื”ืชืงื ืช bundler, node ื• npm, ื•ืœื”ืชืงื™ืŸ ืจืง ืืช ื”ืคืจื•ื™ืงื˜ ืฉืœื™ ื›ืœ ืคืขื ืฉืžืฉื”ื• ืžืฉืชื ื”.

ToCode
1 419
# ืฉืœื•ืฉ ืกื™ื‘ื•ืช ืœืžื” ืœื ื›ื“ืื™ ืœื”ื›ืจื™ื— ืคืจื™ื™ืžื•ื•ืจืงืก ืœืขื‘ื•ื“ ื›ืžื• ืฉืืชื ืจื•ืฆื™ื ื›ืฉืจื™ื™ืœืก ื”ืชื—ื™ืœ ืœืฆื‘ื•ืจ ืชืื•ืฆื” ื”ืจื‘ื” ื“ื™ื‘ืจื• ืขืœ ื›ืžื” ื”ืคืจื™ื™ืžื•ื•ืจืง ื˜ื•ื‘ ืื ืืชื” ืขื•ื‘ื“ ื›ืžื• ืฉืจื™ื™ืœืก ื”ืชื›ื•ื•ื ื• ืฉืชืขื‘ื•ื“, ื•ื›ืžื” ืืชื” ื”ื•ืœืš ืœืกื‘ื•ืœ ืื ืฉื™ื˜ืช ื”ืขื‘ื•ื“ื” ืฉืœื• ืฉื•ื ื”. ืœื™ืžื™ื, ืจื™ื™ืœืก ืื›ืŸ ื”ืคืš ื’ืžื™ืฉ ื™ื•ืชืจ, ืื‘ืœ ื”ื›ืœืœ ื”ื™ืฉืŸ ืชืงืฃ ืขื“ื™ื™ืŸ ื•ื‘ื›ืœ ืคืจื™ื™ืžื•ื•ืจืง ืฉื ืœืžื“: ืื ืžืฆืืช ื˜ืจื™ืง ืžืชื•ื—ื›ื ืœื’ืจื•ื ืœืคืจื™ื™ืžื•ื•ืจืง ืœื”ืชื ื”ื’ ืื—ืจืช ืžืžื” ืฉื›ื•ืชื‘ื™ื• ื”ืชื›ื•ื•ื ื•, ืื•ืœื™ ืขื“ื™ืฃ ืœืื—ืกืŸ ืืช ื”ื˜ืจื™ืง ื”ื–ื” ื‘ืžื’ื™ืจื” ื•ืœืžืฆื•ื ื“ืจืš ืื—ืจืช (ืื• ืคืจื™ื™ืžื•ื•ืจืง ืื—ืจ). ืืœื” ื”ืกื™ื‘ื•ืช ืฉื‘ื’ืœืœืŸ ืื ื™ ืžืขื“ื™ืฃ ืœื ืœื”ื›ืจื™ื— ืคืจื™ื™ืžื•ื•ืจืงืก ืœืขื‘ื•ื“ ื›ืžื• ืฉืื ื™ ืจื•ืฆื”: 1. ืื™ืŸ ืื—ืจื™ื•ืช (ืื• ื™ื•ืชืจ ื ื›ื•ืŸ ืื™ืŸ ืขื–ืจื” ืžื’ื•ื’ืœ) - ืžืจื’ืข ืฉื”ืชื—ืœื ื• ืœืฉื‘ื•ืจ ืืช ื”ืคืจื™ื™ืžื•ื•ืจืง ื›ื“ื™ ืœื”ืชืื™ื ืื•ืชื• ืœืฆืจื›ื™ื ืฉืœื ื•, ื™ื”ื™ื” ืงืฉื” ืžืื•ื“ ืœื”ื™ืขื–ืจ ื‘ื’ื•ื’ืœ ื›ื“ื™ ืœืžืฆื•ื ื•ืœืชืงืŸ ื‘ืื’ื™ื. ื” Use Case ืฉืœื ื• ื™ื”ื™ื” ืฉื•ื ื” ื•ืื™ ืืคืฉืจ ืœื“ืขืช ืื™ื–ื” ื‘ืื’ื™ื ื”ื’ื™ืขื• ื‘ื’ืœืœ ื”ืฉื™ื ื•ื™ ืฉืœื ื•, ืื™ื–ื” ื‘ืื’ื™ื ื ื•ื‘ืขื™ื ื‘ืืžืช ืžื˜ืขื•ื™ื•ืช ื•ืฉื™ืžื•ืฉ ืœื ื ื›ื•ืŸ, ื•ืื™ื–ื” ื‘ืื’ื™ื ื‘ืืžืช ืงื™ื™ืžื™ื ื‘ืคืจื™ื™ืžื•ื•ืจืง ื‘ืœื™ ืงืฉืจ ืืœื™ื ื•. 2. ืžื—ืจ ื–ื” ื™ื™ืฉื‘ืจ - ืื ืื ื™ ืžืฉื ื” ืคืจื™ื™ืžื•ื•ืจืง ืœืขื‘ื•ื“ ื›ืžื• ืฉืื ื™ ืจื•ืฆื” ื”ื™ื•ื, ืืฃ ืื—ื“ ืœื ืžื‘ื˜ื™ื— ืœื™ ืฉื‘ื’ื™ืจืกื” ื”ื‘ืื” ืฉืœ ื”ืคืจื™ื™ืžื•ื•ืจืง ื”ื—ืจื™ืฅ ื“ืจื›ื• ื”ื›ื ืกืชื™ ืืช ื”ืฉื™ื ื•ื™ ืฉืœื™ ืขื“ื™ื™ืŸ ื™ื”ื™ื” ืฉื. ืงื•ื“ ืฉืžื™ื™ืฆืจ ืกื›ื ื” ืฉื‘ื’ืœืœื• ืื™ ืืคืฉืจ ื™ื”ื™ื” ืœืฉื“ืจื’ ื’ื™ืจืกื” ื–ื” ืงื•ื“ ืžืกื•ื›ืŸ. 3. ื”ืžื ื’ื ื•ืŸ ื”ื—ื“ืฉ ืฉืœื™ ืœื ื™ื”ื™ื” ืขืงื‘ื™ ืขื ืžื ื’ื ื•ื ื™ื ืื—ืจื™ื ืงื™ื™ืžื™ื ืฉืœ ื”ืคืจื™ื™ืžื•ื•ืจืง, ื•ืœืคืขืžื™ื ื™ืฉื‘ื•ืจ ืื•ืชื. ืจืง ื‘ื’ืœืœ ืฉืื ื™ ื—ื•ืฉื‘ ืฉืžื ื’ื ื•ืŸ ืžืกื•ื™ื ืฆืจื™ืš ืœืขื‘ื•ื“ ื‘ืคืจื™ื™ืžื•ื•ืจืง ืœื ืื•ืžืจ ืฉื”ื•ื ื‘ืืžืช ืขื•ื‘ื“ ืื• ืฉื“ื‘ืจื™ื ืฆืจื™ื›ื™ื ืœื”ื™ื•ืช ืงืœื™ื ื›ืžื• ืฉื ื“ืžื” ืœื™. ื›ืฉืื ื™ ื‘ื•ื ื” ืคื™ืฆ'ืจ ื•ืžืจื’ื™ืฉ ืฉื”ื›ืœื™ื ืขื•ื‘ื“ื™ื ื ื’ื“ื™, ื›ื“ืื™ ืœืงื—ืช ืืช ื”ืจืžื– - ืื• ืœื”ื‘ื™ืŸ ืื™ืš ืœื”ืฉืชืžืฉ ื‘ื›ืœื™ ื‘ืฆื•ืจื” ื ื›ื•ื ื”, ืื• ืœื”ื—ืœื™ืฃ ืืช ื”ื›ืœื™.

ToCode
1 419
# ื”ื™ื•ื ืœืžื“ืชื™: ื”ืกืœืงื˜ื•ืจ focus-within ืกืœืงื˜ื•ืจ ืžืื•ื“ ืฉื™ืžื•ืฉื™ ื‘ CSS ืฉื’ื™ืœื™ืชื™ ืจืง ืœืื—ืจื•ื ื” ื”ื•ื :focus-within. ื”ื•ื ืžืืคืฉืจ ืœื–ื”ื•ืช ืžืชื™ ืคื•ืงื•ืก ื ืžืฆื ืขืœ ืืœืžื ื˜ ืื• ืขืœ ืื—ื“ ื”ื™ืœื“ื™ื ืฉืœื•. ื•ืœืžื” ื–ื” ื˜ื•ื‘? ื ื ื™ื— ืฉืื ื—ื ื• ื‘ื•ื ื™ื ืงื•ืžืคื•ื ื ื˜ื” ืžื•ืจื›ื‘ืช ื‘ HTML/CSS. ื‘ื•ืื• ื ื’ื™ื“ ืฉื–ื• ืชื™ื‘ืช ื˜ืงืกื˜ ืœื‘ื—ื™ืจืช ืชื’ื™ื•ืช, ืฉื›ืฉืœื•ื—ืฆื™ื ืขืœ ื”ืชื™ื‘ื” ืžื•ืคื™ืขื” ืจืฉื™ืžื” ืฉืœ ื›ืœ ื”ืชื’ื™ื•ืช ืœื‘ื—ื™ืจื”. ืžื‘ื—ื™ื ืช ื”ืคื•ืงื•ืก, ืœื—ื™ืฆื” ืขืœ ืชื™ื‘ืช ื”ื˜ืงืกื˜ ื ื•ืชื ืช ืœื” ืืช ื”ืคื•ืงื•ืก, ื•ืื—ืจื™ ื–ื” ืœื—ื™ืฆื” ืขืœ ื›ืœ ืื—ื“ ืžื”ืคืจื™ื˜ื™ื ืžืขื‘ื™ืจื” ืืช ื”ืคื•ืงื•ืก ืœืคืจื™ื˜ ืฉื ืœื—ืฅ. ืื ืชื™ื‘ืช ื”ื˜ืงืกื˜ ื•ืจืฉื™ืžืช ื”ืคืจื™ื˜ื™ื ื ืžืฆืื™ื ื‘ืชื•ืš ืื•ืชื• div, ืื– ืื ื™ ื™ื›ื•ืœ ืœื”ืฉืชืžืฉ ื‘ focus-within ืขืœ ื”ื“ื™ื‘ ื”ืขื•ื˜ืฃ ื”ืจืืฉื™ ื›ื“ื™ ืœื”ื—ืœื™ื˜ ืื ืœื”ืฆื™ื’ ืื• ืœื”ืกืชื™ืจ ืืช ืจืฉื™ืžืช ื”ืืคืฉืจื•ื™ื•ืช. ื‘ืงื•ื“ ื” HTML ื™ืจืื” ื›ืš:
<div class="multiselect">
  <label>
      Click To Select:
      <input type="text" />
  </label>

  <ul>
    <li><label tabindex="0"><input type="checkbox" />item 1</label></li>
    <li><label tabindex="0"><input type="checkbox" />item 2</label></li>
    <li><label tabindex="0"><input type="checkbox" />item 3</label></li>
    <li><label tabindex="0"><input type="checkbox" />item 4</label></li>
    <li><label tabindex="0"><input type="checkbox" />item 5</label></li>
  </ul>
</div>

<div class="multiselect">
  <label>
      Click To Select:
      <input type="text" />
  </label>

  <ul>
    <li><label tabindex="0"><input type="checkbox" />item 1</label></li>
    <li><label tabindex="0"><input type="checkbox" />item 2</label></li>
    <li><label tabindex="0"><input type="checkbox" />item 3</label></li>
    <li><label tabindex="0"><input type="checkbox" />item 4</label></li>
    <li><label tabindex="0"><input type="checkbox" />item 5</label></li>
  </ul>
</div>

<div class="multiselect">
  <label>
      Click To Select:
      <input type="text" />
  </label>

  <ul>
    <li><label tabindex="0"><input type="checkbox" />item 1</label></li>
    <li><label tabindex="0"><input type="checkbox" />item 2</label></li>
    <li><label tabindex="0"><input type="checkbox" />item 3</label></li>
    <li><label tabindex="0"><input type="checkbox" />item 4</label></li>
    <li><label tabindex="0"><input type="checkbox" />item 5</label></li>
  </ul>
</div>
ื•ื” CSS ื™ื”ื™ื”:
.multiselect:focus-within {
  background: lightblue;
}

.multiselect ul {
  display: none;
}

.multiselect label {
  display: block;
  width: 100%;
}

.multiselect:focus-within ul {
  display: block;
}
ื•ื”ืชื•ืฆืื” live ื‘ืงื•ื“ืคืŸ ื”ื™ื: <iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/ynonp/embed/xxpKyze?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/ynonp/pen/xxpKyze"> Untitled</a> by Ynon Perek (<a href="https://codepen.io/ynonp">@ynonp</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ื ืกื• ืœืœื—ื•ืฅ ืขืœ ืชื™ื‘ื” ื›ื“ื™ ืœืจืื•ืช ืจืฉื™ืžืช ืืคืฉืจื•ื™ื•ืช ืฉืžื•ืคื™ืขื” ืžืชื—ืชื™ื”, ื•ืื– ืกืžื ื• ื—ืœืง ืžื”ืืคืฉืจื•ื™ื•ืช ื•ืชืจืื• ืฉื”ืจืฉื™ืžื” ืขื“ื™ื™ืŸ ืžื•ืฆื’ืช.

ToCode
1 419
# ื‘ืขื•ืœื ื”ืืžื™ืชื™ ื ื ื™ื— ืฉื™ืฉ ืœื›ื ืฉืชื™ ืจืฉื™ืžื•ืช ืžืžื•ื™ื ื•ืช ื‘ืคื™ื™ืชื•ืŸ ื•ืืชื ืฆืจื™ื›ื™ื ืœื™ื™ืฆืจ ืžื”ืŸ ืจืฉื™ืžื” ืฉืœื™ืฉื™ืช ืฉืชื”ื™ื” ืžืžื•ื™ื ืช ื’ื ื”ื™ื. ื›ืœื•ืžืจ ื‘ื”ื™ื ืชืŸ:
a = [10, 20, 33, 51, 94, 100]
b = [2, 3, 99, 102, 500]
ืฆืจื™ืš ืœื”ื“ืคื™ืก ืืช ื”ืจืฉื™ืžื”:
[2, 3, 10, 20, 33, 51, 94, 99, 100, 102, 500]
ื ื•, ืžื” ื”ื‘ืขื™ื” ืืชื ืื•ืžืจื™ื, ืื ื—ื ื• ื‘ืคื™ื™ืชื•ืŸ, ืื– ืืคืฉืจ ืœื›ืชื•ื‘ ืคืฉื•ื˜:
def test1():
    return sorted([*a, *b])
ื•ื–ื” ืขื•ื‘ื“ ืขื“ ืฉืื™ื–ื” ืงื•ืœ ื‘ืจืืฉ ืžืชื—ื™ืœ ืœื ื’'ืก ืฉืžื” ืคืชืื•ื ืื ื™ ืžื—ื‘ืจ ืืช ืฉืชื™ ื”ืจืฉื™ืžื•ืช ื•ืžืžื™ื™ืŸ ืืช ื”ืชื•ืฆืื” ื›ืฉืฉืชื™ ื”ืจืฉื™ืžื•ืช ื”ื’ื™ืขื• ืžืžื•ื™ื ื•ืช, ื•ืœืžื” ืœื ืœื”ืชืืžืฅ ืงืฆืช ื•ืœืจื•ืฅ ื‘ืžืงื‘ื™ืœ ืขืœ ืฉืชื™ ื”ืจืฉื™ืžื•ืช ืœืคื™ ืกื“ืจ ื”ืžื™ื•ืŸ, ื›ืœื•ืžืจ ืžืฉื”ื• ื›ื–ื”:
def test2():
    i = 0
    j = 0
    output = []
    while True:
        if i >= len(a):
            output.extend(b[j:])
            break

        if j >= len(b):
            output.extend(a[i:])
            break

        next_a = a[i]
        next_b = b[j]

        if next_a < next_b:
            i += 1
            output.append(next_a)
        else:
            j += 1
            output.append(next_b)

    return output
ื•ืื– ื‘ื“ื™ื•ืง ื›ืฉืื ื™ ืขืฃ ืขืœ ืขืฆืžื™ ืขืœ ื”ืคื™ืชืจื•ืŸ ื”ืžืชื•ื—ื›ื ืฉื›ืชื‘ืชื™ ื•ืื™ื–ื” ืžืชื›ื ืช ืขืœ ืžื”ื—ืœืœ ืื ื™ ืฉื™ื•ื“ืข ืœืจื•ืฅ ื‘ืœื•ืœืื” ืขืœ ืฉืชื™ ืจืฉื™ืžื•ืช ื‘ืžืงื‘ื™ืœ, ืื ื™ ืจื•ืฆื” ืœืงื—ืช ืืช ื–ื” ืขื•ื“ ืฆืขื“ ืงื“ื™ืžื” ื•ืžื—ืœื™ื˜ ืœืžื“ื•ื“ ื‘ื™ืฆื•ืขื™ื ืจืง ื‘ืฉื‘ื™ืœ ืœืจืื•ืช ื›ืžื” ื–ืžืŸ ืžืขื‘ื“ ื”ืขื‘ื•ื“ื” ืฉืœื™ ื—ืกื›ื”. ื•ื ื• ืื ื—ื ื• ื‘ืคื™ื™ืชื•ืŸ ืื– ื’ื ืืช ื–ื” ืืคืฉืจ ื‘ืงืœื•ืช:
print("Short solution took - ", timeit.timeit("test1()", globals=locals()))
print("Long smart solution tool - ", timeit.timeit("test2()", globals=locals()))
ื•ื”ืชื•ืฆืื” ื”ืœื ืžืžืฉ ืžืคืชื™ืขื”:
Short solution took -  0.26264833300956525
Long smart solution tool -  1.3138192089973018
ื™ืฉ ื”ืจื‘ื” ืกื™ื‘ื•ืช ืฉื”ืงื•ื“ ื”ืฉื ื™ ืžืคืฉืœ, ืื‘ืœ ื”ืŸ ืœื ื”ืขื™ืงืจ ื›ืืŸ. ื™ื•ืชืจ ื—ืฉื•ื‘ ืœืฉื™ื ืœื‘ ืฉื‘ื™ืฆื•ืขื™ื ื–ื” ืœื ืขื ื™ื™ืŸ ืฉืœ ืื™ื ื˜ื•ืื™ืฆื™ื” ื•ืžื” ื ืจืื” ืœื™ ื™ื•ืชืจ ืžื•ืฆืœื—. ื‘ืžืงื•ื ืœื‘ื–ื‘ื– ืืช ื”ื–ืžืŸ ืขืœ ืคื™ืชืจื•ื ื•ืช ืžืชื•ื—ื›ืžื™ื, ืขื“ื™ืฃ ืœื•ื•ื“ื ืงื•ื“ื ืฉื‘ืืžืช ื™ืฉ ื‘ืขื™ื”, ื•ื‘ื›ืœ ืžืงืจื” ืœืขืฉื•ืช ืงื•ืžื™ื˜ ืจืง ืื—ืจื™ ืฉืืชื ื‘ื˜ื•ื—ื™ื ืฉื”ืคื™ืชืจื•ืŸ ื”ืžืชื•ื—ื›ื ืžืฉืคืจ ืืช ื”ืžืฆื‘.

ToCode
1 419
# ื‘ื•ื ื ื ืกื” ื•ื ืจืื” ืžื” ื™ืงืจื” ืœืคืขืžื™ื ืื ื—ื ื• ื™ื•ืฉื‘ื™ื ืžื•ืœ ื‘ืขื™ื” ื•ืœื ื‘ื˜ื•ื—ื™ื ืžืกืคื™ืง ืœื’ื‘ื™ ื”ื˜ื›ื ื•ืœื•ื’ื™ื” ืื• ื”ืคืจื˜ื™ื ื”ื˜ื›ื ื™ื™ื ืฉืœื”. ื‘ืžืฆื‘ื™ื ื›ืืœื” ืื ื—ื ื• ืขืฉื•ื™ื™ื ืœื”ื’ื™ื“ ืžืฉื”ื• ื›ืžื• "ื‘ื•ืื• ื ื ืกื” ื•ื ืจืื” ืžื” ื™ืงืจื”". ื‘ืชื™ืื•ืจื™ื” ืื™ืŸ ื‘ื–ื” ืฉื•ื ืกื™ื›ื•ืŸ... ื‘ืžืฆื™ืื•ืช, ืื ื›ื‘ืจ ื”ื—ืœื˜ื ื• ืœื ืกื•ืช ืžืฉื”ื• ืงืฉื” ืœื ื• ืœื”ื•ื“ื•ืช ื‘ื›ื™ืฉืœื•ืŸ, ื•ืื ื“ื‘ืจื™ื ื™ืกืชื‘ื›ื• ื™ืฉ ืกื™ื›ื•ื™ ืœื ืจืข ืฉื ื‘ื–ื‘ื– ืขืœ ื–ื” ื™ื•ืชืจ ื–ืžืŸ ืžืžื” ืฉืชื›ื ื ื• ื‘ื”ืชื—ืœื” ืœืคื ื™ ืฉื ื•ื•ืชืจ. ื•ื–ื” ืขื“ื™ื™ืŸ ื”ืชืจื—ื™ืฉ ื”ื˜ื•ื‘. ื‘ืชืจื—ื™ืฉ ื”ื™ื•ืชืจ ื’ืจื•ืข ื”ื ื™ืกื•ื™ ื”ืฆืœื™ื—, ื•ืื– ื™ืฉ ืœื ื• ื‘ืขื™ื” ื—ื“ืฉื” - ื”ืื ืœื”ืฉืชืžืฉ ื‘ื“ื‘ืจ ืฉื‘ื ื™ื ื•, ืœืžืจื•ืช ืฉื”ืชื—ืœื ื• ืœื‘ื ื•ืช ืื•ืชื• ื‘ืœื™ ื”ื‘ื ื” ืžืœืื” ืฉืœ ื”ื˜ื›ื ื•ืœื•ื’ื™ื” ื•ืื•ืœื™ ื™ืฉ ื‘ื• ื‘ืขื™ื•ืช ืฉืื ื—ื ื• ืขื“ื™ื™ืŸ ืœื ืžื•ื“ืขื™ื ืืœื™ื”ืŸ. ื‘ืžืงื•ื ื–ื” ืขื“ื™ืฃ ืœืชื—ื•ื ืืช ื”ื ื™ืกื•ื™ ื•ืœื”ืคืจื™ื“ ื‘ื™ื ื• ืœื‘ื™ืŸ ืขื‘ื•ื“ื” ืืžื™ืชื™ืช. "ื–ื” ื™ื™ืงื— ืœื™ ืฉื‘ื•ืข ืœืœืžื•ื“ ืœืขื•ืžืง ืืช ื”ื›ืœื™, ื•ืื– ืขื•ื“ ื™ื•ืžื™ื™ื ืœื‘ื ื•ืช ืคื™ืชืจื•ืŸ" ื–ื• ื’ื™ืฉื” ื”ืจื‘ื” ื™ื•ืชืจ ื‘ืจื™ืื”. ืืช ื”ืฉื‘ื•ืข ื ื—ืœืง ืœื‘ืœื•ืงื™ื ืฉืœ ื™ื•ืžื™ื™ื, ื•ื›ืœ ืชื—ื™ืœืช ื‘ืœื•ืง ื ืชื—ื™ืœ ืืช ื”ืคืจื•ื™ืงื˜ ืžื—ื“ืฉ ื‘ื’ื™ืฉื” ืงืฆืช ืื—ืจืช. ื‘ื‘ืœื•ืง ื”ืื—ืจื•ืŸ ื›ื‘ืจ ื ื”ื™ื” ืžืกืคื™ืง ืžื™ื•ืžื ื™ื ื›ื“ื™ ืœื‘ื ื•ืช ืืช ื”ืงื•ื“ ื ื›ื•ืŸ ืžื”ืฉื•ืจื” ื”ืจืืฉื•ื ื”.

ToCode
1 419
# ื”ืœื™ืžื•ื“ ื”ื›ื•ืื‘ ื™ืฉ ืฉื ื™ ืกื•ื’ื™ื ืžืจื›ื–ื™ื™ื ืฉืœ ืœื™ืžื•ื“- 1. ื”ืœื™ืžื•ื“ ื”ืงืœ ื–ื” ื›ืฉืืชื” ืœื•ืžื“ ืžืฉื”ื• ืฉืงื•ื“ื ืœื ื™ื“ืขืช. ืœื“ื•ื’ืžื” ื”ื™ื•ื ืœืžื“ืชื™ ืฉ"ื™ืขื”" ื‘ืจื•ืกื™ืช ื–ื” "ืกืื‘ื•ืง". ื”ื ื” ืขื›ืฉื™ื• ื’ื ืืชื ื™ื•ื“ืขื™ื ืืช ื–ื”. 2. ื”ืœื™ืžื•ื“ ื”ืงืฉื” ื–ื” ื›ืฉืืชื” ืœื•ืžื“ ืžืฉื”ื• ื—ื“ืฉ ืฉืฆืจื™ืš ืœื”ื—ืœื™ืฃ ื™ื“ืข ืงื™ื™ื. ืœื™ ื–ื” ืงืจื” ืœื“ื•ื’ืžื” ื›ืฉื’ื™ืœื™ืชื™ ืฉื™ืฉ ื”ื’ื‘ืœื” ืขืœ ื’ื•ื“ืœ ืžืกืžืš ื‘ MongoDB. ื‘ืจื’ืข ืื—ื“ ื”ื‘ื ืชื™ ืฉืื•ืœื™ ื™ืฉ ื‘ืขื™ื” ื‘ื›ืœ ื”ืงื•ื“ ืฉื›ืชื‘ืชื™ ืฉืžืชืงืฉืจ ืขื MongoDB ื‘ื›ืœ ืคืจื•ื™ืงื˜ ืฉืื™ ืคืขื ื›ืชื‘ืชื™. ืœื ืจืฆื™ืชื™ ืœืงื‘ืœ ืืช ื–ื”. ื“ื•ื’ืžื” ื™ื•ืชืจ ืงืฉื” ื”ื™ืชื” ื›ืฉื™ื•ืชืจ ื•ื™ื•ืชืจ ืœืงื•ื—ื•ืช ืฉืœื™ ืขื‘ืจื• ืž perl ืœ Python. ื–ื” ืœืงื— ืœื™ ืฉื ืชื™ื™ื ืœื”ื‘ื™ืŸ ืฉืื ืฉื™ื ืžืขื“ื™ืคื™ื Python ืขืœ ืคื ื™ perl. ื–ื” ืœืงื— ืœื™ ืขื•ื“ ืฉื ืชื™ื™ื ืื—ืจื™ ื–ื” ืœื”ืชื—ื™ืœ ืœื”ืขื“ื™ืฃ ื‘ืขืฆืžื™ ืืช ืคื™ื™ืชื•ืŸ ืขืœ ืคื ื™ ืคืจืœ. 90% ืžื”ื–ืžืŸ ืœื ื”ื•ืฉืงืข ื‘ืœื™ืžื•ื“ ืคื™ื™ืชื•ืŸ ืืœื ื‘ื ื™ืกื™ื•ืŸ ืžื ื˜ืœื™ ืœื“ื—ื•ืช ืืช ืžื” ืฉื”ืขื•ืœื ื ื™ืกื” ืœื”ื’ื™ื“ ืœื™. ื”ืžื•ื— ื”ืื ื•ืฉื™ ืœื ืื•ื”ื‘ ืฉืžื–ื™ื–ื™ื ืœื• ืืช ื”ื’ื‘ื™ื ื”. ื›ืฉื™ืฉ ืคืจื™ื˜ ืžื™ื“ืข ื—ื“ืฉ ืฉืœื ืžืกืชื“ืจ ืขื ื“ื‘ืจื™ื ืฉื›ื‘ืจ ื™ื“ืขื ื•, ื ืขืฉื” ื”ื›ืœ ื›ื“ื™ ืœืคืกื•ืœ ืืช ื”ืžื™ื“ืข ื”ื—ื“ืฉ. ื•ื”ื”ืจื’ืœ ื”ื–ื” ื™ื›ื•ืœ ืœืขืœื•ืช ืœื ื• ื‘ื™ื•ืงืจ, ื›ืžืชื›ื ืชื™ื ื•ื›ืขื•ื‘ื“ื™ื ื‘ื›ืœื›ืœื” ื”ืžื•ื“ืจื ื™ืช. ื”ื—ื“ืฉื•ืช ื”ื˜ื•ื‘ื•ืช ื”ืŸ ืฉืืคืฉืจ ืœื”ืชืืžืŸ ื•ืœืฉื ื•ืช ืืช ื–ื”. ื”ืฆืขื“ ื”ืจืืฉื•ืŸ ื”ื•ื ืœื–ื”ื•ืช ืืช ื”ืฉื™ืขื•ืจื™ื ื”ืงืฉื™ื ื›ืฉื”ื ืขื•ืžื“ื™ื ืžื•ืœื ื•, ืœื”ืกืชื›ืœ ืขืœื™ื”ื ื‘ืกืงืจื ื•ืช ื•ืœืฉืื•ืœ - ืžื” ืื ื™ ื™ื›ื•ืœ ืœืœืžื•ื“ ืžืžื” ืฉืงื•ืจื” ืขื›ืฉื™ื•? ืžื” ื”ื™ื” ืงื•ืจื” ืื ื”ื™ื™ืชื™ ื‘ื•ื—ืจ ื‘ื—ื™ืจื” ืื—ืจืช? ืื™ื–ื” ืขืœื•ืช ืฉืงื•ืขื” ื’ื•ืจืžืช ืœื™ ืœื”ืžืฉื™ืš ืœื”ืชื•ื•ื›ื—? ื•ืžื” ืฆืจื™ืš ืœืงืจื•ืช ื›ื“ื™ ืฉืื•ื›ืœ ืœืงื‘ืœ ืืช ื”ืžื™ื“ืข ื”ื—ื“ืฉ ื•ืœื”ืชืงื“ื ืื™ืชื•?