JavaScript'er

☀️bulletproof-react — проста та масштабована архітектура для створення готових до продакшену додатків React Цей репозиторій показує структуру для створення React-додатків, які зручно розвивати та підтримувати. Виходячи з досвіду автора (alan2207) він працював з великою кількістю різних кодових баз, представлена ​​архітектура виявляється найбільш ефективною. 🐱GitHub JavaScript'ер

🔍Користувальницький текст маркера списку CSS counter(list-item) — це спеціальне значення лічильника, яке доступне за замовчуванням і містить номер поточного елемента списку в упорядкованому списку. JavaScript'ер

▶️Оригінальна ідея для пет-проекту на JavaScript Цей годинник відображає поточний час у семисегментному стилі; час відображається у власному коді JavaScript 🔹Переглянути наживо JavaScript'ер

🌈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'ер