Подкаст «Фронтенд Юность (18+)» #26 Во всём виноват Джейк Арчибальд #common https://soundcloud.com/frontend_u/e26
SoundCloud
#26 Во всём виноват Джейк Арчибальд
Вступление (1:08)
fetch VS XMLHttpRequest (5:47)
Как интервенции Chrome сломали addEventListener (25:12)
Задачи от ForWeb (34:34)
DevTools (36:45)
Оптимизации V8 под разработчиков (39:05)
Пара доклад
fetch VS XMLHttpRequest (5:47)
Как интервенции Chrome сломали addEventListener (25:12)
Задачи от ForWeb (34:34)
DevTools (36:45)
Оптимизации V8 под разработчиков (39:05)
Пара доклад
Гладкие скругленные углы с помощью CSS Houdini #css https://iamvdo.me/en/blog/smooth-corners-with-css-houdini
iamvdo.me
Smooth corners with CSS Houdini - Vincent De Oliveira
Recently, I’ve shared on Twitter an article about optical illusions in user interfaces. I love illusions, but that’s a new one to me: a modified circle can look more circular than a geometric one! And this is also true for rounded rectangles. Surprisingly…
Подкаст «Веб-стандарты», Выпуск №:93 WSD, YGLF, проблемная ReactiveConf, графика и цвет, фокус и курсоры, React и Kotlin, украинский фронтенд. #web #common https://medium.com/web-standards/episode-93-374a0bbb4777
Medium
Выпуск №93
7 ноября 2017
Чистый код vs. грязный код: лучшие практики React https://americanexpress.io/clean-code-dirty-code/
American Express Technology
Writing Maintainable Software: Clean Code vs Dirty Code
Clean code is a consistent style of programming that makes your code easier to write, read, and maintain. Discover how to make your React code cleaner using easy-to-follow examples.
Стильная велосипедная анимация с помощью gsap svg stroke https://codepen.io/alaricweb/pen/vWxPyp
CodePen
Codevember 11 #bike gsap svg stroke animation
Starting from an svg representing a cyclist with multiple stroke i'm able to animate the dash offset of all of thoses at the same time using GSAP DrawS...
Масштабирование текста больше не актуально? О требованиях к размеру текста и доступности, основанных на старых мифах и новых критериях WCAG 2.1 https://alastairc.ac/2017/11/is-text-sizing-dead/
Начни использование Babel 7 Beta уже сегодня! #babel https://medium.com/@jdolle/babel-7-beta-instructions-aed5cf17048b
Medium
Start Using Babel 7 Beta Today!
With so many great features, some of us just couldn’t wait.
Как использовать CSS градиенты в вебе #css https://webdesign.tutsplus.com/tutorials/how-to-use-gradients-on-the-web--cms-29922
Web Design Envato Tuts+
How to Use CSS Gradients on the Web
In this tutorial you’ll learn about using gradients on the web. I’ll give you some examples, some exercises (such as how to create gradients for borders), and I’ll also throw in some useful...
Хотите узнать больше о React? Давайте создадим игру и сыграем в нее #react #js https://medium.freecodecamp.org/do-you-want-to-learn-more-about-react-lets-build-and-then-play-a-game-218e0da5be44
freeCodeCamp.org
Do you want to learn more about React? Let’s build — and then play — a game.
> Update: This article is now part of my book “React.js Beyond The Basics”. > Read the updated version of this content and more about React at jscomplete.com/react-beyond-basics [https://jscomplete.com/g/target-sum]. When I teach React to beginners, I start…
react-scroll-to — помогает скроллить к указанным частям страницы в React #react https://github.com/ganderzz/react-scroll-to
GitHub
GitHub - ganderzz/react-scroll-to: Scroll to a position in React
Scroll to a position in React. Contribute to ganderzz/react-scroll-to development by creating an account on GitHub.
Применение медиавыражений для пропорций окна браузера #css https://css-live.ru/articles/primenenie-mediavyrazhenij-dlya-proporcij-okna-brauzera.html
CSS-LIVE
Применение медиавыражений для пропорций окна браузера
Перевод статьи Practical uses for the aspect-ratio media query с сайта chenhuijing.com для CSS-live.ru, автор — Чэнь Хуэй Цзин
Переменные окружения в CSS; как бороться с программной рамкой в iPhone X #css https://benfrain.com/css-environment-variables-iphonex/
Миграция приложений с Angular 1.x на React — гибридный путь #angular #react https://medium.com/walmartlabs/migrating-angular-1-x-apps-to-react-the-hybrid-way-3267ccf33755
Medium
Migrating Angular 1.x apps to React — The Hybrid Way!
In this day and age when front-end space is moving incredibly fast, it’s pretty common where by the time you do your R&D, choose your…
Разработка расширения для Google Chrome с использованием Angular 4 #angular https://www.red-gate.com/simple-talk/dotnet/software-tools/developing-google-chrome-extension-using-angular-4/
Simple Talk
Developing a Google Chrome Extension using Angular 4 - Simple Talk
It may seem a tricky task to create a Chrome extension with TypeScript and Angular 4 but it turns out to be relatively simple. The advantage is that you gain the modularity of Angular and the object-oriented programming experience with strong typing of Typescript.…
Почему вам следует отдать приоритет PageSpeed при обсуждении нового сайта с клиентом #common https://speckyboy.com/prioritize-pagespeed/
Speckyboy Web Design Magazine
Why You Need to Prioritize PageSpeed in Discussions with Clients
For the past few years, small and medium businesses (SMBs) across the world have been told that making their websites mobile-friendly, and embracing a mobile-first world, were essential for business...
Редактор кода Atom получил функцию для параллельного программирования Teletype , а Microsoft представила технологию для парного программирования Live Share #common https://tproger.ru/news/visual-studio-live-share/
Tproger
Microsoft представила технологию для парного программирования Live Share
Microsoft представила технологию для парного программирования. При помощи Live Share вы сможете заглянуть в экран коллеги, оставаясь при этом в своей IDE.
Обзорная лекция по основным возможностям ES2017+ , от Дмитрия Сошникова #js https://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/
Dmitry Soshnikov
JavaScript. The Core: 2nd Edition
Read this article in: Russian, German. This is the second edition of the JavaScript. The Core overview lecture, devoted to ECMAScript programming language and core components of its runtime system. Note: see also Essentials of
Берем скролл под свой контроль: кастомизация pull-to-refresh и overflow эффекты #js https://developers.google.com/web/updates/2017/11/overscroll-behavior
Chrome for Developers
Take control of your scroll - customizing pull-to-refresh and overflow effects | Blog | Chrome for Developers
Introduction to the CSS overscroll-behavior property.
Символы, Генераторы и потоки в JavaScript #js https://medium.com/front-end-hacking/javascript-symbols-generators-and-streams-1f6ef0fb1fdc
Medium
JavaScript Symbols, Generators and Streams
Introduction
Forwarded from Chulakov Dev
Вот это форма
Одной из самых тяжелых задач в разработке веб-приложений является работа с динамическими формами: большое разнообразие типов полей, их валидация, асинхронное конструирование частей формы, автозаполнение, сериализация, сохранение, обработка состояний и многое другое. Все эти проблемы можно решить за счет использования связки React, Redux и Redux Form.
Чтобы показать как она работает, мы собрали для вас интерактивное демо, содержащее код следующих решений:
1) подключение Redux с использованием Ducks-методологии упорядочивания редюсеров, экшенов и констант;
2) работа с нестандартными полями;
3) получение и сохранение состояния формы;
4) написание и подключение функций валидации;
5) отображение ошибок заполнения;
6) переинициализация формы с помощью свойства
7) переопределение значений полей.
Одной из самых тяжелых задач в разработке веб-приложений является работа с динамическими формами: большое разнообразие типов полей, их валидация, асинхронное конструирование частей формы, автозаполнение, сериализация, сохранение, обработка состояний и многое другое. Все эти проблемы можно решить за счет использования связки React, Redux и Redux Form.
Чтобы показать как она работает, мы собрали для вас интерактивное демо, содержащее код следующих решений:
1) подключение Redux с использованием Ducks-методологии упорядочивания редюсеров, экшенов и констант;
2) работа с нестандартными полями;
3) получение и сохранение состояния формы;
4) написание и подключение функций валидации;
5) отображение ошибок заполнения;
6) переинициализация формы с помощью свойства
initialValues;7) переопределение значений полей.