Pull to refresh
0
0
ayran @ayran

ученик

Send message

API CSS Paint

Reading time8 min
Views12K
По словам автора материала, перевод которого мы публикуем сегодня, API CSS Paint — это невероятно интересная технология. Причём, речь идёт не только о её текущих возможностях, но и о представляемых ей явлениях, и о том, что её возникновение знаменует собой начало весьма примечательных изменений в мире CSS. Здесь мы поговорим об API CSS Paint и о причинах его появления, расскажем о том, как им пользоваться.


Читать дальше →
Total votes 19: ↑19 and ↓0+19
Comments5

Вертикальный ритм

Reading time4 min
Views44K
image

Сетка 8pt — это мощная система для создания последовательных и визуально привлекательных пользовательских интерфейсов. Этот пост о том, как установить вертикальный ритм и типографию в сетке 8pt. Чтобы лучше понимать материал, зацените статью "Введение в систему 8pt сеток" и "Сетка на основе 8pt: обводка и разметка".

Что же такое вертикальный ритм и почему он так важен


Ритм достигается тогда, когда элементы вашего дизайна состоят из повторяющихся шаблонов. Это позволяет вашему окончательному дизайну выглядеть преднамеренно, профессионально и последовательно.
Читать дальше →
Total votes 18: ↑15 and ↓3+12
Comments4

Стрела времени, демон Лошмидта и квантовая термодинамика. Почему время необратимо?

Level of difficultyMedium
Reading time36 min
Views21K

Когда всё вокруг стремится к хаосу и жизнь с каждым днём становится только хуже, невольно возникает желание обратить время вспять. Но почему-то реальность всячески противится попыткам развернуть стрелу времени на 180°. Что же заставляет время идти только вперёд и не даёт повернуть его назад? Чем прошлое отличается от будущего? И почему мы помним прошлое, а не будущее? Почему разрушать, рассеивать и смешивать легко, а строить, концентрировать и сортировать – сложно? Как вывести асимметричные во времени законы термодинамики из симметричных во времени законов механики? Является ли второй закон термодинамики единственной причиной необратимости времени? Связана ли необратимость времени с расширением Вселенной? Поискам ответов на эти и другие связанные со временем вопросы посвящён весь мой блог, поэтому объяснений в двух словах не будет. В данной статье я лишь задам направление мысли и разберу самую проработанную на сегодняшний день теорию, позволяющую описать время на языке квантовой физики. Также мы выясним, насколько правдоподобен фильм «Довод» и можно ли инвертировать энтропию человека, чтобы он жил назад во времени.

Читать далее
Total votes 34: ↑30 and ↓4+37
Comments55

Если ты не копирайтер, но нужно что-то написать: ну очень простые правила про предложения

Level of difficultyEasy
Reading time3 min
Views5K

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

Читать далее
Total votes 16: ↑14 and ↓2+13
Comments25

Почему вам не нужна версия для слабовидящих

Reading time12 min
Views14K

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

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

Читать далее
Total votes 28: ↑27 and ↓1+33
Comments18

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

Reading time7 min
Views56K
Если проследить эволюцию создания сайтов и сервисов, то можно заметить, что сначала было важно, чтобы они хотя бы были и работали. Затем создатели стали задумываться о внешней красоте и привлекательности для клиентов, ну а потом постепенно стали ориентироваться и на удобство для пользователей.

Теперь же возник новый тренд — “доступность”. Ведь сейчас сайты просматривают не только с больших мониторов в спокойной обстановке, но и со смартфонов в трясущихся автобусах и ноутбуков в шумных кафе, а среди пользователей появляется все больше пенсионеров и даже людей с ограниченными возможностями.
Читать дальше →
Total votes 26: ↑24 and ↓2+22
Comments14

Простой способ получения ”Flicker-Off”: «отключение» ШИМ мерцания подсветки LCD мониторов и телевизоров

Reading time20 min
Views67K
''Свобода* лучше, чем несвобода*''©
*от мерцания подсветки

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

Одной из причин этого может быть мерцание LED светодиодов подсветки монитора, вызванное ШИМ регулированием их яркости.

КДПВ

На habr.com уже было несколько статей, посвященных как описанию этого явления, например Пульсация экранов телевизоров и Увидеть пульсацию, так и методам борьбы с ним, например за счет увеличения частоты ШИМ подсветки Разгон подсветки монитора, или даже полной переделке подсветки (ссылки внутри статьи Как оценить пульсацию светодиодных ламп).

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

Однако иногда можно добиться вполне удовлетворительного результата, не вставая с дивана компьютерного кресла, ограничившись лишь подстройкой монитора, буквально «отключив» мерцание его подсветки (ну, или по крайней мере существенно его уменьшив). Так сказать, получить «Flicker-Off».

Подробности под катом:
Читать дальше →
Total votes 19: ↑15 and ↓4+15
Comments60

Сетки для адаптивного дизайна

Reading time7 min
Views212K


Мы собрали наиболее частые темы, связанные с сеткой в адаптивном дизайне, чтобы «повысить резкость» термина как такового и систематизировать практические знания: как настраивать сетку в дизайн-макете, по каким параметрам делать расчет, какие особенности адаптивной среды учитывать и на какие детали обращать внимание.
Читать дальше
Total votes 22: ↑22 and ↓0+22
Comments3

Локальный веб-сервер под Linux, с автоматическим поднятием хостов и переключением версий PHP

Reading time4 min
Views47K
Скорее всего какие-то части этой статьи уже знакомы многим хаброжителям, но в связи с покупкой нового рабочего ноутбука я решил собрать все крупинки воедино и организовать удобное средство для разработки. Мне часто приходится работать со множеством маленьких проектов, с разными версиями PHP, часто переводить старые проекты на новые версии. В далёком прошлом, когда я был пользователем Windows то использовал OpenServer. Но с переходом на Linux мне нехватало той простоты создания хостов и переключений версий которые были в нём. Поэтому пришлось сделать еще более удобное решение на Linux =)

Цели


  1. Использовать текущий на момент написания статьи софт
  2. Чтоб разграничить локальные домены, будем использовать специальный домен .loc
  3. Переключения версий PHP реализуем через поддомен c помощью fast-cgi
  4. Автоматическое создание хоста с помощью vhost_alias и dnsmasq

Что имеем в итоге. При переходе на
56.test.loc
Apache запустит c версией PHP 5.6.36
/var/www/test.loc/public_html/index.php
Поменяв поддомен на
72.test.loc
будет запущен тот же файл но уже с версией PHP 7.2.7

Другие версии доставляются аналогичным описанным ниже способом.

Для создания еще одного сайта просто создаем в /var/www/ папку имеющую окончание .loc, внутри которой должна быть папка public_html являющаяся корнем сайта

Вот собственно и все. Как без дополнительных мучений, перезапусков, и редактирований конфигов имеем автоматическую систему для работы с сайтами.
Читать дальше →
Total votes 13: ↑8 and ↓5+3
Comments14

Проблемы CSS. Часть 1

Reading time7 min
Views99K
От переводчика
Статья большая решил разбить на две части.

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

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

В лучшем случае — работу с css можно назвать веселым занятием. И это то, благодаря чему мы имеем работу. Потому что, как я считаю, генерация эффективных и кроссбраузерных css стилей невозможна и не будет возможна в ближайшее время.
Читать дальше →
Total votes 79: ↑71 and ↓8+63
Comments53

То, что вам никто не говорил о z-index в статье «То, что вам никто не говорил о z-index»

Reading time2 min
Views45K
image
Почти два года назад вышла статья «What no one told you about z-index» (и её перевод на Хабре «То, что вам никто не говорил о z-index»), авторы которой рассказывают о малоизвестной (76% проголосовавших пользователей Хабра слышат об этом впервые), но документированной возможности создания нового контекста наложения указав opacity меньше единицы.

Но несмотря на название статьи, авторы не рассказали вам ещё кое о чём.

Предполагается, что вы знакомы с понятием контекста наложения (англ. stacking context).
Элементы с общими родителями, перемещающиеся на передний или задний план вместе известны как контекст наложения. Понимание контекста наложения является ключом к пониманию z-index и порядка наложения элементов.

Каждый контекст наложения имеет свой корневой элемент в HTML структуре. В момент формирования нового контекста на элементе, все дочерние элементы так же попадают в этот контекст и занимают своё место в порядке наложения. Если элемент располагается в самом низу одного контекста наложения, то никаким мыслимым и немыслимым образом не получится отобразить его над другим элементом в соседнем контексте наложения, располагающимся выше по иерархии, даже с установленным z-index равным миллиону.
— Из статьи «То, что вам никто не говорил о z-index». Для понимания темы настоятельно рекомендую к ознакомлению либо её, либо классический труд на MDN.

Новый контекст наложения формируется в случаях:

  • Корневой элемент () всегда содержит корневой контекст наложения. Любой элемент на странице, не участвующий в локальном контексте наложения (сформированном любым из последующих вариантов), участвует в корневом контексте наложения.
    Элемент с position отличным от static и значением z-index отличным от auto. Кроме одного исключения для position: fixed, но я это вынес в отдельный пункт.
    Элемент имеет значение opacity меньше, чем 1.
Нужно больше контекстов наложения!
Total votes 45: ↑42 and ↓3+39
Comments12

Как на самом деле работают z-index

Reading time6 min
Views35K
Наверное, почти каждый из нас хоть раз в жизни использовал свойство z-index. При этом каждый разработчик уверен, что знает, как оно работает. В самом деле — что может быть проще операций с целыми числами (сравнение и назначение их элементам). Но всё ли так просто, как кажется на первый взгляд?

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

image
Читать дальше →
Total votes 20: ↑18 and ↓2+16
Comments9

Как мы решили проблемы с z-index

Reading time4 min
Views9.2K

Привет, Хабр!

Буквально недавно на работе я получил баг с z-index, я его по быстрому пофиксил и получил еще два бага. Я как то не придавал этой проблеме значения, и тут мой коллега Дмитрий Рокало ревьювил мой очередной пул реквест и пришел ко мне с идеей, как покончить войну с z-index в нашем проекте. И как раз в тот же день, я слушал подкаст веб стандарты и там обсуждали статью по работе с z-index. И решение, которое предлагают в статье, показалось мне крайне нелепым по сравнению с тем, что предложил мне Дима. Поэтому я решил спонтанно записать это видео и написать статью. Возможно это решение кому-то будет полезным. (Данная статья является расшифровкой видео).

Read more
Total votes 8: ↑7 and ↓1+7
Comments17

Всё ли так просто с многоточием?

Reading time7 min
Views93K

Отличие многоточия от трёх точек


Многоточие (эллипсис, от греч. ellipsis — незаполненность) — самостоятельный типографский знак, разновидность отточия, состоящий из трёх точек идущих подряд, используется для обозначения скрытого смысла, особенностей устной речи (вздох, пауза, задумчивость), недосказанности либо для исключения из текста некоторых слов, например при цитировании.



Читать наиболее полное руководство по применению многоточия
Total votes 146: ↑129 and ↓17+112
Comments78

Интересные трюки HTML, CSS и JS

Level of difficultyMedium
Reading time8 min
Views21K

Здесь вы найдёте небольшую подборку нестандартных вариантов использования HTML/CSS/JS. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.

Примечание. Некоторые трюки основаны на открытых уязвимостях браузеров и поисковой системы Google и др. Поэтому могут перестать работать в ближайшее время (или продолжат, если разработчики не признают баги и не захотят их исправлять). Другие функции работают только начиная с конкретных версий Chrome, Firefox и т. д.
Читать дальше →
Total votes 47: ↑44 and ↓3+55
Comments17

Принцип цикады и почему он важен для веб-дизайнеров

Reading time6 min
Views232K
Пару лет назад я прочитал интересные факты о жизненном цикле периодических цикад. Обычно мы не видим вокруг себя много этих насекомых, потому что бóльшую часть своей жизни они проводят под землёй и тихо сосут корни растений.

Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.

Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?
Читать дальше →
Total votes 696: ↑682 and ↓14+668
Comments119

Объясняем современный JavaScript динозавру

Reading time15 min
Views265K


Если вы не изучали JavaScript с самого начала, то осваивать его современную версию сложно. Экосистема быстро растёт и меняется, так что трудно разобраться с проблемами, для решения которых придуманы разные инструменты. Я начал программировать в 1998-м, но начал понимать JavaScript только в 2014-м. Помню, как просматривал Browserify и смотрел на его слоган:


Browserify позволяет делать require («модули») в браузере, объединяя все ваши зависимости


Я не понял ни слова из предложения и стал разбираться, как это может помочь мне как разработчику.


Цель статьи — рассказать о контексте, в котором инструменты в JavaScript развивались вплоть до 2017-го. Начнём с самого начала и будем делать сайт, как это делали бы динозавры — безо всяких инструментов, на чистом HTML и JavaScript. Постепенно станем вводить разные инструменты, поочерёдно рассматривая решаемые ими проблемы. Благодаря историческому контексту вы сможете адаптироваться к постоянно меняющемуся ландшафту JavaScript и понять его.

Total votes 174: ↑171 and ↓3+168
Comments505

Современный CSS для динозавров

Reading time20 min
Views70K

— Двигать пиксели в CSS и так было трудно! А теперь мне говорят, насколько круто использовать несемантические названия классов, встроенные стили в HTML и даже писать стили CSS на JavaScript!
[Вставь тут гифку из «Гриффинов»] — Ха!
Иллюстрации из Dinosaur Comics Райана Норта


Как ни странно, CSS считается одновременно одним из самых простых и одним из самых сложных языков для веб-разработчика. Определённо он достаточно прост в начале — вы определяете свойства стиля, значения для конкретных элементов и… это практически всё, что нужно знать! Однако в больших проектах ситуация становится довольно запутанной и сложной, чтобы организовать CSS каким-то осмысленным образом. Изменение любой строчки CSS для стилизации элемента на одной странице часто ведёт к непредвиденным последствиям для элементов на других страницах.

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

Цель этой статьи — показать исторический контекст, как развивались техники и инструменты CSS до их нынешнего состояния в 2018 году. Поняв эту историю будет легче понять каждый подход и как с выгодой его использовать. Итак, начнём!
Читать дальше →
Total votes 43: ↑39 and ↓4+35
Comments41

Windows, PowerShell и длинные пути

Reading time4 min
Views25K


Думаю, вам, как и мне, не раз приходилось видеть пути вида \!!! Важное\____Новое____\!!! Не удалять!!!\Приказ №98819-649-Б от 30 февраля 1985г. о назначении Козлова Ивана Александровича временно исполняющим обязанности руководителя направления по сопровождению корпоративных VIP-клиентов и организации деловых встреч в кулуарах.doc.

И зачастую открыть такой документ в Windows сходу не получится. Кто-то практикует workaround в виде мапирования дисков, кто-то использует файловые менеджеры, умеющие работать с длинными путями: Far Manager, Total Commander и им подобные. А еще многие с грустью наблюдали, как созданный ими PS-скрипт, в который было вложено немало труда и который в тестовом окружении работал на ура, в боевой среде беспомощно жаловался на непосильную задачу: The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.
Как оказалось, 260 символов хватит «не только лишь всем». Если вам интересно выйти за границы дозволенного — прошу под кат.
Читать дальше →
Total votes 19: ↑16 and ↓3+13
Comments18

Выбираем длинный путь (или прощай MAX_PATH)

Reading time4 min
Views76K


Многим пользователям ПК под управлением ОС Windows, не говоря о разработчиках, знакомы проблемы при работе с длинными (более 260 символов, MAX_PATH) путями файлов или каталогов.

В данной статье рассматриваются способы избавления от этого пережитка при разработке приложений на различных платформах (WinApi, .Net Framework, .Net Core) и активации нативной поддержки длинных путей в Windows 10 (Anniversary Update).
Подробности
Total votes 37: ↑34 and ↓3+31
Comments22

Information

Rating
Does not participate
Location
Нальчик, Кабардино-Балкария, Россия
Date of birth
Registered
Activity