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

1) 30 seconds of code — полезный сервис с подборками коротких фрагментов кода, выполняющих конкретные задачи.
2) Набор из более 700 качественных иконок пользовательского интерфейса.
3) Superplaceholder.js — отличная библиотека для анимации ваших плейсхолдеров в input формах.
4) WhatTheHex - онлайн помощник нейминга.
5) Шпаргалка по регулярным выражениям JS.

Всем успешной разработки!

#Лучшее

Marketspot v1.0 - шаблон цифрового магазина HTML.

Это специальный HTML-шаблон торговой площадки, в котором есть все необходимые шаблоны для электронной торговли.

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

#Шаблоны

FilePond - библиотека JavaScript, которая предназначена для загрузки файлов. Оптимизирует изображения для более быстрой загрузки, а также предлагает большой, доступный UX.

Данная библиотека адаптирована под React , Vue , Angular и jQuery.

#JavaScript

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