Дайджест свежих материалов из мира фронтенда за последнюю неделю №326 (6 — 12 августа 2018)

---

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/289029

Ссылки в тексте:

[1] Медиа: #media

[2] Веб-разработка: #webdev

[3] CSS: #css

[4] Javascript: #js

[5] Браузеры: #browser

[6] Занимательное: #intresting

[7] #65 – Игорь Шеко о том, как из серийного стартапера стать выступающим тимлидом : https://soundcloud.com/frontend-weekend/fw-65

[8] Новости 512 — Выпуск №18 (06.08 — 12.08) : https://soundcloud.com/csssr/novosti-512-vypusk-18-0608-1208

[9] #45 — Когда фронтендер становится девопс: https://medium.com/devschacht/devschacht-45-a44473c28223

[10] #59 Поговорим о джаваскрипте : https://soundcloud.com/frontend_u/e59

[11] Используем AMP как библиотеку общего назначения для создания быстрых динамических сайтов: https://habr.com/company/google/blog/419589/.com

[12] Icon Fonts vs SVGs – что из этого я должен использовать в 2018?: https://www.keycdn.com/blog/icon-fonts-vs-svgs/

[13] “SVG Filters: The Crash Course”: https://www.sarasoueidan.com/blog/svg-filters/

[14] Google AMP — потеря 70% нашей конверсии: https://www.rockstarcoders.com/google-amp/

[15] Как создать маленький красивый npm пакет и опубликовать его: https://medium.freecodecamp.org/how-to-make-a-beautiful-tiny-npm-package-and-publish-it-2881d4307f78

[16] webhint: инструмент для разностороннего анализа сайта с предложением подсказок по его улучшению (бывший sonarwhal): https://medium.com/webhint/webhint-a-hinting-engine-for-the-web-ef0d3fa32ea9

[17] Уменьшении нагрузки JavaScript с помощью разделения кода: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/

[18] Кастомные отчеты производительности с помощью панели CrUX: https://developers.google.com/web/updates/2018/08/chrome-ux-report-dashboard

[19] Этап отрисовки страницы браузером и размышления о веб-производительности: https://css-tricks.com/browser-painting-and-considerations-for-web-performance/

[20] Забота о доступности веб-форм: https://www.jrockowitz.com/blog/caring-about-accessibility

[21] Доступность в двух измерениях для карт и систем навигации в вебе: https://www.sitepen.com/blog/2018/08/08/navigating-accessibility-in-two-dimensions/

[22] Обеспечение повсеместного доступа к веб-сайтам делает их менее доступными: https://meyerweb.com/eric/thoughts/2018/08/07/securing-sites-made-them-less-accessible/

[23] Dot Menu Animations: https://codepen.io/Zaku/details/YjRqzB/

[24] Westworld Slider: https://codepen.io/chrisgannon/full/djjZBq/

[25] Свежие обновления CSS-черновиков: переполнение 3 уровня, строчная раскладка 3 уровня, гриды 2 уровня: http://css-live.ru/vecssti-s-polej/svezhie-obnovleniya-css-chernovikov-perepolnenie-3-urovnya-strochnaya-raskladka-3-urovnya-gridy-2-urovnya.html

[26] Line-height Crop — простая CSS формула для избавления верхнего отступа в тексте: https://medium.com/codyhouse/line-height-crop-a-simple-css-formula-to-remove-top-space-from-your-text-9c3de06d7c6f

[27] Осознание начальных значений в вашем CSS: https://www.impressivewebs.com/being-aware-of-initial-values-in-your-css/

[28] Автоматическая смена цвета текста для различных фонов с помощью переменных CSS: https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/

[29] Техники скрытия в CSS: https://pineco.de/element-hiding-techniques-in-css/

[30] Создание “идеальной” системы CSS: https://medium.com/gusto-design/creating-the-perfect-css-system-fa38f5bcdd9e

[31] CSS Grid layout: умножай и властвуй — или как на самом деле работать с гридами: https://medium.freecodecamp.org/css-grid-layout-multiply-conquer-or-how-to-actually-design-using-the-grid-745dfc51e114

[32] Изменения в CSS Grid Layout в процентах и неопределенной высоте: https://blogs.igalia.com/mrego/2018/08/10/changes-on-css-grid-layout-in-percentages-and-indefinite-height/

[33] Не пишите CSS — настраивайте его с помощью tailwind: https://frontendnews.io/editions/2018-08-08-tailwind-css-tutorial

[34] Ключевое слово this в JavaScript для начинающих: https://habr.com/company/ruvds/blog/419371/.com

[35] Как работает JS: пользовательские элементы: https://habr.com/company/ruvds/blog/419831/.com.govorim-o-ta

[36] Сравнение React и Vue на практическом примере: https://habr.com/company/ruvds/blog/419373/.com

[37] [в закладки] 23 рекомендации по защите Node.js-приложений: https://habr.com/company/ruvds/blog/419719/

[38] 7 рекомендаций по оформлению кода на JavaScript: https://medium.com/webbdev/7-%D1%80%D0%B5%D0%BA%D0%BE%D0%BC%D0%B5%D0%BD%D0%B4%D0%B0%D1%86%D0%B8%D0%B9-%D0%BF%D0%BE-%D0%BE%D1%84%D0%BE%D1%80%D0%BC%D0%BB%D0%B5%D0%BD%D0%B8%D1%8E-%D0%BA%D0%BE%D0%B4%D0%B0-%D0%BD%D0%B0-javascript-4d0d4c287281

[39] Как бороться с грязными побочными эффектами в вашем чистом функциональном JavaScript: https://jrsinclair.com/articles/2018/how-to-deal-with-dirty-side-effects-in-your-pure-functional-javascript/

[40] Исправляем проблемы области видимости переменной в ECMAScript 6: https://alistapart.com/article/fixing-variable-scope-issues-with-ecmascript-6

[41] Крис Койер о создании прилипающей навигации, следящей за скроллингом страницы: https://css-tricks.com/sticky-smooth-active-nav/

[42] Практическое руководство по регулярным выражениям (RegEx) в JavaScript: https://blog.bitsrc.io/a-beginners-guide-to-regular-expressions-regex-in-javascript-9c58feb27eb4

[43] Разделяй и властвуй! Ленивая загрузка для вашего SPA : https://medium.com/wolox-driving-innovation/divide-and-conquer-lazy-loading-for-your-spa-32eb63149e76

[44] Cправочник по Angular CLI: https://ngrefs.com/ru/v6/cli/intro

[45] Angular 6 — создания конфигурации Webpack с нуля: https://angular-guru.com/blog/angular-webpack

[46] PRPL шаблон для прогрессивных веб-приложений с помощью Angular 6+: https://itnext.io/the-prpl-pattern-for-progressive-web-applications-using-angular-6-f7237b7dc2a7

[47] Анимация динамических компонентов в Angular: https://netbasal.com/animate-dynamic-components-in-angular-10681438bdd4

[48] Создание переиспользуемых анимаций в Angular: https://netbasal.com/creating-reusable-animations-in-angular-6a2350d6191a

[49] 15 трюков и советов по производительности в Angular: https://angular-guru.com/blog/angular-performance-tips

[50] Angular Console: https://angularconsole.com/

[51] 10 полезных свойств Angular, о которых вы возможно не слышали: https://angular-guru.com/blog/angular-unknown-features

[52] Vue CLI 3.0 уже здесь!: https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb

[53] Ускорение разработки с помощью прототипирования на Vue: https://medium.com/js-dojo/speed-up-development-with-prototyping-and-vue-94ee0a881f0e

[54] Создание директивы долгого нажатия во Vue: https://blog.logrocket.com/building-a-long-press-directive-in-vue-3408d60fb511

[55] Получение данных в приложениях Redux — 100% правильный подход: https://blog.logrocket.com/data-fetching-in-redux-apps-a-100-correct-approach-4d26e21750fc

[56] mauerwerk: https://github.com/drcmda/mauerwerk

[57] React's Render Props Pattern — потомок в качестве функции: https://www.robinwieruch.de/react-render-props-pattern/

[58] Pts: https://ptsjs.org/

[59] lazyestload.js: https://github.com/Paul-Browne/lazyestload.js

[60] SuperSlide.js: https://github.com/osrec/SuperSlide.js

[61] Splitting: https://splitting.js.org/guide.html

[62] В Firefox началось тестирование системы рекомендации контента на основе активности пользователя: https://www.opennet.ru/opennews/art.shtml?num=49095

[63] Opera интегрирует криптокошелёк в десктопную версию своего браузера: https://www.searchengines.ru/opera-crypto.html

[64] Новый эксперимент Mozilla: расширение Firefox Advance, которое анализирует историю сетевой активности для подбора потенциально интересных сайтов и статей: https://itc.ua/news/novyiy-eksperiment-mozilla-rasshirenie-firefox-advance-kotoroe-analiziruet-istoriyu-setevoy-aktivnosti-dlya-podbora-potentsialno-interesnyih-saytov-i-statey/

[65] Chrome 69 Beta: множество CSS улучшений и многое другое: https://blog.chromium.org/2018/08/chrome-69-beta-av1-video-decoder-css.html

[66] Как выбрать шрифт для медиа: https://medium.com/%D0%BC%D0%B5%D0%B4%D0%B8%D0%B0%D1%82%D0%BE%D1%80/%D0%BA%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D1%82%D1%8C-%D1%88%D1%80%D0%B8%D1%84%D1%82-%D0%B4%D0%BB%D1%8F-%D0%BC%D0%B5%D0%B4%D0%B8%D0%B0-442a071c02f1

[67] «Пути назад – нет»: В Android 9.0 Pie компания Google лишила пользователей возможности возвращаться на более старые версии ОС: https://itc.ua/news/puti-nazad-net-v-android-9-0-pie-kompaniya-google-lishila-polzovateley-vozmozhnosti-vozvrashhatsya-na-bolee-staryie-versii-os/

[68] Вышло обновление языка Dart 2.0, альтернативы JavaScript от Google: https://tproger.ru/news/dart-2-0/

[69] Нейросеть научилась создавать портрет человека по текстовому описанию: https://tproger.ru/news/t2f-neural-network/

[70] Как в Китае выросло поколение, не знающее Google, Facebook и Twitter: https://ain.ua/2018/08/10/pokolenie-kitajskogo-interneta

[71] Смешные и страшные вещи. Вспоминаем самые зрелищные взломы IoT за последние несколько лет: https://xakep.ru/2018/07/31/scary-funny-iot/

[72] Дайджест за прошлую неделю: https://habr.com/company/zfort/blog/419335/

[73] dersmoll: http://habrahabr.ru/users/dersmoll/

[74] alekskorovin: http://habrahabr.ru/users/alekskorovin/

[75] Источник: https://habr.com/post/419983/?utm_source=habrahabr&utm_medium=rss&utm_campaign=419983

Нажмите здесь для печати.