Информационный бюллетень этой недели содержит дополнительную информацию о современном состоянии JavaScript. От обзора всех новых языковых функций за последние 3 года до мультяшного объяснения модулей ES и глубокого погружения в «почему» современных фреймворков JavaScript — у нас есть все.
Конечно, это еще не все — очень крутая статья о создании адаптивных сеток, темах для отдельных компонентов, несколько важных новостей о PWA и многое другое.
Счастливой пятницы!
KBall от ZenDev
P.S. Если вы пропустили, я недавно опубликовал курс по работе с SVG как с кодом! Узнайте, как создавать интерактивные значки и фоторедактор, используя простые CSS и JavaScript в сочетании с мощью SVG, и вы можете получить БЕСПЛАТНЫЙ доступ по этой ссылке. Проверьте это: https://www.skillshare.com/classes/SVGs-as-Code-Interactive-Icons-and-Easy-Image-Manipulation/641984422?teacherRef=47092
CSS и SCSS
Решено с помощью CSS! Раскрашивание фона SVG
Небольшой пост о том, как использовать фильтры CSS для изменения цвета фоновых изображений. Хотя я больше люблю использовать внедренные SVG для обработки подобных вещей (это дает вам гораздо больше возможностей), супер-крутая вещь здесь заключается в том, что вы можете применять фильтры CSS, даже когда изображения применяются в качестве фоновых изображений. , что открывает целый ряд новых возможностей.
Супермощные макеты с CSS-переменными + CSS-сетка
Еще один хороший пример того, насколько мощным становится CSS. Пройдя через головную боль внедрения адаптивных сеточных систем до сетки CSS, мне нравится, насколько невероятно простой стала эта проблема. Внедрить гибкую, отзывчивую и семантическую сетку всего в 50 строк SCSS? Удивительный!
Контекстная стилизация с настраиваемыми свойствами
Супер классный вариант использования настраиваемых свойств: создание тем, которые можно применять на уровне компонентов с использованием атрибутов данных. Хотите повторно использовать одни и те же компоненты в разных частях сайта с разными темами? Просто примените правильный атрибут. Хотите смешивать и сочетать темы на одной странице? Так же просто. Вау!
Работа с новой моделью типизированных объектов CSS
С приходом Houdini CSS находится в процессе радикального обновления и систематизации своих внутренних компонентов, особенно в отношении того, как взаимодействовать с CSS с помощью JavaScript. Новая модель типизированных объектов CSS значительно улучшает API для взаимодействия со стилем через JavaScript, позволяя правильно манипулировать единицами измерения, проверять границы и обрабатывать ошибки вместо того, чтобы полностью осуществлять взаимодействие через непрозрачные строки. Он еще не поддерживается во многих браузерах, но это очень радует меня в будущем.
Руби Сасс отправят на пастбище 26 марта 2019 года
В мире Sass уже давно существует несоответствие: реализация Ruby является канонической (и постоянно опережает), в то время как версия C++, поставляемая как libsass, использовалась в гораздо большем количестве реализаций (включая, вероятно, наиболее широко распространенную, node-sass). У этих двух были противоположные проблемы: реализация Ruby была намного проще в разработке, но гораздо сложнее в использовании, а реализация C++ имела противоположную проблему. Теперь в экосистеме появился новый игрок, Dart-sass, который, кажется, имеет хорошее сочетание преимуществ с меньшим количеством недостатков, поэтому реализация Ruby уходит.
JavaScript
Вот примеры всего нового в ECMAScript 2016, 2017 и 2018
Обширная статья, показывающая примеры всех 18 новых функций, добавленных в язык JavaScript за последние 3 года. Вы, вероятно, уже сталкивались с большинством из них, но стоит просмотреть, чтобы убедиться.
13 важных моментов из руководства по стилю JavaScript от Google
Всегда интересно узнать, как работают лидеры в этой области, и Руководство по стилю JavaScript от Google, безусловно, стоит прочитать, но если вам нужна версия с заметками об скалах, это хорошее место для начала. Эти лучшие рекомендации определенно совпадают с практиками, которые я также принял.
Самая глубокая причина существования современных фреймворков JavaScript
Погружение в одно из основных преимуществ таких фреймворков, как Angular, React и Vue: задача синхронизации пользовательского интерфейса с состоянием. Хорошее объяснение как основной проблемы, так и того, как эти фреймворки решают ее.
Модули ES: мультипликационное погружение
Не пропустите мультяшных объяснителей Лина Кларка. Она сделала несколько удивительно поучительных вводных статей по таким сложным темам, как Новый CSS-движок Firefox, и снова вернулась с отличным обзором модулей ECMAScript — что это такое, какие проблемы они решают, как они работают и как их использовать.
Краткое введение в использование Vue.js с NativeScript
Первая из серии из 4 статей об использовании Vue.js с NativeScript для создания нативных мобильных приложений с использованием Vue. NativeScript имеет разные плюсы и минусы, чем React Native, но если вы так же взволнованы Vue, как и я, и у вас когда-нибудь возникнет желание побаловаться с нативными приложениями, возможность использовать Vue для этого домена без головной боли Cordova (она же phonegap). ) невероятно увлекательно.
Другое
Обращение ко всем веб-разработчикам: вот почему вам следует использовать Firefox
Большой обзор уникальных функций и преимуществ новых версий Firefox. Должен признаться, что я все еще в основном использую Chrome, но я все больше и больше начинаю использовать Firefox для вспомогательных задач и на сегодняшний день очень доволен его производительностью. Сочетание новой производительности с некоторыми чертовски крутыми инструментами разработки и отсутствием корпоративного повелителя, который зарабатывает деньги, отслеживая меня… определенно имеет привлекательность.
Современный Frontend-разработчик в 2018 году
Один из лучших постов о том, как начать заниматься фронтенд-разработкой, которые я видел за последнее время, с отличной блок-схемой и пошаговой разбивкой. Для тех, кто новичок в этом мире, я определенно рекомендую просмотреть здесь. Это также немного пугает, но в статье представлен хороший пошаговый подход.
Прогрессивные веб-приложения для iOS уже здесь 🚀
С последним выпуском iOS на iOS внезапно появилось множество базовых технологий, позволяющих использовать PWA. В этой статье рассказывается, что именно возможно, каковы различия между PWA на iOS и Android и многое другое. Иди проверь!
По-настоящему глубокое погружение в то, что делает таблицы, отображающие данные, доступными для тех, кто использует программы чтения с экрана и другие вспомогательные технологии, и в то же время делает их удобными и красивыми для тех, кто использует настольные и мобильные устройства.
Счастливой пятницы!
Вам нравится этот информационный бюллетень? Получите его прямо в свой почтовый ящик! Каждую пятницу я рассылаю 15 ссылок на лучшие статьи, уроки и анонсы по CSS/SCSS, JavaScript, а также множество других замечательных Front-end новостей — подпишитесь здесь: https://zendev.com/friday-frontend.html
Первоначально опубликовано на zendev.com 6 апреля 2018 г.
