πŸ› οΈπŸŽ― 12 инструмСнтов для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΊΡ€ΡƒΡ‚ΠΎΠ³ΠΎ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π°

Помнишь, ΠΊΠ°ΠΊ Π°Π»Ρ…ΠΈΠΌΠΈΠΊΠΈ ΠΌΠ΅Ρ‡Ρ‚Π°Π»ΠΈ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ свинСц Π² Π·ΠΎΠ»ΠΎΡ‚ΠΎ? Π’Π°ΠΊ Π²ΠΎΡ‚, ΠΌΡ‹ нашли 12 инструмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ΄Π΅Π»Π°ΡŽΡ‚ Ρ‚ΠΎ ΠΆΠ΅ самоС с Ρ‚Π²ΠΎΠΈΠΌ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ΠΎΠΌ.

πŸ› οΈπŸŽ― 12 инструмСнтов для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΊΡ€ΡƒΡ‚ΠΎΠ³ΠΎ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π°
Π­Ρ‚ΠΎΡ‚ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» взят ΠΈΠ· нашСй СТСнСдСльной email-рассылки, посвящСнной Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Ρƒ. ΠŸΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² числС ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΊΡ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ дайдТСст.

Neumorphism

НСоморфизм – Π½Π°Π±ΠΈΡ€Π°ΡŽΡ‰ΠΈΠΉ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ Ρ‚Ρ€Π΅Π½Π΄ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ интСрфСйсов, Π½Π΅Ρ‡Ρ‚ΠΎ срСднСС ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Π΅Π·Π½Π°Π΄Π΅ΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ скСвоморфизмом ΠΈ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌ Π½Π°Π±ΠΈΠ²Π°Ρ‚ΡŒ оскомину плоским Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Π΅ Π² этом стилС, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Ρ‚ΠΎ слСгка приподняты Π½Π°Π΄ Ρ„ΠΎΠ½ΠΎΠΌ. Π­Ρ‚ΠΎΡ‚ эффСкт достигаСтся Π·Π° счСт использования мягких Ρ‚Π΅Π½Π΅ΠΉ ΠΈ свСтовых эффСктов. Neumorphism.io позволяСт Π²Π°ΠΌ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ этим Ρ‚Ρ€Π΅Π½Π΄ΠΎΠΌ, прСдоставляя Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€, радиус, расстояниС, ΠΈΠ½Ρ‚Π΅Π½ΡΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, Ρ€Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ ΠΈ Ρ„ΠΎΡ€ΠΌΡƒ элСмСнтов нСоморфичСского Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Neumorphism
Neumorphism

UIverse

UIverse – огромная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° UI-элСмСнтов, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Ρ… Π²ΠΎ всСвозмоТных стилях. Π—Π΄Π΅ΡΡŒ Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠ΄Π°Ρ‡Π½ΠΎ Π²ΠΏΠΈΡˆΠ΅Ρ‚ΡΡ Π² самый ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.

Ray.so

Ray.so создаСт красивыС сниппСты (Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π°) для ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π³Π°ΠΉΠ΄ΠΎΠ² ΠΈ Ρ‚ΡƒΡ‚ΠΎΡ€ΠΈΠ°Π»ΠΎΠ².

Icon Maker

Icon Maker – Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΊΡ€ΡƒΡ‚ΠΎΠΉ сСрвис ΠΎΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Ray.so: здСсь ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈ быстро ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ идСально ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π²Π°ΡˆΠ΅ΠΌΡƒ UI.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ кастомной ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Icon Maker
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ кастомной ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Icon Maker

ReactToPrint

ReactToPrint позволяСт Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΡ‚ΡŒ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΏΠ΅Ρ‡Π°Ρ‚Π½Ρ‹Π΅ вСрсии ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… React-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Он создаСт ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ iframe с содСрТимым для ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°Ρ‚Π΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π½Π° ΠΏΡ€ΠΈΠ½Ρ‚Π΅Ρ€ ΠΈΠ»ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ PDF. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ возмоТности:

  • ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈΠ»ΠΈ элСмСнт для ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ кастомныС стили.
  • ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ².
  • Π˜ΠΌΠ΅Π΅Ρ‚ коллбэки для выполнСния дСйствий Π΄ΠΎ ΠΈ послС ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ.
  • Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

Kontra.js

Kontra.js – ΠΌΠΈΠΊΡ€ΠΎΠ±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π½Π° JavaScript, ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ созданная для участия Π² сорСвновании Js13kGames, Π³Π΄Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ³Ρ€Ρ‹ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ 13 ΠΊΠΈΠ»ΠΎΠ±Π°ΠΉΡ‚Π°ΠΌΠΈ. Π—Π°Π΄Π°Ρ‡Π° Kontra – Π½Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для создания ΠΈΠ³Ρ€ (ΠΊΠ°ΠΊ это Π΄Π΅Π»Π°ΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Phaser), Π° ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ основных аспСктов ΠΈΠ³Ρ€Ρ‹, срСди ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ…:

  • Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ассСтов (Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Π·Π²ΡƒΠΊΠΎΠ²);
  • ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π° (ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π°, ΠΌΡ‹ΡˆΡŒ);
  • ΠΈΠ³Ρ€ΠΎΠ²ΠΎΠΉ Ρ†ΠΈΠΊΠ» (ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ состояния ΠΈΠ³Ρ€Ρ‹ ΠΈ отрисовка);
  • спрайты (изобраТСния пСрсонаТСй ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ²).

НСсмотря Π½Π° ΠΌΠΈΠΊΡ€ΠΎΡ€Π°Π·ΠΌΠ΅Ρ€, Kontra Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ вСсьма ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Π΅ структуры Π΄Π°Π½Π½Ρ‹Ρ… (ΠΏΡƒΠ»Ρ‹ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΈ ΠΊΠ²Π°Π΄Ρ€ΠΎΠ΄Π΅Ρ€Π΅Π²ΡŒΡ), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ для быстродСйствия ΠΈ экономии памяти. На сайтС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π΅ΡΡ‚ΡŒ галСрСя ΠΌΠΈΠΊΡ€ΠΎΠΈΠ³Ρ€, созданных ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ. Π‘Ρ€Π΅Π΄ΠΈ Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ интСрСсныС Ρ€Π°Π±ΠΎΡ‚Ρ‹ – пригодятся Π² качСствС источника вдохновСния, Ссли Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ JS-ΠΈΠ³Ρ€Ρƒ.

Swapy

Swapy позволяСт ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ любой ΠΌΠ°ΠΊΠ΅Ρ‚ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ интСрфСйс с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ пСрСтаскивания элСмСнтов – ΠΈ всСго Π·Π° нСсколько строк ΠΊΠΎΠ΄Π°: Π²Ρ‹ просто ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊΠΈΠ΅ элСмСнты ΡΠ²Π»ΡΡŽΡ‚ΡΡ слотами ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ элСмСнты ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ. Swapy позволяСт ΠΎΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Ρ‚ΡŒ события Π·Π°ΠΌΠ΅Π½Ρ‹ элСмСнтов ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ со всСми Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ/Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ.

WebJSX

WebJSX – минималистичная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° для создания Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с использованиСм синтаксиса JSX ΠΈ Π²Π΅Π±-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Она ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для упрощСния Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈ фокусируСтся Π½Π° основных функциях – создании элСмСнтов ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ DOM:

  • createElement – создаСт Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ DOM-элСмСнты с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ синтаксиса JSX.
  • applyDiff – эффСктивно примСняСт измСнСния ΠΊ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌΡƒ DOM, сравнивая Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ ΡƒΠ·Π»Ρ‹ с Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΌΠΈ элСмСнтами Π½Π° страницС.

WebJSX идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для случаСв, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ простоС Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΉ синтаксис JSX, Π½ΠΎ ΠΏΡ€ΠΈ этом Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ слоТныС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ с ΠΈΠ·Π±Ρ‹Ρ‚ΠΎΡ‡Π½ΠΎΠΉ для простых ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ.

Web Maker

Web Maker – ΠΎΡ„Ρ„Π»Π°ΠΉΠ½-пСсочница для экспСримСнтов с HTML, CSS ΠΈ JavaScript:

  • ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π±Π΅Π· доступа ΠΊ сСти.
  • МоТно ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ свои ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ автосохранСниС.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ языки-прСпроцСссоры, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Jade, Markdown для HTML, SCSS ΠΈ LESS для CSS, Π° Ρ‚Π°ΠΊΠΆΠ΅ ES6, CoffeeScript ΠΈ TypeScript для JavaScript.
  • Π˜ΠΌΠ΅Π΅Ρ‚ встроСнныС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ для популярных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ (React, Vue, Tailwind ΠΈ Π΄Ρ€.)
  • ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ автоматичСскиС подсказки ΠΏΡ€ΠΈ написании ΠΊΠΎΠ΄Π°.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΎΠ².
  • ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ HTML-Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΡ… Π² CodePen.
Web Maker

Sniper CSS

Sniper CSS – Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для Chrome, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈ ΡƒΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒ Π½Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ CSS-стили. Плагин взаимодСйствуСт с Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ собираСт всС CSS-ΠΏΡ€Π°Π²ΠΈΠ»Π°:

  • ΠœΠΎΠΆΠ΅Ρ‚ ΡΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ сцСнарии Ρ€Π°Π±ΠΎΡ‚Ρ‹ (ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Ρ‚Π΅ΠΌΠ½ΠΎΠΉ ΠΈ свСтлой Ρ‚Π΅ΠΌ, Ρ€Π°Π·Π½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ мСдиазапросов ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ User Agents).
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π°Π½Π°Π»ΠΈΠ· стилСй для псСвдосостояний элСмСнтов (hover, focus ΠΈ active).
  • АнализируСт ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ keyframes.
  • ΠžΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ prefers-motion (ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΉ), pointer (Ρ‚ΠΈΠΏ указатСля) ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ измСнСния стилСй ΠΏΠΎΠ΄ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Π΅ условия ΠΈ прСдпочтСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

Π’ ΠΈΡ‚ΠΎΠ³Π΅ Sniper CSS позволяСт Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ CSS-ΠΊΠΎΠ΄, Ρ‚Π΅ΠΌ самым ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Recharts

Recharts – Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° для построСния Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² Π² React-прилоТСниях. ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€ настраиваСмых ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ – Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Ρ…, столбчатых, ΠΊΡ€ΡƒΠ³ΠΎΠ²Ρ‹Ρ…, Ρ‚ΠΎΡ‡Π΅Ρ‡Π½Ρ‹Ρ… ΠΈ Ρ‚.Π΄. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ возмоТности:

  • Анимация – Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ.
  • ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ – Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ автоматичСски ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠΎΠ΄ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ экрана.
  • Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ – ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ элСмСнты, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° SVG – Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ строятся с использованиСм SVG, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ лСгковСсной β€” ΠΎΠ½Π° зависит Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ D3.

На сайтС Recharts ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² – ΠΎΡ‚ простых Π΄ΠΎ слоТных:

Recharts

Creatie

Creatie – бСсплатная ИИ-ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, Π°ΡƒΠ΄ΠΈΡ‚Π° ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ UI/UX, эдакая Figma Π½Π° стСроидах. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ инструмСнты:

  • Creatie Wizard – ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ созданиС ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈ позволяСт автоматичСски Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ΄ Π·Π°Π΄Π°Ρ‡ΠΈ.
  • Design auditor – ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ Π°ΡƒΠ΄ΠΈΡ‚ элСмСнтов ΠΈ опрСдСляСт, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ… Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ, ΠΈ ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ.
  • Magicon – ΡƒΠ»ΡƒΡ‡ΡˆΠ°Π΅Ρ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ИИ.
  • AI image enhancer – ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ качСство ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Какими инструмСнтами для Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ΡΡŒ Ρ‡Π°Ρ‰Π΅ всСго? ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ своими Ρ„Π°Π²ΠΎΡ€ΠΈΡ‚Π°ΠΌΠΈ Π² коммСнтариях!

***

Π‘Ρ‚Π°Π½ΡŒ ΠΏΠΎΠ²Π΅Π»ΠΈΡ‚Π΅Π»Π΅ΠΌ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π°

ΠšΡƒΡ€Ρ Frontend Basic ΠΎΡ‚ Proglib academy: ваш ΠΏΡƒΡ‚ΡŒ Π² ΠΌΠΈΡ€ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

  • 26 Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊΠΎΠ² ΠΈ 28 практичСских Π·Π°Π΄Π°Π½ΠΈΠΉ
  • Π‘Ρ‚Π΅ΠΊ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ: HTML, CSS, JavaScript, React.js, Git
  • Π€ΠΎΡ€ΠΌΠ°Ρ‚: 2 мСсяца ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ обучСния Π² ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ Ρ‚Π΅ΠΌΠΏΠ΅
  • ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ для ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ: ΠΎΡ‚ простой вСрстки Π΄ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°
  • ΠžΠ±Ρ€Π°Ρ‚Π½Π°Ρ связь ΠΎΡ‚ ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… ΠΏΡ€Π΅ΠΏΠΎΠ΄Π°Π²Π°Ρ‚Π΅Π»Π΅ΠΉ
  • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСнторства
  • МСдианная Π·Π°Ρ€ΠΏΠ»Π°Ρ‚Π° выпускников: 98 000 β€” 123 000 Ρ€ΡƒΠ±Π»Π΅ΠΉ Π² мСсяц

ИдСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ², junior-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈ Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Ρ…ΠΎΡ‡Π΅Ρ‚ ΡƒΠ³Π»ΡƒΠ±ΠΈΡ‚ΡŒ свои знания Π²ΠΎ frontend. БСссрочный доступ ΠΊ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°ΠΌ курса ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π² ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎΠΌ Ρ‚Π΅ΠΌΠΏΠ΅ ΠΈ всСгда ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΎΡΠ²Π΅ΠΆΠΈΡ‚ΡŒ знания.

Π›Π£Π§Π¨Π˜Π• БВАВЬИ ПО Π’Π•ΠœΠ•

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° программиста
24 сСнтября 2017

6 сСрвисов для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π±Π»ΠΎΠΊ-схСмами

Π—Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ ΠΈ быстрСС Π΅Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ€Π°...