Как стать автором
Обновить
278.12
Рейтинг

Разработка веб-сайтов *

Делаем веб лучше

Сначала показывать
  • Новые
  • Лучшие
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

TeX в SVG: опенсорс-решение в помощь веб-разработчикам образовательных проектов

Блог компании Яндекс Разработка веб-сайтов *Open source *Обработка изображений *Математика *

Привет! Меня зовут Костя Мамаев, я занимаюсь фронтенд-разработкой в поиске Яндекса. Некоторое время назад мы вместе с другими ребятами из команды помогали образовательным проектам компании. Среди прочего пришлось решить, казалось бы, простую задачку: отображать на экране и распечатывать на бумаге формулы, закодированные в популярном формате TeX. Звучит, как дело пяти минут, но в результате трёх подходов к снаряду появился полноценный микросервис для серверного рендеринга формул в svg и png. В статье расскажу, зачем мы пошли этим путём и почему ни один из существующих проектов не подошёл «из коробки».

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

Подробнее про три подхода к снаряду
Всего голосов 58: ↑56 и ↓2 +54
Просмотры 7.7K
Комментарии 23

Путь к Федеративному GraphQL

Разработка веб-сайтов *Open source *JavaScript *API *Микросервисы *
Перевод

Программисты любят хорошие истории, поэтому надеюсь что пятилетний путь к композитному API с помощью GraphQL в боевой среде (на пике выдающей 110 запросов в секунду при 100мс задержке) будет интересен.

[Если вы спешите, проскрольте ниже к урокам и гляньте на открытый код graphql-schema-registry]

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

Безопасность npm-проектов, часть 2

Блог компании ДомКлик Информационная безопасность *Разработка веб-сайтов *JavaScript *Node.JS *

Безопасность npm-проектов, часть 2


Всем привет! В прошлых постах мы поговорили о том, как команда npm обеспечивает безопасность, а также начали рассматривать инструменты, помогающие нам повысить безопасность проектов. Я хочу продолжить разговор и рассмотреть следующий набор полезных инструментов.

Читать дальше →
Всего голосов 27: ↑27 и ↓0 +27
Просмотры 4.3K
Комментарии 3

React: слоты как у сына маминой подруги

Разработка веб-сайтов *JavaScript *ReactJS *

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

Для решения подобных задач в каждой популярной технологии сегодня применяется концепция "слотов". У Angular есть ngContent, во Vue, Svelte и WebComponents есть слоты.

А как же React?
Всего голосов 18: ↑14 и ↓4 +10
Просмотры 10K
Комментарии 13

Ruby Digest 2020·08·2

Разработка веб-сайтов *Ruby *Программирование *Читальный зал Конференции
Подборка информации о Ruby с 16 по 31 августа, включая русскоязычные источники: новости, конференции, новинки, медиа, статьи.



На сколько большие зарплаты у Ruby-разработчиков в России и где растет спрос на рубистов?

Юкихиро Мацумото, создатель Ruby, рассказывает о предстоящих нововведениях в Ruby 3.

Что дало обновление GitHub до Ruby 2.7? И каких улучшений ждать от Ruby 3?

Какие Js-библиотеки чаще используются с Ruby on Rails? Кому-нибудь пригодился StimulusJS? Много ли в rails-проектах легаси? Какие базы данных предпочитают rails-разработчики? На сколько обширно используют контейнеризацию? Много ли желающих продолжать использовать Ruby on Rails в 2020 году и готовы ли они рекомендовать его для начинающих разработчиков и для новых проектов? — результаты опроса Rails-сообщества.
Читать дальше →
Всего голосов 3: ↑3 и ↓0 +3
Просмотры 1.6K
Комментарии 0

6 рекомендаций по разработке масштабируемых React-проектов

Блог компании RUVDS.com Разработка веб-сайтов *JavaScript *ReactJS *
Перевод
В начале работы над новым React-проектом рекомендуется сформулировать инструкции, следуя которым можно будет создать приложение, хорошо поддающееся масштабированию.



В этом материале я хочу поделиться знаниями о React-разработке, накопленными за годы использования этой библиотеки. Они помогут вам в формировании вашего собственного свода правил по разработке React-приложений.
Читать дальше →
Всего голосов 27: ↑26 и ↓1 +25
Просмотры 7.7K
Комментарии 47

JavaScript: полное руководство по классам

Разработка веб-сайтов *JavaScript *Программирование *
Перевод
Доброго времени суток, друзья!

В JavaScript используется модель прототипного наследования: каждый объект наследует поля (свойства) и методы объекта-прототипа.

Классов, используемых в Java или Swift в качестве шаблонов или схем для создания объектов, в JavaScript не существует. В прототипном наследовании есть только объекты.

Прототипное наследование может имитировать классическую модель наследования от классов. Для этого в ES6 было представлено ключевое слово class: синтаксический сахар для прототипного наследования.

В данной статье мы научимся работать с классами: определять классы, их частные (приватные) и открытые (публичные) поля и методы, а также создавать экземпляры.
Читать дальше →
Всего голосов 10: ↑7 и ↓3 +4
Просмотры 23K
Комментарии 5

Исправление странной ошибки и стратегии отладки, проверенные временем

Блог компании RUVDS.com Разработка веб-сайтов *CSS *HTML *
Перевод

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

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

Я проанализировал проблему, используя некоторые стратегии отладки, о которых я собираюсь рассказать в этой статье. После того, как от ошибки я избавился, я вспомнил совет, который Крис Койер дал читателям своего Твиттера несколько лет назад. Этот совет звучит так: «Напишите статью, которую вы хотели бы найти, когда обращались к поисковику». Собственно говоря, так я и поступил.
Читать дальше →
Всего голосов 36: ↑35 и ↓1 +34
Просмотры 6.5K
Комментарии 2

Опенсорсные альтернативы Google Analytics на своём хостинге

Блог компании VDSina.ru Разработка веб-сайтов *Open source *Серверное администрирование *Веб-аналитика *

Веб-интерфейс опенсорсного сервиса аналитики Matomo

Дегуглификация онлайновой жизни требует внедрения свободных альтернатив во всех областях. Защитники приватности ведут списки таких продуктов по категориям.

С точки зрения системного администратора в этих списках отдельно выделяется категория веб-аналитики — замена сервису Google Analytics, который собирает детальную статистику о посетителях сайта. Все знают, как работает такой сервис. Внедряете на страничках JS-код отслеживания, и если человек не установил блокировщик следящих скриптов, то каждый раз при открытии страницы будет срабатывать этот скрипт. Дальше статистика по вашим пользователям отправляется на хранение в корпорацию Google.

К счастью, есть ряд свободных, опенсорсных альтернатив Google Analytics, которые к тому же работают быстрее, поскольку скрипты меньше по размеру и загружаются с вашего собственного хостинга, а не со стороннего сервера. Информация о пользователях никуда не отправляется, а многие сервисы не используют куки и соответствуют законодательству GDPR о защите личных данных.
Читать дальше →
Всего голосов 46: ↑46 и ↓0 +46
Просмотры 14K
Комментарии 18

Не консолью единой: как я поднял ISPmanager и развернул лендинг с iPad 3

Блог компании RUVDS.com Разработка веб-сайтов *Серверное администрирование *Лайфхаки для гиков

Я думаю, что все на Хабре наверняка знают, как поднять сайт на VPS, используя терминал и SSH-соединение. Но что делать, если у тебя под рукой есть только старенький планшет и нужно развернуть лендинг здесь и сейчас? Можно ли поднять сайт, просто кликая в веб-интерфейсе в ISPmanager Lite? Грозит ли это появлением седых волос?

Мы решили устроить стресс-тест и развернуть лендинг, используя iPad 3 и ISPmanager. Подробности о том, что из этого вышло и много-много скринов под катом.
Читать дальше →
Всего голосов 40: ↑26 и ↓14 +12
Просмотры 3.7K
Комментарии 19

Картинка, которая одновременно является кодом на Javascript

Блог компании VDSina.ru Разработка веб-сайтов *JavaScript *Программирование *
Перевод

Изображения обычно хранятся как двоичные файлы, а файл Javascript по сути является обычным текстом. Оба типа файлов должны следовать собственным правилам: изображения имеют конкретный формат файла, определённым образом кодирующий данные. Для того, чтобы файлы Javascript можно было исполнять, они должны следовать определённому синтаксису. Я задался вопросом: можно ли создать файл изображения, одновременно являющийся допустимым синтаксисом Javascript, чтобы его можно было исполнять?

Прежде чем вы продолжите чтение, крайне рекомендую изучить эту песочницу кода с результатами моих экспериментов:

https://codesandbox.io/s/executable-gif-8yq0j?file=/index.html

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

https://executable-gif.glitch.me/image.gif
Читать дальше →
Всего голосов 144: ↑141 и ↓3 +138
Просмотры 49K
Комментарии 36

Что такое Headless CMS и почему за ними будущее

CMS *Разработка веб-сайтов *

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

Читать дальше →
Всего голосов 13: ↑6 и ↓7 -1
Просмотры 18K
Комментарии 14

О реализации структуры данных Map в V8

Блог компании RUVDS.com Разработка веб-сайтов *JavaScript *
Перевод

В стандарте ECMAScript 2015, известном как ES6, появилось много новых JavaScript-коллекций, таких, как Map, Set, WeakMap и WeakSet. Они, судя по всему, стали отличным дополнением к стандартным возможностям JavaScript. Они получили широкое применение в различных библиотеках, в приложениях, в ядре Node.js. Сегодня мы поговорим о коллекции Map, попытаемся разобраться с особенностями её реализации в V8 и сделаем некоторые практические выводы, основанные на полученных знаниях.

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

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

Как видно, спецификация даёт тем, кто создаёт JS-движки, большую свободу. Но при этом здесь нет определённых указаний, касающихся конкретного подхода, используемого для реализации Map, его производительности, характеристик потребления памяти. Если в критически важной части вашего приложения используются структуры данных Map, и если вы записываете в такие структуры данных большие объёмы информации, то основательные знания о реализации Map, определённо, принесут вам большую пользу.
Читать дальше →
Всего голосов 43: ↑42 и ↓1 +41
Просмотры 7.8K
Комментарии 1

Математика верстальщику не нужна, или Временные функции и траектории для покадровых 2D анимаций на сайтах

Разработка веб-сайтов *JavaScript *Математика *
🔥 Технотекст 2020
Tutorial


«Математика верстальщику не нужна!», — говорили они. «Арифметики за 2 класс школы хватит!», – говорили они. «Верстальщик – не программист, так что нечего себе голову забивать точными науками!», — чего только не услышишь на просторах интернета на тему нужности тех или иных знаний при разработке сайтов. И на самом деле в большинстве случаев человеку, который делает интерфейсы, и правда хватает умения складывать числа. Что-то более сложное встречается редко и обычно уже есть готовый алгоритм где-то в недрах NPM. Но сайты – понятие растяжимое, и иногда все же нужно включить голову, и разобраться в каком-то вопросе. И один из таких вопросов – это траектории в 2D анимациях.


Наблюдая за людьми, которые осваивают JS, и, в частности, покадровые анимации в вебе, я заметил, что у многих возникают сложности, когда нужно сделать движение какого-то объекта на странице по определенной траектории. И, если эта траектория не нарисована заранее заботливым дизайнером в виде path в SVG-картинке, а формулируется какими-то общими словами и ссылками на референсы из сети, или, что еще хуже, должна генерироваться на лету, то задача приводит их в полный ступор. По всей видимости все упирается в тотальное непонимание того, как получить кривую той или иной формы в рамках JS. Об этом мы сегодня и поговорим в формате своеобразной лекции о временных функциях для анимаций в самых разных их проявлениях.


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

Читать дальше →
Всего голосов 11: ↑11 и ↓0 +11
Просмотры 11K
Комментарии 11

PHP-Дайджест № 187 (18 августа – 7 сентября 2020)

Разработка веб-сайтов *PHP *Symfony *Yii *Laravel *

Свежая подборка со ссылками на новости и материалы. В выпуске: PHP 8 beta 3, принят новый синтаксис атрибутов в PHP 8, Zephir всё, целая пачка полезных инструментов, статьи, видео, подкасты.

Приятного чтения!


Всего голосов 51: ↑51 и ↓0 +51
Просмотры 13K
Комментарии 22

Обработка ошибок в JavaScript

Блог компании Reksoft Разработка веб-сайтов *JavaScript *Программирование *Отладка *

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

Тема обработки ошибок в JavaScript возникает не только у каждого новичка, но и матерого разработчика. Замечу, что тема уже довольно заезжена, поэтому я позволю себе резюмировать в кратком изложении все, что действительно эффективно и проверено в бою мною, коллегами и гуру IT.

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

Google продвигает новый стандарт WebBundles — потенциально опасную для веба технологию «упаковки» веб-сайтов

Блог компании VDSina.ru Информационная безопасность *Разработка веб-сайтов *Google Chrome
В общем потоке новостей остался незамеченным совместный призыв продукт-менеджера Chrome Кенджи Бахе и веб-консультанта Google Юсуке Уцуномии об использовании нового стандарта Web Bundles, разработанного Google. На chromium.googlesource появился соответствующий мануал по использованию WebBundles и, собственно, особо о нем больше не говорилось. Запись от лица Базе и Уцуномии была опубликована еще в ноябре 2019 года, но вызвала реакцию сообщества только сейчас, и то, исключительно на нескольких профильных площадках и в одном блоге, посвященном кибербезопасности.



Чем так опасна технология «упаковки» содержимого веб-страницы в один источник, что это вообще такое, и почему команда веб-разработки Google ступает на очень скользкую дорожку, давайте разбираться ниже.
Читать дальше →
Всего голосов 89: ↑81 и ↓8 +73
Просмотры 48K
Комментарии 92

Как Web Bundles навредят блокировщикам контента, инструментам для безопасности и открытому вебу

Информационная безопасность *Разработка веб-сайтов *
Перевод
Google предлагает новый стандарт для веба – Web Bundles. Этот стандарт позволяет «упаковывать» [bundle] все ресурсы веб-сайта в один файл, что не даст браузерам возможности оперировать ссылками на его дочерние ресурсы. Эта система угрожает превратить веб из коллекции ресурсов с гиперссылками (которые можно изучать, безопасно скачивать или даже менять) на непрозрачные «комки» информации в стиле «всё или ничего» (типа PDF или SWF). Организации, пользователи, исследователи и регуляторы, верящие в открытый, прозрачный, удобный для пользователей веб, должны воспротивиться этому стандарту.

Хотя мы признательны за то, что Web Bundles и связанные с ними предложения намерены решить определённые проблемы, мы считаем, что существуют лучшие способы достичь тех же целей, не подвергая опасности открытую, прозрачную, ориентированную на пользователя природу веба. Одна потенциальная альтернатива – использовать подписанные обязательства по независимо скачиваемым подресурсам. На описание альтернатив потребуется отдельная статья, а некоторыми уже поделились с авторами спецификации.
Читать дальше →
Всего голосов 15: ↑13 и ↓2 +11
Просмотры 4.6K
Комментарии 39

Дайджест свежих материалов из мира фронтенда за последнюю неделю №431 (1 — 6 сентября 2020)

Разработка веб-сайтов *CSS *JavaScript *HTML *
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →
Всего голосов 24: ↑24 и ↓0 +24
Просмотры 8.7K
Комментарии 2

Laravel–Дайджест (24 августа – 6 сентября 2020)

Разработка веб-сайтов *PHP *Laravel *

Что нового в Laravel 8. Руководство по обновлению до новой версии. Laravel Jetstream. Пакетирование задач. Набор компонентов для Blade-шаблонов.


Laravel Дайджест

Читать дальше →
Всего голосов 6: ↑6 и ↓0 +6
Просмотры 4.4K
Комментарии 0

Вклад авторов