Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

250,21
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Дорогой JavaScript,

Время на прочтение7 мин
Охват и читатели33K
Мне хочется рассказать тебе о проблеме в нашем сообществе.

Я участвовал во множестве открытых проектов, таких как Babel, Flow, Yarn, Lerna, и других. Как разработчик, мне посчастливилось стать частью самых лучших времён сообщества, равно как и худших.

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

Но боюсь, это не всё, с чем я сталкивался.
Открыть письмо

Above-the-Fold CSS — как ускорить загрузку сайта не замедлив разработку

Время на прочтение2 мин
Охват и читатели10K
В старые добрые времена мы с Google PageSpeed Insights были на короткой ноге. Я — клепал дешевые шаблоны, Google — ставил высокую оценку за скорость их загрузки. Однако со временем многое поменялось, и хоть я по-прежнему клепаю дешевые шаблоны, Google начал вставлять мне палки в колеса.

Я думаю многие видели следующие комментарии в отчетах Google PageSpeed Insights:

  • Сократите CSS (HTML, JavaScript)
  • Используйте кеш браузера
  • Включите сжатие
  • Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

И если с первыми тремя пунктами проблем, как правило, не возникает, последний пункт меня поставил в тупик.
Читать дальше →

Про оптимизацию рендеринга — с оптимизмом

Время на прочтение7 мин
Охват и читатели24K
У меня есть мечта, и она утопична: я хочу, чтобы мои веб-приложения работали идеально. JQuery, AngularJs, React, Vue.js — все обещают производительность. Но проблема совсем не во фреймворках и не в JavaScript. Проблема в том, как браузер рендерит страницу. А делает он это очень плохо.

Если бы браузер отлично справлялся с рендерингом, то не появился бы такой инструмент, как React Native. Под капотом React Native всё тот же JavaScript, а View нативное, и разница в производительности между нативным приложением и приложением на React Native не будет заметна для рядового пользователя. Другими словами, проблема не в JavaScript.

Если что-то оптимизировать, то как раз рендеринг. Инструментов, которые нам даёт JavaScript и API браузера, недостаточно. Два года я пытаюсь сделать работу своих продуктов плавной и быстрой, но тщетно. Я почти смирился с тем, что веб останется таким навсегда. В этой статье я собрал всё, что успел узнать об оптимизации рендеринга и применить на проектах, над которыми работал, и рассказываю о своих надеждах на ближайшее будущее. Это будущее, в котором я хочу опираться на устойчивый фундамент стандартов и API браузера, а не CSS-хаки и third-party репозитории для оптимизации производительности.


Читать дальше →

Electron: от мотивации до публикации

Время на прочтение11 мин
Охват и читатели42K

— Хотел бы я иметь приложение, которое умеет что-то такое, что мне надо. Жаль такого нет.
— А почему бы тебе его самому не написать?
— Это сложно, мне потребуется куча времени, чтобы понять теорию, приступить к практике и, скорее всего, ничего хорошего не выйдет. А вообще я frontend-разработчик и привык к HTML, CSS и JS. Этот стек не позволяет писать десктопные приложения.
— Electron!

Читать дальше →

Как аккуратно залезть в кишки WebRTC при передаче голоса и видео

Время на прочтение5 мин
Охват и читатели13K
WebRTC — технология интересная, но чуток запутанная. В первую очередь тем, что это не одна технология, а комбайн. Захват видео с камеры и звука с микрофона. Установка peer-to-peer подключения между двумя браузерами с протыканием NAT по мере возможности. Передача звука и видео по этому подключению, с пониманием, что передаются realtime данные: кодеки, пропускная способность, потеря кадров, вот это всё. Ну и, наконец, воспроизведение полученного в окне другого браузера. Или не браузера, это уже как зайдет. Ах да, еще — realtime передача пользовательских данных по той же схеме для игр, датчиков и всего того, где недопустимы лаги tcp websocket. Мы в Voximplant постоянно копаемся в кишках технологии, чтобы у клиентов были качественные звук и видео во всех случаях, а не только по локальной 100-мегабитке. И нам было очень приятно почитать на прошлой неделе интересную статью, которая рассказывает, как в этих кишках правильно копаться. Предлагаем вам тоже почитать адаптированный перевод, специально для Хабра!
Читать дальше →

Смотрим часть чужого избранного ВКонтакте

Время на прочтение3 мин
Охват и читатели60K

Кадры из фильма «50 оттенков серого»

На этот раз с помощью незамысловатого куска кода на javascript заглянем в таинственные глубины человеческих предпочтений. А именно получим часть списка закладок («лайков» записей сообществ) аккаунта ВКонтакте.

По данным wordstat.yandex.ru, до 2000 раз в месяц у поискового робота спрашивают «как посмотреть кто что лайкает». Ответом в поисковой выдаче является вирусная программка LikeCheсker, которая на поставленный вопрос на самом деле не отвечает. А мы ответим.

Зачем это нужно? Если верить интернету (а ему лучше не верить) по, например, почерку человека можно определить его характер. Например
Саркастичных людей можно распознать по написанию буквы «ё». Чем необычнее изображение точек, помещенных над этой буквой, тем острее его чувство юмора и ярче его способность к подражанию.

Есть у меня предположение, что по картинкам и постам, которые человек «лайкает» можно построить более точный портрет личности, чем по его почерку. Однако для получения этой информации нужно немного потрудиться.
Далее

Рецепт разработки бота под Telegram

Время на прочтение12 мин
Охват и читатели29K


Добрый день, уважаемые читатели Хабрахабра!

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

Статья может быть интересна как новичкам в программировании — увидеть, сколько препятствий стоят на пути у готового продукта, так и более продвинутым специалистам — где-то посмеяться, где-то поплакать, где-то написать комментарий «жизненно».

Преамбула


И так, что же может сделать один программист за 4 дня?
Читать дальше →

React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты

Время на прочтение7 мин
Охват и читатели25K

image
Эта статья о том, как написать универсальный JavaScript-компонент, который можно будет использовать


  • как React-компонент;
  • как Preact-компонент;
  • как Angular-компонент;
  • как Web Component;
  • как jQuery функцию для рендеринга в DOMElement;
  • как нативную функцию для рендеринга в DOMElement.

Зачем и кому это нужно


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

Читать дальше →

Electrode — open source платформа от WalmartLabs для ReactJS/NodeJS приложений

Время на прочтение5 мин
Охват и читатели11K
image

Меньше чем за год Walmart.com завершил миграцию на React/Node.js, и мы рады сообщить вам об этом! Цель миграции заключалась в создании новой платформы для повышения эффективности WalmartLabs и ее инженеров в будущем.

Мы рады сообщить о том, что мы выложили в open source Electrode — платформу, на которой построен Walmart.com.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №239 (28 ноября — 4 декабря 2016)

Время на прочтение4 мин
Охват и читатели19K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

Читать дальше →

Logux: Connection lost, data synchronized – интервью с Андреем Ситником (Злые Марсиане)

Время на прочтение6 мин
Охват и читатели13K
Что происходит, если вдруг на клиенте пропадает интернет? Возможно, на долю секунды, а может быть, на более ощутимый период? Все мы как пользователи сталкиваемся с нестабильным сигналом, плавающим качеством связи. Иногда это неважно, ведь хочется посмотреть какое-то весёлое видео, иногда от этого может зависеть очень многое – представьте, что вам срочно надо купить билет на поезд или оплатить тот же самый интернет.

Те сферы, где очень важен конечный пользователь – например, СМИ, говорят, что уже 13% пользователей уходят, если ваш сайт открывается больше четырёх секунд, не разбираясь в причинах. А теперь давайте представим такого пользователя, который еще пробует отправить комментарий, и он постоянно «отваливается» из-за проблем со связью?

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

На этот и другие вопросы отвечает Андрей Ситник – автор PostCSS и Автопрефиксера, ведущий фронтендер в «Злых Марсианах».









– Почему мы вообще говорим о проблемах связи? Разве это не вопрос, исключительно связанный с физическими/сетевыми возможностями?

– OSI тут не совсем в тему. Logux заменяет REST и AJAX. То есть это чисто прикладной уровень. Logux решает следующие проблемы:
Читать дальше →

О бравом React'е замолвите слово

Время на прочтение8 мин
Охват и читатели11K
Здравствуйте, уважаемые читатели!

Спешим вас порадовать — мы уже вовсю переводим книгу небезызвестного Стояна Стефанова о библиотеке React


Мы сочли, что этот молодой росток на массивном стволе JavaScript нелишне будет бережно прорекламировать, поэтому предлагаем почитать обзорную и слегка восторженную статью, которая, на наш взгляд, устарела всего на пару абзацев (их мы опустили)
Читать дальше →

Front-end и блокировщики рекламы (на примере Adblock Plus)

Время на прочтение4 мин
Охват и читатели25K
Хочу поделиться небольшим опытом работы с блокировщиками рекламы со стороны front-end разработчика. Все понимают, что наша задача сделать так, чтобы сайт нормально работал и выглядел при любых настройках пользователя, на любых устройствах. Я иногда посматриваю постоянно проверяю как выглядит сайт при отключенном javascript, проверяю работу на touch-устройствах, устройствах с маленьким разрешением итд. итп. После того, как у нас на сайте из-за Adblock Plus (далее по тексту просто Adblock) перестал работать видео-плеер — стало понятно, что наличие блокировщика рекламы также нужно учитывать при верстке сайта…
Читать дальше →

Ближайшие события

Транслируем в Facebook красиво: титры и их кастомизатор

Время на прочтение2 мин
Охват и читатели5K
Мы делаем бродкастер для live трансляций в Facebook и одна из задач с которой пришлось столкнуться это текстовые оверлеи или титры (Lower Third). Наш JustBroadcaster мы выдерживаем в концепции всё должно быть “очень просто для обычного пользователя” и конечно задачу с титрами пришлось решать с учётом этого, избегая превращения в панель управления космическим кораблём.

Неигровой VR: перспективы и возможности в вебе, – интервью с VR-энтузиастом Martin Splitt, Archilogic

Время на прочтение7 мин
Охват и читатели7.8K
В последнее время у моих друзей начали появляться странные коробочки, в которые они вставляют свой мобильный, вешают все это на голову и куда-то пропадают.

image

Удивительно, что виртуальную реальность можно сделать из мобильника и куска картона. Но другой вопрос: зачем она нужна и что мы можем с ней сделать? Игры понятно, но это все равно очень узкий сегмент. Может ли веб стать той точкой роста, которая сделает VR действительно распространенной технологией? Каким образом можно использовать виртуальную реальность уже сейчас?

Чтобы разобраться, мы взяли интервью у Maртина Сплитта, который горячо болеет этой темой уже пару лет.
Читать дальше →

9 способов оптимизации производительности Front-End

Время на прочтение10 мин
Охват и читатели28K
Поскольку современные браузеры стали поддерживать больше возможностей, а веб-индустрия стремительно перемещается в сторону мобильных устройств, появилась необходимость писать компактный и оптимизированный код, который не заставит долго ждать пользователя, пока загрузится сайт. Front-end хорош тем, что в нем содержится много простых стратегий и конвенций кода, которые мы можем использовать для обеспечения оптимальной производительности. В этой статье мы собрали 9 простых советов, которые помогут с оптимизацией кода.

Сразу должен сказать, что часть приемов было подсмотрено нами на западных просторах интернетов, а часть добавили мы. В любом случае, в рунете такого материала не было. Нам часто приходится писать большие системы и оптимизировать скорость загрузки, поэтому стараемся бороться за каждый байт. Отсюда и решили написать про эту важную тему.
Читать дальше →

Mozilla и Tor закрыли критическую уязвимость, которая активно использовалась для деанонимизации пользователей Tor

Время на прочтение23 мин
Охват и читатели18K


Разработчики Mozilla и Tor в срочном порядке выложили патчи для браузеров, которые устраняют критическую 0day-уязвимость браузера под Windows, Mac и Linux. По мнению независимого эксперта, новый эксплойт почти в точности идентичен эксплойту для 0day-уязвимости 2013 года (исполнение произвольного кода после загрузки в браузер специально составленного JS-скрипта), которую успешно использовало ФБР для деанонимизации пользователей Tor, в том числе посещавших сайты с детской порнографией.
Читать дальше →

Front-end JavaScript framework Evolution beta

Время на прочтение3 мин
Охват и читатели4.4K
Evolution — это JavaScript микрофреймворк для front-end разработчиков написанный мною в свободное время, основной идеей которого была простота, малое количество кода, удобное API для работы с элементами HTML-DOM и наличие небольшого числа микромодулей.
Читать дальше →

Делаем проект на Node.js с использованием Mongoose, Express, Cluster. Часть 2.1

Время на прочтение7 мин
Охват и читатели20K

Введение


Здраствуйте, дорогие хабровчане! Сегодня у нас в основном будут маленькие изменения, но изменений много. В этой части мы будем:


  • Создавать свой логгер
  • Записывать в лог запросы и время их обработки
  • Исправлять ошибки, которые мы допустили в первой части.
  • Разбираться с авторизациеей
  • Разбираться с некоторыми классами
  • Конфиги!
Читать дальше →

Два аспекта «децентрализованных» одностраничных приложений

Время на прочтение6 мин
Охват и читатели5.3K
В статье мы попытаемся описать два совершенно не связанных с собой аспекта децентрализованных одностраничных приложений. Это соединение двух пользователей и сохранение паролей в одностраничном приложении при помощи браузера.
Читать дальше →