В этой части разберем устройство, виды и повадки современных телевизоров.
Основные характеристики — всякие яркости, HDRы, контрасты и цветовые охваты, что они значат и зачем нужно 120Гц, мы разобрали в предыдущей части.
User
Олды в ИТ
18 min
Когда ты молод, ты «бессмертен» и не задумываешься о старости. Есть просто уверенность, что если много и хорошо работать, то твоя карьера и доходы будут неуклонно расти. Следуя этой стратегии, ты развиваешься в профессии уже 15, 20, 30 лет. За эти годы уже получил огромный опыт и, наверное, он обязательно поможет безбедно и интересно прожить остаток дней. Но все не так просто. Да, ты уже давно работаешь в хорошей компании, занимаешься интересными проектами, получаешь за это достойную зарплату, но в будущем уже не так уверен, как раньше. Профессиональный возраст приходит с массой вопросов, на которые нужно ответь стратегически.
Эта статья родилась на основе обсуждения горячей темы «Олды в ИТ», которую 4 января 2021 г. мы записали для подкаста Linkmeup. Обязательно послушайте запись здесь или в любимом подкаст-приложении.
Свободно стилизируемый outline DOM элементов
2 min
Tutorial
В последнее время всё чаще и чаще возникает вопрос о доступности, если раньше скрытие outline для элементов страницы было общим правилом, то теперь хороший сайт должен иметь outline у элементов, как минимум :focus-visible.
Основная проблема outline - это их стилизирование.
Я пришел к своему решению, которое изложено в этой статье.
Автоматическая виртуализация рендеринга произвольной вёрстки
29 min
Здравствуйте, меня зовут Дмитрий Карловский и я.. прибыл к вам из недалёкого будущего. Недалёкого, потому что там уже всё и все тормозят. Писец подкрался к нам незаметно: сначала перестали расти мощности компьютеров, потом пропускная способность сетей. А пользователи… они продолжали генерировать контент как не в себя. В итоге, за считанные годы UX интерфейсов деградировал настолько, что ими стало невозможно пользоваться и многие пользователи поспешили перейти на облачный стриминг своих браузеров, которые работают на суперкомпьютерах, принадлежащих корпорациям, которые не дают людям устанавливать на них блокировщики рекламы. Поэтому я пришёл к вам именно сейчас, в этот момент, когда проблема уже заметна, но ещё можно всё исправить, пока не стало слишком поздно.
9 репозиториев, о которых должен знать каждый веб-разработчик
4 min
Translation
В наши дни GitHub — это универсальное хранилище всего, что связано с веб-разработкой. Фреймворки, демоверсии, всевозможные коллекции — вероятно, нет ничего такого, что вы не могли бы найти на GitHub. Однако в этом огромном количестве и заключается проблема. Есть классные вещи, о которых вы, вероятно, никогда не услышите просто потому, что репозиториев много. Сегодня, специально к старту нового потока курса по веб-разработке мы делимся подбокой некоторых из самых популярных репозиториев GitHub, о которых вы должны знать, каждый из которых имеет по крайней мере ~30 000 звёзд.
Подкасты — самый простой способ повышения кругозора программиста
4 min
Всем привет, меня зовут Антон Околелов, вы можете меня знать по подкасту "Цинковый прод"
Мир программирования постоянно меняется. Появляются новые подходы, языки, базы данных, инструменты, хард и софт. Поэтому, по крайней мере на собеседованиях, которые я провожу, я уделяю большое значение тому, развивается человек или нет. Какие ресурсы он изучает. На какие митапы ходит.
Часто кандидаты отвечают что-то вроде "Ну, я почитываю Хабр, иногда смотрю видосы с конференций, но сейчас вообще-то времени нет, на работе вечный аврал, а дома — у меня ребёнок родился, сам понимаешь, не до саморазвития".
Так вот, это bullshit. Если есть уши, и они способны слушать, то времени для развития полно.
Вы не знаете деструктуризацию, пока
4 min
Translation
С тех пор, как в ES6 была введена деструктуризация (destructuring assignment), прошло уже достаточно времени - теперь она поддерживается во всех передовых браузерах. Ее можно использовать в любой допустимой операции присваивания, например, при присваивании значений переменным, параметрам функции и т. д. Для начала давайте рассмотрим, что такое деструктуризация.
Синтаксис присваивания значений массива или объекта отдельным переменным до введения деструктуризации был чересчур подробным.
Burp и его друзья
11 min
В этой статье мы расскажем о полезных плагинах для Burp Suite Professional — инструмента для анализа веб-приложений. Плагинов много, и, чтобы помочь аудиторам сделать правильный выбор, мы составили список тех, которые сами чаще всего используем в работе.
Детальный обзор Well-known Symbols
12 min
Translation
Доброго времени суток, друзья!
Символ (Symbol) — это примитивный тип данных, представленный в ECMAScript2015 (ES6), позволяющий создавать уникальные идентификаторы: const uniqueKey = Symbol('SymbolName').
Вы можете использовать символы в качестве ключей для свойств объектов. Символы, которые JavaScript обрабатывает особым образом, называются хорошо известными символами (Well-known Symbols). Эти символы используются встроенными алгоритмами JavaScript. Например, Symbol.iterator используется для перебора элементов массивов, строк. Его также можно использовать для определения собственных функций-итераторов.
Данные символы играют важную роль, поскольку позволяют осуществлять тонкую настройку поведения объектов.
Будучи уникальными, использование символов в качестве ключей объектов (вместо строк) позволяет легко добавлять объектам новый функционал. При этом, не нужно беспокоиться о возникновении коллизий между ключами (поскольку каждый символ уникален), что может стать проблемой при использовании строк.
В данной статье речь пойдет о хорошо известных символах с примерами их использования.
Не лайтхаусом единым: как проверить свой сайт со всех сторон
3 min
Когда мы говорим о веб-валидаторах и оптимизации сайта под них, мы чаще всего имеем ввиду Lighthouse/Pagespeed Insights от Google, который давно стал де-факто стандартом для оценки производительности сайта. Кто-то стремится к заветным 100 баллам даже на прототипах и шаблонных приложениях в две кнопки, кто-то в шутку создает абсолютно недоступный сайт с идеальным рейтингом, но для всех фронтендеров лайтхаус предоставляет вменяемую, хоть и довольно поверхностную, аналитику производительности сайта и поиск бутылочных горлышек. Однако скорость загрузки — лишь один из множества параметров, которые стоит проверять на своём сайте, и для большинства других есть свои валидаторы и скоринговые алгоритмы. Мы рассмотрим инструменты для каждого из значимых направлений и составим список, по которому стоит прогонять свой сайт, чтобы в дальнейшем не отлавливать проблемы вручную.
Имитация рисования от руки на примере RoughJS
8 min
Translation
RoughJS это маленькая (<9 КБ) графическая библиотека JavaScript, позволяющая рисовать в эскизном, рукописном стиле. Она позволяет рисовать на
Очарованный изображениями рукописных графиков, схем и эскизов, я, как истинный нерд, задался вопросом: можно ли создавать такие рисунки с помощью кода, как можно точнее имитировать рисунок от руки, в то же время сохранив возможность программной реализации? Я решил сосредоточиться на примитивах — линиях, многоугольниках, эллипсах и кривых, чтобы создать целую библиотеку 2D-графики. На её основе можно создавать библиотеки и графики для рисования графиков и схем.
Вкратце изучив вопрос, я нашёл статью Джо Вуда и его коллег под названием Sketchy rendering for information visualization. Описанные в ней техники стали основой библиотеки, особенно в рисовании линий и эллипсов.
В 2017 году я написал первую версию библиотеки, которая работала только на Canvas. Решив задачу, я потерял к ней интерес. Год спустя я много работал с SVG, и решил адаптировать RoughJS для работы с SVG. Также я изменил структуру API, сделав её более простой, и сосредоточился на простых векторных графических примитивах. Я рассказал о версии 2.0 на Hacker News и внезапно она обрела огромную популярность. В 2018 году это был второй по популярности пост ShowHN.
<canvas> и с помощью SVG. В этом посте я хочу ответить на самый популярный вопрос о RoughJS: как это работает?Немного истории
Очарованный изображениями рукописных графиков, схем и эскизов, я, как истинный нерд, задался вопросом: можно ли создавать такие рисунки с помощью кода, как можно точнее имитировать рисунок от руки, в то же время сохранив возможность программной реализации? Я решил сосредоточиться на примитивах — линиях, многоугольниках, эллипсах и кривых, чтобы создать целую библиотеку 2D-графики. На её основе можно создавать библиотеки и графики для рисования графиков и схем.
Вкратце изучив вопрос, я нашёл статью Джо Вуда и его коллег под названием Sketchy rendering for information visualization. Описанные в ней техники стали основой библиотеки, особенно в рисовании линий и эллипсов.
В 2017 году я написал первую версию библиотеки, которая работала только на Canvas. Решив задачу, я потерял к ней интерес. Год спустя я много работал с SVG, и решил адаптировать RoughJS для работы с SVG. Также я изменил структуру API, сделав её более простой, и сосредоточился на простых векторных графических примитивах. Я рассказал о версии 2.0 на Hacker News и внезапно она обрела огромную популярность. В 2018 году это был второй по популярности пост ShowHN.
Простой шейдер для точечных источников света в тумане
3 min
Translation
Мне нужен был простой и быстрый шейдер, создающий туман, освещённый точечными источниками света. Для его реализации я написал эффект экранного пространства, результаты работы которого показаны ниже. Конвейер почти столь же прост, что и для обычных точечных источников. Он не требует структур данных объёмов, ray marching, и может быть без проблем подключен к уже существующему шейдеру освещения.
Важнейший принцип заключается в том, что можно вычислить в замкнутой форме свет, исходящий из тумана, как будто он освещён точечным источником освещения. Моё решение заключалось в поиске формулы и её подстановке в шейдер.
Небольшая сцена с космическим кораблём, отрендеренная в тумане при помощи моей техники
Важнейший принцип заключается в том, что можно вычислить в замкнутой форме свет, исходящий из тумана, как будто он освещён точечным источником освещения. Моё решение заключалось в поиске формулы и её подстановке в шейдер.
Небольшая сцена с космическим кораблём, отрендеренная в тумане при помощи моей техники
Цена JavaScript-фреймворков
13 min
Translation
Нет более быстрого способа замедлить сайт (такой вот каламбур), чем использовать на нём кучу JavaScript-кода. При использовании JavaScript приходится расплачиваться за это производительностью проектов не менее чем четыре раза. Вот чем JavaScript-код сайта нагружает системы пользователей:
Эта комбинация оказывается очень дорогой.
А мы включаем в состав своих проектов всё больше и больше JS-кода. По мере того, как организации движутся в сторону сайтов, работающих на базе фреймворков и библиотек вроде React, Vue и прочих, мы делаем основной функционал сайтов очень сильно зависящим от JavaScript.
Я видел множество весьма тяжёлых сайтов, использующих JavaScript-фреймворки. Но моё видение вопроса отличается сильной предвзятостью. Дело в том, что компании, с которыми я работаю, обращаются ко мне именно из-за того, что они встречаются со сложными проблемами в области производительности сайтов. В результате мне стало любопытно узнать о том, насколько распространена эта проблема, и о том какие «штрафы» мы платим тогда, когда выбираем тот или иной фреймворк в качестве основы для некоего сайта.
Выяснить это мне помог проект HTTP Archive.
- Загрузка файла по сети.
- Парсинг и компиляция распакованного исходного кода после загрузки.
- Выполнение JavaScript-кода.
- Потребление памяти.
Эта комбинация оказывается очень дорогой.
А мы включаем в состав своих проектов всё больше и больше JS-кода. По мере того, как организации движутся в сторону сайтов, работающих на базе фреймворков и библиотек вроде React, Vue и прочих, мы делаем основной функционал сайтов очень сильно зависящим от JavaScript.
Я видел множество весьма тяжёлых сайтов, использующих JavaScript-фреймворки. Но моё видение вопроса отличается сильной предвзятостью. Дело в том, что компании, с которыми я работаю, обращаются ко мне именно из-за того, что они встречаются со сложными проблемами в области производительности сайтов. В результате мне стало любопытно узнать о том, насколько распространена эта проблема, и о том какие «штрафы» мы платим тогда, когда выбираем тот или иной фреймворк в качестве основы для некоего сайта.
Выяснить это мне помог проект HTTP Archive.
Гибкая разметка без медиа-запросов: функции min(), max(), clamp()
9 min
Translation
Перевод «Flexible layouts without media queries» Dannie Vinther
С момента появления в браузерах в 2017 году, CSS Grid дал веб-дизайнерам и разработчикам новую суперсилу. На данный момент существует множество статей / руководств, иллюстрирующий возможности и преимущества CSS Grid, описывающих всё – от вдохновлённых ASCII-синтаксисом способом разметки Grid-областей до автоматического размещения элементов, делающих медиа-запросы чем-то устаревшим. Тем не менее, медиа-запросы всё ещё играют важную роль и это не может не вызывать некоторые сложности – наверное.
Знаменитые дизайнеры vs научные исследования про читаемость шрифтов
6 min
Я работаю дизайнером около 10 лет. В дизайне не очень много объективных и проверяемых законов, и когда мне нужно было что-то выяснить, я искала информацию в профессиональных книгах, блогах крутых ребят, спрашивала у знакомых арт-директоров и приставала к людям в коридорах.
А потом узнала, что ученые уже сто лет как выяснили то, про что до сих пор спорят дизайнеры.
Мы в Тинькофф сравнили мнение знаменитых дизайнеров и ученых о том, какие шрифты легче читать: антикву(с засечками) или гротески(без засечек).
А потом узнала, что ученые уже сто лет как выяснили то, про что до сих пор спорят дизайнеры.
Мы в Тинькофф сравнили мнение знаменитых дизайнеров и ученых о том, какие шрифты легче читать: антикву(с засечками) или гротески(без засечек).
Ваше утверждение на 100% правильно, только упускает всю суть
4 min
Привет, Хабр! Представляю вашему вниманию перевод статьи «Your statement is 100% correct but misses the entire point».
Представьте, что где-то в Интернете обсуждают языки программирования. Один из архитектурных вопросов, который могут обсуждать, это сборщик мусора. Один участник дискуссии упоминает преимущества сборки мусора как-то так:
Это довольно нейтральное утверждение, с которым согласилось бы большинство людей, даже если бы они работали над кодом, к которому предъявляются строгие требования ко времени отклика. И все же, неизбежно кто-то представит такой контраргумент:
Представьте, что где-то в Интернете обсуждают языки программирования. Один из архитектурных вопросов, который могут обсуждать, это сборщик мусора. Один участник дискуссии упоминает преимущества сборки мусора как-то так:
Сборщики мусора классные и экономят много сил. Если у вашего приложения нет строгих требований к времени отклика, то отсутствие необходимости заботиться об управлении памятью освобождает разработчика и может значительно повысить его эффективноcть.
Это довольно нейтральное утверждение, с которым согласилось бы большинство людей, даже если бы они работали над кодом, к которому предъявляются строгие требования ко времени отклика. И все же, неизбежно кто-то представит такой контраргумент:
Нет! Если у вас есть висячие указатели, то память никогда не освободится и вам в любом случае придется исправлять это, выполняя ручное управление памятью. Сборщики мусора волшебным образом не исправляют все ошибки.
Борьба с пиратством и контрафактом в сети без помощи судов
13 min
В этой статье для правообладателей — владельцев онлайн-проектов и бизнесов, присутствующих в онлайне, мы приводим наш мануал борьбы с нарушителями до обращения в суд.
Также материал будет актуален и после отмены эпидемии, ведь нарушители не исчезнут вместе с вирусом, а прибегать к помощи судов всегда было долго, дорого и часто малоэффективно.
Также материал будет актуален и после отмены эпидемии, ведь нарушители не исчезнут вместе с вирусом, а прибегать к помощи судов всегда было долго, дорого и часто малоэффективно.
Браузер на страже API-запросов: строим безопасное общение фронтенда с бэкендом
15 min
Команде разработчиков, создающей одностраничное приложение (SPA), рано или поздно придётся столкнуться с ограничениями браузерной безопасности. С одной стороны, нужно сделать так, чтобы фронтенд-сторона могла беспрепятственно общаться с бэкенд API-сервером, а с другой — защитить такое общение от злоумышленников. Сложности начинаются, когда фронтенд и бэкенд находятся на разных доменах, так как на такое взаимодействие браузер накладывает более строгие правила.
В клиентском HTML-JS приложении браузер выполняет важную роль «инспектора» внешних запросов и содержит в арсенале мощные инструменты. Наша задача — установить правила, по которым он будет применять эти инструменты к нашему приложению.
Я — разработчик в хостинг-провайдере FirstVDS. При создании SPA для одного из наших проектов я искал решения и применял их на практике, чтобы подружить фронтенд с API и обезопасить их общение. В этой статье я собрал свои мысли и опыт воедино, чтобы поделиться с вами.
Интересные CSS-находки в новом дизайне Facebook
11 min
Translation
Я любопытен. Мне всегда интересно открывать инструменты разработчика браузера и разбираться с тем, как сделан какой-нибудь сайт, на который я заглянул. Этот материал представляет собой мой первый рассказ о таких вот изысканиях. Дело в том, что я обнаружил некоторые интересные примеры использования CSS (по крайней мере, они показались интересными мне), о которых мне захотелось рассказать.
Речь идёт о CSS-находках в новом дизайне Facebook. Этот дизайн появился сравнительно недавно. Я его увидел пару недель назад. Сначала все элементы интерфейса казались мне необычно большими, но я привык к ним буквально за несколько дней. Здесь я расскажу обо всём том интересном, что я нашёл в дизайне Facebook.
Речь идёт о CSS-находках в новом дизайне Facebook. Этот дизайн появился сравнительно недавно. Я его увидел пару недель назад. Сначала все элементы интерфейса казались мне необычно большими, но я привык к ним буквально за несколько дней. Здесь я расскажу обо всём том интересном, что я нашёл в дизайне Facebook.