Веб-страница
23.9K subscribers
1.76K photos
535 videos
1 file
3.96K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Бесплатная технологическая конференция Яндекса YaTalks 2019

Состоится 30 ноября в Москве.

В первую очередь это будет интересно бэкенд-разработчикам. С докладами выступят спикеры из Яндекса, Google, Nvidia, ivi, Skyeng.

Вот некоторые примеры тем докладов:
— «Алиса, как это работает?» от разработчика из Яндекса;
— «Deploy robotaxi around the world» от разработчика из Яндекса;
— «Hardware для глубокого обучения» от Google Developer Expert;
— Доклад о биологии больших данных от одного из самых известных российских учёных Михаила Гельфанда.

Подробности и регистрация здесь: https://tproger.ru/events/yatalks-2019/

#ивенты
This media is not supported in your browser
VIEW IN TELEGRAM
При работе в консоли браузера вы можете обращаться к элементу, с которым работаете в данный момент, с помощью $0.

Например, если вы работаете с видео, то можно использовать парочку хитрых команд:
— $0.playbackRate = 2; (чтобы изменить скорость воспроизведения);
— $0.requestPictureInPicture() (чтобы включить режим «картинка в картинке»).

#фронтенд #инструменты
Cloudflare открыла исходники проекта Flan Scan

С его помощь можно просканировать хосты в сети на предмет наличия уязвимостей: https://blog.cloudflare.com/introducing-flan-scan/

Flan Scan находит открытые сетевые порты в исследуемой сети, определяет связанные с ними сервисы и версии используемых программ и формирует список уязвимостей, затрагивающих выявленные сервисы.

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

Исходники: https://github.com/cloudflare/flan

#инструменты #безопасность
Вышла первая стабильная версия Loki, система агрегации логов от Grafana

Чем Loki отличается от других таких инструментов:
— хранит логи в сжатом и неструктурированном виде, индексирует только метаданные;
— индексирует и группирует логи теме же метками, что и в Prometheus;
— удобная поддержка хранения логов Kubernetes подов;
— нативная поддержка Grafana.

Исходники и документация: https://github.com/grafana/loki

#инструменты
Набор из 5 курсов на coursera от МФТИ и Яндекса по разработке интерфейсов: https://www.coursera.org/specializations/razrabotka-interfeysov

Обучение рассчитано на 5 месяцев: 2 курса по вёрстке, 2 курса по JavaScript и финальный проект. Курсы про вёрстку не требуют почти никакой подготовки. Научиться основам JavaScript труднее, поэтому кое-какая подготовка нужна: ожидается, что у вас уже есть опыт программирования на каком-нибудь языке.

#фронтенд #javascript #html #css
Лайфхак по вебу

Инструменты разработчика Google Chrome позволяют подбирать правильные цвета шрифта и фона, чтобы они были достаточно контрастны для комфортного чтения.

Если нажать на цвет, а потом на стрелочку справа от «Contrast ratio», на палитре появятся две кривые. Выбираете цвет ниже первой — всё хорошо, контрастность хорошая. Ниже второй — отлично, идеальный контраст.

#фронтенд #инструменты
This media is not supported in your browser
VIEW IN TELEGRAM
Годная статья про оптимизацию веба: https://tprg.ru/08Fz

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

#фронтенд #оптимизация
Гайд по использованию Web Bundles: https://web.dev/web-bundles

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

Зачем он нужен?
Представьте ситуацию: вы со своим другом куда-нибудь летите, в самолёте доступа к интернету нет. Вы играете в какую-то веб-игру в офлайне, а ваш друг скучает. Как поделиться с ним этим сайтом? Web Bundle — вот ответ.
This media is not supported in your browser
VIEW IN TELEGRAM
Основные принципы адаптивного дизайна в небольшой статье: 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
👍1
Огромная подборка различных гайдов и статей по 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
26 советов по использованию Vue.js

https://tprg.ru/tDmA

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

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

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

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

Проверьте и подключайтесь: @tprogerlive
EasyDB — сервис для создания базы данных в один клик: https://easydb.io/

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

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

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