Дайджест свежих материалов из мира фронтенда за последнюю неделю №352 (11 — 17 февраля 2019)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №352 (11 — 17 февраля 2019) - 1

Медиа ^[1] | Веб-разработка ^[2] | CSS ^[3] | Javascript ^[4] | Браузеры ^[5]

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю ^[83].
Материал подготовили dersmoll ^[84] и alekskorovin ^[85].

Автор: alexzfort

Источник ^[86]

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

[6] #88 – Что изменилось за год у Сергея Попова (о создании Лиги А и проблеме фронтендеров без опыта) : https://soundcloud.com/frontend-weekend/fw-88

[7] #83 Пересядь на звёздный стэк : https://soundcloud.com/frontend_u/e83

[8] Новости 512 — Выпуск №38 (09.02 — 15.02): https://soundcloud.com/csssr/novosti-512-vypusk-38-0902-1502

[9] Турнир: «Лучшая JS-фича 2018» (ЧАСТЬ 2): https://www.youtube.com/watch?v=yEqVBgfYZr4

[10] Правильное Резюме и Портфолио Junior разработчика: https://www.youtube.com/watch?v=Ds46EE-4DNs&feature=youtu.be

[11] Ember.js: документальный фильм (официальный релиз): https://www.youtube.com/watch?v=Cvz-9ccflKQ

[12] HTML, который мы потеряли: https://habr.com/ru/post/440336/

[13] О линтерах, качестве кода, качестве вообще и управлении качеством: https://habr.com/ru/post/440414/

[14] Краткий план по изучению фронтенда, или #100ДнейКода: https://medium.com/@ABatickaya/100daysofcode-7584c0ddfc1a

[15] HTML5 Boilerplate обновился до версии 7: https://htmlcssjavascript.com/web/html5-boilerplate-v7-released/

[16] Bootstrap 4.3.0: https://blog.getbootstrap.com/2019/02/11/bootstrap-4-3-0/

[17] Введение в WebBluetooth: https://www.smashingmagazine.com/2019/02/introduction-to-webbluetooth/

[18] Полное руководство — Как ускорить GIF-видео в вебе: https://www.keycdn.com/blog/speed-up-gif

[19] Улучшаем производительность веб-шрифтов на реальном примере: https://medium.com/@stasonmars/%D1%83%D0%BB%D1%83%D1%87%D1%88%D0%B0%D0%B5%D0%BC-%D0%BF%D1%80%D0%BE%D0%B8%D0%B7%D0%B2%D0%BE%D0%B4%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%8C-%D0%B2%D0%B5%D0%B1-%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%BE%D0%B2-%D0%BD%D0%B0-%D1%80%D0%B5%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%BC-%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%B5-cfb48c158720

[20] Приоритезация ресурсов — используем помощь браузеров: https://developers.google.com/web/fundamentals/performance/resource-prioritization

[21] Предварительная загрузка шрифтов и загадки приоритетов: https://andydavies.me/blog/2019/02/12/preloading-fonts-and-the-puzzle-of-priorities/

[22] Пример производительности DOM: https://areknawo.com/dom-performance-case-study/

[23] third-party-web: https://github.com/patrickhulce/third-party-web

[24] Собираем бандл мечты с помощью Webpack: https://habr.com/ru/company/oleg-bunin/blog/433324/

[25] Встречайте: pika/pack: https://www.pikapkg.com/blog/introducing-pika-pack/

[26] Что нового в DevTools (Chrome 73) : https://developers.google.com/web/updates/2019/01/devtools#coverage

[27] Puppeteer — мой новый сервер для разработки: https://ericbidelman.com/posts/2019/02/pptrstagingserver

[28] Uncanny A11y: http://adrianroselli.com/2019/02/uncanny-a11y.html

[29] Советы по обеспечению доступности интерактивных элементов на мобильных устройствах: https://bitsofco.de/tips-for-making-interactive-elements-accessible-on-mobile-devices/

[30] Проектирование интерфейсов будущего: инлайновый SVG: https://www.youtube.com/watch?v=1CDTw_UpQoQ&feature=youtu.be

[31] Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer: https://habr.com/en/post/439874/

[32] Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer: https://habr.com/en/post/440474/

[33] SVG Filter Effects: согласование текста с текстурой поверхности с помощью <feDisplacementMap> : https://tympanus.net/codrops/2019/02/12/svg-filter-effects-conforming-text-to-surface-texture-with-fedisplacementmap/

[34] Эффект сеточного заполнения фона с помощью Anime.js: https://tympanus.net/codrops/2019/02/13/grid-reveal-effects-with-anime-js/

[35] Water and Lemons: https://codepen.io/ivorjetski/pen/xMJoYO

[36] Новый опрос #StateOfCSS 2019 от создателей StateOfJS: https://medium.freecodecamp.org/announcing-the-state-of-css-2019-survey-e1e4268df64d

[37] Темная сторона Гридов (часть 1): https://www.matuzo.at/blog/the-dark-side-of-the-grid/

[38] Новый подход к утилитарным классам видимости на основе переменных CSS: https://medium.com/codyhouse/a-new-approach-to-visibility-utility-classes-based-on-css-variables-eb1e2a01fa3b

[39] 10-шаговое руководство по Flexbox: https://medium.com/@ensallee/a-10-step-guide-to-flexbox-fa00e7b03bf7

[40] Конструируемые таблицы стилей: бесшовные переиспользуемые стили: https://developers.google.com/web/updates/2019/02/constructable-stylesheets

[41] Процесс имплементации дизайна пользовательского интерфейса с нуля на примере шапки сайта: https://ishadeed.com/article/building-ui-design-scratch/

[42] CSS selectors level 4: https://blog.logrocket.com/css-selectors-level-4-b5da36bcd54c

[43] Введение в метрики шрифтов с подробным объяснением деталей каждого аспекта: http://westonthayer.com/writing/intro-to-font-metrics/

[44] На Grid или на Flex?: https://css-irl.info/to-grid-or-to-flex/

[45] CSS Scroll Snap — как это работает: https://blog.usejournal.com/css-scroll-snap-how-it-really-works-94d99db80bc9

[46] В чем разница между Flexbox и Grid?: https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/

[47] 10 консольных команд, которые помогут дебажить JavaScript-код like a PRO: https://habr.com/en/company/skillbox/blog/440300/

[48] Надёжный JavaScript: в погоне за мифом: https://habr.com/ru/company/jugru/blog/439612/

[49] Информатика в JavaScript: двусвязные списки: https://humanwhocodes.com/blog/2019/02/computer-science-in-javascript-doubly-linked-lists/

[50] 5 способов создавать приложения в реальном времени с помощью JavaScript: https://medium.freecodecamp.org/5-ways-to-build-real-time-apps-with-javascript-5f4d8fe259f7

[51] Как вывести JavaScript за пределы веба в 2019 году: https://www.sitepoint.com/how-to-take-javascript-beyond-the-web-in-2019/

[52] JavaScript: забавные моменты: https://dev.to/solkimicreb/javascript-the-fun-parts-15cb

[53] Как я избавился от новых спонсируемых постов в Facebook.: https://hackernoon.com/how-i-get-rid-of-the-new-sponsored-facebook-posts-138d013f4bbe

[54] ES5 to ESNext — вот все функции, добавленные в JavaScript с 2015 года: https://medium.freecodecamp.org/es5-to-esnext-heres-every-feature-added-to-javascript-since-2015-d0c255e13c6e

[55] Всё, что нужно знать об async/await. Циклы, контроль потоков, ограничения: https://medium.com/@stasonmars/%D0%B2%D1%81%D0%B5%CC%88-%D1%87%D1%82%D0%BE-%D0%BD%D1%83%D0%B6%D0%BD%D0%BE-%D0%B7%D0%BD%D0%B0%D1%82%D1%8C-%D0%BE%D0%B1-async-await-%D1%86%D0%B8%D0%BA%D0%BB%D1%8B-%D0%BA%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D1%8C-%D0%BF%D0%BE%D1%82%D0%BE%D0%BA%D0%BE%D0%B2-%D0%BE%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%87%D0%B5%D0%BD%D0%B8%D1%8F-76dde2cb6949

[56] Управление состоянием: https://www.youtube.com/playlist?list=PLvTBThJr861wYlwBaaMy3tZUWpUvtJ9xE

[57] Визуальное руководство по определениям и областям применения переменных JavaScript: https://medium.com/@js_tut/the-visual-guide-to-javascript-variable-definitions-scope-abfb86edad

[58] Основы определения и всплытия переменных в JavaScript: https://medium.com/@js_tut/the-basics-of-javascript-variable-definitions-hoisting-aca43602e25d

[59] Изучите чистые функции с помощью JavaScript: https://medium.com/@cristisalcescu/learn-pure-functions-with-javascript-abf9b1c59246

[60] clean-code-typescript: https://github.com/labs42io/clean-code-typescript

[61] ReasonML vs TypeScript: сравнение их системы типизации: https://medium.freecodecamp.org/reasonml-typescript-comparing-their-type-systems-620e4343221c

[62] Как использовать Typescript с React и Redux: https://medium.com/@rossbulat/how-to-use-typescript-with-react-and-redux-a118b1e02b76

[63] Почему React Hooks так взволновали меня?: https://itnext.io/why-im-excited-with-react-hooks-5a8601ac43f7

[64] Создание компонента автозаполнения React с нуля: https://blog.bitsrc.io/building-a-react-autocomplete-component-from-scratch-3f4d5618aa14

[65] Анимация в React: https://www.nearform.com/blog/animation-in-react/

[66] Магия многошаговых форм на React: https://css-tricks.com/the-magic-of-react-based-multi-step-forms/

[67] Все, что вам нужно для создания пользовательского React Hook: https://www.telerik.com/blogs/everything-you-need-to-create-a-custom-react-hook

[68] Как достигнуть поддержки доступности в React приложениях : https://blog.bitsrc.io/achieving-accessibility-in-react-applications-d762f8f2a3e7

[69] Что я почерпнула, изучив React за две ночи, после нескольких лет работы с Angular: https://medium.com/@PurpleGreenLemon/what-i-learned-from-learning-react-in-2-nights-after-years-of-working-with-angular-64fafb77dadf

[70] Angular Universal: всё, что нужно знать SEO-специалисту: https://www.searchengines.ru/angular-universal.html

[71] Управление брейкпоинтами изображений с помощью Angular: https://www.smashingmagazine.com/2019/02/image-breakpoints-angular/

[72] Тур по Angular Console: https://auth0.com/blog/how-to-use-angular-console/

[73] Создания тултипа на Angular CDK: https://blog.angularindepth.com/building-tooltips-for-angular-3cdaac16d138

[74] VueJS 3.0: Революция?: https://www.youtube.com/watch?v=3S5-10HefsA

[75] Создание SPA на Vue.js для продажи футболок : https://snipcart.com/blog/building-a-vuejs-spa-to-sell-developer-tees

[76] Превращение статических SVG рисунков в интерактивные виджеты и инфографику с Vue.js: https://code.tutsplus.com/tutorials/turn-your-static-svg-drawings-into-interactive-widgets-and-infographics-with-vuejs--cms-32728

[77] Мобильная Opera обзавелась бесплатным VPN: https://habr.com/ru/post/440272/

[78] Представлен новый интерфейс браузера Opera: http://www.opennet.ru/opennews/art.shtml?num=50152

[79] Браузер Samsung Internet Browser преодолел рубеж в 1 млрд загрузок в Google Play Store: https://itc.ua/news/brauzer-samsung-internet-browser-preodolel-rubezh-v-1-mlrd-zagruzok-v-google-play-store/

[80] Сотрудник Microsoft: не используйте Internet Explorer по умолчанию: https://tproger.ru/news/internet-explorer-by-default/

[81] В Chrome появится поддержка ссылок на отдельные слова и фразы в тексте: http://www.opennet.ru/opennews/art.shtml?num=50156

[82] Экономия памяти в Brave: сокращение на 33–66% по сравнению с Chrome: https://brave.com/memory-savings-in-brave/

[83] Дайджест за прошлую неделю: https://habr.com/ru/post/439778/

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

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

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

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