![VS [Front-end]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1sfz5B%2F5219802342310929784%3Fty%3Dl&w=48&q=75){kind=small}
VS [Front-end]
Open in Telegram
Вітаємо на каналі про JavaScript,який здивувує вас більше,ніж реклама,яка знає,що ви шукаєте в Інтернеті!На каналі ми збираємося розповісти вам все про JavaScript. Якщо у вас виникли питання зверніться до адміністраторів: -@vlad_sha2 -@alina_mytsa
Show more2 540
Subscribers
No data24 hours
-87 days
-2730 days
Posts Archive
![VS [Front-end]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1sfz5B%2F5219802342310929784%3Fty%3Dx&w=64&q=75){kind=small}
2 540
Кнопки на будь-який смак, розмір, форму і анімацію 👀
ui-buttons - 100 сучасних CSS-кнопок. Будь-який стиль, який ви тільки можете собі уявити😄
🔗ПОСИЛАННЯ
#useful
👀 Telegram | Youtube | LinkedIn
2 540
2 540
You Must Build a Lighthouse🧑💻
Це гра, яка створена виключно за допомогою HTML та CSS (SCSS), без використання JavaScript.
У цій грі кожен квадрат, де можна побудувати частину будинку, представлений як радіокнопка. При активації цих радіокнопок застосовуються відповідні CSS-стилі, що дозволяє гравцеві поступово будувати маяк.
Вихідний код гри можна знайти на GitHub:
https://github.com/crimson-projects/pure-css-game-build-lighthouse?utm_source=chatgpt.com
👀 Telegram | Youtube | LinkedIn
2 540
Властивість z-index в CSS💬
z-index визначає порядок шарів (stack order) елементів на сторінці, тобто який елемент буде зверху, а який — знизу, якщо вони перекриваються.
Основні моменти:
1. Приймає числові значення:
• Чим більше значення, тим ближче до користувача (вище шар).
• Чим менше значення, тим далі шар.
2. Впливає лише на позиціоновані елементи:
• Елементи повинні мати властивість position, яка відрізняється від static (тобто relative, absolute, fixed або sticky).
3. Може мати значення:
• auto — використовує значення батьківського елемента.
• Числові значення (1, 10, -1, тощо).
• inherit — успадковує значення від батьківського елемента.
Можна використовувати для:
1. Відображення меню або модального вікна поверх решти сторінки.
2. Накладання елементів у складних дизайнах.
3. Роботи з анімаціями, коли потрібно змінити порядок шарів.
👀 Telegram | Youtube | LinkedIn
2 540
Вирішили спробувати себе у фрілансі, і не знаєте де шукати проекти?
Зібрали для Вас список бірж, де можна знайти замовника😉
1. Upwork
Одна з найбільших фріланс платформ для будь-яких спеціалістів, включаючи розробників. Містить великий вибір проєктів та клієнтів.
2. FreelanceHunt
Українська біржа для фрілансерів. Проста у використанні, з великим попитом на розробників та дизайнерів.
3. Freelance.ua
Локальна українська біржа з широким вибором невеликих завдань і проєктів.
4. Fiverr
Міжнародна платформа, орієнтована на короткострокові завдання (гнучкість та фіксована оплата).
5. Contra
Фріланс платформа з проєктами для розробників, дизайнерів, маркетологів.
6. Peopleperhour
Європейська платформа для пошуку проєктів у розробці, дизайні, копірайтингу.
7. Toptal
Преміальна платформа для розробників із високими вимогами до фрілансерів.
8. Jobble
Більше орієнтована на тимчасові роботи, але іноді доступні й IT вакансії.
9. Flexjobs
Платформа для віддаленої роботи в різних галузях, включаючи розробку.
10. SimplyHired
Агрегатор вакансій із доступом до пропозицій для розробників і IT спеціалістів.
11. Guru
Міжнародна платформа для фрілансерів з різних сфер, включаючи IT.
12. Behance
Платформа для дизайнерів, але корисна для фронтенд-розробників, що працюють із UX/UI.
13. 99designs
Фокусується на графічному дизайні, але часто потрібна допомога фронтенд-розробників.
14. Dribble
Схожа на Behance, платформа для дизайнерів та креативних розробників.
15. Blend
Платформа для фахівців з IT, маркетингу та дизайну.
16. Welocalize
Платформа для роботи з локалізацією, де також бувають технічні проєкти для розробників.
17. Topcodes
Менш відома платформа для розробників, що пропонує завдання та фріланс-проєкти.
18. Crossover
Платформа для висококваліфікованих спеціалістів з великими оплатами.
19. We Work Remotely
Одна з найбільших платформ для пошуку дистанційної роботи, включаючи вакансії для розробників, дизайнерів та інших IT-спеціалістів. Пропонує як фріланс, так і постійну віддалену роботу.
20. LinkedIn ProFinder
Функція LinkedIn для фрілансерів і консультантів, де можна знайти проєкти в розробці, маркетингу, дизайні тощо.
#resource
👀 Telegram | Youtube | LinkedIn
2 540
Обробка помилок за допомогою try/catch/finally 📱
Конструкція
try/catch/finally у JavaScript дозволяє ефективно обробляти помилки у вашому коді. Вона складається з трьох основних блоків:
1. try: У цьому блоці виконується основний код. Якщо під час його виконання виникає помилка, програма переходить до блоку catch.
2. catch: Цей блок активується у випадку помилки в блоці try. Він отримує об’єкт помилки, який можна використати для отримання деталей про проблему.
3. finally: Цей блок виконується завжди, незалежно від того, чи була помилка. Він підходить для завершальних операцій, таких як очищення ресурсів.
Де це корисно:
• Отримання даних із зовнішніх джерел:
Наприклад, при запитах до API, де можливі збої в мережі або некоректні відповіді.
• Введення даних користувачем:
При обробці непередбачуваних або неправильних даних.
• Складні обчислення:
Для запобігання аварійному завершенню програми через некоректні вхідні дані.
• Сторонні бібліотеки:
Для обробки несподіваних помилок, які можуть виникати в коді, що вам не підконтрольний.
Ця конструкція допомагає уникнути аварійного завершення програми та забезпечує надійність у виконанні навіть за наявності помилок.
👀 Telegram | Youtube | LinkedIn
2 540
Певно, тисячі нереально красивих анімацій для ваших проектів безкоштовно і навіть без реєстрації 👀
Зробіть свій сайт в 10 разів привабливішим за допомогою Aceternity UI. Зберігайте і не губіть🫶🏽🤫
🔗ПОСИЛАННЯ
#useful #resource
👀 Telegram | Youtube | LinkedIn
2 540
Що таке JavaScript Intersection Observer API? 📱
Це інструмент для асинхронного спостереження за змінами видимості елемента відносно його батьківського контейнера або області перегляду (viewport). API дозволяє дізнатися, коли елемент потрапляє в зону видимості (intersects), і виконати певні дії.
Використовується для:
1. Лінивого завантаження зображень.
2. Анімації при скролінгу.
3. Відстеження видимості реклами.
4. Підвантаження нових даних, коли користувач дійшов до кінця сторінки.
Приклад з лінивим завантаженням зображень:
HTML <img class="lazy" data-src="example.jpg" alt="Lazy loaded image"> <img class="lazy" data-src="example2.jpg" alt="Another lazy loaded image">Атрибут data-src зберігає шлях до зображення, а src не заповнений, щоб уникнути завантаження до часу.
// Знаходимо всі зображення з класом "lazy"
const images = document.querySelectorAll('.lazy');
// Створюємо Intersection Observer
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // Завантажуємо зображення
img.classList.remove('lazy'); // Видаляємо клас
observer.unobserve(img); // Зупиняємо спостереження за цим елементом
}
});
});
// Прив'язуємо спостерігач до кожного зображення
images.forEach(img => {
imageObserver.observe(img);
});
2 540
⚡ Протистояння розробників і дизайнерів: одвічна проблема чи айтішний стереотип?
У новому випуску YouTube подкасту «Цього разу» поговорили про те, як комунікувати з інтровертами, визнавати помилки та працювати злагоджено в команді.
ТУТ:
➜ про червоні прапорці, які точно попередять вас про невдалу співпрацю і як це виправити;
➜ поради та інсайти для початківців в IT;
➜ справжній батл між дизайнерами й розробниками щодо питань, міфів і стереотипів.
Юлія Жуковська — UI/UX Designer у Sednor Holdings Limited і викладачка Hillel IT School, поділилася професійними «фішками» й дала поради початківцям для успішного працевлаштування.
Володимир Шайтан — Senior Full Stack Developer в UKEESS Software House і викладач Hillel IT School, розкрив бачення IT-ринку й розповів курйозні професійні історії.
Дізнаєтеся про підводні камені фрілансу та чому між користю й красою варто вибирати перше.
🔗ПОСИЛАННЯ
