Почему мы отказались от export default в Javascript и вам следует поступить также

Перевод статьи Why we have banned default exports in Javascript and you should do the same

https://medium.com/@Brisstor/%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D0%BC%D1%8B-%D0%BE%D1%82%D0%BA%D0%B0%D0%B7%D0%B0%D0%BB%D0%B8%D1%81%D1%8C-%D0%BE%D1%82-export-default-%D0%B2-javascript-%D0%B8-%D0%B2%D0%B0%D0%BC-%D1%81%D0%BB%D0%B5%D0%B4%D1%83%D0%B5%D1%82-%D0%BF%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%B8%D1%82%D1%8C-%D1%82%D0%B0%D0%BA%D0%B6%D0%B5-cce6ac30d67b
#js

Advanced effects with CSS background blend modes

https://blog.logrocket.com/advanced-effects-with-css-background-blend-modes-4b750198522a #css

Доклад  Simply React на конференции  React Rally

В докладе Simply React Kent C Dodds рассказывает как упростить API ваших компонентов  используя следующие паттерны:  
- state reduсers
- render props
- providers
- control props
- compound components

https://www.youtube.com/watch?v=AiJ8tRRH0f8

#react

Новые (и старые) единицы измерения в CSS, о которых вы никогда не слышали

Перевод статьи Massimo Artizzu The new (and old) CSS units you've never heard about.

https://ru.hexlet.io/blog/posts/new-and-old-css-units #css

Подборка статей с примерами использования библиотеки Anime.js

Anime.js - библиотека для JavaScript анимации. Она работает с любыми CSS-свойствами, отдельными CSS-transforms, SVG или любыми атрибутами DOM и JavaScript объектами.

Документация

Create a revealing animation with Anime.JS

How to create a favorite animation with anime-js.

How to create the snake highlight animation with anime-js

Anime.js + React Transition Group

Build an Elastic Range Input with SVG and anime.js

Creating JavaScript Animations with Anime.js

Demos and examples for anime.js

Разбор позиционирования в CSS

https://nuancesprog.ru/p/1451/ #css

So you want to Dockerize your React app ?

https://medium.com/@debabrata100/so-you-want-to-dockerize-your-react-app-64fbbb74c217 #react

Code Surfer - react component for scrolling, zooming and highlighting code.

https://github.com/pomber/code-surfer #react

Функции высших порядков в JS: курс молодого бойца

https://habr.com/post/421537/ #js

GitHub расширения для повышения производительности

https://www.codementor.io/theoutlander/github-extensions-to-boost-your-productivity-mtzn6ew5a #tools

Шесть наиболее полезных докладов с Frontend Conf 2018

В подборке нашлось место рассказу про то, как настраивать PWA-приложения и делать их более нативными. Отдельно затронуты вопросы транспиляции, где на примере API Яндекс.Карт показано, как можно писать на ES2015, получая на выходе ES3, и обеспечить поддержку IDE и линтеров. Еще одна история — про популярные форматы хранения изображений, их сжатие и варианты загрузки на мобильные устройства. Не менее хардкорный доклад про то, как перенести нагрузку, связанную с расчетом анимации, с CPU на видеокарту. Плюс два отдельных доклада про секреты и лайфхаки CSS.

https://habr.com/company/oleg-bunin/blog/420965/ #css

Improve performance and user experience with these javascript cool APIs

- Page Visibility API
- Online and Offline Events
- Vibrate API
- Clipboard.js
- WebVR and A-Frame

https://codeburst.io/improve-performance-and-user-experience-with-these-javascript-cool-apis-a0ddde997f69 #js

Reduce JavaScript Payloads with Code Splitting

Статья от Jeremy Wagner и Addy Osmani
- нужно ли вам разделение кода?
- способы разделение кода: vendor splitting, entry point splitting и dynamic splitting
- инструменты для разделение кода

https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/

React компонент для обработки событий клавиатуры

https://github.com/ayrton/react-key-handler #react

Компонент React, который извлекает цвета из изображения

https://github.com/nitin42/react-color-extractor #react

Трансляция Frontend части конференции FullStack Fest 2018

Сегодня начинается Frontend часть конференция FullStack Fest 2018 #conference
Расписание конференции: https://2018.fullstackfest.com/schedule/frontend
Ссылка на трансляцию https://www.youtube.com/watch?v=NpHl2JbCjI8

React Fire: Modernizing React DOM

Пост от Дена Абрамова про ближайшие изменения в React DOM

"React Fire - это попытка модернизировать React DOM. Наша цель - сделать React лучше согласованным с тем, как работает DOM, пересмотреть некоторые противоречивые прошлые решения, которые привели к проблемам, и сделать React еще меньше и быстрее."

https://github.com/facebook/react/issues/13525

Анонсирован styled-components v4: Лучше, Быстрее, Сильнее 💅

- Меньше и значительно быстрее, от 16.1kB до 15kB (в зависимости от вашего сборщика проекта babel плагина) и ускорение добавления на ~ 25% и повторного рендеринга на ~ 7.5%
- Совершенно новый интерфейс createGlobalStyle API, горячая перезагрузка и темизированная замена старой injectGlobal
- Поддержка "as" prop, и более гибкая альтернатива .withComponent()
- Удаление Comp.extend, с автоматическим codemod, чтобы переместить всю вашу кодовую базу в унифицированную styled(Comp) нотацию
- Полное соответствие StrictMode для React v16, что также означает, что нам пришлось отказаться от поддержки React v15 и ниже (вы можете использовать polyfills, чтобы v15 работала с styled-components v4)
- Встроенная поддержка ref на любой стилизованный компонент, нет больше innerRef благодаря React v16

https://medium.com/styled-components/announcing-styled-components-v4-better-faster-stronger-3fe1aba1a112 #styledcomponents

Reworm - простой способ управлять состоянием вашего React приложения.

Новая библиотека для управления состоянием приложения с простым API #react


https://github.com/pedronauck/reworm

How I Write React/Redux Projects in 2018

Статья от Kevin Heis
"В этой статье описываются стратегии, которые я использую при создании React/Redux проектов. Эти методы являются результатом: большого количества проб и ошибок. Достижение консенсуса в разных командах."

https://medium.com/@heiskr/how-i-write-react-redux-projects-in-2018-eadb6a2c9ecb #react #redux