Когда в Sports.ru понадобился свой WYSIWYG-редактор, мы решили сделать его на основе библиотеки ProseMirror. Одной из ключевых особенностей этого инструмента является модульность и широкие возможности кастомизации, поэтому с его помощью можно очень тонко подогнать редактор под любой проект. В частности, ProseMirror уже используют в The New York Times и The Guardian. В этой статье мы расскажем о том, как с помощью ProseMirror написать свой WYSIWYG-редактор.
Рубрика «javascript» - 76
Пишем простой WYSIWYG-редактор с помощью ProseMirror
2020-03-11 в 16:04, admin, рубрики: javascript, ProseMirror, rich text edit, wysiwyg, Блог компании Sports.ru | Tribuna Digital, Разработка веб-сайтов
Не пиши одно и то же: как переиспользуемые компоненты React помогут фронтенд-разработчику быстрее создавать приложения
2020-03-11 в 12:50, admin, рубрики: front-end разработка, javascript, Mail.Ru Cloud Solutions, React, ReactJS, Блог компании Mail.Ru Group, Разработка веб-сайтов
Вносить однотипные изменения в три-четыре разных места в JS-коде — искусство, требующее концентрации внимания. Если элементов больше, поддержка кода превращается в муку. Поэтому для долгосрочных или крупных проектов следует писать код так, чтобы его можно было вынести в отдельные компоненты.
Я занимаюсь фронтенд-разработкой уже 10 лет и расскажу о применении компонентов для создания элементов фронтенда — это значительно упрощает жизнь фронтенд-разработчика.
Написано при поддержке Mail.ru Cloud Solutions.
Читать полностью »
Network diagram as code – Схема сети как код
2020-03-11 в 10:13, admin, рубрики: cytoscape.js, diagram, diagram editor, javascript, network diagram, веб-дизайн, визуализация данных, схемаВ последние пару лет стал больше заниматься документацией. Написать поясняющий текст о том, как работает та или иная система — в целом, это достаточно просто. Нарисовать схему, на которой будут отображены все ключевые объекты, связи между этими объектами, тоже вполне легко.
Но самый проблемный момент — это поддерживать эту документацию в актуальном состоянии. И ладно бы текст, но схемы… Т.к. вся документация онлайн, т.е. в формате html, то к тексту прилагаются картинки gif/jpeg/png, на которых собственно изображены схемы. А схемы рисуются в различных программах типа Visio или онлайн-сервисах а-ля draw.io. Затем экспортируешь схему в графический формат и прилагаешь к html. Все просто.
В чем проблема?
Читать полностью »
Чему меня научил мой коммит в Angular
2020-03-10 в 14:40, admin, рубрики: angular, javascript, open source, success story, TypeScript, web-разработкаСегодня я расскажу, как попал в контрибьюторы Angular. Оказалось, это совсем не сложно и весьма увлекательно! Получилась драма с четырьмя актами и одной моралью. Вот, как всё было.
Что фронтенд разработчики должны знать о бэкенде?
2020-03-10 в 9:26, admin, рубрики: backend, javascript, Разработка веб-сайтовПодавляющее большинство вещей, которые должны делать фронтенд разработчики, можно сделать не зная ничего о бэкенде кроме API.
Однако если вы достаточно долго работаете с разного рода задачами, вероятней всего вы столкнетесь с чем-то, что требует некоторых знаний в области бэкенда.
Ниже представлен краткий список того, о чем должен знать разработчик интерфейсов.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №405 (2 — 8 марта 2020)
2020-03-08 в 20:51, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Обработка изображений ReactJS — NodeJS
2020-03-08 в 13:09, admin, рубрики: arraybuffer, ASCII, express.js, filereader, hex, javascript, node.js, nodejs, react.js, ReactJS, uint8Array, Unicode, двоичная система счисленияДоброго времени суток.
Разбор полетов провожу на Reactjs (сторона клиента) и Nodejs (сторона сервера).
Недавно в моем маленьком проекте встал вопрос, как легко и просто можно обмениваться изображениями по типу клиент — сервер.
Сегодня мы научимся отправлять бинарные данные (конкретно изображения ) со стороны клиента и обрабатывать их на сервере. Добро пожаловать в под кат.
Читать полностью »
YouTube — Ошибка. Повторите попытку позже. Идентификатор воспроизведения: <…>
2020-03-08 в 12:34, admin, рубрики: adblock, adblock plus, javascript, YouTube, блокировка рекламы, блокировщики рекламы, контекстная реклама, Лайфхаки для гиков, медийная реклама, Монетизация веб-сервисов, реклама в интернете, ютуб, ютуб youtube
Чуть больше месяца назад стал замечать, что почти каждая попытка посмотреть видео с YouTube на десктопном компьютере начинается с сообщения об ошибке.
В этом нет ничего фатального, так как видео все же начинает воспроизводится после одного-двух-трех обновлений страницы. По факту, можно и вообще ничего не делать, так как ошибка пропадает «сама собой» через некоторое время. Достаточно просто немного подождать и видео начнет воспроизводиться самостоятельно.
Подобное поведение плеера YouTube, хоть и не выглядит серьезной проблемой, но через какое-то время начинает раздражать. Поэтому, увидев в очередной раз сообщение об ошибке, я решил с этой проблемой следует разобраться.
Под катом — причина возникновения ошибки (для тех, кому лень читать, это AdBlock), и что с этим можно сделать. Конечно, кроме отключения самого блокировщика рекламы.
Читать полностью »
Уйти от jQuery к Svelte, как это было
2020-03-06 в 13:09, admin, рубрики: javascript, jquery, SvelteJs, Разработка веб-сайтовВсем привет.
Это отчёт в продолжение статьи "Уйти от jQuery к Svelte, без боли".
Ниже я расскажу о трудностях с которыми столкнулся, их было не много, и только одна была настолько фундаментальной, где без поддержки сообщества я бы не справился.
Введение
Я планировал переписывать фронтэнд по кусочкам, это не то что бы совсем не получилось, получилось не совсем — переписывать пришлось большими кусками.
Во первых потому что подход JQuery — императивный, подход Svelte — декларативный.
Во вторых потому, что с использованием JQuery у нас масштаб (область видимости) всегда глобальный, из любой строки кода нам доступны все элементы веб-страницы, мы к ним обращаемся по ID или CSS селектору, в то время как Svelte рекомендует использование компонентов и внутри компонента мы видим только сам компонент, ни внешних элементов ни внутренних у нас нет, и мы не имеем возможности обратиться к ним напрямую.
Со Svelte получается настоящее ООП: мы не можем внести изменения сами, мы можем только сообщить компоненту о необходимости изменений. Как эти изменения будут сделаны, знает только код внутри компонента.
И это прекрасно :)
Читать полностью »
5 малоизвестных возможностей JSON.stringify()
2020-03-06 в 11:29, admin, рубрики: javascript, json, Программирование, разработка, Разработка веб-сайтов
Доброго времени суток, друзья!
В этой небольшой заметке я хочу рассказать вам о некоторых редко используемых возможностях JSON.stringify(). Возможно, они окажутся вам полезными.
JSON.stringify() часто используется при отладке для преобразования объекта или обычной строки в строку в формате JSON. Но как данный метод используется, и можем ли мы обойтись toString()? Давайте попробуем это сделать.
// создаем объект user
const user = {
name: 'Harry Heman',
age: 29,
job: 'developer'
}
// преобразуем объект в строку, используя стандартный метод toString(), и выводим результат в консоль
console.log(user.toString()) // [object Object]
[object Object] — это не совсем то, что мы хотели увидеть, не правда ли?
Не спрашивайте, зачем мы вообще используем toString(). Предположим, что нам жизненно необходимо перевести объект в строку.
Теперь попробуем использовать JSON.stringify():
console.log(JSON.stringify(user)) // {"name":"Harry Heman","age":29, "job": "developer"}
Мы сделали это, Карл!
Однако возможности JSON.stringify() этим не исчерпываются.
Читать полностью »