четверг, 11 августа 2016 г.

HTML5 и веб-компоненты

HTML5 Differences from HTML4
http://www.w3.org/TR/html5-diff/

Парсинг HTML
http://habrahabr.ru/post/273807/

Что такое HTML импорт и как это работает? переводhttps://habrahabr.ru/post/230751/

https://develoger.com/what-is-obsolete-in-html5-ccc6773474c5#.amvsuo6mk

https://www.sitepoint.com/defining-sample-sites-page-structure/

Распространенные ошибки начинающего HTML-верстальщикаhttps://habrahabr.ru/post/307210/


    Релиз html5-boilerplate версии 6.0.0
  • https://github.com/h5bp/html5-boilerplate/releases/tag/6.0.0


  • https://habr.com/en/company/ifree/blog/216045/ - HTML по стандартам


    Что вы знаете о высоте вьюпорта в 2017?
  • https://uxplanet.org/what-do-you-know-about-viewport-height-in-2017-4f25be5b05f

HTML Template — provides HTML markup for the component
Custom Element — provides a mechanism to create a custom HTML element
Shadow DOM — isolates the internals of the component from the context that rendered it
HTML Import — makes it possible to load the Web Component into a page



Разбираемся с Веб Компонентами (Understanding Web Components)
https://medium.com/@luisvieira_gmr/understanding-web-components-d051baa66019

Как можно использовать адаптивные веб-компоненты уже сегодня (How You Can Use Responsive Web Components Today)  
http://www.sitepoint.com/responsive-web-components/

    Данные на фронтенде: шаг к приложениям будущего
      https://habrahabr.ru/company/jugru/blog/283518/
  • Подробный обзор стандартов и возможностей видео в вебе (HTML5 Media Source Extensions: Bringing Production Video To The Web)
  • https://www.smashingmagazine.com/2016/04/html5-media-source-extensions-bringing-production-video-web/

  • Быстрый совет: как правильно использовать элементы Figure и Figcaption (Quick Tip: The Right Way to Use Figure & Figcaption Elements)
  • http://www.sitepoint.com/quick-tip-the-right-way-to-use-figure-and-figcaption-elements/

    • Эффективные HTML-формы. Часть 1
  • http://e-planet.ru/company/blog/effektivnye-html-formy-chast-1.html
  • UX валидация форм с помощью HTML и CSS (Form Validation UX in HTML and CSS)
  • https://css-tricks.com/form-validation-ux-html-css/

  • https://medium.com/@ABatickaya/%D0%B2%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%86%D0%B8%D1%8F-%D1%84%D0%BE%D1%80%D0%BC-%D0%BD%D0%B0-html-%D0%B8-css-c34c982d42a0
  • Перевод статьи https://css-tricks.com/form-validation-ux-html-css/ Криса Койера.

    • Создание интерактивного видео на HTML5
  • http://frontender.info/building-interactive-html5-videos/



  • Список всего, что может быть в <head>
  • https://eager.io/blog/everything-I-know-about-the-script-tag/


    • Выходит HTML 5.1, готовится HTML 5.2
  • https://habrahabr.ru/post/310706/


    • Welcome to HTML 5.2!
  • http://developer.telerik.com/featured/welcome-to-html-5-2/


  • HTML 5.1 это золотой стандарт (HTML 5.1 is the gold standard)
  • https://www.w3.org/blog/2016/11/html-5-1-is-the-gold-standard/


    • Что нового в HTML 5.1
  • https://www.sitepoint.com/whats-new-in-html-5-1/

    • Использование элемента address в HTML 5.2
  • http://thenewcode.com/1164/Signed-Sealed-Delivered-Using-the-address-Element-in-HTML-52

  • https://diffofhtmls.herokuapp.com/— неофициальный сайт с подробным сравнением стандартов WHATWG HTML и W3C HTML

  • Основные принципы разметки в HTML 5.1 (Document Outlines in HTML 5.1)
  • https://bitsofco.de/document-outlines-in-html-5-1/


    • Разделы документа в HTML 5.1
  • http://frontender.info/document-outlines-in-html-5-1/

  • DIV официально разрешён внутри DL
  • Встречайте HTML5.1: крупное обновление стандарта, которое никто не заметил


    • Кроссбраузерная валидация форм на HTML5 наконец работает! Что теперь?
  • http://developer.telerik.com/topics/web-development/cross-browser-html5-form-validation-finally-now/


    • Создание собственного HTML5 Video проигрывателя и Shadow DOM
  • https://blog.hellojs.org/creating-a-custom-html5-video-player-and-the-shadow-dom-a98f29261be4


    • Семантика HTML5: контентные типы и новые элементы
  • https://www.sitepoint.com/html5s-changed-perspective-on-content-types/

  • Правила использования ARIA в HTML
  • https://bitsofco.de/rules-for-using-aria-in-html/

  • Текущее состояние элементов ввода в HTML5 (The State of HTML5 Input Elements)
  • https://www.sitepoint.com/the-state-of-html5-input-elements/


  • https://www.filamentgroup.com/lab/type-number.html. Зак Лезерман о нюансах полей для чисел и их параметрах в контексте цифровых клавиатур (I Wanted to Type a Number)


  • en Подробная статья о пользовательских элементах, свойствах и вариантах их использования: Part 1, Part 2 (The Case for Custom Elements)
  • https://medium.com/@robdodson/the-case-for-custom-elements-part-1-65d807b4b439
  • https://medium.com/dev-channel/the-case-for-custom-elements-part-2-2efe42ce9133#.vy25vs8o2

W3C Wiki и W3C specifications теперь используют протокол «путешествия во времени» (Memento at the W3C)
https://www.w3.org/blog/2016/08/memento-at-the-w3c/


Автозаполнение: что веб-разработчики должны знать, но не знают (Autofill: What web devs should know, but don’t)
http://blog.cloudfour.com/autofill-what-web-devs-should-know-but-dont/
https://habrahabr.ru/company/mailru/blog/301840/



Как мы должны загружать веб-компоненты?https://paul.kinlan.me/loading-web-components/



Разработчики Chromium https://github.com/WICG/async-append/blob/master/EXPLAINER.md описание нового API, цель которого — сделать DOM-операции асинхронными. Для этого представлены функции asyncAppend, finish, cancel.



 shadow dom

http://habrahabr.ru/company/plarium/blog/262017/

www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

WEB ANIMATIONS API
http://css-live.ru/articles/rukovodstvo-po-web-animations-api-chast-3-mnozhestvennye-animacii.html
http://css-live.ru/articles/rukovodstvo-po-web-animations-api-chast-4-gruppovye-i-posledovatelnye-effekty.html
http://css-live.ru/articles/web-animations-api-poleznye-ssylki.html


https://developer.mozilla.org/en-US/docs/Web/JavaScript


Техники с DOM
http://prgssr.ru/development/tehniki-raboty-s-dom-roditelskie-dochernie-i-sosednie-elementy.html


    • Использование Paint Timing API
  • https://css-tricks.com/paint-timing-api/

Синхронизация между табами с помощью Web Locks API
https://www.sitepen.com/blog/2018/08/14/cross-tab-synchronization-with-the-web-locks-api/

Как создать простой компонент для работы с камерой
https://frontendnews.io/editions/2018-08-15-simple-camera-component

• Web Payments, Payment Request API и Google Pay
https://medium.com/dev-channel/web-payments-payment-request-api-and-google-pay-a1073e405235
https://www.smashingmagazine.com/2018/01/online-purchase-payment-request-api/


• Использование интерфейса синтеза речи из Web Speech API
https://manu.ninja/using-the-speech-synthesis-interface-of-the-web-speech-api/


• Использование Web Audio API, подробная обновленная информация на MDN
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API


• Продвинутые техники использования Web Audio API: создание звука, последовательность, синхронизация, планирование
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques


• Вышел новый стандарт аутентификации WebAuthn: биометрические данные вместо паролей
https://tproger.ru/news/web-standard-finger-scan/


• Веб-компоненты в 2018
https://www.sitepen.com/blog/2018/07/06/web-components-in-2018/


• Святой грааль переиспользуемых компонентов: Custom Elements, Shadow DOM и NPM
https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/

• 15 методов HTML элементов о которых вы, возможно, никогда не слышали
http://codenative.ru/article/15_metodov_html_elementov_o_kotoryh_vy_vozmozhno_nikogda_ne_slyshali

• О глобальном атрибуте `hidden` в HTML5
https://www.impressivewebs.com/html5-global-hidden-attribute/


• API датчиков для веб
https://mobiforge.com/design-development/the-generic-sensor-api

• Мега-шпаргалка по HTML5
https://medium.com/level-up-web/the-mega-html5-cheatsheet-e8c479b1c521


• Консорциум W3С утвердил средства DRM для Web в качестве стандарта
http://www.opennet.ru/opennews/art.shtml?num=47226


• Консорциум World Wide Web представил вторую редакцию HTML 5.1 
https://tproger.ru/news/w3c-html-5-1-2nd-edition/

• Все, что вы когда-либо хотели знать о защите HTML-форм • 
https://twilioinc.wpengine.com/2017/09/everything-you-ever-wanted-to-know-about-secure-html-forms.html


  • Безболезненное введение в API: использование, интеграция и преимущества
https://snipcart.com/blog/apis-integration-usage-benefits



•https://habrahabr.ru/company/htmlacademy/blog/339854/ - Есть две спецификации HTML: W3C и WHATWG, какой из них верить?

  • Веб-компоненты: долгая игра
http://css-live.ru/articles/veb-komponenty-dolgaya-igra.html

• Полное руководство по элементам, которые могут быть в секции <head>
http://gethead.info/
https://www.w3.org/2017/11/w3c-highlights/: Web Assembly, WebRTC, Web Payments, WebVR и многое другое  •         

• Противостояние W3C и WHATWG: Apple, Google, Microsoft, Mozilla возражают против DOM 4.1
https://habrahabr.ru/post/353514/



• Frontend News #2: ускоренный курс по clipboard api
https://frontendnews.io/editions/2018-08-01-copy-and-paste-clipboard-api

Введение в веб-компоненты. Часть 1
https://habr.com/post/152001/

Коротко об HTML 5.2
https://habr.com/post/345388/

A list of everything that *could* go in the head of your document
https://github.com/joshbuchea/HEAD

на

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

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)

mlops

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

  • Интересное
           https://poedinki.ru/  https://mikhailivanov.ru/   https://ru.wikipedia.org/wiki/Vaporwave  https://en.wikipedia.or...
  • Современные тренды web-разработки на 2021
    Гайды Настраиваем удобный npm проект для себя и команды или немного о современных фронтенд инструментах https://habr.com/post/417429/ ...
  • Electron and Visual Studio Code и Atom
    VIM Emacs Sublime Notepad++ Electron – технология, разработанная GitHub. Она позволяет строить кроссплатформенные десктопные прилож...