Всем привет! Меня зовут Роман, и сегодня я поделюсь своим опытом работы в распределенной команде верстки. Расскажу о процессах, которые мы построили, и как команда из четырех человек покрывает потребности в верстке целого подразделения, состоящего из 30+ продуктов и 20+ продуктовых команд.

Еще расскажу о том, как:

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

Как создать Простой веб-сервер, используя только стандартные инструкции nodejs

Часто для разработки MPA/SPA/PWA приложений требуется простой веб-сервер. Однажды, на одном большом митинге в ответ на вопрос: «Что ты делал?», я сказал, что поднимал веб-сервер для хостинга PWA приложения. Мы все долго смеялись и да, кстати, PWA это не клей. Как SPA — это не косметический салон. Все это виды веб-приложений. А SSR это не страна :-). Если запустить такое приложение просто открыв стартовую страницу index.html через браузер, оно не будет работать как должно, в лучшем случае мы получим оффлайн версию. Я люблю язык JavaScript и буду решать проблему, используя только доступные мне средства, так сказать из "коробки".

Ember Octane — это новая редакция фреймворка Ember.js, а также лучший способ для команд создавать амбициозные веб-приложения.

20 декабря вышла новая версия Ember 3.15. И это Octane! Любопытно, что это значит для веб-разработки? Этот пост поможет вам сориентироваться.

Мы с гуглотранслейтом усердно старались над переводом (особенно гуглотранслейт). Добро пожаловать под кат!

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

Сегодня мы продолжим наши изыскания на тему функционального программирования в разрезе EcmaScript, на спецификации которого основан JavaScript. В предыдущих статьях цикла были рассмотрены следующие темы:

1. Чистые функции, лямбды, имутабельность
2. Композиция, каррирование, частичное применение

После довольно удачной пробы пера с Ember Octane я решил (точнее мы с гуглотранслейтом решили) замахнутся на святое перевод туториала из официального руководства Ember.js

Как вы увидите из текста, данный туториал рассчитан на самых маленьких начинающих программистов. Что не мешает ему служить опытным бойцам прекрасной отправной точкой для знакомства фреймворком. Для полного прохождения этой игры туториала вам понадобится 1-2 часа времени. После этого вы сможете оценить Ember.js в его последней редакции Octane без необходимости читать обзоры позапрошлогодней свежести

Список тем, которые покрывает туториал внушает:

• Использование Ember CLI
• Навигация по структуре файлов и папок приложения Ember
• Создание и связь между страницами
• Шаблоны (templates) и компоненты
• Автоматизированное тестирование
• Работа с данными сервера
• Динамические сегменты в маршрутах
• Сервисы в Ember
• Библиотека Ember Data
• Адаптеры и сериализаторы
• Паттерн компонента-провайдера

Если вы согласны, что это вкуснота стоит траты 1-2 часов, добро пожаловать под кат!

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



Подробнее под катом.

PWA — прогрессивные веб-приложения.

Предупреждение. Эта статья не проспонсирована PWA. Все взгляды и мнения в статье принадлежат только её автору.

Progressive Web App или PWA — лучший способ для разработчиков заставить свои веб-приложения загружаться быстрее и быть более производительными. PWA — это веб-сайты, которые используют современные веб-стандарты, что дает возможность устанавливать их на компьютер или устройство пользователя. В работе они как приложения. Самый известный пример — это Twitter, который запустил сайт mobile.twitter.com как PWA на React и Node.js.

Когда я разбирался в том, как пользоваться методами JS-массивов .map(), .filter() и .reduce(), всё, что я читал, смотрел и слушал, казалось мне очень сложным. Эти концепции рассматривались как некие самостоятельные механизмы, ни к чему другому отношения не имеющие. Мне тяжело было ухватить их суть и их понять.



Я слышал, что это — базовые вещи, понимание которых является чем-то вроде границы между «посвящёнными» и «непосвящёнными». Хотелось бы мне тогда, чтобы мне сказали о них правду. Она заключается в том, что эти три метода символизируют то, что причины, по которым перебирают некие итерируемые объекты, часто вписываются в одну из трёх функциональных категорий.

В современных фронтенд-приложениях технология CSS-in-JS пользуется определённой популярностью. Всё дело в том, что она даёт разработчикам механизм работы со стилями, который удобнее обычного CSS. Не поймите меня неправильно. Мне очень нравится CSS, но создание хорошей CSS-архитектуры — задача не из простых. Технология CSS-in-JS может похвастаться некоторыми серьёзными преимуществами перед обычными CSS-стилями. Но, к сожалению, применение CSS-in-JS способно, в определённых приложениях, привести к проблемам с производительностью. В этом материале я попытаюсь разобрать высокоуровневые особенности наиболее популярных CSS-in-JS-библиотек, расскажу о некоторых проблемах, которые иногда возникают при их использовании, и предложу способы смягчения этих проблем.

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

В этот раз я хочу представить результаты тестирования виртуальных серверов от известных и крупных компаний: DigitalOcean, Vultr, Linode и Hetzner. Сделано 38 тестов для всех доступных локаций.



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

Когда я впервые столкнулся с написанием тестов для микросервиса, API которого был реализован согласно протоколу JSON-RPC, я осознал что построение качественных проверок для json элементов куда требовательнее, чем я считал ранее.

Ниже приведён простой пример.

От сервиса получен ответ:

{
  "result": 12,
  "id": 46929734,
  "jsonrpc": "2.0"
}

Что требуется проверить:

1. Ответ содержит элемент «jsonrpc» и его значение равняется «2.0»
2. Ответ содержит элемент «id» и его значение равняется аналогичному элементу переданному в запросе, в данный момент допустим это — 46929734

Ответ содержит элемент «result» и его значение равняется 12

Я думаю многие не раз слышали про Node js Streams, но так ни разу и не использовали, либо использовали, не задумываясь как же они работают, запайпили (pipe) стрим и норм. Давайте же разберемся что такое стримы, запайпить (pipe), чанки (chunk — часть данных) и все такое))

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

Давайте разберём несколько важных принципов создания самодокументируемого кода.

Периодически у разработчика возникает необходимость передать в запрос набор параметров или даже целую выборку «на вход». Иногда попадаются очень странные решения этой задачи.

Пойдем «от обратного» и посмотрим, как делать не стоит, почему, и как можно сделать лучше.

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

Прим. перев.: Это продолжение цикла статей от технологического евангелиста из AWS (Adrian Hornsby) про довольно новую ИТ-дисциплину — chaos engineering, — в рамках которой инженеры проводят эксперименты, призванные смягчить последствия сбоев в системах. Первый материал этого цикла рассказывал про концепцию chaos engineering в целом, второй — о том, как эта деятельность способствует позитивным культурным изменениям внутри организаций.



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

В официальной документации React Native, из раздела Getting Started, мы узнаем о том, что у нас есть два пути запуска мобильного приложения: expo и react-native cli. Пользователи Windows и Linux, а таких большинство, зайдя во вкладку Building Projects with Native Code и выбирая Target OS: iOS, встречают надпись, которая отправляет их на стартер Expo, но перед тем как ставить Expo, предлагаю ознакомиться с информацией в следующей таблице и поберечь свою голову не только от тех тумаков, что получил я:

Вывод типов в jscodeshift и TypeScript

Начиная с версии 6.0 jscodeshift поддерживает работу с TypeScript (далее TS). В процессе написания codemode-ов (преобразований), может потребоваться узнать тип переменной, которая не имеет явной аннотации. К сожалению, jscodeshift не предоставляет средств для вывода типов «из коробки».

Цель публикации — подкуинуть несколько идей, что можно повторить, чтобы повысить свое мастерство front-end разработчика. Это просто идеи, без исходников и туториалов, что немного усложняет задачу, но прививает более самостоятельный подход к обучению.

Предыдущий полный список идей: Front-end додзё: проекты для тренировки навыков разработчика (5 новых + 43 старых)

1.Динамическое меню

Посмотрите, как это круто, когда кликаешь в меню и контент уменьшается.



motrix.app

Чему научитесь:

• CSS переходы и анимации.
• Как изменить компоновку и содержимое.
• Как гармонично использовать HTML и JavaScript, чтобы добавить интерактивность на ваш сайт.

Привет, Хабр! Предлагаю Вашему вниманию перевод статьи «Make These Changes to Meet Web Design Accessibility Standards» автора Richard Pilton

Что такое доступность?

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

Плюсы доступности

Главное преимущество успешного проектирования доступной платформы — сделать ваше приложение или веб-сайт доступным для всех, но есть немало других преимуществ.