Как стать автором
Обновить
4
0
Александр Сивашёв @shyr1punk

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

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

Цена JavaScript в 2018 году

Время на прочтение27 мин
Количество просмотров39K
Процесс работы пользователей с интерактивными веб-сайтами может включать в себя шаг отправки им JavaScript-кода. Часто — слишком большого объёма такого кода. Если на сайте используется очень много JavaScript, это особенно сильно сказывается на мобильных пользователях. Например, вам случалось бывать на мобильных веб-страницах, которые, вроде бы, выглядят как уже готовые к работе, но не реагируют на щелчки по ссылкам или на попытки прокрутить страницу?


JavaScript-код, который попадает в мобильные браузеры, всё ещё остаётся самым дорогостоящим ресурсом, так как он, многими способами, может задержать переход страниц в состояние, в котором с ними можно взаимодействовать. Какую нагрузку на системы создаёт JavaScript в наши дни? Как анализировать сайты? Как ускорить загрузку и обработку браузерами интерактивных веб-страниц? Эдди Османи, перевод материала которого мы сегодня публикуем, решил найти ответы на эти и на многие другие вопросы, встающие перед теми, кто пользуется JavaScript для разработки веб-сайтов в 2018 году.
Читать дальше →
Всего голосов 32: ↑31 и ↓1+30
Комментарии47

Декораторы и рефлексия в TypeScript: от новичка до эксперта (ч.2)

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

Эта статья — вторая часть серии:



В предыдущей статье мы выяснили, какие типы декораторов мы можем использовать в TypeScript.


Мы также узнали, как реализовать декоратор метода и ответили на основные вопросы про то, как декораторы работают в TypeScript:


  • Как они вызываются?
  • Кто передает в них аргументы?
  • Где объявлена функция __decorate?

В этой статье мы познакомимся с двумя новыми типами декораторов: декоратором свойства (PropertyDecorator) и декоратором класса (ClassDecorator).

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

React HoC в TypeScript. Типизация без боли

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


Много раз, когда шла речь о переводе React-проектов на TypeScript, я часто слышал, что самую сильную боль вызывает создание HoC’ов (Higher-Order Components — компоненты-обертки). Сегодня я покажу приём, как делать это безболезненно и довольно легко. Данный приём будет полезен не только для проектов TS, но также и для проектов ES6+.
Читать дальше →
Всего голосов 10: ↑9 и ↓1+8
Комментарии7

20 модулей для Node.js, о которых полезно знать

Время на прочтение9 мин
Количество просмотров51K
Филип Акерман, автор статьи, перевод которой мы сегодня публикуем, говорит, что в последние годы платформа Node.js становится всё популярнее и популярнее. Она часто используется для создания серверных частей веб-приложений, а также для решения других задач, возникающих в процессе разработки ПО. В настоящее время в реестре npm, менеджера пакетов для Node.js, насчитывается более полумиллиона модулей.

image

Мы представляем вашему вниманию обзор модулей, которые автор материала, программист, занимающийся, кроме прочего, ещё и веб-разработкой, считает полезными. Среди них — библиотеки для работы с изображениями, средства для проверки того, что пользователи вводят в формы, модули для оптимизации и минификации данных различных типов, инструменты для создания PDF-файлов, для логирования и разработки приложений командной строки.
Читать дальше →
Всего голосов 43: ↑35 и ↓8+27
Комментарии49

MyDataSpace — сервис публикации данных

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


Думаю многие уже наслышаны о пользе открытых данных. То здесь, то там открытые данные экономят бюджет, помогают бизнесу и многое другое. Тем не менее качество государственных открытых данных все ещё оставляет желать лучшего. Это сильно тормозит прогресс в этом направлении.


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


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


MyDataSpace – это сервис публикации данных. Любой может опубликовать данные бесплатно (под свободной или своей лицензией) и любой же может получить доступ к ним через веб-интерфейс или API.

Читать дальше →
Всего голосов 38: ↑36 и ↓2+34
Комментарии37

Как работает JS: веб push-уведомления

Время на прочтение10 мин
Количество просмотров78K
[Советуем почитать] Другие 19 частей цикла
Часть 1: Обзор движка, механизмов времени выполнения, стека вызовов
Часть 2: О внутреннем устройстве V8 и оптимизации кода
Часть 3: Управление памятью, четыре вида утечек памяти и борьба с ними
Часть 4: Цикл событий, асинхронность и пять способов улучшения кода с помощью async / await
Часть 5: WebSocket и HTTP/2+SSE. Что выбрать?
Часть 6: Особенности и сфера применения WebAssembly
Часть 7: Веб-воркеры и пять сценариев их использования
Часть 8: Сервис-воркеры
Часть 9: Веб push-уведомления
Часть 10: Отслеживание изменений в DOM с помощью MutationObserver
Часть 11: Движки рендеринга веб-страниц и советы по оптимизации их производительности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 12: Сетевая подсистема браузеров, оптимизация её производительности и безопасности
Часть 13: Анимация средствами CSS и JavaScript
Часть 14: Как работает JS: абстрактные синтаксические деревья, парсинг и его оптимизация
Часть 15: Как работает JS: классы и наследование, транспиляция в Babel и TypeScript
Часть 16: Как работает JS: системы хранения данных
Часть 17: Как работает JS: технология Shadow DOM и веб-компоненты
Часть 18: Как работает JS: WebRTC и механизмы P2P-коммуникаций
Часть 19: Как работает JS: пользовательские элементы

Сегодня публикуем перевод девятой части серии статей, посвящённых применению веб-технологий и JavaScript. В этом материале мы исследуем веб push-уведомления. А именно, поговорим о механизмах, лежащих в их основе, и о том, как осуществляется подписка на уведомления, как устроены процессы их отправки и получения.



Сложилось так, что push-уведомления, весьма распространённые в мире мобильных приложений, довольно поздно добрались до веба, хотя они являются одной из тех возможностей, которыми хотели бы пользоваться многие разработчики.
Читать дальше →
Всего голосов 32: ↑31 и ↓1+30
Комментарии6

Есть работа для чат-бота: виртуальный помощник службы поддержки

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

Зачем понадобился целый чат-бот при работе всего лишь с одной компанией? Всё дело в размере. Клиент — очень крупный интернет-магазин, которому требуется круглосуточная техподдержка ИТ-инфраструктуры, уведомление о возникающих проблемах, обработка и выполнение входящих заявок в предельно сжатые сроки. Последнее особенно важно, учитывая суточную аудиторию клиента и объёмы торговли.

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


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

Почему Ramda?

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

Пост содержит перевод статьи «Why Ramda?», которую подготовил один из контрибьютеров Скот Сайет. Статья была опубликована 10 Июня 2014 года на сайте и рассказывает о том почему стоит обратить своё внимание на библиотеку Ramda и функциональное программирование в целом.


Примечание переводчика

В связи с тем, что статья была написана в 2014 году, некоторые примеры устарели и не работали с последней версией библиотеки. Поэтому они были адаптированы под последнюю версию Ramda@0.25.0.

Почему Ramda?


Когда-то давно buzzdecafe представил миру Ramda, в тот же момент сообщество поделилось на два лагеря.

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

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

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


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

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

О том почему «открытые данные Сбербанка» это не открытые данные и что нам с этим делать

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

image
На днях произошло, в какой-то степени, знаменательное событие и одна из крупнейших компаний России заявила о том что теперь публикует открытые данные на своем сайте. Этой компанией является Сбербанк и соответствующий раздел на их сайте. Открытие раздела удостоилось пресс-релиза на их сайте и о нем, как о важном событии, написали десятки финансовых и не финансовых СМИ.


Действительно ли Сбербанк совершил нечто невероятное? Рядовое ли это явление и является ли то что сделал Сбербанк сейчас открытыми данными? Вот о чем далее пойдет речь.


В качестве вступления


Прежде чем продолжить о Сбербанке, давайте вернемся к термину открытые данные.

Читать дальше →
Всего голосов 93: ↑84 и ↓9+75
Комментарии20

Кто и как зарабатывает на открытых государственных финансовых данных?

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

Кадр из к/ф «Приключения Буратино». «Беларусьфильм», Творческое объединение «Телефильм».

Открытые данные и коммерческие проекты


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

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

При этом многие в последнее время говорят и про заработок на открытых данных. Но каждый раз, когда я слышу об этом от выступающих аналитиков, хочется их спросить: почему же вы рассказываете о том, как могут заработать другие, но не делаете этого сами? Где же все те, кто непосредственно зарабатывает на открытых данных? Почему они так непубличны? Почему владельцы и создатели проектов так редко бывают представлены широкой публике?
Читать дальше →
Всего голосов 11: ↑8 и ↓3+5
Комментарии20

Время — деньги. Как мы учили Яндекс.Такси точно рассчитывать стоимость поездки

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

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

До недавнего времени стоимость поездки в такси тоже была плавающей. Даже онлайн-сервисы рассчитывали сумму лишь примерно — окончательная стоимость формировалась только в конце пути. Тариф, как правило, включает три компонента: стоимость посадки (иногда с включенными километрами и/или минутами), стоимость километра и стоимость минуты. Конечно, можно было рассчитать примерную цену за поездку и раньше, но в конце она могла измениться из-за того, что, например, по пути водитель задержался в пробке. Понятно, что пассажирам это не всегда нравилось.

Кажется, нет ничего проще, чем использовать данные маршрутизатора в Яндекс.Навигаторе и данные Пробок, чтобы Яндекс.Такси с самого начала рассчитало точную цену, которая не менялась бы по окончании поездки. Но на самом деле на стоимость влияет огромное число факторов, не только тариф. Важно не просто уметь её рассчитывать. С одной стороны, стоимость должна быть привлекательной для пользователя, причём с учётом не только текущей ситуации на дороге, но и, например, пробок, которых на маршруте пока нет, но которые скоро возникнут. С другой, цена должна быть такой, чтобы водители не потеряли в заработке, даже если путь из точки А в точку Б оказался длиннее или дольше, чем планировалось. В этой статье мы расскажем, как решали задачу и как искали сбалансированный алгоритм, выгодный всем участникам платформы Яндекс.Такси.
Читать дальше →
Всего голосов 44: ↑39 и ↓5+34
Комментарии92

Как сделать внутренний продукт внешним. Опыт команды Яндекс.Трекера

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

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


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



Облако из слов в заголовках тикетов во внутреннем Яндекс.Трекере


На таком этапе важно сохранять прозрачность процессов: все стороны должны иметь возможность в любой момент узнать о ходе работы над задачей или, например, оставить свой комментарий, который не пропадёт в потоке рабочего чата. Для небольших команд трекер – это и вовсе своего рода новостная лента с последними новостями из жизни их компании.


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

Всего голосов 99: ↑98 и ↓1+97
Комментарии66

Тестирование компонентов React

Время на прочтение8 мин
Количество просмотров14K
Овидиу Черешес, автор статьи, перевод которой мы сегодня публикуем, написал тысячи тестов пользовательских интерфейсов. Он говорит, что тестирование должно вселять в разработчика уверенность в том, что его программы работают именно так, как он ожидает, и, в том, что они продолжат делать своё дело и после того, как их модифицируют и расширяют. Однако, тестирование пользовательских интерфейсов редко даёт уверенность. Вместо этого оно часто ведёт к разочарованиям и к мыслям о непродуктивности программистского труда.

image

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

Он начнёт рассказ с двух базовых принципов, понимание которых важно для нахождения правильного подхода к тестированию, далее будут даны примеры и представлен один полезный инструмент, способный значительно облегчить жизнь тем, кому приходится тестировать React-приложения.
Читать дальше →
Всего голосов 19: ↑19 и ↓0+19
Комментарии4

Вы можете себе это позволить? Бюджет веб-производительности в реальном мире

Время на прочтение15 мин
Количество просмотров16K
Автор — Алекс Расселл, разработчик Chrome, Blink и веб-платформы в Google

TL;DR: бюджеты производительности — существенная, но недооценённая часть успешного продукта и здоровой команды. Большинство наших партнёров не осведомлены об условиях реального мира — и в результате выбирают не те технологии. Мы установили бюджет по времени пять и менее секунд до интерактивности сайта после первой загрузки, а также две или менее секунд при последующих загрузках. При соблюдении этих нормативов мы ограничены типичным устройством из реального мира и типичной сетевой конфигурацией. Это Android-смартфон за $200 на канале 400 Кбит/с, RTT 400 мс. Это означает бюджет ~130-170 КБ ресурсов критического пути, в зависимости от их состава: чем больше JS — тем меньше объём.

За последние несколько лет мы имели удовольствие работать с десятками команд. Работа оказалась просветляющей, иногда в очень неожиданных местах. Один из самых неожиданных результатов — частые случаи «западни JavaScript».


«Нам нужен новый термин для упущенных деловых возможностей из-за современного фронтенда. Может быть, “западня JavaScript”»?

Управленцы, которые дают добро на создание прогрессивных веб-приложений (PWA), часто основным мотивом называют практически беспроблемный охват новых пользователей. В то же время разработчики осваивают инструменты, которые делают возможной достижение такой цели. Никто не хотел плохого. Тем не менее, результаты «готового» проекта PWA часто требуют недель или месяцев болезненной переделки, чтобы обеспечить минимально приемлемую производительность.
Всего голосов 30: ↑29 и ↓1+28
Комментарии44

Интеллектуальные чат-боты на ChatScript: основы

Время на прочтение11 мин
Количество просмотров11K
Чат-боты, поддерживающие общение с человеком на естественном языке, весьма популярны и востребованы. Сегодня мы хотим поделиться с вами первой частью перевода материала о разработке чат-ботов с помощью ChatScript (CS), написанного сотрудником WebbyLab на основе опыта, приобретённого им в ходе работы над одним из недавних проектов компании. Здесь, в частности, речь пойдёт об основах работы с CS, рассмотренных с точки зрения программиста-практика. ChatScript хорош тем, что на нём можно сравнительно просто разрабатывать масштабные системы с возможностями искусственного интеллекта, и тем, что его несложно интегрировать в проекты, написанные на JavaScript.

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

8 учебных проектов

Время на прочтение3 мин
Количество просмотров144K
«Мастер совершает больше ошибок, чем новичок — попыток»

Предлагаем 8 вариантов проектов, которые можно сделать «по фану», дабы получить реальный опыт разработки.

Проект 1. Клон Trello


image


Клон Trello от Indrek Lasn .

Что вы освоите:

  • Организация маршрутов обработки запросов (Routing).
  • Drag and drop.
  • Как создавать новые объекты (доски, списки, карточки).
  • Обработка и проверка входных данных.
  • Со стороны клиента: как использовать локальное хранилище, как сохранять данные в локальном хранилище, как читать данные из локального хранилища.
  • Со стороны сервера: как использовать базы данных, как сохранять данных в базе, как читать данные из базы.

Тут пример репозитория, сделанного на React+Redux.
Читать дальше →
Всего голосов 36: ↑30 и ↓6+24
Комментарии18

Чек-лист вёрстки

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

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

Читать дальше →
Всего голосов 92: ↑87 и ↓5+82
Комментарии47

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

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

Поисковым подсказкам в Яндексе уже почти 10 лет. На первый взгляд, они кажутся довольно простой фичей — многие до сих пор уверены, что саджест учитывает только то, как часто люди вводят те или иные запросы. Несколько лет назад мы рассказывали на Хабре, сколько сложной математики стоит за тем, чтобы подобрать правильное следующее слово и помочь человеку сформулировать свой вопрос. Тогда мы даже подсчитали, что поисковые подсказки экономят людям около 60 лет.


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


Темой поисковых подсказок в Яндексе я занялся в начале 2016 года. Цель, стоящая в то время перед командой саджеста, звучала очень амбициозно: «Сделать лучший саджест на мобильных», ни больше ни меньше!


image


Вспоминая о том, что было сделано с тех пор в области поисковых подсказок в Яндексе, трудно отделаться от двух ощущений. Первая: как же много всего мы сделали! Вторая: неужели всего этого не было раньше? Сделано действительно много, но эти вещи кажутся часто такими простыми и очевидными, что не верится, что их не было всегда.


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

Читать дальше →
Всего голосов 67: ↑66 и ↓1+65
Комментарии38

Чумачечая вакансия

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

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

 

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

 

Все этапы, как в настоящем проекте, были разделены между специалистами. Я и Лия выполняли менеджерские задачи: нарисовали макет плаката, описали требования и заразили энтузиазмом ребят.
Алина и Рома, как настоящие разработчики интерфейсов, согласились стать лицами нашего отдела вёрстки.

 

макет

 

Ден — фотограф, а ещё и руководитель отдела инфраструктуры веб-поиска — организовал мини-студию и провел профессиональную фотосессию. Саша — специалист по компьютерному зрению и фотошопу — помог с ретушью и обработкой фотографий. И дизайн нам тоже делал профессионал! Кстати говоря, задания и текст для плакатов мы тоже придумывали вместе.

 

backstage backstage

 

плакат

 

Ребята из ШАДа согласились помочь с распространением плакатов в своих ВУЗах, так что, если увидите их, не удивляйтесь, а расскажите друзьям.
А если вам интересно посмотреть, как мы работаем и отдыхаем, можете взглянуть на подборку фотографий наших будней и не только.

 

P.S.: Большое спасибо всем за участие!

 

Сборная менеджеров и разработчиков

.
Всего голосов 71: ↑46 и ↓25+21
Комментарии18
1
23 ...

Информация

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