Обновить
256K+

JavaScript *

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

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

Открытый урок по «Введение в JSON Schema»

Время на прочтение1 мин
Охват и читатели6.9K
Доброго дня!

Запускаем сегодня наш переделанный курс «Разработчик JavaScript» и вспомнили, что у нас есть ещё один открытый урок по нему же. На нём разбирали основные идеи JSON Schema, синтаксис, определяемый в спецификации, ну и для чего вообще стоит использовать эту технологию.


Если вдруг есть какие-то вопросы, то задавайте.

3D посты в Facebook: что и как

Время на прочтение2 мин
Охват и читатели16K
Недавно разработчики Facebook анонсировали поддержку 3D-постов. То есть теперь любой пользователь может легко загрузить низкополигональную модель в нужном формате (об этом ниже), снабдить её текстом и показывать своим друзьям и знакомым.

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

Frontend на CodeFest: React, Javascript и лучшие практики

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

Продолжаем рассказывать о программе CodeFest 2018. На очереди — мощный фронт докладов фронтенд-секции.
Читать дальше →

Возможно, вам не нужен Rust, чтобы ускорить ваш JS

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

Несколько недель назад я обнаружил пост "Окисляем Source Maps с Rust и WebAssembly"
распространяющийся по Твиттеру и расказывающий о выигрыше в производительности от замены обычного JavaScript в библиотеке source-map на Rust, скомпилированный в WebAssembly.


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


Так что я скачал библиотеку с GitHub и отправился в небольшое исследование производительности, которое я документирую здесь практически дословно.

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

Service Workers. Web Push и где они обитают

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


Добро пожаловать в школу CODEдейства и волшебства!

На сегодняшнем занятии мы с вами узнаем, как использовать малоизвестный тандем Web Push + Service Workers (SW). Я приоткрою вам завесу: расскажу о способе удерживать аудиторию маглов благодаря технологии Web Push и о том, чем это может быть полезно для редакций сайтов и прочих интернет-сервисов.
Торжественно клянусь, что замышляю только шалость!

Пунктирные вау-эффекты: о магии простыми словами

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


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

Перед тем, как перейти к статье, сделаю небольшое отступление. Эта серия статей предназначена для разработчиков (в первую очередь начинающих), которые хотят делать красивые вещи, но совершенно запутались в сложных инструментах. Каждый раз мы затрагиваем какой-то один прием использования того или иного инструмента и смотрим, к созданию какиих эффектов его можно применить. Комментарии о том, что “во времена флеша было лучше” или что “нужно анимации рисовать в AfterEffects” безусловно имеют право на существование, но будут вырваны из контекста и совершенно не помогут начинающим в решении их задачи.

Реализация прототипа мобильного/веб клиентов и сервера для системы контроля оборудования предприятий

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


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

Поскольку полная автоматизация (с контролем всех параметров датчиками и передачей данных с них по сети) технически и организационно невозможна, предлагалось частично автоматизировать процедуру. А именно — в местах проверок (контрольных точках) повесить NFC метки, а сотрудникам, осуществляющим обход, выдать смартфоны с приложением, которое фиксирует прикладывание смартфона к метке и предлагает ввести требуемые для каждой точки параметры. Данные затем передаются на сервер, откуда могут быть просмотрены руководителем в браузере (с отметками выхода за пределы допустимых значений, статистикой и пр).

Для реализации был выбран Javascript, а конкретно — связка в виде NodeJS, React+Redux, React-Native (с обменом между ними через GraphQL). Это позволило использовать один язык для сервера, клиента и мобильного приложения. Прежде с перечисленными технологиями (кроме Javascript) я вплотную не сталкивался, поэтому статья во многом отражает опыт знакомства с ними.

Как работает JS: сервис-воркеры

Время на прочтение11 мин
Охват и читатели58K
[Советуем почитать] Другие 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. Сегодняшняя статья посвящена сервис-воркерам. Здесь мы рассмотрим их особенности, поговорим об их жизненном цикле, об их поддержке в браузерах, и о сценариях их использования.


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

Наш опыт создания редактора блок-схем для веб приложения

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

К любой компании, которая занимается инструментами для разработчиков, рано или поздно приходит делегация клиентов. Со словами «программистов нет, задачи простые, нужен визуальный редактор». Автоматикой телефонных и видеозвонков мы занимаемся уже много лет, кому и зачем звонит робот хорошо себе представляем, VueJS любим, голова не болит. Почему бы не сделать? Под катом — закулисье и техническая сторона того, что маркетинг красиво назвал «Smartcalls».
Читать дальше →

Hyperapp для беженцев с React/Redux

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

image


Я люблю Redux


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


Redux — это инструмент для управления состоянием приложения (state), который позволяет полностью отделить его от представления (view). Представление (view) становится производным состояния (state), которое предоставляет пользователю интерфейс для его изменения. Действия пользователя (actions) не изменяют состояние (state) напрямую. Вместо этого они попадают в редюсер (reducer). Это такая чистая функция, которая на основе предыдущего состояния (state) и действия (action) генерирует следующее состояние (state). Такой подход к обновлению данных во многом был вдохновлен архитектурой языка программирования Elm и концепцией однонаправленного потока данных Flux. Это, возможно, самая популярная JavaScript-библиотека для иммутабельного изменения состояния из тех, что существуют сегодня. Авторы Redux сфокусировались на решении одной единственной проблемы — управление состоянием приложения (state), и сделали это хорошо. Redux получился достаточно модульным, чтобы работать с различными библиотеками для отображения представления (view).


React использует аналогичный сфокусированный подход для представления (view), имеет эффективный виртуальный DOM, который можно подключить к DOM браузера, нативным мобильным приложениям, VR и прочим платформам.


Что бы создавать надежные, функциональные и легко отлаживаемые web-приложения, можно использовать React и Redux. Правда, потребуются вспомогательные библиотеки вроде react-redux и куча boilerplate-кода. А можно попробовать Hyperapp.

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №303 (19 — 25 февраля 2018)

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


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

W3View — прямой путь Web UI

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

Моя предыдущая публикация на Хабре достигла своих целей, — множество людей узнали о существовании W3View, некоторые посетили GitHub, кому-то наверное даже понравилось.


В то-же время, последовавшие комментарии выявили потребность в более чётком описании того, какую задачу решает эта библиотека, как она это делает и для чего она может понадобиться вам (ну вдруг).


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

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

Анонс Dart 2.0: Оптимизированный для клиентской разработки

Время на прочтение5 мин
Охват и читатели20K
Сегодня мы анонсируем Dart 2, перезагрузку языка, которая более полно отражает наше видение Dart как уникально оптимизированного языка для клиентской разработки на Web и мобильных платформах.

Dash - официальный маскот языка
Dash — официальный маскот языка
Читать дальше →

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

Открытый вебинар «Особенности языка JavaScript»

Время на прочтение1 мин
Охват и читатели5.6K
Всем бобра!

Переработали тут по заявкам слушателей программу курса по JavaScript: дописали смежные темы типа сборщиков, тестовых фреймворков плюс догнали чуток изучения подходов по ООП + SOLID, паттерны и ещё мелкие разные изменения. По этому поводу провели достаточно интересный открытый вебинар на тему «Особенности языка JavaScript», где Юрий Дворжецкий рассказывал и показывал (а ещё и спрашивал) основные отличия языка, идиомы JS.


Как всегда ждём вопросы, пожелания, тапки.

Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 2 — Hello World

Время на прочтение17 мин
Охват и читатели6.2K
В предыдущей части туториала мы узнали что такое проект RealWorld, определились целями туториала, выбрали стек технологий и написали простой веб-сервер на Express в качестве основы для изоморфного фронтенда.

В этой части, мы допилим серверную часть и напишем изоморфный «Hello World» на Ractive, а также соберем все это с помощью Webpack.


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

Восстание одной маленькой своенравной нейросети, или как сделать codewar-игру за 3 дня

Время на прочтение15 мин
Охват и читатели7.4K
На день рождения FirstVDS мы уже третий раз запускаем квест. Раньше он был только для админов, в этом году решили добавить задание для программистов.

По сюжету игрок провалил обучение нейросети Нексы и накликал восстание машин. В итоговом задании админы, программисты и простые люди «с лапками» сражались с Нексой каждый по-своему. Если в задании для админов были наработки, то над прогерским мы задумались.

Хотелось что-то нетривиальное и с визуальным интерфейсом — чтобы игрок сразу видел результат, так же интереснее. Вспомнили конкурсы mail.ru в стиле codewar и решили сделать что-то подобное.

В чём суть: участнику нужно написать эффективный код, который будет «соперничать» с кодом условного противника.
Читать дальше →

Мышление в стиле Ramda: Частичное применение (каррирование)

Время на прочтение8 мин
Охват и читатели11K
Данный пост — это третья часть серии статей о функциональном программировании под названием «Мышление в стиле Ramda».

1. Первые шаги
2. Сочетаем функции
3. Частичное применение (каррирование)
4. Декларативное программирование
5. Бесточечная нотация
6. Неизменяемость и объекты
7. Неизменяемость и массивы
8. Линзы
9. Заключение

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

В том посте мы рассмотрели простые конвееры функций, которые принимают лишь один аргумент. Но что если мы хотим использовать такие функции, которые принимают больше одного аргумента?
Читать дальше →

Уязвимости вашего приложения

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

Актуальны ли ещё угрозы XSS? Прошло около 20 лет с тех пор, как Cross Site Scripting (XSS) появился как вид атаки. С тех пор мы получили богатый опыт и знания, защита наших сайтов стала намного сложнее, а многочисленные фреймворки были призваны оберегать нас от ошибок. Но последние данные показывают совсем другую картину: в первых кварталах 2017 года количество сообщений об XSS-атаках и количество найденных уязвимостей выросло в несколько раз.


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


Прототипом статьи является доклад на конференции HolyJS 2017 Moscow. Алексей — фронтенд-тимлид/архитектор в компании EPAM Systems и один из лидеров сообщества FrontSpot в Минске. Основные области профессиональных интересов: архитектура и инфраструктура приложений, управление разработкой.


В этом тексте огромное количество картинок со слайдов. Осторожно, трафик!

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

Управляем состоянием приложения без шаблонного кода и магии

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

Хочу поделиться с сообществом своей реализацией концепции flux как единого источника данных и видением построения веб-приложений. Мотивом к созданию своего решения послужило желание избавиться от большого количества шаблонного кода и сделать взаимодействие с источником данных удобным. Я работал над большим приложением (10 команд + 1 архитектурная) с использованием связки React + Redux как архитектор и как лид команды разработки и вынес для себя моменты, которые доставляли большие неудобства в процессе написания кода:

  • большое количество шаблонного кода
  • как следствие многословности — перенос небольших кусков логики в представление
  • сложность динамического добавления/удаления бизнес-логики модулей
  • возможность подписаться только на обновления всего стора (утомительные селекторы + возможны неожиданные перерисовки)

3 пункт особенно важен в контексте архитектуры микро-фронтендов, которая используется на проекте (и на многих других проектах).
Читать дальше →

Изменчивые формы и вау-эффекты: о магии простыми словами

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


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