Привет. 21 февраля в офисе Авито пройдёт Moscow JS 44, неформальная встреча JavaScript-разработчиков. Обсудим инструменты для бойлерплейтинга, форматы сжатия протокольного уровня в http, а также Acceptance testing и BDD. Регистрируйтесь на встречу и приглашайте коллег. Под катом — тезисы выступлений, ссылки на регистрацию (upd: завершена, закончились места) и видеотрансляцию митапа.

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

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

Привет, хабровчанин! Дизайнеры люди идейные, а заказчики с их бизнес-требованиями, тем более.

Представь, что ты сваял свой самый лучший UIkit на свете на самом крутом %вставить свое% JS фреймворке. Казалось бы, там есть все, что нужно проекту. Теперь-то ты сможешь пить кофе, а все новые задачи закрывать накидыванием компонентов на страницу. Еще лучше, если ты нашел такой UIkit на помойке на просторах NPM и он идеально соответствует текущему UX/UI и его потребностям. Фантастика!

И действительно… кого я обманываю? Твое счастье, скорее всего, будет недолгим. Ведь когда дизайнер прибежит с талмудом новых UI-решений для очередной страницы или «спец-проекта», что-то по-любому пойдет не так.

В этот момент перед разработчиком встает вопрос «DRY или не DRY»? Стоит ли как-то кастомизировать существующие компоненты? Да еще так, чтобы не отхватить регрешн на существующих кейсах. Или же действовать по принципу «работает — не трогай» и написать новые компоненты с нуля. При этом, раздувая UIkit и усложняя поддержку.

Если ты, как и многие, бывал в такой ситуации, загляни под кат!

В ближайших версиях Firefox и Chromium могут произойти важные изменения.

Во-первых, в Firefox 66 для десктопов по умолчанию заблокируется автоматическое воспроизведение видео и звука на всех страницах. Блог Mozilla Hacks заранее предупреждает об этом разработчиков. Воспроизведение видео и звука разрешается только через HTMLMediaElement API и только после взаимодействия пользователя со страницей (щелчок мыши, нажатие кнопки или прикосновение к тачскрину).

В Chromium могут произойти ещё более интересные изменения.

Во многих проектах существует процессы аутентификации (в той или иной степени). Написано много “бест практис” во всех известных технологиях и т.д. и т.п.

Но вот пользователь сделал логин и? Ведь он далеко не всё может сделать. Как определить что он может видеть, а что нет. На какие кнопки имеет право нажимать, что может менять, что создавать или удалять.

В этой статье я хочу рассмотреть подход к решению этих проблем на веб аппликации.

Сталкивались ли вы с ситуацией, когда текст и блоки, которые прекрасно вмещаются в макете фотошопа, почему-то упрямо не хотят слушаться в верстке – не вмещаются в заданную макетом ширину? При этом и дизайнер, и верстальщик используют одинаковую сетку, например, сетку Bootstrap 3.

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

Примечание переводчика

Большинство современных программных продуктов не являются монолитными, а состоят из множества частей, которые взаимодействуют друг с другом. При таком положении дел необходимо, чтобы общение взаимодействующих частей системы происходило на одном языке (притом что сами эти части могут быть написаны на разных языках программирования и выполняться на разных машинах). Упростить решение этой задачи помогает gRPC — open-source-фреймворк от Google, выпущенный в 2015 году. Он решает сразу ряд проблем, позволяя:

• использовать язык Protocol Buffers для описания взаимодействия сервисов;
  
• генерировать программный код на основании описанного протокола для 11 разных языков как для клиентской части, так и для серверной;
  
• реализовать авторизацию между взаимодействующими компонентами;
  
• использовать как синхронное, так и асинхронное взаимодействие.
  

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

По нашей просьбе Хабр создал хаб Kubernetes и нам приятно разместить первую публикацию в нём. Подписывайтесь!

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

Эта история началась примерно 1.5 года назад. Связана она с проигрыванием музыки в различных браузерах и платформах, на которых они запускаются. Путь полный “боли и страдания” осознания того, что легкая на первый взгляд задача может оказаться не такой уж и легкой, а “незначительные” детали, которым не придаешь значения в самом начале, могут повлиять на всё.

Привет, Хаброжители! Мы издали книгу в которой дается обзор фреймворка Spring 5 и паттернов проектирования для него. Объясняется принцип внедрения зависимостей (dependency injection), играющий ключевую роль при создании слабосвязанного кода во фреймворке Spring. Затем рассматриваются классические паттерны «Банды четырех» при проектировании приложений на Spring. В следующих частях книги автор рассматривает паттерны аспектно-ориентированного программирования (AOP), шаблоны JDBC, позволяющие абстрагировать доступ к базе данных. В заключительных главах книги автор исследует работу с MVC, реактивные шаблоны проектирования и паттерны проектирования, применяемые при конкурентном и параллельном программировании в Spring.

Предлагаем ознакомиться с отрывком «Паттерн «Объект доступа к данным»»

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

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

→ Часть 1: основы
→ Часть 2: термины и концепции
→ Часть 3: файлы Dockerfile
→ Часть 4: уменьшение размеров образов и ускорение их сборки
→ Часть 5: команды
→ Часть 6: работа с данными



Если вы пока не знаете о том, что такое Docker, сейчас у вас есть шанс сделать первый шаг к пониманию этой платформы. А именно, освоив этот материал, вы разберётесь с основами Docker и попутно приготовите пиццу.

Перед вами история интегрирования БЭМ-методологии в React-вселенную. Материал, который вы прочитаете, построен на опыте разработчиков Яндекса, развивающих самый масштабный и нагруженный сервис в России — Яндекс.Поиск. Мы никогда раньше не рассказывали настолько подробно и глубоко о том, почему делали так, а не иначе, что нами двигало и чего мы действительно хотели. Внешнему человеку доставались сухие релизы и обзоры на конференциях. Лишь в кулуарах можно было услышать нечто подобное. Я как соавтор негодовал из-за скудности информации снаружи каждый раз, когда рассказывал о новых версиях библиотек. Но в этот раз мы поделимся всеми подробностями.

Все слышали о методологии БЭМ. CSS-селекторы с подчёркиваниями. Компонентный подход, о котором говорят, имея в виду способ написания CSS-селекторов. Но про CSS в статье не будет ни слова. Только JS, только хардкор!

Для кого я пишу? Для тех кто пишет на php (возможно также python, ruby) и слышал про Go, но ещё не решился его изучить детальнее. Я приведу доводы почему стоит изучать этот язык программирования и почему за ним будущее в веб-разработке.

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

Гуру информационных технологий и технический директор журнала Ars Technica Джейсон Марлин имеет за плечами более чем двадцатилетний опыт поддержки информационных инфраструктур – и, по его мнению, в этой области многое поменялось

Игра The Pit, работавшая как BBS door. На этом скриншоте Ли Хатчинсон атакует вот этих ребят. Или они его.

В 1980-х я рос истинным нёрдом – не в хипстерском смысле, а в смысле того, что я везде таскал с собой пятикилограммовый номер журнала Computer Shopper (ага, эти издания были реально большими). Я подсел на бибиэски (Bulletin Board Systems) к десяти годам. Неудивительно, что в итоге я оказался техническим директором сайта, освещающего вопросы науки и технологий.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Перед тем как преступить к написанию данной статьи, я решил посетить страницу где генерируется Google Translate Widget, чтобы узнать о возможных изменениях и увидел данное сообщение:

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

Советуем пользователям переводить веб-страницы с помощью браузеров, имеющих встроенную функцию перевода.

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

Как будет выглядеть наш пример:

Несколько предложений расширяют существующий синтаксис классов в JavaScript новой функциональностью. Эта статья объясняет новый синтаксис публичных полей классов в V8 v7.2 и Chrome 72, а также грядущих приватных полей.

Вот пример кода, который создает экземпляр класса IncreasingCounter:

const counter = new IncreasingCounter();
counter.value;
// logs 'Getting the current value!'
// → 0
counter.increment();
counter.value;
// logs 'Getting the current value!'
// → 1

Отметим, что обращение к value выполняет некоторый код (вывод сообщения в лог) перед тем, как вернуть значение. Теперь спросите себя: как бы Вы реализовали этот класс на JavaScript?

Небольшая предыстория

После лекции на HighLoad++ 2017. Я посмотрел этот доклад, “Как мы админа увольняли”, в записи. Докладчик сказал, что все web компании испытывает проблемы с паролями, и у меня появилась идея как это решить. Скорее всего кто-то уже сделал, но, если честно, я не знаю просто хочу описать, потом может, кто-то сделает или я как-нибудь сам сделаю. Надеюсь, если кто-то решит сделать, что-то подобное это будет opensource.

Собственно описание проблемы и способа её решения

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

Есть два варианта решения такой проблемы.

1. Выкладывать все изменения на сайт лично руководителю компании.
2. Что-то придумать и сделать.

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

Что делать определились, теперь нужно определиться как это сделать.

Вот сразу самая простая идея, а почему не сделать proxy? Ну скорее всего супер-прокси. Схема работы в принципе проста и я её нарисовал ниже.


Рисунок 1 – общая схема работы системы

Как видно из схемы и самой идеи, главным элементом здесь будет прокси сервер.

Его задачи следующие:

• Соответственно принимать трафик, или даже стоит работать на уровне команд SSH и SFTP, для начала, и отправлять ответ от сервера клиента, специалисту.
• Аутентификация и авторизация специалиста
• Проверка легитимности команд, это можно сделать позже.

Мысль о том, что в разработке любой более-менее сложной бизнес-логики приоритет должен отдаваться композиции объектов, нежели наследованию популярна в среде разработчиков программных продуктов самых разных типов. На очередной волне популярности функциональной парадигмы программирования, запущенной состоявшимся успехом ReactJS, разговоры о преимуществах композиционных решений пришли и во фронтенд. В данном посте есть немного раскладки по полкам теории о композиции объектов в Javascript, конкретный пример, его разбор и ответ на вопрос сколько стоит смысловая элегантность для пользователя (спойлер: немало).


Василий Кандинский — «Композиция X»