Двухфакторная аутентификация

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

Рекомендуем вам перевод статьи, автор которой использовал 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

Вот такое вот расширение для домашней страницы в 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 #многопоточность

Бесплатный 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

Мы тут в соседнем канале IT Юмор над айтишными шутками смеёмся.

Давайте вместе с нами: @ithumor

Бесплатный шаблон для админ-панели, в котором можно использовать более 50 UI-компонентов: https://vuestic.epicmax.co/admin/dashboard

Документация проекта: https://github.com/epicmaxco/vuestic-admin/wiki

Руководство по установке и исходники на гитхабе: https://github.com/epicmaxco/vuestic-admin

#фронтенд #vuejs

Видео в вебе

Из этого видеодоклада вы узнаете о способах применения видеотега в веб-браузере (для отображения роликов и нужд дизайна), актуальных видеоформатах и особенностях API HTML5 Video.

Также будет рассмотрена схема работы адаптивных потоковых видеотрансляций и способы защиты контента: https://youtu.be/gCqdq27kLjU

#фронтенд #html

Горячие клавиши VS Code

Практическую любую задачу в VS Code можно решить при помощи какого-нибудь сочетания клавиш: найти нужный файл, скопировать всю текущую строку, выполнить npm-команду, не открывая командную строку.

В этой статье читайте небольшой обзор популярных горячих клавиш VS Code: https://bit.ly/2YXimbC

А здесь собраны шпаргалки для Windows, Linux и MacOS, в которых вы найдёте все сочетания клавиш: https://gofile.io/?c=0O9P93

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

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

Как разработать хорошее веб-приложение

В нашем новом материале эксперты в поделились советами на тему разработки веб-приложений: https://tproger.ru/experts/how-to-make-good-web-app/

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

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

⁠Нативная ленивая загрузка картинок в Chrome

В Chrome 76 появилась встроенная реализация ленивой загрузки картинок. Теперь не нужно писать никакого кода или использовать стороннюю JS-библиотеку. Для этого есть атрибут loading.

В статье читайте, как его использовать в тегах img и iframe, будут ли возникать проблемы, если вы уже используете какую-то стороннюю библиотеку, и как быть с поддержкой ленивой загрузки в других браузерах: https://web.dev/native-lazy-loading

#фронтенд