JavaScript'er

😅Головне, що має гарний вигляд </Codu>

const person = {
  name: "John",
  age: 30
}

for (const [x, y] of Object.entries(person)) {
  console.log(x, y)
}

JavaScript'ер

⌛Loader animation Плавний прояв літер завантаження під час відкриття сторінки. Реалізовано за допомогою CSS. ⤷ Забрати код JavaScript'ер

🆒Добірка безкоштовних онлайн ігор для освоєння CSS - Flexbox Froggy - Coding Fantasy - Flexbox Defense - Grid Garden - CSS Diner JavaScript'ер

👩‍💻JSrobot - це платформер, де вам потрібно писати JavaScript код, для керування роботом. Прикольна гра для практики та вивчення JS 🔗 Посилання: https://lab.reaal.me/jsrobot/ JavaScript'ер

🆒Анімована пам'ятка методів роботи з масивами в JavaScript Не забудь зберегти собі, знадобиться:) JavaScript'ер

🖥Fippin' burgers Різні перетворення бургер-кнопки при натисканні на неї. Реалізовано за допомогою CSS. ⤷ Забрати код JavaScript'ер

👩‍💻Abracadabra — автоматизований рефакторинг JS та TS для VSCode Фічі Abracadabra: - ярлики для швидкого запуску найкорисніших опцій рефакторингу - Гнучка настройка UI — працює з файлами .js , .jsx , .ts , .tsx , .vue та .svelte 🐱GitHub ▪️Розширення VSCode JavaScript'ер

☀️reveal.js - open-source фреймворк для створення HTML-презентацій Фреймворк має потужний набір функцій, включаючи підтримку Markdown, можливість створення анімацій, експорт у PDF, наявність нотаток для доповідача, підтримку верстки в LaTeX, код з підсвічуванням синтаксису та зручний API. 🐱GitHub ▪️Приклад такої презентації JavaScript'ер

Англійська у Project 12 – це коли графік обираєш ти 💡 Більш ніж 18 варіантів найзручніших днів та часу уроків, можливість переносити заняття хоч за 5 хвилин до початку. ▪️ старт Online груп – 24 червня ▪️ одна година англійської від 79 грн ▪️ 4 заняття на тиждень по 90 хв: 2 у форматі Zoom із групою та викладачем та ще 2 самостійно на нашій платформі 📲 Навчайся на базі цифрового підручника 12 Tracks з розумним тренажером SMARTE, який дає можливість персоналізувати твоє навчання та фокусуватися саме на тому, що найбільше потребує уваги. Опануй цілий рівень за 3 місяці, проходь самостійні уроки з інтерактивними вправами (~ 38 видів), змінюй графік занять (~18 варіантів) та перенось уроки без обмежень. У Project 12 навчались вже понад 18000 студентів в Україні та Польщі. Приєднуйся і ти! Встигни записатися на Безкоштовний урок 💛 Для цього проходь онлайн-текст на визначення рівня: https://bit.ly/3xbGMkP 📒 Telegram школи Р12

🥸Створення анімації кадрування фото У нас є дві відмінні властивості: object-fit і object-position. За допомогою їх можна змінювати розміри зображення, не впливаючи на співвідношення його сторін.

<input type="checkbox"/> <br> <img src="img.png" alt="img"/> img { width: 330px; height: 200px; transition: 2s; } input:checked + br + img { width: 500px; height: 400px; object-fit: cover; object-position: left-top; transition: width 2s, height 3s; }

JavaScript'ер

📎Cyber ​​Swiss Army Knife - JS-додаток для шифрування, кодування, стиснення та аналізу даних CyberChef - це інтуїтивно зрозумілий додаток на JavaScript для виконання всіляких операцій у браузері, таких як кодування, XOR і Base64, або більш складне шифрування, наприклад AES, DES і Blowfish, або створення бінарних і шістнадцяткових дампів. Ну і стиснення та декомпресія даних, обчислення хешів та контрольних сум, розбір IPv6 та X.509, зміна кодувань символів та багато іншого. Швидкий старт з Docker: docker run -it -p 8080:80 ghcr.io/gchq/cyberchef:latest 🐱GitHub ▪️CyberChef онлайн JavaScript'ер

⌛TypeHero - платформа для вивчення TypeScript на практиці з готовими завданнями та можливістю створення власних завдань 🔗Посилання: https://typehero.dev JavaScript'ер

✨Цікава ідея для прелоадера сторінки на чистому CSS Фігурки тетрісу нескінченно складаються в правильному порядку - виглядає досить оригінально. Може непогано позначитися на конверсії. ▪️Codepen JavaScript'ер

📎Маскування в CSS за допомогою властивості mask Властивість встановлює зображення, яке використовується як шар маски для елемента

<img src="picture.jpg" alt="...">

Властивість визначається подібно до background:

img { mask: url("../shape.png"); mask-repeat: no-repeat; mask-size: cover; mask-position: center; }

Або можна записати в один рядок, як на картинці. JavaScript'ер

👩‍💻CSSBattle - це онлайн-гра в Code Golfing. Тут ви намагаєтеся візуально повторити "Цілі" за мінімально можливу кількість рядків CSS-коду і битися з гравцями з усього світу, щоб потрапити на вершину таблиці лідерів 🔗 Посилання: https://cssbattle.dev/ JavaScript'ер

🔍Листівка з анімованим фільмом Реалізовано в HTML і CSS. 🔗 Код: Codepen JavaScript'ер

📌Скорочення CSS в Emmet Emmet – це дуже корисний інструмент, який входить до складу багатьох текстових редакторів та IDE, таких як VS Code. Хоча Emmet переважно корисний для генерації HTML з абревіатур, він може бути корисний і для CSS. Ось кілька цікавих скорочень, які допоможуть вам писати CSS дуже швидко ⚡️ JavaScript'ер

⌛Як працює JSON.parse() в JS? Функція JSON.parse: Перетворює рядок JSON (текст, форматований відповідно до поточного стандарту) на об'єкт або значення JavaScript Вона також може приймати другий аргумент - функцію, яка буде викликатись для кожної властивості об'єкта, що повертається функцією. Цей аргумент є необов'язковим. JavaScript'ер