Product page

Эта страница товара с выбором цвета реализована на чистом CSS.

👉 @seniorFront

Simple CSS Claymorphism Icon Hover Effects

В этом видео создаются иконки с эффектом при наведении на HTML и CSS.

👉 @seniorFront

Hover slider

Логика работы слайдера, а также переключение темы реализованы в JS.

👉 @seniorFront

parseInt() reloaded

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

Примеры:

 "one" => 1
 "twenty" => 20
 "two hundred forty-six" => 246
 "seven hundred eighty-three thousand nine hundred and nineteen" => 783919

👉 @seniorFront

Топ нейросетей 2025: маст-хэв для IT-специалиста

В этой статье собраны наиболее интересные и практически полезные нейросети, заслуживающие вашего пристального внимания в 2025 году. Это не просто очередной список, а подробный гайд: мы детально разберем каждую модель или инструмент, рассмотрим их ключевые функции, преимущества и потенциальные сценарии использования в вашей повседневной IT-деятельности.
Наша цель – помочь вам сориентироваться в этом быстрорастущем мире AI-решений и выбрать те, которые смогут принести реальную пользу именно вам. Пристегните ремни, мы погружаемся в мир передового ИИ, который уже сегодня меняет правила игры!

👉 @seniorFront

Как значения box-size влияют на размер элемента?

Значения свойства box-sizing в CSS определяют, как учитываются отступы (padding) и рамки (border) при расчете размера элемента (width и height). Это влияет на окончательные размеры и внешний вид элемента на странице.

Значение content-box
Это значение по умолчанию для всех элементов. Когда вы устанавливаете размеры элемента с box-sizing: content-box, ширина и высота элемента включают только содержимое (content), но не включают отступы и рамки.

.element {
    box-sizing: content-box; /* значение по умолчанию */
    width: 200px;
    padding: 20px;
    border: 10px solid black;
}

Расчет размера
Ширина - 200px (содержимое) + 20px (отступ слева) + 20px (отступ справа) + 10px (рамка слева) + 10px (рамка справа) = 260px.
Высота - аналогично рассчитывается с учетом отступов и рамок сверху и снизу.

Значение border-box
При использовании значения border-box, размеры элемента (width и height) включают содержимое, отступы и рамки. Это делает расчет размеров более простым и предсказуемым.

.element {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 10px solid black;
}

Расчет размера
Ширина - 200px уже включает отступы и рамки, то есть фактическая ширина содержимого будет 140px (200px - 20px (отступ слева) - 20px (отступ справа) - 10px (рамка слева) - 10px (рамка справа)).
Высота - аналогично, высота включает отступы и рамки.

Пример для сравнения

<div class="content-box">Content-box</div>
<div class="border-box">Border-box</div>

div {
    margin: 10px;
    padding: 20px;
    border: 10px solid black;
}

.content-box {
    box-sizing: content-box;
    width: 200px;
    height: 100px;
}

.border-box {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
}

👉 @seniorFront

Star Wars Imperial Army's Product Slider

Свёрстано на HTML и SCSS. Логика работы слайдера реализована библиотекой Swiper.

👉 @seniorFront

​Soft skills которые изменили мою жизнь и могут изменить вашу

Четыре года назад я упёрся в стену. Я работал QA инженером, изучал инструменты, автоматизацию, базы данных — но карьерного роста не было. Мне хотелось развиваться, двигаться в сторону тест-менеджмента, но одних технических навыков оказалось недостаточно. Тогда я впервые осознал, что не только харды определяют успех.

Когда я понял, что без soft skills дальше не продвинусь, встал следующий вопрос: как их прокачивать? С хардовыми навыками всё просто — изучаешь инструмент, пишешь код, набиваешь руку. А вот с софтами всё сложнее. Их нельзя «выучить» по книжке, они развиваются только через практику.

Я начал с того, что выбрал навыки, которые нужны на следующем карьерном уровне. Если хочешь вырасти до сеньора или лида, логично начать прокачивать то, что потребуется в этих ролях:

1. Планирование
Раньше я не уделял этому внимания, но как только начал ежедневно планировать задачи, продуктивность выросла. Ведение списка дел, расстановка приоритетов, контроль за выполнением — всё это делает работу эффективнее.

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

2. Многозадачность
Считается, что многозадачность вредна, но в реальности важно не разбрасываться, а грамотно переключаться между процессами. Благодаря планированию я структурировал работу и смог заниматься сразу несколькими активностями.

Что помогло:
- Разделение задач на основные и второстепенные.
- Чёткое понимание приоритетов: что критично, а что можно отложить.
- Использование техник тайм-менеджмента, чтобы не терять фокус.

3. Наставничество
Менторство не только помогает новичкам, но и развивает самого наставника. Я начал помогать коллегам с онбордингом, составлять планы развития и отслеживать прогресс. Со временем это привело к тому, что я начал формулировать задачи понятнее, структурировать знания и лучше видеть слабые места в процессах.

Как я развивал этот навык:
- Помогал новым сотрудникам адаптироваться, отвечал на их вопросы.
- Разбирал сложные темы вместе с коллегами, объяснял, как устроены процессы.
- Составлял планы развития и контролировал их выполнение.

4. Постановка и контроль задач
Это навык, который делает специалиста более ценным. Если ты не просто выполняешь задачи, а умеешь их формулировать, раздавать и контролировать — ты уже на шаг впереди.

Как я прокачивал:
- Вёл встречи команды тестирования, ставил задачи на анализ, тестирование, документацию.
- Внедрил практику ревью тест-кейсов, что повысило качество работы.
- Следил за выполнением поставленных задач, анализировал причины срывов сроков.

5. Фасилитация встреч
Без этого навыка невозможно эффективно работать в команде. Я начал организовывать встречи между тестировщиками, разработчиками и менеджерами. Важно не просто поговорить, а зафиксировать договорённости и добиться их выполнения.

Что я делал:
- Проводил «3 Амиго» — встречи между тестировщиками, разработкой и менеджментом для уточнения требований.
- Вёл записи обсуждений, фиксировал итоги, контролировал выполнение решений.
- Следил за тем, чтобы встречи были продуктивными, а не превращались в пустую болтовню.

👉 @seniorFront

«Люди сами не знают, чего хотят»: как читать сигналы команды

В этой статье мы поговорим о том, что на поверхности не лежит, но разрушающим эхом бьёт по эффективности команды. Это — сигналы недовольства, усталости и скрытого сопротивления, которые члены команды подают… молча. Тема тонкая, неудобная и потому часто игнорируемая. Но если вы — тимлид, который не просто управляет задачами, а работает с людьми, вам нужно уметь слышать не только сказанное, но и несказанное.

👉 @seniorFront

Scroll List Animation

Плавная прокрутка реализована библиотекой smooth-scrollbar

👉 @seniorFront

Image Hover Effect

В этом видео создаются карточки, анимированные при наведении на CSS.

👉 @seniorFront

Рабочая схема по удержанию юзеров

👉 @seniorFront

Animated Weather Cards

Внутри карточки находится SVG картинка, анимируемая библиотекой TweenMax.

👉 @seniorFront

CSS Animation

Подборка различных CSS анимаций

👉 @seniorFront

Light & Shadow Text Shadow Animation

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

👉 @seniorFront

Expanding card page transition effect

При нажатии на на карточку запускаются CSS анимации, а также анимации, реализованные в JS.

👉 @seniorFront

The Hashtag Generator

Маркетологи тратят слишком много времени на введение хэштегов. Давайте поможем им с помощью нашего собственного генератора хэштегов!

Вот что нужно сделать:
✓  Все слова должны начинаться с хэштега (#).
✓  Все слова должны быть написаны с заглавной буквы.
✓  Если конечный результат длиннее 140 символов, он должен вернуть false.
✓  Если входные данные или результат - пустая строка, то он должен возвращать false.

Пример:

" Hello there thanks for trying my Kata"  =>  "#HelloThereThanksForTryingMyKata"
"    Hello     World   "   =>  "#HelloWorld"
""  =>  false

👉 @seniorFront

​Топ-10 антипаттернов в разработке ПО, которых стоит избегать

Если вам достался проект, в котором копаться — всё равно что распутывать спагетти в боксерских перчатках, вы, скорее всего, столкнулись с антипаттернами. К этим практикам сначала прибегают как к быстрым решениям, но затем они превращаются в повторяющиеся ночные кошмары. Представьте себе магическую кнопку деплоя, которая ломает всё в 2 часа ночи — а дежурите вы.

Антипаттерны проникают активнее всего, когда команды разработки ставят скорость выше структуры. То, что начинается как невинная короткая дорога, может перерасти в полноценного алгоритмического монстра, подрывая производительность и поддерживаемость. Джоэль Спольски говорит, что «читать код сложнее, чем его писать». А читать такой код попросту больно.

Хорошая новость: вы не застряли в этом. Независимо от того, управляете ли вы кодом внутри компании или работаете с партнёрами по разработке ПО, главное — выявить эти проблемы вовремя. Давайте рассмотрим самые распространённые антипаттерны в программировании, от Спагетти-кода до «Лодочных якорей», с примерами реального кода. Вы научитесь замечать «запашки» на ранней стадии и проводить рефакторинг до того, как ваш продукт станет «Большим комком грязи» (Big Ball of Mud).

👉 @seniorFront

Что такое двустороннее связывание ?

Двустороннее связывание данных (Two-way data binding) — это паттерн проектирования, используемый в разработке пользовательских интерфейсов, при котором пользовательский интерфейс автоматически обновляется при изменении данных, и наоборот, данные автоматически изменяются при модификации пользовательским интерфейсом. Это означает, что модель и представление (view) синхронизированы в реальном времени: изменение в модели немедленно отражается в представлении, и любое изменение в представлении немедленно обновляет модель.

Как это работает
У вас есть текстовое поле в форме (представление) и переменная (модель), которая хранит значение этого текстового поля. С двусторонним связыванием, если пользователь изменяет значение в текстовом поле, переменная в модели будет автоматически обновлена соответствующим образом. Аналогично, если переменная изменяется программно (например, в результате какой-то логики приложения), изменение отразится в текстовом поле.

Оно широко используется в фреймворках и платформах для разработки одностраничных приложений (SPA), таких как Angular. В Angular, например, это достигается с помощью директивы [(ngModel)], которая связывает значение HTML элемента формы (например, <input>) с свойством компонента.

<input [(ngModel)]="user.name">

В этом примере, user.name — это свойство компонента, которое связано с текстовым полем. Любое изменение в поле ввода немедленно обновит user.name, и любое изменение user.name будет немедленно отражено в поле ввода.

Преимущества:
- Упрощение разработки, поскольку не нужно вручную обновлять представление или модель при изменении другой части.
- Улучшение пользовательского опыта, обеспечивая немедленное отображение изменений без дополнительных действий пользователя или дополнительного кода.

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

👉 @seniorFront