Libiros
-
Posts
73 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Libiros
-
Как повлияет на быстродействие создание дополнительных DOM-элементов на странице?
Libiros replied to Libiros's question in JavaScript
Думал такое, но для WebPJS нужна подгрузка картинки. Вообще получается, что WebPJS делает base64 encode для картинок, если браузер не поддерживает .webp. Выходит, даже если браузер отдает только одну картинку пользователю, в моей задаче нужно переделать весь srcset! На моем сайте минимум 10 изображений и для каждого по 5 srcset'ов. То есть скрипт должен обработать в base64 50 изображений. Из них 40 не отобразятся, а место я сожру побольше, чем занимают сами картинки, даже путем экономии запросов к серверу. Отказаться от .webp вообще я тоже не планирую. Одно из окончательных решений, которые пришли мне в голову - определить заранее, поддерживает ли браузер .webp, и если нет, то отдавать пользователю .jpg. И не использовать разные костыли, типа .webp или кодирования в base64 на уровне сервера в .htaccess. -
Как повлияет на быстродействие создание дополнительных DOM-элементов на странице?
Libiros replied to Libiros's question in JavaScript
Прихожу к решению сделать base64 encode. Но это тоже костыльное решение. Но пока ничего другого. -
Как повлияет на быстродействие создание дополнительных DOM-элементов на странице?
Libiros replied to Libiros's question in JavaScript
На сервер отправляется запрос. nofollow сможет не индексировать картинки. Так что по быстродействию? -
Как повлияет на быстродействие создание дополнительных DOM-элементов на странице?
Libiros replied to Libiros's question in JavaScript
Очевидно, происходит, раз у нас появляется новый 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; Тогда вообще все размеры будут известны и ничего высчитывать не придется
-
Перенаселение div'ов или как верстать правильно?
Libiros replied to Libiros's question in HTML Coding
А мне нравится. А что там не так? Я согласен. Я стараюсь делать исключительно так, чтобы было удобно и комфортно. А семантика вот важна. Хотя, в последнее время я занимаюсь проектами, которые предполагают оплату контекстной рекламы и на семантику им плевать. Но ведь хочется же, чтобы все было по красоте... Эх. -
Перенаселение div'ов или как верстать правильно?
Libiros replied to Libiros's question in HTML Coding
Видел Но пример привести не смогу, увы. Но и само расположение элементов на таком сайте было простым, честно говоря. Раньше темы на 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/
-
Тоже хорошая идея!
-
Я решил проблему использованием полигонов. Возможно, было хорошим предложением использовать SVG, но применение сомнительно из-за семантики текстовых блоков. Примеры в песочнице выше. Интересно было бы выяснить, насколько тяжело рендерить полигоны, особенно если точек в них много. Например, в редакторе brackets мой ноутбук подвисает (хотя, при открытии файлов типа bootstrap.css тоже). Также решаема проблема со случайными величинами. Скажем, я использовал определенный полигон, но что делать, если мне нужно использовать разные значения каждый раз? Очень просто генерировать их с помощью javascript используя Math.round(Math.rand()....). Что касается круглых DIV или изогнутых, то здесь ситуация чуть сложнее и решается двумя способами. Один был уже предложен, правда его стоит доработать. Второй описан в этой статье, хотя там не совсем про "волны", но можно решить и ими, а также генерацией необходимых значений.
-
...и текст. Интересует, насколько семантически верно использовать текст в SVG? Я бы засунул его с помощью <text>, но насколько это будет правильно, в сравнении с используемыми мной на сайте тегами h2, h3, strong, p?
-
В целом, у меня получилось сделать все правильно, с учетом того, что у div и div:before стоит свойство height:100vh в моем проекте. Однако теперь возникает проблема в нижней границе. В песочнице видно, что есть нижняя граница толщиной, на вид 1px, но я решил эту проблему градиентом. К слову, тоже не ясно, почему это проявляется. И еще есть проблема в том, что несколько таких div'ов использовать я не могу. Так как мне нужно наложить один четко под другим. Но он располагаются на расстоянии. В картинке отражаю.
-
Песочница
-
Получается вот так: И вроде бы все хорошо, но попробуйте написать внутри <div> какой-нибудь <p> как все едет. Почему, не понимаю
-
Это интересная идея. И она бы подошла, если бы обрезка не была такой же "кастомной". То есть сейчас в примере у меня изогнутые линии. Возможно, какие-то блоки будут в виде остроугольного забора. Пока что нашел решение генерировать div через clip-path: polygon(); но теперь нужно придумать, как сделать border на нем... Варианты есть, но все выглядят как костыли.
-
В моем случае это, к сожалению, не выход
-
а можно на примере?
-
Друзья, возникла задача построения ряда блоков. Блоки располагаются один под другим. В каждом есть изображение, которое должно обрезаться снизу. Однако сам div нестандартный. Смотрим картинку Какие у меня были варианты решения: Использовать overflow: hidden; Но идея потерпела крах, потому что он обрезает не по линии, а по горизонтали. Использовать clip; Тоже крах, потому что теряется адаптивность и каждый раз рассчитывать clip даже с помощью js тяжело Разные варианты совмещения. Например, взять из макета дугу и картинку, сохранить как PNG и установить в основном слое как background-position: bottom; Пока это самая лучшая идея, но она не универсальна. Необходимо сделать так, чтобы работало с любой картинкой, не только с выбранной из макета. То есть было бы странно сначала закидывать любую картинку в макет, там вырезать ее вместе с дугой и вставлять как background Как строить такие блоки с обрезкой картинок на нижней границе?
