Navigation Cursor Effect

Логика перемещения курсора реализована в JS. Стилизовано в CSS.

👉 @seniorFront

Switch Day and Night - Cat

Реализовано на чистом CSS. При активации переключателя задаются стили по псевдо-классу :checked

👉 @seniorFront

Simple Radial Menu

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

👉 @seniorFront

Swiper

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

👉 @seniorFront

Найдите гласные

Мы хотим узнать индекс гласных в заданном слове, например, в слове super есть две гласные (вторая и четвертая буквы).

Пример:

Mmmm  => []
Super => [2,4]
Apple => [1,5]
YoMama -> [1,2,4,6]

👉 @seniorFront

JavaScript-фреймворки и библиотеки, на которые стоит обратить внимание в 2025 году

Сегодня поделюсь подборкой фреймворков и библиотек, которые могут быть полезны JavaScript-разработчику. О самых известных, вроде React, Vue.js, Next.js, говорить не буду, о них и так все знают. Вместо этого предлагаю посмотреть менее популярные инструменты. Если вы пользуетесь другими фреймворками и библиотеками, которые не вошли в подборку — пишите о них в комментариях. Поехали!

👉 @seniorFront

​Что такое цепочка прототипов?

Это механизм в JavaScript, с помощью которого объекты могут наследовать свойства и методы друг у друга. Этот механизм лежит в основе объектно-ориентированной модели JavaScript.

Основные концепции:

Прототипы
Каждый объект в JavaScript имеет свойство __proto__ (или скрытое свойство [[Prototype]]), которое указывает на его прототип. Прототип — это другой объект, от которого объект наследует свойства и методы. Объекты могут быть созданы с использованием конструктора, и все объекты, созданные одним и тем же конструктором, наследуют от одного и того же прототипа.

Цепочка прототипов
Если свойство или метод не найдено у объекта, JavaScript будет искать его в прототипе объекта. Этот процесс продолжается вверх по цепочке прототипов до тех пор, пока не будет найдено свойство или не будет достигнут конец цепочки (обычно это Object.prototype). Если свойство не найдено в цепочке прототипов, результатом будет undefined.

Рассмотрим простой пример, чтобы проиллюстрировать, как работает цепочка прототипов: В этом примере myDog наследует метод speak от Animal.prototype и метод bark от Dog.prototype. Когда вызывается myDog.speak(), JavaScript сначала ищет метод speak в myDog. Поскольку его там нет, он переходит к Dog.prototype, где тоже его не находит, и затем переходит к Animal.prototype, где метод speak найден и выполняется.

// Создаем объект Animal
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} издает звук.`);
};

// Создаем объект Dog, который наследует от Animal
function Dog(name, breed) {
  Animal.call(this, name); // Вызов конструктора Animal
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // Наследование прототипа Animal
Dog.prototype.constructor = Dog; // Восстановление конструктора Dog

Dog.prototype.bark = function() {
  console.log(`${this.name} лает.`);
};

const myDog = new Dog('Рекс', 'Лабрадор');

myDog.speak(); // Рекс издает звук.
myDog.bark(); // Рекс лает.

Особенности

Прототипы по умолчанию
Все объекты, созданные с использованием литерала объекта {}, имеют в качестве прототипа Object.prototype. Все функции, включая функции-конструкторы, имеют свойство prototype, которое указывает на прототип объектов, созданных этой функцией.

Изменение прототипа объекта
Прототип объекта можно изменить с помощью метода Object.setPrototypeOf(), но это не рекомендуется из-за потенциальных проблем с производительностью.

const cat = {
  meow() {
    console.log('Мяу!');
  }
};

const myCat = Object.create(cat);
myCat.name = 'Мурка';
myCat.meow(); // Мурка мяукает.

Object.setPrototypeOf(myCat, {});
myCat.meow(); // Ошибка, так как метод больше не существует в цепочке прототипов

👉 @seniorFront

Interactive sunny-side pattern

Реализовано на canvas, анимировано библиотекой gsap.

👉 @seniorFront

​Карьера в ИТ: выгорание, потолок и ожидания рынка

Где потолок развития в IT?
Для IT-специалистов момент, когда становится сложно понять, куда расти дальше, наступает довольно часто. Потолок развития ощущается, когда специалист перестает видеть четкую траекторию дальнейшего роста или не знает, какие именно навыки нужно развивать для перехода на следующий уровень.
На практике потолок чаще всего не внешний, а внутренний. Люди боятся брать на себя новые задачи, которые требуют навыков, выходящих за рамки их опыта. Это как шаг в неизвестность: никогда не знаешь, насколько успешно ты справишься, пока не попробуешь. Но именно это испытание позволяет по-настоящему расти.

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

Главные вызовы IT-специалистов сегодня
Для IT-специалистов сегодня особенно актуальны два вызова.

1. Быстрое обучение. Технологии меняются настолько стремительно, что навыки, актуальные год назад, могут устареть уже сегодня. Чтобы оставаться на гребне волны, нужно не просто учиться, но делать это осмысленно: понимать, как применять новые знания в реальных проектах.
2, Умение оптимизировать свою работу. Современный рынок не терпит неэффективности. Сегодня важно минимизировать рутину, грамотно использовать готовые инструменты, будь то open-source решения или платформа low-code.

Рынок в целом перекашивается в сторону каких-то продуктовых, активных, оперативных специалистов. Они начинают синхронизировать видение как технического развития продукта, так и работать с более пользовательскими метриками. Специалист начинает применять в себе гораздо больше ролей.

Что будет с IT-рынком в обозримом будущем?
В ближайшие годы IT-рынок будет развиваться под влиянием трех ключевых трендов:

1. Локализация. На первый план выйдут решения, адаптированные под локальные рынки, что потребует от специалистов глубокого понимания специфики различных стран.

2. Суперприложения. Продукты, объединяющие разные функции в одном интерфейсе, становятся все популярнее. Сегодня есть потребность в «палочка-выручалочке» – одном приложении, которое саккумулировало бы в себе максимум сервисов. Спрос стоит на гибкость — клиенты ожидают универсального решения на стыке технологий, бизнеса и психологии.

Создание таких приложений требует высокой гибкости в проектировании и интеграции технологий.

3. Искусственный интеллект. AI станет не просто инструментом, а неотъемлемой частью большинства процессов. Умение интегрировать его в рабочие процессы будет ключевым навыком.

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

👉 @seniorFront

Хотели узнать больше про инженерную команду Selectel?
Спешим познакомить вас с новым проектом ребят!

На этой страничке вы найдете:

— Ключевые принципы, на которые инженеры Selectel опираются в работе
— Подробную информацию о жизни ребят в компании: как устроены процессы и какие технологии используются
— Чем живут технические комьюнити

А также познакомитесь с базой знаний инженеров: докладами и статьями на Хабре!

Скорее переходите и читайте😉

Реклама, АО «Селектел», ИНН: 7810962785, ERID: 2VtzqwiYM4W

Подробный гайд: как создать резюме, которое привлечет внимание рекрутера + готовые шаблоны

Хотите создать резюме, которое не только выделится среди сотен других, но и успешно пройдёт ATS-системы, приведя вас к собеседованиям и лучшим офферам? Эта статья покажет, как раскрыть ваши сильные стороны и уверенно преодолеть этап скоринга. А в завершение вас ждут полезные бонусы — готовые шаблоны!

👉 @seniorFront

<pixel-canvas>

При наведении отображается Web Component, реализованный на чистом JS.

👉 @seniorFront

Stack Card Hover Effect

В этом видео создается эффект стопки карт на чистом CSS при помощи свойства box-shadow с множеством значений.

👉 @seniorFront

Любой проджект, объясняющий задачу

👉 @seniorFront

Interactive Christmas Tree

Вся сцена - это SVG картинка, анимированная библиотекой gsap.

👉 @seniorFront

Menu Transition

Подборка анимированных бургер-кнопок, реализованных с использованием препроцессоров Slim и SCSS.

👉 @seniorFront

Floating Menu

В этом видео создается "парящее" меню на HTML, CSS и JS.

👉 @seniorFront

Search Bubbles

Реализовано на canvas, анимировано библиотекой gsap.

👉 @seniorFront

Extract the domain name from a URL

Напишите функцию, которая при задании URL-адреса в виде строки анализирует только имя домена и возвращает его в виде строки

Пример:

"http://google.com" //  "google"
"http://google.co.jp"  //  "google"
"www.xakep.ru"  //  "xakep"
"https://youtube.com"  //  "youtube"

👉 @seniorFront