Senior Frontend - javascript, html, css

Как перейти от журнала «Мурзилка», «Цикла Хайпа» и истории математической бесконечности к ESLint, обратной совместимости и архитектуре Serverless? Легко – за один скролл по блогу ПСБ на Хабр! Что вас ждет: Статьи по архитектуре приложений Банка Живые истории команд, стажеров и наставников Ностальгические находки: листаем журналы! Исследуем математическую бесконечность научпоп и опыт коллег Подписывайтесь на Блог ПСБ! #Реклама О Рекламодателе

Infinite autoplay carousel Бесконечная карусель, реализованная на HTML и SCSS. 👉 @seniorFront

CSS Creative Isometric Design В этом видео создается 3D элемент на чистом CSS. 👉 @seniorFront

Как перейти от журнала «Мурзилка», «Цикла Хайпа» и истории математической бесконечности к ESLint, обратной совместимости и архитектуре Serverless? Легко – за один скролл по блогу ПСБ на Хабр! Что вас ждет: Статьи по архитектуре приложений Банка Живые истории команд, стажеров и наставников Ностальгические находки: листаем журналы! Исследуем математическую бесконечность научпоп и опыт коллег Подписывайтесь на Блог ПСБ! #Реклама О Рекламодателе

On/Off Toggle Switch Переключатель, реализованный на React и стилизованный в SCSS. 👉 @seniorFront

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать

Cloudy Spiral CSS animation Оригинальная анимация загрузки, реализованная с использованием препроцессоров Haml и SCSS. 👉 @seniorFront

В разработке нельзя предугадать две вещи: сроки и сообразительность юзеров. Change my mind 👉 @seniorFront

👨👨👨👨👨👨👨👨👨👨 Каналы с Junior IT вакансиями и стажировками Подписывайся и забирай свой оффер 🤘 1. Стажировки и вакансии по России и миру 2. IT вакансии по СНГ 3. IT стажировки по СНГ 4. IT стажировки и волонтерства 5. IT стажировки в топовых компаниях мира 6. Удалённые IT вакансии и стажировки 7. Python вакансии и стажировки 8. БИГТЕХ вакансии и стажировки 9. Design вакансии и стажировки 10. QA вакансии и стажировки 11. Junior вакансии и стажировки 12. Frontend вакансии и вопросы собесов 13. Вакансии и стажировки для аналитиков 14. Вакансии в русских стартапах за границей 15. Вакансии и стажировки для DevOps 16. Вакансии, которых нет на ХХ.РУ

Регистрируйтесь на Yandex Ecom Open Air 8 августа Море инсайтов для бизнеса, музыкальный open-air, лекции и нетворкинг. Участие бесплатно! Зарегистрироваться #реклама 18+ ecomfest.ru О рекламодателе

Awesome Cursor Animation on Mousemove В этом видео создается анимация при движении курсора на CSS и JS. 👉 @seniorFront

Onboarding Компонент онбординга, реализованный на Vue и стилизованный в SCSS. 👉 @seniorFront

🎯Открытый урок «Пишем высоконагруженное отказоустойчивое API на Bun и Elysia» 🗓 14 августа в 20:00 МСК 🆓 Бесплатно. Урок в рамках старта курса «Node.js Developer». На вебинаре разберем: - Ключевые темы и вопросы: - Почему Bun быстрее, чем Node.js: внутреннее устройство Bun - Знакомство с Elysia — легковесным фреймворком для Bun - Подготовка Bun API для продакшн-нагрузок - Логгирование и мониторинг Bun API - Метрики и трейсинг для Bun: как не потерять стабильность под нагрузкой - Практика: нагрузочное тестирование API на Bun Результаты и навыки участников: - Узнают, как писать высокопроизводительные API на Bun - Научатся использовать Elysia для быстрого создания HTTP-приложений - Освоят подходы к мониторингу и отказоустойчивости API - Получат опыт нагрузочного тестирования API в продакшн-условиях 🔗 Ссылка на регистрацию: https://clck.ru/3NUmRf Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjdPhGDL

Практические вопросы архитектуры ПО, из чего строить будем? Вы знаете из чего и как строятся программы? Странно что ни в одной из статей о программной архитектуре вы не найдете упоминаний о том из чего эти программы строятся. Я попробую изложить свое понимание, понимание профессионала с более чем 20-ти летним опытом построения, рефакторинга программ. Возможно я в чем-то, а может и совсем, буду не прав и ошибаюсь, но тогда в комментариях, а может и в новых статьях мы увидим откровения знающих профессионалов, которые разобьют в пух и прах мои рассуждения, то есть в любом случае должно быть интересно. Но, мне кажется, кто-то должен рискнуть начать рассуждать на эту тему. 👉 @seniorFront

​Комментарии vs. самодокументируемый код: что выбрать? Как сделать код понятным без лишних пояснений? Разбираемся! Почему комментарии — не всегда спасение? - Устаревают: код меняется, а комментарии забывают обновлять. - Скрывают проблемы: вместо улучшения кода пишут пояснения. - Теряют связь: со временем непонятно, к чему относится комментарий. Что такое самодокументируемый код? - Говорящие имена: переменные и функции сразу раскрывают суть. - Мелкие функции: каждая решает одну задачу. - Прозрачность: код читается как понятная инструкция. Примеры Было:

// Вычисляем стоимость заказа с налогами и скидкой  
function calculate(price, tax, discount) {  
  return price + (price * tax) - discount;  
}

Стало:

function calculateTotalOrderPrice(price, taxRate, discountAmount) {  
  return price + (price * taxRate) - discountAmount;  
}

Комментарий исчез — имена говорят сами за себя. Было

// Проверяем, является ли число чётным  
if (number % 2 === 0) {  
  console.log("Чётное");  
}

Стало

function isEven(number) {  
  return number % 2 === 0;  
}

if (isEven(number)) {  
  console.log("Чётное");  
}

Логика ясна без комментариев. Сложная логика? Было

// Проверяем, если пользователь не заблокирован и подписка активна  
if (!user.isBlocked && user.subscription.isActive) {  
  sendNewsletter();  
}

Стало:

if (user.canReceiveNewsletter()) {  
  sendNewsletter();  
}

Советы из «Чистого кода» Роберт Мартин: лучший комментарий — тот, которого нет. - Используйте понятные имена. - Разбивайте код на логичные функции. - Делайте код прозрачным. Когда комментарии нужны? - Для объяснения «почему» (а не «что»). - Для документации ограничений или техдолга. - Как временное решение. Итог Хороший код — как хорошая книга: читается легко и понятно. Самодокументируемый код делает комментарии исключением. Перед тем как писать //, подумайте: можно ли сделать код яснее? Обычно — можно! 👉 @seniorFront

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

iPad Spacial Graph Свёрстано на HTML и SCSS. Логика переключения вкладок реализована в JS. 👉 @seniorFront

Что такое синтаксическая сложность? Это мера, которая оценивает сложность структуры и конструкции кода. Она часто используется для оценки понятности, поддерживаемости и вероятности ошибок в программном коде. Одним из наиболее известных методов измерения синтаксической сложности является цикломатическая сложность, предложенная Томасом Маккейбом в 1976 году. Цикломатическая сложность Это количественная мера количества независимых путей через программу. Она используется для оценки сложности программного кода, измеряя количество логических ветвлений. Чем выше цикломатическая сложность, тем больше возможных путей исполнения и, следовательно, тем сложнее понять и протестировать программу. Как рассчитывается цикломатическая сложность Цикломатическая сложность может быть рассчитана с помощью следующей формулы:

V(G) = E - N + 2P

Пример расчета цикломатической сложности

def example(a, b):
    if a > 0:
        if b > 0:
            return a + b
        else:
            return a - b
    else:
        return b

Цикломатическая сложность V(G) будет

V(G) = E - N + 2P
V(G) = 6 - 5 + 2*1
V(G) = 3

Почему синтаксическая сложность важна Понимаемость кода Чем выше сложность, тем труднее понять код. Программы с высокой сложностью требуют больше времени для анализа и понимания. Поддерживаемость Код с высокой сложностью сложнее поддерживать и изменять. Это может привести к большему числу ошибок при внесении изменений. Тестируемость Более сложный код требует большего количества тестов для покрытия всех возможных путей исполнения. Это увеличивает время и усилия, необходимые для тестирования. Надежность Программы с низкой сложностью, как правило, более надежны и менее подвержены ошибкам, так как легче понимать и тестировать все возможные сценарии. Методы уменьшения синтаксической сложности Рефакторинг Разделение сложных функций на более простые и малые функции. Использование более простых и понятных конструкций. - Удаление дублированного кода - Использование комментариев и документации - Применение паттернов проектирования: 👉 @seniorFront

Steroids — ещё один фронтенд фреймворк на базе React? На старте проекта обычно встает вопрос о выборе готовой ui-библиотеки для решения шаблонных задач, таких как создание форм, инпутов, кнопок и других компонентов. Количество готовых ui-библиотек для React так стремительно растет, что уже сложно остановить свой выбор на какой либо из них. Зато в таком разнообразии каждый может найти библиотеку, подходящую под его задачи. В этой статье хочется рассказать о фреймворке Steroids, который разработан и поддерживается в нашей компании. Изначально мы не планировали создавать фреймворк, а просто собирали удачные решения рутинных задач. Получился набор полезных утилит и мини-библиотек, который позволял нам работать быстрее. Мы постепенно добавляли в него новые элементы, он рос и видоизменялся, и в итоге вырос в полноценный фреймворк Steroids. 👉 @seniorFront