Обновить

Фронтенд

Сначала показывать
Порог рейтинга
Уровень сложности

Призыв к компактному программному обеспечению

Уровень сложностиПростой
Время на прочтение15 мин
Количество просмотров584

Это перевод классической статьи 1995 года одного из титанов теории разработки программного обеспечения - профессора Никлауса Вирта (если найдется некто, кто не знает его, то можно ознакомится, не выходя с habr, со статьями о нем здесь и здесь а небольшая ретроспектива итогов предсказаний Вирта из этой статьи доступна здесь). Текст имеет больше историческое значение, но написан ясным и доступным языком, и, возможно, побудит кого-нибудь пересмотреть подходы к созданию программного обеспечения.

Читать далее

Новости

Мой путь в IT: от iOS до техлида в Альфа-Банке

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров326

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

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

Расскажу коротко, как это произошло у меня.



Старт: iOS, баги и работа с памятью

Мой путь начался с iOS-разработки.

Objective-C, retain/release, утечки, странные баги — то самое время, когда каждое приложение было как маленький квест.


Через полгода мне доверили первый проект «с нуля», и я понял важную вещь:

чем больше ответственности на тебе — тем быстрее ты растёшь.



🔹 Переход в защиту: мессенджеры, шифрование, С/С++


Потом я оказался в проекте со сквозным шифрованием.

Работа с C/C++, интеграция нативных библиотек, криптография, UX мессенджера.


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



🔹 T-банк: 11 iOS-разработчиков и первый серьёзный рефакторинг


В T-банке я впервые стал тимлидом.

У нас была большая кодовая база, и я за год провёл один из самых глубоких рефакторингов в своей карьере:

— разбирали код по словам;

— переходили от наследования к композиции;

— внедряли протоколы;

— переписывали на Swift;

— покрывали всё тестами.


И вот здесь я понял ещё одну важную вещь:


Лидер — это не тот, кто командует.

Лидер — тот, кто делает систему лучше.



Ronte (Берлин): международная команда и 40 человек в проекте

Читать далее

Хватит писать CSS с нуля: как Chakra UI экономит время и нервы разработчика

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров3.3K

В сфере фронтенд‑разработки каждый день приходится решать однотипные задачи: создавать и настраивать внешний вид компонентов, обеспечивать адаптивность и доступность UI без вреда для производительности. Чтобы избавить нас от этой рутины, были созданы библиотеки стилизации.

В данной статье мы рассмотрим одну из таких библиотек — Charka UI V3 в связке с React, так как она не особо большая и проста в изучении. В разных библиотеках синтаксис может немного отличаться, но в основном они все решают одни и те же проблемы. Давайте разберёмся, как она способна помочь нам в разработке.

Читать далее

Ozon, Mail, Yandex — все в кризисе IT

Время на прочтение2 мин
Количество просмотров10K

Сегодня я покажу Вам примеры кризиса IT у маститых компаний. Казалось бы, там всё должно быть отлично с функционалом у приложений, но нет — все они заложники кризиса в отрасли. В конце объясню, почему, пока смотрим примеры.

Читать далее

За два дня после Хабра: как из пет-проекта выросло почти полноценное приложение

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров814

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

И вот что получилось

Анализ аудио потока HLS с помощью Web Audio API и hls.js

Время на прочтение7 мин
Количество просмотров667

В современных веб-приложениях для потокового видео всё чаще требуется не просто воспроизводить контент, но и анализировать аудиодорожку в реальном времени. Например, строить индикаторы уровня громкости (VU/PPM метры), визуализировать спектрограммы или детектировать тишину. В этой статье разберём, как корректно объединить hls.js и Web Audio API для анализа аудио из HLS-потока в браузере, избежав типичных подводных камней.

Читать далее

Как я искал работу в IT и получил 5 офферов

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров33K

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

Читать далее

Как настроить SEO в Next.js так, чтобы проект реально индексировался

Уровень сложностиСложный
Время на прочтение15 мин
Количество просмотров2.2K

Во многих проектах на Next.js возможности для SEO остаются неиспользованными: страницы индексируются не полностью, структурированные элементы отсутствуют, а ссылки в соцсетях отображаются неправильно. Чтобы этого избежать, существуют проверенные инструменты и подходы, которые помогают сделать SEO понятным, полным и эффективным.

В данной статье рассмотрены ключевые аспекты настройки SEO в проектах на Next.js: работа с метаданными, генерация sitemap и robots.txt, оптимизация изображений и внедрение структурированных данных. 

Читать далее

Структура против хаоса — практическая валидация форм с помощью Zod

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров1.1K

Всем привет, с вами Артем Леванов, Front Lead в компании WebRise.

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

Следующая проблема, с которой сталкивается любая форма — валидация.

Формы могут быть красивыми и структурными, но без единого подхода к валидации они быстро превращаются в хаос.

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

Читать далее

Мои любимые CSS-трюки, которые вы могли упустить

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров4.6K

Привет, Хабр!

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

Ничего против них не имею. Просто хочу рассказать о нескольких приёмах, которые вы могли упустить. Они помогут вам в разных ситуациях.

Давайте посмотрим, что я вам подготовил.

Читать далее

Кастомные медиавыражения

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров1.3K

Что такое кастомные медиавыражения и почему обычные CSS-переменные не работают внутри @media. Простое объяснение, понятные примеры и разбор того, как браузер вычисляет стили под капотом.

Импортировать знания

Теория мёртвых фреймворков

Уровень сложностиПростой
Время на прочтение11 мин
Количество просмотров13K

Команда JavaScript for Devs подготовила перевод статьи Пола Кинлана о том, почему новые веб-фреймворки сегодня оказываются «мёртвыми при рождении». Автор утверждает: сочетание сетевых эффектов, экосистемы React и обучения LLM формирует замкнутый цикл, в котором альтернативы просто не успевают набрать критическую массу.

Читать далее

«Баги из ниоткуда»: почему компоненты React ломаются «сами по себе» и как это исправить

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров2.4K

Прямая мутация данных — ситуация, когда мы меняем объект или массив по существующей ссылке, не создавая новую копию. В React это одна из самых частых и при этом самых коварных ошибок. Она нарушает принцип неизменяемости (immutability) — если данные изменились, должен появиться новый объект, а старый оставаться без изменений.

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

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

Читать далее

Ближайшие события

Ваши тесты упали по причине JavaScript

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров1.8K

Рассказываем, как безобидная строка JavaScript-кода привела к нарушению стабильности тестов продукта, а также о том, как можно избежать подобных ошибок.

Читать далее

Модификаторы вариантности параметров типа в TypeScript

Уровень сложностиСложный
Время на прочтение5 мин
Количество просмотров2.3K

Здесь будут рассмотрены не очевидные, редкие и сложные инструменты и парадигмы для работы с типами в TypeScript.

Читать далее

Сужение дипазона типов в TypeScript

Уровень сложностиСредний
Время на прочтение18 мин
Количество просмотров546

Тип Discriminated Unions (дискриминантное объединение), часто обозначаемое как Tagged Union (размеченное объединение), так же как и тип union (объединение), является множеством типов, перечисленных через прямую черту | . Значение, ограниченное дискриминантным объединением, может принадлежать только к одному типу из множества.

Несмотря на то, что Discriminated Union в большей степени идентичен типу Union , все же существует два отличия.

Первое отличие заключается в том, что типу Discriminated Union могут принадлежать только ссылочные типы данных.

Второе отличие в том, что каждому объектному типу, также называемые варианты, составляющему Discriminated Union , указывается идентификатор варианта который называется дискриминант.

Помните, что вывод типов, без помощи разработчика, способен работать лишь с общими для всех типов признаками?

Рассмотрим пример:

Читать далее

Руководство по архитектуре браузерных песочниц: как работает изоляция JavaScript-кода

Уровень сложностиСредний
Время на прочтение54 мин
Количество просмотров2.5K

Всем привет! Последние несколько месяцев я работаю над пет-проектом — интерактивной образовательной платформой для изучения Web Audio API и принципов обработки и синтеза цифрового звука. На платформе пользователи смогут решать задачи, программируя на JavaScript прямо в браузере. Эти программы выполняются в изолированной среде — песочнице, где пользовательский код не может повлиять на работу самой платформы.

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

Устроиться поудобнее и погрузиться в тему

Идеально размещённые тултипы: все четыре стороны

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров1.5K

Пора к части второй! У нас уже есть очень хорошие функциональные тултипы с позиционированием, но они в основном «смотрели» вверх или вниз и смещались у краёв, чтобы избежать выхода за границы. Теперь мы пойдём дальше и рассмотрим четыре позиции без смещений.

Читать далее

Архитектура фронтенда. Навеяно болью от использования FSD

Уровень сложностиСредний
Время на прочтение15 мин
Количество просмотров4.7K

Кто я такой и с какой горы прибыл?

Зовут меня Юра и у меня немногим больше семи лет опыта разработки фронта на vue+typescript. Начал я, что забавно, с Angular 5 в далёком 2018, когда пятёрка ещё была актуальной версией, и работал с ним немногим больше пары месяцев, после чего перекатился во vue2.

Работал я исключительно в B2B и внутренней разработке. Системы документооборота, сервисдески и вот это вот всё. Благодаря этому я повидал разного. От DDD, до "паста-болоньезе-код".

На последних двух проектах я наступил в FSD. Методологию для организации кодовой базы выбирал не я, но я честно пытался в ней разобраться и как-то удобно организовать. К сожалению, оба раза код становился проблемой с высокой связностью, неочевидным размещением сущностей и сложно отслеживаемой системой взаимодействий компонентов кода.

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

Читать далее

3D-таймлайн на чистом JavaScript: как я собирал этот слайдер по шагам

Уровень сложностиСредний
Время на прочтение30 мин
Количество просмотров2.1K

Устал от однообразных каруселей? В статье показываю, как шаг за шагом собрать 3D-таймлайн-слайдер с перспективной сеткой, плавной прокруткой и переключением категорий на чистом TypeScript и CSS.

Читать далее
1
23 ...