Пятничный интерфейс на этой неделе меня очень взволновал. В нем есть не только отличные статьи для начинающих с учебными пособиями и упражнениями, но и потрясающие глубокие погружения в близкие и дорогие моему сердцу темы, такие как архитектура SCSS и функциональный JavaScript. Надеюсь, они вам понравятся так же, как и мне! И если есть какие-либо из них, которые не имеют для вас смысла или о которых вы хотите узнать больше, напишите мне небольшую заметку, и я обязательно отвечу на ваши вопросы, найду дополнительные ресурсы или напишу несколько сообщений. я, если ресурсов нет.
С пятницей!
KBall от ZenDev
P.S. Если вы пытаетесь понять, как ускорить работу веб-интерфейса внешнего интерфейса или даже какие технологии использовать, я проконсультируюсь и проведу обучение по интерфейсной архитектуре, рабочим процессам и фреймворкам. Запланируйте быстрый звонок по 15 стратегиям, чтобы обсудить, как я могу вам помочь: https://calendly.com/kbal11/front-end-strategy
CSS и SCSS
Вот супер-быстрый способ опробовать CSS Grid
Меня все больше привлекает CSS Grid, поскольку количество поддерживающих его браузеров постоянно растет (до 80% в США с префиксами!). Если вы еще не научились использовать CSS Grid, самое время! Этот пост Джен Симмонс содержит не только очень простое и минимальное введение в использование сетки, но и серию упражнений в форме кодовых ручек, которые вы можете использовать, чтобы быстро научиться сетке.
Учебное пособие: три потрясающих CSS-перехода и анимация при наведении курсора для начинающих
Удивительно, что несколько простых переходов могут улучшить впечатление от вашего веб-сайта. Не требуется много времени, чтобы перейти от чего-то, что кажется сухим и статичным, к чему-то более органичному и интерактивному. Для тех, кто только начинает работать с CSS-анимацией, это простое руководство Брэндона Морелли дает вам 1–2–3 набора инструментов, которые можно добавить в свой инструментарий для добавления базовой интерактивности и оживления вашего веб-сайта.
Как создавать красивые презентации HTML и CSS с помощью веб-слайдов
Вы когда-нибудь хотели, чтобы вы могли использовать свои навыки HTML и CSS для подготовки презентаций, вместо того, чтобы часами возиться с основным докладом или PowerPoint? Библиотека WebSlides делает это невероятно простым, и в этом простом пошаговом руководстве Ивайло Герчев дает вам все необходимое для создания красивых, простых слайдов на основе HTML + CSS в кратчайшие сроки.
Архитектура CSS и три столпа поддерживаемого CSS
CSS часто получает плохую репутацию со стороны разработчиков программного обеспечения, но это очень сложный и мощный описательный язык со своим собственным набором передовых практик, во многом аналогичных другим средам программирования. Хорошая архитектура CSS - это больше, чем просто соглашения об именах, такие как БЭМ, но требует многих других стандартных приемов разработки программного обеспечения, таких как разделение задач, тщательное структурирование иерархий и композиции, а также управление правильными уровнями абстракции. В этом высокоуровневом пошаговом руководстве по Sitepoint Золт Надь рассматривает архитектурные столпы поддерживаемого CSS и пример того, как знакомые принципы разработки программного обеспечения, такие как наследование и композиция, проявляются в среде CSS.
Нарисуйте горизонтальное дерево с помощью псевдоэлементов CSS
Псевдоэлементы в CSS невероятно мощны и часто недостаточно используются разработчиками, которые плохо знакомы с CSS. Хотя английский в этом посте Гаурав Сехрават может быть немного сложным для понимания, тема учебного пособия и полученная демонстрация являются прекрасным знакомством с типами вещей, которые вы можете делать с продуманным использованием псевдоэлементов. По мере роста ваших навыков интерфейса пользователя освоение псевдоэлементов позволит вам создавать гораздо более подробные и красивые компоненты с меньшим количеством разметки.
JavaScript
Понимание области действия в JavaScript
Чем больше вы растете как разработчик JavaScript, тем важнее понимать нюансы языка и то, как работают различные его части. Область видимости - один из этих ключевых компонентов, и эта статья - отличное введение в него. Прочтите это, чтобы понять, какие типы областей видимости существуют в JavaScript, какие переменные и где доступны, как скрывать / создавать «частные» переменные и каковы последствия новых ключевых слов ES6 let и const для области видимости.
Функции высшего порядка - это концепция функционального программирования - по сути, это функции, которые принимают функции в качестве аргументов. Я бы сказал, что обучение использованию таких концепций функционального программирования, как фильтр, карта и сокращение, помогло мне улучшить мои навыки разработки больше, чем любая другая отдельная концепция. Если вы еще не используете их, вам обязательно нужно изучить это краткое руководство Гвидо Шмитца в блоге Freecodecamp. И если вам все это непонятно, задавайте мне вопросы, и я помогу - как я уже сказал, вероятно, нет более ценной единственной концепции, которая могла бы обернуть вашу голову в голове как разработчику.
Как создать нейронную сеть на JavaScript всего за 30 строк кода
Глубокое обучение в сообществе искусственного интеллекта в моде, со всевозможными усложняющимися инструментами, позволяющими делать все больше и больше прорывов в распознавании образов на основе машинного обучения, но вам не нужно углубляться в Tensorflow, чтобы начать работу с машинным обучением. программное обеспечение. Глубокое обучение построено на основе нейронных сетей, а Synaptic.js - это простая библиотека нейронных сетей, написанная на JavaScript для использования либо в node.js, либо в браузере. В этом кратком и доступном пошаговом руководстве Пер Харальд Борген научит вас основам построения и обучения нейронной сети всего на 30 строках JavaScript.
Все фундаментальные концепции React.js втиснуты в одну статью на Medium
Когда дело доходит до обучения, я сторонник того, чтобы начинать с «рамки» или «общей картины» для любой тематической области. Если погрузиться в детали без какого-либо высокоуровневого контекста, детали быстро станут подавляющими, и будет трудно увидеть, как они взаимодействуют. Добавьте высокоуровневое понимание действующих систем, и внезапно все эти детали станут понятными, потому что вы знаете, где их разместить и как они соотносятся. Этот пост дает вам такую высокоуровневую основу для React. Независимо от того, являетесь ли вы новичком в React или опытным специалистом, 10 основных принципов React, изложенные Самером Буна, обеспечат вам контекст, необходимый для того, чтобы расставить все детали и стать экспертом по React.
Перенос приложения VueJS на Vuex
Я не тратил много времени на разработку VueJS, но знаю, что мне не хотелось бы создавать приложение React без библиотеки управления состоянием, такой как Redux. Наличие простого, удобного в управлении и централизованного механизма управления состоянием приложения является ключом к созданию любого сложного приложения, управляемого состоянием. Vuex похож на Redux для VueJS. Если вы создаете приложения с помощью Vue и не используете библиотеку управления состоянием, вы почти наверняка делаете больше работы, чем вам нужно, и если вы думаете о переходе на Vuex Вам обязательно стоит ознакомиться с этим пошаговым руководством Энтони Гора на vuejsdevelopers.com.
Ассорти Другое
Повысьте свой набор навыков веб-разработки: 150 анимированных советов по Chrome DevTools
Мне нравятся инструменты разработчика Chrome. Я не думаю, что будет преувеличением сказать, что инструменты разработчика Chrome были ответственны за некоторые из самых значительных улучшений в простоте и скорости фронтенд-разработки. Сочетание мощности и производительности действительно подняло планку инструментов для браузера, но их так много, что я знаю, что только прикоснулся к возможностям. Вот где приходит этот пост - Умар Ханса публикует еженедельные советы по инструментам разработчика, упакованные в виде небольшого анимированного GIF-изображения, и в этом посте он не только собрал некоторые из лучших, но и ссылки на весь архив с более чем 150 советами. Обязательно проверьте это!
Рабочий процесс Gulp для автоматизации Frontend-разработки
Современная фронтенд-разработка включает в себя МНОГО инструментов. Babel, webpack, grunt, gulp, broccoli ... прошу прощения, если вы сочтете этот алфавитный суп из возможных инструментов ошеломляющим. Это не значит, что они бесполезны - они полезны. Эти инструменты радикально улучшили нашу способность создавать мощные, сложные и производительные интерфейсы. Но это сложно понять. Gulp - один из моих любимых - мы используем gulp для наших рабочих процессов в Foundation с момента запуска Foundation 6, и я использую его еще дольше для создания рабочих процессов в простой «конфигурации как код». »Манера. Это чрезвычайно подробное сообщение в блоге Эндрю Велча из Studio 107 начинается с объяснения того, что такое gulp и почему мы его используем, и продолжается поэтапной разбивкой проверенного в боевых условиях gulpfile, который они используют для своего собственного сайта.
Внутри сверхбыстрого движка CSS: Quantum CSS
Вы когда-нибудь задумывались, как в мире браузеры фактически переводят ваш HTML и CSS в интерфейс, который отображается на вашем экране? Как и в большинстве случаев в программировании, когда вы копаетесь в слоях, лежащих под абстракцией, это сложно, красиво и действительно чудо, что это вообще работает, но на каждом отдельном слое имеет смысл. В этой статье Лин Кларк вы глубоко погрузитесь в новый потрясающий движок CSS, который только что добавляется в Firefox каждую ночь. Создавая код из экспериментального браузера Servo на основе ржавчины и вдохновляясь как старым Firefox Engine, так и Webkit (chrome и safari), новый движок Quantum CSS является буквально самым продвинутым движком CSS в мире, и Лин разбирает его для вас на понятные, небольшие куски.
Веб-шрифты: когда они нужны, а когда нет
Одним из значительных улучшений пользовательских веб-интерфейсов за последние несколько лет стало распространение и повышение простоты использования веб-шрифтов. Управление шрифтом значительно улучшает нашу способность брендировать и контролировать информационную архитектуру на наших веб-сайтах и в приложениях. Однако с такой легкостью и мощностью возникает проблема - есть такая вещь, как слишком много хорошего, и люди теперь по умолчанию используют веб-шрифты даже в тех случаях, когда они фактически ухудшают конечный результат. В этой отличной статье о Hackernoon Дэвид Гилбертсон проводит нас через процесс принятия решения о том, когда использовать веб-шрифты, а когда нет, включая плюсы и минусы и даже разбирается в тонкостях того, как улучшить работу веб-шрифтов, если вы все же решите использовать их.
Запускать несколько версий Chrome одновременно
В этом посте не так много чего ужасного, что вы могли бы получить, прочитав заголовок, но, черт возьми, это большое дело для тех из нас, кто занимается веб-разработкой. Теперь Chrome поддерживает одновременную работу нескольких версий Chrome, по крайней мере, в Windows, Android и Linux, и, надеюсь, OS X не сильно отстает. Это огромно! Это означает, что вы можете установить и запустить стабильную сборку для личного использования одновременно с установкой бета-версии или разработчика для тестирования передовых улучшений. Потрясающий!
С пятницей!
Нравится этот информационный бюллетень? Получите прямо в свой почтовый ящик! Каждую пятницу я рассылаю 15 ссылок на лучшие статьи, учебные пособия и объявления по CSS / SCSS, JavaScript, а также множество других замечательных новостей внешнего интерфейса - зарегистрируйтесь здесь: https://zendev.com/friday-frontend.html
Первоначально опубликовано на zendev.com 25 августа 2017 г.
