Блог Андрія Огороднікова Хто з мечем до нас прийде, від меча й загине.

Записи в рубрике «Разработка»

Google Color Picker

У меня в закладках для повседневного пользования есть несколько веб-инструментов для работы с цветом, обычно они у меня под рукой в рабочем браузере, а тут я был вне и запамятовал адресок. А нужно было быстро и точно подобрать цвет. Полез в гугл и обнаружил, что по запросу color picker выдаются не только ссылки на всевозможные […]

Ревизия икомунового шрифта

e905 e91f f175 f176 f177 f178 e904 e927 e908 e90c e917 e919 e91b e921 e913 e924 e90d e912 e909 e90a e929 e907 e906 f0be e90b e941 e942 e943 e944 e945 e128 e936 e7e9 e412 e52f e89e e540 e5d3 e5d4 e8f4 e161 e8d0 e90f e910 e91a e920 Кроссблоговая ревизия икомунового шрифта. skisport.pp.ua: Этот блогуэ первым стал […]

К вопросу о переносах

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

CSS для wp_link_pages

Продолжаем доколупываться до вордпресса. Есть такая неплохая штука, как пост, состоящий из множества страниц. Для этого достаточно в текстовом редакторе в нужном месте вставить разрыв сколько угодно раз (но без фанатизма, к чему нам тысячи страниц?) <!—nextpage—> Случаются ситуации, когда это удобно. Я сам несколько раз на блоге делал такие штуковины, когда материала было много, […]

Часы для любой точки земного шара

Записка, связанная с велозапиской на велоблоге. Я задумался о функциональной плашке (виджете ака), отражающей время в определенной (нужной мне для тех или иных целей) точке земного шара, точнее — привычно отсчитывающей время в этой точке, например, Гонконге, где вот-вот начнется трековый чемпионат мира. Импортозамещение — вместо яндекс-тайма. Hong Kong (CHN): Kiev (UKR): Adelaide (AUS): Stockholm […]

Возрождение слайдера

Так скать нэкропист. Тщательно разбирая старые п-ции на блоге (на виртуальном сервере), я наткнулся на «личную» запись. В которой делал слайдеррр. Оно тогда как-то все время слетало, а мне недосуг было править — и я просто убрал пост «под замок». А тут, смотрю, картинки такие хорошие. Дай, думаю, восстановлю. И восстановил. Симпатичненько. Только неадаптивненько, но […]

Тест на гридность

Буквально намедни основалась некая большущая веха или даже маяк в деле веб-дизайна, фронтэндной разработки. Большинство ведущих браузеров внедрили возможность использовать нативную css-сетку без прочих костылей и танцев. Это АБАЛДЗЕННА! Друзья мои, моя приветствует новую эпоху. Что такое цсс-грид? Это способ верстать со всеми преимуществами старых добрых таблиц, но без кучи дурных их недостатков, + современные […]

По-модньому или верстка в HTML5

Наново собрал бложековое оформление, используя энное разумное количество новых тегов и принципов. <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title></title> <meta name=»keywords» content=»»> <meta name=»description» content=»»> <link href=»style.css» rel=»stylesheet»> </head> <body> <div class=»wrapper»> <header class=»header»> </header> <nav class=»nav»></nav> <div class=»middle»> <div class=»pixel»></div> <div class=»container»> <main class=»content»> </main> </div> <aside class=»sidebar»> </aside> </div> <div class=»footer-pixel»></div> <footer class=»footer»> […]

Задача, не имеющая кошерного решения

Является ли предложенное ниже халяльным, как мой любимый кефир, я не могу сказать. Итак задача. Сделать колонки сайта одинаковыми по высоте. В минимальном случае: сайдбар и контент, зажатые между хедером и футером. Да еще сделать обводку. Превосходный пример. Я решил вернуть в интернет архив зимнего блога окольным путем. Я не хочу ставить движок на имеющийся […]

Единицы измерения — px, em, % и прочая

Очень важный вопрос, напрямую касающийся темы предыдущей заметки. Как задавать размеры шрифтов и прочих элементов в веб-строительстве? Способов, точнее единиц существует множество, и все они, так или иначе, работают, делают свое незаметное дело, внося важнейший вклад в дизайн сайтов. Попробуем систематизировать. 1) Это «оффлайновые» единицы, которые используются в повседневной жизни или в типографских работах. Ведь […]

Семистрочный БАО

Чтобы без дураков, честно вместить мой бло в мобильники, как ни удивительно, понадобилось семь строчек в CSS@media. Я люблю лаконичность. Когда поисковая форма наехала на гордый и независимый заголовок, я придумал самый ленивый способ это исправить. Обернуть строчные буквы в <span> и задать ему класс. А в @media сделать этот класс {display:none;}. БАО. Председатель БАО. […]

Скоростная оптимизация — 2. Gzip

И это хорошо. Потому что достигается просто. Если ваш сервер Apache (коих подавляющее большинство), достаточно добавить в корневой файл .htaccess вот такой простейший код: <IfModule mod_deflate.c> SetOutputFilter DEFLATE Header append Vary User-Agent </IfModule> Этот код дает команду серверу на лету сжимать, «архивировать» файлы вашего сайта, которые отдаются по запросу посетителя. Вместо того, чтобы загружать 200 […]

Статика

Я как человек, измученный вордпрессом, не прекращу повторять, что лучше простого статического сайта нет ничего в вебе. Простого — не в смысле голого и босого, как встарь. На этом ристалище под названием «интернет второй половины 10-х годов» рубятся две противоположности: «удобство работы юзера тире дробь аффтара» и «скорость работы его ресурса». Вторая важнее, так как […]

WordPress и тайные картинки по srcset

Когда переносил блог на новый сервер, обратил пристальное внимание на загруженные картинки. Их стало больше, чем я предполагал. По одной простой причине, разработчики WordPress внедрили очередную неуправляемую простым юзером (читай — из админки галочкой), а следовательно неотключаемую фичу. wp_get_attachment_image_srcset() и wp_get_attachment_image_sizes() Идея была такова, что при вхождении на сайт определенного устройства (телефона, смартфона, или десктопа), […]

Начала скоростной оптимизации

Страшно подумать, у меня на блоге было подключено аж 4 шрифта с Google Fonts! И хоть мне очень нравилось отображение их в тех местах, где я задумал, два шрифта я уберу, ради более быстрой загрузки всего сайта. Увы. PT Sans и PT Sans Caption уходят. Остаются Ubuntu в качестве основного и PT Serif Caption (c […]

Валидненько

Интересно, о какой валидации можно говорить, если такие гиганты как facebook и youtube предоставляют для вставки невалидный код? Нет, ну я понимаю, что все нужно править самостоятельно. Но вот ровное место. Еще один смешок. Я выделил одну важную штуку тегом <section>, посчитав это оправданным в том контексте семантически. То не был <артикль> или <нав> с […]

Нативный спойлер

Я тут упоминал о таком замечательном теге (тегах) html5 как <DETAILS> и <SUMMARY>, позволяющих сделать простой, но эффективный спойлер (то есть скрыть|открыть часть информации, что, как мы знаем, удобнее разбиения статьи на две части «подкатом» с необходимостью перехода на отдельный url, если оно не подгружается с помощью AJAX и пр. скриптщины). Одна проблема, замечательная эта […]

Танцуем

Видимо, моя внутренняя высокая температура сказывается, что меня эти дни тянет на кветч. То есть ворчание с переходом в разные фазы брюзжания. Побрюзжать есть из-за чего, как бы не на ровном месте. Однако, есть чему и порадоваться, вплоть до отплясывания матросского танца Яблоч… Нет, танцуем Румбу! Поставив эмоциональную точку в заметке, я, тем не менее, […]

СУКи

В предыдущем посте я упомянул систему управления контентом «Бруклин». Я ее посмотрел. Единственный выпуск версии 0.1 образца мая 2014 года. После этого — на гитхабе пара исправлений в файле.. readme. С предупреждением о жесточайшей бете. В общем, «внешне» она у меня не завелась. Я уж не стал разбираться… Но внутренне — идея показалась мне идеальной. […]

Композеры

Я иногда (да постоянно теперь) забываю, что мой основной бродильный (не рабочий) браузер Seamonkey — это комбайн. Решительный и исчерпывающий. Браузер, почтовый клиент, irc чат и композер, то есть компоновщик веб-страничек. Визуальный, но и предоставляющий доступ к внутренним резервам. Собственно говоря, до исторического материализма html я учил именно так, накряпывал визуальные штуки, а потом лез […]