Вдохновением для фронтенда в пятницу на этой неделе станут Johnny-Five, Nodebots и УДИВИТЕЛЬНОЕ мероприятие сообщества JSConf.US.
JSConf.US уникален во многих отношениях, но один из них заключается в том, что он включает день активности в середине конференции. День включал в себя семинары (я провел день, взламывая аппаратное обеспечение с Tessel-2 и Johnny-Five), но другие мероприятия включали Nodecopters (дроны!), Nodeboats и альтернативы, такие как игра в гольф, уроки серфинга и плавание на каяке (в море). пещера, не иначе).
В целом это был потрясающий опыт, и я возвращаюсь невероятно взволнованным и вдохновленным JavaScript и сообществом JS. Узнайте больше о том, что произошло, в пятничном вдохновляющем видеоролике Frontend на этой неделе:
Наслаждайтесь!
KBall от ZenDev
CSS и SCSS
Расширенные эффекты с режимами наложения фона CSS
Очень интересный обзор эффектов, которые вы можете создать с фоном на изображениях, используя свойство background-blend-mode. Мне особенно нравится эффект ночного видения.
Знаете ли вы, что вам не нужно использовать раскраску RGB для вашего CSS, и что на самом деле во многих случаях использование HSL проще для понимания? Причина проста: HSL расшифровывается как «Hue, Saturation, Lightness», которые являются гораздо более интуитивными факторами, которыми можно манипулировать, если вы пытаетесь увеличить контрастность или сделать некоторое затемнение на основе взаимодействия с пользователем, чем кажущиеся произвольными шестнадцатеричные коды.
Создание «идеальной CSS-системы»
Меньше о деталях CSS и больше о соображениях высокого уровня, которые учитываются при создании масштабируемой, надежной архитектуры CSS. Если вы находитесь в положении, когда вы хотите улучшить методы CSS вашей компании, но вы не знаете, с чего начать или о чем подумать, я думаю, что это будет полезно для вас.
Экономящие время методы CSS для создания адаптивных изображений
Отличный анализ различных способов создания адаптивных изображений на странице, их плюсы и минусы, а также то, когда вы хотите их использовать.
Определенно в «черт возьми, ты можешь это сделать?» категория, а не «это то, чему я хочу научиться», но удивительно, насколько интерактивно можно добиться, используя только HTML и CSS.
JavaScript
Повышай уровень своей игры .filter
Использование filter — одна из самых распространенных фундаментальных операций в функциональном javascript. Я использую его изо дня в день. Это отличный учебник по их использованию, и он даже входит в композицию функций для предикатов. А+.
Простая интернационализация приложений React
Это действительно круто! Использование как нового Context API, так и плагина babel для предварительной компиляции для создания сверхчистого и элегантного способа реализации интернационализации в приложении React.
Синхронизация кросс-таблиц с API Web Locks
Это интересно по нескольким причинам. Во-первых, это способ создать действительно интересные взаимодействия между несколькими вкладками, открытыми на одном и том же веб-сайте, со встроенной поддержкой в Chrome и полифиллом для любого браузера, поддерживающего SharedWorkers (который, по сути, просто добавляет в смесь Firefox и браузер UC). Но, во-вторых, это интересно, потому что он исходит от Группы сообщества веб-инкубатора, которую я раньше не видел, но, похоже, она предназначена как сверхлегкий способ стимулировать инновации и эксперименты на веб-платформе без накладных расходов. Рабочие группы W3C, но со связями с W3C для облегчения внедрения успешных экспериментов.
10 вещей, которые вы со временем узнаете о проектах JavaScript
Отличный набор рекомендаций по написанию хороших проектов на JavaScript (или не на JavaScript, если уж на то пошло). Отлично справляется с решением многих вопросов и проблем высокого уровня, с которыми вы столкнетесь, создавая все больше и больше проектов.
Восстановление после ошибок JavaScript
Когда-то мы говорили о «прогрессивном улучшении», когда мы начинали с приложений, которые работали без каких-либо сценариев на стороне клиента, и добавляли дополнительную интерактивность с помощью JavaScript. В наши дни мы часто меняем этот подход, начиная с JavaScript и двигаясь в обратном направлении. Это не обязательно означает, что мы не можем работать с подходами JS — в этой статье в качестве альтернативы рассматривается подход «изящной деградации».
Другое
Это немного не соответствует моему обычному интерфейсу, но пока я был на JSConf.US на этой неделе, у меня была возможность пройти семинар по нодботам и Johnny Five. WOW это круто. Создавайте интерактивных роботов, вся логика которых написана на JavaScript — Tessel 2 даже поставляется с собственной средой выполнения Node, но даже для таких плат, как Arduino, которые ее не поддерживают, Johnny-Five дает вам сверхчистый и интуитивно понятный узел. на основе API для их программирования.
Не конкретно о каком-то конкретном фрагменте кода, а скорее о том, как мы говорим о коде, как мы можем учить друг друга или лучше обмениваться концепциями и идеями. Определенно стоит прочитать, особенно если вы изо всех сил пытаетесь объяснить людям концепции.
7 способов сделать ваше веб-приложение более доступным
В недавнем выпуске JSParty мы много говорили о доступности, и одним из важных выводов для меня было то, что мы должны сделать доступность менее пугающей. Эта статья делает именно это, проходя ряд простых шагов, которые вы можете предпринять, шаг за шагом.
Полная анатомия редактора Gutenberg WordPress
Ранее я говорил о том, как я взволнован Гутенбергом — это принесет современные методы JavaScript ОГРОМНОЙ аудитории разработчиков WordPress и откроет огромные новые возможности для разработчиков внешнего интерфейса во всем мире. Что ж, если вы взволнованы, но не потратили кучу времени на изучение того, что такое Гутенберг или как он работает, вот отличный общий обзор того, что это такое, как он работает и с чего начать.
Создание расширения для Chrome в 2018 году: хорошее, плохое и плохое
Одна из прекрасных особенностей современных расширений браузера заключается в том, что вы можете создавать сверхмощные расширения для браузера, полностью используя методы и инструменты веб-разработки. Расширения — это просто HTML, CSS и JavaScript, но организованные определенным образом и использующие определенные API. В этой статье представлен отличный обзор того, что представляют собой различные части, что представляют собой некоторые из этих API и где вы, вероятно, столкнетесь с проблемами.
Счастливой пятницы!
Хотите получать это как информационный бюллетень прямо на ваш почтовый ящик? Каждую пятницу я рассылаю 15 ссылок на лучшие статьи, уроки и анонсы по CSS/SCSS, JavaScript, а также множество других замечательных Front-end новостей — подпишитесь здесь: https://zendev.com/friday-frontend.html
Первоначально опубликовано на zendev.com 24 августа 2018 г.
