Веб-разработка *

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

В конце прошлого года Суд Европейского союза запретил сайтам устанавливать cookies по умолчанию и использовать предварительно заполненные чек-боксы на соответствующих баннерах. Регулятор заявил, что эти практики противоречат требованиям Общего регламента по защите данных.

В начале мая Европейский совет по защите данных (European Data Protection Board, EDPB) поставил точку еще в одном вопросе — cookie-стены нарушают GDPR. Обсуждаем ситуацию.

Привет, Хабр! Я рад сообщить, что Blazor WebAssembly теперь официально выпущена и доступна для всех. Это полнофункциональный и поддерживаемый выпуск Blazor WebAssembly, готовый к использованию в продакшене. Фулл-стак веб-разработка с .NET! Подробности под катом.

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

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



Демо и документация
Github
Плагин для React

Подобный эффект я реализовывал данным давно, еще в университете и на Delphi. Получилось вполне достойно, правда времени я потратил тогда очень много. Сейчас, во время самоизоляции, стало интересно реализовать что-то подобное на JS, для PC и мобильных устройств.

Признаться честно, я не уверен в практической применимости данного эффекта, и думаю что в большинстве случаев, нет ничего лучше простой смены картинок без всякой анимации. Но это вполне можно использовать, допустим на сайтов ресторанов, для публикации меню (но главное — что бы рядом дублировалось ссылкой!).

Написано все на Typescript. Не использовались ни какие сторонние библиотеки. Зависимостей нет.

Ключевые особенности библиотеки

• Работает как с простыми изображениями, с отрисовкой на canvas, так и с html блоками — используя css трансформации
• Довольно гибкая система конфигурации и простое API
• Поддерживает мобильные устройства
• Автоматическая смена ориентации между портретным и ландшафтным режимом

В поисках современных методов и инструментов, позволяющих нам хоть с какой-то долей уверенности утверждать, что веб-сайт защищён от будущих хакерских атак (В том, что они будут у всех, ни у кого ведь нет сомнений? И если их еще не было, то это лишь вопрос времени), были найдены рекомендации, которые в этой статье рассмотрим.

Этот небольшой, но важный список конкретных действий, который следует производить каждому со своим веб-ресурсом, если репутация компании, безопасность веб-ресурсов и данных клиентов – это не пустые слова для вас.

Чтение исходного кода известных фреймворков может хорошо помочь программисту в улучшении его профессиональных навыков. Автор статьи, перевод которой мы сегодня публикуем, недавно анализировал код vue2.x. Он нашёл в этом коде некоторые интересные JavaScript-идеи, которыми решил поделиться со всеми желающими.

Так как нас не устраивала скорость и надежность исходной имплементации на Ruby, в последние несколько лет мы постепенно выводили критический функционал из нашего Rails-монолита GitHub.com и переписывали часть кода на Go. Например, на Github Satellite в прошлом году мы анонсировали — и имплементировали — возможность «более контролируемой авторизации» с использованием сервиса authzd.

Работа с authzd оказалась очень интересной и значимой для нас задачей, поскольку это был наш первый сервис на Go для работы с чтением данных из баз MySQL на продакшне в ходе веб-реквеста. У нас имелся опыт развертывания других работающих с базами MySQL-сервисов на Go, но при этом они были либо службами внутреннего контроля (наша кластерная поисковая система manticore), либо асинхронными пакетными заданиями (оркестратор резервного копирования Git gitbackups). Требования к производительности и надежности authzd отличаются от них повышенной строгостью, поскольку обычный реквест к Rails-монолиту вызывает этот сервис неоднократно.

Кроме того, проблемы с большими задержками при открытии TCP соединений на наших Kubernetes кластерах особенно влияли на пул соединений Go MySQL драйвера. Это добавляло работы, ведь именно на Kubernetes мы и развернули authzd. Одним из самых опасных самообманов программиста в этом отношении является вера в надежность сети, поскольку да, в большинстве случаев сеть действительно надежна… но как только она начинает тормозить или барахлить, нас настигают базовые проблемы таких же базовых библиотек, и все начинает рушиться.

Так чего нам в итоге стоила подготовка authzd к обработке всего нашего рабочего трафика через SQL, да еще и в соответствии с нашими целями доступности?

Мы долго считали, что стандартные инструменты Google Analytics – лучший способ получить полезную информацию. Временами приходилось сталкиваться с некоторыми ограничениями и весьма странными результатами, и казалось, этому нет конца и края, пока некоторые аналитики не открыли для себя Google Analytics 360 и механизмы экспорта необработанных данных в Google BigQuery.

Спустя всего несколько часов работы с более продвинутыми инструментами и SQL-запросами, мы смогли извлечь информацию, которую бы никогда не получили, используя только сводные отчеты Google Analytics. С того момента мы сосредоточились на изучении особенностей необработанных («сырых») данных и на том, какую практическую пользу из них могут извлечь специалисты в области веб-аналитики.

В этой статье есть ответы на следующие вопросы:

• В чем разница между необработанными и сводными данными?
• Какую пользу можно извлечь от использования необработанных данных?
• Как получить доступ к необработанным данным?
• Как использовать эти новые данные (практические примеры)?

Чем отличаются raw и сводные данные в Google Analytics

Используя бесплатную версию сервиса Google Analytics, можно получать только сводные данные. То есть, полная информация о просмотрах для конкретного визита и события будет недоступна. Разумеется, отчет User Explorer содержит много полезной информации, которую могут использовать веб-аналитики. Однако на этот файл наложены определенные ограничения: он не масштабируется и недоступен для скачивания.

В большинстве случаев наличия лишь сводных данных достаточно для получения ответов на распространенные вопросы:

• Какая кампания приносит наибольшее число конверсий?
• Насколько распространенной является технология машинного обучения Feature X (растет ли число ее пользователей)?
• Откуда приходят посетители (основные источники трафика)?
• С каких устройств пользователи переходят на сайт?

В России 16 млн школьников, свыше миллиона учителей (из них около 700 тысяч как-то пользуются онлайн-инструментами) и 40 тысяч школ. В середине марта тысячи школ временно закрыли двери и официально перешли на дистанционное образование. После весенних каникул миллионы людей были вынуждены экстренно привыкать к образованию на удаленке. Переход в онлайн оказался болезненным.



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

Когда мы узнали об учительнице, которая за неделю проверила 1100 фотографий ДЗ, то поняли, что должны помочь.

Введение

Умение реализовать грамотное REST API — полезный навык в наше время, т.к. все больше сервисов предоставляют свои возможности с помощью API. Но разработка REST API не ограничивается реализацией HTTP запросов в определенном стиле и формированием ответов в соответствии со спецификацией. Задача обеспечения безопасности REST API не так очевидна, как, например, обеспечение безопасности баз данных, но ее необходимость не менее важна.
В настоящее время многие онлайн системы с помощью API передают приватные данные пользователей, такие как медицинские или финансовые. Текущая же ситуация с безопасностью в веб-приложениях весьма печальна: по данным Comnews порядка 70% содержат кри­тичес­кие уязвимости. Поэтому всем, кто участвует в проектировании, реализации и тестировании онлайн систем, важно иметь общую картину по существующим угрозам и способам обеспечения безопасности как всей системы, так и используемого REST API.

В статье я попытался обобщить информацию о существующих уязвимостях REST API, чтобы у читателей сложилась общая картина. На схемах представлена современная архитектура клиент-сервер и обобщенный REST API запрос с потенциальными угрозами безопасности. Далее я подробнее расскажу об этих угрозах, и как технически реализовать защиту от них.

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



Читателям Хабра был предложен небольшой тестовый пример ленты комментариев, в котором можно было попробовать данный подход в действии.

Спасибо всем, кто принимает участие в тестировании! Уже первоначальная статистика позволяет говорить, что читатели уверенно выполняют модерацию. Сейчас пришло время двинутся дальше. В этом посте хочется обсудить простейшее возможное устройство веб-сервиса, реализующего данный подход. К сожалению, опыта для реализации такой задачи маловато, поэтому требуется совет Хабр сообщества.

Всем привет!

Меня зовут Сергей, я работаю в команде разработки приложений контроля качества Tinkoff.
Поделюсь опытом нашей команды в использовании библиотеки Mobx и расскажу о деталях работы с ней в связке с React. В этой статье не будет описания базовых концепций. Я расскажу о вещах, которые мы отметили для себя за время разработки и считаем полезными для всех, кто решил использовать Mobx в своем проекте.

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

Доброго времени суток. Представляю вашему вниманию перевод статьи «Amazon Coding Interview Questions» автора Trung Anh Dang.

В этой статье автор приводит несколько (три, если быть точнее) задач от Amazon (как он утверждает) и свои варианты решений.

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

Итак, поехали.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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



Автор материала, перевод которого мы сегодня публикуем, полагает, что существует шесть концепций, глубокое знание которых нужно Angular-разработчикам для того чтобы создавать хорошо спроектированные приложения. При этом он говорит не об изучении исходного кода реализации этих концепций, хотя и ему самому иногда приходится заглядывать в код. Речь идёт о понимании соответствующих механизмов и об умении применять их на практике.

Производительность — это ключ к успеху веб-приложения. Поэтому разработчикам нужно знать о том, как возникают утечки памяти, и о том, как с ними бороться.

Эти знания особенно важны в том случае, когда приложение, которым занимается разработчик, достигает определённого размера. Если уделять утечкам памяти недостаточно внимания, то всё может закончиться тем, что разработчик, в итоге, попадёт в «команду по устранению утечек памяти» (мне доводилось входить в состав такой команды).



Утечки памяти могут возникать по разным причинам. Однако я полагаю, что при использовании Angular можно столкнуться с паттерном, который соответствует самой распространённой причине возникновения утечек памяти. Существует и способ борьбы с такими утечками памяти. А лучше всего, конечно, не бороться с проблемами, а избегать их.

Привет, Хабр! Вышел релиз Blazor WebAssemby и я немного обновил свой сайт. За подробностями добро пожаловать под кат.

Заказчик

Независимый организатор конференций. Организовывающий отраслевые мероприятия на товарных рынках, с целью создания делового общения. Проводящие конференции в Европе, Центральной Азии.

Задача

Создать промо сайта для привлечения спонсоров, спикеров, и слушателей на конференцию. Разработать визуальный язык бренда, для позиционирования и вовлечения в мероприятие.

^{Рыжик помогает мне ревьюить код. А когда ему что-то не нравится — тоже настоящий Терминатор}

«Code review Терминатор», — однажды назвал меня коллега после особо продуктивного ревью. С одной стороны, это тешило ЧСВ и было приятно. С другой — коллега действительно научился чему-то новому, и это позволило писать ему более качественный код. Так что win-win.

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