Глеб Кемарский

Две гипотезы:
1) в конкретной таксономии оказалось всё-таки только два поста.
2) список постов разбивается на несколько страниц по два поста на каждой.

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

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

Вариант решения: задать слой с другим фоном и делать ему fadeIn или fadeOut в зависимости от направления прокрутки.
https://jsfiddle.net/glebkema/8m6sL7cy/

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

Вариант решения: менять прозрачность второго слоя пропорционально координате прокрутки.
https://jsfiddle.net/glebkema/cd8pjdyg/

С бутстрапом совмещается тем, что:

1. бутстрап уже использует jQuery и его не надо подключать самостоятельно;
   
2. координаты переходов можно не задавать константами, а вычислять по положению ключевых элементов на странице.
   

Аналогичную задачу сделал так:

• построил небольшую базу данных (прямо на хостинге, SQL-командами через phpMyAdmin);
  
• купил за 12 долларов интерфейс для ввода данных;
  
• собрал на пхп кучу страниц, которые берут данные из базы и показывают в нужном мне виде;
  
• данные вводил с ноутбука, а страницы с результатами открывались на чём угодно.
  

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

Поэтому в разработке сервиса вижу три риска:

1. сервис решит не ту задачу, которая на самом деле нужна;
   
2. сервисом будет неудобно пользоваться;
   
3. интерес к сервису пропадёт до окончания разработки.
   

Советую разделить задачу на две - помочь себе планировать меню и натаскать себя как разработчика. Первую решал бы так:

Шаг 1. Проверить жизнью.
Отработайте неделю с ручкой и блокнотом. За это время невольно перепробуете разные варианты оформления и разберётесь, что вам помогает, а что - только лишний труд.

Шаг 2. Продумать первую версию помощника.
Изучите листочки и решите, какие функции облегчат вашу возню с бумагой. Что должно быть на смартфоне, чтобы планировать меню, даже когда навалятся лень, усталость и новое увлечение? Для первого шага нужно одну-две функции, не больше.

Шаг 3. Реализовать готовыми решениями.
Изучите лайфхаки и программы, решающие схожие задачи в других областях. Например, список недостающих продуктов можно держать в заметках на смартфоне. Закончилась мука - добавили строчку. Купили - удалили. Банально, зато всегда под рукой и быстро открывается. Можно выбрать программу для покупок. Можно приспособить список дел или менеджер задач, только вместо задач вносить блюда, а вместо дел - продукты.

Шаг 4. Повторить первые три шага - проверить помощника жизнью, придумать следующую версию, реализовать. И так далее.

Плюсы:

1. помощник заработает раньше, чем рутина похоронит дело;
   
2. освоите программы и лайфхаки, которые помогут не только с едой;
   
3. разберётесь, как работают чужие сервисы, какие у них плюсы и минусы.
   

Для второй задачи прокачивайте html, css, js, php, sql и т.п. По тому же принципу: собирайте готовые решения, выбирайте горячую проблему, создавайте небольшое улучшение, тестируйте практикой.

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

• метод прогрессивного джипега;
  
• Getting Real (на английском);
  
• метод ФФФ (есть вариант помягче и с примерами).
  

Эти два пояса нужно обернуть в отдельные контейнеры. В первом контейнера будут сайдбар и начало текста. Во втором - только продолжение текст.а.

Два варианта как это сделать:
1) изменить шаблон страницы или добавить новый шаблон для таких страниц
2) страницу настроить как страницу без сайдбара ("на всю ширину"), а сайдбар вставить непосредственно в содержание страницы (задать в начале две колонки, слева поставить содержимое сайдбара, справа - первые абзацы текста)

Стандартная стека бутсрапа состоит из 12 колонок. Каждый ряд (row) делится на условные 12 частей, и col-xs-2 отхватывает две из них, col-xs-4 - четыре.

Во втором случае четыре маленьких блока находятся в одном ряду с большим. Здесь они делят 12 колонок на пятерых. Поэтому получается четыре блока по 2 колонки и один блок из 4 колонок. 4х2 + 1х4 = 12.

А в первом случае маленькие блоки завёрнуты в отдельный маленький ряд. Этот ряд тоже состоит из 12 условных частей, а маленькие блоки делят его поровну. Поэтому они должны быть не col-xs-2, а col-xs-3. Тогда 4х3 будет 12, и они займут маленький ряд целиком.

<div class="container">
   <div class="row">
      <div class="col-xs-8">
           <div class="row">
               <div class="col-xs-3">Контент</div>
               <div class="col-xs-3">Контент</div>
               <div class="col-xs-3">Контент</div>
               <div class="col-xs-3">Контент</div>
           </div>
      </div>
      <div class="col-xs-4">Контент</div>
   </div>
</div>

Вот подробно и с картинками: www.stseprounof.org/how-to-renew-translation
Коротко:

1. в Poedit открываем текущий перевод ru_RU.po
   
2. пункт меню "Каталог / Обновить из POT-файла"
   
3. в окне выбора файла меняем ограничение "Шаблоны * .POT" на "Все файлы * . *"
   
4. выбираем англоязычный файл из обновления
   (автор говорит про default.po, у меня это en_EN.po)
   
5. получаем окошко с перечислением новых и устаревших записей
   
6. закрываем окошко, чтобы Poedit добавил новые записи и удалил устаревшие
   (если какая-то английская фраза осталась, но изменилась, то её перевод окрасят жёлтым цветом как "неточный")
   
7. проверяем, что изменилось, и сохраняем новый ru_RU.po
   

https://notepad-plus-plus.org/features/multi-editi...

Помимо "display:block" нужно отменить и "width: 100%". Тогда поле ввода поместится рядом со своим названием. Например, так:

.form-control {
    display: inline-block;
    width: auto;
}

А если пользоваться штатными средствами, то getbootstrap.com/css/#forms-horizontal