JavaScript'er

😮CSS властивість field-sizing Дозволяє маніпулювати поведінкою полів форми при заповненні За значення field-sizing: content; - відключить стандартну поведінку та дозволить підлаштовувати розмір полів форми залежно від контенту field-sizing: fixed; збереже поточну поведінку, і поле введення форми не змінюватиметься у розмірах

 input,
textarea,
select{
field-sizing: content;
min-width: 50px;
max-width: 250px;
padding: 10px 20px;
}

Експериментальна технологія, підтримка 66.51% JavaScript'ер

🥸Гід JavaScript для початківців - це неймовірно титанічна праця, та ще й у безкоштовному доступі. Він написаний простою англійською - додаткова мотивація та можливість підтягнути свою англійську:) 🔗Посилання: https://wesbos.com/javascript JavaScript'ер

🔍Step Indicator Індикатор кроків. Реалізовано за допомогою CSS та JavaScript. ⤷ Забрати код JavaScript'ер

⭐️More Buttons with animations Набір кнопок з анімацією. Реалізовано за допомогою CSS. ⤷ Забрати код JavaScript'ер

📌patterns — найпотужніший ресурс із патернів проектування веб-додатків для досвідчених розробників 🔗Посилання: https://www.patterns.dev/ JavaScript'ер

🔍Шпаргалка по БЕМ, на якій можна наочно подивитися структуру компонентів верстки, що часто використовуються, і варіанти найменування таких компонентів та їх дочірніх елементів 🔗Посилання: https://9elements.com/bem-cheat-sheet/ JavaScript'ер

🌧Питання із співбесіди Різниця між event.target та event.currentTarget? Відповідь: У JavaScript, при обробці подій, об'єкт event надає нам доступ до різних властивостей та методів, пов'язаних із цією подією. Властивості event.target і event.currentTarget часто плутають, але між ними є суттєва різниця: 1. event.target : — Це посилання на елемент, на якому сталася подія. Тобто це фактичний елемент, який викликав подію. - event.target буде посилатися на елемент button, якщо клацнути по ньому, оскільки саме він викликав подію. 2. event.currentTarget — Це посилання на елемент, на якому обробник події було прикріплено. Тобто це елемент, який ми використовували для прикріплення обробника події. - event.currentTarget посилатиметься на елемент div, оскільки саме на нього ми прикріпили обробник події.

У прикладі коду видно, що при натисканні на кнопку всередині div, event.target буде посилатися на елемент button, а event.currentTarget на елемент div.

JavaScript'ер

⭐️Метод flatMap() - може значно спростити роботу з масивами масивів або операції, що вимагають спочатку перетворити кожен елемент масиву, а потім згладити результат Даний метод спочатку застосовує функцію кожного елемента вихідного масиву, а потім застосовує метод flat() до результату. Приклад використання: Допустимо, у вас є масив чисел, і ви хочете замінити кожне число масивом його квадрата та куба. Ось як ви можете це зробити з використанням map() та flat() окремо:

let arr = [1, 2, 3, 4]; let mappedAndFlattened = arr.map(x => [x * x, x * x * x]).flat(); console.log(mappedAndFlattened); // [1, 1, 4, 8, 9, 27, 16, 64]

Тепер, ось як можна спростити те саме за допомогою flatMap() :

let arr2 = [1, 2, 3, 4]; let mappedAndFlattened2 = arr2.flatMap(x => [x * x, x * x * x]); console.log(mappedAndFlattened2); // [1, 1, 4, 8, 9, 27, 16, 64]

В обох прикладах результат буде однаковим, але використання flatMap() дозволяє зробити код компактнішим. Цей метод може бути особливо корисним при роботі з даними, де необхідно провести маніпуляції з елементами масиву і відразу спростити структуру даних, скорочуючи кількість кроків і роблячи ваш код більш читаним. JavaScript'ер

🎮Scroll Driven Portal Layout Макет порталу з незвичайною реалізацією анімації прокручування. Реалізовано за допомогою CSS та JavaScript. ⤷ Забрати код JavaScript'ер

👑Поділюсь парочкою корисних ресурсів: https://htmlrecipes.dev/ — проект із прикладами семантичних секцій, блоків, карток тощо. https://smolcss.dev/ — сучасні CSS-рішення для різних кейсів. JavaScript'ер

⏺Мрієш заробляти від 1900$ на місяць працюючи вдома? Кібербезпека - те що тобі потрібно ! За статистикою спеціаліст з Кіберпезпеки в Україні в середньому заробляє 19 833 грн. на тиждень Або 495,83 грн. на годину 😮‍💨 Хотіли б так само? ✅Реєструйтесь на безкоштовний марафон з Кібербезпеки від GoIT. Спеціаліст з кібербезпеки — це справжня професія майбутнього, тренд на яку лише починає набирати обертів. 🚀Не втрачай можливість, реєструйся скоріше: https://i.goit.global/XuIXc

💡Варіативні шрифти Один варіативний шрифт зберігається в одному файлі, але здатний замінити собою безліч різних шрифтів, що зберігаються в різних файлах. Традиційно під кожну вагу (жирність) чи стиль (italic, bold, light) шрифту вам треба завантажити кілька відповідних шрифтів, файлів. З OpenType варіативним файлом шрифту, ви можете згенерувати безліч різних варіацій шрифту причому будь-якої градації JavaScript'ер

🎮Дві гарні мінімалістичні шпаргалки Flexbox і Grid https://flexbox.malven.co/ https://grid.malven.co/ ...на перший час дуже корисно Тільки немає моєї улюбленої властивості place-content: center; (скорочений запис для align-content та justify-content ), який дозволяє одним рядком центрувати дочірні елементи - https://developer.mozilla.org/en-US/docs/Web/CSS/place-content JavaScript'ер

☀️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'ер