VSCode в браузере 😎
Вы просто заходите на https://vscode.dev/ и сразу пользуетесь VSCode. Удобно, когда рабочее окружение не требует настройки и можно начать работать в привычных инструментах сразу. VSCode - это только часть экосистемы, нужно закрыть остальные аспекты всего процесса разработки. Github Codespaces как раз пробует решить эту проблему. Интересно будет понаблюдать за другими игроками рынка.

Но главное, чем я хочу поделиться, это докладом Эриха Гаммы (один из авторов gof-овских "Design Patterns") про то, как они в MS 10 лет разрабатывали VScode - история создания и интересные архитектурные решения.
Легкое получасовое видео для вечера пятницы 😉

ССЫЛКА НА ДОКЛАД: https://www.youtube.com/watch?v=hilznKQij7A

Доставили книгу. Детально описывает процессы и тулинг Гугла (написана гуглерами и некоторые используют для оебординга ее). Интересно будет сравнить с реальностью все 🙂
Книга есть в электронке даже
https://abseil.io/resources/swe_at_google.2.pdf

Напишу в канал небольшое ревью после прочтения.

Пишите в комментах, какие книги по разработке вам понравились. Что полезного можно прочитать разработчикам? 🙂

Должен ли фронтендер думать про XSS?

Коротко: Да! Должен!

Я уже не один раз слышал от фронтендеров, что за безопасность должен думать бэкенд разработчик и пускай там делают защиту от XSS. Да, на бэкенде можно снизить риски (к примеру, настроить CSP было бы правильно), но корневая причина находится именно на фронте. И это ответственность фронтендера думать про защиту от XSS.

Кстати, с валидацией данных, мы имеем зеркальную ситуацию: фронтенд может делать валидацию, но бэкенд обязан. 🙂

Почему фронтендер?
⭕ Причина 1️⃣: XSS - это проблема процесса рендеринга данных.
Одни и те же данные можно использовать по разному в разных ситуациях и разных клиентах (браузер, консоль, мобильное приложение). И мы должны рендерить данные безопасно. Сегодня они могут прийти с надежного бэкенда, а завтра с какого-то внешнего, к примеру. Нет причины, чтобы использовать небезопасный рендеринг на клиенте (возможно за редким исключением).

Если этой причины мало, то переходим к следующей 🙂.

⭕ Причина 2️⃣: бэкендер не следит за изменениями фронтенда.
Бэкенд-разработчик на заморачивается у вас там просто textarea на фронте или WYSIWYG-редактор.

Давайте проведем мысленный эксперимент. У нас есть REST API endpoint, который возвращает информацию про пользователя и там два поля: "name" и "bio". Эти два поля отображаются обычным текстом в интерфейсе. И тут приходит продакт-менеджер и говорит, давай дадим пользователям возможность форматировать текст в bio. Ты подключаешь какой-то редактор и в этот момент твое приложение становится уязвимым к XSS, если ты про это не подумаешь.

Почему так произойдет?
❓ Есть ли гарантия того, что бэкендер знает, что нужно сделать изменения на бэке, если задача была чисто фронтовая?
❓ Есть ли гарантия того, что ваш продакт-менеджер поставит бэкендеру задачу про XSS вместе с фронтовой задачей для тебя?
❓ Если ты не знаешь про XSS, то как ты поставишь задачу бэкендеру?
❓ Если ты не знаешь про XSS, то как ты добавишь защиту на фронте?

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

Если этих двух причин мало, то переходим к следующей 🙂.

⭕ Причина 3️⃣: бэкенд должен знать про верстку фронта, чтобы сделать правильную защиту.

Стандартный механизм защиты это использования санитайзера (внешния библиотека типа DOMPurify) Никогда не используйте регулярки для защиты от XSS❗.

Но это настолько стандартная для фронтенда задача, что сейчас утверждается браузерный API (https://wicg.github.io/sanitizer-api/). Только это уже говорит о том, что этим должны пользоваться фронтендеры.

Но проблема еще более интересная. Если вы посмотрите на API, то вы заметите, что санитайзер должен знать в какой элемент рендерится html разметка, поскольку это влияет на алгоритм парсинга.

Цитирую: "If the user data is available in string form and the developer wishes to sanitize it now, but apply the result to the DOM later, then the Sanitizer must be informed about the context that it will be used."

Примеры:
sanitizer.sanitizeFor("div", htmlMarkup);
sanitizer.sanitizeFor("table", htmlMarkup);


То есть бэкенд не просто должен знать, что вы будете использовать строку как html, но и должен знать как у вас сверстана страница.

Общий вывод: фронт не должен ожидать безопасных данных с сервера и должен думать про безопасный рендеринг всегда!

Надеюсь, мне удалось убедить фронтендеров задуматься про XSS 🤓

Как я переключился с прекрасного Perl-а на ужасный JS

25 ноября в рамках "FWDays: JS is back" буду делать онлайн доклад на тему "Как я переключился с прекрасного Perl-а на ужасный JS"

Я использую JavaScript с 2006 года. Тогда я делал одностраничные приложения для IE6 на JS (это был ES3) и бэкэнд на Perl. JS был болью. Лучше ли он теперь? 😀

В докладе покажу принципиальное отличие современного JS от Perl. Как одни и те же проблемы можно решить разными способами. Надеюсь дать вам более широкое представление о том, что могут предоставить языки программирования.

Будьте готовы к интерактиву, чтобы помочь мне с простыми задачами на JavaScript 🤓

Также фоловить мои доклады можете и подписаться на уведомления про то, что появилось видео к этому докладу можете на my-talks.net (но видео будет только в следующем году, да и без интерактива)

Регистрируйтесь!

Как вам тема? 🙂

HTTP security headers

Безопасность вашего приложения можно повысить при помощи дополнительных HTTP заголовков.

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

Это настолько простая и полезная возможность, но не многие про нее знают, что мы решили добавить раздел по основным хедерам в "бейзлайн" (про "WebbyLab developers baseline" почитать можно тут - https://t.me/jabascript/125)

Смотрите раздел HTTP Security headers.
ССЫЛКА НА ДОКУМЕНТ: https://bit.ly/3vO4EFa

Что думаете по поводу HTTP security headers? Используете у себя на проектах? Слышали ли до этого?

Подписывайся и на мой твиттер👍🏻

Много всего, что не попало сюда в канал, в моем Твиттере.

Если интересно, подписывайся и на https://twitter.com/ViktorTurskyi

Каждый день по интересному факту про Google публикую https://twitter.com/viktorturskyi/status/1459966682454188036?s=21

Подписывайся!)
Обратная связь в виде ретвитов/лайков/комментарив приветствуются. Если конечно такой контент нравится)

Онлайн конференция "Fwdays: JS is back" начанается в среду, 2 бесплатных промокода для подписчков.

Про свой доклад, где расскажу как я переходил с Perl на JS, я уже делал пост. Хочу сделать доклад фаново, придумал много примеров, но это будет работать, только если будет интерактив - подключайся 25 ноября утром (четверг)

Трансляция в Zoom будет бесплатной, но предварительно регистрируйся

Также, я себе сделал личный топ из 5-ти докладов, которые обязательно хочу посмотреть:
✅ Wix Serverless from inside [ukr]. Я разработчик serverless платформы в Google Cloud и опыт Wix мне очень интересен.

✅ How to Use Bazel to Manage Monorepos: The Grammarly Front-End Team’s Experience [rus]. Bazel это опен-сорс версия гугловой системы сборки. Я все еще пытаюсь понять ее преимущества и недостатки. И опыт ребят и Grammarly очень интересен.

✅ Discussion on System Design [UA][RU]. Эту тему я просто люблю 🙂

✅ How does Node.js optimize JavaScript code? Eugene Obrezkov. Тут 2 причины. Первая - Женя крутой спец и может сделать хороший deep-dive. Вторая - я когда-то делал движок Excel на JavaScript и тогда мне пришлось разбираться во внутренностях v8, чтобы выжать максимальную производительность. Интересно, как дела сейчас с этим.

✅ Node.js Development in 2022: trends and techniques. Nikita Galkin. Никита всегда следит за трендами и этот доклад хорошая возможность быть в теме.

Бонус для подписчиков:
Мне очень нравится модель участия от Fwdays :
🔹 Free Online (регистрация бесплатно и только трансляции)
🔹 Full Online (запись всех эфиров)
🔹 Online Full Swag (для ценителей мерча)

И у меня есть 2 промокода на 100% скидки на "Full Online".
Розыграем их во вторник рано утром.

Для участия в розыгрыше нужно:
1. Оставить любой комментарий к этому посту.
2. Заволофить любого спикера на https://my-talks.net/

Начинаем https://us02web.zoom.us/j/85162497213

Какой гаджет/девайс нравится?

Думаю над подарком себе на Новый год. Ищу идеи и решил спросить у подписчиков 🙂

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

Обновление my-talks.net

Большое спасибо за фидбек по платформе. Мы сделали много улучшений. Решил описать, что поменялось:

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

Другие улучшения
✅ У нас есть логотип 🙂
✅ Теперь спикеры с предстоящими докладами попадают в топ списка.
✅ Убрали разделения на типы пользователей (подписчики/спикеры). Теперь спикеры тоже могут подписываться на других спикеров, а подписчики могут в будущем создать доклад при желании.
✅ Теперь есть возможность добавить предстоящий интересующий доклад в Google календарь.
✅ Улучшили дизайн страницы со спикерами.
✅ Добавили имя спикера на страницу с докладом.
✅ Сделали подписи на кнопках более понятными.
✅ Переделали главную страницу.

Раздел Call for papers🔥🔥🔥
Это главное улучшение. Раздел Call for papers - это возможность подать доклад на конфу в несколько кликов. Просто выбираете конференцию, выбираете "Существующий доклад" или "Новый доклад", заполняете пару полей и вся информация уходит организаторам ивента. Раздел пока пуской, но скоро будет ряд ивентов в нем.

Как помочь сервису:
✴️ Добавить свои доклады или подписаться на спикеров
✴️ Сообщить о багах
✴️ Фидбек по улучшению сервиса
✴️ Скидывайте ссылки, если знаете похожие сервисы

Уже завтра OdessaJS Interview TechCorner

Завтра обсуждаем собеседования и рынок труда на онлайн техкорнере. Собирается очень крутая компания спикеров в одном ивенте.

https://my-talks.net/viktor-turskyi/odessajs-interview-techcorner-odessajs-interview-techcorner

Главное, не забудь зарегистрироваться! 🤓

UPD: видео уже доступно по ссылке

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

Пиши варианты в комментах 🤓

Правильный ответ с разбором будет в следующем посте

UPD: ответили в комментариях :)

Новые крутые возможности на my-talks
Мы продолжаем развивать сервис для спикерского портфолио https://my-talks.net . Цель - лучший сервис для спикерского портфолио. Мне, как спикеру, очень не хватало такого :). Для спикеров будет всегда бесплатным.

Из последних улучшений:
✅ Заработал раздел с Call for Papers. Уже можно податься с докладом на React fwdays’22 🙂
✅ Появился раздел с уведомлениями. Теперь вы можете узнавать про новых подписчиков, про новые call for papers и тд
✅ Списки подписчиков, как в Twitter
✅ Кроппер для картинок (для доклада, спикера и тд)

Мы активно работаем над удобством анонса предстоящих докладов. Платформа не только для уже прошедших докладов, но и для будущих :)

Как помочь сервису?
🔸 Если ты начинающий спикер даже с одним докладом, обязательно создавай свое портфолио.
🔸 Если ты организатор конференции/митапа и ищешь спикеров, то давай разместим твое CFP на my-talks.
🔸 Пиши в комментариях, что еще хотел бы видеть в сервисе. Я анализирую все идеи и мы много уже добавили благодоря такому фидбеку.

Бесплатный митап по React в Киеве 18-го января
Я устал от онлайн конференций и стараюсь последний год в них не участвовать (только в формате обсуждения или какого-то интерактива). И вот я наконец-то долждался живой встречи в Киеве 🙂. Да и про Next.js хочу послушать, использовали его в ряде проектов и планирую доклад сделать.

Ивент бесплатный, но нужна предварительная регистрация - https://www.meetup.com/react-talks-kyiv/events/283060842/
Я уже зарегистрировался (просто как участник, без доклада).

Кто идет?

Как задизайнить Facebook за пол часа или секреты System Design Interview

Не так давно я проходил собеседования в Google. Это было:
✅ 2 coding interview
✅ 2 system design interview
✅ technical leadership interview
✅ domain knowledge interview (я выбрал web development)

System design собеседования одни из самых интересных, но одновременно и самых сложных. Даже имея большой опыт, их легко завалить, если не подходить к этому вопросу структурно. Тебе намерено дают максимально размытую задачу и тут важно прояснить требования (и это сильно влияет на результаты собеседования). Задачи бывают совершенно разные, но классический пример - это "спроектируйте Facebook".

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

ВИДЕО ДОКЛАДА: https://www.youtube.com/watch?v=Be7INI_U6GY

Кому приходилось проходить уже system design собес и в какую компанию? 🙂

Сеть Google
Многие слышали, что одно из преимущество Google Cloud - это быстрая и надежная сеть. И отличается она от других провайдеров, поскольку у Google можно сказать свой "интернет" - отдельные подводные оптоволоконные каналы. Кабель в диаметре несколько миллиметров передает десятки терабайт в секунду.

5-ти минутное видео про это https://www.youtube.com/watch?v=ltE37wwbU9g

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

ССЫЛКА НА ПОСТ: https://www.linkedin.com/posts/turskyi_google-softwareengineering-activity-6900342721773387776-_TlM

Cмело лайкайте/комментируйте - тогда я буду понимать, что контент интересен, ну, и линкедин бустить пост 🙂

Видео OdessaJS Architecture Techcorner
На этой неделе я участвовал в онлайн обсуждении архитектуры веб-приложений. Сначала обсуждали общие подходы, а потом перешли к вопросам слушателей. Собралась очень крутая компания и получилась отличная дискуссия.

ВИДЕО - https://my-talks.net/viktor-turskyi/architecture-online-techcorner-odessajs-architecture-online-techcorner-2022

Подписывайтесь на спикеров на my-talks, чтобы получить уведомления про новые видео.
Мой профиль - https://my-talks.net/viktor-turskyi

Моя страна атакована, мой город атакован, не хочу делать вид, что этот канал вне политики.

Сегодня Путин объявил войну Украине, мотивируя свои действия идеями "денацификации". Это полная чушь и не имеет ничего общего с реальностью. Когда я жил в Украине я ездил в Донецк и отлично проводил там время. Я ездил во Львов, говорил там по-русски, и отлично проводит там время. Народ Украины и власть, которую украинцы выбрали в ходе демократических выборов, хочет одного — жить мирно и счастливо.

Никакого конфликта между украинцами и русскоговорящими нет и не было. Есть лишь клептократическая власть в России, которая преследует лишь свои интересы и борется со своими страхами. Борется ценой свободы других людей — украинцев, россиян, всего мира. Разрушая, вместо того, чтобы создавать и работать вместе.

Я знаю, что в этом канале много россиян. Посмотрите обращение президента Зеленского к россиянам (на русском с 02:03).

Всех призываю помочь фонду "Повернись живим". Это можно сделать тут:
* https://www.patreon.com/savelife_in_ua
* https://savelife.in.ua/donate/

Переживаю, но верю в будущее 🇺🇦