Гайд по использованию Web Bundles: https://web.dev/web-bundles

Что за Web Bundles?
С его помощью можно запаковывать сайты в бандл и передавать их на другое устройство с помощью Bluetooth.

Зачем он нужен?
Представьте ситуацию: вы со своим другом куда-нибудь летите, в самолёте доступа к интернету нет. Вы играете в какую-то веб-игру в офлайне, а ваш друг скучает. Как поделиться с ним этим сайтом? Web Bundle — вот ответ.

Основные принципы адаптивного дизайна в небольшой статье: https://bit.ly/2qKlhFd

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

#фронтенд #css

Когда НЕ стоит использовать Docker

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

В этой статье читайте 7 кейсов, когда не стоит использовать Docker: https://www.freecodecamp.org/news/7-cases-when-not-to-use-docker/

#devops #docker

​​Метрики для оценки и оптимизации UX

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

В этой статье подробнейшим образом рассматриваются самые важные из них: https://web.dev/metrics

— First contentful paint (FCP): время от начала загрузки страницы до отображения на экране хоть какого-то контента.
— Largest contentful paint (LCP): время от начала загрузки страницы до отображения самого большого блока на странице (текст, картинка).
— First input delay (FID): время от первого взаимодействия пользователя с сайтом (например, клик по ссылке или кнопке) до момента, когда браузер способен обрабатывать это взаимодействие.
— Time to Interactive (TTI): время от начала загрузки страницы до момента, когда пользователи сможет взаимодействовать с сайтом.
— Total blocking time (TBT): время между FCP и TTI, т.е. когда контент на сайте отображён, но пользователь взаимодействовать с ним не может.
— Cumulative layout shift (CLS): подсчитываются все «внезапные» сдвиги контента на сайте с момента его загрузки. На видео в посте показан как раз такой сдвиг (который может вызвать нервный срыв у пользователя).

#фронтенд #ux

Статья про 12 частых ошибок в SQL-запросах. Прочитайте и не допускайте их: https://hakibenita.com/sql-dos-and-donts

#бэкенд #sql

Один разработчик решил изучить микросервисы и очень основательно подошёл к этому вопросу. В итоге у него накопилось огромная подборка ресурсов по этой теме.

Он поделился ею с интернетом, а мы делимся с вами: https://bit.ly/2XPIRMR

#бэкенд #архитектура #микросервисы

​​Доступность веба

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

В этой статье читайте несколько рекомендаций по созданию доступных сайтов: https://tprg.ru/dDp8

Рекомендации разбиты на 4 категории:
— удобство чтения,
— медиа-элементы,
— удобство навигации по странице,
— доступность с использованием вспомогательных технологий.

Читайте также про правовое регулирование доступности веба

#фронтенд #доступность

Google выпустили WordPress-плагин Google Site Kit для аналитики сайтов

https://wordpress.org/plugins/google-site-kit/ 

С его помощью можно изучить различные метрики из разных инструментов гугла:
— Search Console: увидеть, как ваш сайт показывается в поиске. Отследить, сколько людей там видело сайт и какие запросы использовали для его поиска.
— Analytics: изучить, как ваши пользователи перемещаются по сайту, и отследить достижение целей, которые вы установили.
— AdSense: отследить, сколько денег приносит сайт.
— PageSpeed Insights: увидеть, насколько хороша производительность сайта в сравнении с другими. Получить советы по улучшению производительности.
— Tag Manager: настроить Tag Manager без погружения в код.
— Optimize: настроить Optimize и запустить A/B тесты.

#фронтенд #wordpress

Огромная подборка различных гайдов и статей по Docker

https://dzone.com/articles/the-complete-docker-collection-tutorials

Разбиты на несколько тем:
— Что такое Docker и зачем его использовать?
— Основы Docker, основные команды.
— Гайды по созданию Docker-приложений.
— Docker и Kubernetes, Docker и Spring Boot.
— Подборки инструментов. 

#devops #docker

Сможете чётко ответить, для чего используется super() в JavaScript?

Если нет, то у нас есть для вас отличная статья в тему. А если да, то тоже читайте и закрепляйте знания: https://css-tricks.com/what-is-super-in-javascript/

#javascript

Сможете нажать на кнопочку?

Попробуйте тут: https://codepen.io/bnhovde/pen/OJLYGKx

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

26 советов по использованию Vue.js

https://tprg.ru/tDmA

Способы динамического добавления и удаления CSS-классов, синтаксис массивов и объектов, использование JS-выражений для вычисления CSS-классов и многое другое.

Смотрите также: гайд по созданию приложения для определению эмоций, пол и возраста человека на Vue.js

#фронтенд #vuejs

Чем канал IT Новости отличается от других каналов с новостями про технологии?

Там весёлая авторская подача и смешной мем для каждой новости.

Проверьте и подключайтесь: @tprogerlive

EasyDB — сервис для создания базы данных в один клик: https://easydb.io/

Подойдёт для небольших проектов или, например, хакатонов. НЕ подойдёт для высоконагруженных проектов с большим количеством обращений к БД.

Поддерживаются клиенты на JavaScript, Python, Ruby и Shell.

#бэкенд #базыданных

Самое интересное с Chrome Web Dev Summit 2019

https://tprg.ru/LlE0

В середине ноября прошла конференция по вебу от разработчиков Chrome. Что там рассказали:
— переработанные элементы <form> и новые HTML-элементы;
— новые функции и селекторы CSS;
— сближение натива и веба;
— концепция «адаптивной загрузки».

Видосы с конференции на YouTube: https://tprg.ru/P8xm

#chrome #html #css

Что почитать по NGINX

Подборка самых актуальных книг по NGINX на русском и английском языках: https://tproger.ru/translations/nginx-books-and-sites/

А в конце подборки — 6 ресурсов с просторов интернета, которые тоже помогут в изучении системы.

#бэкенд #nginx

Очередная часть перевода курса курса The Odin Project от нашего подписчика

https://github.com/vectree/nodejs

На этот раз про Node.js. В рамках этой части рассматриваются Express, Passport.js, работа с API, тестирование.

Читайте также: в том же формате про фронтенд

#бэкенд #nodejs

Слайдер сравнения изображений ДО и ПОСЛЕ

В этом видео наш подписчик рассказывает, как создать слайдер сравнения изображений «до» и «после»: https://youtu.be/H-RQRANL8y0

Изображения можно будет сравнивать с помощью передвижения ползунка и стрелок на клавиатуре. В ходе урока будут использоваться HTML, CSS и JQuery.

#фронтенд #html #css #jquery

Функциональное программирование с примерами на JavaScript

Статья в двух частях:

В первой части — основы ФП, каррирование, чистые функции, fantasy-land, функторы, монады, Maybe-монады и Either-монады: https://tproger.ru/translations/functional-js-1/

Во второй — аппликативные функторы, curryN и Validation Applicative: https://tproger.ru/translations/functional-js-2/

Также смотрите — русскоязычный видеокурс по ФП от Computer Science Center: https://tproger.ru/video/func-programming/?autoplay=1

#javascript

В этой статье читайте, как разработать браузерную HTML5-игру с помощью языка TypeScript и фреймворка Phaser: https://tprg.ru/8KG0

#фронтенд #typescript #html

Как не запутаться с цветами в CSS-коде, как нормально выравнивать текст, как грамотно реализовать анимацию — эти и несколько других советов в небольшой статье: https://tprg.ru/UdV5

Читайте также — 5 принципов, которые помогут написать поддерживаемый, масштабируемый и чистый CSS

#фронтенд #css