• CSS: введение в единицу длины 'fr'
    0
    Люди начинают пихать где попало и где не нужно, не понимая сам процесс происходящего и почему был принят сам стандарт… Старые технологии где-то имеют выигрыш, всегда надо четко понимать где это применимо, а где наоборот вредно… Тоже выравние по центру дива, можно сделать многими способами: через марджин, транслейт, флексбокс и у всех есть свои плюсы и минусы, и области применения…
  • CSS: введение в единицу длины 'fr'
    0
    Одними медиа запросами сыт не будешь… Сейчас довольно сложные динамически обновляемые сайты… Да и можно сократить медиа запросы и размер css, при помощи новых технологий… Читайте на здоровье https://developers.google.com/web/fundamentals/performance/rendering/
    Там например есть классический пример пример flexbox против float + %. И замедление может быть еще больше в этой связке, зависит от DOM и других стилей. Но еще конечно не правильное использование новых технологий, тоже может замедлить отрисовку. Но в этом виноват только разработчик, который не читает стандарты и рекомендации.
  • CSS: введение в единицу длины 'fr'
    0
    Честно не понял, что он имел ввиду. Но если говорить про технологии, то современные технологии могут дать лучшую адаптивность и переносимость дизайна сайта с устройства на устройства, повысить интерактивность и обеспечить более комфортное чтение, что очень важно, так как рынок мобильных устройств быстро растет. Еще старые технологии могут замедлять отрисовку страницы. По этой же причине, считаю нужно разделять отдельно стили для современных устройств и делать отдельную версию сайта для совсем старых браузеров. Слава богу легаси браузеров сейчас не так много и ими можно пожертвовать, и можно использовать calc, vw, flexbox. А вот с display: grid и fr не все так гладко, поддерживают всего 70% браузеров, 1/3 рынка просто так не выкинишь, это реальное самоубийство для бизнеса… хотя сами технологии очень сладкие для разработчика…
  • Занимательная вёрстка с единицами измерения области просмотра
    –1
    Они зато просчитываются быстрее и шаблон быстрее рендерится чем со 100%, они нельзя называются единицами видимой области. Процентные единицы требует просчет родителя контейнера, что на сложных шаблонах с большим dom деревом замедляет отрисовку, по это же причине верстка флоатами с процентами медленее flex. На крупных ресурсах % могут замедлить довольно значительно отрисовку, особенно если это SPA и при взаоимодействии пользователя с интерфейсом могут возникнуть тормоза.
    Мой плагин например все необходимые расчеты с calc делает автоматически, и дизайн адаптивный, засчет использования языка макросов
  • Подборка бесплатных инструментов Veeam
    0
    Пользуюсь вашим Veem Endpoint Backup на рабочем компьютере, очень нравится — просто и эффективно. Спасибо!
  • Kotlin vs. Java: скорость компиляции
    0
    Так есть еще GWT от гугл, который транспайлится в js, на замену которому пришел dart… Под dart есть angular 2, fuchsia… А что есть под Котлин?
  • Kotlin vs. Java: скорость компиляции
    –2
    Dart как бы это уже давно умеет из коробки, и даже намного лучше…
  • Kotlin для Android: Теперь официально
    0
    Спасибо за ответ.
  • Переосмысление JavaScript: Смерть for
    0
    Перед тем как делать громкие заявления, советую глубже автору разобраться в вопросе. Где-то синтаксический сахар транслируется в цикл for хочет этого автор или нет, где-то запускается как есть и реализация синтаксического сахара имеет определенный оверхед и работает медленее for, особенно на старых платформах. Советую поиграться с правильными бенчмарками. Если автор не пишет качественный код и не заботится о производительности, то это только его недальновидность. Синтаксический сахар удобен только в некритических участках кода.
  • Kotlin для Android: Теперь официально
    +1
    «уменьшая вероятность падения приложений у пользователей.» Интересно каким образом это происходит? Ведь Котлин это не более чем синтаксический сахар, который транслируется в байткод java и запускается на jvm. У Котлина же нет своей JVM. Котлин мне вообще как язык не зашел. Хотя есть большой опыи на java и .net. Из всех java подобных языков мне больше всего нравится dart у которого своя виртуальная машина, и очень хороший синтаксический сахар и статический анализатор из коробки.
  • The Better Parts: доклад Дугласа Крокфорда о JavaScript и языках программирования будущего с конференции .concat() 2015
    –1
    Писать можно. Но по сравнению с нормальными языками типа C++, Java, C#, python, приходится много писать костылей, чтобы реализовать банальные вещи, которые делаются в других языках очень просто и легко. Ну и многие действия бьют сильно по производительности кода. JS — язык написания костылей… Имхо изначально архитектура языка не совсем удачная и все развитие языка идет к прикручиванию костылей к языку… Преимущество языка — он простой и легкий вход в него, по сравнению например с dart, который больше подходит для крупных проектов…
  • The Better Parts: доклад Дугласа Крокфорда о JavaScript и языках программирования будущего с конференции .concat() 2015
    0
    Может не дать прироста на последних версиях VM. Сейчас во многих виртуальных машинах JIT оптимизирует код нереально круто и прощает ошибки. А вот в старых браузерах и виртуальных машинах может быть реальный затык… Приходится делать сложные бенчмарки, чтобы jit не оптимизировал и делал реальный тест, вместо гоняния воздуха туда-сюда, и мерить производительность на критичных участках программы…
    Самый большой прирост дают дают typed arrays… while будет быстрее for, если запуск цикла один, а потом jit оптимизирует for…
  • The Better Parts: доклад Дугласа Крокфорда о JavaScript и языках программирования будущего с конференции .concat() 2015
    0
    Да как бы он ничего нового не изобрел такие же методы давно используются в научных вычислениях, где важна высокая точность особенно с большими числами. В многих книгах по алгоритмам поднимается этот вопрос. Я помню сам писал что-то подобное, когда учился. А насчет fraction это хотели в dart реализовать, но вроде потом от идеи отказались. Вообще куда сейчас движется JS так это в сторону Dart, даже ES6 часть конструкций слизал с dart. Все проблемы с JS, что разработчики dart озвучивали еще в 2011 году, сейчас озвучиваются на JS конференциях, и к этому приходят сами разработчики, натыкаясь в работе на ограничения. Я не удивлюсь если, через 10 лет JS разработчики откроют для себя, что пишут код на Dart… Многие вещи, что выдают за изобретения и инновация уже давно изобретены кем-то другим…
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    image
    Не знаю как богоугодно, но сейчас скрипт я очень сильно оптимизировал, и он вообще нереально быстро работает. Работает быстрее рендеринга самой страницы и за один раз стили обновляются. Многими такие скорости обработки не достижимы Скрипт ловит моменты когда меняется контент. Чуть поменялся синтаксис работы только с ним. PostCSS Hamster RU Documentation
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Сказано сделано, проверяйте PostCSS Hamster
    Чуть поменял синтаксис позиции иконки.
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Правил никаких нет. Главное ритм и чтобы хорошо сочетался с дизайном, тут надо эксперементировать с разным размером базового шрифта и font-ratio. Теорию я кратко изложил в начале документации, этого должно быть достаточно, но некоторым показалось это излишнише большой теорией… Всем не угодишь. pointer-events: none. добавлю, и постараюсь добавить фиксацию кнопки сетки.
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Вы говорите, про то, что делает Plumber. https://jamonserrano.github.io/plumber-sass/
    Там не заметны съезды сетки — текста мало, и толщина линейки толстая. Я знаю как на js эти значения получить. Plumber компенсирует базовую линию. Это компенсация не высоты линейки, а смещения базовой линии между 2 линиями.

                fontSize = fontSize * gridHeight;
                lineHeight = lineHeight * gridHeight;
                marginTop = (leadingTop - shift) * gridHeight;
                paddingTop = (shift - baselineDifference) * gridHeight;
                paddingBottom = (1 - shift + baselineDifference) * gridHeight;
    marginBottom = (leadingBottom + shift - 1) * gridHeight;
    


    Для нас главное свойство это line-height и отступы padding и margin, которые генерятся независимо от имени шрифта. Допустим у нас значение 1.5432em одни браузеры возьмут только 1.54em, 0.0032 потеряются, что даст смещение на часть пикселя, через 100 строк эта част пикселя превратится в несколько пикселей. Все округляют по разному. Нам не важно какой шрифт рендерится.
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Все это хорошо если вы используете целочисленные значения в px. Представим ситуацию человек страдает близорукостью и меняет базовый размер шрифта браузера допустим с 16 до 18px, em и rem позволят сохранить пропорции, а вот px нет, но вот беда наши 18px ломают вычисления и уже получим при рендеринге более дробное значение в пикселях. Одни и те же значения не вариант, под один проект один ритм подойдет, а под другой другой. JS библиотеку использовать не обязательно, она просто улучшает вид, вертикальный ритм на CSS генерится изначально, и он уже хороший и к концу документа не все заметят смещение линейки. Палки в колеса может поставить браузер фирмы microsoft… он любит все ломать… ;)

    Плывет базовая линия только и зависит от используемого шрифта. Ритм не плывет от разного используемого шрифта. Насчет того, что плывет базовая линия, я знаю как компенсировать это на js, но код не стабильный. (Если приглядеться на больших размерах шрифта, то заметно, что текст не ровно по середине линейки. Это совсем другая история.)
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Я пока не выпустил релиз и проект в пред релизном состоянии. Документацию на английском сделаю только после релиза, но точно могу сказать, что больше десятка разработчиков иностранных уже используют мой плагин и читают документацию с помощью гугл транслейтера. К сожалению документация забирает очень много времени.
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Чего накладного в +100мс к проекту?)) Если rem и px используете считать не сложно руками, а вот с em придется много высчитывать. Да и вообще любые ручные вычисления снижают скорость работы. Если вы используете postcss, то вам не нужен nodesass, необходимость в нем есть только, если у вас тянется старый проект с sass. Я честно выкинул sass и забыл его тормоза как страшный сон. Многие вещи, что умеет sass уже есть в precss.
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Специально для вас добавил функцию rhythm(470px), смотрите пример использования в документации ;)
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Какими костылями? Мой плагин не подгоняет под сетку? В плагине легко можно сразу использовать значения из modularscale не открывая сайт, плюс легко поменять в font-ratio и посмотреть изменения моментально не переписывая все значения… Компасс(слизали код у ритмо), саслайн, ритмо вообще ужас с их перегруженными миксинами… Это их недостаток они не могут без миксинов так как sass накладывает ограничения… Не говоря, про то, что c их помощью снижается читаемость css кода… Спросите например у новичка, что делает миксин margin-trail он не сможет вам ответить…
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Золотое сечение мало кто использует, можно любые коэффициенты использовать. Можно свое значение вручную ввести. Не так необходимо использовать JS. Но будут пиксельные смещения так как em и rem значения округляются… К концу документа будет смещение сетки…
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Документация проекта построена на живом примере использования, и там есть фрагменты кода, которые я посчитал важно показать. Так же в исходниках можно посмотреть файл ./web/src/typography.css
    Данная статья на хабре больше как анонс инструмента. В документации довольно подробно все расписано.
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Пишите в gitter, если есть новые идеи, можно будет придумать, как лучше сделать что-то подобное…
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    так ставьте их размер через spacing() ;)

    или вам необходимо типа fixrhythm(450px);?
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Посмотрел лучше статью. Реализовать такое нереальное так как мы не знаем значения vh и vw.
    Я бы предпочел примерно такое решение, как в статьи реализовано миксином https://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/
    Перевод:
    https://phoenix-cg.ru/blog/8/
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Пока нет, но думаю можно добавить такую возможность в следующей версии.
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Конечно можно. Для блочных элементов можно изначально установить размер в css согласно ритму.
    Мы не всегда можем знать начальный размер элементов и они могут например растягиваться ;)
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Конечно можно, я постарался, чтобы плагин не ломал работу других плагинов для postcss и функции CSS.
    Но думаю вам не нужен будет calc, если вы используете мой плагин.
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Кстати больше всего ресурсов на странице потребляют фреймы youtube. Они самые медленные и тормозные.
    Дальше SVG анимация. Поэтому пока рендерится анимация, отдельным потоком идет компенсация.
    Если отключить SVG и youtube фреймы, то компенсация происходит практически моментально.
    Код тестировал на селекторе * и файле html сбольшим DOM в 300кб. Скорость работы приемлемая.
    Многие библиотеки, которые используют на страницах сайта работают медленнее.
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Все это хорошо в теории. Но в новых браузерах событие load и onload не срабатывает и я пробовал вешать обработчик на load. Так же пытался найти решение, везде пишут про setTimeout. Вы можете форкнуть и добавить отдельными классами, но все существующие библиотеки для вертикального ритма пишут в style так как он имеет больший приоритет. Во вторых допустим у нас есть разные картинки, они будет иметь разные размеры и т.д., нам нужно компенсировать их отдельно — у разных элементов. Если вы переживаете за скорость, то она не больше чем грузится jquery… Можно вообще не использовать JS библиотеку для браузера, это на усмотрение пользователя.
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    –2
    Он имеет более чистый и компактный синтаксис, и максимально сохраняет синтаксис CSS.
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    –2
    В документации все описано, зачем и почему. Смотрите в документации последний раздел.
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    –4
    Спасибо. Согласен. Просто не охото было дублировать примеры из документации и пересказывать ее. Очень загружен работой, не было времени придумать примеры, у меня еще второй проект сейчас в разработке для облегчения миграции пользователей с sass и less. Если нужны примеры, то можете найти здесь https://github.com/h0tc0d3/postcss-hamster/tree/master/web/src
    Так же в течении дня по мск могу помочь в gitter и ответить на вопросы.
  • PostCSS Hamster Framework — инструмент, который облегчит вашу жизнь при вёрстке. Типографика. Вертикальный ритм
    0
    Спасибо поправлю. Опечатался.
  • Топ-5 альтернатив jQuery UI
    0
    Webpack, sass, compass, susy, postcss, lost. ES6 синтаксис очень облегчает жизнь.
    На данном этапе отказался от тормозного sass и compass, и все необходимое написал в виде плагинов для postcss. Недостаток этих готовых компонентов, что они очень захламлены и чтобы кастомизировать под нормальный проект надо писать кучу костылей, что с нуля написать проще…
  • Топ-5 альтернатив jQuery UI
    +1
    Отказался от бутстрапов и фаундейшенов, с помощью препроцессоров, многие вещи даже гибче можно написать самому с помощью фреймворков и grid систем для препроцессоров.
  • Топ-5 альтернатив jQuery UI
    +5
    А нафига оно надо? При использовании препроцессоров эти вещи на css + es6 пишутся очень быстро, и нет такой захламленности и перегруженности… Отказался от jquery в сторону натив js, скорость обработки страниц возросла в несколько раз, благо в современных браузерах не надо писать по кучу костылей, которые решал jquery раньше… Есть хороший сайт http://youmightnotneedjquery.com/ там есть подборка кода для замены кода jquery на чистый js.
  • Создание многоплатформенных игр с использованием Cocos2d-x версии 3.0 и выше
    +1
    Реально вымораживают подобные статьи, где в заголовке суть одна «Создание многоплатформенных игр с использованием Cocos2d-x версии 3.0 и выше» и думаешь, что будет реальный пример кода и разные подводные камни в разработке рассмотрят. В итоге все содержимое сводится к «Как установить ...», коих статей итак полно, а реально достойных статей мало в рунете и проще читать все на английском.