JavaScript'er

🌈Header Menu Незвичайне перетворення кнопки бургер в меню. Реалізовано з допомогою SCSS. ⤷ Забрати код JavaScript'ер

📌Властивість shape-outside Визначає форму, навколо якої має обтікатися сусідній вбудований вміст. Зазвичай це робиться для того, щоб текст міг перемальовуватись за такою фігурою, як коло, еліпс чи багатокутник

.column - left .shape { float: right; shape-outside: circle(100px at 100% 50%); }

Добірка прикладів використання цієї властивості — Посилання JavaScript'ер

💬Питання із співбесіди Яка різниця між блоковими та малими елементами? Відповідь: Різниця між блоковими та малими елементами наступна: • Рядкові елементи можуть містити лише дані або інші малі елементи, а в блочні допустимо вкладати інші блочні елементи, малі елементи, а також дані. Іншими словами, малі елементи ніяк не можуть зберігати блокові елементи. • Блокові елементи завжди починаються з нового рядка, а малі таким чином не акцентуються. • Блокові елементи займають всю доступну ширину, наприклад, вікна браузера, а ширина малих елементів дорівнює їхньому вмісту плюс значення відступів, полів та меж JavaScript'ер

📎Button Hover Styles Вибір ефектів для кнопок при наведенні курсору. Реалізовано з допомогою SCSS. ⤷ Забрати код JavaScript'ер

😅Головне, що має гарний вигляд </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'ер