Веб-страница
24.1K subscribers
1.74K photos
533 videos
1 file
3.94K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Осваивать такую тему, как SQL, лучше всего на конкретных задачах, а не на скучных теоретических лекциях.

В этой статье автор собрал более 75 практических задач на SELECT. Причём перед вами будет одна схема базы данных, и все задачи будут построены вокруг неё: https://habr.com/ru/post/461567/

#бэкенд #базыданных #sql
This media is not supported in your browser
VIEW IN TELEGRAM
На видео в посте — это выдача поиска в Яндексе. Если перейти на выдачу по картинкам — шапка будет такой же, несмотря на то, что это отдельный репозиторий, которым занимается отдельная команда, возможно, даже на других технологиях.

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

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

Для этого в Яндексе есть выделенная команда «Лего», которая занимается общими штуками в интерфейсах. Её руководитель рассказывает про особенности её работы.

Видеоверсия доклада: https://tprg.ru/aK0j
Текстовая версия: https://tprg.ru/bN7I

#фронтенд #вёрстка
Чек-лист для Dev-Ops инженеров на примере AWS CloudFormation

Там найдёте всё, что нужно для разработки под AWS CloudFormation:
— готовые шаблоны для проектов;
— локальные DevOps-инструменты для JetBrains IDE, VS Code и других IDE;
— ресурсы и советы по разработке, администрированию, безопасности и тестированию.

Читать: https://tproger.ru/articles/cloudformation-developers-plan/

#devops #инструменты
Бесплатный Java-митап

Его проведёт Альфа-Банк в эту пятницу, 9 августа, в 19:00.

Всего будет 3 доклада от спикеров из Альфа-Банка на следующие темы:
— отказоустойчивость сервисов и интернет;
— тестирование сервисов с Spring Cloud Contract;
— аутентификация в Альфа-Банке.

Чтобы попасть, нужно просто зарегистрироваться: https://hr.alfabank.ru/events/backend-stories-4-0

Если хотите смотреть дома, то онлайн-трансляция мероприятия будет доступна в день мероприятия по ссылке: https://youtu.be/kY4lYiqxf7k

#ивенты #java
This media is not supported in your browser
VIEW IN TELEGRAM
KubeView — штука, которая визуализирует всё, что происходит внутри кластера Kubernetes: https://github.com/benc-uk/kubeview

Отображает объекты API и то, как они взаимосвязаны. Объекты выделяются разными цветами в зависимости от их статуса. По мере появления новых данных приложение динамически обновляет картинку.

Для похожих целей ещё есть Konstellate.

#kubernetes #инструменты
Шпаргалки и лучшие практики OWASP

В этом наборе собрана ценная информация по темам безопасности приложений в кратком и удобном формате: https://cheatsheetseries.owasp.org/

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

#безопасность #лучшиепрактики #owasp
Двухфакторная аутентификация

2ФА — один из самых надёжных механизмов защиты аккаунтов на сегодняшний день. Её суть заключается в запросе у пользователя аутентификационных данных двух разных типов. Как правило, первый тип данных — логин и пароль, которые пользователь должен помнить, второй — SMS или какой-нибудь ещё вариант с привязкой к смартфону пользователя.

Один из таких вариантов — генерация 6-значных кодов на привязанном к аккаунту смартфоне. При создании аккаунта пользователю нужно отсканировать QR-код на сайте из специального мобильного приложения для кодов (например, Google Authenticator). Далее при каждом входе на сайт кроме логина и пароля нужно будет дополнительно ввести код из этого приложения. Таким образом, при краже пароля пользователя злоумышленник всё равно не сможет войти в аккаунт из-за двухэтапной защиты.

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

Сайт-песочница, где можно протестить вход по коду из приложения: https://awap.pw/

Исходники проекта гитхабе:
— клиент: https://github.com/aleoheen/awap-client
— сервер: https://github.com/aleoheen/awap-server

Документация по REST API проекта: https://aleoheen.github.io/awap-server/

#безопасность #инструменты
Концептуальные основы ООП в тестировании

В этой серии из трёх получасовых лекций спикер расскажет об основах ООП и о том, как это может помочь QA-специалистам. Доклад ориентирован на широкий круг слушателей: от молодых специалистов в ручном тестировании до архитекторов в автоматизации.

Часть 1: https://youtu.be/Qx0_kFM52oU
Часть 2: https://youtu.be/CRt1XtW6-Fs
Часть 3: https://youtu.be/LeKqHN7l4Yk

#тестирование #ооп
10 PostCSS плагинов

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

Один из таких инструментов — PostCSS. С его помощью можно автоматизировать рутинные операции с CSS с помощью расширений, написанных на JavaScript.

В этой статье автор собрал 10 таких расширений: https://habr.com/ru/post/457340/

#фронтенд #css #инструменты
Прочитав эту статью, вы узнаете каким образом технологии дошли до того, что вы, не прилагая особых усилий, можете в своё удовольствие разглядывать мемы или читать наш канал: https://tprg.ru/8Ejf

Также сможете посмотреть, как укладывают и ремонтируют подводные кабели, и заглянуть внутрь компании, которая обслуживает 24% всего интернет-трафика.

На картинке — мировая карта подводных кабелей.

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

Читайте про реальный опыт команды разработчиков из Lucidchart, которым удалось сократить время загрузки приложения до двух секунд: https://tproger.ru/translations/chrome-devtools-load-time-optimization/

Проанализировать скорость загрузки сайта можно с помощью PageSpeed Insights.

#фронтенд
В честь 25-летия PHP его создатель выступил с докладом

Он вспомнил, как начиналась история языка и через какие этапы развития ему пришлось пройти. Также он рассказал, что новенького в последней версии PHP 7.3 и почему он всё ещё занимается развитием этого языка.

Если хорошо понимаете по-английски, то смотрите видео в оригинале в посте, а если нет, то читайте расшифровку с основными тезисами у нас на сайте: https://tproger.ru/video/25-years-of-php/

А если уже решили, что хотите выучить PHP, то вот вам план обучения: https://tproger.ru/curriculum/php-beginner/

#php
Сравнение сервисов по защите от DDoS-атак

Автор этой статьи взял 7 популярных сервисов для защиты от DDoS-атак и 70 критериев для их детального сравнения. Получилось очень полезное исследование, результаты которого помогут выбрать сервис в зависимости от поставленных требований: https://tprg.ru/Lbd2

#безопасность #ddos
This media is not supported in your browser
VIEW IN TELEGRAM
Рекомендуем вам перевод статьи, автор которой использовал WordPress как headless бэкэнд, а фронтенд реализовал при помощи Vue.js. В итоге получилось вот такое приложение, в котором нет хлопот, связанных с настройкой WordPress-шаблонов.

Статья здесь: https://tprg.ru/oEx7

А если интересен только код, то он есть на гитхабе: https://github.com/snipcart/wordpress-headless-vue

#фронтенд #бэкенд #vuejs #wordpress
Разбираемся с путаницей между JavaScript методами slice(), splice() и split()

Скажете с ходу, какая из функций что делает?

Ничего страшного, если нет. Читайте статью и восполняйте пробел в этой теме. В конце статьи — обобщённые описания методов: https://tprg.ru/u8vO

#javascript
FAQ по архитектуре и работе ВКонтакте

Этот видеодоклад бэкенд-разработчика из ВКонтакте — это максимально полный и объёмный FAQ по архитектуре и работе ВКонтакте: платформе, инфраструктуре, серверам и взаимодействии между ними. Не про разработку, а именно про железо.

В ходе доклада поднимается много тем и вопросов, которые возникают у слушателей со стороны:
— Как построено взаимодействие серверов?
— Какие языки используются? Есть «обычный» PHP?
— Как обновить код на десятках тысяч серверов за секунды?

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

Кстати, в далёком 2010 году про внутренности и архитектуру сайта на этой же конференции рассказывал Павел Дуров. Вот текстовая версия его ответов на вопросы зрителей: http://profyclub.ru/docs/103

#бэкенд #php
This media is not supported in your browser
VIEW IN TELEGRAM
Вот такое вот расширение для домашней страницы в Chrome можно написать на React:
— фоновые видео;
— панель быстрого доступа к сайтам;
— синхронизация закладок с Chrome;
— поиск по закладкам.

Чтобы посмотреть код, можно установить расширение, на домашней странице нажать ПКМ и выбрать «Просмотр кода страницы» (либо просто Ctrl + U). Кот отобразится в новой вкладке.

Ссылка на расширение: https://tprg.ru/DAdB

#фронтенд #react #chrome
Курс по CSS Flexbox

В этом курсе вы узнаете:
— в чём основные отличия Flexbox и CSS Grid;
— что такое flex-контейнер, flex-элементы, главная ось и поперечная ось;
— как задавать размеры элементов;
— как выравнивать flex-элементы;
— как изменять направление осей;
— как работать со строками и столбцами.

Все видео курса — в плейлисте на YouTube: https://tprg.ru/rdDR

Смотрите также: курс по CSS Grid

#фронтенд #css
Race condition в веб-приложениях

Представьте ситуацию. Вася хочет перевести $100, которые есть у него на счету, Пете. Он переходит на вкладку переводов, вбивает Петин ник и цифру 100. Затем нажимает на кнопку перевода. Данные отправляются на сервер. Что нужно сделать, чтобы всё сработало правильно?

Вроде всё просто:
1. Убедиться, что у Васи достаточно денег на счету.
2. Вычесть из баланса Васи сумму, которую необходимо перевести.
3. Добавить к балансу Пети эту сумму.
4. Вывести Васе сообщение, что он молодец.

Всё бы ничего, если бы всё происходило в порядке очереди. Но сайт может обслуживать одновременно множество пользователей, а это происходит не в одном потоке. C появлением многопоточности у программ появилась интересная архитектурная уязвимость — состояние гонки (или race condition).

А теперь представим, что наш алгоритм срабатывает одновременно 3 раза (или Вася что-то перепутал, или злоумышленники задумали что-то нехорошее).

У Васи всё так же $100 на балансе, но теперь он обращается к серверу тремя потоками одновременно (с минимальным количеством времени между запросами). И все три потока проверяют, достаточно ли баланса у Васи для перевода. В тот момент времени, когда алгоритм проверяет баланс, он всё еще равен $100. Как только проверка пройдена, из текущего баланса 3 раза вычитается $100, и добавляется Пете.

Что мы имеем? У Васи на счету минусовой баланс, а у Пети + $300, хотя должно быть + $100. Это и есть типичный пример эксплуатации уязвимости состояния гонки.

Как избавить своё приложение от такой уязвимости? В этой статье рассматривается несколько вариантов: https://bo0om.ru/race-condition-ru

#бэкенд #http #многопоточность
🔥1
Бесплатный Panda Meetup Back-end (PHP)

Состоится 22 августа в 19:00 в Москве.

Митап будет посвящён особенностям разработки на PHP. В программе будут только технические доклады от бэкенд-разработчиков и тимлидов, которые поделятся опытом из реальных проектов.

Если не сможете присутствовать лично, но хотите посмотреть, то 22 августа в 19:30 подключайтесь к онлайн-трансляции.

Регистрация по ссылке: https://panda-meetup.ru/msk-php-meetup

#ивенты #бэкенд #php
Кто такой DevOps и как им стать: план обучения

DevOps — сокращение от Development Operations. Эта идеология, которая призвана «подружить» команды разработки и эксплуатации. DevOps инженер — это по сути немного сисадмин и немного разработчик.

Наша статья поможет вам понять спектр задач, выполняемых DevOps инженером, а также освоить эту профессию: https://tproger.ru/curriculum/devops/

#devops