Как писать хорошие Dockerfiles? Рассказывают в блоге Docker: https://blog.docker.com/2019/07/intro-guide-to-dockerfile-best-practices/

Там советы, как уменьшить время сборки и размер образов, а также сделать поддержку докер-файлов удобнее. Демонстрируют на конкретном докер-файле из Java-проекта на основе Maven.

#docker

Недавно из беты вышла TestMace — бесплатная тулза для работы с API: https://client.testmace.com/ru/

Инструмент может упростить работу разработчикам и тестировщикам. С его помощью можно создавать и выполнять единичные запросы и их последовательности, писать тесты, документировать API. Если у вас есть какие-то наработки в Postman, то вы сможете их импортировать в TestMace.

Есть руководство по быстрому старту: https://tprg.ru/Q7HN

#инструменты #api

Уроки по Vue.js

Рекомендуем два часовых урока по Vue.js с приятной и доступной подачей материала. Например, некоторые особенности фреймворка автор объясняет на примерах с футболом или петросянами.

Первый урок посвящён знакомству с Vue.js, сравнению его с другими подобными инструментами и изучению основных понятий фреймворка: https://www.youtube.com/watch?v=b6Ac0jcqJIg

Второе видео продолжает эту тему и посвящено Vue CLI, инструментарию для разработки на Vue.js: https://www.youtube.com/watch?v=4O1twLpg-7A

#фронтенд #vuejs

Konstellate — это бесплатный пользовательский интерфейс для создания, редактирования и управления взаимосвязями и ресурсами Kubernetes-приложений.

С его помощью можно легко создавать сложные YAML-структуры и экспортировать их в чарты Helm или шаблоны Kustomize.

На GitHub лежат открытые исходники. Также там можно почитать больше о возможностях инструмента и узнать, как его запустить на своей машине: https://github.com/containership/konstellate

А здесь можно поиграться с демо альфа-версии: https://containership.github.io/konstellate/

#развёртывание #kubernetes

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

Сотрудники компании отнеслись к ситуации именно так, очень быстро всё подняли, а теперь ещё и технический директор Джон Грэм-Камминг написал офигенный постмортем — «Подробности отказа в работе Cloudflare 2 июля 2019».

Что оттуда можно почерпнуть:
1. Как честно общаться с клиентами и воспринимать их как ну просто людей, а не как обезличенные кошельки.
2. Как устроены процессы разработки и деплоя в огромной компании, которая ежедневно пропускает через себя тонны трафика.
3. Какая комбинация проблем привела к отказу (они для себя выделили 11 штук), как и кто эти проблемы решал. С графиками, пулл-реквестами и скринами из джиры. Прям сериал «Чернобыль», только в тексте и про IT.
4. Узнать побольше об особенностях регулярных выражений — одной из проблем была именно ошибка в регулярке, которая в итоге сожрала все ресурсы процессора. Все технические подробности есть в статье: пошаговое руководство как-не-делать.

И начинается текст очень мило — с переписки девятилетней давности, где Камминг (будучи тогда только клиентом клаудфлеры) спрашивает у CEO Мэтью Принса «чего там с моим DNS-сервером», а тот ему подробно рассказывает, что случилось — прямо как сейчас Камминг рассказывает нам.

Кроссбраузерная библиотека для CSS-анимаций: https://github.com/daneden/animate.css

Просто скачивайте css-файл, добавляйте его в свой проект и используйте разнообразные анимации. Примеры использования в коде можно посмореть на гитхабе, а сами анимации — на демо-сайте: https://daneden.github.io/animate.css/

#css

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

Два неравнодушных фронтендера перелопатили кучу источников и написали Солидбук. Весь код написан на TypeScript, в каждой главе есть паттерны и антипаттерны, примеры из идеального мира и реальной жизни, а также интерактивные тесты для самопроверки: https://ota-solid.now.sh/

#typescript #ооп #solid

⁠Open source проекты на React

Как правило, когда программист достигает определённого дзена в разработке, у него появляется желание применить знания вне основной работы. Например, в open source проектах. Это полезно и для профессионального развития, и для разработчиков вокруг.

В этой статье автор рассказывает, как выбрать хороший open source проект, в который можно контрибьютить и не бояться потратить свои силы впустую.

Также он рассказывает про лучшие проекты с открытыми исходниками, основанные на React. Можно выбрать инструменты для разработки, а можно какие-нибудь компоненты для вёрстки: https://flatlogic.com/blog/best-react-open-source-projects/

#javascript #react

Нововведения Postgres 12

Этой весной на конференции HighLoad++ Олег Бартунов, разработчик Postgres, генеральный директор Postgres Professional, рассказал про Postgres 12, который оказался очень богатым на фичи: https://www.youtube.com/watch?v=uhvqly8MtoI

Их простое перечисление выглядело бы очень уныло, поэтому он выбрал некоторые из них, о которых и рассказал более подробно. Например, в 12 версии ожидаются поддержка KNN для SP-GiST и B-tree (для тех, кто не знает или не помнит, что такое SP-GiST и KNN, спикер рассказывает).

#базыданных #postgresql

Разработка веб-серверов на Go

При помощи стандартных компонентов языка можно разрабатывать серверные приложения. В статье рассказываем, как это сделать, начиная с «Hello World!»: https://tproger.ru/translations/go-web-server/

В итоге получится приложение, которое:
— использует Let’s Encrypt для HTTPS;
— выполняет маршрутизацию запросов к API;
— реализует промежуточную обработку запросов;
— раздаёт статические файлы;
— корректно завершает свою работу.

Если вам интересно посмотреть сразу на готовый код, то заходите на GitHub: https://github.com/jordan-wright/http-boilerplate

#бэкенд #go

⁠Хуки в React

В последней версии React 16.8 появились хуки, цель которых — упростить процесс разработки компонентов.

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

В официальной русскоязычной документации React есть раздел, посвящённый хукам. Там есть правила и примеры использования готовых хуков, пример создания кастомных и ответы на популярные вопросы по теме: https://ru.reactjs.org/docs/hooks-faq.html#which-versions-of-react-include-hooks

А чтобы закрепить тему на настоящей практике, рекомендуем статью, в которой разрабатывается чат с использованием хуков React: https://css-tricks.com/build-a-chat-app-using-react-hooks-in-100-lines-of-code/

#reactjs #pwa

Помните про файл robots.txt, который позволяет разработчикам исключать определённые страницы сайта из поисковой выдачи?

Так вот, у GitHub в этом файле есть одна интересная деталь. В секцию Disallow добавлен единственный пользовательский репозиторий — «/ekansa/Open-Context-Data»: https://github.com/robots.txt

В твиттере создатель этого репозитория рассказал, что однажды он решил использовать гитхаб в качестве публичного хранилища большого количества XML-файлов своего проекта OpenContext: https://twitter.com/ekansa/status/1137052076062650368

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

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

Очень хочется, чтобы была такая документация, в которой можно было бы найти всё, что угодно. DevDocs определённо похожа на такую: https://devdocs.io/

Там собрано множество документаций API в структурированном виде: CSS, JS, Angular, Vue.js, Git, Docker. Возможно, проще перечислить то, чего там нет. Если вы всё же нашли что-то отсутствующее, то исходники открыты, можно добавить: https://github.com/freeCodeCamp/devdocs

А ещё в офлайне работает.

#api

Полный цикл тестирования React-приложений

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

Разработчики интерфейсов из Яндекса рассказали, как в Авто.ру построено тестирование фронтенда на базе Jest и Puppeteer: юнит-тесты, тесты на отдельные React-компоненты, интеграционные тесты. И самое интересное из этого опыта — изолированное тестирование React-компонентов в браузере без Selenium Grid, Java и прочего.

Видео (доклад начинается на отметке 4:41:41, если вдруг не перемоталось автоматически): https://tprg.ru/oUGj

Текстовая расшифровка видеодоклада: https://tprg.ru/fFWO

#react #тестирование

⁠Fontello

Хотим рассказать вам про сервис Fontello: https://fontello.com/

Да, про тот самый, который вроде как обычный сервис для шрифтов с иконками. Оказывается, не совсем обычный.

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

Во-вторых, там можно добавить свои (!) иконки SVG-формата и при этом получить рекомендации по нормализации иконки (весит она, например, 1 КБайт, а сервис вам скажет, что можно бы и сжать до 400 байт вообще без потерь).

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

Посмотреть, чем хороши шрифты с иконками можно на этом демо: https://css-tricks.com/examples/IconFont

А если вы любите истории, то можете почитать статью, в которой создатель Fontello рассказал о разработке сервиса: https://css-tricks.com/fontello-past-future-icon-font..

Плюс ещё несколько альтернативных сервисов:
— Icomoon: https://icomoon.io/
— Fontastic: https://fontastic.me/

#фронтенд #дизайн #инструменты

⁠Эксплуатация cookie-based XSS

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

Он выпустил новую статью, в которой рассказывает о часто встречаемой им cookie-based XSS уязвимости. Она возникает, когда значение параметра cookie рефлектится на страницу. По умолчанию такая уязвимость считается self-XSS.

В статье автор проводит подробный разбор эксплуатации cookie-based XSS уязвимости, а также приводит пример из тестирования одной компании, от которой он получил $7300 за исследование: https://tprg.ru/cookie-based-xss

#безопасность

⁠Лучшие практики Docker

Здорово было бы, если бы не нужно было отвлекать своих коллег для шаблонного code review, правда? Для некоторых ситуаций уже есть свои решения.

Для докера есть такой вот скрипт, который проверит, использовали ли вы лучшие практики для развёртывания контейнеров в продакшн: https://github.com/docker/docker-bench-security

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

#docker #инструменты #лучшиепрактики

⁠Вознаграждение за баги в Chrome

Google увеличила вознаграждение за репорты багов безопасности Chrome. Теперь за «репорт высокого качества» можно получить $30 000. А за ошибки в Chrome OS можно получить до $150 000: https://tprg.ru/buD1

В компании составили список категорий ошибок, которые им особенно интересны, а также уточнили, что считается «репортом высокого качества»: https://tprg.ru/8rl3

А вы как-нибудь участвовали в чём-то подобном? Какое максимальное вознаграждение получали?

#безопасность #chrome

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

На видео — пример того, как можно захостить сайт hostyoself.соm на самом себе. Да здравствует рекурсия.

А в статье мы рассказываем, как запустить хост с браузера или командной строки и настроить редирект. И отвечаем на вопросы по проекту: https://tproger.ru/translations/about-hostyoself/

#кек

Объединение CSS-файлов в один для WordPress

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

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

В статье рассматривается ручное объединение CSS-файлов и автоматическое: https://tprg.ru/pMA1

И аналогичная статья для JS-файлов: https://tprg.ru/QUZm

#css #javascript #wordpress

Популярный анализатор WebPageTest проверяет загрузку страниц из разных точек мира и отображение сайта в разных браузерах: https://www.webpagetest.org/

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

Напоминаем, что у нас есть подборка из 12 других сервисов для анализа сайтов. Где-то можно проверить скорость и удобство использования, где-то — SEO-оптимизацию: https://tproger.ru/digest/website-inspection-services/

#инструменты #анализ