JavaScript'er

Плануєте релокейт чи кар’єру за кордоном, але не знаєте, з чого почати? Що потрібно європейським та американським роботодавцям? ✅ Практичний досвід (у вас він є) ✅ Англійська (можна підтягнути) ❌ Вища освіта міжнародного зразка (а ось тут проблема) 70% IT-вакансій Канади вимагають диплом магістра. У Європі ця цифра ще вища. Реєструйтеся на вебінар, щоб дізнатися, як отримати міжнародний диплом IT-магістра та спростити шлях до роботи за кордоном! Кількість місць на заході — обмежена. 📅 18 лютого / 19:00 за Києвом 💰 Безплатно А ще тут можна 🎁 поконкурувати за грант, що компенсує до 50% вартості навчання! 🔗 Зробіть інвестицію у своє майбутнє - реєструйся 👇🏼

Найкраще, що могла сказати 😍 JavaScript'ер

Navbar Hover Effect Смугастий ефект наведення посилання меню. Реалізовано за допомогою CSS. Забрати код JavaScript'ер

Що пріоритетніше використовувати TS чи JS? TypeScript краще для великих проектів, оскільки він надає типізацію, яка запобігає помилкам на етапі компіляції. JS використовується в більш простих сценаріях або там, де потрібна гнучкість і немає потреби у строгій типізації. Ти не знаєш JavaScript

Дві сторони однієї медалі JavaScript'ер

👩‍💻CSS Battle – це інтерактивна платформа, де розробники змагаються у вирішенні завдань мінімізувати CSS-код, створюючи візуальні елементи з найменшою кількістю символів. 📌 Посилання: cssbattle.dev JavaScript'ер

Якщо ви використовуєте Object.fromEntries(url.searchParams) для аналізу рядка запиту, тепер ви можете замінити це на typedSearch(url.searchParams, schema) для: 🔸 типобезпеки 🔸 підтримки масивів ✔️ #tip by EGOIST JavaScript'ер

Зацініть цю знахідку - бібліотека Sonner для React Це потужний інструмент для створення повідомлень. Проста установка, кастомізація та топові візуальні фішки. Вистачає трьох рядків коду, щоб усе запрацювало. Фішки: задавайте типи, налаштовуйте позиції, керуйте кількістю сповіщень, що відображаються. Плюс є суперзручна підтримка анімацій та додаткових дій. Коротше, якщо хочете додати стильних "тостів" до проекту - однозначно варто глянути: https://sonner.emilkowal.ski/ JavaScript'ер

Відкопав бібліотеку — react-google-maps Вона дозволяє легко вбудовувати Google Maps у ваші React-додатки, використовуючи компоненти та хуки Щоб розпочати, достатньо встановити пакет:

 npm install @vis.gl/react-google-maps

Потім обертаємо свої компоненти APIProvider, передаємо свій API-ключ, і можна творити магію з картами. Приклад простого використання:

 import { AdvancedMarker, APIProvider, Map } from '@vis.gl/react-google-maps';

function App() {
const position = {lat: 53.54992, lng: 10.00678};

return (
<APIProvider apiKey={'ВАШ_API_КЛЮЧ'}>
<Map defaultCenter={position} defaultZoom={10} mapId="DEMO_MAP_ID">
<AdvancedMarker position={position} />
</Map>
</APIProvider>
);
}

export default App;

Плюс, є хук useMapsLibrary() для підвантаження додаткових бібліотек, якщо потрібно щось складніше, типу геокодінгу або маршрутизації Якщо возишся з картами в проектах, ця тулза має бути в закладках. Документація та приклади використання доступні на GitHub: https://github.com/visgl/react-google-maps JavaScript'ер

Тримайте цікаву статтю про балансування тексту в CSS Автор розповідає, як за допомогою властивості text-wrap: balance вирішувати проблеми нерівномірного перенесення рядків у заголовках та текстах Розбираються приклади, як це працює у браузерах та які є обмеження. У статті: демки, реальні приклади з TechCrunch та BBC, а також ідеї для майбутніх рішень 👉 Читайте статтю тут: Balancing Text In CSS JavaScript'ер

Чи знали ви, що можна редагувати будь-який сайт за допомогою простого трюку JavaScript? 🔸 Натисніть F12 , щоб відкрити DevTools 🔸 Перейдіть на вкладку Console 🔸 Введіть у консолі JS:

 document.designMode = "on"

Тепер можна закрити DevTools і вільно редагувати сторінку: змінювати текст, переміщати або змінювати картинки, а також знущатися з інших елементів😎 </Codu>

Цікавий спосіб вирівняти іконку з текстом Одиниця cap вважається щодо висоти великих букв шрифту Це допомагає нам легко змінювати розмір іконок, розташованих поруч із текстом, щоб вони повністю відповідали висоті тексту Повний код:

 <div class='container'>
<div class='icon'>...</div>
<div class='text'>Settings</div>
</div>

 .container {
display: flex;
align-items: baseline;
gap: 0.5rem;
}

.icon {
height: 1cap;
aspect-ratio: 1;
}

JavaScript'ер

Важлива пам'ятка 😅 JavaScript'ер

Accordion Image Gallery Ефект розширення зображення під час наведення на нього. Реалізовано з допомогою SCSS. ⤷ Забрати код JavaScript'ер

Що таке псевдоелемент? Псевдоелемент — це CSS-конструкція, яка дозволяє стилізувати певні частини елемента, наприклад ::before для додавання контенту перед елементом або ::after для додавання після. Це зручно для оформлення, не змінюючи структуру HTML. Ти не знаєш JavaScript

Не більше 0, переживати нема чого 😅 JavaScript'ер