• Хватит всё подряд называть ИИ
    0

    Статью явно написал ИИ :)

  • Хакнуть Госуслуги – можно, если очень нужно
    0

    Так же делал)

  • Изучаем принцип работы процентов для свойства padding-top на примере задачи «Верстка плейсхолдера для изображений»
    0

    Чем плохо плавное появление?

  • Изучаем принцип работы процентов для свойства padding-top на примере задачи «Верстка плейсхолдера для изображений»
    0
    1. В src, действительно, удобно размещать превью и блюрить на время загрузки оригинального изображения.
    2. По поводу сравнения размеров на клиенте — если такой вариант не нравится — то можно все картинки оборачивать в контейнер, padding-top которого рассчитывать на сервере, в зависимости от соотношения сторон загружаемого изображения. Саму картинку в абсолют.
      • Если размер изображения НЕ хранится на сервере, его можно получить во время обращения к странице (операция довольно быстрая)
  • Изучаем принцип работы процентов для свойства padding-top на примере задачи «Верстка плейсхолдера для изображений»
    0

    Тк атрибут height у img перекрывает свойство по умолчанию. Поэтому что бы перекрыть атрибут, мы и добавляем правило в css.
    Но как альтернатива — можно просто в js удалять атрибут height у img — эффект тот же

  • Изучаем принцип работы процентов для свойства padding-top на примере задачи «Верстка плейсхолдера для изображений»
    0

    Можно лучше) Не будут прыгать изображения. Картинки будут появляться плавно, а не прогружаться вертикально. Будет ленивая загрузка (по желанию). И любое соотношение сторон.


    1. Получаем размеры картинок на сервере и прописываем их в атрибуты width и height у img.
    2. Меняем src на data-src
    3. В css пишем для img max-width:100% (ну или сколько угодно)
    4. Добавляем скрипт js, который сравнивает фактическую ширину картинки с шириной в атрибуте width, и обновляет height
    5. Дальше в js дергаем значение data-src и грузим в фоне. Когда картинка загружена — меняем data-src на src. (Это можно делать либо сразу, либо после загрузки основного контента будет ленивая загрузка)
    6. В css либо пишем img[src], либо класс с height:auto (лучше класс)
  • Google PageSpeed Insights кардинально обновился, что изменится?
    0

    Можно смотреть юзер агент, и на проверку speedtest отдавать контент без метрик, сиц.иконок и т.д.
    То же самое касается и других ресуров:)
    В результате и пользователи получают адекватный контент, и гугл не снежает баллы:)
    Но, конечно, таким трюком не надо злоупотреблять, и применять его только в случаях, когда попросту нельзя нормально исправить «недостатки», за которые снижается оценка!

  • Оптимизация графики для веба: самое важное
    0

    Несколько вопросов:


    1. Есть ли эти инструменты сжатия изображений и конвертер в webp для php? К примеру, хотелось бы проводить оптимизацию картинок при загрузке через CMS.
    2. В статье есть пример с гаусовским размытием превью изображений. Но если использовать в css фильтр blur — то границы изображения тоже размываются и смешиваются с фоном. Получаются засветы. Хотя на скриншоте в примере такой проблемы нет.
    3. При использовании атрибута srcset для каждого варианта изображения надо писать полный путь до него. Пример:

      Хотя в большинстве случаев все варианты лежат в 1 папке, а путь к ней может быть слишком длинным. Можно ли 1 раз указать путь к картинкам, а в srcset перечислять просто название файлов?


  • О чем должен помнить веб-разработчик, чтобы сделать всё по SEO-феншую
    0

    Читаю некоторые комментарии и улыбаюсь:)
    Во первых, не надо выдумывать из головы, учитывает поисковик тот или иной параметр, если о нем недвусмысленно написано в документациях от самого поисковика.
    Во вторых, приведенные в статье примеры, в своем большинстве, однозначно нужно принимать во внимание перед созданием сайтов! Это совсем не сложно) В противном случае, мы можем получить (и часто так и выходит) сайт, который без танцев с бубнами можно только на контекстную рекламу пускать.
    И в третих, большинство сайтов создаются для дальнейшего продвижения их в сети и привлечения лидов. И вот тут с сайтом, в том числе, начинают работать СЕО-шники, которые, как ты ни крути, будут давать кучу рекомендаций, которые стоит выполнять, включая и те, что написаны в статье. Да — это как кидать камушки в воду, и смотреть к чему все приведет, но! Если ничего вообще не делать — то результата уж точно не будет.

  • Насколько быстр AMP на самом деле?
    0

    Люди хотят золотую кнопку «Сделать хорошо», и что бы им ничего не пришлось делать самим. В web так не бывает.
    Но гугл дает им такую «кнопку», вдобавок «кормя конфетками» с более высокими позициями в выдаче! Но умалчивет о куче нюансов, которые всплывают в последствии… Печально..

  • Интернет-магазин цветов, или как мы облажались на День Святого Валентина
    +5

    Увидив скриншот с ошибкой, сразу улыбнулся: ах этот Битрикс… Мощный, надежный, популярный… А потом что-то идет не так… И никто не понимает «в чем же дело?! почему так получилось?!»


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

  • Ищем поддержку hover на css
    0
    Не тестировал код в Firefox mobile. Но во первых, скорее всего, можно добавить еще один параметр в запрос для фильтра именно Firefox mobile. Во вторых надо смотреть, а есть ли пользователи сайта с таким браузером.
  • Ищем поддержку hover на css
    0
    Т.к. вполне вероятно, что будет планшет с бОльшим разрешением экрана, а браузер на ноутбуке/пк можно свернуть в более узкое окно, и т.д. Много нюансов
  • Ищем поддержку hover на css
    0
    см. ссылку на caniuse в тексте статьи =)
  • Ищем поддержку hover на css
    0
    На 2-в-1 девайсах будет активен hover. Функционал не потеряется.
  • Ищем поддержку hover на css
    0
    На 2-в-1 девайсах будет активен hover. Функционал не потеряется
  • CSS и iOS Safari
    0
    что бы эластичный скролл работал, нужно ставить либо overflow: auto либо overflow: scroll
  • Пробел в знаниях основ веб-разработки
    0
    Не халявщики, а потенциальные клиенты! Большинство сайтов нацелено на продажу товаров и услуг.
    И клиента на волнует то, на чем сделан сайт, сколько за него заплатили разработчикам и т.д. Если его что-то не устраивает, он уйдет с сайта и все!
    Конечно, есть проблема, что заказчикам подавай конфетку за копейки. Но здесь уже отдельный разговор)

    А по поводу абонентки, представим в аналог обычный продуктовый магазин. Сделать все через одно место, где при входе на тебя с потолка капает вода с протекающего потолка, скользкий пол, на котором все падают и т.д. И сделать другой продуктовый магазин, в котором нет такого беспорядка, и брать на входе деньги… Это как-то не правильно.
  • Пробел в знаниях основ веб-разработки
    0

    Полностью поддерживаю! Не раз встречал сайты, в которых каждый «чих» делается с использованием какой-нибудь библиотеки или фреймворка. Сайт жутко тормозит, долго грузится, и может даже криво работать на мобилках… Базовые знания в том числе нужны, что бы таких тормозов не было!
    А «костыли» можно встретить абсолютно везде! Вне зависимости от того, написан код на ванильном js, или с использованием библиотеки/фреймворка!

  • CSS и iOS Safari
    0
    Будет за пределами… Но не будет прорисовываться во время скролла. Так что это не вариант =(
  • CSS и iOS Safari
    0
    Пользуйтесь на здоровье! ;)
  • CSS и iOS Safari
    0
    Если в портретной ориентации слишком мелкий шрифт — то это недочет дизайна/верстки. И надо увеличивать шрифт, а не «заставлять» пользователей крутить телефон) Сайт должен быть удобен в любой ориентации.
  • CSS и iOS Safari
    0
    Да, с этими браузерами подстава) Изменил этот пункт. Спасибо!
  • CSS и iOS Safari
    0
    спасибо! поправил!
  • Я решил отключить Google AMP на своём сайте
    0
    А еще, если AMP-версия сайта располагается на поддомене — то Яндекс может ее проиндексировать как обычные страницы, т.к. не понимает кроссдоменный каноникал. В итоге это создает трудности в продвижении основных страниц в Яндексе =)
  • Занимательная вёрстка с единицами измерения области просмотра
    0

    Статья понравилась:) Заинтересовал последний пример с индикатором прокрутки, но он оказался не рабочим на практике, т.к. он перекрывается контентом. Т.е. любая картинка, background в блоке и т.д. перекроет индикатор:(

  • Слайдер на CSS
    +1

    И каждый раз, когда я захочу добавить еще слайд, или убрать, придется лезть и править css?!

  • А если без JavaScript?
    0
    Примеры с этого сайта (слайдер, аккордеон) жестко привязаны к css и наименованию id…
    Уберите элемент с #slide-4 в слайдере — и он будет изначально с пустым фоном.
    Добавьте в аккордеон более 4х элементов, или просто с другими id — и она перестанет работать.
    И надо лезть в css, что бы подстраиваться под id и кол-во элементов!

    В моих же примерах лезть в css при изменении количества элементов на странице не надо! Добавьте Вы хоть 20 слайдов с любыми id — все будет работать! 1 раз настроил и все;)
  • А если без JavaScript?
    0
    По поводу чекбоксов без форм: как вариант, можно создать форму, и привязать к ней все чекбоксы через атрибут form (html5).
  • А если без JavaScript?
    0
    1. validator.w3.org на чекбоксы без форм не ругается.
    2. Интересно, что на сайте apple.com раскрытие меню в мобильной версии происходит тоже с помощью checkbox, label и css-стилей.
  • А если без JavaScript?
    +4

    Это просто примеры реализации, причем не требующие никаких больших трудозатрат во внедрении на сайт.
    По поводу свайпов и тач событий — да, на css это не обработаешь.
    "Шаг в сторону" — можно сказать про многое. В том числе и про js: другой скрипт может тормозить загрузку ваших скриптов; jquery обновилась, и каруселька сломалась и тд. (это чисто примеры).
    Приведенные в статье варианты реализации можно использовать для каких-то конкретных случаев (хотя меню и модальное окно я использую и на рабочих проектах).
    Модальное окно можно вызвать из любого места на странице. В описании к примеру написано, как это сделать.