Адаптивные таблицы в вебе

https://habr.com/ru/post/680976/?utm_campaign=680976&utm_source=habrahabr&utm_medium=rss
Таблица — один из самых эффективных способов подачи ТЕКСТОВОЙ информации: на минимуме пространства размещено максимум данных. И что не менее важно — эти данные доступны не только для восприятия, но и для анализа (СРАВНЕНИЯ). Основная сложность таблиц при верстке — их адаптивность для устройств с небольшими экранами (мобильных девайсов). Можно ли сделать так, чтобы даже на экране с размерами в несколько сантиметров таблицы могли быть удобными для восприятия? Читать далее

Как интеллектуальная система поиска локаций помогает Fix Price открывать в среднем по 2 новых магазина ежедневно

https://habr.com/ru/post/688392/?utm_campaign=688392&utm_source=habrahabr&utm_medium=rss
Привет, Хабр! Меня зовут Вадим Райский, и я работаю руководителем IT-проектов для департамента управления магазинами Fix Price. Каждый год мы открываем около 700-750 торговых точек в России и за рубежом – примерно по две каждый день. Алгоритмы и большое количество данных позволяют с высокой степенью вероятности прогнозировать прибыльность каждой открытой локации.Сегодня я расскажу о том, как мы перешли от «аналогового» способа сбора данных о локациях к цифровому и выстроили интеллектуальную систему поддержки новых торговых точек.Как все начиналосьДавайте перенесемся в 2015 год и представим, что перед нами стоит задача открыть новый магазин. У менеджера по недвижимости заранее начинала болеть голова. Ему предстояло собрать и систематизировать данные о нужных локациях, накопленные за много лет в различных форматах – от Excel до рабочей почты. На поиски нужной информации могли уходить часы. Объем обрабатываемых данных легко понять, если представить себе, сколько информации собирается для принятия решения об открытии новой точки. Агрегируется информация по всем городам России, улица за улицей, ведется учет каждой вакантной коммерческой площади, собирается информация о ее технических характеристиках, потенциале трафика и других параметрах. На эти базовые данные затем нанизывается информация о ставках аренды и результатах переговоров с отдельным арендодателем. Читать далее

Oauth 2.1 spring authorization server + SPA

https://habr.com/ru/post/688680/?utm_campaign=688680&utm_source=habrahabr&utm_medium=rss
Доброго всем дня уважаемые хабровчане!До сего момента я являлся лишь читателем этого замечательного ресурса, но вот кажется и пришло время написать мою первую статью.Oauth 2.1 - дальнейшее развитие популярного фреймворка авторизации Oauth 2.0, который на момент написания статьи всё ещё вроде как находится в стадии черновика. Но тем не менее уже начинает применяться. На хабре уже есть более подробная статья на эту тему.Из не очень приятного, из Oauth 2.1 убраны варианты получения токена. Читать далее

Увеличиваем RPS на Nuxt.js

https://habr.com/ru/post/688858/?utm_campaign=688858&utm_source=habrahabr&utm_medium=rss
Все мы знаем что nuxt.js 2 (да и любое node.js приложение с SSR) не держит нагрузку без кеша, в среднем проекте если включить режим SSR то будет держать 20-30 RPS что очень мало.Стандартные решения это подключить пару пакетов каких нибудь кешеров, и кешировать каждую страницу или запросы. В целом это хорошо помогает, но не до конца)Есть 3 проблемы с которыми я сталкивался на проекте, и хотел бы стабилизировать ситуацию. Чтобы дать еще один шанс запуститься приложению хотя бы без SSR. Ускориться

Сравнение синтаксисов Vue JS

https://habr.com/ru/post/690508/?utm_campaign=690508&utm_source=habrahabr&utm_medium=rss
Сравнение разных синтаксисов Vue JS:- Options API- Composition API- Class API- Class API + vue-property-decorator (npm) Читать далее

Сквозь тернии к core-у или процесс компиляции Vue

https://habr.com/ru/post/690522/?utm_campaign=690522&utm_source=habrahabr&utm_medium=rss
Нео проснулся от бликов вспыхнувшего экрана компьютера. Экран заполняла зеленая полоска прогресса.– Матрица – испуганно прошептал Нео.– Александр, вы уснули на работе – прошептал тимлид.Я взглянул на экран компьютера еще раз. Компиляция Vue была завершена. Я облегченно вздохнул. Скомпилировать!

Простые, но приятные и воздушные тени вместе с Vue Box Shadows

https://habr.com/ru/post/691148/?utm_campaign=691148&utm_source=habrahabr&utm_medium=rss
В современном дизайне, почти на каждом сайте и в приложениях можно увидеть тени, которые дизайнеры и разработчики применяют для создания эффекта глубины и объема... Читать далее

Ускоряем разработку в VSCode

https://habr.com/ru/post/691534/?utm_campaign=691534&utm_source=habrahabr&utm_medium=rss
Привет, Хабр! Это моя первая публикация и хотелось бы начать с чего-то полезного для сообщества. С места в карьер… Я запилил расширение для VSCode, которое поможет автоматизировать создание файловой структуры компонентов.Для тех кому удобнее в видео формате, вот ссылка на скринкаст. Рассказываю плюс минус тоже самое, но волнительно и неловко. Читать далее

Перезапуск Вебиума

https://habr.com/ru/post/692586/?utm_campaign=692586&utm_source=habrahabr&utm_medium=rss
Начали с большого старого проекта на руби, поддерживаемого аутсорсерами, а оставили отлично документированный и покрытый тестами проект с техническим директором и внутренней командой разработки. Это честный рассказ о проекте длиною в год.Вебиум — онлайн-школа для подготовки к ЕГЭ. 30 тысяч школьников, тысяча наставников, 20 тысяч вопросов и 2 тысячи домашних заданий на сотни тем.В 2021 году у Вебиума уже была рабочая система на Ruby, которую разрабатывали подрядчики-аутcорсеры. К нам они обратились с привычной проблемой — подрядчики медленно пилят фичи. Посмотрев код и оценив возможности команды, мы поняли, что рефакторить существующий код — долго и дорого, и решили перезапустить систему своими руками на привычном стеке — Django и Nuxt.js. Справились за год: с сентября 2022 все ученики покупают и проходят курсы в новой системе.Перед нами стояли 3 задачи: Читать далее

Не повторять, выполнено профессионалами: как не надо разрабатывать таск-трекер

https://habr.com/ru/post/690480/?utm_campaign=690480&utm_source=habrahabr&utm_medium=rss
Почти три года назад мы запустили сервис для управления проектами, но без ошибок не обошлось. Делюсь опытом, чтобы на наши грабли больше никто не наступил. Читать далее

Особенности разработки TWA в 2022 году

https://habr.com/ru/post/693090/?utm_campaign=693090&utm_source=habrahabr&utm_medium=rss
Настоящая статья поможет сэкономить время разработчиков и выбрать правильные инструменты для разработки TWA в 2022 году. Читать дальше →

Распространяй и властвуй: приглашаем на открытый Frontend Meetup

https://habr.com/ru/post/693438/?utm_campaign=693438&utm_source=habrahabr&utm_medium=rss
Привет, Хабр 😇 Меня зовут Михаил Подгорный и я руковожу отделом Frontend платформы в Ozon. В нашей компании уже около 500 фронтенд-разработчиков, силами которых было создано более 400 веб-приложений. Мы пишем на TypeScript и Vue, шаблонизируем на JSX, для тестов используем Jest и Playwright. Контейнеризация через Docker, разворачиваем через GitLab и K8s, а следим за всем с помощью Grafana, Prometheus, Thanos, Graylog, Sentry и собственных решений.С ростом числа проектов и команд унификация и внедрение стандартов становятся необходимостью — общие библиотеки снижают стоимость разработки, единый подход к написанию кода позволяет быстрее обучать новых сотрудников, а стандартизированные программные интерфейсы дают возможность оперативно осуществлять массовые обновления.Приглашаю в гости на открытый Frontend Meetup Ozon Tech, который состоится 27 октября в 18:00. Читать далее

Миграция с vue-class-component на vuejs/composition-api

https://habr.com/ru/post/694960/?utm_campaign=694960&utm_source=habrahabr&utm_medium=rss
В статье хочу поделиться опытом переписывания существующих классовых компонентов vue на новый синтаксис vue-composition-api.

Немного о нашем стеке.
Наше приложение написано на nuxt2 + vue-class-components + typescript. Из-за стека переезд на новый nuxt затруднился тем, что прежде чем сменить версию nuxt со 2 на 3 нам нужно переписать все наши компоненты. Тут нас очень спасла библиотека vuejs/composition-api и nuxtjs-composition-apiВ статье разберем случаи от самых примитивных до менее примитивных.Стоит сразу отметить, что в composition-api вся магия происходит внутри метода setup , который включает в себя 2 хука жизненного цикла vue компонента: beforeCreate и created
Помимо основных примеров я покажу как будет работать типизация в тех или иных кейсах.

* Все названия переменных вымышлены и не используются на продуктиве)

Поехали! Читать далее

WebSocket ориентированое Api на Nest.js

https://habr.com/ru/post/696252/?utm_campaign=696252&utm_source=habrahabr&utm_medium=rss
В этой статье я расскажу как создал модуль под Nest.js позволяющий писать классическое RESTFull API со swagger'ом но клиент будет полностью на WebSocket'ах, звучит странно не так ли? Но зато очень быстро и удобно по итогу)Идея состоит в том, что вы пишите классическое документированное апи, со всеми типами и плюшками. Читать далее

Следим и вычисляем с Vue 3, или Как использовать watchEffect

https://habr.com/ru/post/697910/?utm_campaign=697910&utm_source=habrahabr&utm_medium=rss
Привет! Меня зовут Алексей, я frontend-специалист SimbirSoft. В этой статье разберем новый метод слежения за реактивными свойствами watchEffect.С появлением Vue 3 c Composition API стало доступно два метода слежения — watch и watchEffect. Если «старый» метод watch всем хорошо знаком и не должен вызывать затруднений у Vue-разработчиков, то новый метод стоит изучить подробнее. Материал будет полезен разработчикам, переходящим с Vue 2 на Vue 3 и всем «вьюшникам», которые еще не разобрались с этим методом.Composition API предоставляет нам два разных метода слежения за реактивными свойствами — watch и watchEffect. Они похожи, но все же каждый полезен в определенных случаях. Рассмотрим, какие сходства и различия существуют у этих методов: Читать далее

Effector — убийца Redux? Туториал с нуля. Часть 1

https://habr.com/ru/post/698880/?utm_campaign=698880&utm_source=habrahabr&utm_medium=rss
Redux и MobX больше не нужны ?

Туториал для новичков по EffectorJS - современному и удобному стейт-менджеру. Рассмотрим основные возможности, работу ядра, и какие проблемы решает. На примерах. Читать далее

Как мы еще не перешли с Vue.js на Hotwire

https://habr.com/ru/post/698394/?utm_campaign=698394&utm_source=habrahabr&utm_medium=rss
Мы продолжаем публиковать доклады последней Ruby Russia. На этот раз поговорим о новинке Hotwire, которую уже опробовали в Uscreen. Автор текста Марсель Мустафин, задавайте ему вопросы в комментариях! Читать далее

Процесс рендеринга Vue

https://habr.com/ru/post/699356/?utm_campaign=699356&utm_source=habrahabr&utm_medium=rss
Добрый день! Меня зовут Александр, я работаю frontend-разработчиком в компании Nord Clan. В прошлой статье мы рассмотрели процесс компиляции Vue, а теперь надо как-то «пристроить» результат этой самой компиляции в процесс рендеринга.Дизайн лого: Марина Четвертакова Читать далее

NuxtJS получил тройку, потерял JS и меняет фронтенд

https://habr.com/ru/post/700468/?utm_campaign=700468&utm_source=habrahabr&utm_medium=rss
17 ноября вышла стабильная версия Nuxt 3.0 (теперь без JS) - популярного фреймворка для построения фронтенд-приложений на Vue 3.Поэтому публикую тут самые важные, на мой взгляд, новые фичи + некоторые мысли насчёт увиденного. Читать далее

Сервисная архитектура во Vue 2 | Какие собственно варианты?

https://habr.com/ru/post/700392/?utm_campaign=700392&utm_source=habrahabr&utm_medium=rss
Рассуждаю о том, какие популярные методы выноса логики есть во Vue 2, какие у них плюсы и минусы. Расскажу о том, какую альтернативу я бы хотела видеть (спойлер, я ее реализовала), дам ссылку на репозиторий с решением. Это первая часть, подробнее о том что будет во 2 и 3 в конце статьи. Приятного просмотра! Хочу узнать, что дальше

Effector (reflect, typescript, forms). Основные инструменты. Туториал с нуля. Часть 2

https://habr.com/ru/post/701160/?utm_campaign=701160&utm_source=habrahabr&utm_medium=rss
Effector - менеджер состояния web-приложений.

Новое и удобное решение. Продолжаем серию статей для новичков. Разбираемся, что может упростить работу, как работать с формами и многое другое... Читать далее