Веб-разработка *

У нас во «Фланте» инженеры работают еще и с технической документацией. При этом многие термины, например, относящиеся к Kubernetes, пишут по-разному: кто-то использует сленг, кто-то — латиницу, а кто-то — кириллицу. Чтобы навести порядок в терминологии, а заодно и исправлять опечатки, мы решили создать спелл-чекера и автоматизировать проверку орфографии.

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

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

Когда-то были времена, когда весь JavaScript-код приложения складывался в один огромный файл. Это было не только неудобно, но и было множество ошибок из-за глобального пространства имен и сложностей с зависимостями. Тогда появилась необходимость в модульности.

Многие при первой встречи с такими проблемами пытались разделить код на отдельные файлы и подключать через тег <script>. Но такое решение было очень далеко от идеала. Потом были попытки использовать различные библиотеки и инструменты, такие как RequireJS или Browserify, но каждый из них имел свои недостатки и ограничения.

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

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

Наши бекендеры решили настроить резервную инфраструктуру на базе ресурсов «Яндекса». Мы, фронтендеры, задумались над альтернативой npm registry — источнику библиотек, фреймворков и других полезных в работе штук.

От нашей изначальной идеи — создания локального registry — мы пришли к yarn 2+. О том, как так получилось, и с чем мы столкнулись на этом тернистом пути, я сегодня и расскажу.

Convex - это платформа для создания бэкенда. В нее входит: Server Functions, ACID Database, Vector Search, Scheduling and crons, File Storage

Все в Convex работает в режиме реального времени. Также написаны удобные интерфейсы для работы с Convex на React

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

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

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

С роутером, совместимым с Federation V1/V2, который изначально поддерживает подписки, как WunderGraph Cosmo Router, это становится намного проще. Что более важно, с Cosmo вы можете делать это с использованием открытого программного обеспечения, совместимого с OSI, которое позволяет вам самостоятельно размещать и сохранять полную автономию над вашими данными.

Мы рассмотрим, что нового предлагает Cosmo Router в отношении подписок на федеративном GraphQL; но сначала мы расскажем о подписках на GraphQL.

Привет! Меня зовут Ваня Крючков, я бэкенд-разработчик в Далее. Сегодня поделюсь опытом интеграции интернет-магазина Haier с маркетплейсом Kaspi. Это история о том, как, несмотря на ограничения и не самое удобное API, нам удалось интегрироваться с самым популярным маркетплейсом в Казахстане и увеличить продажи в 3 раза.

На Хабре про Kaspi в целом мало информации, в основном, про финансы и новости. Поэтому мне показалось логичным на своем опыте показать, какие подводные камни могут встретиться на пути к автоматизации продаж на Казахстанском маркетплейсе. 

Не секрет, что я ❤️ React Query за то, как он упрощает взаимодействие с асинхронным состоянием в приложениях React. И я знаю, что многие коллеги-разработчики согласятся с этим.

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

Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.

Сегодня мы рассмотрим:

• загрузку фоновых изображений для экранов с повышенной плотностью пикселя с помощью функции image-set();
• как с помощью неё же ускорить загрузку страницы;
• можно ли использовать нестандартный шрифт без его загрузки;
• чем полезен псевдо-класс :focus-within при вёрстке кастомных чекбоксов;
• мой любимый лайфхак на основе пользовательских CSS-свойств.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Rollup - это лучший и наиболее полный сборщик на сегодняшний день. Он опередил свое время, став первопроходцем в таких ключевых концепциях, как tree shaking, и до сих пор ему нет равных в этом отношении. Когда Эван Ю представил Vite - Rollup был краеугольным камнем процесса сборки. Плагины Vite - это (по большей части) плагины Rollup.

Предприятия имеют разнообразные зависимости от данных — внутренние микросервисы со специализированными доменами данных, устаревшие системы с собственными форматами данных, а также сторонние API и приложения SaaS со своими уникальными моделями данных и конечными точками.

TL;DR: разные (и часто устаревшие) технологии, которые нужно как-то объединить.

Federated GraphQL выделился как главное решение для такого объединения в сфере предприятий, и Router (или Gateway) в Federation действует как ключевой элемент, который связывает все эти разрозненные источники данных вместе, делая их доступными через единственный, согласованный API, сохраняя при этом адаптивность. Это, на самом деле, ключ к тому, как Federated GraphQL позволяет создавать масштабируемые и модульные архитектуры.

Сегодня мы рассмотрим высокопроизводительный, открытый, совместимый с Federation V1/V2 Router от WunderGraph Cosmo. Мы расскажем, что он делает, почему он так важен для стека Cosmo, как вы можете разместить его самостоятельно, а также настроить и расширить его с помощью своего собственного кода на Go.

Редактор схем DGRM.net

Задача маркера - комментирование скриншотов.

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

Мы недавно объявили, что WunderGraph теперь полностью открыт в исходном коде. Сегодня мы хотели бы объяснить, как вы можете использовать нашу платформу для разработчиков API, чтобы добавить кэширование на уровне Edge в ваши GraphQL API, не привязывая себя к конкретному поставщику.

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

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

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

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

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

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

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

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

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

Не каждому проекту нужно децентрализованное логирование. В моём случае, оказалось проще хранить логи в .json файлах формата Compact Log Event Format (CLEF). Мне нужно было простое и бесплатное решение для просмотра логов.

WunderGraph предоставляет подписки GraphQL через SSE (Server-Sent Events) или Fetch (в качестве резервного варианта). В этом посте объясняется, почему мы решили выбрать этот подход и считаем его лучше, чем использование WebSockets.

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

Мы покажем вам, как интегрировать 8 сервисов: SpaceX GraphQL, 4x GraphQL с использованием Apollo Federation, REST API с использованием OpenAPI Specification, API на основе PostgreSQL и API на основе Planetscale-Vitess (MySQL) всего несколькими строками кода, полностью автоматически, без каких-либо конфликтов.

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

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

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

Приятного прочтения :-)