Веб-разработка *

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

Что такое Houdini?

Houdini (Гудини) — коллекция API браузера, значительно улучшающих процесс веб разработки, включая разработку стандартов CSS. Разработчики смогут расширять CSS, используя JavaScript, влияя на рендеринг CSS и указывая браузеру, как следует применять стили. Это обеспечит значительное повышение производительности и стабильности, нежели использование полифилов.

Гудини состоит из двух групп API — высокоуровневые API и API низкого уровня.

API высокого уровня связаны с процессом рендеринга (стиль — макет — рисование — композиция). Эта группа включает:

• Paint API — позволяет расширять CSS на шаге (имеется ввиду стадия рендеринга) отрисовки визуальных элементов (цвет, фон, границы и т.д.).
• Layout API — позволяет расширять CSS на шаге определения размеров, позиции и выравнивания элементов.
• Animation API — «точка расширения» на шаге отображения и анимирования элементов.

Низкоуровневые API являются основой для высокоуровневых и включают в себя:

• API типизированной объектной модели (Typed Object Model)
• API пользовательских свойств и значений (Custom Properties & Values)
• API метрик шрифта (Font Metrics)
• Ворклеты (Worklets)

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

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

В исследовании, которое приведено далее, в основном использованы зарубежные данные. Это уместно: распространение COVID-19, как и экономические последствия от него, там уже более масштабные и измеряемые.

Привет! Меня зовут Евгений, я Python-разработчик. Последние полтора года наша команда стала активно применять принципы Clean Architecture, уходя от классической модели MVC. И сегодня я расскажу о том, как мы к этому пришли, что нам это дает, и почему прямой перенос подходов из других ЯП не всегда является хорошим решением.

Бэкдор в собственном коде, который может незаметно взаимодействовать с операционной системой, это один из самых страшных кошмаров любого разработчика. В настоящий момент в npm имеется более 1.2 миллиона общедоступных пакетов. За последние три года зависимости проектов превратились в идеальную цель для киберпреступников. Экосистема npm может оказаться на удивление хрупкой в том случае, если сообщество разработчиков не обратит пристальное внимание на безопасность. В качестве доказательств этой мысли достаточно вспомнить о тайпсквоттинге и об инциденте с npm-пакетом event-stream.



Автор статьи, перевод которой мы сегодня публикуем, хочет, в образовательных целях, рассказать о том, как создавать бэкдоры для платформы Node.js.

Год назад, 21 марта 2019, в баг баунти программу Mail.ru на HackerOne пришел очень хороший багрепорт от maxarr. При внедрении нулевого байта (ASCII 0) в POST-параметр одного из API-запросов веб-почты, который возвращал HTTP-редирект, в данных редиректа виднелись куски неинициализированной памяти, в которых чаще всего раскрывались фрагменты из GET-параметров и заголовков других запросов к тому же серверу.

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

Я подумал, что кому-то ещё это могло бы оказаться полезным и решил оформить в виде статьи на Хабр.

Сердце любого современного сайта или браузерного приложения (что SPA, что PWA, что любые другие три буквы) — это его State, или состояние.

Мы можем сколько угодно спорить о том, что лучше — React, Vue, Svelte, Angular, можем продолжать пользоваться jQuery, но в действительности это не так важно. Это та часть нашего приложения, которое мы видим — его “мышцы“ и “кожа”. Но то, как вы думаете — какими терминами оперируете, какие механики используете для даже визуализации в голове того, как в вашем приложении “текут” данные — все это идет из его скелета. Из state manager-а.

Помните, пару лет назад у нас была усталость от JavaScript-а? Сейчас я вижу у огромного количества людей усталость от state manger-ов. Redux? Да, да and да. RxJS? Тоже. MobX? Если он такой простой — блин, почему у него есть в документации страница западни.html?

Ответ “почему многим так тяжело” есть, но сначала надо точно сформулировать проблему.

Выбирая state manger — мы выбираем образ мышления. Вариантов сейчас много, но самые популярные подходы бьются на 3 группы:

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



Чтобы он прошел плюс-минус ровно, все минувшие выходные мы учились кормить людей пиццей дистанционно, устраивать распределенные холивары голосом, не перегревать ноутбуки, с которых идет стрим на Youtube, и ловили другие баги формата. А параллельно обнаруживали у онлайна свои плюсы: например, возможность привлечь экспертов из разных стран и городов и разыграть редчайшего слона.

TypeScript позволяет автоматизировать множество задач, которые, без использования этого языка, разработчикам приходится решать самостоятельно. Но, работая с TypeScript, нет необходимости постоянно использовать аннотации типов. Дело в том, что компилятор выполняет большую работу по выводу типов, основываясь на контексте выполнения кода. Статья, перевод которой мы сегодня публикуем, посвящена достаточно сложным случаям вывода типов, в которых используется ключевое слово infer и конструкция as const.

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

Меня зовут Аскар Камалов, год назад я присоединился к команде видеотехнологий Яндекса. Сегодня я коротко расскажу читателям Хабра о том, как с помощью распараллеливания процесса кодирования нам удалось в разы ускорить доставку видео до пользователя.

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

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

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

Мы в «Битрикс24» очень активно используем Amazon Web Services, и в этой статье я расскажу о нескольких возможностях AWS, которые помогут вам сократить ваши расходы.

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

Одна из наиболее заметных сильных сторон TypeScript — это поддержка некоторых из новейших возможностей, описанных в спецификации ECMAScript. Когда разработчик обновляется до новой версии TypeScript, это означает, что в его распоряжении оказываются и новые возможности JavaScript. Причём, использование этих возможностей не означает потенциальных проблем с совместимостью. TypeScript, помимо внедрения новейших возможностей JavaScript, заметен ещё и тем, что создатели языка постоянно представляют сообществу TS-программистов что-то новое, призванное повысить удобство работы. Сюда входят, например, вспомогательные инструменты для рефакторинга кода, средства для переименования сущностей и для поиска мест, где они используются в программах.



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

Можно бесконечно холиварить о том, является ли GitLab хорошим продуктом. Лучше посмотреть на цифры: по итогам раунда инвестирования оценка GitLab составила 2,7 млрд долларов, в то время как предыдущая оценка была $1,1 млрд. Это означает бурный рост и то, что компания будет нанимать все больше и больше фронтенд-разработчиков.

Так выглядит история появления фронтенда в GitLab.



Это график количества фронтендеров в GitLab, начиная с 2016 года, когда их не было вообще, и заканчивая 2019-м, когда их стало уже несколько десятков. Но сам GitLab существует 7 лет. Значит, до 2017 года основной код на фронтенде писали бэкенд-разработчики, хуже того, бэкенд-разработчики на Ruby on Rails (ни в коем случае никого не хотим обидеть и ниже поясним, о чем идет речь).

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

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

Год назад я понял, что хочу создать собственный кластер Kubernetes. Я — разработчик программного обеспечения. Обычно я либо использую локальный кластер, состоящий из одного узла, либо применяю удалённый многоузловой кластер для тестирования своих проектов. В случае работы с кластером, состоящим из одного узла, я обычно полагаюсь на Minikube, хотя тут есть и другие решения, вроде проекта Kind, который может эмулировать наличие в кластере нескольких узлов. Поддержка нескольких узлов может появиться и в Minikube.

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



Уже написано множество замечательных руководств, посвящённых созданию многоузловых кластеров Kubernetes с использованием одноплатных компьютеров. Во многих из таких руководств в роли SBC применяется Raspberry Pi. Я, видя это, решил пойти по пути наименьшего сопротивления и тоже остановил свой выбор на этом компьютере. Платформа Raspberry Pi зарекомендовала себя как недорогое и доступное решение.

Надо отметить, что выбор этой платформы предусматривает некоторые компромиссы. Например, Broadcom и Raspberry Pi Foundation не лицензировали криптографические расширения ARMv8 (это нужно для аппаратного ускорения поддержки AES). Ещё одним неоднозначным решением является использование microSD-карт в виде стандартного носителя информации, с которого загружается операционная система.

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

Довольно много уже было сказано о популярности NodeJS. Рост количества приложений очевиден – NodeJS довольно прост в освоении, имеет огромное количество библиотек, а также динамично развивающуюся экосистему.

Мы подготовили рекомендации для NodeJS разработчиков, основываясь на OWASP Cheat Sheets, которые помогут вам предусмотреть проблемы с безопасностью при разработке приложений.

Рекомендации к безопасности NodeJS приложений можно разделить на следующие категории:

• Безопасность при разработке приложения;
• Безопасность сервера;
• Безопасность платформы;

В CSS есть особая функция calc(), применяемая для выполнения простых вычислений. Вот пример её использования:

.main-content {
  /* Вычесть 80px из 100vh */
  height: calc(100vh - 80px);
}

Здесь с CSS-кодом, в котором используется calc(), можно поэкспериментировать.



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

Свежая подборка со ссылками на новости и материалы. В выпуске: обновления PHP и Composer 1.10, переносы конференций, 3 новых RFC предложения из PHP Internals, порция полезных инструментов, видео, подкасты и многое другое.

Приятного чтения!

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