Дайджест свежих материалов из мира фронтенда за последнюю неделю №324 (23 — 29 июля 2018)

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] #63 – Александр Першин о том, как и зачем создавать школу онлайн-образования в России: https://soundcloud.com/devschacht/nightly-43

[8] Новости 512 — Выпуск №16 (23.07 — 29.07): https://soundcloud.com/csssr/novosti-512-vypusk-16-2307-2907

[9] Основы прогрессивных веб-приложений: https://habr.com/company/ruvds/blog/418439/.com.

[10] 3 важных чек листа для веб-разработчиков: http://jem-space.ru/3-osnovnykh-kontrolnykh-spiska-dlia-vieb-razrabotchikov/

[11] Доступные заголовки страниц в Single Page App: https://hiddedevries.nl/en/blog/2018-07-19-accessible-page-titles-in-a-single-page-app

[12] Умный путь к “минимальному фуллстеку”: https://medium.com/@alekseyazarov/from-a-simple-spa-to-a-multi-functional-pwa-939c29f24235

[13] Конвертация изображений в WebP: https://www.smashingmagazine.com/2018/07/converting-images-to-webp/

[14] Иногда `sizes` в изображениях довольно важны : https://css-tricks.com/sometimes-sizes-is-quite-important/

[15] Почему WebM лучше чем GIF для видео (сравнение): https://techstacker.com/why-webm-is-superior-to-gif-video-comparison/FR6xLr2zHn9uSTTsH

[16] 8 советов по оптимизации видео для ускорения загрузки: https://www.keycdn.com/blog/video-optimization/

[17] Чек-лист производительности фронтенда: https://github.com/lex111/Front-End-Performance-Checklist

[18] Frontend News #1: Советы для балансирования веб-шрифтов и скорости загрузки страницы: https://frontendnews.io/editions/2018-07-25-tips-for-loading-web-fonts

[19] Размер сайтов: средний размер страницы больше 2MB – размер средней страницы увеличился в два раза за последние 3 года: https://www.machmetrics.com/speed-blog/website-size-the-average-web-page-size-is-more-than-2mb-twice-the-size-of-the-average-page-just-3-years-ago/

[20] Как избавиться от блокирующих рендеринг JavaScript и CSS: https://kinsta.com/blog/eliminate-render-blocking-javascript-css

[21] Скорость теперь является фактором для лендингов Google Search и Ads: https://developers.google.com/web/updates/2018/07/search-ads-speed

[22] Отчет: Google mobile speed update не повлиял на общие мобильные метрики: https://searchengineland.com/report-google-mobile-speed-update-has-no-impact-on-general-mobile-rankings-302703

[23] Настраиваем удобный npm проект для себя и команды или немного о современных фронтенд инструментах: https://habr.com/post/417429/

[24] Отладка с помощью Chrome DevTools: быстрые советы по фронтенду: https://www.offerzen.com/blog/debugging-with-chrome-devtools-quick-front-end-fixes

[25] Terminalizer: https://github.com/faressoft/terminalizer

[26] Github story: https://github.com/dmytrostriletskyi/github-story

[27] Как быстро прототипировать приложения с CSS-сеткой и CSS-переменными: https://habr.com/company/skillbox/blog/418067/

[28] CSS-in-JS — мифы и реальность (на примере styled-components): https://habr.com/post/417707/

[29] Удивительный и неизвестный inline-block: http://css-live.ru/articles-css/udivitelnyj-i-neizvestnyj-inline-block.html

[30] Почему CSS Grid лучше Bootstrap для создания макетов: https://medium.com/@hexlet/%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-css-grid-%D0%BB%D1%83%D1%87%D1%88%D0%B5-bootstrap-%D0%B4%D0%BB%D1%8F-%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F-%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D0%BE%D0%B2-9bdcac64c0b5

[31] Фрустрации при использовании CSS Shapes и CSS Exclusions: https://benfrain.com/the-frustrations-of-using-css-shapes-and-css-exclusions/

[32] Решено с CSS! Логическая стилизация, основанная на числе полученных элементов: https://css-tricks.com/solved-with-css-logical-styling-based-on-the-number-of-given-elements/

[33] Специфическая магия flexbox и auto margins: https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/

[34] Создания системы дизайна, часть 2: Grid & Layout: https://medium.com/codyhouse/create-your-design-system-part-2-grid-layout-aa961d59b8d6

[35] 5 новых свойств CSS и как их использовать: https://www.creativebloq.com/how-to/5-hot-new-css-features-and-how-to-use-them

[36] Github.com отказывается от использования jQuery и переходит на чистый JavaScript: https://habr.com/post/418257/

[37] Создания системы управления состоянием на чистом JavaScript: https://css-tricks.com/build-a-state-management-system-with-vanilla-javascript/

[38] Почему новый V8 так чертовски быстр: https://nodesource.com/blog/why-the-new-v8-is-so-damn-fast

[39] CSS в JS в реальной жизни: https://medium.com/@warsawjs/css-in-js-in-real-life-e0b50bbbd740

[40] Да, вам следует изучать Vanilla JavaScript перед модным JS фреймворком: https://snipcart.com/blog/learn-vanilla-javascript-before-using-js-frameworks

[41] Как улучшить ваши знания знания по JavaScript с помощью написания собственного фреймворка: https://medium.freecodecamp.org/how-to-improve-your-javascript-skills-by-writing-your-own-web-development-framework-eed2226f190

[42] React vs. Vue (vs. Angular): https://medium.com/fundbox-engineering/react-vs-vue-vs-angular-163f1ae7be56

[43] О генераторах в JavaScript ES6, и о том, почему изучать их необязательно: https://habr.com/company/ruvds/blog/417481/

[44] JavaScript Tutorial для начинающих: http://www.zsoltnagy.eu/javascript-tutorial-for-absolute-beginners/

[45] Давайте поговорим о точке с запятой в JavaScript: https://medium.freecodecamp.org/lets-talk-about-semicolons-in-javascript-f1fe08ab4e53

[46] Часть 1: https://blog.bitsrc.io/stateful-monads-in-javascript-part-1-f772ac26195c

[47] Часть 2: https://blog.bitsrc.io/stateful-monads-in-javascript-part-2-7a6fa65f0ad9

[48] Коллбеки — улучшите ваши знания в API, основанных на коллбеках, изучите их поведение и шаблоны в JavaScript : https://paqmind.com/tutorials/async-programming/callbacks/

[49] Как перестать использовать коллбеки и начать жить: https://hackernoon.com/how-to-stop-using-callbacks-and-start-living-1e5ed92e68e8

[50] Изучение Render Props по примерам: https://engineering.dollarshaveclub.com/learn-render-props-by-example-da3e2524dd2e

[51] Трюки и советы для Reactjs SSR : https://medium.com/@atahani/reactjs-ssr-tips-and-tricks-be9edff5b7bb

[52] Конечные автоматы в React: https://css-tricks.com/finite-state-machines-with-react/

[53] Стал доступен Angular v6.1 — TypeScript 2.9, Scroll Positioning и многое другое: https://blog.angular.io/angular-v6-1-now-available-typescript-2-9-scroll-positioning-and-more-9f1c03007bb6

[54] Механизм одностороннего биндинга значений в Angular: https://blog.bitsrc.io/one-way-property-binding-mechanism-in-angular-f1b25cf00de7

[55] Понимание большого масштабируемого приложения на angular с @ngrx: https://medium.com/default-to-open/understanding-a-large-scale-angular-app-with-ngrx-80f9fc5660cc

[56] Превращение приложения Angular 6 в Progressive Web App: https://itnext.io/turning-an-angular-6-app-into-a-progressive-web-app-9e6fc6361ba6

[57] ndb: https://github.com/GoogleChromeLabs/ndb/

[58] excel4node: https://github.com/natergj/excel4node

[59] jsQR: https://github.com/cozmo/jsQR

[60] simple-data-dable: https://github.com/piecioshka/simple-data-table

[61] AddThis теперь доступен для AMP : https://www.addthis.com/blog/2018/07/23/addthis-is-now-available-for-amp/#.W1jZn9IzaUk

[62] Что нового в DevTools в Chrome версии 68: https://habr.com/post/418381/.com

[63] Почему открытие YouTube в Firefox или Edge может занимать в 5 раз дольше, чем в Google Chrome: https://habr.com/post/418105/

[64] Использование промисов в JavaScript: https://habr.com/company/ruvds/blog/418085/

[65] Приключения оператора pipeline в babel@7: https://habr.com/company/mailru/blog/418125/

[66] Использование функций JavaScript для построения 3D-моделей: https://habr.com/post/418045/

[67] Релиз web-браузера Chrome 68: http://www.opennet.ru/opennews/art.shtml?num=49020

[68] В Firefox 63 появится улучшенная система блокировки содержимого: http://www.opennet.ru/opennews/art.shtml?num=49011

[69] Mozilla планирует удалить из Firefox поддержку RSS и Live Bookmarks: http://www.opennet.ru/opennews/art.shtml?num=49024

[70] Google Chrome стимулирует переход на HTTPS: https://www.computerra.ru/230158/google-chrome-stimuliruet-perehod-na-https/

[71] Из Chrome Web Store случайно удалили настоящее расширение кошелька Metamask вместо фейкового: https://xakep.ru/2018/07/27/web-store-metamask/

[72] Исправленный в мае критический баг в IE потребовал новых патчей и спровоцировал утечку памяти: https://xakep.ru/2018/07/24/patch-for-patch/

[73] Послевкусие Apple: готовы ли руководители, разработчики и дизайнеры отказаться от Macbook в пользу других ноутбуков: https://vc.ru/42520-poslevkusie-apple-gotovy-li-rukovoditeli-razrabotchiki-i-dizaynery-otkazatsya-ot-macbook-v-polzu-drugih-noutbukov

[74] Проверяем сайт на «вшивость»: https://vc.ru/42317-proveryaem-sayt-na-vshivost

[75] Когда программисты становятся странными: забавные проекты с GitHub: https://tproger.ru/devnull/weird-and-funny-github-projects/

[76] Разработчики Google представили USB-ключи Titan Security Key для безопасной аутентификации: https://xakep.ru/2018/07/27/titan-security-key/

[77] В Google Docs появилась проверка грамматики с использованием технологий машинного обучения: https://itc.ua/news/v-google-docs-poyavilas-proverka-grammatiki-s-ispolzovaniem-tehnologiy-mashinnogo-obucheniya/

[78] В Windows 10 внедрят машинное обучение, чтобы предотвратить непредсказуемую перезагрузку системы из-за обновлений: https://tjournal.ru/74250-v-windows-10-vnedryat-mashinnoe-obuchenie-chtoby-predotvratit-nepredskazuemuyu-perezagruzku-sistemy-iz-za-obnovleniy

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

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

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

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