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

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

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

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

Кстати, в далёком 2010 году про внутренности и архитектуру сайта на этой же конференции рассказывал Павел Дуров. Вот текстовая версия его ответов на вопросы зрителей: https://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

#фронтенд

Создание движка для игры на чистом JavaScript

Видеоурок от нашего подписчика, в котором он показывает, как создать прототип игры на чистом JavaScript за 20 минут.

В итоге получится что-то похожее на классическую игру, в которой космический корабль противостоит инопланетному вторжению.

Исходники: https://github.com/SkanerSoft/SkanerSoft.github.io/tree/master/spin

#javascript

Подборка материалов по веб-разработке

Для каждого найдётся статейка: план обучения, основные составляющие архитектуры веба, несколько статей по вёрстке, полезные инструменты и практические советы для веб-разработчиков.

Читать: https://tprg.ru/PutM

Разработка гибридных PHP/Go-приложений с использованием RoadRunner

Программист с 12-летним опытом работы с PHP рассказал, как его команда разрабатывала собственный сервер РНР-приложений RoadRunner на Go для повышения производительности приложения.

В итоге у них получилось:
— увеличить скорость реакции точек приложения в 4 раза по сравнению с PHP-FPM;
— полностью избавиться от ошибок 502 под нагрузками;
— упростить систему деплоя и сборки проекта за счёт унификации приложения и избавления от лишней обвязки в виде nginx + PHP-FPM;
— ускорить общение между распределённой системой.

Текстовая версия доклада: https://habr.com/ru/company/oleg-bunin/blog/461827/

#бэкенд #php #go

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

Если для вас это принципиально, то обратите внимание на Podman. У них на лого улыбающийся тюлень: https://podman.io/

#docker #podman

⁠CSS-анимация

Для создания анимации плавного появления/исчезновения элемента часто используют jQuery. Это очень просто и удобно, но проблема в том, что это JavaScript-анимация. Хороший фронтендер знает, что самая высокая производительность — у CSS-анимации.

В этой статье рассказано, как реализовать анимацию появления с помощью CSS и решить возникающие при этом проблемы: https://tprg.ru/0nTL

Собственно, именно этот способ мы использовали для анимации меню на нашем сайте: https://tproger.ru

#фронтенд #css

5 плагинов для webpack

Если при сборке с webpack использовать плагины, то можно здорово упростить себе жизнь. Рекомендуем подборку из 5 таких плагинов. С их помощью можно:
— искать неиспользуемые модули;
— импортить модули с учётом регистра;
— решать конфликты версий библиотек;
— убирать круговые зависимости;
— анализировать скорость сборки.

Для каждого плагина — ссылка на гитхаб и npm: https://tprg.ru/YRWS

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

Создание веб-приложения с помощью Vue.js, Vuetify и Firebase

Предлагаем попробовать свои силы в создании реального проекта, в котором фронтенд реализован с помощью Vuetify, а за бэкенд отвечает Firebase. В итоге получится приложение для изучения немецкого языка.

Содержание видеокурса и все уроки — у нас на сайте: https://tproger.ru/video/building-vuejs-app/

#фронтенд #vuejs

Типичные ошибки при работе со временем

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

В этом докладе спикер описал типичные ошибки, которые встречались ему в проектах на языках Java, C# и JavaScript. Он рассказал, как получить самую точную текущую дату, как обрабатывать асинхронные запросы и какие ошибки могут возникнуть в полночь.

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

#javascript #java

Подборка из 20 библиотек, реализующих разнообразные CSS-анимации: https://tprg.ru/bu3k

И ещё небольшой сайт, где можно найти несколько симпатичных CSS-лоадеров: https://loading.io/css/

#фронтенд #css