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

разработка

Code Wars

Code Wars — крутой проект с программерскими задачками на разных языках программирования. Я там переодически занимаюсь. Я не очень крутой программист и зачастую могу не знать каких-то особенностей языка, поэтому решаю задачи более сложным путем, чем можно было бы. Тем круче потом зайти в решения и увидеть, как задачу решали другие.

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

codewars.com

Советы

  1. Ката — это задание.
  2. Кью — твой лвл, чем выше Кью — тем ты круче. Есть еще даны, но когда до них дойдет уже все понятно будет.
  3. В разделе с катами есть фильтр, по умолчанию там выбран вывод самых новых кат, я рекомендую переключить на самые популярные.
  4. Смотрите спикски решений и читайте комменты, там порой можно найти что-то очень клевое.
 Нет комментариев    114   2018   обучение   разработка

Как браузеры выравнивают флоаты

Прочитал статью How browsers position floats. Её много кто перепостил, я натыкался на нее раз пять, ну и в Веб-стандартах тоже упоминали.

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

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

 18   2018   разработка

Про дополнительные блоки в Эгее

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

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

Но мне нужно было сделать несколько важных вещей:

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

Прикрутить метрику

Это совсем просто и описано в документации. В директории /user/extras/ создаем файл footer-post.tml.php и запихиваем туда код метрики.

Поменять фавиконку

Для созданием фавиконок я пользуюсь сервисом Real Favicon Generator, он создает набор иконок для всего (браузер, айфон, андроид, все размеры и форматы), а после выдает архив и код, который нужно вставить в HEAD.

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

Использовать просто. Нужно в директории /user/extras/ создать файл head-extras.tmpl.php и засунуть туда код, который вам дал генератор фавиконок. Ну и, вообще, если что-то нужно вставить в HEAD, то этот способ работает.

Указать, что комментарии отключены

Тут чуть сложнее, но тоже не сложно. Опять же в директории /user/extras/ создать файл note-post.tmpl.php. Этот доп. блок описан, но я также хочу, чтобы нотайс об отключенных комментариях был виден только на странице с заметкой и только когда комментарии отключены.

Устроить это можно следующим образом:

<?php
$isNotePage = !!$content['notes']['only'];
$isCommentEnable = !!$content['notes']['only']['commentable?'];
if($isNotePage && !$isCommentEnable) {
?>
  <div class="e2-text">
    <p class="foot">
      Комментарии отключены, но если вы хотите поделиться со мной опытом, что-то спросить или просто пообщаться, то пишите на <a href="mailto:me@shugich.net">me@shugich.net</a>
    </p>
  </div>
<?php } ?>

Вот и всё. Можно продолжать пользоваться стандартной темой и радоваться простым обновлениям. Если вы разработчик — загляните в переменную $content. Там много чего интересного, возможно пригодится.

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

Умолчания и сокращения в NPM

Вот, например, в GIT можно указать имя и почту по умолчанию и больше указывать не надо:

git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

Ну это все знают. А, оказывается, в NPM тоже так можно:

npm set init.author.email "wombat@npmjs.com"
npm set init.author.name "ag_dubs"
npm set init.author.url "npmjs.com"

И при npm init встанут правильные данные. Для меня это вообще откровением было. Но если бы я почитал документацию (https://docs.npmjs.com/getting-started/using-a-package.json), то не было бы, конечно. Так можно многие параметры по умолчанию задавать на самом деле.

А еще бесит, когда в ридми не используют сокращенные версии ключей:

# Как пишут
npm install webpack --save-dev
npm install react --save

# Как надо
npm i webpack -D
npm i react -S

Сокращения — прекрасная штука и нужно навязывать их всем я считаю.

 10   2017   разработка

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

Новая Эгея для меня — это Эгея 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>

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

 15   2017   разработка   эгея

Закрыть эскейпом

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

 9   2017   дизайн   разработка

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

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

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

Раз

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

Два

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

require_once(get_template_directory() . '/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);

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

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

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

 39   2017   разработка

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

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

Шаг 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
 2 комментария    50   2016   разработка

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

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

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

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

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

 5   2015   разработка

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

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


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

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

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

 3 комментария    14   2015   инфографика   разработка
Ранее Ctrl + ↓