воскресенье, 22 мая 2016 г.

Доступность

Валидаторы и чек-листы. Вы можете проверить свой сайт с помощью таких сервисов:

Если вам нужно больше информации, то читайте:

Спецификация WCAG 2.1;

 


  •  http://www.accessiq.org/news/features/2016/04/principles-of-the-keyboard-accessible-website
  • (Principles of the keyboard-accessible website) 

  • http://stevefaulkner.github.io/HTML5accessibility/
https://ebay.gitbooks.io/mindpatterns/content/ — шаблоны доступных компонентов для веба от ebay (Accessibility Patterns for the Web)

http://blogs.adobe.com/dreamweaver/2016/05/how-to-conduct-a-basic-accessibility-audit-on-your-site-part-2-keyboard-screen-reader-and-automated-code-testing.html (Part 2: How to Conduct a Basic Accessibility Audit on Your Site)


https://www.wuhcag.com/wcag-checklist/


 https://www.gitbook.com/book/ebay/mindpatterns/details— книга о доступности от eBay


https://habrahabr.ru/post/309288/
https://habrahabr.ru/company/design/blog/314910/

https://developer.mozilla.org/en-US/docs/Learn/Accessibility— обновленное руководство MDN по доступности:

  
    • https://www.w3.org/WAI/intro/people-use-web/principles Как люди с ограниченными возможностями используют веб. Обновленная официальная документация W3C WAI
    • https://www.microassist.com/digital-accessibility/digital-accessibility-checklist/
       
  •  
  • pwa https://habrahabr.ru/company/netologyru/blog/333544/
  • pwa https://habrahabr.ru/company/mailru/blog/334536/%5Bperevod%5D-rukovodstvo-dlya-nachinayuschih-po/
  •  
  • https://aerolab.co/blog/web-accessibility/
  • https://habrahabr.ru/post/335352/
  •   

  •  
  •   
    https://quod.lib.umich.edu/w/weave/12535642.0001.701?view=text;rgn=main

       
  •  http://weblind.ru/


    • Руководство по alt-text от слабовидящего веб-разработчика
    • https://habrahabr.ru/post/341810/



       

    https://github.com/mgifford/a11y-lists-of-lists
    https://habrahabr.ru/company/aacidov/blog/346238/
    https://www.deque.com/blog/writing-automated-tests-accessibility/
    https://www.24a11y.com/2017/reacts-accessibility-code-linter/
    https://www.24a11y.com/2017/accessibility-testing-tools-desktop-mobile-websites/
      
    https://css-tricks.com/accessibility-testing-tools/
    https://www.24a11y.com/2017/writing-automated-tests-accessibility/


    http://html5accessibility.com/. Ресурс, где можно узнать об актуальном статусе поддержки свойств HTML5 в основных браузерах


    https://24ways.org/2017/wcag-for-people-who-havent-read-them/

    http://www.funkify.org/simulators/ — расширение для Хрома, позволяющее эмулировать многие расстройства зрения, моторики, а также некоторые когнитивные

         
    • https://www.w3.org/blog/2018/01/wcag21-cr/
      http://www.mediacurrent.com/blog/accessibility-updates-wcag-21

    https://www.w3.org/blog/2018/02/accessibility-review-of-2017-and-outlook-for-2018/

    • https://letorey.co.uk/blog/a11y-isnt-just 

     http://accessibility.voxmedia.com/

     https://alistapart.com/article/diy-web-accessibility-blueprint

    https://www.stefanjudis.com/useful-accessibility-resources/

    https://github.com/YozhikM/stylelint-a11y — Плагин для stylelint с правилами a11y  


    https://www.marcozehe.de/2018/04/11/introducing-the-accessibility-inspector-in-the-firefox-developer-tools/

     https://habr.com/company/yandex/blog/424879/

     https://dev.to/maxwell_dev/the-web-accessibility-introduction-i-wish-i-had-4ope

    https://moritzgiessmann.de/accessibility-cheatsheet/
       
    https://medium.com/pulsar/which-accessibility-testing-tool-should-you-use-e5990e6ef0a

    Разработка доступных интерфейсов

    на Комментариев нет:

    понедельник, 16 мая 2016 г.

    Service worker and Web RTC и websockets

    на Комментариев нет:

    суббота, 30 апреля 2016 г.

    WebAssembly

    WebAssembly

    https://2ality.com/2015/06/web-assembly.html – это бинарный формат статического формального языка, производного от asm.js, который можно использовать для создания динамичных исполняемых программ, поддерживаемых JavaScript-движками. Формальный язык более высокоуровневый, чем байткод, поэтому его легче поддерживать. Выходные файлы существуют в рамках JavaScript и, как следствие, хорошо в него интегрируются. Принимая во внимание быстроту работы asm.js, скорость работы скомпилированного кода С++ в Web Assembly будет равняться примерно 70 % от скорости компиляции C++ в нативный код.

    64bit-арифметика в браузере и WebAssemblyhttps://habr.com/en/post/308874/

    Введение в WebAssembly
    https://rsms.me/wasm-intro

    Иллюстрированное введение в WebAssemblyhttps://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/

    Создание и введение в модули WebAssemblyhttps://hacks.mozilla.org/2017/02/creating-and-working-with-webassembly-modules/

    Что делает WebAssembly таким быстрым?https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/

    Где WebAssembly находится сейчас и что дальше?https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/

    http://habrahabr.ru/company/infopulse/blog/273957/






    Технопорно с WebAssembly
    • https://habrahabr.ru/post/345450/

       


    Все желающие могут ознакомиться со следующими документами:



    https://webassembly.studio/  онлайн-песочница для изучения Web Assembly


    Будущее WebAssembly — взгляд на планируемые функциональности и предложения https://blog.scottlogic.com/2018/07/20/wasm-future.html


    на Комментариев нет:

    Electron and Visual Studio Code и Atom

    VIM
    Emacs
    Sublime
    Notepad++

    Electron – технология, разработанная GitHub. Она позволяет строить кроссплатформенные десктопные приложения с использованием веб-технологий. Среди её фич:
    https://www.electronjs.org/

    • автоматические обновления;
    • отчеты об ошибках;
    • установщики Windows;
    • отладка и профилирование;
    • нативные меню и уведомления.

    Технология была изначально создана для GitHub-редактора Atom, который на данный момент используют многие компании, включая Microsoft (в Visual Studio Code, о котором речь пойдет ниже), Slack и Docker.

    Архитектура Electron включает как среду выполнения Node.js, так и встроенный браузер Chromium. Приложения, сделанные с помощью этой технологии, выполняются несколькими процессами: главный процесс запускает скрипт из файла package.json. Этот скрипт может открывать окна для отображения пользовательского интерфейса. Аналогично вкладкам в веб-браузере каждое из окон выполняет отдельный процесс – рендеринг.

    Visual Studio Code

    Visual Studio Codehttps://code.visualstudio.com/
    – это редактор JavaScript-кода, нечто среднее между интегрированными средами разработки и текстовыми редакторами, который, по-моему, неплохо себя зарекомендовал. Его преимущество также в том, что он написан на JavaScript и основан на Electron.

    https://habrahabr.ru/company/microsoft/blog/262523/


    Другие редакторы
    Reactide
    Reactide is the first dedicated IDE for React web application development. http://reactide.io

    Brackets
    An open source code editor for the web, written in JavaScript, HTML and CSS.

    Nuclide
    An open IDE for web and native mobile development, built on top of Atom

    10 лучших VS Code-расширений 2018 года для фронтенд-разработчиков  
    https://habr.com/en/company/ruvds/blog/425313/

    IntelliCode теперь и в TypeScript/JavaScript

    https://habr.com/company/microsoft/blog/432494/



    Расширения для Visual Studio Code, которые поднимут процесс разработки на новый уровень

    https://medium.com/nuances-of-programming/расширения-для-visual-studio-code-которые-поднимут-процесс-разработки-на-новый-уровень-a24f29173079



    GitHub Pull Requests в Visual Studio Code

    https://habr.com/company/microsoft/blog/423307/


    на Комментариев нет:

    среда, 27 апреля 2016 г.

    JavaScript тестирование


    Mocha the standard test framework,
    https://mochajs.org/
    TDD/BDD (23%)
    Mocha — это JS-фреймворк, облегчающий тестирование асинхронного кода. Тесты в Mocha имеют улучшенное качество трассировки исключений и могут прогоняться сериями.

    Jasmine like Mocha but for BDD.
    https://jasmine.github.io/
    BDD (17%)

    AVA a futuristic test runner, whatever that means. Anyway it is good for high concurrency and parallelism testing.
    https://github.com/avajs/ava
     TDD/BDD (2%)

    Tape a simple test runner that uses the tap protocoll, if that is your thing.
    https://github.com/substack/tape

    Jest has extra nice features for UI testing, like snapshots of the HTML produced, that can be compared etc.
    https://jestjs.io/
    TDD/BDD (3%)

    QUnithttps://qunitjs.com/
    TDD (4%)

    http://chaijs.com/
    Chai — TDD/BDD assertion библиотека, которая может использоваться совместно с Mocha и позволяет выражать тесты в простой читаемой форме.



    WebPageTest
    10 вещей, которых вы не знали о WebPageTest.orghttp://www.deanhume.com/ten-things-you-didnt-know-about-webpagetest-org/

    Как использовать WebPageTest и его API (How To Use WebPageTest and its API)
    https://css-tricks.com/use-webpagetest-api/
       

    http://karma-runner.github.io/0.13/index.html
    Раз уж в списке появились Mocha и Chai, то нужно включить сюда и прогонщика тестов, позволяющего проводить непрерывное интеграционное тестирование. Karma поможет вам автоматизировать работу тестов Mocha и Chai в разных браузера

    Поскольку не все браузеры могут работать на любых платформах, то обратите внимание на пару бесплатных инструментов, которые облегчат вам процесс тестирования:


      http://phantomjs.org/
      PhantomJS       - Было бы не слишком экономно запускать браузеры целиком во время прогона тестов, это приводит к излишнему расходу памяти и ресурсов процессора. PhantomJS позволяет запустить headless версию WebKit, движка, используемого в Safari, а ранее ещё и в Chrome (сегодня в нём используется Blink). Так что прямо из JavaScript API вы сможете прогнать тесты, наделать скриншотов, помониторить сеть и автоматизировать просмотр страниц.

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



    An Overview of JavaScript Testing in 2018https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3

    Jest и Puppeteer: автоматизация тестирования веб-интерфейсовhttps://habr.com/en/company/ruvds/blog/342578/

    на Комментариев нет:

    Дизайн и CSS



    • Презентация Антона Виноградова об архитектуре дизайн-системы Альфа-Банка.  
    • http://codepen.io/kevinSuttle/post/the-current-state-of-web-forms


    • Алгоритмический дизайн Я давно интересуюсь темой алгоритмического дизайна и собираю материалы и примеры на тему, но тема всплывала от случая к случаю. За 4 года скопилась пара десятков примеров и полдюжины статей в привязке к продуктовому дизайну, но до этой весны всё это были скорее отдельные всплески безо всякой системы. Сделал краткий того, что это и почему это безумно важно. 
    • https://vc.ru/flood/16351-algorithm-design




     CSS в JS (CSS-in-JS) была озвучена в конце 2014-го года, в https://speakerdeck.com/vjeux/react-css-in-js Кристофера Чедеу (Vjeux), инженера Facebook из команды разработчиков React. Эта идея привела к разработке нескольких влиятельных библиотек, что упростило создание компонентных стилей. До сих пор самым популярным решением в этой области была библиотека styled-components, которая использует шаблонные литералы ES6 для создания компонентов React из CSS-строк.

    https://risingstars.js.org/2019/en/

    Styled Components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
    +6.0k☆
    2
    Emotion

    Emotion

    CSS-in-JS library designed for high performance style composition
    +3.3k☆
    3
    Linaria

    Linaria

    Zero-runtime CSS in JS library
    +2.8k☆
    4
    styled-system

    styled-system

    ⬢ Style props for rapid UI development
    +2.4k☆
    5
    CSS Modules

    CSS Modules

    Documentation about css-modules
    +1.8k☆
    6
    Polished

    Polished

    A lightweight toolset for writing styles in JavaScript
    +1.2k☆
    7
    Styled JSX

    Styled JSX

    Full CSS support for JSX without compromises
    +1.1k☆
    8
    JSS

    JSS

    JSS is an authoring tool for CSS which uses JavaScript as a host language.
    +964☆



    на Комментариев нет:

    понедельник, 25 апреля 2016 г.

    DevOps + NPM, webpack, gulp, babel и YARN

    http://andrewhfarmer.com/static-site-anatomy/

    Менеджер пакетов

    1. NPM
    -------------------------
    npm-хуки (например postinstall) можно применять для:

    • pre-commit — проверка стиля кодирования (ESLint);
    • pre-push — запуск тестов;
    • post-merge — запуск npm install и jam install.
    ---------------------

    ------------------------

    npm - де-факто, это стандарт в мире JS,

    Какой загрузчик модулей / bundling tool вы используете?

    https://webpack.github.io/
    -------------------------
    Возможности Webpack
    1) Разрешение зависимостей
    2) Сборка в 1 или несколько бандлов
    3) Динамическая подгрузка
    4) Поддержка разных компиляторов (typescript, babel и т.д.)
    5) Оптимизация
    6) Тестирование
    7) Статический анализ
    8) Горячая перезагрузка (Hot Reload)
    Hot Reload c плагином react-hot-loader для реакта позволяет менять код отдельного компонента без перезагрузки всей страницы. А вместе с Flux ты сможешь делать вещи типа прокрутки истории изменений в данных туда-обратно — одновременно с горячим редактированием кода 

    Инструмент автоматизации сборки и компиляции

    1. http://gulpjs.com/ - 2007 (I)
    2. Npm run - 1366 (I)
    3. http://gruntjs.com/ - 911 (I)
    -------------------------
    http://broccolijs.com/  (V)
    -------------------------
    В ходе подготовки выкатывания сайтов в продакшен нам обычно приходится выполнять такие задачи, как улучшение производительности с помощью минификации JavaScript и CSS, компиляцию CoffeeScript/TypeScript, модульное тестирование и т.д.  Для этих целей можно порекомендовать Grunt или Gulp
    Рекомендации по использованию Grunt: если вы предпочитаете писать конфигурационные файлы и вас не волнует, что исполнитель задач может генерировать промежуточные файлы.
    Рекомендации по использованию Gulp: если вы предпочитаете писать код вместо конфигурирования, и были бы не против использовать Node.js-потоки для увеличения производительности.
    -------------------------
    В TFS2015 поддерживаются таски для gulp
    -------------------------
    Заключение: Gulp пользуется большей популярностью, т.к. даёт больше контроля.

    Расширение JavaScript

    Но мы не живём в идеальном мире. Разработчикам приходится поддерживать старые версии браузеров, не поддерживающих самые современные и лучшие возможности JavaScript.
    Это можно сделать с помощью Babel, JS-компилятора, преобразующего последние возможности ES-стандарта в ES5. Это поможет вам запускаться даже на очень старых браузерах наподобие IE 11
    -------------------------
    Заключение: рекомендуется использовать babel

    ПОЛЕЗНЫЕ ССЫЛКИ

    Npm

    https://docs.npmjs.com/getting-started/what-is-npm

    Webpack

    https://habrahabr.ru/company/jugru/blog/342842/

    BABEL

    https://babeljs.io/docs/learn-es2015/

    GULP
    GRUNT
    http://designmodo.com/grunt/
    •  

    Parcel
    Parcel — сборщик, не требующий настройки за счёт использования нескольких процессорных ядер и эффективной системы кэширования. Кроме того, он работает с абстрактными синтаксическими деревьями вместо строк, как делается в Webpack. Как и Webpack, Parcel, кроме того, поддерживает материалы, не являющиеся JS-файлами, вроде изображений и файлов со стилями. Интерес сообщества смещается в сторону инструментов для сборки модулей, которые требуют как можно меньше настроек.

    Rollup
    Проект Rollup привлёк к себе серьёзное внимание до выпуска Webpack 2, в 2016-м, представив tree shaking — популярную функцию для избавления от неиспользуемого кода. Webpack ответил на это, включив поддержку ключевой возможности Rollup в свой второй релиз. Rollup упаковывает модули не так, как Webpack, что позволяет делать размер пакетов меньше, но, в то же время, препятствует использованию таких важных возможностей, как, например, разделение кода.

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

    Task Runner
    npm Has a script attribute in its package.json that can be used to define some simple tasks. Has access to CLIs installed in dev-dependencies, so they don't need to be installed globally.
    Grunt First of its kind in JavaScript land, used if the npm-scripts aren't enough anymore.
    Gulp Like Grunt, but needs less configuration.
    Compiler
    Buble a fast ES2015 compiler, if you don't need all the fancy features of Babel.
    Bundler
    Browserify was created to make the synchronous CommonJS modules of Node.js available in asynchronous browser land. So it doesn't simply merge all your files, but also wrapps modules for async use.


    Continuous Integration

    1. Jenkins — 44 %;
    2. GitLab — 39 %;
    3. Travis — 26 %;
    4. CircleCI — 12 %;
    5. TeamCity — 8 %;
    6. Bamboo — 6 %.
    We use https://travis-ci.com/for our continuous integration (CI) pipeline.  S 

     


    Deployment

    The last step in shipping the product to our users is deployment. We use https://www.ansible.com/tower which is a powerful automation software that enables us to deploy our builds easily.
    As mentioned earlier, all our commits, upon successful build, are being uploaded to a central S3 bucket for builds. We follow semver for our releases and have commands to automatically generate release notes for the latest release. When it is time to release, we run a command to tag the latest commit and push to our code hosting environment. Travis will run the CI steps on that tagged commit and upload a tar file (such as 1.0.1.tar) with the version to our S3 bucket for builds.
    On Tower, we simply have to specify the name of the .tar we want to deploy to our hosting bucket, and Tower does the following:
    1. Download the desired .tar file from our builds S3 bucket.
    2. Extracts the contents and swap in the configuration file for specified environment.
    3. Upload the contents to the hosting bucket.
    4. Post a notification to Slack to inform about the successful deployment.
    This whole process is done under 30 seconds and using Tower has made deployments and rollbacks easy. If we realize that a faulty deployment has occurred, we can simply find the previous stable tag and deploy it.


    Webpack

    Webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
    +6.3k☆
    2
    Parcel

    Parcel

    Blazing fast, zero configuration web application bundler
    +5.4k☆
    3
    Rollup

    Rollup

    Next-generation ES module bundler
    +2.7k☆
    4
    Microbundle

    Microbundle

    Zero-configuration bundler for tiny modules.
    +1.3k☆

    5
    Gulp

    Gulp

    The streaming build system
    +841☆
    на Комментариев нет:
    Подписаться на: Сообщения (Atom)

    mlops

      . Почти вся информация по вопросу собрана в гитхабе  awesome-mlops , который курирует Лариса Висенгериева, главный эксперт сайта ml-ops.or...