Недавно мы в Лиге Ставок обновили наш основной сайт. Изменения кардинальные. По сути мы выкинули старый, и на его место выпустили новый продукт. Можно сказать, мы убили устоявшуюся годами привычку пользователя и предложили ему сформировать новый паттерн использования. Как это отразилось на метриках? Стало лучше? Хуже? Сейчас расскажу.
Как всего одна небольшая React-задача помогает глубже понять уровень кандидата на собеседовании? Разбираем нюансы работы с хуками, асинхронностью, состоянием гонки и сайд-эффектами. На первый взгляд задача кажется простой - всего лишь компонент, загружающий данные по username. Но в процессе решения выявляются ключевые моменты: правильно ли кандидат управляет состоянием, учитывает ли смену пропсов, обрабатывает ошибки и предотвращает race conditions. Этот вопрос помогает не просто проверить знания, а увидеть, как кандидат рассуждает и принимает технические решения.
Всем привет! Меня зовут Вова я разработчик СБОЛа в web-канале.
Наверное, каждый фронтенд‑разработчик, по крайней мере на собеседовании, сталкивался с вопросами: «Какие единицы измерения существуют в CSS?» или «Какие единицы измерения ты использовал для CSS?», и т. п. Скорее всего, большинство интервьюеров удовлетворил бы ответ: «Абсолютные и относительные». И в целом, это, по‑своему, правильно. Но зададим себе вопрос: если разделить множество единиц измерения на два подмножества — абсолютные и относительные, — то будут ли внутри этих подмножеств единицы измерения действительно взаимозаменяемыми? Скорее нет, чем да. Тогда по какому признаку мы могли бы их разделить? По функциональному использованию.
В статье рассмотрены различные методы организации обмена данными и реактивным состоянием во Vue.js приложениях, как то:
- Prop drilling
- Provide/Inject
- Composition API
- Pinia
- Event Bus
Последние два года я почти не пишу код. Наверное, только 10% кода в моих личных и коммерческих проектах написано мной, все остальное генерируют нейронки. За это время у меня выработался определенный подход к созданию проектов и появились инструменты, которые я для этого использую. Этим я и хочу поделиться с вами под катом.
Привет! Меня зовут Олег Кретинин, и я разработчик в команде общих компонентов в Яндекс Еде. Сегодня я расскажу о том, как мы смогли успешно снять нагрузку с нашей базы данных, а также уменьшить её размер.
Помимо сервисов, написанных на C++, Go и Python, у нас есть монолит, он же «кора», на PHP, который всё ещё представляет огромную кодовую базу, хранит кучу логики и предоставляет данные по API для 120 сервисов.
После обновления фреймворка и версии PHP мы принялись за решение другой проблемы, которая всё чаще и чаще давала о себе знать. В тот период у нас возросло количество инцидентов, связанных с базой данных, и нам нужно было что‑то придумать, чтобы стабилизировать проект максимально быстро. Случалось, что всё сыпалось во время праздничных дней, когда количество заказов увеличивалось на 30–40%, или во время разовых массовых операций, например когда однажды в большую сеть ресторанов добавлялся бесплатный соус к каждой позиции меню.
Всем привет! Меня зовут Владимир и работаю джуниор фронтенд разработчиком в одной из лучших компаний :-)
Сегодня хочу вам рассказать, как можно немного причесать ваш проект чтобы он выглядел более читабельным.
Всем привет! Сейчас без live-coding'a никуда: на собеседованиях часто дают одну-две задачки, которые нужно решить за определённое время. Сами задачи могут быть несложными (не супер-пупер алгоритмическими), но новички могут переволноваться и не справиться с ними.
Поэтому в этой статье я хотел бы описать типовые задачи, которые встречаются в этой секции на позицию frontend или backend разработчика (если бэк на JS). Это поможет вам получить общее представление о том, что может ждать вас.
Мой рабочий PC — древний мамонт, и когда я открываю в Chrome много вкладок, кулеры начинают вопить. Я всегда думал, что дело в моём старом компьютере, но потом перешёл на Firefox и обнаружил, что виноват Chrome.
Всё, что может Chrome, и даже больше
Сколько себя помню, Chrome всегда был моим основным браузером. Все мои пароли, закладки и расширения оказывались под рукой после входа в аккаунт Google. На своём компьютере я пользуюсь только браузером, поэтому никогда не испытывал нужды апгрейдить «железо». По крайней мере, до недавнего времени, когда я установил пару новых расширений Chrome.
Я решил, что настало время установить в машину ещё немного ОЗУ или навсегда с ней распрощаться. Временно я перешёл на Firefox. Создал для него новый аккаунт и связал его с цепочкой синхронизации между PC и телефоном. К моему удивлению, старый PC работал без проблем даже при куче открытых вкладок. Смолкли и голоса рассерженных вентиляторов.
И что ещё удивительнее, Firefox способен на всё, что умеет Chrome. Синхронизация между устройствами работает идеально. Вы получаете широкий ассортимент браузерных аддонов и можете гибко настраивать основную часть интерфейса. Он обладает множеством удобных возможностей, которых нет у Chrome.
Одна из функций Chrome, отсутствующих в Firefox — это умение превращать обычные веб-страницы в веб-приложения, которые можно запускать с рабочего стола или панели задач. Мне бы хотелось, чтобы разработчики добавили её, но несмотря на этот недостаток, я всё равно не думаю, что вернусь к Chrome. Позвольте мне и вас убедить, что стоит попробовать поработать с Firefox.
Всем привет!
Меня зовут Курилкина Арина, я почти год являюсь фронтенд-разработчиком интеграционных и инфраструктурных сервисов склада. Также я 2,5 года разрабатывала мессенджер для сайтов Покупателя (Buyer Experience или же, как мы у себя говорим, — BX) и Продавца (Seller Experience — SX). Таким образом, я успела поработать с продуктами трёх крупных структур Ozon: BX, SX и Warehouse (Складские сервисы*).
Каждая структура уникальна, имеет свои потребности, свои проблемы и свои решения. И каждая является неотъемлемой частью функционирования компании Ozon. Своеобразные три кита, на которых стоит маркетплейс. Поработав с каждым из них, я посмотрела на клиентскую разработку и на работу с дизайн-системами и UI-kit’ами, в частности, с разных сторон. И теперь я хочу поделиться своим опытом.
Моя статья может быть полезна всем тем, кто хочет разобраться в принципах взаимодействия с дизайн-системами и UI-kit и научиться эффективно использовать их в своих проектах.
Hack Frontend — платформа, которая поможет вам отточить навыки фронтенд-разработки и успешно пройти собеседование на должность Frontend-разработчика.
Каждый frontend-разработчик сталкивался с ошибкой вида TypeError: Cannot read property 'name' of undefined. Это часть целого класса ошибок в JavaScript, возникающих из-за несоответствия фактического формата данных ожидаемому. В этой статье расскажу, как избавиться от подобных проблем и добиться стабильности, внедрив три ключевых шага: API-слой, Backend-for-Frontend (BFF) и проверку с помощью Zod.
Основано на личном опыте при работе с Cursor AI (и другими платформами)
Используйте по возможности системный промпт. Cursor позволяет иметь .cursorrules файл, в котором можно прописать основные установки по проекту. Пример файла.
Напишите свой и попросите AI улучшить его. Автокомплит его плохо видит, но chat и composer - вполне. По крайней мере, CSS дизайн систему проекта и свои компоненты при генерации кода использует четко.
В этой статье я хочу рассказать о моей библиотеке, которой не должно существовать.
Почему её не должно существовать? Потому что функциональность логирования, по моему глубокому убеждению, должна быть в числе первых включена в любой новый язык.
А разработчики старых языков тоже должны об этом подумать и включить логирование, если это ещё не сделано, в ближайший релиз.
Библиотека Log4ts вдохновлена идеями Log4J и обеспечивает логирование в программах, написанных на TypeScript.
Далее в этой статье я расскажу о том, как её установить, использовать и конфигурировать.
А в конце я опишу коротенько другие мои библиотеки, которые тоже не должны были бы существовать.
Привет, Хаброжители!
Привет! Я Даниил, занимаюсь разработкой на Angular в T-Банке и хочу поделиться с вами опытом использования фикстур в Playwright. Я решил поговорить об этом, потому что вместе с ростом функциональности проектов растут и сложности при тестировании, а фикстуры предоставляют удобный способ избавиться от дублирующегося кода и сложных моков.
Эта статья посвящена основам: зачем нужны фикстуры, чем они отличаются друг от друга и какую пользу приносят при тестировании веб-приложений. Мы подробно разберем устройство фикстур, посмотрим, как их создавать и грамотно внедрять в тесты. А еще рассмотрим практические примеры, которые помогут с легкостью применить полученные знания на реальном проекте. Поехали!
Классический мобильный банкинг для физлиц - это нативные приложения под iOS и Android. В силу санкционного давления и стремления к оптимизации процесса разработки наш клиент переходил на PWA (Progressive Web Application). Логичный шаг - так делают многие компании, попавшие под ограничения магазинов приложений.
Мы уже подходили к идее создать PWA около двух лет назад и уперлись в огромное количество проблем. Если верить презентациям, все нужные технологии доступны и должны работать очень гладко. Но взаимодействуя с API, на каждому углу мы обо что-то спотыкались. Поддержка PWA зависит от платформы (iOS / Android) и версии браузера. В Android Google Chrome поддерживает большинство нативных функций для PWA, а вот в iOS ограничений в самой системе, связанных с безопасностью, больше.
Сейчас видно, что год от года ограничений у того же Apple становится меньше, устройства у пользователей, а значит и версии ОС, обновляются. В итоге PWA все больше похожи на нативные приложения, а мы взялись таки за разработку. В этой статье рассказываем о том, с чем нам пришлось столкнуться.
Фича ECMAScript "Атрибуты импорта" (import attributes) позволяет импортировать артефакты, отличающиеся от модулей JavaScript. В этом разделе мы рассмотрим, как это выглядит и почему может быть полезным.
Атрибуты импорта достигли 4 стадии в октябре 2024 года и, вероятно, станут частью ECMAScript 2025.
Не часто приходится встречать людей, которые понимают зачем он нужен и ещё реже попадаются проекты, в которых его используют. А шаблон-то очень полезный!
В этой статье вы поймёте как он устроен, зачем он нужен и на примерах научитесь его правильно применять.
