ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ° Π΄Π»Ρ javascript ΠΊΠΎΠ΄Π°
Where teams build faster, together
Create, share, and get feedback with collaborative sandboxes for rapid web development.
WhatΠ²Π™s a Sandbox?
Accelerating developers and product teams
Code from anywhere
Code from anywhere with play.js by CodeSandbox
Code collaboration made easy
A link is all you need to hop into a sandbox and keep development work flowing.
Rapid Prototyping
Quickly create real, working prototypes. Test ideas earlier and iterate more.
Knowledge Sharing
Use code, apps, and templates collectively. Learn from each other and bake-in best practice.
Better Feedback
Give and get feedback, on code or visuals, right in the editor. Take action and move forward faster.
The best JavaScript dev experience
Supercharged with npm
Use private packages, or any of the 1M+ public ones, to build powerful apps quickly.
Optimized for frameworks
Custom environments built specifically for React, Vue, Angular, and many more.
Integrated with GitHub
Import and run repos direct from GitHub. Or export your sandbox to a repo.
What others are saying
Π²ΠΡIt’s dramatically improved my experience of sharing ideasΠ²ΠΡ
Software Engineer, React Core Team
Π²ΠΡCodeSandbox continues to amaze me every dayΠ²ΠΡ
Engineering Manager, Apollo GraphQL
Π²ΠΡIt feels much more like my local environmentΠ²ΠΡ
Designer Developer, Stripe
Free for personal use
Create static sites, components, or full-stack web apps with a community whoΠ²Π™ve craftedΠ 900,000 public sandboxes and counting.
ΠΡΡΡΠΈΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²
ΠΠ΅ΡΠΎΡΠ½ΠΈΡΡ β ΡΡΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ ΠΊΠΎΠ΄Π°. Π‘ΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π²ΡΠ΄Π΅Π»Π΅Π½Π½Π°Ρ (ΠΈΠ·ΠΎΠ»ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ) ΡΡΠ΅Π΄Π° Π΄Π»Ρ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ. ΠΠ΄Π΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²Π΅ΡΡΡΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ΅ΡΠΈΡΡ Π·Π°Π΄Π°ΡΡ ΠΈΠ»ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π²Π°ΡΠ΅ΠΉ ΡΠ°Π±ΠΎΡΡ ΡΡΠ°Π·Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ. Π§Π°ΡΡΠΎ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ Π½Π΅Π·Π½Π°ΠΊΠΎΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΠΈΠ· Π½Π΅ΠΏΡΠΎΠ²Π΅ΡΠ΅Π½Π½ΡΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ².
Π’Π°ΠΊΠΆΠ΅ Π·Π°ΡΠ°ΡΡΡΡ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° Β«ΡΡΡΠΎΠ³ΠΎΒ» ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ ΠΏΠΎΠ²ΡΠ΅Π΄ΠΈΡΡ ΡΠΈΡΡΠ΅ΠΌΡ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΡΡΠΈΡΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ. Π’Π°ΠΊΠΈΠ΅ Β«ΡΠ΅ΡΡΠΈΡΠΎΠ²ΠΎΡΠ½ΡΠ΅Β» ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ ΠΊΠΎΠΏΠΈΡΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠ΅Π΄Ρ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΠΈΡΠ΅ΡΡΡ ΠΊΠΎΠ΄, ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ Π±ΡΡΡΡΠΎ ΠΈ Π±Π΅Π·Π±ΠΎΠ»Π΅Π·Π½Π΅Π½Π½ΠΎ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Ρ Π½Π΅ΠΎΡΠ»Π°ΠΆΠ΅Π½Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ.
Π ΡΠ΅ΠΌ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ:
Π‘ΠΌΡΡΠ» ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π²Ρ ΡΡΠΈΠ»ΠΈΡΡ, ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π»ΠΈ ΠΈ Π·Π°ΠΏΡΡΠΊΠ°Π»ΠΈ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ΄, Π²ΡΠΏΠΎΠ»Π½ΡΠ»ΠΈ ΡΠ°Π±ΠΎΡΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎ.
CodePen
ΠΠ³ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ β ΡΡΠΈ ΠΎΠΊΠ½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ (ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ Π΄Π»Ρ HTML, CSS ΠΈ Javascript) ΠΈ ΡΠ΅ΡΠ²Π΅ΡΡΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (Π·Π΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΊΠΎΠ΄Π°). Π£Π΄ΠΎΠ±Π½ΠΎ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡ Less, Sass ΠΈΠ»ΠΈ PostCss Π΄Π»Ρ CSS. ΠΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ jQuery, Lodash ΠΈ React.js, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ Angular ΠΈ Vue.js ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π΄Π»Ρ JavaScript.
ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ Π² CodePen Π΅ΡΡΡ ΡΠ°Π·Π΄Π΅Π» Β«Π’ΡΠ΅Π½Π΄ΡΒ», Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΡΠ°Π±ΠΎΡΡ, ΡΠ΅ΡΠΏΠ°ΡΡ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΠ΅, ΡΠΎΡ ΡΠ°Π½ΡΡΡ ΡΠ΅Π±Π΅ Π² ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ²ΡΠ΅Π΅ΡΡ.
Plunker
ΠΡΠ»ΠΈ Π²Ρ ΡΡΠΈΠ»ΠΈΡΡ Π½Π° Learn JS, ΡΠΎ Π²Ρ ΡΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ ΡΡΠΎΠΉ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ΅ΠΉ. Π§ΡΠΎΠ±Ρ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠ°Π±ΠΎΡΠ΅, ΡΠ½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ/ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Angular, React.js, AngularJS ΠΈΠ»ΠΈ Preact, Π»ΠΈΠ±ΠΎ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° VanillaJS. ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΊΠΎΠ΄Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΏΠ°ΠΊΠ΅ΡΡ npm. ΠΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ
JavaScript Sandbox
ΠΠ°Π½Π½ΡΠΉ ΡΠ΅ΡΠ²ΠΈΡ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΠ°Π±ΠΎΡΡ Ρ ΡΡΠΈΠΌ ΡΠ·ΡΠΊΠΎΠΌ.
ΠΠΈΡΠ½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ js bin.
ΠΠ°ΠΆΠ΅ ΠΏΡΠΎΡ ΠΎΠ΄Ρ ΠΊΡΡΡΡ Π½Π° Π₯ΡΠΊΡΠ»Π΅ΡΠ΅, ΠΈΠ½ΠΎΠ³Π΄Π° ΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΡ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ Π΄ΠΎΠ»Π³ΠΎ Π½Π΅ ΠΌΠΎΠ³Ρ ΡΠ΅ΡΠΈΡΡ Π·Π°Π΄Π°ΡΡ ΠΈ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΡΠ»Π΅Π΄ΠΈΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΡΠ°ΠΏ ΡΡΠ½ΠΊΡΠΈΠΈ, Π° Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π· Π½Π΅ Ρ ΠΎΡΠ΅ΡΡΡ. Π ΠΏΠΎΡΡΠΎΠΌΡ Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠΆΡ Π² ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ Π·Π°Π΄Π°ΡΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠ»ΠΎΠ²ΠΈΡ Π·Π°Π΄Π°ΡΠΈ ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠ²Π°ΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΡΠ΅ΠΌΡ.
5 ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²
ΠΠ΅ΡΠΎΡΠ½ΠΈΡΡ β ΡΡΠΎ ΠΈΠ·ΠΎΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ ΠΊΠΎΠ΄Π°. ΠΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²Π΅ΡΡΡΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΠΈ ΡΡΠ°Π·Ρ ΠΆΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠ°Π±ΠΎΡΡ. Π ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° ΠΈΠ»ΠΈ Π²Π΅ΡΡΠΈ ΡΠ΅Π»ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΡΠ°ΠΊΠΈΡ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, JSFiddle, Π΄Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ: Π½Π°Π΄ ΠΎΠ΄Π½ΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»ΡΠ΄Π΅ΠΉ.
ΠΠ΅ΡΠΎΡΠ½ΠΈΡΡ Π½Π°ΡΠ°Π»ΠΈ ΠΌΠ°ΡΡΠΎΠ²ΠΎ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π² 2010β2013 Π³Π³. Π‘Π΅ΠΉΡΠ°Ρ ΡΠ°ΡΡΡ ΡΠ°ΠΊΠΈΡ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ² ΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡ ΠΏΡΠΈΠ²ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ ΠΊΠ°ΠΊ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ ΠΊΠΎΠ΄ΠΈΠ½Π³Π° ΠΈ ΡΠ°Π·Π²ΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². ΠΠ½ΡΡΡΠΈ ΡΠ΅ΡΠ²ΠΈΡΠ° ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π³ΡΡΠΏΠΏΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΠΎΠΆΠ½ΠΎ ΠΎΠ±ΡΠ°ΡΡΡΡ Π² Discord, ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Π² Π³Π°Π»Π΅ΡΠ΅Π΅, ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π½Π° ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ²ΡΠΈΡ ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ².
ΠΠ»Ρ ΡΠ΅Π³ΠΎ Π½ΡΠΆΠ½Ρ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ?
ΠΠ»Π°Π²Π½Π°Ρ Π·Π°Π΄Π°ΡΠ° ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ β Π΄Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΈ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΠ΄Π΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΡΡΡ ΠΊΠΎΠ΄ΠΈΡΡ ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠ°Π±ΠΎΡΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ. ΠΠ»Π°Π²Π½ΠΎΠ΅ β ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ΅ΡΠ²ΠΈΡΠ°Ρ Π΄ΠΎΡΡΡΠΏΡ ΠΊ ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌ ΠΎΡΠΊΡΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Π°ΡΡ ΡΠ°Π±ΠΎΡΡ ΠΌΠΎΠ³ΡΡ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅.
ΠΠΎΠ΄ ΠΈΠ· ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π° Stack Overflow, Π₯Π°Π±Ρ ΠΈ ΠΈΡ Π°Π½Π°Π»ΠΎΠ³ΠΈ. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ²ΠΎΡ ΡΠ°Π±ΠΎΡΡ Π΄ΡΡΠ³ΠΈΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΏΡΠΎΡΠΈΡΡ ΠΏΠΎΠΌΠΎΡΠΈ ΠΈΠ»ΠΈ ΡΠΎΠ²Π΅ΡΠ°. ΠΠ»ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ: ΠΏΠΎΠΌΠΎΡΡ ΠΊΠΎΠΌΡ-ΡΠΎ, ΠΎΠ±ΡΡΡΠ½ΠΈΠ² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
Π§Π°ΡΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ² Π²ΡΡΠ»ΠΈ Π·Π° ΡΠ°ΠΌΠΊΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ ΠΈ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π»Π΅Π½ΡΡ Ρ ΡΡΠ΅Π½Π΄Π°ΠΌΠΈ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠ°Π±ΠΎΡ. Π ΠΈΡ ΡΠΈΡΠ»Π΅ Codepen ΠΈ Plunker. ΠΠ° ΡΡΠΈΡ ΡΠ΅ΡΡΡΡΠ°Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ ΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ, ΡΡΠ΅Π½Π΄ΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ Π΄ΡΡΠ³ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΠ΅ΡΡ ΠΊΠΎΠ΄ Π² ΠΎΡΠΊΡΡΡΠΎΠΌ Π΄ΠΎΡΡΡΠΏΠ΅, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΏΠ°ΡΡ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΈ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ, ΠΊΠ°ΠΊ ΡΠ΅ΡΠ΅Π½Π° ΡΠ° ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ Π·Π°Π΄Π°ΡΠ°. Π Π΅ΡΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΡΠ°Π·Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈ ΡΡΡΡΠΊΡΡΡΡ ΠΊΠΎΠ΄Π°, ΠΈ Π΅Π³ΠΎ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠΎΡΡΠΎΠΌΡ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΡΠ²ΠΎΠΈ Π»ΡΡΡΠΈΠ΅ ΡΠ°Π±ΠΎΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π² Π»Π΅Π½ΡΡ Ρ ΡΡΠ΅Π½Π΄Π°ΠΌΠΈ, Π½ΠΎ ΠΈ Π² ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ.
Π Π°Π·Π΄Π΅Π» Β«Π’ΡΠ΅Π½Π΄ΡΒ» Π½Π° ΡΠ°ΠΉΡΠ΅ CodePen
CodePen
CodePen β ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΈ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². ΠΠ½ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΡ Π½Π° ΡΠ΅ΡΡΡΠ΅ ΠΎΠΊΠ½Π°. ΠΠ΅ΡΠ²ΡΠ΅ ΡΡΠΈ β ΡΠ°Π±ΠΎΡΠΈΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ, ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ Π΄Π»Ρ HTML, CSS ΠΈ Javascript. ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ β ΠΎΠΊΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π Π½Π΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΊΠΎΠ΄Π°.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΠ³ΡΡ, ΡΠ΄Π΅Π»Π°Π½Π½ΠΎΠΉ ΠΏΡΡΠΌΠΎ Π½Π° CodePen
Π£ CodePen Π³ΠΈΠ±ΠΊΠΈΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ. ΠΠ»Ρ CSS Π·Π΄Π΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡ Less, Sass ΠΈΠ»ΠΈ PostCss. ΠΠ»Ρ JavaScript β ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ jQuery, Lodash ΠΈ React.js, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ Angular ΠΈ Vue.js ΠΈ Π΄ΡΡΠ³ΠΈΠ΅. Codepen ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ°Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ°ΠΊΠ΅ΡΡ JavaScript ΠΈΠ· npm, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ Normalize.css, Autoprefixer ΠΈΠ»ΠΈ PrefixFree. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΈΠ»ΠΈ ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄.
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° Π² CodePen
ΠΠ΄Π½Π° ΠΈΠ· ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠ΅ΠΉ CodePen β ΡΠ°Π·Π΄Π΅Π» Β«Π’ΡΠ΅Π½Π΄ΡΒ». ΠΡΠΎ Π»Π΅Π½ΡΠ° Ρ ΡΠ°Π±ΠΎΡΠ°ΠΌΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²: Π²Π΅ΡΡΡΠΊΠΎΠΉ, Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ, ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ. ΠΠ΄Π΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΏΠ°ΡΡ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΠ΅, ΠΈΠ·ΡΡΠ°ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ²ΡΠΈΠ΅ΡΡ ΡΠ°Π±ΠΎΡΡ ΠΊ ΡΠ΅Π±Π΅ Π² ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π½Π° Π΄ΡΡΠ³ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.
JSFiddle
JSFiddle β ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ° Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡΡ, ΠΏΠΎΡ ΠΎΠΆΠ΅ΠΉ Π½Π° CodePen. ΠΠ΄Π΅ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, Π²ΠΊΠ»ΡΡΠΈΡΡ Π²Π°Π»ΠΈΠ΄Π°ΡΠΎΡ Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΊΠΎΠ΄Π°, Π²ΡΠ±ΡΠ°ΡΡ ΡΠ·ΡΠΊΠΈ ΠΈ ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΡ. Π Π³Π»Π°Π²Π½ΠΎΠ΅ β JSFiddle ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ Π²ΡΠ±ΠΎΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ².
Π JSFiddle Π½Π΅Ρ Π±Π»ΠΎΠ³Π° Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ ΡΠ°Π±ΠΎΡΠ°ΠΌΠΈ, Π½ΠΎ Π·Π°ΡΠΎ Π΅Ρ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌΠΈ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΡΡ, ΡΡΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ β ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° ΠΏΡΠΎΠ΅ΠΊΡ.
Π Π°Π½ΡΡΠ΅ Ρ ΡΡΠΎΠΉ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ Π±ΡΠ» Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ: ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ Π²ΡΡΡΠ½ΡΡ. Π‘Π΅ΠΉΡΠ°Ρ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π½Π΅Ρ: ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π Π²ΠΎΡ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠΊΠ° Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ, Π΅Ρ ΡΠ½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½Π° ΡΡΠΎΡΠΎΠ½Π½ΠΈΠΉ ΡΠ΅ΡΠ²ΠΈΡ.
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ ΠΏΡΠΎΠ΅ΠΊΡΠ° JSFiddle
Plunker
Plunker ΠΏΠΎΡ ΠΎΠΆ Π½Π° ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΊΠΎΠ΄Π°, Π² ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΎΠΊΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π§ΡΠΎΠ±Ρ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠ°Π±ΠΎΡΠ΅, ΡΠ½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ/ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Angular, React.js, AngularJS ΠΈΠ»ΠΈ Preact Π»ΠΈΠ±ΠΎ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° VanillaJS. ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΊΠΎΠ΄Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΏΠ°ΠΊΠ΅ΡΡ npm. ΠΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ, Ρ ΠΎΡΡ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ² ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π½Π΅ΠΏΡΠΎΡΡΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅ΠΉ.
ΠΠ°ΠΊ ΠΈ Π² CodePen, Π·Π΄Π΅ΡΡ Π΅ΡΡΡ Π³Π°Π»Π΅ΡΠ΅Ρ ΡΠ°Π±ΠΎΡ Ρ ΠΎΡΠΊΡΡΡΡΠΌ Π΄ΠΎΡΡΡΠΏΠΎΠΌ ΠΊ ΠΊΠΎΠ΄Ρ. Π Π³Π»Π°Π²Π½ΠΎΠ΅ β Π² Plunker ΠΏΡΠΎΡΡΠ°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΠ°ΠΉΠ»ΠΎΠ². ΠΠ΅ Π½ΡΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΠΎΡΠΎΠ½Π½ΠΈΠ΅ ΡΠ΅ΡΡΡΡΡ: Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΡ ΠΈΡ Ρ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ° Π² ΡΠ°ΠΉΠ»ΠΎΠ²ΠΎΠ΅ Π΄Π΅ΡΠ΅Π²ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΠ· Π³Π°Π»Π΅ΡΠ΅ΠΈ ΡΠ°Π±ΠΎΡ Plunker
StackBlitz
StackBlitz β ΡΡΠΎ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ° Π½Π° Π±Π°Π·Π΅ Visual Studio. ΠΠ΄Π΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° Angular, Vue.js, React.js ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ. ΠΠ»ΡΡ ΡΡΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° β ΠΏΡΠΎΡΡΠ°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° npm Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ ΠΈ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ, ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ². Π Π΅ΡΠ»ΠΈ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΊΡΡΠΎΠΊ ΠΊΠΎΠ΄Π° ΠΈ Π²ΡΡΠ°Π²ΠΈΡΡ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ° ΡΠ°ΠΌΠ° Π½Π°ΠΉΠ΄Π΅Ρ ΠΏΡΠΎΠΏΡΡΠ΅Π½Π½ΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ.
StackBlitz ΡΠ΄ΠΎΠ±Π΅Π½ Π΅ΡΠ΅ ΠΈ ΡΠ΅ΠΌ, ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΎΡΡΠ»Π°ΠΉΠ½: Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ Π΄Π°ΠΆΠ΅ Π±Π΅Π· ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°. ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠ»ΡΡ ΡΡΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° β ΠΏΡΠΎΡΡΠ°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΠ°ΠΉΠ»ΠΎΠ². Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΠΏΡΠΎΠ΅ΠΊΡ, Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΡΠ½ΡΡΡ Π΅Ρ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡ.
ΠΠΎΡΡΡΠΏΠ½ΡΠ΅ Π² StackBlitz Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ
CodeSandbox
ΠΠ΅ΡΠΎΡΠ½ΠΈΡΠ° CodeSandbox ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΠΊΠ°ΠΊ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΊΡΡΠΊΠΎΠ² ΠΊΠΎΠ΄Π°, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Π½Π°Π΄ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ Ρ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². Π‘Π΅ΡΠ²ΠΈΡ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°Π½ Ρ GitHub, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΉΠ»Ρ ΠΈΠ· ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π½ΠΈΠΌΠΈ Π² ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ΅. ΠΠ»ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ: ΡΠΎΠ·Π΄Π°ΡΡ Π² ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ ΠΈ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½Π° GitHub.
Π CodeSandbox Π±ΠΎΠ»ΡΡΠΎΠΉ Π²ΡΠ±ΠΎΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² ΠΈ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΊΠΎΠ΄Π°. ΠΠΎ ΠΆΠ΅Π»Π°Π½ΠΈΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΊΡΡΡΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠ°ΠΊ ΠΈ Π½Π° Π΄ΡΡΠ³ΠΈΡ ΡΠ΅ΡΡΡΡΠ°Ρ , Π½Π° CodeSandbox Π΅ΡΡΡ ΡΠ°Π·Π΄Π΅Π» Ρ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌΠΈ. ΠΠΎΠΆΠ½ΠΎ Π·Π°Π³Π»ΡΠ½ΡΡΡ Π² ΠΊΠΎΠ΄ Π΄ΡΡΠ³ΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊ Π½Π°ΠΏΠΈΡΠ°Π½Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ. Π Π΅ΡΠ»ΠΈ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π²ΠΎΠΏΡΠΎΡ β ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π² Discord.
ΠΡΠΈΠΌΠ΅Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π² CodeSandbox
ΠΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ β ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΠΈΠ· ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Π½ΡΡ Π² Π‘Π΅ΡΠΈ. ΠΡΡΡ Π΅ΡΠ΅ Replit, JS Bin, CSSDeck ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ ΠΊΠΎΠ΄Π°, ΠΎ ΠΊΠΎΡΠΎΡΡΡ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
ΠΠΎΠΆΠ΅Ρ Π»ΠΈ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ° ΠΏΠΎΠΌΠΎΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΡ Π² ΡΠ°Π±ΠΎΡΠ΅?
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π² Π»ΠΈΡΠ½ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ , Π½ΠΎ ΠΈ Π² ΡΠ°Π±ΠΎΡΠ΅. ΠΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°Π΄ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ Π² ΠΎΠ΄ΠΈΠ½ΠΎΡΠΊΡ ΠΈΠ»ΠΈ ΡΠ΅Π»ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ, Π½Π°Ρ ΠΎΠ΄ΠΈΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅ΡΡΡΠΊΠΈ, Π΄Π°Π²Π°ΡΡ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΡΠΉ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΊΠΎΠ΄Ρ ΠΈ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ΄Π΅ΠΈ ΠΏΠ΅ΡΠ΅Π΄ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΎΠΌ Π² ΠΏΡΠΎΠ΅ΠΊΡ. Π’Π°ΠΊΠΆΠ΅ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°ΠΌ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π·Π°ΠΊΠ°Π·ΡΠΈΠΊΠ°ΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°ΡΡ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π·Π°Π΄Π°ΡΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΠ±ΡΠ°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈΠ»ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π§Π°ΡΡΡ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ CodeSandbox, Π²Π²Π΅Π»ΠΈ ΠΊΠΎΡΠΏΠΎΡΠ°ΡΠΈΠ²Π½ΡΠ΅ ΡΠ°ΡΠΈΡΡ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΉ. ΠΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΏΡΠΈΠ²Π°ΡΠ½ΡΠΉ Π΄ΠΎΡΡΡΠΏ, ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΡΠ°ΡΡΠ½ΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ npm ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ Π² Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ.
Π ΡΠ΅ΠΌ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²?
ΠΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄, Π½ΠΎ Π½Π΅ ΠΎΠ±ΡΡΡΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ. ΠΠΎΡΡΠΎΠΌΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Ρ ΠΎΡΡ Π±Ρ Π½Π°ΡΠ°Π»ΡΠ½ΡΠ΅ Π·Π½Π°Π½ΠΈΡ ΠΎ Π²Π΅ΡΡΡΠΊΠ΅ ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ. ΠΠ΅Π· ΡΡΠΎΠ³ΠΎ Π½ΠΈΠΊΠ°ΠΊ.
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² β ΠΎΡΠΊΡΡΡΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ. ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ±Π»Π°Π·Π½ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΆΡΡ ΡΠ°Π±ΠΎΡΡ, Π½Π΅ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡ Π² Π½Π΅ΠΉ. ΠΡΠΎ ΠΏΠ»ΠΎΡ ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π° Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΌ ΡΡΠ°ΠΏΠ΅ Π²Π°ΠΆΠ½ΠΎ Π½Π°ΡΡΠΈΡΡΡΡ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠΎΠ΄. ΠΠΎ-Π²ΡΠΎΡΡΡ , ΡΡΠΈΡΡΡΡ Π²Π΅ΡΡΡΠΊΠ΅ ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΡΠ°Π·Π±ΠΈΡΠ°Ρ ΡΠΏΠΎΠ½ΡΠ°Π½Π½ΠΎ Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΡΠ°Π±ΠΎΡΡ β Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠ°Ρ ΠΈΠ΄Π΅Ρ. ΠΠ½Π°Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ, Π° ΡΡΠ΅Π±Π° ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΠΉ. Π’ΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° Π² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅.
ΠΠΎΡ ΡΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΡΡ Π·Π°Π΄Π°Π½ΠΈΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ
ΡΡΠ΅Π½Π°ΠΆΡΡΠΎΠ² HTML Academy
ΠΡΠ»ΠΈ ΡΡΠ²ΡΡΠ²ΡΠ΅ΡΠ΅, ΡΡΠΎ Π·Π½Π°Π½ΠΈΠΉ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, Π½ΠΎ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ΅Π±Ρ Π² Π²Π΅ΡΡΡΠΊΠ΅ ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ β ΠΏΡΠΎΠΉΠ΄ΠΈΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ ΠΎΠ±ΡΡΠ°ΡΡΠΈΠ΅ ΡΡΠ΅Π½Π°ΠΆΡΡΡ. ΠΠ½ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡ Π²Π°Ρ Ρ Π±Π°Π·ΠΎΠ²ΡΠΌΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌΠΈ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. Π‘ ΠΈΡ ΠΏΠΎΠΌΠΎΡΡΡ Π²Ρ Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΈ Π½Π°ΠΏΠΈΡΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ²ΡΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Π½Π° JavaScript.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ ΡΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΉ ΡΠ΅ΠΎΡΠΈΠ΅ΠΉ
ΠΡ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌ ΡΡΠ΅Π½Π°ΠΆΡΡΡ β ΠΎΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ Π²Π°ΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π½ΡΠ°Π²ΠΈΡΡΡ Π² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅.
ΠΠ°ΠΆΠ°ΡΠΈΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ β ΡΠΎΠ³Π»Π°ΡΠΈΠ΅ Π½Π° ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΠΏΠ΅ΡΡΠΎΠ½Π°Π»ΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ
ΠΡΡΡΠΈΠ΅ ΠΎΠ±Π»Π°ΡΠ½ΡΠ΅ IDE Π΄Π»Ρ JavaScript-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²
Π₯ΠΎΡΠ΅ΡΡ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠ²ΠΎΠΈ Π·Π½Π°Π½ΠΈΡ ΠΏΠΎ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Ρ?
ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΡ Π½Π° Π½Π°Ρ ΠΊΠ°Π½Π°Π» Ρ ΡΠ΅ΡΡΠ°ΠΌΠΈ ΠΏΠΎ HTML/CSS/JS Π² Telegram!
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Β«5 Top Cloud IDEs for JavaScript DevelopersΒ».
Π’ΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΏΠΈΡΡΡ ΠΊΠΎΠ΄ Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°Ρ (ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°Ρ ΠΊΠΎΠ΄Π°), ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ Π½Π° ΠΈΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΡΡ ΠΌΠ°ΡΠΈΠ½Π°Ρ . ΠΠΎ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΈΠ²ΡΡΠΊΠΈ Π½Π°ΡΠ°Π»ΠΈ ΠΌΠ΅Π½ΡΡΡΡΡ. Π ΠΎΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ ΠΎΠ±Π»Π°ΡΠ½ΡΡ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ² ΠΏΡΠΈΠ²Π΅Π», Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅, ΠΈ ΠΊ ΠΏΠΎΠ΄ΡΠ΅ΠΌΡ ΠΎΠ±Π»Π°ΡΠ½ΡΡ ΡΡΠ΅Π΄ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ (IDE).
ΠΡΠΈ IDE ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΡΠΏΠ΅ΠΊΡΡ Π·Π°ΠΏΡΠΎΡΠΎΠ² ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². ΠΡ ΠΈΡΠ΅ΡΠ΅ ΡΠ΅ΡΠ²ΠΈΡ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΠΎΡΠΎΡΠ½ΠΎ Π΄Π΅Π»ΠΈΡΡΡΡ ΠΎΡΡΡΠ²ΠΊΠ°ΠΌΠΈ ΠΊΠΎΠ΄Π° Ρ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ? ΠΠ°ΠΌ Π½ΡΠΆΠ½Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΎΡΡΡΠ²ΠΊΠΈ ΠΊΠΎΠ΄Π° Π² ΠΏΠΎΡΡΡ Π±Π»ΠΎΠ³ΠΎΠ² ΠΈΠ»ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅? ΠΡ ΠΈΡΠ΅ΡΠ΅ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ Π²Π°ΠΌ ΠΏΠΈΡΠ°ΡΡ ΠΈ ΠΎΠ±ΡΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ Π΅Π³ΠΎ ΠΊ ΠΊΠΎΠ΄Ρ Π΄Π»Ρ ΠΏΠΎΡΡΠ½Π΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ ΠΏΡΡΠΌΠΎ Π²Π½ΡΡΡΠΈ IDE? ΠΠ°ΠΌ Π½ΡΠΆΠ½Π° IDE Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΠ»Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ? ΠΠ±Π»Π°ΡΠ½ΡΠ΅ IDE ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Ρ ΠΎΡΠΎΡΠΈ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π΅Π»ΠΈΡΡΡΡ ΠΊΠΎΠ΄ΠΎΠΌ ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅ΠΌ ΠΎ ΡΠ°ΠΌΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΎΠ±Π»Π°ΡΠ½ΡΡ IDE Π΄Π»Ρ JavaScript-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ².
1. Codetable
Codetable ΠΎΡ HackerEarth ΡΡΠΎ ΠΏΡΠΎΡΡΠ°Ρ IDE Ρ Π±Π°Π·ΠΎΠ²ΡΠΌ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΠΎΠΌ. ΠΠ½Π° ΠΈΠ΄Π΅Π°Π»ΡΠ½Π° Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π΄Π΅Π»ΠΈΡΡΡΡ ΡΠ½ΠΈΠΏΠΏΠ΅ΡΠ°ΠΌΠΈ ΠΊΠΎΠ΄Π°. Π Codetable ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ·ΡΠΊΠΎΠ² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΠΊΠΎΠ΄ Π΄ΠΈΡΡΠ°Π½ΡΠΈΠΎΠ½Π½ΠΎ, ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ΅ΡΠ²Π΅ΡΠΎΠ² HackerEarth.
HackerEarth Π³Π»Π°Π²Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ Ρ Π°ΠΊΠ°ΡΠΎΠ½Ρ, ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΠΌΡΠ΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΡΠΌΠΈ Π΄Π»Ρ Π½Π°ΠΉΠΌΠ° Π½ΠΎΠ²ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². Π Codetable Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² ΠΊΠΎΠ΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΡ ΠΆΠ΅ Π΄Π²ΠΈΠΆΠΎΠΊ.
ΠΠΎΠ³Π΄Π° Π²Ρ Π·Π°ΠΊΠΎΠ½ΡΠΈΠ»ΠΈ ΠΏΠΈΡΠ°ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΠΎΠ½Π° ΠΎΡΡΡΠ»Π°Π΅ΡΡΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. ΠΠΎΡΠ»Π΅ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π²Π°ΠΌ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, Π° ΡΠ°ΠΊΠΆΠ΅ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΈ ΡΡΠΎΠ²Π΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΠ°ΠΌΡΡΠΈ. ΠΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π΄Π»Ρ ΠΎΡΠ΅Π½ΠΊΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Π½Π° Ρ Π°ΠΊΠ°ΡΠΎΠ½Π°Ρ . Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ input Π΄Π»Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ β ΡΡΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ.
Π₯ΠΎΡΡ Codetable ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π±Π°Π·ΠΎΠ²ΡΠΌ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΠΎΠΌ, ΡΡΠΎ Ρ ΠΎΡΠΎΡΠΈΠΉ Π²ΡΠ±ΠΎΡ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², Π½Π΅ ΠΆΠ΅Π»Π°ΡΡΠΈΡ ΠΎΡΠ²Π»Π΅ΠΊΠ°ΡΡΡΡ Π½Π° Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ ΠΏΠΎΠΊΠ° Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ.
2. JSFiddle
JSFiddle ΡΡΠΎ ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ ΡΠ°Π½Π½ΠΈΡ IDE. ΠΠ½Π° ΡΠΎΠ΄ΠΈΠ»Π°ΡΡ ΠΈΠ· ΠΈΠ΄Π΅ΠΈ Β«ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡΒ» Π΄Π»Ρ HTML, CSS ΠΈ JavaScript. JSFiddle ΠΏΠΎΡΠ»ΡΠΆΠΈΠ»Π° Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΊΠΎΠ½ΠΊΡΡΠ΅Π½ΡΠΎΠ².
ΠΡΠ° IDE ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΡΠ·ΡΠΊΠ°Ρ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π°, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ ΠΈ Π²ΡΠ²ΠΎΠ΄ΠΈΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. Π ΡΡΠΎΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ΅ ΠΎΡΡΡΠ²ΠΊΠΈ ΠΊΠΎΠ΄Π° Π½Π°Π·ΡΠ²Π°ΡΡΡΡ Β«fiddleΒ».
ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ Β«ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΒ» β ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π΅Π»ΠΈΡΡΡΡ ΠΎΡΡΡΠ²ΠΊΠ°ΠΌΠΈ ΠΊΠΎΠ΄Π° ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°Π΄ ΠΊΠΎΠ΄ΠΎΠΌ Ρ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ. ΠΠ°ΡΠΈ ΡΠΎΠ²Π°ΡΠΈΡΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΡΠΊ Π²Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π°, ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΈ ΡΠΎΠΆΠ΅ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΡΡΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΎΡΡΡΠ²ΠΊΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π° (Ρ ΠΏΡΠ΅Π²ΡΡ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ) Π½Π° ΡΡΠΎΡΠΎΠ½Π½ΠΈΠ΅ ΡΠ°ΠΉΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² Π±Π»ΠΎΠ³ ΠΈΠ»ΠΈ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ, β Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ.
Π’Π°ΠΊΠΆΠ΅ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ JSFiddle ΠΌΠΎΠΆΠ½ΠΎ ΡΠΈΠΌΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ AJAX-Π·Π°ΠΏΡΠΎΡΡ.
JSFiddle ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ΄ Π² Π²ΠΈΠ΄Π΅ Π±ΠΎΠΉΠ»Π΅ΡΠΏΠ»Π΅ΠΉΡΠΎΠ² Π΄Π»Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ JS-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ β jQuery, Vue ΠΈ React. Π ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΠΌ JSFiddle ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ½Π΅ΡΡΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠΎΠ΄Π° Π½Π° StackOverflow ΠΈ Π±Π°Π³-ΡΠ΅ΠΏΠΎΡΡΡ ΡΠ΅ΡΠ΅Π· GitHub Issues.
3. CodePen
Π₯ΠΎΡΡ CodePen ΡΠΎΠΆΠ΅ Π·Π°ΡΠΎΠΆΠ΄Π°Π»Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ Π΄Π»Ρ HTML, CSS ΠΈ JavaScript ΠΊΠΎΠ΄Π°, Ρ Π³ΠΎΠ΄Π°ΠΌΠΈ ΠΎΠ½Π° ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ°Π·Π²ΠΈΠ»Π°ΡΡ ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»Π°.
CodePen ΡΠ»ΡΠΆΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° ΡΠΎΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π΄Π»Ρ ΡΡΠΎΠ½ΡΠ΅Π½Π΄-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². ΠΠ°ΠΊ ΠΈ JSFiddle, ΠΎΠ½Π° Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ Π²ΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡΡ ΠΎΡ ΠΎΠ±Π»Π°ΡΠ½ΠΎΠΉ IDE: Ρ Π΅Π΅ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»ΠΈΡΡΡΡ ΠΊΠΎΠ΄ΠΎΠΌ, ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°Π΄ Π½ΠΈΠΌ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠΎΠ²Π°ΡΠΈΡΠ°ΠΌΠΈ.
ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ HTML, CSS ΠΈ JavaScript ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ, ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½ΡΠΌ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Β«penΒ», ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΈΠΌ Ρ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ ΠΈ Π΄Π°ΠΆΠ΅ Π²ΡΡΡΠΎΠΈΡΡ Π½Π° ΡΡΠΎΡΠΎΠ½Π½ΠΈΠ΅ ΡΠ°ΠΉΡΡ.
ΠΠΊΠΊΠ°ΡΠ½Ρ Π½Π° CodePen Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²ΡΠ΅ΠΌ Π²Π°ΡΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ, Π° ΠΏΠ»Π°ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ CodePen Pro ΠΎΠ±ΠΎΠΉΠ΄Π΅ΡΡΡ Π²Π°ΠΌ ΠΎΡ 8 Π΄ΠΎΠ»Π»Π°ΡΠΎΠ² Π² ΠΌΠ΅ΡΡΡ (ΡΡΠ΅Ρ Π²ΡΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π·Π° Π³ΠΎΠ΄). ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ Π°ΠΊΠΊΠ°ΡΠ½Ρ Π΄Π°Π΅Ρ Π΄ΠΎΡΡΡΠΏ ΠΊΠΎ Π²ΡΠ΅ΠΌΡ Π±Π°Π·ΠΎΠ²ΠΎΠΌΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»Ρ CodePen. ΠΠΏΠ»Π°ΡΠΈΠ² CodePen Pro, Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ±ΡΠ°ΡΡ ΡΠ΅ΠΊΠ»Π°ΠΌΡ, ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΈΠ²Π°ΡΠ½ΡΠ΅ Pen-Ρ, ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ Ρ ΠΎΡΡΠΈΠ½Π³Ρ Π°ΡΡΠ΅ΡΠΎΠ² ΠΈ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² ΡΠ΅ΠΉΡΠΈΠ½Π³Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΠΏΠΎΠ»Π½ΠΎΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½Π°Ρ JavaScript IDE, CodePen Pro ΡΡΠΎ Ρ ΠΎΡΠΎΡΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ. Π 2017 Π³ΠΎΠ΄Ρ CodePen ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠ»Π° Π½ΠΎΠ²ΡΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» β Projects. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΡΠΌΠΎ Π½Π° ΡΠ°ΠΉΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠ΅Π»ΡΠΌΠΈ ΡΡΠΎΠ½ΡΠ΅Π½Π΄-ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌΠΈ.
4. Observable
Observable ΡΡΠΎ ΠΎΠ±Π»Π°ΡΠ½Π°Ρ JavaScript-IDE, ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ ΠΠ°ΠΉΠΊΠΎΠΌ ΠΠΎΡΡΠΎΠΊΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ» ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² D3.js. Π ΡΠ²ΠΎΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠ΅ ΠΎΠ½ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π»ΡΠ»ΡΡ Jupyter β Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ Π²Π΅Π±-ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π·Π°ΠΌΠ΅ΡΠΎΠΊ Π½Π° Python. Β«ΠΠ°ΠΏΠΈΡΠ½ΡΠ΅ ΠΊΠ½ΠΈΠΆΠΊΠΈΒ» Observable ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ JavaScript-Π·Π°ΠΌΠ΅ΡΠΎΠΊ Π² ΠΎΠ±Π»Π°ΠΊΠ΅, ΠΏΡΠΈΡΠ΅ΠΌ ΠΊΡΠΎΠΌΠ΅ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Ρ ΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠ΅ΠΊΡΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ Markdown.
Demo notebook ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΈΡΠΏΡΡΠ°ΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» Observable ΠΏΠ΅ΡΠ΅Π΄ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ΠΌ Π°ΠΊΠΊΠ°ΡΠ½ΡΠ°. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ΄ Markdown-ΡΠ½ΠΈΠΏΠΏΠ΅ΡΠΎΠ² ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΎΠ²ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΠΎΠ±ΡΡΡΠ½ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΠΏΠΎΡΡΠ½Π΅Π½ΠΈΡ ΠΊ Π±Π»ΠΎΠΊΠ°ΠΌ ΠΊΠΎΠ΄Π° Π² ΡΠ°ΠΌΠΊΠ°Ρ ΠΎΠ΄Π½ΠΎΠΉ Β«Π·Π°ΠΏΠΈΡΠ½ΠΎΠΉ ΠΊΠ½ΠΈΠΆΠΊΠΈΒ». Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΠΎ Π²Π°ΡΠ΅ΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ΅. ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ Π°ΠΊΠΊΠ°ΡΠ½Ρ Π½Π° Observable Π΄Π°Π΅Ρ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½ΠΎΠ²ΡΠ΅ Π·Π°ΠΏΠΈΡΠ½ΡΠ΅ ΠΊΠ½ΠΈΠΆΠΊΠΈ, ΡΠΎΡ ΡΠ°Π½ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈ Π΄Π΅Π»ΠΈΡΡΡΡ ΠΊΠΎΠ΄ΠΎΠΌ Ρ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ.
Teams at Observable ΡΡΠΎ ΠΏΠ»Π°ΡΠ½ΡΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» (ΡΠ΅Π½Π° ΡΡΠ°ΡΡΡΠ΅Ρ ΠΎΡ 9 Π΄ΠΎΠ»Π»Π°ΡΠΎΠ² Π² ΠΌΠ΅ΡΡΡ Π·Π° ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ), ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡΠΈΠΉ Π²Π°ΠΌ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π΄Π»Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ. Π€ΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» ΠΌΠ½ΠΎΠ³ΠΎΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ ΡΠ»Π΅Π½Π°ΠΌ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°Π΄ ΠΎΠ΄Π½ΠΎΠΉ Π·Π°ΠΏΠΈΡΠ½ΠΎΠΉ ΠΊΠ½ΠΈΠΆΠΊΠΎΠΉ.
5. Google Cloud Shell
Google Cloud Shell ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²Π°ΠΌ ΡΡΠ΅Π΄Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π² ΠΎΠ±Π»Π°ΠΊΠ΅. ΠΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ Π΄ΠΎΡΡΡΠΏ ΠΊ ΡΠ΅ΡΠΌΠΈΠ½Π°Π»Ρ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΠΏΡΠΈΡΠ΅ΠΌ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π° ΠΊ Π²Π°ΡΠ΅ΠΌΡ Google-Π°ΠΊΠΊΠ°ΡΠ½ΡΡ.
Cloud Shell ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ°ΠΊΠΈΠ΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΊΠ°ΠΊ MySQL-ΠΊΠ»ΠΈΠ΅Π½Ρ, Docker ΠΈ Kubernetes. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Cloud Shell Π³ΠΎΡΠΎΠ²Π° ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π±ΡΠΊΠ΅Π½Π΄-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ (Node.js, Python ΠΈ PHP). ΠΠ°ΠΌ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ 5 GB ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π² Π²Π°ΡΠ΅ΠΉ Π΄ΠΎΠΌΠ°ΡΠ½Π΅ΠΉ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΠΈ.
Google Cloud Shell Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Google Cloud Platform. Π‘ ΡΠ΅Π½Π°ΠΌΠΈ Google Cloud Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Π·Π΄Π΅ΡΡ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΠΌΠΎΡΠ½Π°Ρ Π²ΠΈΡΡΡΠ°Π»ΡΠ½Π°Ρ ΠΌΠ°ΡΠΈΠ½Π°, ΠΏΠΎΡΡΠ°ΡΠΈΠ²Π½Π°Ρ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½Π°Ρ Π³Π΄Π΅ ΡΠ³ΠΎΠ΄Π½ΠΎ, Google Cloud Shell ΡΡΠΎ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½Π°Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ° Π΄Π»Ρ Π²Π°Ρ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ·ΡΠ²Π°ΡΡ ΡΠ΅ΡΠΌΠΈΠ½Π°Π» ΠΈΠ· Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ Π² Π½Π΅ΠΌ ΠΎΠ±ΡΡΠ½ΡΠ΅ unix-ΠΊΠΎΠΌΠ°Π½Π΄Ρ. ΠΠΎΠΌΠΈΠΌΠΎ ΠΊΠΎΠ½ΡΠΎΠ»ΡΠ½ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ² VIM ΠΈ Emacs, Google ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ (ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π΄Π΅Π»ΠΈΡΡΡ Π½Π°Π΄Π²ΠΎΠ΅). ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° Π²Ρ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»ΠΎΠ²ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ Π² ΠΌΠ΅Π½Ρ ΡΠ»Π΅Π²Π° β ΠΈΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ².
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΌΠ°ΡΠΈΠ½Π΅ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ, Google Cloud Shell ΡΠΏΠΎΡΠΎΠ±Π½Π° Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΡΡ.
ΠΠ°ΠΊΡΡ IDE Π²ΡΠ±ΡΠ°ΡΡ
ΠΠ°Π²Π°ΠΉΡΠ΅ Π²Π΅ΡΠ½Π΅ΠΌΡΡ ΠΊ Π²ΠΎΠΏΡΠΎΡΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΡΡΠ°Π²ΠΈΠ»ΠΈ Π² Π½Π°ΡΠ°Π»Π΅ ΡΡΠ°ΡΡΠΈ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ ΡΠ½ΠΈΠΏΠΏΠ΅ΡΡ ΠΊΠΎΠ΄Π° ΠΈΠ»ΠΈ Π΄Π΅Π»ΠΈΡΡΡΡ ΠΊΠΎΠ΄ΠΎΠΌ Ρ Π΄ΡΡΠ·ΡΡΠΌΠΈ, ΡΡΠΎΠΈΡ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Codetable ΠΎΡ HackerEarth.
ΠΡ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ΄ Π² ΡΡΠ°ΡΡΠΈ ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°Π΄ Π½ΠΈΠΌ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ Ρ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ? ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° JSFiddle ΠΈΠ»ΠΈ CodePen.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½Π°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΌΠ΅ΡΠΈΠ²Π°ΡΡ markdown ΠΈ Π²Π°ΡΠΈ ΠΎΡΡΡΠ²ΠΊΠΈ ΠΊΠΎΠ΄Π°, β Π²ΡΠ±ΠΈΡΠ°ΠΉΡΠ΅ Observable, ΠΎΠ½Π° ΠΈΠ΄Π΅Π°Π»ΡΠ½Π° Π΄Π»Ρ ΡΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΈ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΠ°ΡΡΠ΅ΠΉ.
ΠΡ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ? ΠΡΠΈΡΠΌΠΎΡΡΠΈΡΠ΅ΡΡ ΠΊ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»Ρ Teams Π½Π° Observable ΠΈΠ»ΠΈ Team Plans Π½Π° CodePen Pro.
ΠΡΠ»ΠΈ ΠΆΠ΅ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½Π°Ρ IDE Π² ΠΎΠ±Π»Π°ΠΊΠ΅, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ CodePen Pro ΠΈΠ»ΠΈ Google Cloud Shell.
5 ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²
ΠΠ΅ΡΠΎΡΠ½ΠΈΡΡ β ΡΡΠΎ ΠΈΠ·ΠΎΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ ΠΊΠΎΠ΄Π°. ΠΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²Π΅ΡΡΡΠ°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΠΈ ΡΡΠ°Π·Ρ ΠΆΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠ°Π±ΠΎΡΡ. Π ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° ΠΈΠ»ΠΈ Π²Π΅ΡΡΠΈ ΡΠ΅Π»ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΡΠ°ΠΊΠΈΡ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, JSFiddle, Π΄Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ: Π½Π°Π΄ ΠΎΠ΄Π½ΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»ΡΠ΄Π΅ΠΉ.
ΠΠ΅ΡΠΎΡΠ½ΠΈΡΡ Π½Π°ΡΠ°Π»ΠΈ ΠΌΠ°ΡΡΠΎΠ²ΠΎ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π² 2010β2013 Π³Π³. Π‘Π΅ΠΉΡΠ°Ρ ΡΠ°ΡΡΡ ΡΠ°ΠΊΠΈΡ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ² ΡΡ ΠΎΠ΄ΠΈΡ ΠΎΡ ΠΏΡΠΈΠ²ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ ΠΊΠ°ΠΊ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ ΠΊΠΎΠ΄ΠΈΠ½Π³Π° ΠΈ ΡΠ°Π·Π²ΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². ΠΠ½ΡΡΡΠΈ ΡΠ΅ΡΠ²ΠΈΡΠ° ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π³ΡΡΠΏΠΏΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΠΎΠΆΠ½ΠΎ ΠΎΠ±ΡΠ°ΡΡΡΡ Π² Discord, ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Π² Π³Π°Π»Π΅ΡΠ΅Π΅, ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π½Π° ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ²ΡΠΈΡ ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ².
ΠΠ»Ρ ΡΠ΅Π³ΠΎ Π½ΡΠΆΠ½Ρ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ?
ΠΠ»Π°Π²Π½Π°Ρ Π·Π°Π΄Π°ΡΠ° ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ β Π΄Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΈ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. ΠΠ΄Π΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΡΡΡ ΠΊΠΎΠ΄ΠΈΡΡ ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠ°Π±ΠΎΡΠΈΠ΅ Π·Π°Π΄Π°ΡΠΈ. ΠΠ»Π°Π²Π½ΠΎΠ΅ β ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ΅ΡΠ²ΠΈΡΠ°Ρ Π΄ΠΎΡΡΡΠΏΡ ΠΊ ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌ ΠΎΡΠΊΡΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Π°ΡΡ ΡΠ°Π±ΠΎΡΡ ΠΌΠΎΠ³ΡΡ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅.
ΠΠΎΠ΄ ΠΈΠ· ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π° Stack Overflow, Π₯Π°Π±Ρ ΠΈ ΠΈΡ Π°Π½Π°Π»ΠΎΠ³ΠΈ. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ²ΠΎΡ ΡΠ°Π±ΠΎΡΡ Π΄ΡΡΠ³ΠΈΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΏΡΠΎΡΠΈΡΡ ΠΏΠΎΠΌΠΎΡΠΈ ΠΈΠ»ΠΈ ΡΠΎΠ²Π΅ΡΠ°. ΠΠ»ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ: ΠΏΠΎΠΌΠΎΡΡ ΠΊΠΎΠΌΡ-ΡΠΎ, ΠΎΠ±ΡΡΡΠ½ΠΈΠ² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
Π§Π°ΡΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠΎΠ² Π²ΡΡΠ»ΠΈ Π·Π° ΡΠ°ΠΌΠΊΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ ΠΈ ΡΠΎΠ·Π΄Π°Π»ΠΈ Π»Π΅Π½ΡΡ Ρ ΡΡΠ΅Π½Π΄Π°ΠΌΠΈ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠ°Π±ΠΎΡ. Π ΠΈΡ ΡΠΈΡΠ»Π΅ Codepen ΠΈ Plunker. ΠΠ° ΡΡΠΈΡ ΡΠ΅ΡΡΡΡΠ°Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ ΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ, ΡΡΠ΅Π½Π΄ΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ Π΄ΡΡΠ³ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΠ΅ΡΡ ΠΊΠΎΠ΄ Π² ΠΎΡΠΊΡΡΡΠΎΠΌ Π΄ΠΎΡΡΡΠΏΠ΅, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΏΠ°ΡΡ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΈ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ, ΠΊΠ°ΠΊ ΡΠ΅ΡΠ΅Π½Π° ΡΠ° ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ Π·Π°Π΄Π°ΡΠ°. Π Π΅ΡΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΡΠ°Π·Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈ ΡΡΡΡΠΊΡΡΡΡ ΠΊΠΎΠ΄Π°, ΠΈ Π΅Π³ΠΎ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠΎΡΡΠΎΠΌΡ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΡΠ²ΠΎΠΈ Π»ΡΡΡΠΈΠ΅ ΡΠ°Π±ΠΎΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π² Π»Π΅Π½ΡΡ Ρ ΡΡΠ΅Π½Π΄Π°ΠΌΠΈ, Π½ΠΎ ΠΈ Π² ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ.
Π Π°Π·Π΄Π΅Π» Β«Π’ΡΠ΅Π½Π΄ΡΒ» Π½Π° ΡΠ°ΠΉΡΠ΅ CodePen
CodePen
CodePen β ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΈ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². ΠΠ½ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΡ Π½Π° ΡΠ΅ΡΡΡΠ΅ ΠΎΠΊΠ½Π°. ΠΠ΅ΡΠ²ΡΠ΅ ΡΡΠΈ β ΡΠ°Π±ΠΎΡΠΈΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ, ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ Π΄Π»Ρ HTML, CSS ΠΈ Javascript. ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ β ΠΎΠΊΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π Π½Π΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΊΠΎΠ΄Π°.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΠ³ΡΡ, ΡΠ΄Π΅Π»Π°Π½Π½ΠΎΠΉ ΠΏΡΡΠΌΠΎ Π½Π° CodePen
Π£ CodePen Π³ΠΈΠ±ΠΊΠΈΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ. ΠΠ»Ρ CSS Π·Π΄Π΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡ Less, Sass ΠΈΠ»ΠΈ PostCss. ΠΠ»Ρ JavaScript β ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ jQuery, Lodash ΠΈ React.js, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ Angular ΠΈ Vue.js ΠΈ Π΄ΡΡΠ³ΠΈΠ΅. Codepen ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ°Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ°ΠΊΠ΅ΡΡ JavaScript ΠΈΠ· npm, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ Normalize.css, Autoprefixer ΠΈΠ»ΠΈ PrefixFree. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΈΠ»ΠΈ ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄.
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΠΏΡΠΎΠ΅ΠΊΡΠ° Π² CodePen
ΠΠ΄Π½Π° ΠΈΠ· ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠ΅ΠΉ CodePen β ΡΠ°Π·Π΄Π΅Π» Β«Π’ΡΠ΅Π½Π΄ΡΒ». ΠΡΠΎ Π»Π΅Π½ΡΠ° Ρ ΡΠ°Π±ΠΎΡΠ°ΠΌΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²: Π²Π΅ΡΡΡΠΊΠΎΠΉ, Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ, ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ. ΠΠ΄Π΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΏΠ°ΡΡ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΠ΅, ΠΈΠ·ΡΡΠ°ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ²ΡΠΈΠ΅ΡΡ ΡΠ°Π±ΠΎΡΡ ΠΊ ΡΠ΅Π±Π΅ Π² ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π½Π° Π΄ΡΡΠ³ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.
JSFiddle
JSFiddle β ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ° Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡΡ, ΠΏΠΎΡ ΠΎΠΆΠ΅ΠΉ Π½Π° CodePen. ΠΠ΄Π΅ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, Π²ΠΊΠ»ΡΡΠΈΡΡ Π²Π°Π»ΠΈΠ΄Π°ΡΠΎΡ Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΠΊΠΎΠ΄Π°, Π²ΡΠ±ΡΠ°ΡΡ ΡΠ·ΡΠΊΠΈ ΠΈ ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΡ. Π Π³Π»Π°Π²Π½ΠΎΠ΅ β JSFiddle ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π±ΠΎΠ»ΡΡΠΎΠΉ Π²ΡΠ±ΠΎΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ².
Π JSFiddle Π½Π΅Ρ Π±Π»ΠΎΠ³Π° Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ ΡΠ°Π±ΠΎΡΠ°ΠΌΠΈ, Π½ΠΎ Π·Π°ΡΠΎ Π΅Ρ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌΠΈ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΡΡ, ΡΡΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ β ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° ΠΏΡΠΎΠ΅ΠΊΡ.
Π Π°Π½ΡΡΠ΅ Ρ ΡΡΠΎΠΉ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ Π±ΡΠ» Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ: ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ Π²ΡΡΡΠ½ΡΡ. Π‘Π΅ΠΉΡΠ°Ρ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π½Π΅Ρ: ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π Π²ΠΎΡ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠΊΠ° Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ, Π΅Ρ ΡΠ½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½Π° ΡΡΠΎΡΠΎΠ½Π½ΠΈΠΉ ΡΠ΅ΡΠ²ΠΈΡ.
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ ΠΏΡΠΎΠ΅ΠΊΡΠ° JSFiddle
Plunker
Plunker ΠΏΠΎΡ ΠΎΠΆ Π½Π° ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΊΠΎΠ΄Π°, Π² ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΎΠΊΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π§ΡΠΎΠ±Ρ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠ°Π±ΠΎΡΠ΅, ΡΠ½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ/ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Angular, React.js, AngularJS ΠΈΠ»ΠΈ Preact Π»ΠΈΠ±ΠΎ ΠΎΡΡΠ°ΡΡΡΡ Π½Π° VanillaJS. ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΊΠΎΠ΄Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΏΠ°ΠΊΠ΅ΡΡ npm. ΠΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ, Ρ ΠΎΡΡ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ² ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π½Π΅ΠΏΡΠΎΡΡΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅ΠΉ.
ΠΠ°ΠΊ ΠΈ Π² CodePen, Π·Π΄Π΅ΡΡ Π΅ΡΡΡ Π³Π°Π»Π΅ΡΠ΅Ρ ΡΠ°Π±ΠΎΡ Ρ ΠΎΡΠΊΡΡΡΡΠΌ Π΄ΠΎΡΡΡΠΏΠΎΠΌ ΠΊ ΠΊΠΎΠ΄Ρ. Π Π³Π»Π°Π²Π½ΠΎΠ΅ β Π² Plunker ΠΏΡΠΎΡΡΠ°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΠ°ΠΉΠ»ΠΎΠ². ΠΠ΅ Π½ΡΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΠΎΡΠΎΠ½Π½ΠΈΠ΅ ΡΠ΅ΡΡΡΡΡ: Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΡ ΠΈΡ Ρ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ° Π² ΡΠ°ΠΉΠ»ΠΎΠ²ΠΎΠ΅ Π΄Π΅ΡΠ΅Π²ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΠ· Π³Π°Π»Π΅ΡΠ΅ΠΈ ΡΠ°Π±ΠΎΡ Plunker
StackBlitz
StackBlitz β ΡΡΠΎ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ° Π½Π° Π±Π°Π·Π΅ Visual Studio. ΠΠ΄Π΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° Angular, Vue.js, React.js ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ. ΠΠ»ΡΡ ΡΡΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° β ΠΏΡΠΎΡΡΠ°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° npm Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ ΠΈ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ, ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ². Π Π΅ΡΠ»ΠΈ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΊΡΡΠΎΠΊ ΠΊΠΎΠ΄Π° ΠΈ Π²ΡΡΠ°Π²ΠΈΡΡ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ° ΡΠ°ΠΌΠ° Π½Π°ΠΉΠ΄Π΅Ρ ΠΏΡΠΎΠΏΡΡΠ΅Π½Π½ΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ.
StackBlitz ΡΠ΄ΠΎΠ±Π΅Π½ Π΅ΡΠ΅ ΠΈ ΡΠ΅ΠΌ, ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΎΡΡΠ»Π°ΠΉΠ½: Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ Π΄Π°ΠΆΠ΅ Π±Π΅Π· ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°. ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠ»ΡΡ ΡΡΠΎΠ³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° β ΠΏΡΠΎΡΡΠ°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΠ°ΠΉΠ»ΠΎΠ². Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΠΏΡΠΎΠ΅ΠΊΡ, Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΡΠ½ΡΡΡ Π΅Ρ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡ.
ΠΠΎΡΡΡΠΏΠ½ΡΠ΅ Π² StackBlitz Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ
CodeSandbox
ΠΠ΅ΡΠΎΡΠ½ΠΈΡΠ° CodeSandbox ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΠΊΠ°ΠΊ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΊΡΡΠΊΠΎΠ² ΠΊΠΎΠ΄Π°, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Π½Π°Π΄ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ Ρ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ². Π‘Π΅ΡΠ²ΠΈΡ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°Π½ Ρ GitHub, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΉΠ»Ρ ΠΈΠ· ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π½ΠΈΠΌΠΈ Π² ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ΅. ΠΠ»ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ: ΡΠΎΠ·Π΄Π°ΡΡ Π² ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ΅ Π½ΠΎΠ²ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ ΠΈ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½Π° GitHub.
Π CodeSandbox Π±ΠΎΠ»ΡΡΠΎΠΉ Π²ΡΠ±ΠΎΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² ΠΈ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΊΠΎΠ΄Π°. ΠΠΎ ΠΆΠ΅Π»Π°Π½ΠΈΡ ΠΎΠΊΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΊΡΡΡΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠ°ΠΊ ΠΈ Π½Π° Π΄ΡΡΠ³ΠΈΡ ΡΠ΅ΡΡΡΡΠ°Ρ , Π½Π° CodeSandbox Π΅ΡΡΡ ΡΠ°Π·Π΄Π΅Π» Ρ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌΠΈ. ΠΠΎΠΆΠ½ΠΎ Π·Π°Π³Π»ΡΠ½ΡΡΡ Π² ΠΊΠΎΠ΄ Π΄ΡΡΠ³ΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΠΊΠ°ΠΊ Π½Π°ΠΏΠΈΡΠ°Π½Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ. Π Π΅ΡΠ»ΠΈ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π²ΠΎΠΏΡΠΎΡ β ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π² Discord.
ΠΡΠΈΠΌΠ΅Ρ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π² CodeSandbox
ΠΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ β ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΠΈΠ· ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Π½ΡΡ Π² Π‘Π΅ΡΠΈ. ΠΡΡΡ Π΅ΡΠ΅ Replit, JS Bin, CSSDeck ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ ΠΊΠΎΠ΄Π°, ΠΎ ΠΊΠΎΡΠΎΡΡΡ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
ΠΠΎΠΆΠ΅Ρ Π»ΠΈ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΠ° ΠΏΠΎΠΌΠΎΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΡ Π² ΡΠ°Π±ΠΎΡΠ΅?
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π² Π»ΠΈΡΠ½ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ , Π½ΠΎ ΠΈ Π² ΡΠ°Π±ΠΎΡΠ΅. ΠΠ½Π»Π°ΠΉΠ½-ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°Π΄ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ Π² ΠΎΠ΄ΠΈΠ½ΠΎΡΠΊΡ ΠΈΠ»ΠΈ ΡΠ΅Π»ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ, Π½Π°Ρ ΠΎΠ΄ΠΈΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅ΡΡΡΠΊΠΈ, Π΄Π°Π²Π°ΡΡ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΡΠΉ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΊΠΎΠ΄Ρ ΠΈ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ΄Π΅ΠΈ ΠΏΠ΅ΡΠ΅Π΄ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΎΠΌ Π² ΠΏΡΠΎΠ΅ΠΊΡ. Π’Π°ΠΊΠΆΠ΅ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°ΠΌ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π·Π°ΠΊΠ°Π·ΡΠΈΠΊΠ°ΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°ΡΡ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π·Π°Π΄Π°ΡΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΠ±ΡΠ°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈΠ»ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π§Π°ΡΡΡ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ CodeSandbox, Π²Π²Π΅Π»ΠΈ ΠΊΠΎΡΠΏΠΎΡΠ°ΡΠΈΠ²Π½ΡΠ΅ ΡΠ°ΡΠΈΡΡ Π΄Π»Ρ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΉ. ΠΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΏΡΠΈΠ²Π°ΡΠ½ΡΠΉ Π΄ΠΎΡΡΡΠΏ, ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠ΅ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΡΠ°ΡΡΠ½ΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ npm ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ Π² Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ.
Π ΡΠ΅ΠΌ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²?
ΠΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄, Π½ΠΎ Π½Π΅ ΠΎΠ±ΡΡΡΠ½ΡΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ. ΠΠΎΡΡΠΎΠΌΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ° Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Ρ ΠΎΡΡ Π±Ρ Π½Π°ΡΠ°Π»ΡΠ½ΡΠ΅ Π·Π½Π°Π½ΠΈΡ ΠΎ Π²Π΅ΡΡΡΠΊΠ΅ ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ. ΠΠ΅Π· ΡΡΠΎΠ³ΠΎ Π½ΠΈΠΊΠ°ΠΊ.
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² β ΠΎΡΠΊΡΡΡΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ. ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ±Π»Π°Π·Π½ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΆΡΡ ΡΠ°Π±ΠΎΡΡ, Π½Π΅ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡ Π² Π½Π΅ΠΉ. ΠΡΠΎ ΠΏΠ»ΠΎΡ ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π° Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΌ ΡΡΠ°ΠΏΠ΅ Π²Π°ΠΆΠ½ΠΎ Π½Π°ΡΡΠΈΡΡΡΡ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠΎΠ΄. ΠΠΎ-Π²ΡΠΎΡΡΡ , ΡΡΠΈΡΡΡΡ Π²Π΅ΡΡΡΠΊΠ΅ ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΡΠ°Π·Π±ΠΈΡΠ°Ρ ΡΠΏΠΎΠ½ΡΠ°Π½Π½ΠΎ Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΡΠ°Π±ΠΎΡΡ β Π½Π΅ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠ°Ρ ΠΈΠ΄Π΅Ρ. ΠΠ½Π°Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ, Π° ΡΡΠ΅Π±Π° ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΠΉ. Π’ΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° Π² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅.
ΠΠΎΡ ΡΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΡΡ Π·Π°Π΄Π°Π½ΠΈΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ
ΡΡΠ΅Π½Π°ΠΆΡΡΠΎΠ² HTML Academy
ΠΡΠ»ΠΈ ΡΡΠ²ΡΡΠ²ΡΠ΅ΡΠ΅, ΡΡΠΎ Π·Π½Π°Π½ΠΈΠΉ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, Π½ΠΎ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ΅Π±Ρ Π² Π²Π΅ΡΡΡΠΊΠ΅ ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ β ΠΏΡΠΎΠΉΠ΄ΠΈΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ ΠΎΠ±ΡΡΠ°ΡΡΠΈΠ΅ ΡΡΠ΅Π½Π°ΠΆΡΡΡ. ΠΠ½ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡ Π²Π°Ρ Ρ Π±Π°Π·ΠΎΠ²ΡΠΌΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌΠΈ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ. Π‘ ΠΈΡ ΠΏΠΎΠΌΠΎΡΡΡ Π²Ρ Π½Π°ΡΡΠΈΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΈ Π½Π°ΠΏΠΈΡΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ²ΡΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ Π½Π° JavaScript.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΏΠ΅ΡΠΎΡΠ½ΠΈΡΡ ΡΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΉ ΡΠ΅ΠΎΡΠΈΠ΅ΠΉ
ΠΡ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌ ΡΡΠ΅Π½Π°ΠΆΡΡΡ β ΠΎΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ Π²Π°ΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π½ΡΠ°Π²ΠΈΡΡΡ Π² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅.
ΠΠ°ΠΆΠ°ΡΠΈΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ β ΡΠΎΠ³Π»Π°ΡΠΈΠ΅ Π½Π° ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΠΏΠ΅ΡΡΠΎΠ½Π°Π»ΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ