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

Подборка свежих уроков, видео и пакетов по фреймворку Laravel за неделю.

Вводная

• Пользователь хочет на сайте иметь пароль «12345».
• Хакер может легко подобрать этот пароль.
• Но пользователь должен войти, а хакер нет. Даже если логин и пароль хакеру известны.
• и никаких SMS с секретными кодами и посредниками в виде дополнительных сервисов. Только пользователь и ваш сайт со страницей логина.
• а еще можно будет сравнительно безопасно в троллейбусе сказать своей жене: «Галя, я на сайте site для нашего логина alice поменял пароль на 123456 — говорят, он более популярный, чем наш 12345». И не бояться, что аккаунт взломают за секунду.

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

Здравствуйте, меня зовут Дмитрий Карловский и недавно я, вместе с Артуром Мукминовым, проводил воркшоп, где показывал как разрабатывать сложные типофункции через тестирование. Это 2 часа сурового программирования на типах. Так что в качестве тизера, ловите разбор курьёзов тайпскриптовой системы типов.

25 лет назад, 4 декабря 1995 года JavaScript был впервые представлен миру. Мы хотим отметить день рождения языка и поблагодарить вас за его поддержку все эти годы, поэтому мы подготовили для вас небольшой сюрприз!

Замечательной особенностью веб-компонентов или скорее даже языка разметки HTML является возможность прозрачно оборачивать существующий контент новым. Благодаря этому, вы можете практически неинвазивно дорабатывать существующий legacy код, а так же изящно структурировать новый.

Говоря конкретно, если вы обернете какую-то верстку своим кастомным элементом (гугл. Custom Elements), в хуке connectedCallback(), то ваш элемент может определить какие у него внутри есть подэлементы и настроить свою и их работу соответствующим образом если надо приспособить их к новым требованиям и это будет вполне себе архитектурно грамотным решением. Также он будет получать всплывающие события от своих подэлементов и если вы включили изоляцию теневого дерево, он станет их безальтернативным брокером (а если не включили - прозрачным прокси), т.к. за его пределы они всплывать не будут и вся ответственность ляжет на него. 

На прошлой неделе мы выложили пост про то, как мы мониторим backend и микросервисную инфраструктуру с помощью Instana, и пообещали написать продолжение про мониторинг frontend.

В итоге мы решили не ограничиваться обзором Instana в качестве инструмента контроля frontend, а копнуть немного глубже и рассказать, для чего вообще нужен End User Monitoring, с какими проблемами производительности фронта мы сталкиваемся чаще всего, какие мы используем сценарии работы с собранными данными, и как Instana помогает нам контролировать пользовательский опыт в целом.

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

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

Содержание:

• Что такое HTML?
• Что такое HTML-инъекция?
• Угрозы HTML-инъекции
• HTML-инъекция и XSS
• Типы инъекций
  
  • Сохраненный HTML
  • Отраженный HTML
    
    • GET
    • POST
    • Текущий URL
• Защита от HTML-инъекции

Что такое HTML?

HTML (HyperText Markup Langauge) — это основной строительный блок сети, который определяет формирование веб-страниц в веб-приложении. HTML используется для разработки веб-сайтов, состоящих из «гипертекста», чтобы включить «текст внутри текста» в качестве гиперссылки и комбинации элементов, которые визуально отображаются в браузере.

Что такое элемент?

Элемент — это основная структурная единица веб-страницы. Он содержит открывающий и закрывающий теги с текстовым содержимым между ними».

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

Его появлению предшествовало 15 лет практики тестирования в компании IBS AppLine* (лидера российского рынка аутсорсинга услуг тестирования по версии TAdviser за 2018 год на минуточку!). На базе этих знаний и экспертизы мы задались целью ускорить старт проектов, повысить качество тестирования, упростить введение в работу новичков. Решение должно позволить автоматизировать функциональное тестирование веб, мобильных, десктоп-приложений и различных видов API.

В общем, исследовательский центр IBS AppLine Innovation** суммировал весь опыт компании и создал «Хамелеон» — инструмент для автоматизации функционального тестирования. Делался с использованием языка программирования Java и инструментов Cucucmber, Selenium, Appium, Winium, Spring. Этот фреймворк:

• позволяет сэкономить до 30% времени разработки и сопровождения тестов;
• снижает риск ошибок за счет автоматического заполнения параметров этапов теста;
• помогает обучать и привлекать к разработке тестов стажеров, владеющих только базовыми навыками программирования;
• при переходе с проекта на проект дает возможность использовать одну и ту же библиотеку шагов, а также единый подход к написанию тестов;
• может работать с экзотическими компонентами тестируемых систем благодаря удобству подключения дополнительных расширений.

Теперь подробнее о функционале…

• Мы реализуем один из самых простых вариантов клиентской маршрутизации и рендеринга, парочку более сложных и универсальных (если угодно, масштабируемых) способов можно найти здесь
• Обойтись совсем без сервера не получится. Мы будет манипулировать историей текущей сессии браузера: при ручной перезагрузке страницы браузер отдает предпочтение серверу, т.е. пытается получить несуществующую страницу, что приводит к печальным последствиям в виде невозможности установить соединение (мои попытки обмануть браузер с помощью сервис-воркера, т.е. проксировать отправляемые им запросы, не увенчались успехом). Единственной задачей нашего примитивного сервера будет ответ в виде index.html на любой запрос. Это позволит браузеру перейти к выполнению клиенского скрипта
• Везде, где это возможно и уместно, мы будет использовать динамический импорт. Он позволяет загружать только запрашиваемые ресурсы (раньше это можно было реализовать только посредством разделения кода на части (chunks) с помощью сборщиков модулей типа Webpack), что хорошо сказывается на производительности. Использование динамического импорта сделает почти весь наш код асинхронным, что, в целом, тоже неплохо, поскольку позволяет избежать блокировки потока выполнения программы

Всем привет! Мы рады представить вам последнее крупное обновление WebStorm в 2020-м году. В этот раз улучшений очень много. Ниже расскажем про основные из них.

Смоделируем ситуацию: Вы являетесь членом команды веб-разработчиков, занимающихся созданием frontend-части молодого интернет-ресурса на базе React. И вот, когда уже начинает казаться что ваша разработка достигла определенной функциональной, качественной и эстетической кондиции, вы сталкиваетесь с достаточно сложным и не менее интересным вопросом: А что делать с SEO? Как добиться качественной конверсии от поисковых систем? Как сделать так, чтобы о вашем ресурсе узнал весь мир, не вкладывая в это огромного количества денег за платные рекламные компании либо сил в крупномасштабную дополнительную разработку? Как заставить контент вашего Single Page Application работать на вас в поисковых выдачах и приносить клиентов? Интересно? Тогда поехали…

Парад релизов: обновление языка — PHP 8.0, а также Xdebug 3, DBAL 3.0, Bref 1.0, Symfony 5.2, Flysystem 2.0. Первый принятый RFC для PHP 8.1, долгосрочная поддержка PHPUnit, порция полезных инструментов, подкасты, стримы, статьи.

Приятного чтения!