Как стать автором
Обновить
19
0
Андрей Хамидулин @fransua

Пользователь

Отправить сообщение

HTML: плохие стороны

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров4.3K

Вероятно, вы слышали заявления типа «HTML и так по умолчанию обладает accessibility» или «Не нужно изобретать заново этот абсолютно идеальный элемент управления HTML». Я считаю, что это общие заявления, а не универсальные истины. Веб-разработчикам крайне важно осознавать недостатки платформы, поэтому я решил собрать несколько примеров того, когда у HTML возникают трудности как с точки зрения accessibility, так и usability.

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

Читать далее
Всего голосов 11: ↑10 и ↓1+14
Комментарии16

Выбор структур данных для самописного текстового редактора

Уровень сложностиСредний
Время на прочтение13 мин
Количество просмотров10K

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

Ресурсы


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

  • Build Your Own Text Editor — наверно, самый фундаментальный пост о создании текстового редактора с нуля, который я видел. Это превосходный туториал на случай, если вы хотите начать писать собственный текстовый редактор. Стоит заметить, что в редакторе из этого туториала в качестве внутренней структуры для текста используется, по сути, вектор строк.
  • Text Editor: Data Structures — отличный обзор множества структур данных, которые можно использовать при реализации текстового редактора. (Спойлер: как минимум одна из них будет рассмотрена в моём посте)
  • Плейлист Ded (Text Editor) на YouTube — это потрясающая серия, в которой @tscoding фиксирует процесс создания с нуля текстового редактора. Эти видео стали для меня источником вдохновения.

Зачем?


Если в сети есть так много хороших ресурсов о создании собственного текстового редактора (не говоря уже о том, что уже существует множество феноменальных текстовых редакторов), то зачем я это пишу? На то есть несколько причин:

  1. Я хотел заняться проектом, непохожим ни на один свой прошлый.
  2. Я хотел создать инструмент, которым смогу пользоваться.
  3. Мне всегда хотелось глубже разобраться с созданием собственных структур данных.
Читать дальше →
Всего голосов 47: ↑46 и ↓1+58
Комментарии18

Из лягушек в автоматизаторы — мое решение

Уровень сложностиСредний
Время на прочтение17 мин
Количество просмотров6K

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

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

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

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

Читать далее
Всего голосов 17: ↑17 и ↓0+17
Комментарии9

JavaScript. Работа с буфером, Ctrl+C Ctrl+V

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров7.7K

Как копировать в буфер картинки. Какие типы данных можно класть в буфер. Поддержка кастомных типов. Как сделать свои кнопки копировать/вставить.

Читать далее
Всего голосов 11: ↑10 и ↓1+12
Комментарии2

Универсальный VPN с WireGuard, MikroTik и Keenetic

Время на прочтение7 мин
Количество просмотров52K

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

Читать далее
Всего голосов 10: ↑10 и ↓0+10
Комментарии39

Память в браузерах и в Node.js: ограничения, утечки и нестандартные оптимизации

Время на прочтение32 мин
Количество просмотров42K

Интро: почему я написал эту статью


Меня зовут Виктор, я разрабатываю страницу результатов поиска Яндекса. Несмотря на внешнюю простоту, поисковая выдача — сложная штука: на каждый запрос генерируется своя уникальная страница, на которой в зависимости от запроса может присутствовать блок Картинок, Карты, Переводчик, видеоплеер и многие другие компоненты. Все они должны запускаться и работать в памяти обычных бюджетных телефонов, которые использует большинство наших пользователей. Браузерам должно хватать ресурсов, чтобы пользователь не видел вот такого:



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


Разрабатывая проект на JavaScript (TypeScript, ClojureScript или каком-то другом языке, транслируемом в JavaScript), мы привыкли создавать объекты, массивы, строки и вообще писать код, как будто память бесконечна. Это не так. Я расскажу о видах проблем с памятью, о том, какие ограничения мы часто забываем и как их можно преодолеть. В ответ браузеры и пользователи скажут вам спасибо.


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

Как это устроено: видеоконференции ВКонтакте на безлимитное число участников

Время на прочтение20 мин
Количество просмотров20K

Сервисы для онлайн-общения и всевозможная доставка — наверное, самые востребованные и активно развивающиеся отрасли 2020–21-го. Мы ВКонтакте тоже не остались в стороне: работая удалённо с первых месяцев пандемии, запустили групповые видеозвонки. Сперва они вмещали одновременно 128 человек, а теперь мы полностью сняли лимиты на число участников.

В этой статье рассказываем, с какими трудностями сталкивается большинство сервисов звонков. И показываем, что нам понадобилось сделать и изобрести, чтобы преодолеть ограничения по числу участников. Попутно отвечаем на вопросы, которые прилетали со всех сторон на волне интереса к технологиям real-time коммуникации: как устроены Zoom и Clubhouse, что взять для своего сервиса звонков из open source, как встроить звонки в приложение. Про эффективную доставку тоже будет — но не еды, а данных, аудио и видео.

Читать далее
Всего голосов 54: ↑54 и ↓0+54
Комментарии13

Почему не все тестовые задания одинаково полезны: разбор одного фееричного провала

Время на прочтение27 мин
Количество просмотров46K


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


Если вам интересно кто в здравом уме мог для выполнения поставленной задачи написать код сочетающий монады с goto, а также одновременно сократил объем кода и увеличил его производительность, то добро пожаловать под кат. И, конечно же, самое вкусное, связанное с оптимизациями на базе работы JIT — в конце. Итоговую версию решения тестового можно посмотреть на гитхабе по ссылке.

Читать дальше →
Всего голосов 94: ↑87 и ↓7+115
Комментарии114

Наиболее полное руководство по практическому использованию Web Speech API

Время на прочтение17 мин
Количество просмотров19K

В этой статье я хочу поделиться с вами результатами изучения основных возможностей Web Speech API (далее — WSA).


Введение


WSA — это экспериментальная технология, состоящая из двух интерфейсов: SpeechSynthesis (интерфейс для перевода текста в речь) и SpeechRecognition (интерфейс для распознавания речи).


О том, что из себя представляют названные интерфейсы и что в себя включают можно почитать на MDN или в рабочем черновике (данный черновик, в отличие от большинства спецификаций, написан более-менее человеческим языком).


Что касается поддержки, то вот что об этом говорит Can I use:



Всего голосов 20: ↑18 и ↓2+20
Комментарии1

Неочевидные сложности CRDT

Время на прочтение23 мин
Количество просмотров6.4K


Мы все так привыкли к облачной синхронизации Dropbox и совместному редактированию в Google Docs, что объединение результатов действий разных пользователей может казаться давно решённой проблемой. Но на самом деле в этом вопросе остаётся множество подводных камней, а работа над алгоритмами CRDT вовсю продолжается.


Один из людей, ведущих эту работу — Мартин Клеппманн (Martin Kleppmann): исследователь в Кембриджском университете и создатель популярной библиотеки Automerge. И на конференции Hydra он рассказывал о нескольких вещах, которые исследовал буквально в последнюю пару лет. Какие действия пользователя могут заставить Google Drive выдать «unknown error»? Почему в CRDT метаданные о работе над документом могут занимать в сто раз больше места, чем сам документ, и как с этим бороться? А у какой проблемы сейчас даже не существует известного решения?


Обо всём этом он поведал в докладе, а теперь мы сделали для Хабра текстовый перевод. Видео и перевод — под катом, далее повествование будет от лица спикера.

Всего голосов 24: ↑24 и ↓0+24
Комментарии5

Базовая структура HTML-документа с объяснением каждой строчки

Время на прочтение9 мин
Количество просмотров106K
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <title>Unique page title - My Site</title>

  <script type="module">
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="/assets/css/print.css" media="print">

  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
</head>

<body>
  <!-- Content -->
  <script src="/assets/js/xy-polyfill.js" nomodule></script>
  <script src="/assets/js/script.js" type="module"></script>
</body>
</html>


Под катом — разбор каждой строчки
Читать дальше →
Всего голосов 44: ↑36 и ↓8+34
Комментарии9

Я был неправ. Будущее за CRDT

Время на прочтение8 мин
Количество просмотров7.9K
Несколько недель назад я посмотрел презентацию Мартина Клеппмана про его подход к редактированию в реальном времени через CRDT и ощутил жгучее отчаяние. Его подход хорош настолько, что превосходит всю мою работу за последнее десятилетие, и места в будущем ей уже не видать.

Но начнем сначала.

В 2010 году я работал в Google Wave, где мы пробовали создать совместные редактируемые пространства для замены электронной почты, Google Docks, форумов, мгновенных сообщений и многих других однозадачных приложений. Среди моих инструментов мне особенно нравится среда общего назначения, нигде более как в Wave не сформулированный в то время функционал. В отличие от большинства других инструментов, среда общего назначения не навязывает собственный рабочий процесс, благодаря чему через нее можно планировать праздники, создавать вики-проекты, играть с друзьями в настольные игры, назначать рабочие собрания и много чего еще.
Читать дальше →
Всего голосов 14: ↑12 и ↓2+17
Комментарии0

Ускоряем Ansible

Время на прочтение4 мин
Количество просмотров13K
Турбокомпрессор в разрезе

Ни для кого не секрет, что с настройками «по умолчанию» Ansible может делать своё дело не слишком быстро. В статье я укажу на несколько причин этого и предложу полезный минимум настроек, которые, вполне возможно, реально увеличат скорость работы вашего проекта.
Cтавим турбо на сток!
Всего голосов 22: ↑22 и ↓0+22
Комментарии31

Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite

Время на прочтение11 мин
Количество просмотров51K

Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в Event loop, нашу главную браузерную цепочку?" Вздохнуть. Закрыть дверь. Лечь досыпать. До начала рабочего дня еще 4 часа. А там уже ивент лупы, лейауты и прочая радость…


В первой части мы говорили о первой загрузке и работе с ресурсами. Сегодня я расскажу о второй части оптимизации производительности фронтенда. О том, что происходит с нашей страницей, когда она загружена, на что уходит процессорное время и что с этим делать. Ключевые слова: event loop, paint \ repaint, layout \ reflow, composite.


Читать дальше →
Всего голосов 19: ↑18 и ↓1+20
Комментарии5

Проект Natasha. Набор качественных открытых инструментов для обработки естественного русского языка (NLP)

Время на прочтение34 мин
Количество просмотров92K
Два года назад я писал на Хабр статью про Yargy-парсер и библиотеку Natasha, рассказывал про решение задачи NER для русского языка, построенное на правилах. Проект хорошо приняли. Yargy-парсер заменил яндексовый Томита-парсер в крупных проектах внутри Сбера, Интерфакса и РИА Новостей. Библиотека Natasha сейчас встроена в образовательные программы ВШЭ, МФТИ и МГУ.

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

Для новостных статей качество на всех задачах сравнимо или превосходит существующие решения. Например с задачей NER Natasha справляется на 1 процентный пункт хуже, чем Deeppavlov BERT NER (F1 PER 0.97, LOC 0.91, ORG 0.85), модель весит в 75 раз меньше (27МБ), работает на CPU в 2 раза быстрее (25 статей/сек), чем BERT NER на GPU.

В проекте 9 репозиториев, библиотека Natasha объединяет их под одним интерфейсом. В статье поговорим про новые инструменты, сравним их с существующими решениями: Deeppavlov, SpaCy, UDPipe.

Всего голосов 44: ↑42 и ↓2+53
Комментарии25

Бот «Умный планировщик»: понимает с полуслова

Время на прочтение5 мин
Количество просмотров29K
Если вы когда-нибудь желали иметь личного слугу, который бы напоминал вам обо всем, о чем вы ему скажете, но не имели возможности нанять такого, то разработанный мною бот станет ему достойной заменой.



Хотите проверить функционал? Напишите в лс боту по этой ссылке и он ответит вам.

А тем, кому интересно как он работает и как 16-летний школьник смог написать его, я с удовольствием расскажу всё в подробностях в этой статье.
Читать дальше →
Всего голосов 29: ↑27 и ↓2+34
Комментарии41

Основы Ansible, без которых ваши плейбуки — комок слипшихся макарон

Время на прочтение12 мин
Количество просмотров138K

Я делаю много ревью для чужого кода на Ансибл и много пишу сам. В ходе анализа ошибок (как чужих, так и своих), а так же некоторого количества собеседований, я понял основную ошибку, которую допускают пользователи Ансибла — они лезут в сложное, не освоив базового.


Для исправления этой вселенской несправедливости я решил написать введение в Ансибл для тех, кто его уже знает. Предупреждаю, это не пересказ манов, это лонгрид в котором много букв и нет картинок.


Ожидаемый уровень читателя — уже написано несколько тысяч строк ямла, уже что-то в продакшене, но "как-то всё криво".

Читать дальше →
Всего голосов 88: ↑86 и ↓2+108
Комментарии67

Сколько софта нужно купить для компании

Время на прочтение15 мин
Количество просмотров9.8K
Мне пришлось поработать в разных по размеру компаниях – от маленькой конторы из 15 человек, снимающей пару комнат на чердаке, до международных компаний с офисами в разных странах и дорогущими корпоративами. И почти в каждой компании меня удивлял зоопарк используемого софта и жадность (или наоборот, расточительность) при выборе очередного инструмента.

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

image
Читать дальше →
Всего голосов 12: ↑11 и ↓1+11
Комментарии3

Расширенный HTML

Время на прочтение9 мин
Количество просмотров14K

В этой статье хотел бы рассказать немного про библиотеку, первую версию которой я создал еще в конце прошлого года. Суть очень простая — расширить возможности языка HTML, чтобы можно было без JavaScript'а писать простые и рутинные вещи: отправка формы в json формате, загрузка HTML тимплейтов на определенную страницу(по сути модульная система для HTML через http/s запросы), турболинки(привет пользователям RoR), простая шаблонизация на основе ответов ajax запросов и немного еще.


image


Библиотека называется EHTML или Extended HTML. Основана она на небезызвестной идее веб компонентов. Она доступна на гитхабе, там довольно таки структурированная документация с примерами. В этой статье я просто опишу основные идеи, возможно кому-то это зайдет.

Читать дальше →
Всего голосов 22: ↑19 и ↓3+23
Комментарии21

Яндекс открывает Алису для всех разработчиков. Платформа Яндекс.Диалоги (бета)

Время на прочтение5 мин
Количество просмотров110K
Сегодня мы начинаем открытое бета-тестирование платформы Яндекс.Диалоги, с помощью которой любой разработчик сможет обучить Алису новым навыкам и привлечь пользователей к своим сервисам и разработкам. В этом посте мы не будем пересказывать всю документацию, но дадим общее представление о работе платформы на примере самой популярной игры для Алисы.



Голосовой помощник Алиса, о котором мы впервые рассказывали на Хабре осенью прошлого года, уже работает в приложении Яндекс, Яндекс.Браузере, а также в бета-версии для Windows. Каждый день миллионы пользователей этих продуктов решают с помощью голосового помощника определённые задачи – например, узнают прогноз погоды. Мы регулярно добавляем новые возможности, но охватить все интересы пользователей самостоятельно невозможно. Заполнить этот пробел призваны навыки Алисы, об особенностях создания которых мы и расскажем под катом.

Читать дальше →
Всего голосов 110: ↑105 и ↓5+100
Комментарии157
1

Информация

В рейтинге
Не участвует
Откуда
Москва, Москва и Московская обл., Россия
Дата рождения
Зарегистрирован
Активность

Специализация

Fullstack Developer, Database Developer