К старту курса по Fullstack-разработке на Python делимся лонгридом от ведущего программиста компании THG. Специалистам материал будет полезен в подготовке к собеседованиям, а новичкам поможет получить целостное представление о том, что происходит у браузера под капотом.
Software Engineer
Безопасность веб-приложений
Порой мы халатно относимся к безопасности, не выделяем для неё достаточно времени, потому что "да что может случиться". На примере Васи, нашего веб-разработчика, мы покажем, что лучше ей не пренебрегать. Хотя бы базовыми её принципами.
Как работает React: подробное руководство
Привет, друзья!
В этой статье я покажу вам, с чего начинается React
.
Что это означает? Это означает, что мы разработаем мини-версию React
, которая сможет выполнять следующий код:
import '../style.scss'
import MyReact from './my-react'
const buttonStyles = {
border: 'none',
outline: 'none',
padding: '0.3rem 0.5rem',
marginLeft: '0.5rem',
backgroundImage: 'linear-gradient(yellow, orange)',
borderRadius: '2px',
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
cursor: 'pointer'
}
/** @jsx MyReact.createElement */
function Counter() {
const [value, setValue] = MyReact.useState(1)
const [count, setCount] = MyReact.useState(1)
return (
<section>
<h1 className='title'>Hello from MyReact!</h1>
<div className='box'>
<input
style='width: 80px; padding: 0.15rem 0.5rem;'
type='number'
value={value}
onInput={(e) => {
setValue(Number(e.target.value))
}}
/>
<button
style={buttonStyles}
onClick={() => {
setCount((count) => count + value)
}}
>
Increment
</button>
</div>
<h2 className='subtitle'>
Count: <span className='count-value'>{count}</span>
</h2>
<ul className='list'>
{['React', 'from', 'scratch'].map((item) => (
<li>{item}</li>
))}
</ul>
</section>
)
}
MyReact.render(<Counter />, document.getElementById('app'))
Как вы могли догадаться, наша версия будет называться MyReact
.
Скриншот:
При разработке мы будем придерживаться архитектуры исходного кода React
. Вместе с тем, следует отметить, что за последние 2 года исходный код React
претерпел значительные изменения, поэтому некоторые вещи, которые мы будем рассматривать, помечены в нем как legacy
. Несмотря на это, общие принципы и подходы остаются прежними.
Ликбез по распространенным Client-Side уязвимостям
В этой статье мы покажем:
- как в разных ситуациях манипулировать веб-сайтом таким образом, чтобы он передавал пользователям вредоносный JavaScript.
- как скомпрометировать администратора сайта, отправив ему личное сообщение;
- как атаковать разом всех пользователей при помощи комментария под статьей;
- как заставить пользователя отправить запрос на действия, которые он не собирается выполнять;
- как прослушивать WebSocket-соединения;
- и коротко объясним, как предотвратить все эти безобразия.
В общем, под катом вас ждет рассказ про распространенные уязвимости на стороне клиента и некоторые методы Client-Side защиты.
JavaScript: ускоряем загрузку изображений с помощью Imgproxy, Cache API и Service Worker API
Привет, друзья!
В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).
Мы с вами разработаем простое приложение на React, в котором используется несколько изображений, и добьемся того, что загружаемые изображения будут более чем в 10 раз легче (меньше по размеру) оригиналов (imgproxy
), а также практически мгновенной загрузки (доставки) изображений (СВ и кеш).
Обратите внимание: в части, касающейся imgproxy
, особых препятствий на пути использования рассматриваемого в статье подхода к загрузке изображений в продакшне нет, но в части, касающейся СВ, следует проявлять крайнюю осторожность, поскольку данная технология является экспериментальной — это означает, что поведение СВ во многом определяется конкретной реализацией (браузером), что в ряде случаев делает его довольно непредсказуемым. Возможно, для кеширования изображений лучше предпочесть старые-добрые HTTP-заголовки
Cache-Control и Etag. Но эксперимент на то и эксперимент, чтобы, в том числе, искать новые ответы на старые вопросы.
Для тех, кого интересует только результат эксперимента, вот репозиторий с исходным кодом проекта.
Остальных прошу под кат.
Архитектура WhatsApp, которую Facebook купил за $19 миллиардов
В очередной раз хочу предложить свой перевод статьи, на этот раз автор Тодд Хофф, и его статья посвященна архитектуре WhatsApp на момент его покупки Facebook.
Ремарка: в начале статьи содержится рассуждение автора оригинала о том, зачем Facebook купил WhatsApp за баснословные 19 миллиардов. Если это вам не интересно — просто пролистайте, описание архитектуры будет ниже.
Рик Рид в его предстоящем мартовском докладе, озаглавленном "Миллиард с большой 'М': Следующий уровень масштабирования в WhatsApp" раскрывает сногсшибательную статистику WhatsApp:
Что имеет сотни узлов, тысячи ядер, сотни терабайт RAM и надеется обслужить миллиарды смартфонов, которые вскоре станут реальностью по всему миру? Основанная на Erlang и FreeBSD архитектура WhatsApp. Мы столкнулись со многими трудностями при удовлетворении постоянно растущего спроса на наш сервис обмена сообщениями, но мы продолжаем расширять нашу систему с точки зрения размера (> 8000 ядер) и с точки зрения скорости (>70М сообщений Erlang в секунду).
Микрофронтенд для самых маленьких
Всем привет. Меня зовут Алексей. Сейчас я работаю frontend-разработчиком в компании Ozon. В свободное время мне нравится читать про новые технологии, фреймворки, а учитывая то, с какой скоростью развивается frontend, я никогда не скучаю. В этой статье пойдет речь о микрофронтах. В частности, мы посмотрим, как их реализовать на самом базовом уровне, разберемся, когда они нужны, а когда даже не стоит смотреть в их сторону.
Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite
Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в Event loop, нашу главную браузерную цепочку?" Вздохнуть. Закрыть дверь. Лечь досыпать. До начала рабочего дня еще 4 часа. А там уже ивент лупы, лейауты и прочая радость…
В первой части мы говорили о первой загрузке и работе с ресурсами. Сегодня я расскажу о второй части оптимизации производительности фронтенда. О том, что происходит с нашей страницей, когда она загружена, на что уходит процессорное время и что с этим делать. Ключевые слова: event loop, paint \ repaint, layout \ reflow, composite.
Statoscope: курс интенсивной терапии для вашего бандла
Statoscope — это инструмент для анализа webpack-бандлов, а я его автор и мейнтейнер. Он зародился в далеком 2016 году как эксперимент, а теперь это полноценный тулкит для просмотра, анализа и валидации сборки.
В ноябре на конференции HolyJS я выступил с докладом о Statoscope и провёл воркшоп по его использованию. Зрителям понравилось, так что мы с организаторами HolyJS решили, что доклад может пригодиться и читателям Хабра — поэтому сделали текстовую версию. Видеозапись тоже прилагаем.
Как работают браузеры. Часть 2: парсинг и выполнение JS
Примечание переводчиков: статья предназначена для начинающих разработчиков и интересующихся разработкой. Здесь нет глубоких технических деталей, хотя, возможно, вы найдете что-то новое для себя.
В прошлой статье мы обсудили навигацию и получение данных. Сегодня поговорим о HTML- и CSS-парсинге и выполнении JavaScript.
Содержание:
1. HTML-парсинг:
— Парсинг
— Браузерные движки
— Токенизация
— Построение DOM
— Предварительные загрузчики и ускорение страницы
2. CSS-парсинг:
— Токенизация и построение CSSOM
3. Выполнение JavaScript:
— Движки JavaScript
— Компиляция
— Интерпретация
— Комплияция Just-In-Time
— Как обрабатывается код JavaScript
Selenium vs Puppeteer vs Cypress vs Playwright
Всем привет. Я qa automation engineer уже 14 лет и 9 из них мне так или иначе приходилось работать с автоматизацией веб-приложении (и не только). Я писала свои автотесты на C#, Java, и Js. Сейчас я хотела бы поделиться опытом, как я выбираю фреймворк для тестирования веб приложения. Думаю кому-то мой текст может быть полезен.
Первое, с чего следует начинать создания своего фреймворка, - это с выбора движка взаимодействия с браузером. Именно движок в дальнейшем станет краеугольным камнем ваших тестов. Именно выбор движка является фундаментом дома, который вы строите (и потом этот фундамент никак не переделать сторонними библиотеками).
CSS и iOS Safari
Всегда хочется, что бы твой сайт выглядел одинаково хорошо на разных устройствах, включая и мобильные. Но, если поведение в браузерах Android во многом предсказуемо, то с iOS возникает ряд «сюрпризов». О них сегодня и поговорим!
React Intl: интернационализация React-приложений
Библиотека React Intl
предоставляет механизм для перевода текста на другие языки.
В данном "туториале" мы используем названную библиотеку для реализации интернационализации в проекте, написанном на React
. Мы создадим простое приложение, позволяющее пользователю выбирать язык приложения.
Мы также реализуем возможность сохранения выбранного языка в локальном хранилище браузера для обеспечения его доступности после перезагрузки страницы и последующих визитах пользователя.
Исчерпывающий путеводитель по тегу iframe
Элемент iframe (сокращение от встроенного фрейма), вероятно, является одним из старейших тегов HTML и был представлен ещё в далеком 1997 году в HTML 4.01 Microsoft Internet Explorer.
Хотя все современные браузеры поддерживают данный тег, многие разработчики пишут бесконечные статьи, не советуя им пользоваться. Я считаю, что плохая репутация, которая сформировалась, около данного тега не должна мешать вам использовать его. У данного тега есть много хороших примеров применения. Кроме того, iframe не так сложно защитить, поэтому вам не придется беспокоиться о заражении компьютера вашего пользователя.
Чтобы помочь вам сформировать собственное мнение и отточить свои навыки разработчика, мы расскажем обо всем, что вам нужно знать об этом противоречивом теге.
Мы рассмотрим большинство функций, которые предоставляет элемент iframe, и поговорим о том, как их использовать, а также о том, как iframe может быть полезен для преодоления некоторых сложных ситуаций. Наконец, мы поговорим о том, как вы можете защитить свой iframe, чтобы избежать потенциальных уязвимостей.
Руководство по парольной политике. Часть 2
Продолжение. С первой частью можно ознакомиться здесь.
Вторая часть универсального руководства, переведенного экспертами Origin Security специально для наших читателей. Ознакомившись с этим документом, вы узнаете буквально все о создании надежных паролей.
Бандлинг JavaScript-кода и производительность: передовые методики
Автор статьи, перевод которой мы сегодня публикуем, собирается исследовать три подхода к бандлингу JavaScript-проектов на примере простого Hello World-приложения, созданного с помощью React. Некоторые из приводимых им примеров подразумевают знание читателем основ сборщиков модулей, таких, как Webpack, который, похоже, является сегодня самым популярным среди подобных инструментов.
Всё, что вы хотели знать о динамическом программировании, но боялись спросить
# Весь код в статье написан на языке Python
Основы
Пожалуй, лучшее описание динамики в одно предложение, которое я когда либо слышал:
Динамическое программирование — это когда у нас есть задача, которую непонятно как решать, и мы разбиваем ее на меньшие задачи, которые тоже непонятно как решать. (с) А. Кумок.
RESTful API для сервера – делаем правильно (Часть 1)
Какое будущее ждет email: Мнения создателя Wikipedia, инженеров и предпринимателей из Кремниевой долины
В нашем блоге мы много пишем о создании почтовых рассылок и использовании email в качестве средства коммуникации. Ранее мы уже говорили о том, почему электронная почта никогда не умрет, и почему этот инструмент так сложно улучшить. Сегодня же речь пойдет о конкретном будущем email в сфере делового общения — именно этим вопросом задались пользователи сервиса Quora. Мы представляем вашему вниманию их лучшие ответы.
Полное руководство по Flexbox
Информация
- В рейтинге
- Не участвует
- Откуда
- Тула, Тульская обл., Россия
- Дата рождения
- Зарегистрирован
- Активность