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

👩‍💻 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"

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

🔎 Подборка зарубежных вакансий Senior Frontend Engineer 🟢React, Redux, TypeScript, Webpack, Electron, Node.js 🟢Уровень дохода не указан | Более 6 лет Frontend Developer 🟢React, JavaScript, HTML, CSS, Blockchain 🟢Уровень дохода не указан | 3–6 лет Full Stack Developer 🟢Node.js, TypeScript, VueJS, React, PostgreSQL, Redis, AWS, DevOps 🟢Уровень дохода не указан | Более 6 лет

🎯 Ставь цели на день через "3 приоритета" Начал день с длинного списка задач, а к вечеру понял, что толком ничего не сделал? Это классический перегруз. 👉 Совет: каждое утро выделяй три главных задачи на день — именно те, что реально сдвинут твои дела вперёд. Всё остальное — бонусы. Такая простая фокусировка помогает делать важное, а не тонуть в рутине.

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

🔎 Подборка вакансий для лидов Senior Front-End (React) разработчик 🟢React.js, Redux, TypeScript, CSS, REST API, Flux 🟢от 4 000 до 5 000 $ до вычета налогов | Более 6 лет Senior Frontend Engineer 🟢React, Redux, Redux-Saga, TypeScript, Electron, Node.js, MUI 🟢Уровень дохода не указан | Более 6 лет Руководитель группы разработки (Team lead) 🟢PHP, Node.js, Laravel, Docker, Kubernetes, MySQL, Redis, Backend, Frontend 🟢от 200 000 ₽ на руки | Более 6 лет

⚙️ Что такое 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 мс. Это позволяет избежать обработки ненужных данных, если, например, пользователь покинул страницу или отменил действие.

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

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

👨‍💻 Изучай фронтенд по мини-гайдам! Канал WebTaverna ежедневно публикуют полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript ➡️ Подписывайся на WebTaverna А также залетай в наш новый канал 🆕 "Фронтенд Заметки" 😮, где ты найдешь бесплатные видео-уроки и статьи по HTML, CSS, JS, а также по React.js и Vue.js

📈 Подборка статей для вашей карьеры • Как сделать резюме, которое дойдёт до работодателя. Фильтры ATS в 2025 году • Ошибайся смело: жизненные уроки из мира machine learning • Как учиться во взрослом возрасте: 7 советов, проверенных на практике • Нейросети, чат-бот и диджитал-адаптация: цифровые инструменты внутрикома • Долгосрочная стабильность vs. карьерная мобильность

📝 Подборка вакансий для сеньоров Fullstack TypeScript Developer [Senior] • TypeScript, Node.js, React, SQL, Kubernetes, Docker • Уровень дохода не указан | Более 6 лет Fullstack Web Разработчик • HTML, CSS, JavaScript, Laravel, Vue.js, Nuxt.js, React, TypeScript, MySQL, Redis • от 3 000 $ на руки | 3–6 лет Senior FullStack-разработчик • PHP, Laravel, Vue.js, Redis, MySQL, JavaScript • Уровень дохода не указан | 3–6 лет

Привет! 👋 Мы нашли канал, на котором каждый день публикуются увлекательные и полезные материалы, которые вы так долго искали! 😎 Здесь вы найдёте: • рецепты кода • мемы • интересные статьи и факты • викторины • макеты • иконки • полезные ссылки И это еще не всё! Здесь много интересного! Да-да! Всё в 1 канале! Подписывайся скорее пока доступ не пропал! 🧑‍💻

⚙️ Кнопки с несколькими состояниями Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью 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 :has() — Псевдокласс, который давно ждали Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов. Читать...

Как разрабу или продакту в IT запустить свой проект? Работать в корпорации - страшно, жизнь мимо проходит. Строить бизнес - страшно, а вдруг прогорит Один из вариантов - пилить свой проект по вечерам. Ведь многие успешные компании, типа Твиттер, начинались как Пет проекты Мы не говорим, что пет проект обязательно заработает миллиарды. Но заработать денег больше, чем в найме, вполне реально, а уж опыта получить точно больше можно Но есть куча проблем: - Как выбрать идею для проекта? - Что нужно знать про маркетинг? - Как запуститься и довести до первых продаж не имея бюджета? Михаил Табунов сделал про все это телеграм канал, в котором пишет для разработчиков и менеджеров про свой опыт - где брать идею, что надо знать про маркетинг, как запускать и искать первых клиентов, и многое другое Подписаться #реклама О рекламодателе

📝 Подборка вакансий для мидлов Наставник на онлайн-курс "Frontend-разработчик" • Angular, HTML, CSS, JavaScript, Node.js, Webpack, JQuery, TypeScript • от 25 000 ₽ на руки | 1–3 года React разработчик • React, Redux, TypeScript, Material-UI, Webpack • Уровень дохода не указан | 1–3 года Middle React Developer • React, Next.js, TypeScript, Effector, TailwindCSS, WebSockets, Семантическая и валидная верстка • от 150 000 ₽ на руки | 1–3 года

Крупнейший университет искусственного интеллекта Временные ряды — это данные, упорядоченные во времени, например, трафик на дорогах, изменения температуры или спрос на товары. С помощью AI можно предсказывать тренды, выявлять аномалии и оптимизировать процессы. Получите полный доступ к курсу по временным рядам на сайте. Это абсолютно бесплатно. ✨ 8 000+ студентов со всего мира ✨ 600+ AI-проектов, созданных студентами ✨ Сборная Университета — победители крупнейших AI-хакатонов России ✨ Стажировки в крупнейших компаниях России (РЖД, Ростелеком, РУДН, Совкомбанк, Самолет и другие) ✨ Трудоустраиваем выпускников в крупнейшие компании (Яндекс, ВТБ, Сбербанк, Роскосмос и другие) Будем рады видеть тебя среди наших студентов! Узнать больше #реклама 16+ neural-university.ru О рекламодателе

⚙️ В чем разница между == и === в JavaScript? В JavaScript операторы == и === используются для сравнения, но ведут себя по-разному. == выполняет нестрогое сравнение, при котором JavaScript может преобразовать типы данных для сопоставления значений. В отличие от него, === выполняет строгое сравнение, проверяя как значение, так и тип данных, без приведения типов. ➡️ Пример:

console.log(5 == '5');   // true, так как '5' преобразуется к числу
console.log(5 === '5');  // false, так как разные типы данных

console.log(null == undefined);  // true, при нестрогом сравнении они считаются равными
console.log(null === undefined); // false, строгий оператор учитывает типы данных

🗣️ Использование === рекомендуется для избегания ошибок, связанных с преобразованием типов. Это помогает сделать код более предсказуемым и читаемым.

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

👩‍💻 Cube & Dots Loader Анимированная загрузка в виде точек и куба. Сделана на чистом CSS. Открыть код...