HTML для JS разработчиков.

Этот бесплатный видео-курс от Алекса Лущенко подойдет тем, кто ворвался в js разработку и нуждается в хорошей базе HTML + CSS. В данном курсе рассмотрены организация кода, flexbox, grid, позиционирование, настройка gulp и многое другое.

#Курсы

Mousetrap - простая библиотека для обработки сочетаний клавиш в Javascript. Это автономная библиотека без внешних зависимостей. Он весит около 2 КБ в сжатом виде.

#JavaScript

Gradihunt — простой и удобный онлайн генератор градиентов, который легко поможет подобрать оптимальный цвет для вашего фона, блока, элемента и в целом для всего проекта.

#Инструменты

Что такое прогрессивное улучшение (progressive enhancement)

Прогрессивное улучшение предполагает, что веб-интерфейсы должны создаваться поэтапно, циклически, от простого к сложному. На каждом из этапов должен получаться законченный веб-интерфейс, который будет лучше, красивее и удобнее предыдущего.

Основные этапы:
1. Семантическая разметка страницы при помощи HTML.
2. Настройка внешнего вида при помощи CSS.
3. Безупречная настройка внешнего вида при помощи CSS3.
4. Интерактивность, взаимодействие, удобство при помощи JavaScript.

Если говорить проще, то прогрессивное улучшение - это идеология веб-разработки, где мы начинаем разработку с простых вещей и переходим к более сложным.

#Статьи

FontPairings - это бесплатный инструмент, где можно визуализировать шрифты на разных шаблонах и отобрать для себя лучшую пару.

#Инструменты

CSS3 Loader & Spinners.

Крутой набор анимированных прелоадеров на CSS для вашего веб-проекта. Просто копируете код и добавляете к себе на проект.

#CSS #HTML

Tailwind CSS – тонко настраиваемый низкоуровневый CSS фреймворк, который предоставляет все необходимые строительные блоки для создания персонализированного дизайна без лишней борьбы с переопределением раздражающих встроенных стилей

Особенности:
- Полностью адаптивный.
- Расширяемый компонентами.
- Легко настраиваемый.

#CSS #Framework

💡 Что такое MVP и для чего это нужно?

Концепция минимально жизнеспособного продукта (MVP, minimum viable product) - это ранняя версия продукта, решающая, по крайней мере, одну задачу потенциального клиента. Главная ценность MVP заключается в том, что вы можете потратить совсем немного времени на дизайн и разработку и очень быстро получить отзывы от ваших пользователей. Все это поможет понять, в какую сторону вам нужно двигаться и что следует улучшать.

MVP – это такая версия продукта, которая имеет самый необходимый минимум возможностей, чтобы проверить его жизнеспособность на рынке. На этом этапе еще нет дополнительных или второстепенных функций, а есть только то, что составляет суть сервиса.

Для заказчика MVP - это способ быстро проверить идею. Очень часто собственник вкладывает большие деньги в разработку проекта, даже толком не проверив идею.

#Статьи

BLOBS — онлайн генератор красивых шейп объектов для вашего проекта с экспортом в SVG, а также возможностью копирования кода SVG объекта.

#Инструменты

Выберите правильный ответ ниже. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.

Разбор теста

Проверочный код
let foo = 1

foo = (foo++ , foo = addNum(foo), foo *= 1, foo += 2, foo -= 3)

function addNum(num){
return num + 1
}

console.log(foo)

Сначала мы увеличиваем foo до 2, затем мы вызываем функцию addNum(2) и присваиваем результат foo новому значению, foo будет равен 3. После этого мы умножаем текущее значение foo на 1, обновленное значение foo будет 3. Затем мы прибавляем к foo 2 и обновленное значение будет равно 5. И, наконец, мы вычитаем от foo 3, теперь значение foo будет равно 2.

Solid - это декларативная библиотека JavaScript, аналог React, для создания пользовательских интерфейсов. Он не использует виртуальную модель DOM. Вместо этого он предпочитает компилировать свои шаблоны до реальных узлов DOM.

#JavaScript

🔥 Лучшее на канале за последнюю неделю

1) CSS3 Loader & Spinners - Крутой набор анимированных прелоадеров на CSS
2) HTML для JS разработчиков - бесплатный видео-курс от Алекса Лущенко подойдет тем, кто ворвался в js разработку и нуждается в хорошей базе HTML.
3) BLOBS — онлайн генератор красивых шейп объектов.
4) FilePond - библиотека JavaScript, которая предназначена для загрузки файлов.
5) Gradihunt — простой и удобный онлайн генератор градиентов.

Рекомендуйте наш канал, по возможности, друзьям. Всем успешной разработки!

#Лучшее

🚀 Что такое Виртуальный DOM?

Virtual DOM — это техника и набор библиотек / алгоритмов, которые позволяют нам улучшить производительность на клиентской стороне, избегая прямой работы с DOM путем работы с легким JavaScript-объектом, имитирующем DOM-дерево.

Главная проблема DOM — он никогда не был рассчитан для создания динамического пользовательского интерфейса (UI). Мы можем работать с ним, используя JavaScript и библиотеки наподобие jQuery, но их использование не решает проблем с производительностью.

В реальности с виртуальным DOM чаще работают через фреймворки, а не взаимодействуют с ним напрямую. Фреймворки, такие как React и Vue, используют концепцию виртуального DOM для более производительных обновлений DOM.

#Статьи

Alpine.js — легковесный фреймворк с удобным синтаксисом.

Alpine.js предлагает реактивный и декларативный характер как в больших фреймворках, таких как Vue или React, но с гораздо меньшим размером.
Вы можете сохранить свой DOM и вносить изменения в поведение по своему усмотрению.

Особенности данного фреймворка:
- Он весит очень мало! 7.2kB в сжатом виде.
- Знакомый и простой синтаксис основанный на директивах.
- Не использует виртуальный DOM
- Подключения возможно как через CDN (по задумке авторов должно быть основным использованием), так и через npm.

Пример базового кода
<div x-data="{ msg: 'Hello, Habr!' }">
<input type="text" x-model="msg" />
<p x-text="msg"></p>
</div>

#JavaScript

Gaming Icons - 3 высококачественных дизайнерских иконки в игровом стиле. В комплекте доступен png и svg формат.

#Графика

Candy Color Button Animation - замечательная коллекция анимированных кнопок на чистом CSS. Такой набор будет классно смотреться в любом проекте.

#HTML #CSS

CodeCombat - это многопользовательская игра, позволяющая научиться программировать.

Этот проект с полностью открытым исходным кодом. CodeCombat работает в Docker и Вы можете легко начать работу в своей локальной среде, следуя руководству Docker.

Экспериментальная рубрика, в которой будем рассказывать Вам о новых и малоизвестных фичах в веб-разработке.

Фича 1. Функция max() в CSS

Функция max() принимает одно или несколько значений, разделённых запятыми, и возвращает наибольшее из них. Эту функцию используют для того, чтобы зафиксировать минимальное значение, которое может принимать CSS-свойство.

В следующем примере нам нужно, чтобы ширина элемента составляла бы как минимум 500px.

.element {
    width: max(50%, 500px);
}

Если 50% ширины области просмотра больше 500px — для настройки ширины элемента будет использовано именно это значение

Браузеру нужно выбрать максимальное значение из 50% и 500px. Выбор зависит от ширины области просмотра. Если 50% ширины области просмотра — это меньше, чем 500px, браузер это значение проигнорирует и использует значение 500px.

Если же 50% ширины области просмотра больше 500px, тогда ширина элемента будет установлена равной этому значению.

#Фичи #CSS