#html
Соединение ДНК HTML с помощью атрибутов селекторов CSS
https://www.smashingmagazine.com/2018/10/attribute-selectors-splicing-html-dna-css/
Соединение ДНК HTML с помощью атрибутов селекторов CSS
https://www.smashingmagazine.com/2018/10/attribute-selectors-splicing-html-dna-css/
#web
Что нового в Microsoft Edge в Windows 10 October 2018 Update
https://blogs.windows.com/msedgedev/2018/10/04/edgehtml-18-october-2018-update/
Что нового в Microsoft Edge в Windows 10 October 2018 Update
https://blogs.windows.com/msedgedev/2018/10/04/edgehtml-18-october-2018-update/
#web
Аннотированный webpack 4 Config для разработки фронтенда
https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development
Аннотированный webpack 4 Config для разработки фронтенда
https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development
#react
Ломаем производительность React с помощью Redux
https://blog.scottlogic.com/2018/10/22/ruining-react-s-performance-with-redux.html
Ломаем производительность React с помощью Redux
https://blog.scottlogic.com/2018/10/22/ruining-react-s-performance-with-redux.html
Scott Logic
Ruining React's Performance with Redux
Developing with Redux makes managing your React state easier, but if not integrated correctly it can remove key advantages of using React, wrecking your application's performance. This blog will outline how I managed to create a painfully slow React app and…
Заполняем пробелы - event flow
На этой неделе получил стажера для подготовки к собедесованию во внутреннюю лабораторию.
Это мой первый опыт менторства, и я подумал, что это хорошая возможность заполнить свои пробелы в теории / практикe.
Первый пробел касается темы событий - погружение и всплытие. Всегда четко помнил про второе - всплытие. Погружение напрочь вылетело.
Возможно, некоторые из вас тоже забыли стадии event flow:
- capture (перехват)
- target (цель)
- bubbling (всплытие)
Отловить событие на стадии перехвата можно, передав true в качестве 3 аргумента функции addEventListener
Немного о целевом элементе event.target:
event.target – это исходный элемент, на котором произошло событие,
event.currentTarget (он же this) - элемент, на котором выполняется обработчик.
Т.е если повесили обработчик на form:
event.currentTarget - элемент формы,
event.target - элемент внутри формы, на котором произошло событие.
Ссылки по теме:
https://learn.javascript.ru/event-bubbling
https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener
Если у вас есть что добавить или если я где-то наврал, пишите в личку @jem_jem, разберемся ;)
На этой неделе получил стажера для подготовки к собедесованию во внутреннюю лабораторию.
Это мой первый опыт менторства, и я подумал, что это хорошая возможность заполнить свои пробелы в теории / практикe.
Первый пробел касается темы событий - погружение и всплытие. Всегда четко помнил про второе - всплытие. Погружение напрочь вылетело.
Возможно, некоторые из вас тоже забыли стадии event flow:
- capture (перехват)
- target (цель)
- bubbling (всплытие)
Отловить событие на стадии перехвата можно, передав true в качестве 3 аргумента функции addEventListener
Немного о целевом элементе event.target:
event.target – это исходный элемент, на котором произошло событие,
event.currentTarget (он же this) - элемент, на котором выполняется обработчик.
Т.е если повесили обработчик на form:
event.currentTarget - элемент формы,
event.target - элемент внутри формы, на котором произошло событие.
Ссылки по теме:
https://learn.javascript.ru/event-bubbling
https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener
Если у вас есть что добавить или если я где-то наврал, пишите в личку @jem_jem, разберемся ;)
#web
Верхнеуровневая архитектура фронтенда. Лекция Яндекса
https://habr.com/company/yandex/blog/425611/
Верхнеуровневая архитектура фронтенда. Лекция Яндекса
https://habr.com/company/yandex/blog/425611/
Habr
Верхнеуровневая архитектура фронтенда. Лекция Яндекса
Выбор подходящей архитектуры — ключевая часть построения фронтенда сервиса. Разработчик Анна Карпелевич рассказала студентам Школы разработки интерфейсов, что такое архитектура, какие функции она...
Типичный сайт в 2018- ироническая демонстрация
https://www.reddit.com/r/web_design/comments/9pmqxb/
codepen edition https://codepen.io/cobra_winfrey/pen/MPqvwg
website edition https://2018.bloomca.me/en
https://www.reddit.com/r/web_design/comments/9pmqxb/
codepen edition https://codepen.io/cobra_winfrey/pen/MPqvwg
website edition https://2018.bloomca.me/en
reddit
Typical website in 2018
Posted in r/web_design by u/ikstark • 3,910 points and 186 comments
The State of JavaScript . Интервью с Addy Osmani о текущем состоянии JavaScript в вебе
https://www.youtube.com/watch?v=i5R7giitymk&feature=youtu.be
https://www.youtube.com/watch?v=i5R7giitymk&feature=youtu.be
YouTube
The State of JavaScript - The State of the Web
Rick speaks with Addy Osmani about the state of JavaScript. Addy is an Engineering Manager on the Google Chrome team, and he has been a web developer for 17 years. He has a deep understanding of JavaScript, as it is today and how it’s changed over the years…
3 ошибки производительности JavaScript, которые вы должны прекратить делать
https://hackernoon.com/3-javascript-performance-mistakes-you-should-stop-doing-ebf84b9de951
https://hackernoon.com/3-javascript-performance-mistakes-you-should-stop-doing-ebf84b9de951
Hackernoon
3 JavaScript Performance Mistakes You Should Stop Doing | HackerNoon
What if I told you everything you knew was a lie, what will happen if you learn some of the key features our beloved ECMAScript have published over the recent years, are actually dangerous performance traps, sugar coated in a slick looking one line callback…
#video
Видеоблог Вадима Макеева №7. KFC, SVG и лишний base64, вредная типа-доступность
https://www.youtube.com/watch?v=Eo3COLvWBFk
Видеоблог Вадима Макеева №7. KFC, SVG и лишний base64, вредная типа-доступность
https://www.youtube.com/watch?v=Eo3COLvWBFk
YouTube
KFC, SVG и лишний base64, вредная типа-доступность
00:00 Интро
00:24 Обзор сайта
00:59 Отключаем JS
02:55 Загрузка сайта
06:08 Анализ CSS
13:58 Как инлайнить SVG
16:37 Графика на сайте
20:29 Доступность руками
22:37 Аудит доступности
Нравится? Становитесь патронами — https://www.patreon.com/pepelsbey
SVGO…
00:24 Обзор сайта
00:59 Отключаем JS
02:55 Загрузка сайта
06:08 Анализ CSS
13:58 Как инлайнить SVG
16:37 Графика на сайте
20:29 Доступность руками
22:37 Аудит доступности
Нравится? Становитесь патронами — https://www.patreon.com/pepelsbey
SVGO…
#web
10 консольных трюков для профессиональной отладки
https://itnext.io/10-console-tricks-to-debug-like-a-pro-66ee2225ec57
10 консольных трюков для профессиональной отладки
https://itnext.io/10-console-tricks-to-debug-like-a-pro-66ee2225ec57
#css
Фигуры, сгенерированные с помощью CSS background gradients.
https://codepen.io/yuanchuan/full/vVRKRQ/
Фигуры, сгенерированные с помощью CSS background gradients.
https://codepen.io/yuanchuan/full/vVRKRQ/
The Intl.RelativeTimeFormat API — обработка дат и времени относительно текущего момента
https://developers.google.com/web/updates/2018/10/intl-relativetimeformat
https://developers.google.com/web/updates/2018/10/intl-relativetimeformat