Sticker filter

На редактируемый блок текста накладывается SVG картинка с фильтрами.

👉 @seniorFront

​Вайб-кодинг: практика, о которой почему-то не говорят

В феврале мир разработки перевернулся с выходом Sonnet 3.7. Потому что вдруг внезапно оказалось, что джуны уже не очень-то и нужны. И нейросетка нормально заменяет мидлов тоже.

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

Пример проекта с прикручиванием аналитики к инфраструктуре:
- Сначала в GPT 4.5 провёл продуктовые исследования и сформулировал требования.
- Попросил превратить это в архитектурный план.
- Отревьюил, поправил тупые ошибки.
- Затем этот план (как метапромпт) скормил Sonnet в VS Code через плагин Cline. Попросил сначала создать общую структуру, шаблонные имплементации, документацию, спецификации API (protobuf для gRPC, REST API).
- Архитектурно сразу заложил микросервисы. Sonnet для каждого сервиса подобрал и обосновал оптимальную базу данных (где-то Postgres, где-то ClickHouse и т.д.).
- Сгенерировал SDK для взаимодействия, примеры использования. Сразу заложил observability: централизованные логи, метрики Prometheus, трейсинг Jaeger/Tempo, дашборды для Grafana.
- Потом итерационно генерировал код: сначала тесты (End-to-end, BDD), потом имплементацию под эти тесты.
- Написал манифесты для Kubernetes и Docker Compose для локального запуска.
- Сгенерировал даже скрипты для тестов REST API через curl и gRPC через gRPCurl.

И всё.

А теперь практика — что делать с тем, что современные нейросети учились преимущественно на говнокоде и как быть с джунами. Продолжение в статье

👉 @seniorFront

Что я понял за три года работы на чужой стартап — мои 10 выводов

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

👉 @seniorFront

Retro Card Carousel

Оригинальная карусель, реализованная на HTML и CSS. Логика переключения темы реализована в JS.

👉 @seniorFront

Focus Text Effect

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

👉 @seniorFront

UX на уровне

👉 @seniorFront

Stacked Poetic Cards

Карточки реализованы на чистых HTML и CSS.

👉 @seniorFront

3D Flip Card

Карточки с эффектом поворота, реализованные на HTML и CSS

👉 @seniorFront

3D Tilt & Parallax Card

В этом видео создается 3D карточка с эффектом Parallax на HTML и CSS.

👉 @seniorFront

Animated SVG filter

На картинки накладываются анимированные SVG фильтры.

👉 @seniorFront

Which are in?

Вам даны два массива - a1 и a2. Верните отсортированный в лексикографическом порядке массивr строк из a1, которые являются подстроками строк из a2.

Пример 1:

a1 = ["arp", "live", "strong"]

a2 = ["lively", "alive", "harp", "sharp", "armstrong"]

returns ["arp", "live", "strong"]

Пример 2:

a1 = ["tarp", "mice", "bull"]

a2 = ["lively", "alive", "harp", "sharp", "armstrong"]

returns []

👉 @seniorFront

Какие они — лучшие программисты?

За свою жизнь я повстречал немало разработчиков и недавно задался вопросом: «А что делает разработчика одним из лучших? Что у таких людей есть общего?»

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

👉 @seniorFront

​Расскажи про области видимости в JS

В JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы.

Глобальная область видимости
Переменные и функции, объявленные вне любых функций или блоков, находятся в глобальной области видимости. Они доступны из любой части программы.

var globalVar = 'Я глобальная переменная';

function testFunction() {
  console.log(globalVar); // Доступно
}

testFunction();
console.log(globalVar); // Доступно

Функциональная область видимости
Переменные, объявленные с помощью var внутри функции, имеют область видимости, ограниченную этой функцией. Они недоступны за её пределами.

function testFunction() {
  var functionVar = 'Я внутри функции';
  console.log(functionVar); // Доступно
}

testFunction();
console.log(functionVar); // Ошибка: переменная functionVar недоступна

Блочная область видимости
Переменные, объявленные с помощью let и const, имеют область видимости, ограниченную ближайшим блоком {}.

if (true) {
  let blockVar = 'Я внутри блока';
  console.log(blockVar); // Доступно
}

console.log(blockVar); // Ошибка: переменная blockVar недоступна

Область видимости модуля (Module Scope)
При использовании модулей (например, import и export в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.

export const myVar = 'Я переменная из модуля';

import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"

👉 @seniorFront

Creative Black Hole

Создано и анимировано на canvas и чистом JS.

👉 @seniorFront

7 признаков профессиональной стагнации разработчика

В мире кода есть понятие code smells — признаки плохого кода. Сегодня я расскажу о junior smells — характерных признаках «старого джуна». У каждого из них есть яркие черты, по которым их легко распознать. И, что самое важное, — для каждого из этих признаков я подготовил конкретное решение, которое поможет перейти на следующий уровень.

Семь ключевых признаков, по которым можно безошибочно определить, кто действительно вырос, а кто лишь притворяется.

Джун в маске сеньора
Этот тип разработчика внешне уже не выглядит новичком. Он легко оперирует модными терминами, посещает метапы и тренинги, но за технической болтовнёй скрывается отсутствие глубинного понимания. Он может эффектно говорить о полиморфизме, асинхронности и инъекциях зависимостей, но сам не до конца понимает, что стоит за этими словами.

ИИ-зависимость
Когда-то это был синдром «копипасты» со Stack Overflow. Сегодня — новое поколение зависимости: от нейросетей. Всё начинается с удобства — автодополнение, готовые сниппеты, помощь в дебаге. Но со временем инструменты становятся костылём, без которого разработчик чувствует себя беспомощным.

Мастер временных решений
Это один из самых распространённых и опасных признаков старого джуна. В условиях дедлайнов, давления, багов на проде и непрерывного потока задач, он начинает использовать «временные решения» — быстрые костыли, которые якобы потом будут переписаны.

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

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

Архитектор незаменимости
Этот тип разработчика не просто пишет код — он строит лабиринты. Сложные, запутанные, полные нестандартных решений, нестабильных зависимостей и неписаных правил. Не потому что так надо, а потому что это делает его единственным, кто может с этим разобраться.

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

👉 @seniorFront

Перерабатывай без опозданий или умри: как стремление к соблюдению дисциплины приводит к трагедиям в Японии

Дисциплинированность и пунктуальность японцев — то, что часто отмечают как сильную сторону подданных императора. И, конечно, это неплохие черты сами по себе. Однако всё хорошо в меру, и порой отсутствие гибкости и слишком рьяное желание сохранять дисциплину приводит к трагедиям. О рабочих перегибах на местах (в том числе и в IT-компаниях) рассказывает японист и переводчица Полина Гуленок

👉 @seniorFront

ScrollSynced Carousel

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

👉 @seniorFront

How to make a Waterdrop

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

👉 @seniorFront

Олды, таблетки приняли?

👉 @seniorFront