• Делаем разноцветные иконки с помощью SVG-символов и CSS-переменных
    0
    К сожалению SVG use достаточно странная конструкция, которая с одной стороны — изолирует вложенное содержимое, и его сложно стилизовать. А с другой стороны нет — стили, определенные внутри SVG, без проблем «текут» из изображение в изображение.
    Есть и другая проблема — заливки (defs) не поддерживаются от слова вообще.

    Вот хороший пример — codesandbox.io/s/k26937poxr, достаточно просто потыкать мышкой в html код, чтобы увидеть глубину падения.
  • Горячая перезагрузка компонентов в React
    0
    Не забывайте про
    import { setConfig } from 'react-hot-loader'
    setConfig({ logLevel: 'debug' })
  • Горячая перезагрузка компонентов в React
    0
    V4/next? Создай issue, дай сорсы — разберем.
  • Горячая перезагрузка компонентов в React
    0
    В общем надо разработать философию — «зачем нужен RHL», и так чтобы адептам TDD продать можно было.
  • Горячая перезагрузка компонентов в React
    0
    > Чтобы при Сtrl+R страница открывалась в том же виде что и до.
    Вот есть у вас форма — пользователь ввел в нее данные и (!)обновил страницу.
    — пользователь видит форму какой она была — пользователь очень рад.
    — пользователь видит форму такой какой она _должна_ быть (со старыми данными) — пользователь не рад.
    И оба этих варианта имеют право на жизнь. А то тот же самый пользователь не сохранит данные, потому что и так же все нормально.
    А где есть два варианта — там есть и три.
  • Горячая перезагрузка компонентов в React
    0
    Именно так и я поступил — в начале поныл, а потом написал полностью новую версию, с которой ныть уже не надо.
  • Горячая перезагрузка компонентов в React
    +1
    — работает не для всего (только компоненты)
    V3 работал только для компонентов, доступных как переменные. V4 работает на уровне отрендереного React-дерева, в котором НЕ компонент не бывает. А вот то, что hot требует на вход компоненту — как раз логично. Это же базовый строительный блок. И обернуть достаточно «Application»(точку входа). Которая компонента по умолчанию.

    — работает не всегда (изменения cW/DM)
    К сожалению сложно опять что компонент немного по другому должен старотовать, так как изменение может находиться вне пределов функции. RHL ругнется в консоль, если заметит что-то странное, но обновлять ничего не будет.

    — а порой и не работает (для HOC молча падает)
    Кто?

    — Ради экономии одного нажатия F5?
    F5 вы можете сами нажать, а вот для того чтобы привести все приложение в старый стейт — потребуется 5-20 секунд.

    — чтобы F5 восстанавливал его в том же состоянии
    В общем случае это или не возможно (половине UI сложно прокинуть стейт из redux/mobx), или не нужно (половина элементов UI работают через свои стейты).

    Как уже говорилась — версия 4 работает практически для любого приложения. Единственный способ «сломать» — добавить новую ноду перед старыми — следуя дефолтному поведению React все перемаунтит. Решили не бороться со своей стороны.

    Некоторые люди считают, что RHL — «вреден». Имхо он позволяет использовать реальный IDE заместо браузерной консоли, чтобы поправить стили или поведение элементов, тем самым позволяя быстрее создать более приятный пользователю look-n-feel.
    Тесты — очень вредное явление. Главное потыкать мышкой и убедиться что приложение для пользователя удобно и приятно. То что согластно тестам оно работает правильно — для пользователя не значит ровным счетом ничего.
  • Горячая перезагрузка компонентов в React
    +2
    Только что применил hot-patch к статье, заменив <Заместо /> на <Вместо />
  • Горячая перезагрузка компонентов в React
    0
    Конечно. В проде от hot-loader не остается ничего.

    А насчет оборачивая «их кодом» — имхо — это супер минор.
  • Restate — или как превратить бревно Redux в дерево
    0
    Freactal прекрасен, как и многие другие решения. К сожалению требовалось «починить» именно что redux. И именно способом, максимально близким к идеалогии redux.
    По другому идею не продать.
  • Restate — или как превратить бревно Redux в дерево
    0
    А они не PureComponent, а обычные StatelessFunctional. А значит перерисуются вместе с родителем, который перерисуется при любом изменении в любом из Todo.

    Вообще вещать побольше connectов исключительно для контроля над распространением изменений — интересная практика.

    Connect — начало любого изменения, потому что дергается непосредственно стором как бы глубоко он не сидел
    Connect — конец любого изменения, потому что SCU не пропустит никакие нежданные изменения прилетевшие сверху.

    Подробнее можно вот тут почитать -> medium.com/@alexandereardon/performance-optimisations-for-react-applications-round-2-2042e5c9af97
  • Как мы заставили npm-пакеты работать в браузере
    0
    Автор хотел запускать JS код as-is. А as-is он — на 99% состоящий из npm зависимостей. Начиная от реакта и заканчивая leadpadом.
    Далее — по тексту.
  • 7 выводов программиста самоучки за 1 год
    0
    А можно тоже самое, только с ссылкам на почитать?
    И это же сколько лет это потребуется узучать?
    (сколько лет потребуется чтобы написать учебный материал)
  • Весь веб на 60+ FPS: как новый рендерер в Firefox избавился от рывков и подтормаживаний
    0
    Эх, все зло и тормоза от Альфы. Каких только технологий не придумали чтобы сделать жизнь чуть чуть лучше, но до победы далеко.
    А самое главное, что любая полупрозрачность (текст) требует активного режима смешивания который просто сразу в два раза все просаживает.

    В свое время пытался рендерить различные сущьности в отдельные текстуры, чтобы потом в шейдере сразу все склеить. TMU сейчас ой как много.

    От сюда и вопрос — а как ФФ склеивает слои? glBlend не предлагать.
  • React, встроенные функции и производительность
    0
    «Хороший» способ оптимизации — ограничивать область распространения изменений. Не надо вешать на каждый чих shouldUpdate, достаточно в узловых местах добавить connect, которые будет ташить данные из стора, а не родителя, создавать как бы «автономную» область.
    Ну и не стоит забывать что connect создает PureComponent, который только на изменение стора и реагирует.
    Но вообще, по моему опыту, большая часть зла исходит от самого реакта и его экосистемы, чем он кривых рук конечного програмиста.
  • Секции в футере
    0
    www.propellermediaworks.com/blog/2017/7/6/websites-ada-places-of-public-accommodation
    Суд США приравнял сайты к публичным местам. В общем приехали.
  • Как собеседовать инженеров-программистов
    0

    Испытательный срок 6 месяцев, который в Австралии прям на законодательном уровне, никто не отменял.

  • Как собеседовать инженеров-программистов
    +2

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

  • Webpack и моканье зависимостей
    +2

    У вас метод индукции сбоит. В данный момент безаппеляционные утверждения исходят только с вашей стороны.
    Вроде как приверженность только одного взгляда — и есть проявление радикального.
    У меня каждый день есть возможности видеть плюсы и минусы разных подходов на разных языках… и в большинстве случаев использование «классического» DI — это или Java, или объектно ориентированный говнокод 5-то летней давности.

  • Webpack и моканье зависимостей
    +1
    Но «нормальный» DI(уровня SpringBoot/ng-di) на самом деле редкий зверь в мире JavaScript. Есть взять пяток самых популярный библиотек, убрать то что для ng, и посмотреть на статистику скачек — будет не очень. Плюс многие путают DI с более широким IoT.

    DI хорош, когда в одну и туже розетку можно засунуть разные вилки. Если пара вилка/розетка всегда одна, и DI — исключительно для тестов — может его и не надо?

    И, самое главное, многие вещи просто принято использовать «как есть». Именно поэтому 90% примеров моканья чего либо, мокают: fs, сеть, session storage, селекторы в редаксе и другой environment.
  • Webpack и моканье зависимостей
    0
    У меня и самого есть проект на inject-loader, и я им в принципе доволен. Но иногда по пути попадаются грабли, на которые редко, да наступаю.

    Давайте придумаем немного синтетический пример:
    import function1 from 'module1';
    export default () => function1()+1;
    

    После чего мы просто мокаем module1 и expect(function1).to.be.called();
    Проходит время, и Вася добавляет еще одну строчку:
    import function1 from 'module1';
    import function2 from 'module2';
    export default () => function1()+function2()+1;
    

    Но он не меняет тесты, а тесты как работали, так и работают.

    Бывает и обратная ситуация — вы убираете строчку, а тесты как работали, так и работают.

    Беда в том, что тесты должны не только «тестировать» поведение функции, те проверять результат — они должны служить вторым контуром проверки, обеспечивать еще один «момент подумать».
    И, по хорошему, должны падать при _любом_ изменении логики програмы. Просто потому что они должны его детектить и подносить вам на блюдечке.

    Да — совсем не круто править 10 тестов после того как изменил одну запятую. Но еще более не круто – не догадываться, что вы изменили чуть больше логики, чем думаете, этой одной запятой.

    В свое время я пытался пропихнуть API для этого в proxyquire, но не срослось.
    В rewiremock для мока можно определить то как он может быть вызван — toBeUsed, directChildOnly, calledFromMock, плюс режим isolation который будет ругаться на каждый неожиданный import.

    Раз уж units tests are production code — относитесь к ним соотвествующе. Хотя конечно можно добавить тесты для тестов, но нельзя добавить тесты для моков, те заставить моки соотвествовать интерфейсам того, кого они собой замещают – тут нужен DI. Но он тоже не сахар.
  • It's a (focus) Trap
    0
    Чувствуется опыт, друг ошибок трудных.
    С aria-hidden/busy, насколько я понимаю, история уровня zoom:1 – в общем мы методом тыка проверили как лучше, и лучше вот так. За стандарт немного обидно, но в вебе так везде и всегда.
  • It's a (focus) Trap
    0
    Ну насчет aria-hidden – лично меня спецификация не очень убедила. Точнее он все еще более правильный чем aria-busy, тем более достаточно часто контент за пределами модала и не виден пользователю (или не читабелен).
    Пока самое хорошее решение — или inert или blockingElements. Но ни того, ни другого в браузеры не завезли.

    С фокусом проблем нет — банально проверено на читалках. Но вообще тест очень простой — после ловушки на очень большом растоянии располагалается еще один фокусируемый элемент. Если фокус перескочет на него — произойдет скрол страницы. Но если вызвать preventDefault — то скрола не будет.
    Другая проблема что порядок таббания отличается от перехода по элементам стрелками(VioceOver), что (конечно же) может все сломать и с этим уже бороться бесполезно.

    А вот проблема с tabIndex раскиданным по странице с точки зрения порядка обхода — и не проблема вовсе — github.com/theKashey/focus-lock/blob/master/src/focusMerge.js
  • It's a (focus) Trap
    0
    Вы немного не последовательны:
    1. Во первых aria-busy придуман не для этого. Основной контент надо именно «прятать», для чего нужен aria-hidden. И это относится исключительно к пункту 3.
    2. А вот пункты 2 и 3 различать не надо. Есть два события — focusIn, когда фокус куда-то пришел, и focusOut, когда он откуда-то ушел.
    Большинство библиотек агрятся на попытку фокуса покинуть ловушку, те focusOut, где новый элемент будет записан в relatedTarget. При этом ловушку в любом случае можно покинуть уйдя в адресную строку браузера, и на этом все сломается. Выбрался — значит свободен.
    Плюс focusOut — его можно(и нужно) вешать на свою ноду.
    К сожалению, так как это не очень работает, требуется вешать хэндлер на focusIn глобально на документе. Теперь, когда что-то за пределами ловушки получает фокус — можно будет этот фокус взять и положить обратно.
    Ну а в итоге требуется вешать события и туда и туда.

    И самое главное — НИЧЕГО кроме операций с фокусом делать не надо. Никакие keyboard/mouse/touch events.

    Тоже самое относиться к предложеным фокусным ловушкам по краям основной. Главный поинт в том, что эти ловушки должны быть за пределами, а не внутри. И исключительно чтобы между началом/конца документа и модалом был что-то таббательное.
    И в таком случае их вообще можно не включать в состав библиотеки — focus-lock/dom-focus-lock не могут менять верстку.

    В общем KISS в полной красе.
  • It's a (focus) Trap
    0
    Спасибо. Совсем забыл про эту «фичу», когда внутри focus-lock находяться первый элемент с tabIndex=1, который оказывается самым-самым первым на странице.
    В общем случае с самого первого или самого последнего можно выйти во внешний мир и/или просто начать не правильно работать.
    Пофиксил react версию focus-lock просто добавим элемент с tabIndex=1 за пределами ловушки, и обновил ссылки на примеры в статье — теперь работают секси.
    PS: Я вообще не совсем уверен откуда я взял старую ссылку — она использует старую версию библиотек. В общем спасибо за комментарий.
  • Наш путь к грин картe
    0
    >наличие публикаций, наличие ссылок на публикации, участие в оценке работы других, важный вклад в область профессиональной деятельности… была пара патентов, и мы решили опираться на это.
    Честно говоря достаточно не типичный набор для современного программиста, ведь хабратопик за публикацию не считается, как и комменты к нему не относятся к рецензиям, но вопрос в другом:
    Насколько все это формально, и может ли переходить колличество в качество.
    Австралии, где я сейчас нахожусь, требуется только образование и опыт работы. На колличество патентов, звезд на гитхабе и профессиональный уровень вообще — глубоко фиолетово.
  • Переходим на сторону сервера с bem-express
    0
    Я уже год как не Яндексоид, и мне как-то и то и другое не очень.
  • Переходим на сторону сервера с bem-express
    0
    Но это же лучше чем там -> в статье наверху?
  • Переходим на сторону сервера с bem-express
    0
    import BlockElem from 'b:block e:elem m:modName';

    github.com/bem/webpack-bem-loader
  • Переходим на сторону сервера с bem-express
    0
    А в bem-react так вообще импорты вычисляемые…
  • Переходим на сторону сервера с bem-express
    0
    Но функции, классы и переменные вы по БЕМу(и венгерской нотации) не называете?
    Декомпозиция и изоляция — вечные друзья и спутники программиста.
  • Переходим на сторону сервера с bem-express
    +1
    Есть HTML driven by CSS — это BEM, где у вас нет проблемы с CSS, но все остальное пляшет под его дудку
    Есть CSS driven by CSS — это Tachyons/Turrent и другой atom/functional CSS. Где CSS-а практически нет, зато в html.
    <button class="bg-purple f6 br3 ph3 pv2 white hover-bg-light-purple">

    И есть CSS-in-JS/ShadowDOM который разными путями немного исправляет генетику CSS+HTML и к нему следует применять немного другие подходы, потому что НЕ нужно именовать что либо по BEM-методолигии так как нет _необходимости_.

    >Тем кто хочет идти работать в Y, думаю, точно стоит вчитаться и попробовать
    В Яндексе есть много мест где никакого БЕМа нет.
  • Хороший плохой манкипатчинг
    +3
    Можно: использовать полифилы на своем сайте
    Нельзя: использовать полифилы в библиотеке.
    Никогда Нельзя: использовать манкипатчинг. Те добавление чего угодно «нестандартного» в прототипы стандартных обьектов.

    PS: С полифилами тоже надо быть аккуратнее. Далеко не все полифилы, что лежат на гитхабе, полифилы.
  • How-to: адаптивные письма в Gmail
    0
    Вчера откопал информацию о том что под конец 2016 года Gmail прекратил вырезать style.
    Проверил — а ничего и не работает.

    А вот где, оказывается, собака зарыта!
  • А был ли взлом «Госуслуг»? Гипотеза Яндекса
    0
    Тогда скажите честно — все плохо?
    Я как открываю свои логи — так сразу закрываю.
    Есть ли возможность трекать поведение пользователя и «намекать» ему, что гадость какая-то в системе есть?
  • А был ли взлом «Госуслуг»? Гипотеза Яндекса
    0
    XSS не так опасен, если он не может:
    1. Подгрузить другие скрипты с третих сайтов, чтобы мозгов добавить
    2. Отправить секретные данные пользователя «куда надо».
    Те максимум, что эта чтука сможет сделать — показывать Alertы.
  • А был ли взлом «Госуслуг»? Гипотеза Яндекса
    0
    На любом нормальном сайте с нормальной посещаемостью этот лог — куча говна, которое нереально разобрать в поисках крупиц настоящих опасностей.
    Лично у меня он на 99.9% состоит из блокировки разной малвари, и на 0.1(и это очень много), из Яндекса, который вечно новые хосты с разными ролями ничинает использовать и не публикует об этом никаких пресрелизов :(
    А вообще добавили бы анализ логов CSP в метрику — вот было бы аудитории приятно. Да и Яндексу пришло бы много полезных данных про творимые страсти.
    Ах мечты мечты.
  • А был ли взлом «Госуслуг»? Гипотеза Яндекса
    0
    Ну блокировка стилей, скриптов и фреймов по while list — это плевое дело, и 99% сайтов, которые никого внешнего не подключают с этим легко справятся.
    Блокировка инлайн стилей — немного сложнее, но совсем немного.
    Другое дело блокировка инлайн скриптов и евалов — тут у «старого» кода могут быть проблемы с поддержкой, но, опять же, все решается серверными плагинами. Был бы смысл.
    Для 99% сайтов этого смысла нет.
  • А был ли взлом «Госуслуг»? Гипотеза Яндекса
    +2
    Мда, CSP, который настраивается за пару минут защитил бы не только миллионы пользователей портала, но и бедного админа.
    Не стоит забывать, что без него все ваши «данные» технически открыты для всего того множества вредоностных плагинов, что на свете бывают.
    Ну а то что такие вредоносные плагины активно устанавливаются пользователями — факт.
  • Как получить оффер в Badoo в день собеседования. Часть вторая, для PHP-разработчика
    0
    Я еще и на скрипке могу. Здесь как раз в кустах случайно стоит рояль, я могу сыграть.