Логово верстальщика

Не берут на работу без коммерческого опыта? Работодатели ищут новичков на оплачиваемые стажировки в канале "Вакансии для джунов и стажировки в IT". 💻Подпишись на канал, чтобы не потерять. Подписаться #реклама О рекламодателе

📈 Подборка статей для вашей карьеры • Выбираем подарки с умом • 10 лучших приёмов логирования для разработчиков • Из белой каски и грязных сапог в белый халат и тапки • Погружение в Web3: изучаем Node.js на открытом курсе • Чем стартап отличается от бизнеса и что выбрать

📝 Подборка вакансий для сеньоров Frontend-разработчик (React) • JavaScript, React, Node.js • Уровень дохода не указан | от 3 лет QA-инженер (frontend) • JavaScript, TypeScript, SQL • Уровень дохода не указан | от 2 лет Senior Fullstack Developer (Nest / React) • Node.js, RabbitMQ, TypeScript, MySQL, React, Redux, TypeORM, NestJS • от 3 000 до 4 000 $ | от 6 лет

👩‍💻 Very cool animated text Интересная анимация спирального текста. Сделана на CSS и JavaScript. Открыть код...

Нативные модули в React Native — когда без них никак? С 17 по 20 февраля в канале Код Меркури за главного останется React Native-разработчик компании Mercury Development, Булат Кидасов. Зачем? Чтобы за четыре дня вы вместе с ним смогли разобрать нативные модули так, чтобы стало понятно, где они действительно нужны и как с ними работать. Поговорим о: ⚡ том из чего состоят нативные модули и как они влияют на производительность. ⚡ разнице между старой и новой архитектурой React Native. ⚡ реальных кейсах из продакшн-проектов: как внедряли нативные модули и что это дало. А еще — немного про карьеру: как Булат пришел в IT и почему разбираться в нативных модулях полезно даже тем, кто с ними не работал. Обещаем: пользы будет много, воды — мало. Подписывайтесь ❤️ Подписаться #реклама О рекламодателе

👩‍💻 Реализация интерактивной карты Наглядный пример того, как с помощью JS API можно создавать нестандартные интерактивные карты. Яндекс Еда опубликовала исследование самых характерных блюд в городах в России и для визуализации использовала решение от API Яндекс Карт. Оно удобно тем, что позволяет легко и быстро настраивать цвета и детальность карты, убирать или добавлять нужную информацию. Читать...

Онлайн-интенсив для ИТ-специалистов в Открытых школах Т1 Уже есть опыт работы в ИТ, но хочешь прокачать скилы и продвинуться в карьере? Тогда скорее залетай на бесплатный ИТ-интенсив в Открытых школах Т1. Открытые школы — это возможность усилить свои навыки и получить оффер в ИТ-холдинг Т1. И все это за месяц, онлайн и в удобное вечернее время. Что ты получишь? ✅ бесплатное обучение в гибком формате: по вечерам, онлайн, из любого города РФ и РБ. ✅ материалы от HR для прокачки резюме и подготовки к интервью в Т1. ✅ много практики и уникальный рыночный опыт. ✅ поддержку опытных преподавателей и карьерный фаст-трек до мидла в Т1 для лучших выпускников. ✅ реальный шанс получить оффер в Т1. Более 1000 специалистов уже прошли этот путь — теперь твоя очередь! Регистрация до 14 марта! Подать заявку #реклама 16+ t1.ru О рекламодателе

👩‍💻 Стилизация кнопки с эффектом наведения Создайте кнопку, которая меняет цвет фона и добавляет лёгкую тень при наведении. При обычном состоянии кнопка должна иметь закруглённые углы и немного увеличиваться при наведении для визуального акцента. Ожидаемое поведение: • Основной цвет фона кнопки — синий (#007BFF). • При наведении цвет фона становится темно-синим (#0056b3), добавляется тень, и кнопка слегка увеличивается. Решение задачи🔽

<button class="styled-button">Нажми меня</button> .styled-button { background-color: #007BFF; color: white; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; } .styled-button:hover { background-color: #0056b3; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transform: scale(1.05); }

🤔 Разбираемся с цветами: пространства, иллюзии и квантование Статья исследует природу цвета, его восприятие и обработку. Рассмотрим дискретизацию, цветовые модели, пространство и причины несоответствия при передаче изображений. Узнайте, что скрывается за HEX-кодами. Читать...

📝 Подборка вакансий для мидлов Frontend Developer • JavaScript, Vue.js, Nuxt.js, TypeScript • от 180 000 ₽ | от 3 лет опыта Frontend developer Vue • JavaScript, Vue.js, Nuxt.js, HTML, SCSS, Sass, JSON, HTTP, Next.js • от 150 000 ₽ | от 2 лет опыта Frontend-разработчик (Vue.js) • Vue.js, JavaScript, HTML, TypeScript, Vite • от 180 000 до 250 000 ₽ | Опыт не указан

⚙️ Что такое AbortController в JavaScript и зачем он используется? AbortController — это API, который позволяет отменять асинхронные операции, такие как запросы fetch. Это полезно для предотвращения утечек ресурсов и отмены операций, которые больше не нужны. ➡️ Пример:

const controller = new AbortController();
const signal = controller.signal;

// Отправляем запрос с возможностью отмены
fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос был отменён');
    } else {
      console.error(err);
    }
  });

// Отмена запроса через 500 мс
setTimeout(() => controller.abort(), 500);

🗣️ В этом примере AbortController отменяет запрос через 500 мс. Это позволяет избежать обработки ненужных данных, если, например, пользователь покинул страницу или отменил действие.

🖥 Подробнее тут

👩‍💻 Face Toggle Интересный дизайн переключателя. Сделаны на SCSS и JavaScript. Открыть код...

🔎 Подборка вакансий для джунов Frontend-разработчик (React) Junior/Junior+ 🟢React, HTML5, CSS, JavaScript 🟢Уровень дохода не указан | Опыт разработки на React Junior frontend разработчик (Vue) 🟢Vue 2/3, Vuex, Git, Figma, npm/yarn 🟢Уровень дохода не указан | Опыт работы от 1 года Junior Frontend разработчик (Vue\Nuxt) 🟢HTML5, CSS3(SCSS), JavaScript, TypeScript, Vue 2/3, Webpack/Vite, Vuex/Pinia, Stylelint/Eslint, GitLab 🟢Уровень дохода не указан | 1–3 года

👩‍💻 Remove anchor from URL Завершите функцию/метод так, чтобы он возвращал URL с чем-либо после удаления привязки (#). Пример кода:

"www.codewars.com#about" --> "www.codewars.com"
"www.codewars.com?page=1" -->"www.codewars.com?page=1"

Решение задачи🔽

function removeUrlAnchor(url) { return url.split('#')[0]; } // Примеры использования console.log(removeUrlAnchor("www.codewars.com#about")); // "www.codewars.com" console.log(removeUrlAnchor("www.codewars.com?page=1")); // "www.codewars.com?page=1"

⚙️ 9 open source библиотек для вашего следующего проекта Разработчики часто сталкиваются с выбором, какие инструменты использовать для своего следующего проекта. Даже если вы серьёзно настроены на разработку продукта, проблема остаётся той же. В этой статье я расскажу о 9 библиотеках с открытым исходным кодом, которые улучшат ваш проект. Читать...

🔝 Самые интересные статьи за последние дни: • HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 11 • Вы всё ещё устанавливаете display:none по таймауту? Тогда мы идём к вам • Парольная защита статичной HTML-страницы на JS • 9 open source библиотек для вашего следующего проекта • Модули CSS раскладки — что такое и как готовить

👩‍💻 Простой калькулятор с динамическим вводом Создайте калькулятор, который позволяет выполнять основные арифметические операции (сложение, вычитание, умножение, деление). Пользователь вводит два числа и выбирает операцию из выпадающего списка. Результат отображается автоматически. Требования: • Два текстовых поля для ввода чисел. • Выпадающий список для выбора операции. • Динамическое отображение результата при изменении любого из входных значений. Решение задачи🔽

<div> <input type="number" id="num1" placeholder="Введите первое число"> <select id="operation"> <option value="add">+</option> <option value="subtract">-</option> <option value="multiply">×</option> <option value="divide">÷</option> </select> <input type="number" id="num2" placeholder="Введите второе число"> </div> <div> <h3>Результат: <span id="result">0</span></h3> </div> const num1 = document.getElementById('num1'); const num2 = document.getElementById('num2'); const operation = document.getElementById('operation'); const result = document.getElementById('result'); function calculate() { const value1 = parseFloat(num1.value) || 0; const value2 = parseFloat(num2.value) || 0; let res = 0; switch (operation.value) { case 'add': res = value1 + value2; break; case 'subtract': res = value1 - value2; break; case 'multiply': res = value1 * value2; break; case 'divide': res = value2 !== 0 ? value1 / value2 : 'Ошибка (деление на 0)'; break; } result.textContent = res; } [num1, num2, operation].forEach(element => { element.addEventListener('input', calculate); });

⚙️ Кнопки с несколькими состояниями Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей. Читать...

🔎 Подборка зарубежных вакансий Frontend Engineer - JavaScript 🟢React, TypeScript, styled-components, HTML5, CSS3, JavaScript (ES6+), MobX 🟢до 4 000 $ | более 6 лет опыта Angular Developer 🟢Angular 2+, MS SQL, EF Core, OAuth 2.0, JWT, RESTful APIs, Swagger, HTML, CSS/SCSS, Bootstrap, Visual Studio, GitHub 🟢Уровень дохода не указан | 3–6 лет опыта Angular Developer 🟢Angular, TypeScript, CSS, HTML, Intershop, Java 🟢Уровень дохода не указан | более 6 лет опыта

🎭 Меняй роли: тестируй свой код как чужой Когда долго работаешь над фичей, замыливается взгляд. Ошибки могут быть очевидными, но ты их просто не замечаешь. 👉 Совет: перед финальной проверкой представь, что это код не твой, а твоего коллеги. Пройди его с позиции ревьюера. Такой подход помогает находить баги и улучшать логику.