7 заметок с тегом

разработка

Интересные новинки в CSS — 1

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

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

hanging-punctuation

По-русски это называется висячей пунктуацей.

Спецификация: https://drafts.csswg.org/css-text-3/#hanging-punctuation-property

Сейчас поддерживается только в Сафари, начиная с 10 версии. Можно использовать через @supports, если не используете типограф или что-то подобное. Надеюсь остальные браузеры тоже подхватят.

See the Pen mWJJNx by Joel Drapper (@joeldrapper) on CodePen.


display: flow-root

Если по простому, то это замена clearfix. С этим свойством он больше не нужен. Но там все сложнее и интереснее. Почитайте статью на CSS-live, они полностью раскрыли тему: http://css-live.ru/faq/displayflow-root-not-clearfix.html

Спецификация: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root

Работает только в Фаерфоксе 53+ и Хроме 57+.


initial-letter

Определяет какой высоты будет первая буква, но примечательно то, что размер указывается не в px (em, rm, etc.), а в количестве строк обычного текста. Работает только для псевдо-элемента ::first-letter. Удобно делать буквицы на CSS.

Спецификация: https://www.w3.org/TR/css-inline/#initial-letter-styling

Сейчас нет адекватной поддержки в браузерах. Только в последней версии Сафари (TP).

Пример со страницы спецификации


scroll-behavior

Плавная прокрутка до определенного элемента. Сейчас если кликнуть по якорю, то прокрутка будет моментальной, чтобы было плавно используют JS. С этим свойством JS не нужен. Посмотрите примеры на CSS Tricks: https://css-tricks.com/almanac/properties/s/scroll-behavior/

Спецификация: https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior

Работает только в Фаерфоксе.


:placeholder-shown

Отрабатывается, когда виден текст плейсхолдера.

Спецификация: https://www.w3.org/TR/selectors4/#placeholder

Не работает в ИЕ и Эдже.


Поддержка фич OpenType

Браузеры начали хорошо поддерживать Open Type и появились всякие свойства, связанные с этим. Настолько все тонко, что кодер вряд ли придумает зачем это все нужно. Верстать должен дизайнер ;-)

  • font-kerning — включение или отключение кернинга
  • font-variant-ligatures — управление лигатурами
  • font-variant-position — включение подстрочных или надстрочных символов
  • font-variant-alternates — управление глифами
  • font-variant-caps — управление капителью
  • font-variant-numeric — управление цифрами
  • font-variant-alternates — управление глифами
  • @font-feature-value — настройка шрифта и глифов
  • font-variant-east-asian — работа с лигатурами в текстах с иероглифами
  • font-feature-settings — настройка шрифта
  • font-language-override — смена основного языка при выборе глифов

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

Спецификация: https://www.w3.org/TR/css-fonts-3/#font-rend-props

Разные свойства по разному поддерживаются в разных браузерах.


Медиа-выражения: Interaction Media Features

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

Спецификация: https://www.w3.org/TR/mediaqueries-4/#mf-interaction

Фаерфокс пока что не поддерживает


CSS Scroll snap points

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

Спецификация: https://www.w3.org/TR/css-scroll-snap-1/

Хром никак не поддерживает, остальные не без проблем.


CSS-переменные

Об этом я давно что-то слышал, но сейчас посмотрел. Уже неплохая поддержка. Использовать в боевых проектах я бы пока не стал, но уже через годик можно будет, я думаю. Вряд ли они понадобятся ребятам, которые используют Stylus (LESS, SCSS, ...). Но, тем не менее, это очень важное нововведение.

Спецификация: https://drafts.csswg.org/css-variables/


Есть еще много крутого, но я решил не писать обо всем сразу потому что слишком много за раз — плохо.

4 мая   разработка

Дата в новой Эгее

Новая Эгея для меня — это Эгея 2.5. Та самая версия при которой потерялась совместимость со всеми старыми темами. В этом релизе даты начали вести себя крайне неадекватно. Если год текущий, то отображается, дата, а если предыдущий, то год. Правда где-то в тайтле висит полный таймштамп, но это так себе.

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

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

Первое

Сделайте дубль темы, чтобы не работать с оригиналом. В папке themes найдите папку plain и сделайте копию с другим названием. У меня, например, «plain-shugich». В скопированной папке поменяйте файл theme-info. Там нужно поставить другое название темы, чтобы в админке было легко менять.

Второе

Из папки /system/templates скопируйте файл notes.tmlp.php и вставьте в папку templates, которая находится в вашей новой теме.

Третье

Откройте скопированный файл и найдите там вот такой фрагмент:

<span class="e2-timestamp" title="<?=_DT ('j {month-g} Y, H:i, {zone}', @$note['time'])?>"><?= _AGO ($note['time']) ?></span> &nbsp;

У меня это 111 строка, но может отличаться.

Четвертое

Замените этот кусок на вот это:

<span class="e2-timestamp" title="<?=_DT ('j {month-g} Y, H:i, {zone}', @$note['time'])?>">
	<?php
	if(date('Y') == _DT ('Y', @$note['time'])) {
		echo _DT ('j {month-g}', @$note['time']);
	} else {
		echo _DT ('j {month-g} Y', @$note['time']);
	}
	?>
</span>

Это все. Можно заливать на сервер и наслаждаться. Дата будет выводится в формать «день месяц» для текущего года и в формате «день месяц год» для предыдущих годов.

24 апреля   разработка   эгея

Типограф на сайт

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

Собираю сайты на Вордпресс и использую типограф Муравьева.

Раз

В папке темы создаю папку includes и кладу туда файл EMT.php, архив с этим файлом качайте на файле типографа, нужна версия для PHP.

Два

В function.php добавляю:

require_once(get_template_directory_uri() . '/includes/EMT.php');

/** Типограф
 * @param $text {string} - текст, который нужно оттипографировать
 * @param $paragraph {boolean} - включить или нет перенос параграфов
 *
 * @return string
 */
function typo($text, $paragraph = false) {
	$typograf = new EMTypograph();

	$p = ($paragraph) ? 'on' : 'off';
	$options = array(
		'Text.paragraphs'=> $p,
		'Text.breakline'=> 'off'
	);
	$typograf->setup($options);
	$typograf->set_text($text);
	return $typograf->apply();
}

Три

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

Пример:

echo typo(get_the_title());
echo typo(get_the_content(), true);

Это все! Никаких больше дурацких кавычек, отвалившихся предлогов и прочей ереси.

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

С другими движками по аналогии.

31 марта   разработка

Настройка гита на хостинге

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

Шаг 1

Создаем FTP-юзера с доступом к корневой директории сайта (на уровень ниже от public_html) и включаем для него SSH. Сразу же запишем куда-нибудь доступы. Мы храним их в таком формате:

Логин FTP-юзера: username
Пароль: ************
Репозиторий: username@server-ip:project.git

Шаг 2

В корневой сайте создаем папку. ssh, а в ней файл authorized_keys. Туда запишем ssh-ключи людей, которые будут работать с этим проектом. Можно это сделать через ФТП, но мне привычней через SSH.

ssh username@server-ip
mkdir .ssh
cd .ssh
touch authorized_keys
nano authorized_keys

О том как сгенерировать SSH-ключ есть отличная инструкция на Гитхабе.

Шаг 3

В папке public_html инициализируем новый репозиторий и добавим файлы под контроль версий.

cd ~/public_html
git init
git add -A
git commit -m 'Init'

Шаг 4

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

cd ../
git clone --bare public_html project.git
cd public_html
git remote add hub ../project.git
git remote show hub

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

Шаг 5

В /public_html/.git/hooks/ создаем файл post-commit и ставим ему права 700.

cd ~/public_html/.git/hooks
touch post-commit
chmod 700 post-commit
nano post-commit

Внутрь помещаем следующее:

#!/bin/sh
echo
echo «Пушим изменения...»
echo
git push hub

Шаг 6

В /project.git/hooks/ создаем файл post-update и ставим ему права 700.

cd ~/project.git/hooks
touch post-update
chmod 700 post-update
nano post-update

Внутрь помещаем следующее:

#!/bin/sh
echo
echo «Вытягиваем изменения...»
echo
cd ~/public_html/ || exit
unset GIT_DIR
git pull hub master
exec git update-server-info

Безопасность

Стоит закрыть доступ к основновном Git-репозеторию через .htaccess

cd ~/public_html/
nano .htaccess

Вставляем следующее:

# deny access to the top-level git repository:
RewriteEngine On
RewriteRule \.git - [F,L]

Успех!

Это все, после этого можно клонировать репозиторий и работать:

git clone username@server-ip:project.git

или так

git remote add origin username@server-ip:project.git
git push -u origin master
7 сентября 2016   разработка

SMTP-фильтр на Digital Ocean

Какое-то время назад я перевез все свои проекты на Digital Ocean. Практически сразу увидел, что письма с сайтов не ходят, ни нотификации, ни формы обратной связи. Я сильно не стал переживать. Поставил на Вордпресс-сайтах SMTP-плагин и забил. Но примерно месяц назад этот плагин везде перестал работать, и я решил все починить. Сначала думал про плохую конфигурацию своего Debian-сервера (так и было). Но самая основная проблема была в том, что Digital Ocean блокирует все письма до тех пор, пока ты не попросишь снять блокировку.

Снимается блокировка просто, нужно написать в техподдержку примерно вот такое письмо:

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

Мой сайт тоже лежит на Digital Ocean, поэтому какое-то время вам не приходили уведомления о комментариях и ответов. Но сейчас они будут приходить.

2 марта 2015   digital ocean   разработка

Какой язык программирования выбрать начинающему

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


Хабраюзер voff перевел эту картинку на русский.

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

P. S. Программируйте!

27 января 2015   инфографика   разработка

Плохая верстка

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

Это, разумеется, годится только для быстрой оценки верстки. Для более серьезного анализа надо изучать код.

12 июля 2013   разработка