• Меню для меню, гриды или Бутстрап, целесообразность удобства
    0

    (дублирую с Ютуба для развития дискуссии)


    Гуглоботу не нужно красиво, ему нужно чтобы разметка была нормальная. Да, есть некоторые нюансы, но вряд ли у вас либо гриды, либо сразу display: none. Ещё одна причина, чтобы начинать mobile-first, с одной длинной колонки, а потом улучшать гридами. IE11, старым Safari и Гуглоботу такое понравится. Мне кажется, что чаще всего гриды используют для глобальных раскладок. А контент уже лежит внутри каждой из частей. Тут нужно от практики идти (и там кажется нет проблем), а не ждать пока Гуглобот обновит свой Хромиум.

  • Меню для меню, гриды или Бутстрап, целесообразность удобства
    0

    Это вообще не о том, хотя вы можете уловить пару общих мыслей.

  • Меню для меню, гриды или Бутстрап, целесообразность удобства
    0

    Так уж вышло, надо справляться )

  • Меню для меню, гриды или Бутстрап, целесообразность удобства
    +1

    Спасибо, думаю так и сделаю в следующий раз.

  • Доступность интерфейсов. Лекция Яндекса
    0

    Отличная лекция и плохая расшифровка :(


    Самое плохое — слайды с текстом и кодом картинками. Это противоречит почти всему, чему учит лекция. Как так? Ну и убрать из текста контекст ШРИ, сделать его полноценным и независимым тоже несложно, но это скорее про редактирование.

  • BEM'a не должно существовать
    +15

    Вы вроде даже приводите цитаты с bem.info, а там ведь по-русски всё написано. Но вы просто не читали. Там на все (да, вообще все) ваши претензии есть ответы.


    Больше всего доставил запрет «всё блоками». Нет, правда, ржу. Вы не поняли, что блок — это не коробка, не кирпич, не что-то большое. Блок — это самостоятельная единица интерфейса. Есть блоки, у которых нел элементов и стилей 5 свойств. Это тоже блок.


    Смешно, грустно, стыдно за вас. Что вот так вышли и показали себя миру, сказав гулопсть, поторопившись, не разобравшись.


    Почитайте «Архитектуру CSS» Филипа Уолтона, вчитайтесь в bem.info, например в FAQ есть хорошие ответы. Ну и видео посмотрите, для вас же снимали:


  • Кастомный подход для нормализации и сброса стилей (custom-reset.css)
    –1

    Ховеры рисуют, чтобы было симпатично (градиентик сдвинулся, цвет стал бледнее), аутлайны нужны для того, чтобы явно говорить «ты здесь, этот элемент активный». Ваш дефолт не только бесполезный, но и вредный.

  • 5 приемов работы с CSS, о которых вам следует знать
    +7

    Я понимаю, что вы привыкли. Но если вы правда писали это для новичков, то почему бы не дать примеры на CSS, а не на Sass? Вы даже не упоминаете это нигде и случайному человеку это кажется нормальным. Он копирует код, сохраняет и ничего не работает.

  • Исследование Ivy — нового компилятора Angular
    0

    Шакид, всё же.

  • Веб-компоненты. Часть 3: html шаблоны и импорты
    +4

    HTML-импорты считаются тупиковой веткой: они, например, уже есть за флагом в Firefox, но включать их не планируют. Не удивлюсь, если их выпилят и из Chrome. Альтернатива — ES-импорты.

  • Реактивный фронтенд. История о том, как мы снова всё переписали
    0

    Предвосхищая «ой, ну подумаешь» и оставляя в стороне то, что код не выделить и не скопировать, да и индексации ноль, я просто оставлю одну картинку. Зашёл почитать статью на мобилке:


  • Реактивный фронтенд. История о том, как мы снова всё переписали
    +4

    Спасибо, но тем, кто постит код картинками, готовят отдельный котёл в аду.


    Попробуйте может объяснить, я даже готов понять.

  • Приглашаем на Front-end MeetUp в Райффайзенбанк UPD: Трансляция митапа
    +3

    В тексте поста нет слова «Москва». Добавьте его, пожалуйста, в заголовок. «Ну а где ещё?» — это синдром дефолт-сити.

  • Полезное дизайнеру и разработчику. Свежие утилиты и инструменты для ускорения работы. Выпуск № 10
    +1

    Спасибо за дайджест. Только у меня личная просьба: можно без & в заголовке? Это я магазину Шубы & Меха могу простить, они не ведают, что творят, но тут вроде дизайнеры, люди не чуждые здравому смыслу.

  • Начинающему веб-мастеру: делаем одностраничник на Bootstrap 4 за полчаса
    +2

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

  • Начинающему веб-мастеру: делаем одностраничник на Bootstrap 4 за полчаса
    +11

    Такое ощущение, что я попал в 2003 год: комментаторы кивают головами «хорошая, хорошая статья, ну… разве что недостатки мелкие есть». Да вы с ума сошли все: <font color="#3AC1EF"> и сингл-пейдж на jQuery, серьёзно?


    Опять вы переводите всякий мусор, не понимая, что делаете. Здесь очень много вредных советов для новичков. HTML, CSS, JS — весь код кричит «я с позавчерашнего дня во фронтенде, но вот вам статья».

  • Сортировка списков на CSS
    +2

    Только не надо делать вид, что это рабочее решение. Оно недоступно с клавиатуры, для скринридеров и не выглядит проще. В чём, собственно, профит решений на чистом CSS? В том, что вам не нужно писать JS? На любом сайте уже куча JS.


    Давайте сделаем правильный выбор между плохой сортировкой на CSS и хорошей на JS.

  • Html страница глазами разработчика приложений. Часть 1: «Подготовка»
    +1

    Ну давайте разбираться. То, что я приведу ниже — это не повод поспорить (оправдаться) по каждому пункту, это общепринятые практики в современной вёрстке. Я её практикую сам и учу в рамках HTML Academy — это мой ответ на вопрос «а где научиться?»


    1. Опасные селекторы: #main может встречаться только один раз на странице, а значит никакой универсальности и сделать второй элемент с такими же стилями не получится. Плюс селектор по #id специфичнее, а значит его будет сложно перебить. Напротив, header может встречаться несколько раз на странице, а вы к нему обращаетесь глобально, мол, вообще все header на странице. Селектор .scroll-nav li a слишком зависит от структуры HTML, которая может и будет меняться.


    #main { … }
    header { … }
    .scroll-nav li a { … }

    Один из признаков того, что у вас проблемы с селекторами — это !important, который сам по себе является антипаттерном.


    .lang-first-init {
        display: none !important;
    }

    Вывод: сегодня подавляющее большинство разработчики пишут селекторы вида .main и .header, это самое гибкое и удачное решение. Познакомьтесь с подходом БЭМ — это хорошая система именования классов и описания интерфейсов, которая сегодня мейнстрим в разработке интерфейсов.


    2. Синтаксические ошибки: Это не CSS-комментарии (они выглядят так: /* … */) и такой код ломает следующий за ним селектор, то есть все стили для header не применятся.


    <---------------header--------------->
    header { … }

    Да, это «всего лишь пример в статье», но это показывает небрежность. Скопированный отсюда код сломается.


    3. Префиксы: В одном месте вы пишете очень подробную батарею префиксов для свойства transition, а в другом не пишете для animation и @keframes, притом, что кроссбраузерность у transition на поколение-два браузеров лучше, чем у animation.


    .transition{
        -webkit-transition: all 500ms linear;
        -moz-transition: all 500ms linear;
        -o-transition: all 500ms linear;
        -ms-transition: all 500ms linear;
        transition: all 500ms linear;
    }
    @keyframes hideBlock {
        …
    }

    Уже года три верстальшики не пишут префиксы для браузерных свойств руками. Для этого используется Автопрефиксер, которому вы, при желании, можете скормить список браузеров, которые вы хотите поддерживать. Код с префиксами слишком раздувается, а их наличие — признак устаревшего кода и отсутствия шага сборки (оптимизации) этого кода.


    4. Технологии вёрстки: Вы используете только флоаты float: left, которые хоть и продолжают работать во всех браузерах, но уже пару-тройку лет как уступили место флексам display: flex. Флексы гораздо удобнее: их не нужно клиарить, вертикальное выравнивание и колонки одинаковой высоты в них — ерундовое дело.


    <div class="clearfix"></div>

    Когда в коде есть .clearfix, то этот код с душком: либо устарел код, либо навыки автора.


    5. Лишние атрибуты: У вас вроде есть и <nav>, и <header>, и даже пара заголовков <h3> — за что вам отдельное спасибо. Но есть места, где мусорные (ненужные) атрибуты показывают небрежность.


    <link rel="stylesheet" type="text/css" href="css/style.css" media="all">
    <link rel="stylesheet" href="css/style.css">
    …
    <script type="text/javascript" src="scripts/jquery.min.js"></script>
    <script src="scripts/jquery.min.js"></script>
  • Html страница глазами разработчика приложений. Часть 1: «Подготовка»
    +3

    Есть большая беда с вашей статьёй: уровень знания вёрстки, судя по коду, у вас довольно начальный или устаревший. Это даже не уровень хорошего новичка, которого возьмут на работу верстальщиком.


    И нет ничего плохого, в том, чтобы быть новичком. А если вы не новичок, то знайте: в коде много ошибок и устаревшие подходы.


    Как бы то ни было, вы радостно демонстрируете этот код в рамках наверняка очень полезной статьи. Но код плохой, я бы никому не рекомендовал делать что-то подобное.


    Может быть когда вы перейдёте к части про Vue.js, я буду ошеломлён и повержен. Но сейчас это урок плохой вёрстки.

  • Пандус для сайта
    +2
    1. display: none скрывает блок от всех, включая скринридеры
    2. Разбавьте ваш суп из дивов ориентирами: header, footer, main, nav и заголовками секций
    3. SVG-иконки лучше прятать, там может случайно оказаться <title> или какой-то текст

    Посмотрите доклад «Людоедский интерфейс» и почитайте сайт «Веблайнд».

  • Цена JavaScript
    +1

    Больше недели назад перевели на Веб-стандартах, вы следите. В дайджесте на Хабре тоже упоминали перевод.

  • Кому нужны флексы
    +1

    Картинка с текстом, где есть фотография, будет весить мегабайт и ваш глаз устанет раньше, чем дождётся её.

  • Какие нужны фавиконки
    0

    SVG-иконки пока плохо поддерживаются. Без парочки PNG и тач-иконки не обойтись.

  • О чем всегда стоит помнить при локализации веб-сайта, чтобы потом не было стыдно
    +6

    Вы очень настойчиво пишете «ориентация письменности» вместо «направление письма» и об это всё время спотыкаешься. Это такой термин или вы неудачно перевели? Или ещё: «по стандартным скриптам глоссария Юникода» — в это месте я сломался. Вы про Unicode scripts? Так это письменности, а не скрипты.

  • Основные ошибки accessibility при разработке сайта
    +1

    Пост о том, что 2 из 10 верстальщиков знают об этом, а применяют — 0,5 из 10.

  • Как сделать Progressive Web Apps: руководство новичка
    0

    Это не «пользователь uve», это Уве Тульсиани (Uve Tulsiani) из команды Samsung Internet.

  • Занимательная вёрстка с единицами измерения области просмотра
    0

    Не бойтесь слова вьюпорт. Представьте, что вы кричите коллеге в другом конце комнаты:


    Какой размер шрифта ставить: полторы единицы изменения области просмотра или больше?

    Нет конечно, скажете полтора вьюпорта и всё. Так зачем в статье усложнять?

  • Занимательная вёрстка с единицами измерения области просмотра
    0

    Что это вообще значит в будущую спецификацию не войдет? Они уже в спецификациях и широко поддерживаются браузерами.

  • Особенности –webkit-box или как «подружить» flexbox со старыми Safari
    0

    А вы попробуйте, там не так просто как кажется. И если что-то работает неточно — можно всегда исправить и отправить пулреквест.

  • Особенности –webkit-box или как «подружить» flexbox со старыми Safari
    +2

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


    .example {
        display: flex;
        transition: all .5s;
        user-select: none;
        background: linear-gradient(to bottom, white, black);
    }

    .example {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-transition: all .5s;
        transition: all .5s;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
        background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
        background: linear-gradient(to bottom, white, black);
    }
  • Как сделать сайдбар за 5 строк кода
    +21

    Сайдбар за 5 строк кода! *


    * плюс 550 КБ скриптов.


    Лол.

  • Третья конференция JavaScript-разработчиков в Одессе «JS Lab» ищет спикеров
    +2

    Дмитрий, есть такое старое и всем понятное слово «блиц». Слово давно пришло из немецкого и означает что-то быстрое: блиц-доклад, блиц-выступление. Если вы замените неловкое Lightning Talks на блицы, то получится хорошо:


    1 день, 12 докладов, 8 блицей

    См. блиц (шахматы) в Википедии.

  • А если без JavaScript?
    +1

    Поздравляю, вы только что переписали You Might Not Need JavaScript, причём переписали хуже. Сразу после его публикации поднялась дискуссия о том, стоит ли что-то писать на чистом CSS только потому, что можно. Чаще всего таки натужные решения недоступнее, неудобнее и хрупче аналогичных на JavaScript.

  • SystemJS 0.20 — Совмещая с браузерными модулями
    0

    Align — не совмещать, а скорее приводить к соответствию. Мол, появились нативные модули, значит пришло время привести реализацию импортов SystemJS к совместимости с ними.

  • Понимание критического пути рендеринга
    +2

    Вы потеряли важную часть термина «Critical Rendering Path», переведя его как «процесс визуализации» — critical. Притом, что слово рендеринг вполне себе существует и общепонятно, что оно значит. Что такое визуализация — наверное, когда что-то становится видимым глазу? Сплошные вопросы.

  • На GitHub появился странный репозиторий, похожий на исходники движка Opera Presto [закрыто правообладателями]
    +4
    Ни у кого из упомянутых доступа к движку не было, разве что Йон может подтвердить.
  • Кнопка или ссылка?
    +1

    Спасибо за ссылку. Главное из моего доклада:


    1. Это всегда <button>
    2. Если не хватает, то <a>

    А вот слайды: https://pepelsbey.net/pres/push-it/

  • Список цветовых классов Material Design Lite
    0

    Вы уверены, что Хабр — это хорошее место, чтобы дампить листинги классов?

  • Использование CSS Flexbox для позиционирования блоков на странице
    0

    Вы же понимаете, что у вас в CSS будет чудовищный селектор .container .first-child .first-content? Не нужна это вложенность здесь, да нигде она не нужна. Думайте иногда о том, что выдаёт вам Sass.

  • Браузеры наши меньшие, или Нам нужно серьёзно поговорить
    –3

    Это не диалог, это обиженный монолог мимо темы. Компания продолжает участвовать в создании современного веба, только гораздо более успешно и прагматично — в рамках проекта Chromium.