Как стать автором
Обновить
1
0
Михаил Ураков @MikUrrey

PHPекарь и JavaScriptизёр

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

Тренд на безграмотность (или узус?)

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

Недавно я узнал, что довольно много людей читают статьи на Хабре «как книгу». Думаю, мы все здесь стараемся быть грамотными, уважать читателей.

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

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

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

Разработка векторного редактора на JavaScript (сложности и идеи)

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

Предыстория:


Имя большой опыт в разработке веб-сайтов (около 15 лет) и являясь программистом, я очень не люблю рутинную работу, стараюсь ее либо избегать, либо каким-то образом оптимизировать. Другими словами, если мне в какой-то момент необходимо заниматься наполнением контентом сайта (да, знаю, не царское дело программисту наполнять сайт, но случаи разные бывают), то я предпочту потратить пару часов на написание парсера входящих данных, чем часа 4 вколачивать эти данные вручную. И давно меня терзала проблема отсутствия удобного редактора для создания карт изображения. Конечно, можно нарисовать карту в Corel Draw или подобном, выгрузить в SVG и по быстрому переконвертировать в нужный формат, но меня давно интересовала возможность создания некоего редактора, который позволит, не загружая сторонние программы, прямо на сайте, по-быстрому загрузить изображение и выделить на нем нужную карту. Например, есть некое изображение здания, на котором необходимо выделить контур этажа и привязать к нему какие-то JavaScript-события или просто ссылку, вот как здесь:


Читать дальше →
Всего голосов 31: ↑22 и ↓9+13
Комментарии15

Выразительный JavaScript: Рисование на холсте

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

Содержание




Рисование — это обман.
М.К.Эшер


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

Но такое использование DOM – не то, для чего он создавался. Некоторые задачи, типа рисования линии между двумя произвольными точками, крайне неудобно выполнять при помощи обычных элементов HTML.

Есть две альтернативы. Первая – SVG, масштабируемая векторная графика, также основанная на DOM, но без участия HTML. SVG – диалект для описания документов, который концентрируется на формах, а не тексте. SVG можно встроить в HTML, или включить через тег <img>.

Вторая альтернатива – холст (canvas). Холст – это один элемент DOM, в котором находится картинка. Он предоставляет API для рисования форм на том месте, которое занимает элемент. Разница между холстом и SVG в том, что в SVG хранится начальное описание форм – их можно в любой момент сдвигать или менять размер. Холст же преобразовывает формы в пиксели (цветные точки растра), как только нарисует их, и не запоминает, что эти пиксели из себя представляют. Единственным способом сдвинуть форма на холсте является очистить холст (или ту часть, которая окружает форму) и перерисовать её на другом месте.
Читать дальше →
Всего голосов 37: ↑35 и ↓2+33
Комментарии3

Если мошенники украли деньги с банковской карты — не спешите в полицию

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

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

Народ жалуется на Tinkoff, Альфа-банк и прочие банки, на операторов сотовой связи. Портал banki.ru ввёл драконовские правила, что у него решения судов без оценок в народном рейтинге, на форуме нельзя написать, что itsoft выиграл дело у ВТБ — это реклама itsoft видите ли, то есть видно надо писать одна компания, но не скажем какая выиграла суд у ВТБ.

В статье “Банки не хотят внедрять многофакторную авторизацию и покончить с мошенничеством” есть простые рецепты, которые бы исключили случаи мошенничества хотя бы для тех, кто не разговаривает с мошенниками и не сообщает им коды. Народ хочет аппаратные токены, а банки не дают. 

К написанию данной статьи меня ещё подвиг наш конфликт с хостером Leaseweb. 7 лет мы платили одну цену в месяц за аренду серверов там. А потом она внезапно выросла в 70 раз. Leaseweb решил, что за действия злоумышленников деньги надо списать с нашей корпоративной карты.

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

Читать далее
Всего голосов 162: ↑142 и ↓20+159
Комментарии210

JavaScript: заметка о requestAnimationFrame и requestIdleCallback

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


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


Можете ли вы ответить на вопрос о том, в чем заключается разница между requestAnimationFrame и requestIdleCallback?


Если можете, то я завидую глубине ваших знаний. Я не смог, когда меня об этом спросили. Более того, в тот момент я даже не знал о существовании интерфейса requestIdleCallback. Теперь знаю и хочу с вами этими знаниями поделиться.


Сразу уточним, что названные интерфейсы предоставляются браузером и к ECMAScript отношения не имеют.


Что касается поддержки, то с requestAnimationFrame все хорошо, а с requestIdleCallback, в основном из-за Safari, этого современного IE, ситуация хуже.


Рассматриваемые интерфейсы позволяют разработчикам получать доступ к процессу рендеринга страницы. Также они очень тесно связаны с циклом событий (event loop) браузера.

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

12 инструментов и сайтов для UI/UX дизайнеров

Время на прочтение2 мин
Количество просмотров62K
Инструменты для разработки постоянно совершенствуются как с точки зрения удобства использования, так и с точки зрения пользовательского опыта. Это очень удобно и для дизайнеров, и для пользователей. Не удивительно, что опытные веб-дизайнеры стараются идти в ногу со временем и изучают новые инструменты. Авторы сотен блогов и сайтов, посвященных дизайну, регулярно публикуют новые статьи, делятся своими знаниями и дают свои рекомендации по использованию новых инструментов. Для дизайнера все это является очень полезным источником информации. Мы тоже подобрали самые последние инструменты и веб-сайты для дизайнеров.

image

Читать дальше →
Всего голосов 34: ↑25 и ↓9+16
Комментарии1

Как работает JS: отслеживание изменений в DOM с помощью MutationObserver

Время на прочтение7 мин
Количество просмотров55K
Сегодня, в переводе десятого материала из серии, посвящённой особенностям работы механизмов JavaScript, мы расскажем о том, как отслеживать изменения в DOM с помощью API MutationObserver.

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



Всё это ведёт к усложнению задачи контроля состояния интерфейсов приложений в процессе их жизненного цикла. Эта задача становится ещё масштабнее в том случае, если речь идёт о разработке чего-то вроде фреймворка или даже обычной библиотеки, когда, например, нужно реагировать на то, что происходит со страницей и выполнять какие-то действия, зависящие от DOM.
Читать дальше →
Всего голосов 24: ↑22 и ↓2+20
Комментарии7

Благодаря WebAssembly можно писать Frontend на Go

Время на прочтение9 мин
Количество просмотров24K
Оригинал статьи.

В феврале 2017 года член команды go Brad Fitzpatrick предложил сделать поддержку WebAssembly в языке. Спустя четыре месяца в ноябре 2017 автор GopherJS Ричард Музиол начал реализовывать идею. И, наконец, полная реализация была смержена в mаster. Разработчики получат wasm примерно в августе 2018, с версией go 1.11. В результате, стандартная библиотека берёт на себя почти все технические сложности с импортом и экспортом функций, знакомых вам, если вы уже пробовали компилировать Си в wasm. Звучит многообещающе. Давайте посмотрим, что можно сделать с первой версией.
Читать дальше →
Всего голосов 20: ↑17 и ↓3+14
Комментарии93

Производительность анимаций на сайтах

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

image


При разработке сайтов, выходящих за рамки условного бутстрапа, рано или поздно возникают вопросы, связанные с производительностью анимаций. Особенно важными они являются в дизайнерских сайтах, вроде тех, что попадают в каталоги Awwwards, FWA, CSS Design Awards и.т.д. При этом часто задача создания анимаций и последующей оптимизации, если она будет нужна, ложится на плечи не очень опытных разработчиков, которые даже не знают с чего начать. Обычно все это выливается в тормозящие сайты, которыми невозможно пользоваться, и последующее негативное отношение ко всему классу таких проектов. В этой статье мы постараемся разобрать, где находится граница приемлемой производительности анимаций, какие узкие места часто встречаются и куда смотреть в инструментах разработчика в первую очередь.

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

Работаем с аудио: прогресс и визуализация данных

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


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

Хочу поделиться опытом работы с аудио. Под «аудио» я подразумеваю HTMLAudioElement и Web Audio API.

Что будем делать?

Мы создадим нечто вроде плеера для одного трека (о полноценном проигрывателе — в одной из следующих статей).

Условия:

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

В сети полно материалов как по HTMLAudioElement, так и по WAAPI, поэтому я сделаю акцент на практической составляющей. Кроме аудио, мы будем работать с drag-drop и canvas.

Без дальнейших предисловий…
Читать дальше →
Всего голосов 14: ↑14 и ↓0+14
Комментарии12

Концепции, лежащие в основе Web Audio API

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


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

В этой статье объясняются некоторые концепции из теории музыки, на основе которых работает Web Audio API (WAA). Зная эти концепции, вы сможете принимать взвешенные решения при проектировании аудио в приложении. Статья не сделает вас опытным инженером по звуку, но поможет понять, почему WAA работает так, как работает.
Читать дальше →
Всего голосов 13: ↑13 и ↓0+13
Комментарии0

Пробуем Audio API на примере написания визуализатора

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

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

Но прежде чем начать разбираться непосредственно с Audio API, нам необходимо набросать заготовку нашего визуализатора и делать мы будем это при помощи canvas.

Подробности
Всего голосов 32: ↑31 и ↓1+30
Комментарии13

Эквалайзер на JavaScript

Время на прочтение5 мин
Количество просмотров58K
На хабре уже было несколько статей по Web Audio API: создание визуализатора, вокодера и пианино в 30 24 строки. Поиск же по всея интернетам по запросу эквалайзер упорно выдавал туториалы по созданию спектрограмм. (Если заголовок этой статьи сбил вас с толку или вы таки купились на картинку:) и ожидали именно визуализации аудио — вам сюда или вот сюда). Но именно просто эквалайзера я так и не встретил (хотя уверен, что где-то он таки есть). Возможно, это настолько простая задача, что об этом и писать не стоит. Но, в таком случае, почему бы не сделать её ещё проще?


Читать дальше →
Всего голосов 44: ↑39 и ↓5+34
Комментарии21

GitFlic: нас обвинили в «распиле» — мы не поняли почему, но посмеялись

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

Здравствуй, читатель!

"...Российский GitHub..." - за такую фразу в заголовке на Habr'e однажды зацепился мой взгляд. С предвкушением я нырнул под кат и... Увы, обнаружил лишь поверхностный обзор, щедро сдобренный издёвкой и скриншотами. Но, согласитесь, ведь не каждый день на горизонте событий возникает что-то IT-шное с припиской "российский", посему любопытство грубо вытолкало меня из раковины интроверта и заставило обратиться напрямую к наиболее надежному источнику - команде сервиса GitFlic.

Читать далее
Всего голосов 66: ↑20 и ↓46-20
Комментарии117

Несколько малоизвестных возможностей docker-compose

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

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


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

Читать дальше →
Всего голосов 51: ↑49 и ↓2+47
Комментарии22

Nuxt as fullstack server: frontend + backend API Server (Часть 1)

Время на прочтение6 мин
Количество просмотров26K
Nuxt as fullstack server: frontend + backend API Server


Разработчики Nuxt предлагают 3 метода доступа к API:

  1. Встроенный в Nuxt сервер Connect и использование serverMiddleware
  2. Интегрированные фреймворки (Express, Koa, Hapi и т.д.)
  3. Внешние API сервера

Я покажу на простом примере как организовать API сервер с использованием serverMiddleware на том же инстансе Nuxt, который у нас отвечает за frontend.
Читать дальше →
Всего голосов 7: ↑6 и ↓1+11
Комментарии3

Additional SSR performance with Nuxt fullstack server (Часть 2)

Время на прочтение5 мин
Количество просмотров8.8K
Additional SSR performance with Nuxt fullstack server


В Части 1 я рассказал как легко организовать API Server в Nuxt. В Части 2 я хочу рассказать какие дополнительные преимущества можно извлечь из Nuxt fullstack server.
Читать дальше →
Всего голосов 9: ↑9 и ↓0+9
Комментарии4

Как я сделал удобной разработку на Vue.js с server-side рендерингом

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

Начну с небольшой предыстории.

Свой новый проект я решил попробовать сделать на Vue.js. Мне нужен был серверный рендеринг (SSR), CSS модули, code-splitting и прочие прелести. Разумеется, для повышения производительности разработки нужна была горячая перезагрузка (HMR).

Я не хотел использовать готовые решения, типа Nuxt.js, т.к. при разрастании проекта важно иметь возможность кастомизации. А любые высокоуровневые решения, как правило, не дают этого делать, или дают, но с большими усилиями (был похожий опыт с использованием Next.js для React).

Основная проблема локальной разработки при использовании серверного рендеринга и горячей перезагрузки состояла в том, что мало запустить один webpack-dev-server. Мы должны также что-то сделать с исходниками, которые запускает Node.js, иначе при следующей перезагрузке страницы мы получим код, который не был обновлен на сервере, но обновился на клиенте.

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


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

Информация

В рейтинге
Не участвует
Откуда
Россия
Зарегистрирован
Активность