Pull to refresh
5
0
Александр Федоров @alxgrn

User

Send message

Markdown Editor: WYSIWYG и markup-редактор на базе Gravity UI

Level of difficultyEasy
Reading time7 min
Views11K

Привет, Хабр! Меня зовут Сергей Махнаткин, я работаю разработчиком в отделе User Experience в Yandex Cloud. В прошлом году мы писали о нашей дизайн-системе и библиотеке компонентов Gravity UI. С тех пор система не раз обновлялась и обрастала новыми функциями, и сегодня я хочу рассказать о новом инструменте — Markdown Editor, который значительно упрощает процесс работы с документацией.

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

Читать далее
Total votes 44: ↑43 and ↓1+61
Comments22

Разрабатываем библиотеку компонентов с помощью React и TypeScript

Reading time8 min
Views13K


Привет, друзья!


В этой статье я покажу вам, как начать разработку библиотеки компонентов с помощью Vite, React, TypeScript и Storybook.


Мы разработаем библиотеку, состоящую из одного простого компонента — кнопки, подготовим библиотеку к публикации в реестре npm, а также сгенерируем и визуализируем документацию для кнопки.


Репозиторий с кодом проекта.


Если вам это интересно, прошу под кат.

Читать дальше →
Total votes 9: ↑8 and ↓1+8
Comments1

Минимальное PWA

Reading time6 min
Views22K

Какие характеристики должны быть у web-приложения, чтобы соответствовать критерию "прогрессивное"? Понятно, что, как и обычные web-приложения, прогрессивные строятся на базе "большой тройки" web-технологий - HTML/CSS/JS. Но что именно делает web-приложения прогрессивными?

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

Читать далее
Total votes 24: ↑22 and ↓2+27
Comments11

Профессиональная контейнеризация Node.js-приложений с помощью Docker

Reading time10 min
Views69K
Автор материала, перевод которого мы публикуем сегодня, работает DevOps-инженером. Он говорит, что ему приходится пользоваться Docker. В частности, эта платформа для управления контейнерами применяется на разных этапах жизненного цикла Node.js-приложений. Использование Docker, технологии, которая, в последнее время, является чрезвычайно популярной, позволяет оптимизировать процесс разработки и вывода в продакшн Node.js-проектов.

image

Сейчас мы публикуем цикл статей о Docker, предназначенных для тех, кто хочет освоить эту платформу для её использования в самых разных ситуациях. Этот же материал сосредоточен, в основном, на профессиональном применении Docker в Node.js-разработке.
Читать дальше →
Total votes 42: ↑34 and ↓8+26
Comments25

Готовим полнотекстовый поиск в Postgres. Часть 1

Reading time7 min
Views85K

UPD. Часть 2


Эта статья — первая из небольшой серии статей о том, как оптимально настроить полнотекстовый поиск в PostgreSQL. Мне пришлось недавно решать подобную задачу на работе — и я был очень удивлен отсутствию хоть сколько-нибудь вменяемых материалов по этому поводу. Мой опыт борьбы под катом.

Читать дальше →
Total votes 27: ↑26 and ↓1+25
Comments10

Как распаковать айтишника и настроить цикл управления знаниями

Reading time10 min
Views6.6K

О преимуществах управления знаниями уже много написано, но вот выстраивание этого процесса — настоящий вызов...

Привет, Хабр! Меня зовут Лена, я архитектор продуктовых знаний. В этом тексте я сосредоточусь на тиражировании знаний и расскажу, как их эффективно «перекладывать» из голов экспертов. Также разберу реальный кейс Selectel — технический курс по сетям для всех сотрудников компании. Подробности под катом!
Читать дальше →
Total votes 30: ↑29 and ↓1+37
Comments4

Как заменить фотостоки на нейронки в коммерческих проектах: личный опыт и промпты

Level of difficultyMedium
Reading time4 min
Views8.7K

Зачем нужны фотостоки, если нейросети готовы производить бесконечное количество нужных вам изображений? Расскажу, как мы получили несколько несколько сотен фотореалистичных изображений людей и пакет иконок для коммерческого сайта с помощью нейронок, потратив ~50 часов дизайнеров и $60 на Pro Plan Midjourney.

Плюс, конечно, наша насмотренность и опыт, которым я сейчас поделюсь с вами!

Читать далее
Total votes 12: ↑10 and ↓2+9
Comments25

Настоящее предназначение OpenAI SORA: как и зачем симулировать «Матрицу» для ChatGPT

Level of difficultyMedium
Reading time41 min
Views103K

Ну что, уже успели прочитать восхищения небывалым качеством видео от нейросетки SORA у всех блогеров и новостных изданий? А теперь мы вам расскажем то, о чем не написал никто: чего на самом деле пытается добиться OpenAI с помощью этой модели, как связана генерация видео с самоездящими машинами и AGI, а также при чем здесь культовая «Матрица».

Войти в симуляцию →
Total votes 248: ↑244 and ↓4+281
Comments122

Попробую, попытаюсь объяснить, что такое «площадка для стартапов Product Radar» спустя 5 месяцев после ее запуска

Reading time4 min
Views885

На фоне умирающих или стагнирующих площадок для русскоязычных основателей стартапов (к сожалению, это я про vc.ru), Радар на моих глазах стал точкой притяжения как молодых команд и опытных предпринимателей, так и инвесторов.

Читать далее
Total votes 11: ↑7 and ↓4+5
Comments1

Инфраструктурные пайплайны в Jenkins

Level of difficultyEasy
Reading time5 min
Views3.3K

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

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

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

Читать далее
Total votes 7: ↑5 and ↓2+5
Comments0

Knowledge Graph. Плюральность, темпоральность, деятельностный подход

Reading time3 min
Views4.5K
image

Традиционно Knowledge Graphs, то есть информационные системы, поддерживающие концептуальное описание предметных областей (как самых общих, так и узко специальных) задумываются и строятся, как источники проверенной и единственно верной информации о мире. По такому принципу – как собрание исключительно правильных данных – построена и популярная народная энциклопедия Wikipedia.
Читать дальше →
Total votes 15: ↑12 and ↓3+9
Comments2

Анатомия рекомендательных систем. Часть первая

Reading time14 min
Views80K
Я работаю дата-саентистом в компании CleverDATA. Мы занимаемся проектами в области машинного обучения, и один из наиболее частых запросов на разработку основанных на машинном обучении маркетинговых решений — это разработка рекомендательных моделей.

В данной статье я расскажу о рекомендательных системах, постараюсь дать максимально полный обзор существующих подходов и на пальцах объясню принципы работы алгоритмов. Часть материала базируется на неплохом курсе по рекомендательным системам лаборатории MovieLens (которая большинству знакома по одноименному датасету для тестирования рекомендаций), остальное – из личного опыта. Статья состоит из двух частей. В первой описана постановка задачи и дан обзор простых (но популярных) алгоритмов рекомендаций. Во второй статье я расскажу о более продвинутых методах и некоторых практических аспектах реализации.

Источник
Читать дальше →
Total votes 55: ↑50 and ↓5+45
Comments15

Создаем текстовый редактор на React.js

Reading time17 min
Views41K

Привет! Меня зовут Данила, и я фронтенд-разработчик в KTS.

Однажды в одном из своих проектов мне потребовалось реализовать кастомный текстовый редактор на React.js. Задача показалась мне довольно интересной, и я решил рассказать о своем опыте. В статье я поэтапно покажу, как можно создать текстовый редактор с базовыми функциями.

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

Читать далее
Total votes 16: ↑15 and ↓1+15
Comments10

File upload на React.js шаг за шагом

Level of difficultyMedium
Reading time18 min
Views20K

В этой статье напишем компонент для загрузки файлов на сервер, который поддерживает:

Индикатор загрузки

Прерывание отправки

Drag and drop

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

Читать далее
Total votes 11: ↑10 and ↓1+11
Comments5

Как настроить GitHub Actions и не заплакать: пошаговая инструкция

Level of difficultyMedium
Reading time5 min
Views12K

Как настроить GitHub Actions и не заплакать: пошаговая инструкция

Привет всем! Меня зовут Виталий, я фронтендер в Mish. Решил недавно освоить полноценный автоматический деплой проекта, чтобы все работало само. Расскажу и вам, что из этого получилось.

В статье буду разговаривать о деплое только фронтенда. Про деплой бэкенда расскажу в следующем материале.

Читать далее
Total votes 12: ↑10 and ↓2+10
Comments2

Webpack: руководство для начинающих

Reading time9 min
Views285K


Доброго времени суток, друзья!

Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.

Перед изучением новой технологии задайте себе два вопроса:

  1. Зачем нужен этот инструмент?
  2. Какие задачи он выполняет?

Если вы не можете ответить на эти вопросы, возможно, вам не нужна изучаемая технология. Давайте попробуем ответить на эти вопросы применительно к Webpack.
Читать дальше →
Total votes 8: ↑8 and ↓0+8
Comments4

SSEGWSW: Server-Sent Events Gateway by Service Workers

Reading time6 min
Views9.8K
Привет!

Меня зовут Саша и я работаю архитектором в Тинькофф Бизнес.

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

Если хотите — смело пропускайте предысторию, описание проблемы, поиск решения и сразу переходите к результату.

SSEGWSW
Читать дальше →
Total votes 29: ↑29 and ↓0+29
Comments8

Service Workers. Инструкция по применению

Reading time9 min
Views142K


Количество выходов в интернет с мобильных устройств ежегодно растёт на 2-4% в год. Качество связи не успевает за такими темпами. Как итог, даже самое лучшее веб-приложение обеспечит ужасный опыт, если пользователь не сможет его загрузить.

Проблема в том, что до сих пор нет хорошего механизма управления кэшем ресурсов и результатов сетевых запросов. В своей статье я хочу рассказать как Service Worker (SW) может помочь в решении этой задачи. Объясню в формате рецептов — какие элементы и в какой пропорции смешать, чтобы получить нужный результат, исходя из задачи и требований.
Поехали!
Total votes 57: ↑57 and ↓0+57
Comments40

Вам посылка, или Как мы доставляем сообщения с сервера на клиент в реальном времени

Reading time8 min
Views14K

Меня зовут Алексей Комаров, я — старший frontend-разработчик в SuperJob. Хочу поделиться опытом реализации механизма обновления данных в реальном времени у нас на сайте. Под катом — подробности о выборе подхода, о проблемах, с которыми мы столкнулись при разработке, о наших кейсах оптимизации 
клиентской стороны и, конечно, немного кода и наглядных схем.

Читать далее
Total votes 21: ↑21 and ↓0+21
Comments27

Server-Sent Events: пример использования

Reading time8 min
Views34K
Доброго времени суток, друзья!

В этом туториале мы рассмотрим Server Sent Events: встроенный класс EventSource, который позволяет поддерживать соединение с сервером и получать от него события.

О том, что такое SSE и для чего он используется можно почитать здесь.

Что конкретно мы будем делать?

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

Сервер будет реализован на Node.js, клиент — на JavaScript. Для стилизации будет использоваться Bootstrap, в качестве API — Random User Generator.

Код проекта находится здесь.

Если вам это интересно, прошу следовать за мной.
Читать дальше →
Total votes 4: ↑2 and ↓2+2
Comments6
1

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Registered
Activity