420873535

Лично для меня практический смысл picture заключен в использовании нескольких форматов. А конкретнее, главный файл в webp плюс jpeg-фолбек - экономия трафика порядка 20-30%.
Это малая часть возможностей, но в большинстве случаев использую только её.

Морфинг это обычно плавно между фиксированными / отрисованными состояниями.

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

Нашёл, если кому понадобиться)
https://jsfiddle.net/3mp7Ltr9/6/

Легко и просто! На чистом CSS сделал: https://codepen.io/CitizenOne/pen/abzOJYK

Можно даже без FLEX сделать

$('.you-class').slick({
vertical: true;
});

Задача на "Скорость-время-расстояние" =)

Скорость = screen.height / 1000; /* один экран за одну секунду */
Расстояние = body.scrollHeight; /* высота всей страницы */
Время = ?

Время = Расстояние / Скорость;

$('body').animate({scrollTop: Расстояние * -1}, Время);

или через пропорцию

screen.height - 1000
body.scrollHeight - t?

t = body.scrollHeight * 1000 / screen.height;

PS.
Высота страницы чуть сложнее определяется.
ScrollTop нужно точнее вычислять (высота страницы минус один экран).
Точный синтаксис animate я не помню.

$('form button').click(function(){
var $form = $(this).parents('form');
var id = $form.attr('id');
});

Что-то последнее время стало много вопросов на эту тему...

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

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

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

К сожалению, плюсов не бывает без минусов :) Хотелось бы о них тоже поподробнее - не чтобы отговорить, а чтобы предупредить.

- Цена, комплекутха, ЗиП. Новое серверное железо очень дорогое. Сервак за пол-лимона - это как здрассьте. "Для себя" обычно берут бу железо. Это довольно распространенный метод, так что существуют специальные конторы, торгующие бу серверным железом. Насколько оно старое? Обычно не моложе пяти лет. Почему пяти? В крупных конторах есть регламенты, по которым железо списывается по истечении определенного срока, обычно он пять лет. Списывается, независимо от состояния, даже если оно идеальное. Бу сервер можно прикупить за вполне приемлемые деньги (разумеется имея в виду, что винты нужно брать новые и не десктопные, а именно рейдовые). Комплектуху и ЗиП покупать можно в тех же конторах.

- Размещение. Сервер обычно в серверном корпусе, который ставится в стойку. Добро, если у Вас есть стойка :) а иначе его нужно куда-то пристроить - а без стойки эта большая плоская хреновина будет весьма неудобной для резмещения (Лайфхак: у меня лежит на шкафу)

- Шум. такого понятия как

тихий серверный шкаф

не существует. От слова совсем. Потому что шкаф - для серверной. Даже самый тихий сервер (а я подбирал именно по "тихости") даже при самых низких оборотах кулера (в BIOS - 4500 об/мин) - довольно заметно шумит. Кроме того, если температура повышается, сервер автоматически кладет на настройки BIOS и повышает скорость вращения кулеров - в итоге у меня сервер в людбое время устойчиво негромко гудит и периодически взвывает - потому что перегревается.

- Комфортная температура. Для сервера и человека - она разная и поэтому запросто получится, что Вам придется выделить серверу отдельную комнату :D

- Елестричество. Сервер жрет электричество. Круглые сутки, как дозорный в будке. Готовьтесь к повышению счетов от энергосбыта. Кроме того, сервер без упса будет падать при просадках - а в домах они не редкость. (У меня тоже нет упса :( )

- Изнашиваемые части. Про ЗиП было уже сказано - так вот, не забывайте, что сервер содержит части, которые ломаются :) Кулеры, винты - все это нужно будет покупать :)

- Интернет-канал. Для физиков как правило flat-rate не предоставляют (ну либо заломят, как с юрика), поэтому держать там нагруженный сайт Вы не сможете - он будет адово тормозить. Хотя обычный сайт работать будет (если пров дает белые IP).

- Анти-вирус, анти-ддос, анти-спам, анти-все-остальное. Все это придется делать самому либо просто забить. Разумеется, профессиональному админу это сделать несложно.

- Настройка, резервное копирование. Фактически повторение предыдущего пункта - спихнуть нее на кого, сами, все сами...

- Изменить IP практически невозможно, уж не говоря о его регулярной смене.

Оберните имя города в span, чтобы было так:

<div id="city">
  <img src="img/flag-m.png" />
  <span>Москва</span>
</div>

Сама подстановка значений:

document.querySelector('ul').addEventListener('click', e => {
  const li = e.target.closest('li');
  if (li) {
    document.querySelector('#city img').src = li.dataset.gerb;
    document.querySelector('#city span').textContent = li.dataset.city;
  }
});

// или

document.querySelectorAll('li').forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick({ target: { dataset: { city, gerb } } }) {
  document.querySelector('#city img').src = gerb;
  document.querySelector('#city span').textContent = city;
}

Работал параллельно с одним дизайнером, над одним проектом. Он работа в Скетче, я на Фигме, он мне присылал свои исходники, я свободно их открывал. Были минимальные баги, но решались они в один - два клика.

Фигма открывает Скетч достаточно качественно.

Сортируем существующий массив:

messages.sort((a, b) => {
  [ a, b ] = [ a, b ].map(n => sortableLanguages.indexOf(n.language));
  return a === -1 ? 1 : b === -1 ? -1 : a - b;
});

Собираем отсортированный новый:

const sorted = (arr, key) => arr
  .map(n => [ n, key(n) ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0]);


const order = Object.fromEntries(sortableLanguages.map((n, i) => [ n, i + 1 ]));
const sortedMessages = sorted(messages, n => order[n.language] || Number.MAX_SAFE_INTEGER);

// или

function sorted(arr, order, key) {
  const ordered = new Map(order.map(n => [ n, [] ]));
  const unordered = [];

  arr.forEach(n => (ordered.get(key(n)) || unordered).push(n));

  return [].concat(...ordered.values(), unordered);
}


const sortedMessages = sorted(messages, sortableLanguages, n => n.language);

Верстка под WP по сути укладывается всего в несколько отличий от верстки под что либо еще:

1. В некоторых местах (body, меню, обертки страниц/записей и тд) WP генерит свой список классов. Его можно и нужно использовать, если тема предназначена на продажу или в репозиторий на .org, предполагается что ее будут крутить/развивать под свои задачи. Если для себя / для клиента, то можно не использовать, но как минимум с меню придется на бекенде несколько правок сделать.
2. Контент, который редактируется в редакторе (старый TinyMCE или новый Gutengerg) либо лишен классов по умолчанию (тогда стучимся по классу контейнера), либо как разработчики намудрят (Gutenberg, всякие конструкторы страниц). В принципе, можно полностью под себя сделать с Gutenberg, но это дополнительные временные расходы.
3. Статика (скрипты, стили) подключается из PHP, картинки и другие файлы - как правило тоже, через медиа-библиотеку.

Иногда что-то по мелочи попадается, но в целом - это все.

Без JS и с описанной адаптивностью: https://codepen.io/arsenty/pen/mYxXoQ

Cosmonaut ., одинаковые шрифты подключаются с одним именем, различающуюся жирность и стиль пишут в font-weight и font-style.

Для современных браузеров нужны форматы woff2 и woff.

@font-face {
    font-family: "OpenSans";
    src: url("fonts/opensans.woff2") format("woff2")
            url("fonts/opensans.woff") format("woff") ;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "OpenSans";
    src: url("fonts/opensansbold.woff2") format("woff2"),
            url("fonts/opensansbold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}