Доброго времени суток, друзья!

Представляю вашему вниманию перевод замечательной статьи Джейка Арчибальда «Offline Cookbook», посвященной различным вариантам использования сервис-воркера (ServiceWorker API, далее по тексту — просто воркер) и интерфейса кэширования (Cache API).

Предполагается, что вы знакомы с основами названных технологий, потому что кода будет много, а слов мало.

Если не знакомы, то начните с MDN, а затем возвращайтесь. Вот еще неплохая статья про сервис-воркеры специально для визуалов.

Без дальнейших предисловий.

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

Однако все более заметным становится game-based learning — тип игрового процесса, в результате которого пользователь получает знания или навыки. Исследователи говорят о нем как о самом быстрорастущем тренде в секторе образования по всему миру, в частности — в школах, а общий объем рынка к 2025 году оценивают в $28,8 млрд.

Рассмотрим примеры GBL-проектов и разберемся, в каких случаях уместнее применять тот или иной подход.

Магическая математика

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

Профессиональному Node.js-разработчику нужно быть в курсе того, что происходит в сфере пакетов, предназначенных для этой платформы. Ему нужно знать о том, что вышло свежего, и о том, какие пакеты, используемые для решения различных задач, пользуются популярностью. Дело тут в том, что разработка ПО в наши дни зависит от библиотек. Знание хороших библиотек способствует повышению производительности труда программиста и помогает ему разрабатывать качественные приложения. Сегодня мы поговорим о 23 полезных пакетах для Node.js.

Краткое описание технологии

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

Для установления соединения WebSocket клиент и сервер используют протокол, похожий на HTTP. Клиент формирует особый HTTP-запрос, на который сервер отвечает определенным образом.

Примечания

Несмотря на «похожесть» новых запросов и ответов на запросы и ответы протокола HTTP, они таковыми не являются. Например, в запросе есть тело, но в заголовках поле «Content-Length» отсутствует (что нарушает соглашения HTTP). Подробнее об этом можно прочитать в Википедии.

Одним из главных преимуществ технологии — это ее простота. На клиенте и сервере есть всего 4 события для обработки:

1. connection
2. error
3. message
4. close

Почему Websocket?

Кроме ws существуют еще два способа непрерывной передачи данных: Server-Sent Events (SSE) и Long Polling.

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

Некоторое время назад передо мной встала задача, в целях защиты коммерческой тайны своих клиентов, отказаться от использования сторонних облачных сервисов.

Первое и самое логичное – предоставить им доступ на уже имеющийся в наличии Synology.

И тут возникло желание сделать это красиво, не отдельным логином/паролем, а с использованием уже выданных ранее от личного кабинета. «Бесшовный» переход из личного кабинета на сервисы Synology – то, что нужно.

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

Доброго времени суток, друзья!

Представляю вашему вниманию перевод Руководства по Node.js в формате одностраничного прогрессивного адаптированного приложения.

Данный формат означает следующее:

• SPA — новые данные (разделы или главы руководства) загружаются без перезагрузки страницы — реализовано с помощью динамического импорта
• PWA — приложение можно установить на мобильный телефон или компьютер; приложение работает даже при отсутствии подключения к сети — реализовано с помощью сервис-воркера и кэширования
• mobile-first — приложение предназначено для использования, в первую очередь, на смартфонах, но хорошо выглядит и на широких экранах

Посмотреть и установить приложение можно ЗДЕСЬ.

Код проекта на GitHub

Иногда в приложении требуется шаблоны для различных страниц, чтобы не копировать код от компонента к компоненту, мы прописываем шаблон в основном компоненте (он же, обычно, App.vue) и с помощью <router-view> подставляем в него различные вьюшки.

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

А что, если нам необходимо сделать несколько шаблонов для разных страниц или состояний приложения? Этим мы сейчас и займемся.

Вы просили, и мы сделали! Теперь наши прямые эфиры проходят во всех соцсетях сразу — завтрашний стрим можно будет посмотреть на нашем youtube-канале, в ВК, Facebook и в Инстаграме



СЕГОДНЯ, 28 июля, в 20:00 пройдет прямой эфир с Александром Высоцким — ведущим PHP-разработчиком в лондонском офисе Badoo, работает в команде антиспама. Ну что, готовы поговорить про PHP?

Приветствую. Представляю вашему вниманию перевод статьи «Keep the Footer at the Bottom: Flexbox vs. Grid», опубликованной 8 апреля 2020 года автором Stephanie Eckles

Это первая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.

В течение многих лет я регулярно возвращалась к этой статье Matthew James Taylor за способом удержания футера страницы в нижней её части, даже если высота основного содержимого меньше высоты окна. Данный метод основывался на явном задании высоты футера, что являлось не масштабируемым, но очень хорошим решением (до появления Flexbox).

Приветствую. Представляю вашему вниманию перевод статьи «Equal Height Elements: Flexbox vs. Grid», опубликованной 9 апреля 2020 года автором Stephanie Eckles

Это вторая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.

Однажды (приблизительно 7 лет назад) я написала JQuery-плагин, который работал с тремя колонками, расположенными на одной строке. А именно, рассчитывал и задавал одинаковую высоту для элементов, независимо от количества содержимого в каждом из них. Метод вёрстки на float, который был тогда основным, не мог справиться с этой проблемой.

Привет, Хабр!

Хорошие новости для тех, кто следил за историей переиздания книги Рудольфа Свореня «Электроника шаг за шагом» — книга вот-вот, на днях, покинет типографию и попадёт в руки читателей. Почему так долго пришлось ждать новое издание книги? Что изменилось в тексте? А иллюстрации всё те же? Что со схемами  — по-прежнему, на МП39, с плюсовой «землей»? Будет ли электронная версия книги? На эти и другие вопросы, я попытаюсь ответить ниже.

Существует много CSS-свойств, о которых некоторые дизайнеры просто не знают. Или — знают, но забывают использовать эти свойства там, где они способны принести большую пользу. Некоторые из этих свойств могут помочь отказаться от использования JavaScript ради достижения некоего результата, некоторые позволяют экономить время за счёт написания меньших объёмов CSS-кода. Я, занимаясь фронтенд-разработкой, постоянно натыкаюсь на подобные свойства. Однажды я подумал о том, чтобы взять и составить список CSS-свойств, интересных, но используемых редко. Так и родилась эта статья.

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

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

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

Для наглядности я создал демо-сайт. Вот он.

Нажмите на каждую из трёх кнопок Page → На всех трёх один и тот же идентификатор.
Закройте окно браузера и снова откройте сайт → Идентификатор не поменялся.
Выключите компьютер и зайдите на эту веб-страницу завтра → Идентификатор всё тот же.
Проверьте ваши куки → Демо-сайт не записывает куки и не считывает их.
Проверьте URL → Сомнительные строки запроса отсутствуют.

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

Итак, MVP. Достаточно заезженная тема, на мой взгляд. Каждый, кто хоть как-то связывал себя с разработкой программного обеспечения за последние 5 лет, с 99% вероятностью слышал эти 3 буквы. Но даже несмотря на обилие информации, народ все равно наступает на грабли «идеального продукта» при создании проектов.

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

Начну с вирусной зарисовки пути развития стартапа по принципу MVP, которая гуляет по интернету и которую вы наверняка встречали.

90% авторов используют иллюстрацию в своих публикациях в буквальном смысле, что вводит в заблуждение читателей.

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

Как я с этим боролся и что получилось в итоге?

Фридайвинг — ныряние на глубину без акваланга. Ныряльщик ощущает на себе закон Архимеда: он вытесняет некоторый объём воды, который выталкивает его обратно. Поэтому первые несколько метров даются тяжелее всего, но потом сила давления толщи воды над тобой начинает помогать двигаться глубже. Этот процесс напоминает изучение и погружение в системы типов TypeScript — по мере погружения становится немного легче. Но надо не забыть вовремя вынырнуть.


Фотография с сайта One Ocean One Breath.

Михаил Башуров (saitonakamura) — Senior Frontend Engineer в компании WiseBits, фанат TypeScript и фридайвер-любитель. Аналогии изучения TypeScript и ныряния на глубину не случайны. Михаил расскажет, что такое discriminated unions, как использовать вывод типов, зачем нужна номинальная совместимость и брендирование. Задержите дыхание и погружайтесь.

React-фронтенд Execute Program перевели с JavaScript на TypeScript. А бэкенд, написанный на Ruby, трогать не стали. Однако проблемы, связанные с этим бэкендом, заставили разработчиков проекта задуматься о переходе с Ruby на TypeScript. Перевод материала, который мы сегодня публикуем, посвящён рассказу о портировании бэкенда Execute Program с Ruby на TypeScript, и о том, какие проблемы это помогло решить.



Пользуясь Ruby-бэкендом, мы иногда забывали о том, что некое свойство API хранит массив строк, а не простую строку. Иногда мы меняли фрагмент API, обращения к которому выполнялись в разных местах, но забывали обновить код в одном из этих мест. Это — обычные проблемы динамического языка, характерные для любой системы, код которой покрыт тестами не на 100%. (Такое, хотя и реже, происходит и в случае полного покрытия кода тестами.)

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

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

Вот ссылка на репозиторий

Пользуйтесь на здоровье. Можете слать мне пулл-реквесты и задавать вопросы. Фидбек приветствуется.

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

Так какого же чёрта моё прекрасное IT превращается в детский сад «Весёлый Програм-Мишка»?

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

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