• Сортировка списков на 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. Притом, что слово рендеринг вполне себе существует и общепонятно, что оно значит. Что такое визуализация — наверное, когда что-то становится видимым глазу? Сплошные вопросы.

  • Кнопка или ссылка?
    +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.

  • Подборка подкастов по программированию на русском и английском языках
    +3

    Как ведущий, плюсую «Веб-стандарты» ;) Мы кажется обогнали RadioJS по многим показателям, включая регулярность.

  • Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса
    0

    Одна беда: что-то я не видел ни одного адаптивного сервиса Яндекса, кроме лендинга Data Factory, который вы показали. В чём же состоит опыт Яндекса, заявленный в заголовке? Есть ли что-то в работе, кроме лендингов?

  • «Веб — это самая сложная платформа в истории человечества» — интервью с Вадимом Макеевым из Opera
    +1

    Как разработчик, я бы не хотел, чтобы вы заходили ко мне на сайт в браузере, который всерьёз обновлялся года 4 назад. Пожалейте разработчиков и смиритесь с прогрессом. Иначе деградантом хочется назвать вас — отказывающимся от развития и прогресса.

  • «Веб — это самая сложная платформа в истории человечества» — интервью с Вадимом Макеевым из Opera
    +1

    Речь о том, что не нужно продолжать разрабатывать под H/2, как будто каждый сэкономленный запрос — это абсолютное счастье. Протокол многое делает за вас, поэтому если раньше по умолчанию стоило всё склеить, а потом смотреть, то сейчас можно не склеивать, а потом уже смотреть, где жмёт.

  • «Веб — это самая сложная платформа в истории человечества» — интервью с Вадимом Макеевым из Opera
    +1

    Вы ещё можете устроить пикетирование под окнами моего дома с этой цитатой.


    Но лучше попробуйте понять: когда я писал этот пост, я транслировал настроения внутри компании и планы действительно были сделать так, чтобы средний пользователь не заметил изменений. Более того, это был перевод и компиляция из оригинального поста моего коллеги Брюса Лоусона, опубликованного на Dev.Opera: 300 Million Users and Move to WebKit


    Of course, a browser is much more than just a renderer and a JS engine, so this is primarily an “under the hood” change.

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


    Более того, за минувшие 3 года доля Opera принципиально не изменилась, и это при падающих Firefox и IE и растущих Chrome и Яндексе.


  • «Веб — это самая сложная платформа в истории человечества» — интервью с Вадимом Макеевым из Opera
    +3

    То, что вас до сих пор бомбит от перехода Opera на Chromium, не делает меня лжецом :)

  • Опрос: насколько строго вы следуете стандартам и лучшим практикам на фронтенде?
    +2
    Нужно сразу писать, чтобы ошибок не было


    Вы дословно повторили мою любимую шутку: Тесты? Нет у нас тестов, мы сразу без ошибок пишем!.
  • Пять причин, почему мы отказались от русского перевода конференции “Piter Py”
    +1
    Молодцы, только вот слово English пишется с прописной.
  • BEM с человеческим лицом
    +8
    Классы в css не чувствительны к регистру

    Нечувствительны, говорите?

  • Сравнение css-фреймворков/библиотек на живом примере. Часть 1
    +2
    Типография — это место, где книги печатают, расскажите про типографику. И выше сказали верно — не пишите курсовик, слишком унылый стиль. А так — жгите, интересно.
  • Встречайте новый бренд Opera
    –1
    За активностью можно следить в блоге Desktop Team, которая не имеет никакого отношения к новенькой красивенькой букве «O», этим занималась отдельная команда — почитайте об истории создания логотипа. Если бы у нас стояла задача нашпиговать браузер всем, что только можно (что, в итоге, замедляет его) мы бы тоже «занимались делами», но у нас задача сложнее и интереснее: сделать хороший браузер, причём не только для гиков, а для более широкой аудитории. И это уже не скопировать из Opera 12, нужно самим думать.

    С философией всё просто: opera.com/ru
    Браузер Opera — больше возможностей в интернете

    Это, пожалуй, точнее всего описывает то, что мы делаем.
  • Разработка приложения для tvOS
    –1
    Платформа нового Apple TV является деривативом iOS

    Кто-нибудь кроме вас здесь знает, что такое дериватив?
  • CSS-модули
    0
    Видео доклада Павла Ловцевича с WSD в Минске.
  • SVG-иконки – много и со стилем
    0
    Автор плагина просто неправ: этот заголовок не нужен не только для инлайна, а вообще никогда на практике
  • SVG-иконки – много и со стилем
    0
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    

    Удалите из поста вот эту ненужну шапку SVG-файла, пока кто-то её случайно не скопировал.
  • Лайфхаки для веб-разработчика
    +9
    Кажется вы оттипографили текст, теперь примеры нельзя скопировать и использовать:

    C:\> «C:\Program
    browser-sync start —server

    Кавычки, два дефиса в тире и т.п.
  • Встречайте новый бренд Opera
    0
    Спасибо!