Обновить
512K+

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

Делаем веб лучше

360,53
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Невменяемый, необъятный масштаб браузеров

Время на прочтение3 мин
Охват и читатели74K

Увидев вот эту публикацию про браузерные войны, я хотел бы представить альтернативное наблюдение за тем, как мы докатились до такой жизни. Но Дрю ДеВолт уже всё сказал за меня.

Начиная с первых войн между Netscape и IE, главным инструментом в конкуретной борьбе браузеров стала функциональность. Вот только стратегия неограниченного роста и расширения — совершенно безумная. Слишком долго мы позволяли ей продолжаться.

С помощью wget я скачал все 1217 спецификаций W3C, опубликованных на текущий момент. Существенная часть из них должна быть реализована в браузере, чтобы современный веб работал. Я подсчитал объём этих спецификаций. Как думаете, насколько сложен современный веб?

Читать далее

Просто вертикальный монитор не значит, что я на телефоне

Время на прочтение3 мин
Охват и читатели17K

YouTube на вертикальном экране

Да, я странный человек, полностью признаю. На домашнем компьютере у меня установлен вертикальный монитор. Я составляю и читаю и много длинных документов — и такой форм-фактор меня вполне устраивает.

Я давно так делаю. Это естественная часть моего рабочего процесса. Такая ориентация экрана лучше подходит для любых документов, которые длиннее электронного письма. Большинство приложений Linux нормально работают в таком формате, хотя меню не всегда помещается на экране.

Но сайты в интернете — это что-то совершенно ненормальное! Многие думают, что вертикальный экран — это обязательно мобильное устройство!

Да, проблема мелкая и касается лично меня, но всё-таки есть смысл пояснить, какие последствия возникают, в чём причина и как её исправить.
Читать дальше →

Создание опенсорсных инструментов и совершенствование рабочих процессов команды дизайнеров Discord

Время на прочтение7 мин
Охват и читатели3.3K
В прошлом году вышел API Figma, предназначенный для разработки плагинов. Команда дизайнеров Discord увидела в этом событии потрясающую возможность для улучшения своих техпроцессов.

Примерно в то же время, когда поддержка плагинов платформой Figma находилась на стадии бета-версии, мы серьёзно работали над улучшением доступности нашей тёмной и светлой тем. Ни одна из них не соответствовала нашим стандартам доступности и мы делали всё возможное для того чтобы это исправить.

image

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

Именно тогда и зажглась искра дизайн-инструментов. Мы задались вопросом о том, можем ли мы создать инструменты, способные нам помочь. Предупреждаю: спойлер. Мы могли создать такие инструменты, мы их создали, и получились они просто замечательными. С тех пор подобные инструменты стали важнейшей частью нашей работы.
Читать дальше →

Бесплатный сервис хранения ссылок

Время на прочтение8 мин
Охват и читатели16K

Знаю, что “хабра-народ” сейчас очень негодует, что стало очень мало технических статей, Хабр “не торт” и т.п. поэтому напишу сразу – это не техническая статья.

Цель статьи – поделиться удобным бесплатным сервисом хранения ссылок.

Конечно, можно было бы написать подробное техническое повествование. Например, целая история с изменением регулярного выражения для проверки корректности ссылки, сколько бы его не настраивали – всегда находилась ссылка, которая не вписывалась бы в правила. Но тогда бы получилась целая серия статей, которые наверняка никому и не интересны. Да и некоторые NDA надо учитывать.

Читать далее

Интернет-магазин «на минималках»

Время на прочтение12 мин
Охват и читатели16K

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

Работаем «вбелую»

Идеальное Vue приложение на Typescript

Время на прочтение6 мин
Охват и читатели28K

Пока Vue3 официально еще не вышел, а продакшене в основном 2 версия - я хочу поговорить о типизации и том, что она все еще не идеальна во Vue. И сегодня мы попробуем создать идеальное приложение с типизацией на typescript сделав упор на code style, пропагандируя vue style guide и прочие обычно не значащие вещи, которые были придуманы умными людьми!

Читать далее

Основы отладки клиентских JS-приложений

Время на прочтение18 мин
Охват и читатели25K

Процесс написания и выполнения программного кода почти всегда сопряжён с необходимостью искать и исправлять ошибки. И в целом процесс отладки приложений выглядит несложно.

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

Читать далее

Минимальный размер контента в CSS grid

Время на прочтение3 мин
Охват и читатели6.5K
Иногда, когда вы пишете компонент, то вдруг замечаете странную полосу горизонтальной прокрутки. Снова и снова вы пытаетесь исправить положение, только чтобы позже понять, что причина в чём-то другом. Сколько раз так было? В этой статье я растолкую хитрую проблему, которая может стоить часов проб и ошибок; связана эта проблема с макетом сетки CSS, и я подумал, что о ней стоит написать. Прежде чем начать, я хочу дать некоторый контекст. Вот несколько вещей, которые следует принять во внимание. Представьте, что вы:

  • Столкнулись с этой проблемой в середине рабочего дня. Вы устали, и у вас есть много работы, которую нужно сделать.
  • Вы уже проголодались.
  • Первопричину проблемы легко упустить, поскольку она не связана с компонентом, над которым вы работаете.

Учитывая всё это, давайте погрузимся в проблему.


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

VPN вас не спасет: как собирают персональные данные через SuperСookies

Время на прочтение11 мин
Охват и читатели41K


Томас Даннинг говорил: «При 300 процентах [прибыли] нет такого преступления, на которое он [капитал] не рискнул бы, хотя бы под страхом виселицы». Эти слова, сказанные в XIX веке, актуальны до сих пор. Компании, которые ведут бизнес в интернете, изобретают все более изощренные способы слежки за пользователями. 

История кукисов пережила несколько скандалов, связанных с нарушениями приватности, работа браузеров с ними постепенно менялась и, казалось бы, окончательно вошла в цивилизованное русло. Мы научились защищать свои данные и кушать печеньки стало относительно безопасно.

Но потом появились Supercookies — довольно липкая штука, которую буквально не обойти. 

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

Как наивность разработчиков создала основы для сбора персональных данных 


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

Эти проблемы зарождались, когда компьютеры были большими, а программисты — несколько наивными. Например, одна из уязвимостей сотовых сетей возникла по той же причине наивности: Страх и ужас SS7
Читать дальше →

Архитектурный паттерн Dependency Injection в React-приложении

Время на прочтение15 мин
Охват и читатели49K

Расшифровка доклада Сергея Нестерова с конференции FrontendLive 2020.

Привет! Меня зовут Сергей, уже больше двух лет я работаю в группе компаний Тинькофф. Моя команда занимается разработкой системы для анализа качества обслуживания клиентов в Тинькофф, и, как вы, наверное, догадались, мы используем React в своем приложении. Не так давно мы внедрили в свой проект архитектурный паттерн Dependency Injection совместно с IoC-контейнерами. Сделали мы это не просто так: это позволило нам решить ряд проблем, которые тормозили разработку нового функционала.

Читать далее

Хьюстон, у нас проблемы с интерпретацией ошибок

Время на прочтение8 мин
Охват и читатели6.4K


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


В ожидании комбинаторного взрыва

Читать дальше →

В чём разница между узлом и элементом DOM?

Время на прочтение4 мин
Охват и читатели45K
Объектная модель документа (Document Object Model, DOM) — это интерфейс, который рассматривает HTML- или XML-документы в виде древовидных структур, каждый узел которых является объектом документа. DOM, кроме того, предоставляет набор методов для выполнения запросов к дереву документа, для изменения его структуры и для выполнения с ним некоторых других действий.



При работе с DOM, кроме того, используется термин «элемент». Элементы очень похожи на узлы, но, всё же, это — не одно и то же. В чём же разница?
Читать дальше →

Фреймворки против Битрикс

Время на прочтение10 мин
Охват и читатели19K

Все «за» и «против» 1С-Битрикс, какие есть альтернативы и что выгоднее знать разработчику?

Читать далее

Ближайшие события

Гибкая авторизация с помощью Casbin и PERM. Практический пример

Время на прочтение8 мин
Охват и читатели14K

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


Я долго не мог понять ту конкретную конструкцию, которая сидела в голове у вопрошающих, но в конечном итоге после уточняющих вопросов получил ответы, компиляцию которых приведу в цитате.

Читать дальше →

Упрощенный синтаксис для jsonb в PostgreSQL 14

Время на прочтение1 мин
Охват и читатели11K

Как сообщает telegram-канал Cross Join, в репозиторий Postgres упал комит, упрощающий работу с jsonb. Теперь можно обращаться к частям jsonb с помощью квадратных скобок, причем это работает как на чтение, так и на запись.


Прощай jsonb_set  и прочие костыли типа data = data - 'a' || '{"a":5}'


Несколько примеров:


Обновляем значение объекта по ключу. 25 здесь является числом, но взято в кавычки, потому что присваиваемое значение должно быть jsonb


-- (person_data имеет тип jsonb)
UPDATE users 
SET person_data['age'] = '25'; 
Читать дальше →

Какой CI/CD-инструмент выбрать — Jenkins или GitLab?

Время на прочтение3 мин
Охват и читатели8.6K
Инструменты непрерывной интеграции и развертывания CI/CD на сегодня довольно востребованы. Из всех актуальных решений есть два очевидных лидера, Jenkins и GitLab. На крупных сервисах отзывов у обоих решений примерно одинаковый рейтинг, но смотреть стоит не только на это. Давайте разберемся с преимуществами Jenkins и GitLab, и для каких задач они лучше всего подходят.


Читать дальше →

9 самых популярных PHP-фреймворков

Время на прочтение6 мин
Охват и читатели90K
Десятки лет PHP был самым любимым языком программирования в мире. И это не случайно. PHP-разработка ведётся быстро, получающиеся в итоге проекты отличаются высоким уровнем безопасности, их легко поддерживать. Кроме того, в ходе разработки PHP-проектов приходится писать не слишком много собственного кода благодаря тому, что существует огромное количество PHP-библиотек. В наши дни PHP используется приблизительно на 79% веб-сайтов.



Разработчикам в деле создания их замечательных проектов помогают различные PHP-фреймворки. Но что это за фреймворки? Почему программисты выбирают именно их? Сейчас мы попытаемся в этом разобраться и заодно выясним то, какие именно фреймворки лучше всего подходят для веб-проектов различных видов.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №452 (25 — 31 января 2021)

Время на прочтение3 мин
Охват и читатели10K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

Что не так с WebAssembly?

Время на прочтение7 мин
Охват и читатели25K
Современные браузеры могут намного больше, чем рендеринг веб-страниц. Это стало одной из причин появления WebAssembly. Эта технология создана в попытке вывести скорость решения сложных задач на новый уровень, построить мост между JavaScript и машинным кодом.

WebAssembly, в теории, может позволить кому угодно писать низкоуровневый код, выполняющийся в браузере, в безопасном виртуальном окружении. И, что ещё интереснее, технология WASM (сокращение от WebAssembly) была спроектирована как цель компиляции для других языков, позволяя коду, который обычно выполняют в серверной среде (например — коду, написанному на C или на C++), компилироваться в соответствующий формат и выполняться в браузере.



У WASM был огромный потенциал и невероятные перспективы. Что же пошло не так? Почему WASM, через 3 года после релиза, ещё не используется в каждом веб-проекте? Есть ли у WASM будущее в веб-разработке? Поищем ответы на эти вопросы.
Читать дальше →

Как понять свойство clip-path в CSS

Время на прочтение7 мин
Охват и читатели87K
В те далёкие времена, когда я впервые столкнулся со свойством CSS clip-path, мне потребовалось больше времени, чем я ожидал, и я изо всех сил старался запомнить, как работает свойство. Не знаю точно, почему так получилось, но, может быть, потому, что я не пользовался им часто? Во всяком случае, я изучу его снова вместе с вами. В этой статье я стремлюсь дать чёткое, детальное объяснение того, как работает clip-path, когда его использовать и как вы можете воспользоваться им в своих проектах веб-разработки. Вы готовы?


Тогда ныряем!