Тебя вообще кто-то спрашивал?

👉 @seniorFront

Minimal Clothing Catalogue

Оригинальные раскрывающиеся карточки, реализованные на HTML и SCSS.

👉 @seniorFront

Curved Texts

Это анимированные SVG картинки. Анимация запускается через JS.

👉 @seniorFront

Awesome Image Effects

В этом видео анимируется картинка, распадающаяся на частицы на CSS и JS

👉 @seniorFront

Perspective Menu

Меню, анимируемые при наведении, созданные с использованием препроцессоров Pug и Stylus.

👉 @seniorFront

Not very secure

В этом примере вам необходимо проверить, является ли строка ввода пользователя буквенно-цифровой.

Строка имеет следующие условия, чтобы быть буквенно-цифровой:
- Должен быть хотя бы один символ ( "" недопустимо)
- Разрешенными символами являются прописные/строчные латинские буквы и цифры от 0 до 9
- Никаких пробелов или подчеркиваний

Пример:

alphanumeric("Mazinkaiser")  //  true
alphanumeric("hello world_")  //  false
alphanumeric("PassW0rd")  //  true
alphanumeric("     ")  //  false

Самозанятый или ИП: как айтишнику выбрать форму работы в 2025

Айтишник работает удалённо. Пишет код, собирает дашборды, настраивает DevOps или консультирует по безопасности. Клиенты платят. Деньги капают. И вот тут возникает вопрос: оформляться как самозанятый или регистрировать ИП?

Однозначного ответа нет — и это хорошо. Потому что выбор формы работы в 2025-м стал не просто техническим, а стратегическим. Он зависит не только от цифр, но и от целей.

Ниже разберёмся: почему фрилансерам и технопредпринимателям этот выбор так важен, где могут быть юридические «мины» и когда стоит менять режим.

👉 @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

Responsive Vertical Slider

Логика работы слайдера реализована библиотекой Swiper. Анимировано в CSS.

👉 @seniorFront

​Побеждаем алгоритмическую секцию на собесах!

Делюсь опытом прохождения алгоритмических собеседований — сложного, но проходимого этапа! Вот ключевые моменты:

Почему это сложно?

- Время ограничено: ~20 минут на чтение задачи, код и проверку.
- Писать код нужно под контролем, без автодополнения, с условной подсветкой синтаксиса (например, в Yandex Code).
- Нужно оставаться спокойным и чётко объяснять свои действия.

Как готовиться и побеждать?

1. Читай и узнавай задачу: практика на Leetcode и Yandex.Coderun поможет "узнавать" типовые алгоритмы (два указателя, рекурсия, хэш-мапы, строки).
2. Проговори решение: перед кодом озвучь логику, чтобы избежать ошибок "на ходу".
3. Учти краевые случаи: пустой массив, один элемент, отрицательные числа, итерации в начале/конце. Пиши их в комментариях.
4. Пиши и комментируй: тренируйся писать код, объясняя каждую строку.
5. Проверяй: прогоняй код на тестовых данных, фиксируй промежуточные результаты в комментариях.
6. Знай сложность: линейная, квадратичная или логарифмическая — будь готов ответить по времени и памяти.

Главный секрет — насмотренность. Решай задачи (easy/medium) с таймером, без автодополнения, комментируя вслух. Это снизит стресс на собесе.

Верь в себя, и всё получится!

👉 @seniorFront

Почему в интерфейсах со сложной логикой недостаточно показать макеты в Figma?

В принципе, в меме всё честно. Но я всё же решила объяснить, почему не кидаю ссылку на Figma по первому запросу.

В этой небольшой статье я хочу рассказать:
- почему я не отправляю макеты вслепую;
- почему перед созвоном всегда запрашиваю информацию о проекте;
- о чем говорю и что показываю на созвоне знакомства.

👉 @seniorFront

To-do list

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

👉 @seniorFront

Navigation Tabs with Sliding Menu Indicator

В этом видео создаётся анимированное навигационное меню на чистом CSS.

👉 @seniorFront

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

👉 @seniorFront

Radio Button Tiles

Оригинальные радио кнопки, реализованные на HTML и SCSS.

👉 @seniorFront

Vue JS Draw

Приложение для рисования, реализованное на Vue.

👉 @seniorFront

CSS Animation Effects

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

👉 @seniorFront

Cards Dance

Это SVG картинки, анимируемые библиотекой gsap.

👉 @seniorFront

Transform To Prime

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

Пример:

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

👉 @seniorFront