Как стать автором
Обновить
12
0
Сергей @JCHouse

Фронтенд разработчик

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

Могут ли PWA (Progressive Web Apps) образца 2018 года составить достойную конкуренцию нативным приложениям?

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


Когда изменения происходят постепенно, шаг за шагом, порой бывает трудно заметить насколько они драматичны и всеобъемлющи. Казалось бы всего несколько лет назад web платформа проигрывала нативным приложением практически по всем фронтам, и пропасть между тем, что можно было сделать в браузере, и тем, что было доступно приложениями, загружаемым из магазинов, таких как Apple App Store или Google Play Store, была ужасающе огромной. Одним из свидетельств этой пропасти является то, что в 2007 году web по факту был основной платформой разработки приложений для первого iPhone, но эта платформа явно не взлетела. App Store же появился только год спустя со второй версии операционной системы, и сразу же случился бум нативных приложений, который и сформировал рыночный ландшафт таким, каким мы его знаем теперь.


Многое изменилось с тех пор, и web технологии на месте не стояли. Они шли по пути снятия ограничений, и то, что раньше было принципиально невозможно — работа оффлайн, фоновая синхронизация данных, push-нотификации, поддержка входа в один клик и оплаты с помощью кредитных карт, Apple Pay, Google Pay и других методов, встроенная в браузер — теперь реальность. Эти функции органично дополняют основную часть платформы — HTML/CSS и JavaScript, которая в последние годы развивалась более чем активными темпами. Например новый проект Houdini, который ещё находится на достаточно ранней стадии, снимает почти все ограничения на то, что можно сделать с помощью CSS, давая возможность среди прочего создавать свои лэйауты и использовать их наравне с Grid и Flexbox, и открывая программный доступ к внутренностям CSS движка. Но даже и без Houdini уже сейчас можно создавать CSS анимации, работающие со скоростью 60 FPS (frames per second).

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

Как работает JS: технология Shadow DOM и веб-компоненты

Время на прочтение14 мин
Количество просмотров43K
[Советуем почитать] Другие 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: пользовательские элементы

Сегодня, в переводе 17 части материалов, посвящённых особенностям всего, что так или иначе связано с JavaScript, речь пойдёт о веб-компонентах и о различных стандартах, которые направлены на работу с ними. Особое внимание здесь будет уделено технологии Shadow DOM.


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

Обзор новшеств ECMAScript 2016, 2017, и 2018 с примерами

Время на прочтение13 мин
Количество просмотров95K
Сложно уследить за новшествами различных версий ECMAScript, а ещё сложнее — найти полезные примеры их применения, не перекапывая горы информации. Поэтому сегодня мы публикуем перевод материала, автор которого проанализировал 18 новых возможностей ECMAScript, в число которых входят те, что имеются в уже вышедших стандартах ES2016 и ES2017, а также — те, которые должны появиться в стандарте ES2018. Автор этой статьи обещает, что каждый, кто её прочтёт, узнает много интересного и полезного о новых возможностях JavaScript.


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

Боб Дорф: Как работать над стартапом

Время на прочтение5 мин
Количество просмотров28K
Боб Дорф – известный предприниматель (вывел 8 компаний на IPO), консультант и ментор Стартап Академии, который начал свою карьеру в бизнесе, когда ему было 12 лет. Сегодня он является желанным участником многих конференций, потому что как никто другой знает, как правильно создавать успешные стартапы, прочно вставать с ними на ноги и превращать их к крупные компании.

Недавно Боб Дорф выступал на конференции Business of Software 2012 где рассказал об основных принципах жизни «здорового» стартапа. Вашему вниманию основные тезисы его выступления в которые сам искренне верю и стараюсь ежедневно использовать:
Читать дальше →
Всего голосов 17: ↑16 и ↓1+15
Комментарии6

Опасный target="_blank"

Время на прочтение2 мин
Количество просмотров200K
Большинство создают внешние ссылки через target="_blank" и не знают одного интересного нюанса — страница, на которую мы попадем таким образом, получит частичный контроль над ссылающейся на нее страницей через js свойство window.opener.

Через window.opener.location мы сможем сделать редирект на, к примеру, фишинговую страницу. Это своего рода tabnabbing, только более продвинутый. Так как жертва меньше всего ожидает подмены страницы, в открытой ранее, доверенной вкладке браузера.
Читать дальше →
Всего голосов 132: ↑126 и ↓6+120
Комментарии136

Как сделать многослойную Parallax иллюстрацию на CSS & JavaScript

Время на прочтение5 мин
Количество просмотров57K
image
Рисунок используемый для parallax эффекта. Автор Patryk Zabielski

Привет друзья, я покажу вам как создать простою многослойную иллюстрацию с глубиной, которая переходит к контенту. Мы будем использовать метод, в котором необходим только css и чистый JS(coffeescript) (Никаких jQuery!).

Этот урок для начинающих, с начальным знанием JS и CSS, так что я буду объяснять большинство вещей и ссылаться на внешние источники.

Финальное демо
Читать дальше →
Всего голосов 39: ↑27 и ↓12+15
Комментарии23

Десктопные приложения на JavaScript. Часть 2

Время на прочтение13 мин
Количество просмотров29K
Данная статья является продолжением статьи «Десктопные приложения на JavaScript. Часть 1». В предыдущей части мы рассмотрели следующее:
  • установка NW.js
  • сборка и запуск приложений на NW.js
  • основы работы с нативными контроллами (на примере создания меню)

В рамках статьи мы рассмотрим создание приложения для хранения паролей. Приложение относительно простое и является по большей части прототипом для реального. Однако при желании и наличии времени, его можно доработать и вполне использовать для повседневной работы.
Читать дальше →
Всего голосов 18: ↑16 и ↓2+14
Комментарии14

Аналоговые часы на HTML5 c логикой на JavaScript

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


Для кого и зачем эта статья?


Когда изучаешь новую технологию или язык программирования, основные понятия всегда носят относительно рутинный характер и поэтому, на мой взгляд, быстро отбивают желание обучаться у начинающих. Цель данной статьи — это заинтересовать и увлечь читателя изучением программирования на примере разработки элементарной графики в динамическом режиме. Статья подойдет для начинающих разработчиков, которые ознакомились с основами HTML5 и JavaScript, и которым наскучило видеть статический текст на страничке при выводе в консоль браузера массивов, объектов, результатов арифметических операций и т.д. Далее мы реализуем простейшую, но полезную для понимания языка анимацию.
Читать дальше →
Всего голосов 16: ↑7 и ↓9-2
Комментарии21

Несколько дельных советов по CSS

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

CSS Protips

Это современные решения типичных проблем, коллекция советов, которая поможет вам улучшить ваши профессиональные навыки CSS.

От переводчика

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



Cодержание


  1. Используем псевдо-класс :not для задания рамки навигации
  2. Добавляем межстрочный интервал элементу body
  3. Центрируем по вертикали все что угодно
  4. Правильно разделяем запятыми элементы списков
  5. Отрицательный порядковый номер в nth-child
  6. Используем SVG-логотипы
  7. Аксиоматический CSS
  8. Максимальная высота у CSS-слайдера
  9. Наследуем box-sizing
  10. Одинаковая ширина ячейки таблицы
  11. Динамические внешние отступы при помощи flexbox
  12. Используем селектор атрибутов пустых ссылок
  13. Стили по умолчанию для обычных ссылок
Читать дальше →
Всего голосов 26: ↑21 и ↓5+16
Комментарии28

Как проектировать для людей с цветовой слепотой

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


Примерно 8-10% мужчин и 0.5% женщин имеют ту или иную форму дальтонизма. То есть, на каждые 100 посетителей вашего сайта будет 10 таких, которые видят цвета иначе. И как убедиться, что ваш интерфейс одинаково доступен для любых пользователей? Есть много противоречивой информации на тему того, каким должен быть дизайн для дальтоников. Мы сделали выжимку с основными принципами, которые стоит учитывать в дизайне, чтобы добиться цветовой различимости интерфейса.
Читать дальше →
Всего голосов 19: ↑19 и ↓0+19
Комментарии37

Программирование микрокомпьютера LEGO NXT Mindstorms 2.0. Введение

Время на прочтение6 мин
Количество просмотров51K
Здравствуйте. В своих статьях я хочу Вас познакомить с основами программирования микрокомпьютера LEGO NXT Mindstorms 2.0. Для разработки приложений я буду использовать платформы Microsoft Robotics Developer Studio 4 (MRDS 4) и National Instruments LabVIEW (NI LabVIEW). Будут рассматриваться и реализовываться задачи автоматического и автоматизированного управления мобильными роботами. Двигаться мы будем от простого к сложному.



Читать дальше →
Всего голосов 25: ↑21 и ↓4+17
Комментарии31

Микросервисы без серверов (облачный вариант)

Время на прочтение20 мин
Количество просмотров23K
Здравствуйте, дорогие читатели!

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

Много Java, JavaScript, схем, рассуждений и очень много текста
Читать дальше →
Всего голосов 17: ↑11 и ↓6+5
Комментарии8

Создание десктопного приложения с помощью Electron и веб-технологий

Время на прочтение4 мин
Количество просмотров67K
Знакомство с Electron

Официальная страница проекта Electron.

Изначально Electron был разработан для редактора Atom компанией GitHub.

Electron (ранее известный как Atom Shell) позволяет нам создавать кроссплатформенные приложения, используя HTML, CSS и JavaScript. Что является большим плюсом для команд, которые занимаются веб-разработкой. Отпадает надобность искать новых разработчиков для создания десктопных версий уже существующих проектов.

Electron являет собой прекомпилированый бинарник и библиотеки, нужные для работы приложения и доступа к native API операционной системы. Он включает в себя Node.js, направленный на работу в десктопной среде, и минимальную версию браузера Chromium, контролируемого JavaScript.
Читать дальше →
Всего голосов 28: ↑24 и ↓4+20
Комментарии33

Обзор ES6 в 350 пунктах. Часть вторая

Время на прочтение1 мин
Количество просмотров19K
Моя серия заметок ES6 in Depth, состоящая из 24 записей, описывает большинство синтаксических изменений и нововведений в ES6. В этой публикации я подведу итог всего изложенного в предыдущих статьях, чтобы дать возможность посмотреть еще раз на всё вместе.


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

Обзор ES6 в 350 пунктах. Часть первая

Время на прочтение6 мин
Количество просмотров57K
Моя серия заметок ES6 in Depth, состоящая из 24 записей, описывает большинство синтаксических изменений и нововведений в ES6. В этой публикации я подведу итог всего изложенного в предыдущих статьях, чтобы дать возможность посмотреть еще раз на всё вместе. Также я добавил ссылки на мой блог, чтобы в случае необходимости сразу же можно было посмотреть подробнее.



Я слышал, вы любите маркированные списки, так что вот вам статья со списком, который состоит из нескольких сотен элементов.
Читать дальше →
Всего голосов 37: ↑34 и ↓3+31
Комментарии58

Обновление React компонентов с сохранением состояния в режиме реального времени для Browserify

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


Всем доброго времени суток!
Давайте немного поговорим о DX (Developer Experience) или «Опыте разработки», а если конкретнее — об обновлении кода в режиме реального времени с сохранением состояния системы. Если тема для вас в новинку, то перед прочтением советую ознакомиться со следующими видео:

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




Введение: Как это работает?


Прежде всего стоит понимать, что реализация подобной функциональности подразумевает под собой решение ряда задач:
— Отслеживание изменений файлов
— Вычисление патча на основании изменений файлов
— Транспортировка патча на клиент (в браузер, например)
— Обработка и применение патча к существующему коду
Но обо всём по порядку.
Читать дальше →
Всего голосов 8: ↑8 и ↓0+8
Комментарии8

Flux в картинках

Время на прочтение5 мин
Количество просмотров49K
Нам в Хекслете нравится ReactJS и Flux. Нам кажется, что это правильное направления развития. Мы любим функциональное программирование и чистые функции, и когда сложные архитектуры упрощаются за счет подходов, связанных с ними — это круто. По Реакту уже есть немало ресурсов в интернете, в том числе наш практический курс по React JS. Последний урок в этом курсе называется «Однонаправленное распространение данных», и там мы подходим к интересной теме, которая лежит в основе архитектуры Flux.

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

Мы используем React и Flux в своей браузерной среде разработки Hexlet IDE (она в опен-сорсе), в которой учащиеся выполняют практические задания. Flux одновременно очень популярен и очень непонятен для многих в мире веба. Сегодняшний перевод — попытка объяснить Flux на пальцах (ну, то есть картинках).

Проблема


Вначале нужно понять, какую проблему решает Flux.


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

Клиентская точка отказа: SPOF за счет внешних JS-библиотек

Время на прочтение4 мин
Количество просмотров8.5K
В стремлении к быстрому сайту многие разработчики упускают один важный момент: клиентскую (фронтендную) точку отказа (frontend SPOF – single point of failure). Причем, почти все инструменты тестирования скорости загрузки сайта также не выявят потенциальных проблем.
Читать дальше →
Всего голосов 14: ↑12 и ↓2+10
Комментарии12

Level Up для новичков: gulp и requirejs

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


Предисловие


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

Под красотой кода я (полагаю, и многие другие) понимаю:

  • Читабельность
  • Простоту изменения и дополнения
  • Возможность другим разобраться, как это работает

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

Давайте разберёмся с двумя инструментами, которые не смотря на свою простоту повысят презентабельность исходников вашего приложения и наведут порядок в голове.
Читать дальше →
Всего голосов 27: ↑20 и ↓7+13
Комментарии71

Внедрение компонентого подхода в вебе: обзор веб-компонентов

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


Четыре из пяти самых запрашиваемых новых платформенных возможностей Edge на User Voice (Shadow DOM, Template, Custom Elements, HTML Imports) относятся к семейству API, называемых веб-компонентами (Web Components). В этой статье мы хотим рассказать о веб-компонентах и нашем взгляде на них, некоторой внутренней кухне, для тех, кто еще с ними не знаком, а также порассуждать на тему того, куда все это может эволюционировать в будущем. Это довольно-таки длинный рассказ, поэтому откиньтесь назад, возьмите кофе (или не кофеиновый напиток) и начинайте читать.

Содержание:
  • Внедрение компонентов: старая практика проектирования, ставшая новой для веба
  • Как разбивать на компоненты
  • Это все не в первый раз: предыдущие подходы к внедрению компонентов
  • Современные веб-компоненты
  • Веб-компоненты: следующее поколение

Читать дальше →
Всего голосов 19: ↑17 и ↓2+15
Комментарии6
1
23 ...

Информация

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