Libiros

Думал такое, но для WebPJS нужна подгрузка картинки. Вообще получается, что WebPJS делает base64 encode для картинок, если браузер не поддерживает .webp. Выходит, даже если браузер отдает только одну картинку пользователю, в моей задаче нужно переделать весь srcset! На моем сайте минимум 10 изображений и для каждого по 5 srcset'ов. То есть скрипт должен обработать в base64 50 изображений. Из них 40 не отобразятся, а место я сожру побольше, чем занимают сами картинки, даже путем экономии запросов к серверу. Отказаться от .webp вообще я тоже не планирую. Одно из окончательных решений, которые пришли мне в голову - определить заранее, поддерживает ли браузер .webp, и если нет, то отдавать пользователю .jpg. И не использовать разные костыли, типа .webp или кодирования в base64 на уровне сервера в .htaccess.

Прихожу к решению сделать base64 encode. Но это тоже костыльное решение. Но пока ничего другого.

На сервер отправляется запрос. nofollow сможет не индексировать картинки. Так что по быстродействию?

Очевидно, происходит, раз у нас появляется новый dom-элемент с изображением. nofollow для сокрытия от индексации. Ваша очередь.

Решил использовать .webp для изображений на сайте, а также оптимизировать его через рекомендации google audits. Таким образом получилось следующее: <img src="image.webp" srcset="image-480.webp 480w, image-768.webp 768w, image-1024.webp 1024w" alt="alt" titile="title"/> Так как webp не поддерживается некоторыми браузерами, было решено использовать решение WebPJS. Теперь есть следующая проблема: решение заменяет атрибут src, но не трогает srcset. То есть изображения остаются неизменными и не отображаются. Есть следующая идея, но я, полагаю, это будет очень затратно в плане ресурсов, а также неизвестно, как это будет влиять на SEO (может, спасут теги <nofollow>?). Распарсить атрибут srcset Создать столько img-элементов, сколько указано изображений в атрибуте Зацепить у каждого измененный атрибут src Составить новый атрибут srcset и заменить его на первом img Остальные img будут помещены под тег nofollow с классом display:none; Пока описывал решение, подумал, что, возможно, это плохое решение в том плане, что тогда у меня возрастет количество запросов на сервер как раз на количество новосозданных img-элементов. Но не уверен, так ли это.

Давно придумали костыли в виде .js библиотек, чтобы везде все поддерживалось. Один лишний HTTP-запрос роли не сыграет, зато геморроя станет куда меньше.

В 2017 году хотеть купить профессиональный компьютер за 40к - ну такое... Сам пользуюсь с Macbook pro retina 13" за 40 тысяч. Тянет все без тормозов. Никогда не закрываю лишние программы, подключаю по HDMI второй монитор и работаю в Brackets и Sublime text. Нагруженные Photoshop макеты вообще не проблема. Куча вкладок в фотошопе тоже. + Office + 3 браузера (сафари, хром, мозилла). Параллельно могу что-то качать. Почтовый клиент, мессенджеры, музыка из вконтакте. Но я бы себе докупил какой-нибудь iMac с огромным дисплеем, например. Если задачи более требовательные, чем я описал, то тот же макбук, но дороже. Например, 16 ГБ оперативной памяти. Или i7 процессор. Хотя я сомневаюсь насчет необходимости i7. Вот памяти добавить можно. Важное замечание здесь - Retina дисплей. Это очень важно, как для глаз, так и для восприятия цвета. Второй монитор должен быть IPS. У меня, например, монитор обычный и это мешает. Когда я полчаса смотрю в ретину, потом смотрю на большой экран - первые секунды не понимаю, что вообще происходит. Еще замечу, что важна не столько мощность компьютера, сколько его батарея. Я заряжаю свой макбук один-два раза в день, при условии, что он работает минимум 12 часов в сутки. Я могу уехать с ним по делам и работать в транспорте, в кафе, в парке, в очереди, в лифте. Я забыл про зарядку, но если нужно ее взять - я кладу ее в карман, чего не сделаешь с каким-нибудь Acer'ом и ему подобным компьютером.

Macbook Pro Retina 15"

Scroll - Фон прокручивает вместе с элементом. Это значение по умолчанию Local - Фон прокручивается вместе с содержимым элемента А наглядно можно здесь посмотреть

Как минимум, вот так. Но нужно еще сделать динамические переносы для <p>. Но сами разберетесь .services { display: flex; } .service { text-align: center; margin-right: 32px; padding:0; display: inline-flex; } .service:last-child{ margin-right: 0; } .service img { max-width: 100%; margin: 0 auto; } .service a p { align-items: flex-end; text-decoration: none; font-size: 16px; font-weight: bold; color: #2a2a2a; }

Дополню еще тем, что можно поставить box-sizing: border-box; Тогда вообще все размеры будут известны и ничего высчитывать не придется

А мне нравится. А что там не так? Я согласен. Я стараюсь делать исключительно так, чтобы было удобно и комфортно. А семантика вот важна. Хотя, в последнее время я занимаюсь проектами, которые предполагают оплату контекстной рекламы и на семантику им плевать. Но ведь хочется же, чтобы все было по красоте... Эх.

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

Я смотрю на современные сайты и их исходный код. Потом я смотрю на то, какой получается верстка, благодаря bootstrap и ему подобных css-фреймворков. И у меня зреет далеко не новый вопрос - как верстать? Чтобы выровнять тот или иной блок, приходится прибегать к тому, что мы плодим бесконечные <div>. Для каждого пишем класс и разрабатываем его в лишних строках CSS. И подключаем еще один CSS с media queries, чтобы все получилось адаптивно... Да, сейчас к нам приходят flex и это здорово! Это как раньше была замена табличной верстки или введение анимаций. Но семантика рушится. Раньше я ориентировался на What Beautiful HTML looks like, но сейчас это далеко не всегда возможно. Какие ваши мысли?

Насколько я понял, нужно сделать так: <span> <a href=""> Description Description Description Description Description Description </a> </span> CSS: span { display: block; text-align: center; } a { line-height: 2; padding-bottom: 5px; border-bottom: 1px solid green; text-decoration: none; } Рабочий пример в песочнице: https://jsfiddle.net/e6ptfx6s/2/