​​«Клеймо» для медленных сайтов

Разработчики Chrome подумывают о том, чтобы каким-то визуальным образом сообщать пользователю о скорости загрузки сайтов. Таким образом они хотят предупреждать пользователей о сайтах, у которых есть проблемы с производительностью: https://tprg.ru/G4Nk

Вариантов визуализации несколько:
— показывать информацию о скорости загрузки прямо экране загрузки;
— выделять соответствующим цветом индикатор загрузки страницы (например, зелёным для быстрых сайтов);
— контекстное меню для ссылки, в котором можно узнать информацию о скорости её загрузки.

Как вам такая идея?

#фронтенд #chrome

Сайт, на котором собраны подробные объяснения паттернов проектирования: https://refactoring.guru/ru/design-patterns

Для каждого паттерна на сайте приводится:
— описание проблемы, которая когда-то возникла;
— способ решения этой проблемы с помощью паттерна;
— аналогия с какой-нибудь жизненной ситуацией;
— общая структура паттерна и его реализация на псевдокоде;
— ситуации, в которых было бы уместно применить паттерн;
— преимущества и недостатки;
— примеры реализации на C#, Java, PHP, Python, Ruby, Swift или TypeScript.

#паттерны

React Context

Он часто используется для управления состоянием, заменяя собой Redux. В этой статье подробно рассказываем про React Context и учим правильно его использовать: https://tproger.ru/articles/react-context-in-5-min/

#фронтенд #react

Подробное введение в работу с Git

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

В этой статье мы рассмотрим самые полезные команды Git и ситуации, когда их стоит использовать. А если вы уже знакомы с Git, то она поможет освежить свои знания: https://tproger.ru/translations/beginner-git-cheatsheet/

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

chaoskube — инструмент, который умеет проверять Kubernetes-кластеры на прочность: https://github.com/linki/chaoskube

Как он это делает?
Да просто раз в 10 минут убивает случайный под в кластере и смотрит, как ваша система справляется с этим сбоем.

#devops #kubernetes

Не так давно Apple представила собственную систему авторизации Sign in with Apple и сделала её обязательной для всех приложений в App Store, которые используют вход через соцсети. К счастью, Apple сделала подробную документацию для этой фичи.

А в этой статье читайте про конкретный пример внедрения этой авторизации в свой сервис: https://tprg.ru/8rzB

#фронтенд #apple

Лучшие практики Node.js

Этот репозиторий — компиляция десятков лучших статей по Node.js. В нём собрано более 80 рекомендаций и лучших практик: https://github.com/goldbergyoni/nodebestpractices/blob/master/README.russian.md

— какую структуру проекта выбрать;
— как обрабатывать ошибки;
— как оформлять код;
— как тестировать код;
— как обеспечить безопасность;

Также читайте: Лучшие практики по тестированию JavaScript и Node.js приложений

#nodejs #лучшиепрактики

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

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

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

Рекомендуем пару ресурсов для ознакомления с фреймворком:
— Учебник от создателей на русском: https://ru.svelte.dev/tutorial/
— И учебник от поклонников Svelte на английском: https://www.freecodecamp.org/news/the-svelte-handbook/

#фронтенд #svelte

Хотите поиграть в «змейку» в инструментах разработчика?

Вообще не проблема: https://matthewrayfield.com/goodies/inspect-this-snake/

Другие кеки:
— анимация в адресной строке браузера;
— игра в иконке вкладки браузера.

#фронтенд #кек

Результат проверки в PageSpeed Insights мобильной версии сайта, на котором сам сервис и расположен.

#фронтенд #google

Подробный гайд по созданию приложения на Angular 8

https://www.freecodecamp.org/news/angular-8-tutorial-in-easy-steps/

— установка Angular CLI 8 и создание проекта;
— добавление http-клиента;
— создание компонентов;
— разработка интерфейса;
— работа с Rest API;
— обработка ошибок;
— добавление пагинации;
— подключение Firebase.

#фронтенд #angular

Учебный план по Kubernetes от Microsoft: https://tprg.ru/VGoN

Обучение рассчитано на 50 дней: от самых основ до работы с Azure Kubernetes Service. Всё доходчиво и в разных форматах: статьи, видео, лабы. Очень круто, рекомендуем.

#devops #kubernetes

​​Вышла первая стабильная версия браузера Brave: https://tprg.ru/pakb

Его разрабатывали 4,5 года под руководством Брендена Айка, создателя JavaScript и бывшего руководителя Mozilla.

Brave основан на Chromium, но заточен под приватность и удобство пользователя. В него встроены и включены по умолчанию блокировки рекламы, трекеров и майнеров.

#браузеры

Автор этой серии видео рассказывает, как на React написать клон сайта Netflix: https://www.youtube.com/playlist?list=PL6jnTQwFvrdbccPErnd5AsCY3dkYUk3e5

#фронтенд #react

​​Команда ClickHouse опубликовала свой план разработки на 2020 год. Интересное чтиво: https://tprg.ru/yMmE

#бэкенд

Next.js

Огромное руководство по изучению фреймворка Next.js: https://www.freecodecamp.org/news/the-next-js-handbook/

Подойдёт тем, кто вообще не знаком с этим фреймворком. Но при этом будет здорово, если у вас есть минимальный опыт с React.

#фронтенд #javascript #nextjs

Composer — пакетный менеджер для PHP

Автор этого видео рассказывает, как его использовать в своих проектах. Показывает, как установить и подключить Composer к приложению, объясняет основные команды и устанавливает фреймворк Laravel.

Также в видео:
— самые необходимые и часто используемые команды;
— require и require-dev;
— куда пропадают файлы в Laravel и зачем запускать dump-autoload;
— как правильно использовать команды update и install, чтобы ничего не сломать;
— что нужно фиксировать в Git, а что нет;
— зачем нужен файл composer.lock;
— некоторые другие команды.

#php #laravel #composer

DigitalOcean анонсировала хранилище docker-образов: https://www.digitalocean.com/products/container-registry/

На этапе раннего доступа хранилище будет бесплатным.

#devops #docker

26 ноября в петербургском офисе Одноклассников пройдёт очередной ok.tесh: frontend meetup.

Про что будут беседовать?
— про новый фронтенд Одноклассников, сделанный на связке React + Graal;
— может ли «Lifting State Up», одна из двенадцати ключевых концепций в официальной документации React, приводить к плохой производительности;
— а также несколько историй про баги и технические решения, которые были предприняты, чтобы с ними справиться.

Участие бесплатно: https://oktech.timepad.ru/event/1110260

#ивенты

Чек-лист, следование которому позволит разработать безопасное, масштабируемое и отказоустойчивое Kubernetes-приложение: https://learnk8s.io/production-best-practices/

Также смотрите: инструмент для проверки лучших практик Kubernetes от DigitalOcean

#devops #kubernetes #лучшиепрактики

Тестирование с помощью Docker

Писать тесты только потому, что кто-то говорит «у тебя должны быть написаны тесты» — глупо. Тесты должны повышать вашу производительность и при этом улучшать качество конечного продукта.

В этом подробном руководстве читайте, как Docker может помочь при тестировании API: https://fire.ci/blog/api-end-to-end-testing-with-docker/

#ci #docker #тестирование