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

🔝 Самые интересные статьи за последние дни: • Упрощаем CSS-анимации с помощью свойств display и размеров элемента • 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года • Возможности поля HTML-документа, часть 2. Внедряем CSS и JS • Ошибки, которые я совершил, пытаясь быть «слишком правильным» в разработке • Разработка Task Manager с нуля до полнофункционального продукта

👩‍💻 Подсчёт частоты элементов в массиве Напишите функцию, которая принимает массив и возвращает объект, где ключи — это уникальные элементы массива, а значения — количество их вхождений. Пример:

const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result); 
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}

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

function countFrequency(array) { return array.reduce((acc, item) => { acc[item] = (acc[item] || 0) + 1; return acc; }, {}); } // Пример использования: const input = [1, 2, 2, 3, 4, 3, 5, 3]; const result = countFrequency(input); console.log(result); // Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}

👩‍💻 Улучшение производительности с делегированием событий Статья объясняет технику делегирования событий в веб-разработке, показывая, как использование одного слушателя на родительском элементе упрощает управление событиями и повышает производительность. Читать...

#vacancy #вакансия #версталльщик #juniorfrontend 📌Компания: SonderAds 📌Позиция: Верстальщик / Junior Front-end (арбитраж) 📌Локация: удаленно из любой точки мира 📌 Формат: full-time 5/2 📌ЗП: Фиксированная ставка на руки - от 1000 USD (зависит от твоей экспертизы) 🚀 Ищешь удалённую full-time работу, хочешь развиваться во фронтенде и делать проекты, которые напрямую влияют на результат? Интересно верстать лендинги и разбираться, как работает рекламный трафик? Тогда тебе к нам. 🚀 Что ты будешь делать: — Верстка и доработка лендингов по готовым шаблонам — Правки и доработка HTML / CSS / JavaScript (адаптив, визуальные правки, логика скриптов) — Настройка кнопок, ссылок, редиректов, форм — Использование AI-инструментов для ускорения работы — Настройка доменов и интеграция трекеров — Проверка корректной работы лендингов перед запуском трафика Что мы ожидаем от тебя: — Опыт работы верстальщиком / junior front-end от 1 года —Понимание структуры лендингов: кнопки, ссылки, формы, редиректы —Знания и уверенное владение HTML, CSS, JavaScript —Умение читать и править чужой код —Умение пользоваться AI-инструментами (ChatGPT, Claude и др.) —Английский на уровне чтения технической документации —Самостоятельность и ответственное отношение к технической части работы Будет плюсом — Опыт работы с лендингами под рекламный трафик и трекерами — Понимание целей и мотивации пользователей на рекламных лендингах — Базовое понимание конверсионных воронок — Общее представление об арбитражных связках и взаимодействии лендинга с трафиком Что мы предлагаем: — Обучение и поддержку внутри команды - всё нужное для старта дадим — Интересные проекты с масштабными возможностями — Стабильную зарплату - чтобы можно было сосредоточиться на работе — Фиксированная ставка на руки - от 1000 USD (зависит от твоей экспертизы) — Формат full-time 10-19:00 (время Кипра) Полностью удаленный формат работы. — Оплачиваемые отпуск (20 рабочих дней) и больничные Чтобы откликнуться на позицию, заполните форму 😉 Если остались вопросы, пишите — @Sonder_Ads @Anastasi_SonderAds @Marharyta_M8

#vacancy #вакансия #версталльщик #juniorfrontend 📌Компания: SonderAds 📌Позиция: Верстальщик / Junior Front-end (арбитраж) 📌Локация: удаленно из любой точки мира 📌 Формат: full-time 5/2 📌ЗП: Фиксированная ставка на руки - от 1000 USD (зависит от твоей экспертизы) 🚀 Ищешь удалённую full-time работу, хочешь развиваться во фронтенде и делать проекты, которые напрямую влияют на результат? Интересно верстать лендинги и разбираться, как работает рекламный трафик? Тогда тебе к нам. 🚀 Что ты будешь делать: — Верстка и доработка лендингов по готовым шаблонам — Правки и доработка HTML / CSS / JavaScript (адаптив, визуальные правки, логика скриптов) — Настройка кнопок, ссылок, редиректов, форм — Использование AI-инструментов для ускорения работы — Настройка доменов и интеграция трекеров — Проверка корректной работы лендингов перед запуском трафика Что мы ожидаем от тебя: — Опыт работы верстальщиком / junior front-end от 1 года —Понимание структуры лендингов: кнопки, ссылки, формы, редиректы —Знания и уверенное владение HTML, CSS, JavaScript —Умение читать и править чужой код —Умение пользоваться AI-инструментами (ChatGPT, Claude и др.) —Английский на уровне чтения технической документации —Самостоятельность и ответственное отношение к технической части работы Будет плюсом — Опыт работы с лендингами под рекламный трафик и трекерами — Понимание целей и мотивации пользователей на рекламных лендингах — Базовое понимание конверсионных воронок — Общее представление об арбитражных связках и взаимодействии лендинга с трафиком Что мы предлагаем: — Обучение и поддержку внутри команды - всё нужное для старта дадим — Интересные проекты с масштабными возможностями — Стабильную зарплату - чтобы можно было сосредоточиться на работе — Фиксированная ставка на руки - от 1000 USD (зависит от твоей экспертизы) — Формат full-time 10-19:00 (время Кипра) Полностью удаленный формат работы. — Оплачиваемые отпуск (20 рабочих дней) и больничные Чтобы откликнуться на позицию, заполните форму 😉 Если остались вопросы, пишите — @Sonder_Ads @Anastasi_SonderAds @Marharyta_M8

👩‍💻 Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий Если вы погружены в мир судоку, то наверняка ищете варианты ускоренного решения задач по программированию. Предлагаем ознакомиться с одним из них. Использование в нем хэш-карт и рекурсий значительно ускоряет решение головоломки. Читать...

👩‍💻 Переходите на сторону light-dark() Статья раскрывает современные CSS-функции для создания адаптивного темного режима, заменяющие традиционные медиа-запросы. Рассматриваются подходы, упрощающие настройку цветовых схем под предпочтения пользователя. Читать...

👩‍💻 10 лучших CSS-библиотек и фреймворков для быстрой разработки фронтенда Запутался в CSS-фреймворках? Мы собрали ТОП-10 самых крутых инструментов, которые реально экономят время на фронтенде. От тяжеловеса Bootstrap до минималистичного Milligram – разобрали плюсы каждого и объяснили, когда что использовать. Читать...

👩‍💻 Signature animation Поле для ввода подписи с интересной анимацией. Сделана на SVG, CSS и JavaScript. Открыть код...

⛔️ Performance budget который все любят на словах и игнорят в жизни Про performance budget говорят красиво. На созвонах кивают, в доках рисуют цифры, в презентациях всё зелёное. А потом проходит пара спринтов и внезапно выясняется, что бандл потолстел, LCP поплыл, а никто даже не заметил. Я такое видел не раз и почти всегда причина одна и та же.

✅ Как performance budget обычно выглядит в теории На бумаге всё выглядит аккуратно и логично. Ограничения на размер бандла, контроль LCP, TTI и CLS, лимиты на количество запросов, ожидания по времени рендера. Кажется, что если есть цифры, значит есть и контроль. Но реальность быстро вносит свои правки. ❌ Почему budget умирает почти сразу Самая частая ошибка в том, что budget вводят как набор чисел, а не как процесс. Написали JS не больше условных 200 KB и разошлись. Никто не проговорил, что делать если лимит превышен, кто за это отвечает и что важнее в конкретный момент новая фича или перф. В итоге цифры есть, а решений ноль. Вторая боль это отсутствие автоматической проверки. Если budget не проверяется в CI, его просто не существует. Локально у всех всё быстро, а в проде внезапно плюс десятки килобайт и лишние секунды LCP. И самое грустное никто этого не поймал в моменте. 👏 Почти всегда побеждают фичи Когда нужно выбирать между релизом и остановкой из за производительности, команда почти всегда идёт в сторону релиза. Performance это отложенная боль, а фича нужна прямо сейчас. Потом к этому возвращаются. Или не возвращаются. Ещё одна проблема в том, что budget делают слишком общим. Один лимит на всё приложение выглядит просто, но работает плохо. Лендинг, дашборд и админка живут по разным правилам и ожиданиям. Но budget почему то часто одинаковый для всех. 📣 И финальный гвоздь в крышку гроба это отсутствие прозрачности Когда лимит превышен, никто не может быстро ответить, чем именно мы его съели. Без понимания причин budget превращается в абстрактную цифру из дока. ⚙ Когда performance budget реально начинает работать Он перестаёт быть про килобайты и становится про пользовательские метрики. Он проверяется автоматически через CI, Lighthouse или Web Vitals. Он разбит по страницам и сценариям, а не размазан по всему приложению. И самое важное есть чёткое правило, что делает команда если лимит превышен. Performance становится частью Definition of Done, а не красивым бонусом.

📌 Performance budget это не цифры в документации. Это договор внутри команды. Про то, что для нас достаточно быстро и про то, от чего мы готовы отказаться, если стало хуже. Пока этого договора нет, budget будет нарушаться снова и снова, сколько бы цифр вы туда ни написали. 🚪 Frontender's notes

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

<button class="ripple-button">Нажми меня</button> .ripple-button { position: relative; overflow: hidden; padding: 10px 20px; font-size: 16px; color: white; background-color: #007BFF; border: none; border-radius: 4px; cursor: pointer; } .ripple-button .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-animation 0.6s linear; background-color: rgba(255, 255, 255, 0.6); } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } document.querySelector('.ripple-button').addEventListener('click', function (event) { const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); ripple.style.width = ripple.style.height = `${Math.max(rect.width, rect.height)}px`; ripple.style.left = `${event.clientX - rect.left - ripple.offsetWidth / 2}px`; ripple.style.top = `${event.clientY - rect.top - ripple.offsetHeight / 2}px`; ripple.className = 'ripple'; this.appendChild(ripple); ripple.addEventListener('animationend', () => ripple.remove()); });

👩‍💻 Стрелочная функция vs. обычная функция в JavaScript Статья раскрывает ключевые отличия между стрелочными и обычными функциями в JavaScript, объясняя их влияние на выполнение кода. Рассматриваются ситуации, в которых предпочтителен каждый тип функций. Читать...

👩‍💻 7 советов по очистке кода React В этой статье собраны семь практических рекомендаций, помогающих создавать чистый и поддерживаемый код React. Читать...

Как frontend-разработчику получить оффер в Big Tech? Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные. Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK... Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.

В своем канале: 👉Разбираю самые популярные и каверзные вопросы на собесах 👉Рассказываю как пройти фильтр HR 👉Борюсь с убеждениями, которые мешают развиваться 👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров Регулярно публикую полезные материалы: ▪️60 вопросов, которые точно помогут тебе на собеседовании ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1 ▪️Чек лист проверки своего резюме Подписывайся, нас уже 4500 🤓: ссылка Реклама, erid 2W5zFK2aRPn: ИП Галактионов Тихон Витальевич, ИНН 771618975809

👩‍💻 Эта информация навсегда изменит ваше отношение к коду JavaScript К концу этой статьи вы превратитесь из простого пользователя JavaScript в того, кто глубоко его понимает и кого не удивляют его уникальные возможности. Это открытие расширит ваши знания и навыки, а также позволит использовать такие "фишки" JS, которых нет в других популярных языках. Читать...

🔨 Последний гвоздь в крышку гроба ручного программирования 🫡 Создатель Node.js признал, что эра написания кода людьми закончилась. Полная цитата:

Об этом говорилось уже тысячу раз, но позвольте мне добавить свой голос: эра, когда код писали люди, закончилась. Это тревожно для тех из нас, кто считает себя разработчиками программного обеспечения, но это так. Это не значит, что у разработчиков ПО нет работы, но написание синтаксиса напрямую — это не то, чем они теперь занимаются.

🥲 - За что? ✖️ xCode Journal

⚙️ PHP 8.4: exit/die изменены из языковых конструкций в функции Ключевое слово exit и его псевдоним die — языковые конструкции, выводящие сообщение и завершающие текущий сценарий. В CLI-приложениях exit/die можно использовать для завершения работы приложения с заданным кодом выхода. Читать...

👩‍💻 Всем программистам посвящается! Вот 14 авторских обучающих IT каналов по самым востребованным областям программирования: Выбирай своё направление: 👩‍💻 Python — t.me/python_ready 🤔 InfoSec & Хакинг — t.me/hacking_ready 🖥 SQL & Базы Данных — t.me/sql_ready 🤖 AI & ML — t.me/neuro_ready 👩‍💻 Frontend — t.me/frontend_ready 👩‍💻 IT Новости — t.me/it_ready 👩‍💻 C/C++ — https://t.me/cpp_ready 👩‍💻 C# & Unity — t.me/csharp_ready 👩‍💻 Linux — t.me/linux_ready 👩‍💻 Java — t.me/java_ready 📖 IT Книги — t.me/books_ready 📱 JavaScript — t.me/javascript_ready 🖼️ DevOps — t.me/devops_ready 🖥 Design — t.me/design_ready 📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

📉 Брейншторм без ограничений — бесполезен Когда можно всё, не получается ничего конкретного. Генерить идеи без рамок — значит тонуть в абстракции. 👉 Совет: вводи ограничения. Например: решение должно поместиться в 100 строк, не трогать базу, быть протестировано за час. Жёсткие рамки рождают лучшие идеи. Удобство — во фрейме, не в хаосе.

👩‍💻 Что такое Grid Layout в CSS и как он работает? CSS Grid Layout — это мощная система для создания сеточных макетов на веб-страницах. Она позволяет легко размещать элементы на странице в виде строк и столбцов с минимальным количеством кода. Grid обеспечивает точное позиционирование и гибкость, идеально подходя для сложных макетов. ➡️ Пример:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Три равных столбца */
    gap: 10px; /* Расстояние между элементами */
  }
  .item {
    background: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

🗣️ В этом примере .grid-container создает сетку с тремя столбцами одинаковой ширины. Свойство gap добавляет отступы между элементами. Grid Layout упрощает создание адаптивных макетов.

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