Senior Frontend - javascript, html, css

Minimal envelope animation Свёрстано на HTML и SCSS. Анимировано библиотекой gsap. 👉 @seniorFront

​Боксинг в JavaScript: что это и зачем нужно? Боксинг — это процесс преобразования примитивных типов данных (number, string, boolean) в их объектные обертки (Number, String, Boolean). В JavaScript это происходит автоматически, когда вы вызываете методы на примитивах, или явно, если создаете объект с помощью new. Но зачем это нужно? Зачем нужен боксинг? Доступ к методам объектов Примитивы — легкие и быстрые, но у них нет методов. Хотите вызвать 42.toFixed(2)? JavaScript автоматически "оборачивает" примитив 42 в объект Number, чтобы метод сработал. Это и есть автобоксинг. Гибкость Иногда нужно работать с примитивами как с объектами, например, для хранения в структурах данных или передачи в функции, ожидающие объекты. Совместимость Боксинг позволяет использовать примитивы в контекстах, где требуются объекты, без лишнего кода. Как это работает? 1. Автобоксинг Когда вы вызываете метод на примитиве, JavaScript временно оборачивает его в соответствующий объект:

let num = 42;
console.log(num.toFixed(2)); // "42.00" — автобоксинг в Number

2. Явный боксинг Можно вручную создать объект-обертку:

let primitive = 100;
let boxed = new Number(primitive);
console.log(typeof boxed); // "object"
console.log(boxed.valueOf()); // 100 — распаковка

3. Работа с коллекциями В отличие от Java, в JavaScript массивы и объекты могут хранить примитивы напрямую, но автобоксинг всё равно происходит при вызове методов:

let numbers = [10, 20];
console.log(numbers[0].toString()); // "10" — автобоксинг

4. Распаковка Обратный процесс (unboxing) происходит автоматически или с помощью методов, таких как valueOf():

let boxedNum = new Number(50);
let unboxed = boxedNum.valueOf(); // 50 (примитив)

👉 @seniorFront

10 принципов удобного интерфейса В этой статье я расскажу про все 10 эвристик Нильсена с советами по применению и простыми примерами. Независимо от того, создаете ли вы продукт с нуля или проводите UX-аудит — эти принципы помогут вам принимать более обоснованные решения. Ведь хороший интерфейс — это не только про красивую картинку, но и про удобство, понятность и предсказуемость взаимодействия. Именно это делает продукт по-настоящему дружелюбным к пользователю. 👉 @seniorFront

Transform To Prime Задан список из n целых чисел, найдите минимальное число, которое нужно вставить в список, чтобы сумма всех элементов списка была равна ближайшему простому числу. Пример:

 minimumNumber ([3,1,2]) = return (1)

👉 @seniorFront

Cards Dance Это SVG картинки, анимируемые библиотекой gsap. 👉 @seniorFront

CSS Animation Effects В этом видео создается анимация загрузки на HTML и CSS. 👉 @seniorFront

Vue JS Draw Приложение для рисования, реализованное на Vue. 👉 @seniorFront

Radio Button Tiles Оригинальные радио кнопки, реализованные на HTML и SCSS. 👉 @seniorFront

Твои разрабы пилят фичи пока ты ушел в отпуск 👉 @seniorFront

Navigation Tabs with Sliding Menu Indicator В этом видео создаётся анимированное навигационное меню на чистом CSS. 👉 @seniorFront

👩‍💻 Готовы стать профи в Node.js-разработке и освоить самые востребованные технологии? 🔥 Курс «Node.js Developer» от OTUS – это ваш шанс научиться создавать высокопроизводительные серверные приложения с использованием Node.js, Express, TypeScript, GraphQL, Apollo и Nest.js. Мы фокусируемся на практических навыках, которые можно сразу применять в реальных проектах. 🦾 Освойте работу с базами данных MongoDB и PostgreSQL, научитесь создавать и оптимизировать запросы, а также внедрять лучшие практики разработки с TDD. Преподаватели-практики помогут вам разобраться в тонкостях разработки и архитектуры Node.js. 🎁 Дарим промокод, который дает скидку на обучение - NODE8 ➡️ Пройдите вступительное тестирование и присоединяйтесь к группе: https://clck.ru/3Nkp7V Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjdGL3LA

To-do list Оригинальный TO_DO list, на чистом JS. Стилизованный в SCSS. 👉 @seniorFront

Вебинар - "Прорыв в AI: применяйте DeepSeek эффективно" ⚡ Практикум по топовой китайской ии DeepSeek! Узнайте, как экономить 20+ часов в неделю! Формат: Живой бесплатный вебинар! Подойдет даже новичкам! На вебинаре вы: - Разберетесь в нейросетях и их возможностях - Научитесь писать рабочие промпты - Автоматизируете рутину (контент, аналитика и др.) - Создадите ИИ-ассистента в прямом эфире! Мы преготовили подарки: ✨ Подарок №1: Полезные материалы по ИИ ✨ Подарок №2: Руководство «Как создать цифровой аватар» (сразу после регистрации)! Кому подойдет? Контент-мейкерам, предпринимателям, специалистам и всем, кто хочет освоить ИИ для карьеры или дохода. ✅Успейте зарегистрироваться Бесплатно! Не теряйте время на рутину – доверьте ее ИИ! Зарегистрироваться #реклама 16+ ed.bonnieandslide.com О рекламодателе

Почему в интерфейсах со сложной логикой недостаточно показать макеты в Figma? В принципе, в меме всё честно. Но я всё же решила объяснить, почему не кидаю ссылку на Figma по первому запросу. В этой небольшой статье я хочу рассказать: - почему я не отправляю макеты вслепую; - почему перед созвоном всегда запрашиваю информацию о проекте; - о чем говорю и что показываю на созвоне знакомства. 👉 @seniorFront

​Побеждаем алгоритмическую секцию на собесах! Делюсь опытом прохождения алгоритмических собеседований — сложного, но проходимого этапа! Вот ключевые моменты: Почему это сложно? - Время ограничено: ~20 минут на чтение задачи, код и проверку. - Писать код нужно под контролем, без автодополнения, с условной подсветкой синтаксиса (например, в Yandex Code). - Нужно оставаться спокойным и чётко объяснять свои действия. Как готовиться и побеждать? 1. Читай и узнавай задачу: практика на Leetcode и Yandex.Coderun поможет "узнавать" типовые алгоритмы (два указателя, рекурсия, хэш-мапы, строки). 2. Проговори решение: перед кодом озвучь логику, чтобы избежать ошибок "на ходу". 3. Учти краевые случаи: пустой массив, один элемент, отрицательные числа, итерации в начале/конце. Пиши их в комментариях. 4. Пиши и комментируй: тренируйся писать код, объясняя каждую строку. 5. Проверяй: прогоняй код на тестовых данных, фиксируй промежуточные результаты в комментариях. 6. Знай сложность: линейная, квадратичная или логарифмическая — будь готов ответить по времени и памяти. Главный секрет — насмотренность. Решай задачи (easy/medium) с таймером, без автодополнения, комментируя вслух. Это снизит стресс на собесе. Верь в себя, и всё получится! 👉 @seniorFront

Responsive Vertical Slider Логика работы слайдера реализована библиотекой Swiper. Анимировано в CSS. 👉 @seniorFront

Что такое Dependency Injection (DI)? Это паттерн проектирования, который используется для управления зависимостями в программном обеспечении. Суть паттерна заключается в том, что объект получает свои зависимости извне, а не создаёт их сам. Это способствует созданию более гибкого, тестируемого и поддерживаемого кода. Принципы - Инверсия управления (Inversion of Control, IoC) Принцип, согласно которому объект делегирует управление своими зависимостями внешнему источнику. - Внедрение зависимостей (Dependency Injection) Конкретная реализация инверсии управления, при которой зависимости передаются объекту через конструктор, методы или свойства. Способы внедрения зависимостей - Внедрение через конструктор Зависимости передаются объекту через параметры его конструктора.

interface Repository {
  doSomething(): void;
}

class ConcreteRepository implements Repository {
  doSomething() {
    console.log("Repository is doing something!");
  }
}

class Service {
  private readonly repository: Repository;

  constructor(repository: Repository) {
    this.repository = repository;
  }

  performAction() {
    this.repository.doSomething();
  }
}

// Пример использования
const repository = new ConcreteRepository();
const service = new Service(repository);
service.performAction(); // Выведет: Repository is doing something!

- Внедрение через сеттеры Зависимости передаются объекту через методы-сеттеры после его создания.

interface Repository {
  doSomething(): void;
}

class ConcreteRepository implements Repository {
  doSomething() {
    console.log("Repository is doing something!");
  }
}

class Service {
  private repository: Repository | undefined;

  setRepository(repository: Repository) {
    this.repository = repository;
  }

  performAction() {
    if (!this.repository) {
      throw new Error("Repository is not set");
    }
    this.repository.doSomething();
  }
}

// Пример использования
const repository = new ConcreteRepository();
const service = new Service();
service.setRepository(repository);
service.performAction(); // Выведет: Repository is doing something!

- Внедрение через интерфейсы Зависимости передаются объекту через методы, определённые в интерфейсах.

interface IRepository {
  doSomething(): void;
}

class Repository implements IRepository {
  doSomething() {
    console.log("Doing something...");
  }
}

class Service {
  private repository: IRepository;

  constructor(repository: IRepository) {
    this.repository = repository;
  }

  performAction() {
    this.repository.doSomething();
  }
}

// Пример использования
const repository = new Repository();
const service = new Service(repository);
service.performAction(); // Выведет: Doing something...

Плюсы - Улучшение тестируемости Код становится более модульным и тестируемым, так как зависимости можно легко заменять на моки или стабы в тестах. - Улучшение поддерживаемости Уменьшается связность кода, что упрощает его поддержку и модификацию. - Улучшение гибкости Легче менять реализации зависимостей, не изменяя код, который их использует. - Явное указание зависимостей Зависимости объектов становятся явными, что улучшает понимание кода. Минусы - Усложнение кода Внедрение DI может усложнить код, особенно если используется слишком много уровней абстракции. - Кривая обучения Понимание и правильное использование DI может потребовать времени и обучения, особенно для разработчиков, незнакомых с паттерном. - Перегрузка конструкции При внедрении большого числа зависимостей через конструктор конструктор может стать перегруженным. 👉 @seniorFront

Высшее образование дистанционно в Московском ВУЗе Вы мечтаете получить высшее образование, но не сдали ЕГЭ или получили низкие баллы? У нас есть решение для вас! Институт Международных Экономических Связей предлагает дистанционное обучение , которое позволяет получать качественные знания из любой точки мира по 10+ направлениям обучения. ✅ Государственный диплом без отметки о дистанте ✅ Удобный личный кабинет студента ✅ Поддержка кураторов на каждом этапе обучения ✅ Можно поступить без ЕГЭ Узнать больше #реклама 16+ imes.su О рекламодателе

Самозанятый или ИП: как айтишнику выбрать форму работы в 2025 Айтишник работает удалённо. Пишет код, собирает дашборды, настраивает DevOps или консультирует по безопасности. Клиенты платят. Деньги капают. И вот тут возникает вопрос: оформляться как самозанятый или регистрировать ИП? Однозначного ответа нет — и это хорошо. Потому что выбор формы работы в 2025-м стал не просто техническим, а стратегическим. Он зависит не только от цифр, но и от целей. Ниже разберёмся: почему фрилансерам и технопредпринимателям этот выбор так важен, где могут быть юридические «мины» и когда стоит менять режим. 👉 @seniorFront