Как стать автором
Обновить
0
0

Пользователь

Отправить сообщение

Вся правда о переходе с монолита на микросервисы, когда у тебя сеть из десятков тысяч магазинов: опыт Х5 Tech

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

Привет, Хабр! Меня зовут Алексей Топчий, я уже более 20 лет работаю в IT. Прошёл все уровни: бэкенд, фронтенд, фулстек со множеством языков и технологий. В СберТехе занимался Единой фронтальной системой, в Яндексе участвовал в стартапе, связанном с FMCG. Сейчас занимаюсь сервисом ценообразования в сети магазинов «Пятёрочка» (X5 Group). 

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

Читать далее
Всего голосов 18: ↑16 и ↓2+14
Комментарии35

Управление цепочкой вызовов асинхронных функций

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

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

Интересно? Тогда добро пожаловать под кат! 

Читать далее
Всего голосов 4: ↑4 и ↓0+9
Комментарии8

Создание простой CRM на Next.js и Prisma для B2B

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

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

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

Ещё до того, как я начал заниматься разработкой, мне пришла идея поучаствовать в создании собственной CRM-системы и глубже погрузиться в процесс её разработки. Спустя несколько лет я начал заниматься веб-разработкой, и в какой-то момент понял, что даже небольшому бизнесу, где я работал, нужна CRM. Я пробовал использовать таблицы в Google Docs, тестировал триальные версии популярных CRM, но они были перегружены ненужной информацией и казались неудобными. Так что я решил создать что-то простое, что будет удобно мне и, возможно, другим.

В своей CRM я использую Next.js. Эта система не претендует на то, чтобы обслуживать тысячи пользователей, но она точно может решить задачи 1-2 небольших отделов продаж. У меня есть репозиторий на GitHub, и если кому-то это решение покажется интересным, его можно взять и доработать под свои задачи. В этой статье я постараюсь кратко описать текущий функционал, с какими трудностями я столкнулся и что удалось внедрить в качестве новых гипотез.

Читать далее
Всего голосов 11: ↑10 и ↓1+13
Комментарии9

SOLID in React

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

Хочется вспомнить SOLID принципы и рассмотреть, как можно их применять в разработке интерфейсов на примере React компонентов.

S: Single Responsibility Principle (Принцип единственной ответственности). Означает, что каждый класс/функция/компонент должны выполнять только одну конкретную задачу.

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

O: Open-Closed Principle (Принцип открытости-закрытости). Означает, что класс/функция/компонент должны быть открыты для расширения, но закрыты для модификации. Чтобы их можно было расширять новым функционалом, не изменяя при этом исходный код.

Читать далее
Всего голосов 12: ↑7 и ↓5+3
Комментарии21

Атрибут charset и важность его использования

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

Какие предположения можно сделать относительно следующего HTTP ответа сервера?

Глядя на этот небольшой фрагмент HTTP ответа, можно предположить, что веб-приложение, вероятно, содержит уязвимость XSS.

Почему это возможно? Что обращает на себя внимание в этом ответе сервера?

Вы будете правы, если сомневаетесь насчет заголовка Content-Type. В нем есть незначительный недостаток - отсутствие атрибута charset.  Это может казаться неважным, однако, в этой статье мы объясним, как злоумышленники могут использовать этот недостаток для внедрения произвольного JavaScript кода на веб-сайт, сознательно изменяя набор символов, который ожидает браузер.

Читать далее
Всего голосов 26: ↑25 и ↓1+32
Комментарии6

Магия CSS на практике: советы по вёрстке от гика

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


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


Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.


Сегодня я расскажу:

  • как избавиться от соседнего родственного комбинатора + при реализации нестандартных чекбоксов и радиокнопок;
  • про свойство inset, сокращающее код на целых три строки;
  • мой сниппет для расширения интерактивной области у кнопок и ссылок;
  • стиль написания медиа-запросов, позволяющий сократить количество правил;
  • альтернативный способ центрирования элемента без свойства transform.
Читать дальше →
Всего голосов 39: ↑39 и ↓0+54
Комментарии9

Мощь AST в действии, или как переписать код 10 летней давности на ES6-модули и ничего не сломать

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

Всем привет! Меня зовут Кирилл и я работаю фронтенд-разработчиком. Я расскажу о том, как мы перевели несколько тысяч файлов, написанных на JavaScript, с легаси кода, который использовал goog.module, на новые ES6-модули с помощью построения и преобразования абстрактного синтаксического дерева.

Эта статья будет полезна тем, у кого тоже возникла потребность в рефакторинге большого количества кода.

Читать далее
Всего голосов 23: ↑23 и ↓0+25
Комментарии4

Поясняю за React Сompiler

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

В 2024 году команда React готовит множество нововведений, приуроченных к выходу React 19.

Одним из таких нововведений является React Сompiler — новый JavaScript-компилятор для оптимизации вычислений. Главной целью разработчиков была оптимизация и автоматизация мемоизации в React-приложениях. Если раньше фронтендерам приходилось использовать такие хуки, как useCallback и useMemo, то вскоре React сам возьмёт на себя ответственность за мемоизацию, чтобы избежать повторных вычислений при каждом рендеринге.

Не будем затягивать со вступлением и сразу перейдём к пересказу.

Читать далее
Всего голосов 15: ↑11 и ↓4+8
Комментарии43

Возможно, микросервисы вам не нужны

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

Писать эту статью было весело. Многие наверняка её захейтят, но …

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

Сегодня микросервисы очень популярны. Это прекрасный архитектурный стиль, который помогает масштабировать систему и саму организацию. Их используют многие успешные компании (Netflix, Spotify и прочие). Поэтому вполне нормально, что большинство организаций уже применяют или планируют начать применять этот стиль. Однако не все учитывают сопутствующие затраты.
Читать дальше →
Всего голосов 45: ↑41 и ↓4+53
Комментарии35

RxJs для самых маленьких

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

В этой статье мы подробно рассмотрим такую библиотеку как RxJs. Разберем несколько простых примеров и поймем что такое поточность в программировании.

Читать далее
Всего голосов 5: ↑3 и ↓2+1
Комментарии16

Асинхронный веб: WebSocket, Server-Sent Events, Long Polling и Short Polling

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

Веб-разработка часто требует реализации механизмов обновления контента на странице в реальном времени. Существуют различные сценарии, где это необходимо, например, отображение прогресса выполнения тяжелых задач на бекенде, обновление каких-либо часто меняющихся данных, будь то курсы валют или мониторинг какой-то активности, чаты, различные уведомления. Эти сценарии объединяет одна общая особенность: источник события необходимости обновления данных находится не на клиентской стороне, поэтому мы хотим получать события с бекенда. В данной статье мы рассмотрим четыре популярных подхода к реализации этой функциональности: WebSocket, Server-Sent Events (SSE), Long Polling и Short Polling.
Мы проанализируем каждый метод, выявим их плюсы, минусы и сложность реализации.

Читать далее
Всего голосов 17: ↑15 и ↓2+18
Комментарии11

React Conf 2024. React v19

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

Только что завершилась Конференция React.js. Долгожданная конференция спустя почти 3 года после предыдущей. Не менее долгожданны и обновления реакта. И именно с них была начата конференция, им и будет посвящена статья. И да, как вы увидели из превью — 19 версия перешла в статус release candidate. Полноценный же релиз нам обещают в течении двух недель.

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

Можно сказать, что главным направлениям этого обновления было достижение «Высокого UX при высоком DX». Максимальная производительность при максимально простом коде. И так, а теперь к самой конференции.

Читать далее
Всего голосов 9: ↑9 и ↓0+11
Комментарии18

Как мы в 4 раза ускорили мобильную версию ВКонтакте

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

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

Меня зовут Тарас Иванов, уже семь лет я развиваю фронтенд ВКонтакте, а сейчас руковожу командой, которая занимается производительностью и инфраструктурой. В статье я расскажу, как мы с командой ускорили загрузку m.vk.com в 4 раза, на какие метрики обращали внимание и какие сервисы использовали для оценки эффективности. Описанные способы и инструменты помогут повысить производительность в любом проекте: от многостраничных платформ с большим количеством legacy до свежих лаконичных лендингов. Актуально как для мобильной, так и десктопной версий.  

Читать далее
Всего голосов 13: ↑12 и ↓1+20
Комментарии12

Инструмент автоматизации управления версиями

Время на прочтение3 мин
Количество просмотров16K
Всем привет!

Всегда было интересно, что такое версии продукта и как ими управлять? Как автоматизировать управление версиями разработки? Прошу под кат.


Читать дальше →
Всего голосов 20: ↑16 и ↓4+12
Комментарии2

Мегагайд: культура работы с Git

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

Привет всем! Меня зовут Юля, я фронтенд-разработчик, наставник на курсах по JS и React и организатор профессионального сообщества Tbilisi JS. В Практикуме я помогаю студентам на курсе «React-разработчик».

За время работы в разных компаниях и над разными проектами я поняла, что Git — это не только (и не столько!) знание самой технологии и конкретных команд, но и определённая культура взаимодействия, практики, подходы, договорённости. Всё это помогает участникам команды лучше понимать друг друга и работать быстрее и чётче.

Поговорим как раз об этом — о том, что формирует культуру работы с Git: начнём с конвенций именования коммитов и закончим практиками работы в пуллреквесте. В конце статьи я поделюсь полезными ссылками на интерактивные обучалки, шпаргалки и гайды.

Читать далее
Всего голосов 36: ↑31 и ↓5+31
Комментарии23

Джун, сеньор и мидл: меняются ли с годами представления о грейдах разработчиков

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

В чём принципиальное отличие джуна от мидла, а мидла от сеньора? На какие навыки поднажать, чтобы не задерживаться на одной ступеньке? Эти темы актуальны в ИТ-сообществе всегда. 

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

Читать дальше →
Всего голосов 28: ↑23 и ↓5+22
Комментарии14

Основы программирования на примере исходного кода React

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

Изучите ключевые концепции программирования, лежащие в основе популярной JavaScript-библиотеки React. Понимание этих концепций поможет вам применить лучшие практики программирования в работе.

Читать далее
Всего голосов 7: ↑6 и ↓1+9
Комментарии2

Руководство по Next.js. 2/3

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


Hello world!


Представляю вашему вниманию вторую часть обновленного руководства по Next.js.



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


Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.


Обратите внимание: руководство актуально для Next.js версии 14.


При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉


Парочка полезных ссылок:


Читать дальше →
Всего голосов 12: ↑11 и ↓1+18
Комментарии3

Как стать Frontend-разработчиком бесплатно? Программа обучения с нуля

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

Если вбить слово «фронтенд» в поисковую строку, можно найти огромное количество курсов по данному направлению. Проблема в том, что все курсы являются платными и, как правило, имеют ценник в несколько десятков тысяч рублей. 

Чтобы разбавить засилие платных курсов, мы подготовили для вас программу обучения «Frontend-разработчик с нуля», которая состоит только из бесплатных материалов.

Читать далее
Всего голосов 25: ↑20 и ↓5+15
Комментарии20

Руководство по Next.js. 1/3

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


Hello world!


Представляю вашему вниманию первую часть обновленного руководства по Next.js.



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


Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.


Обратите внимание: руководство актуально для Next.js версии 14.


При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉


Парочка полезных ссылок:


Читать дальше →
Всего голосов 16: ↑15 и ↓1+19
Комментарии2

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность