Search
Write a publication
Pull to refresh
0
@AndrianPrytularead⁠-⁠only

Пользователь

Send message

Как обеспечить глассморфизм с помощью HTML и CSS

Reading time4 min
Views14K

Вы, наверное, подумаете — ну вот еще один тренд дизайна? Разве они у нас не каждый год появляются или около того?

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

Но давайте поговорим немного больше о глассморфизме.

Читать далее

Контейнерные запросы в CSS

Reading time9 min
Views15K

Как фронтенд-дизайнер я за последние 6 лет не был так взволнован новой CSS-функцией, как сейчас. Благодаря усилиям Мириам Сюзанны и других умных людей прототип контейнерных запросов можно включить в Chrome Canary

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

Читать далее

Примеры применения переменных CSS на практике

Reading time9 min
Views9.5K

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

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

Адаптивный дизайн как антипаттерн

Reading time5 min
Views11K


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

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

Уверен, не я один часто сталкиваюсь с подобным. Лично мне нравится, когда окна моего браузера достаточно узкие, но в последние лет десять веб-страницы стали реагировать на такое предпочтение так, будто мне нужна мобильная, функционально урезанная версия страницы. Здесь кроется большая проблема, и не одна.

Пространственный газлайтинг


Одна из фундаментальных концепций, на которых основан дизайн Macintosh, первый по-настоящему клиент-ориентированный графический пользовательский интерфейс – это идея о пространственном упорядочивании человеко-машинных взаимодействий при работе с компьютером. Пользователя избавили от необходимости запоминать текстовые команды, чтобы обустраивать файлы на диске, а предоставили возможность тасовать файлы так, чтобы это было наглядно и – вот оно, озарение – запоминать их положение, как будто в пространстве. Пользователь мог вспомнить, куда положил файл, и не столь важно, как этот файл называется. Точно так мы запоминаем, куда положили кошелек, ключи или важный документ.
Читать дальше →

HTML-теги и атрибуты, о которых вы, возможно, не знали

Reading time14 min
Views54K

image


Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.


abbr


Тег abbr определяет аббревиатуру или акроним. Аббревиатура или акроним расшифровываются с помощью атрибута title.


<abbr title="HyperText Markup Language">HTML</abbr> был разработан британским ученым Тимом Бернерсом-Ли приблизительно в 1986—1991 годах.

abbr часто используется совместно с тегом dfn, идентифицирующим понятие или термин:


<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> - формальный язык описания внешнего вида документа (веб-страницы).</p>

address


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

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

HTMHell — адовая разметка (25 плохих примеров)

Reading time32 min
Views18K

Перевод заметок с сайта HTMHell - коллекции плохих примеров HTML-кода, взятых из реальных проектов.

Каждая заметка включает сам фрагмент плохого кода, который дополняется объяснениями, в чём именно ошибки и почему так лучше не делать. А в заключение предлагается вариант, который считается более корректным.

Читать далее

Полное руководство по CSS Flex + опыт использования

Reading time6 min
Views56K

Как и CSS Grid, Flex Box довольно сложен, потому что состоит из двух составляющих: контейнера и элементов внутри него.

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

Читать!

Как создают и поддерживают веб-страницы tinkoff.ru

Reading time9 min
Views21K

Всем привет! Меня зовут Сергей Михайлов, в Тинькофф я работаю руководителем интерфейсов: занимаюсь внутренними сервисами, а также отвечаю за дизайн-составляющую Отдела привлечения клиента. Расскажу, как мы быстро собираем страницы с помощью нашего конструктора.

Читать далее

CORS для чайников: история возникновения, как устроен и оптимальные методы работы

Reading time17 min
Views503K


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

Если вы давно хотели разобраться в CORS и вас достали постоянные ошибки, добро пожаловать под кат.

Ошибка в консоли вашего браузера


No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/

Access to fetch at ‘https://example.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy.


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

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

Но давайте-ка пойдем к истокам…
Читать дальше →

Сравниваем четыре опенсорсные альтернативы Disqus

Reading time4 min
Views8.7K


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

Бесплатные панели управления серверами в 2021 году

Reading time7 min
Views94K


Для пользователей Хабра не секрет, что панель управления (ПУ) — это веб-инструмент для администрирования сервера и размещённых на нём сайтов с помощью графического интерфейса. Она упрощает работу с доменами, базами данных, службами и приложениями.
В этой статье рассмотрим актуальные в 2021 году бесплатные панели управления, которые не теряют своей популярности, поскольку более 80% рядовых юзеров не используют и половины функций и возможностей платных ПУ.
Читать дальше →

Magento 2 UI Components. Часть 1: общее устройство

Reading time11 min
Views7.8K

Привет! Меня зовут Павел и я Magento 2 бэкенд-разработчик. Если спросить у любого практикующего M2 разработчика, какие аспекты М2 вызывают наиболее сильную боль, — уверен, что с большим отрывом будут лидировать UI компоненты (Ui Components). Это тот самый случай, когда их все используют, но немногие знают, как в действительности они устроены и как они работают. Сложившаяся ситуация отчасти вызвана достаточно скудным описанием устройства компонентов в документации, особенно если принять во внимание сложность и некоторую неочевидность устройства компонентов. Сегодня мы начнем цикл статей про M2 Ui Components, чтобы полностью закрыть данную тему. Хотя на хабре уже есть превосходные статьи, которые рассматривают тему Ui Components с того или иного ракурса, системно ее на Хабре не раскрывал еще никто. В общем, иди за мной Нео, и я покажу тебе, насколько глубока кроличья нора. Погнали!

Читать далее

Девопсу на заметку: готовим Helm правильно

Reading time13 min
Views26K

Несколько несложных примеров того, как на практике можно использовать продвинутые возможности Helm для эффективной организации безупречной continuous delivery в Kubernetes. Полезные рецепты, чтобы поддерживать конфигурации множества тестовых и production сред - удобно, безопасно, без копипасты и приятно на вид. Методы поддержания целостности сред - чтобы "зелёный" статус пайплайна всегда означал удачный деплоймент, а в случае неудачи среда бы сама восстанавливалась.

Читать далее

Shadow – гибрид сетевого симулятора и эмулятора

Reading time4 min
Views6.5K

Shadow запускает реальные приложения, такие как Tor или Bitcoin. Изначально он создавался для экспериментов над Tor, но вырос в крупный проект, который широко используется для исследований в таких местах, как Кембриджский и Колумбийский университеты. В этой статье будут рассмотрены главные особенности проекта, описаны его плюсы и минусы, а также разобран простой пример работы.
Читать дальше →

Включение гибридной графики в Ubuntu на ноутбуках Nvidia + Intel (OpenGL, Vulkan)

Reading time3 min
Views57K

Это простая инструкция как включить гибридную графику intel-nvidia на ноутбуке. Чтобы определенные приложения запускались на дискретном чипе, а другие на встроенном. На свое удивление в интернете не нашел простую инструкцию того, как запускать определенные приложения, используя дискретную графику. Так что напишу так просто, на сколько считаю нужным

Читать далее

30 лет Линукса. Интервью с Линусом Торвальдсом. Часть 2

Reading time6 min
Views16K


Первая часть интервью.

Распределенная система контроля версий Git


Дж.А.: Linux – только первая из ваших работ, глобально повлиявших на мир опенсорса. В 2005 году вы также создали Git, исключительно популярную распределенную систему контроля версий. Вы быстро перенесли дерево исходников ядра Linux из проприетарного хранилища Bitkeeper в новоиспеченный Git, который сделали опенсорсным, и в том же году передали поддержку Git Джунио Хамано. История этих событий увлекательна, расскажите, что побудило вас передать этот проект так быстро, и как вы нашли и выбрали Джунио? 

ЛТ: Итак, ответ на этот вопрос состоит из двух частей.


Во-первых, я совершенно не хотел создавать новую систему контроля исходников.  Linux был создан, так как мне очень интересен низкоуровневый интерфейс между аппаратным и программным обеспечением — в принципе, эта работа была выполнена из любви к предмету и личного интереса. Напротив, Git был создан из необходимости: не потому, что я интересуюсь контролем исходников, а потому что большинство имевшихся на тот момент систем контроля версий вызывали у меня подлинное отвращение, а та единственная, что показалась мне наиболее терпимой и при этом действительно весьма хорошо сочеталась с моделью разработки Linux (BitKeeper) стала несостоятельной.
Читать дальше →

30 лет Линукса. Интервью с Линусом Торвальдсом. Часть 1

Reading time23 min
Views38K


Тридцать лет назад Линусу Торвальдсу был 21 год, он был студентом Хельсинского университета. Именно тогда он впервые выпустил ядро Linux. Анонс этого события начинался так: «Я делаю (свободную) операционную систему (просто в качестве хобби, большой и профессиональной она не будет…)». Три десятилетия спустя все топ-500 суперкомпьютеров в мире работают под Linux, равно как и более 70% всех смартфонов. Linux явно стал и большим, и профессиональным. 
Читать дальше →

5 альтернатив Node.js — и есть ли в этом смысл

Reading time7 min
Views22K


Node.js — не безупречный продукт, у него есть недостатки (использование JS?), некоторые из них тянулись еще с раннего этапа разработки из-за ошибочных решений, принятых Райаном Далем, о которых немного вспомнили в статье Как создатель node.js сам разочаровался в нем. Как это часто бывает, в некоторых случаях альтернативу этой системе найти сложно или невозможно, особенно в секторе энтерпрайза. Но если не требуется поддержки большого легаси-кода, который еще много лет будут снабжать работой программистов, то можно взглянуть в сторону других решений. Про “убийцу Node.js” можно почитать в статье, указанной выше, о некоторых других будет рассказано в этой статье.
Читать дальше →

Веб-империя правительства UK: все во имя человека, для блага человека

Reading time22 min
Views4.4K

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

Для кого-то и у кого-то цифровизация – это контроль и запреты, для кого-то и у кого-то – удобство и польза каждого отдельного гражданина.

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

ПРЕДУПРЕЖДЕНИЕ: немного лонгрид, вынужден сразу предупредить. Но материал задуман и предназначен для других целей, так что короче никак. Поэтому, кому не интересно, не тратьте время, а кому интересно, наберитесь чуточку терпения.

Сгораю от любопытства

Сколько цветов нужно, чтобы было норм, как эти цвета назвать и как ими пользоваться?

Reading time4 min
Views7.1K

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

Поехали

Information

Rating
Does not participate
Date of birth
Registered
Activity