Обновить
256K+

JavaScript *

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

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

Цена JavaScript

Время на прочтение7 мин
Охват и читатели18K
По мере того как наши сайты всё сильнее зависят от JavaScript, приходится расплачиваться за то, что мы отправляем пользователям. Иногда цена не видна с первого взгляда. В этой статье я объясню, почему полезно проявить немного дисциплины, если вы хотите ускорить загрузку и производительность на мобильных устройствах.

tl;dr: меньше кода = меньше парсинг/компиляция + меньше передача + меньше распаковка

Сеть


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



Это может стать проблемой даже в странах первого мира, поскольку эффективный тип сетевого соединения у пользователя необязательно 3G, 4G или WiFi. Вы можете сидеть в кафе с WiFi, но быть подключённым к хотспоту через сотовую связь со скоростью 2G.
Читать дальше →

Настройка системы WEB — тестирования на основе headless chromium-browser, chromedriver, nightwatch и node.js на Ubuntu

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

Предисловие


Привет, Хабр! Данная задача возникла у меня с проблемой, которая заключалась в создании робота для авторизации в Instagram, который бы делал за меня лайки. Всю задачу не напишу, напишу только часть реализации в виде настройки необходимого инструментария на удаленном сервере.

WEB — тестирование — это объемная и неоднозначная сфера, которая может заключаться в решении задач не только в плане тестирования WEB — приложений, но и, к примеру, в плане построения парсеров, роботов IoT и ботов работы с социальными сетями и все это используя только JavaScript!

Возможно, что вам не нравится словосочетание «тестирование», возможно, отчасти, из-за того, что это словосочетание заключает в себе более интересные вещи, которые, к примеру, позволят нам написать бота, способного авторизироваться в Instagram, Facebook и совершать там ряд действий от нашего лица и в одно и то же время нудно заниматься наблюдением, как выполняется наш фронтенд, но тестирование имеет смысл и уже стандартизировано сообществом W3C и продолжает развиваться.
Читать дальше →

Медленнее, плавнее: разбираемся с React Fiber

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


16 сентября 2017 года вышла React Fiber — новая мажорная версия библиотеки. Помимо добавления новых фич, о которых вы можете почитать здесь, разработчики переписали архитектуру ядра библиотеки. Я как React-разработчик решил разобраться, что за зверь этот Fiber, какие задачи он решает, за счёт чего и как в итоге можно применить полученные знания на проектах, над которыми я тружусь в компании Live Typing. Разобрался и пришёл к неоднозначным выводам.

«Блендер на 28 докладов, каждый из которых равен десяти статьям» — интервью с Программным комитетом HolyJS 2017 Moscow

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

Для обычного пользователя программы, которые мы пишем — это магия. Фронт, бэк — неважно. Человек нажимает на кнопку в браузере, и вдруг случается чудо. Но мы-то знаем, что это не чудо, а результат упорной работы.


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


Это происходит само собой, просто по статистике? Если набрать достаточное количество докладов, всё получится автомагически? Как бы не так. Всё подстроено. Как программу на JS проектируют архитекторы, так и за каждой конференцией стоит команда отличных инженеров, которые проектируют её специальным образом. Они проектируют не только структуру, но и вместе с докладчиками «отлаживают» каждый доклад, строчка за строчкой, раз за разом. Проводят кросс-ревью, оценку, починку багов. Пишутся специальные инструменты и выкладываются на GitHub. И так до тех пор, пока не скомпилируется хорошо работающая, безбажная конференция.


Наверное, каждый иногда хотел пообщаться с разработчиками тех инструментов, которыми мы все пользуемся. К примеру, кто хотел бы сказать пару ласковых создателям React или Node.js? А кто хотел бы узнать от них парочку тайн о внутренней кухне проекта?


Это интервью — с разработчиками конференции HolyJS 2017 Moscow, с её Программным комитетом. Мы будем обсуждать:


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

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

Разработка инструмента веб-дизайнера на основе веб-приложения (Figma). Перевод

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

Наше представление о будущем инструментов дизайна таково, что и инструменты, и контент должны быть легко доступны.

Вот почему мы создали Figma, командный инструмент работы над дизайном интерфейсов, как облачный сервис, распространяемый в виде веб-приложения.

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


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

Приложение реального времени на Vue.js

Время на прочтение11 мин
Охват и читатели24K
По мнению Дэвиса Керби, вице-президента Algoworks Solutions, автора этой статьи, фреймворк Vue.js набирает популярность в среде JavaScript-разработчиков благодаря своей простоте и той лёгкости, с которой можно начать работу с ним. Буквально несколько строк кода на Vue позволяют делать очень серьёзные вещи. Vue — это один из самых известных фреймворков, он находится в числе ведущих платформ для веб-разработки.
Современный пользователь Сети не любит ждать. Как быть, если на Vue нужно создать приложение для работы с некими данными в реальном времени? Дэвис отвечает на этот вопрос с помощью интеграции в приложение Vue.js 2.0. возможностей сервиса Pusher. В этом материале он, с самого начала, разберёт разработку такого приложения, названного Movie Review.
Читать дальше →

Регулярные выражения для самых маленьких

Время на прочтение11 мин
Охват и читатели242K
Привет, Хабр.

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

Некоторые из них для наглядности будут показаны на примере языков программирования PHP или JavaScript, но в целом они работают независимо от ЯП.

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

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

Поехали!


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

Решение проблем неправильного использования памяти в Node.js

Время на прочтение8 мин
Охват и читатели22K
Недавно в компании Reside Real Estate столкнулись с проблемами: в самые ответственные моменты начал падать Node.js-сервер. Подозрение пало на память. Сотрудники компании прибегли к временным мерам, что позволило избавить от неудобств пользователей, и занялись поисками источника проблем. В результате им удалось найти и устранить неполадки.


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

Чем «транскрибирование» отличается от «распознавания голоса»

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

Голосовых помощников сейчас делают все. Их встраивают в телефоны, наушники, отдельно стоящие колонки, они пытаются с нами общаться при звонках в тех поддержку и заменить «нажмите 1 чтобы связаться с оператором» в голосовых меню. Наше «лего для телефонии» Voximplant предлагает разные варианты распознавания голоса уже много лет, и под катом я на примере нескольких строк JavaScript покажу основные варианты, чем они отличаются друг от друга и почему «потоковое распознавание от гугла» — это не всегда самый лучший вариант.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №290 (19 — 26 ноября 2017)

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


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

Microsoft Bot Framework + IBM Watson =… би-лингвистический бот

Время на прочтение8 мин
Охват и читатели5.1K
Продолжая начатую тему хочется поделиться успешным опытом создания билингвистического Node.JS бота на Microsoft Bot Framework под Linux. От заказчика поступила задача разработать простой социальный бот в формате вопрос-ответ для большой торговой сети, однако сложность заключалась в другом — бот должен быть двуязычным: на английском и арабском. Хотя, как будет показано ниже, выбор инструментов для решения задачи сделал разработку лёгкой, приятной и интересной.
Читать дальше →

Основы React: всё, что нужно знать для начала работы

Время на прочтение15 мин
Охват и читатели272K
Хотите узнать о том, что такое React, но вам всё никак не выпадает шанс изучить его? Или, может быть, вы уже пробовали освоить React, но не смогли толком понять? А может, вы разобрались с основами, но хотите привести в порядок знания? Эта статья написана специально для тех, кто положительно ответил хотя бы на один из этих вопросов. Сегодня мы создадим простой музыкальный проигрыватель, раскрывая основные концепции React по мере продвижения к цели.

image

Разобравшись с этим материалом, вы освоите следующее:

  • Компоненты React.
  • Рендеринг ReactDOM.
  • Классы компонентов и функциональных компоненты.
  • JSX.
  • Состояние (state).
  • Обработка событий.
  • Асинхронный метод setState.
  • Свойства (props).
  • Ссылки (refs).

Это — практически всё, что нужно знать для того, чтобы создавать и поддерживать React-приложения.
Читать дальше →

Оптимизация фронтенда. Часть 2. Чиним tree-shaking в проекте на webpack

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


Итак, если специально не чинить, tree-shaking в webpack не работает. Кто не верит, читайте мою предыдущую статью. Если починить очень хочется, то добро пожаловать под кат. Тут есть несколько вариантов, которые я смог подсмотреть, найти придумать.

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

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

13​ ​выводов​ ​которые​ ​я​ ​сделал,​ ​после​ ​4​ ​лет​ ​использования​ ​Ext JS

Время на прочтение8 мин
Охват и читатели31K
Привет, Хабр. Хочу поделиться опытом использования Ext JS для быстрого построения сложных интерфейсов. Я фронтенд-разработчик в EnglishDom, и мы разрабатываем онлайн-сервисы для изучения английского языка. У меня 6 лет коммерческого опыта в фронтенде, и 4 из них я работаю с Ext JS. Также имею опыт работы с Backbone, React и Ember. Сегодня поговорим про Ext JS, я расскажу свою историю использования, особенности разработки и после каждой небольшой истории я буду делать вывод. Прошу всех под кат.
Читать дальше →

Обзор программы HolyJS 2017 Moscow: от WebAssembly до Yarn

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


До конференции HolyJS осталось совсем немного (она пройдёт в Москве 10-11 декабря), сейчас в её программу вносят последние штрихи — а значит, мы можем как следует представить эту программу Хабру. Какие доклады нас ждут? Если суммировать одним словом, то «разнообразные». HolyJS никогда не ограничивалась рамками «конференции про фронтенд-фреймворки», а стремилась охватывать JS-мир во всей его широте. И в этот раз разброс очень заметен: от Node.js и GraphQL до браузерных «Героев меча и магии» и победы над квантовым компьютером с помощью WebAssembly. В результате при взгляде на программу глаза так разбегаются, что в этом хабрапосте даже не получилось разбить её на несколько тематических блоков, и пришлось просто описать все доклады поочерёдно.

Впрочем, кое-что мы выделили отдельно: кейноуты. Конференция пройдёт в трёх залах, но каждый день будет начинаться и заканчиваться общим для всех выступлением, так что логично начать описание с этих четырёх тем от четырёх всадников JavaScript-апокалипсиса, которые слетятся в Москву из-за рубежа.
Читать дальше →

Глупый JS. Делаем фильтры «по красоте»

Время на прочтение5 мин
Охват и читатели53K
Привет. Мне 17 лет и я JS-разработчик. Возможно это приговор, а может быть это классическое приветствие в «Клубе анонимных JS-никовпрограммистов» — мне этого не узнать. Сейчас во многом моя работа заключается в работе с данными, их обработкой, фильтрами, сортировкой и так далее. Естественно, что я использую не нативный JS в проектах. Сегодня будем делать фильтры на чистом js-е. Увидим насколько это круто и быстро. Узнаем возможности es6 и сделаем рефакторинг кода. Заинтересованных прошу под кат.
Читать дальше →

Чем отличаются JavaScript и ECMAScript?

Время на прочтение6 мин
Охват и читатели83K
Перевод What’s the difference between JavaScript and ECMAScript?

Как-то мы попробовали гуглить «различие между JavaScript и ECMAScript».

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

«ECMAScript — это стандарт».
«JavaScript — это стандарт».
«ECMAScript — это спецификация».
«JavaScript — это реализация стандарта ECMAScript».
«ECMAScript — стандартизованный JavaScript».
«ECMAScript — это язык».
«JavaScript — это диалект ECMAScript».
«ECMAScript — это JavaScript».


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

В этой статье представлено наше понимание различий между JavaScript и ECMAScript. Статья написана для тех, кто знаком с JavaScript, но хочет получить более четкое представление о его взаимоотношениях с ECMAScript, веб-браузерами, Babel и так далее. Вы также узнаете о скриптовых языках, движках JavaScript и средах выполнения JavaScript.

Ну что, погнали.
Читать дальше →

Внутреннее устройство и оптимизация бандла webpack

Время на прочтение15 мин
Охват и читатели49K
Webpack фактически стал стандартом для сборки крупных приложений на JS. Его используют практически все. Для разработчика webpack выглядит как магический черный ящик: если забросить в него файлы и небольшой конфиг, на выходе автоматически появится бандл.

Чтобы разобраться в секретах этой магии, мы обратились к эксперту, человеку, который неоднократно залезал внутрь webpack, — Алексею Иванову. Он готов объяснить, как выглядит бандл изнутри, как на него влияют разные настройки, к чему и почему могут привести некоторые из них, а также рассказать, как все это отладить и оптимизировать.


В основе материала — доклад Алексея Иванова на конференции HolyJS 2017, проходившей в Санкт-Петербурге 2-3 июня.

Оптимизация фронтенда. Часть 1. Почему я не люблю слово treeshaking или где вас обманывает webpack

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


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

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

Jest и Puppeteer: автоматизация тестирования веб-интерфейсов

Время на прочтение9 мин
Охват и читатели46K
Эту статью написал программист из Италии Валентино Гаглиарди. Он говорит, что сразу после выхода Puppeteer его заинтересовала автоматизация тестирования веб-интерфейсов с использованием данной библиотеки и Jest. После этого он приступил к экспериментам.



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