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

SQLBolt - сервис интерактивных уроков и упражнений, призванных помочь вам быстро изучить SQL.

Существует множество популярных баз данных SQL, включая SQLite, MySQL, Postgres, Oracle и Microsoft SQL Server. Все они поддерживают общий стандарт языка SQL, которому этот сервис будет обучать, но каждая реализация может отличаться дополнительными функциями и типами хранения, которые она поддерживает.

#Курсы

📖 JavaScript для FrontEnd-разработчиков. Написание. Тестирование. Развертывание

Автор: Кириченко А. В.
О книге: 2020 год, 320 страниц, Русский язык, 29.9Mb

Содержание: Данная книга посвящена тому, как на языке JavaScript создавать хороший код для фронтенда (и не только). В книге последовательно затронуты все аспекты производства JavaScript-кода: от выбора архитектуры и конструирования кода до покрытия модульными тестами, отладки, интеграционного тестирования, сборки и непрерывной поставки вашего кода.

#Книги

OverAPI - огромная коллекция шпаргалок и подсказок по различным языкам программирования и технологиям. Очень удобный и полезный сервис.

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

Nuxt.js — это фреймворк для создания универсальных приложений на Vue.js с использованием Node.js. С помощью него можно рендерить UI на сервере и генерировать статические сайты.

Nuxt разработан на основе мощной модульной архитектуры. Более 50 разнообразных модулей сделают разработку проще и быстрее. Оптимизирует ваше приложение сразу из коробки.

#JavaScript #Vue #Node #Framework