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

Принципы программирования.

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

1. SOLID (принцип единственной ответственности, принцип открытости/закрытости, принцип подстановки Барбары Лисков, принцип разделения интерфейса, принцип инверсии зависимостей).
2. KISS («Придерживайся простоты»).
3. YAGNI («Тебе это не понадобится»).
4. DRY («Не повторяйся»).
5. Композиция важнее наследования.
6. Разделение ответственности.
7. Избегай преждевременной оптимизации.
8. Рефакторинг, рефакторинг, рефакторинг.
9. Чистый код лучше, чем хитроумный код.
10. Бритва Оккама (Преимущества перевешивают недостатки?)
11. Принцип наименьшего удивления (При выборе имен надо следить за тем, чтобы они отражали сущность объектов).
12. Закон Деметры (Разделение ответственности между классами).

Постепенно мы рассмотрим все эти принципы.

#Статьи

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

Jumping Gooey Navigation.

Крутая реализация анимированной навигации с применением технологии GSAP и MotionPathPlugin
от Green Sock.

#html #css #javascript

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

1) Candy Color Button Animation - замечательная коллекция анимированных кнопок на чистом CSS.
2) SQLBolt - сервис интерактивных уроков и упражнений, призванных помочь вам быстро изучить SQL.
3) Книга: JavaScript для FrontEnd-разработчиков. Написание. Тестирование. Развертывание
4) OverAPI - огромная коллекция шпаргалок и подсказок по различным языкам программирования и технологиям.
5) CodeCombat - это многопользовательская игра, позволяющая научиться программировать.

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

#Лучшее

Sal.js - ориентированная на производительность, легкая (менее 2,8 КБ) библиотека анимации прокрутки, написанная на ванильном JavaScript. Никаких зависимостей!

Sal ( Библиотека анимации прокрутки ) была создана, чтобы предоставить эффективное и легкое решение для анимации элементов при прокрутке. Он основан на Intersection Observer , который обеспечивает потрясающую производительность с точки зрения проверки наличия элемента в области просмотра.

#javascript

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

Генератор экспортирует файлы SVG, которые можно скопировать прямо в буфер обмена для добавления в HTML/CSS или загрузить на свой компьютер, готовые к использованию в выбранном вами программном обеспечении для дизайна (Figma, Sketch, Framer, XD и т.д.)

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

Vectry Icons - высококачественный бесплатный набор интерфейсных иконок для Вашего проекта. В комплекте 20 иконок в SVG формате.

#Графика

CMS 1C-Битрикс: управление сайтом

В этом видео-курсе Вы познакомитесь с одной из наиболее популярных CMS Рунета – 1С-Битрикс: Управление сайтом. Из видео вы узнаете о Битриксе, о плюсах и минусах этой CMS, о том, какие типы сайтов можно сделать под управлением данной CMS.

#Курсы

На канале наших друзей - Просто: разработка, мы нашли интересный пост о том как реализовать интересную анимацию для ссылок на чистом CSS. Забираем в коллекцию!

#CSS

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

Основные преимущества:
- Удобное асинхронное серверное программирование благодаря встроенному Fibers.
- Отлично спроектированная абстракция для работы с данными через коллекции.
- Абстракция для вызова серверных методов, выглядящая как вызов асинхронной функции с callback'ом.
- Удобный деплой приложений.
- Протокол DDP, призванный заменить REST API. Это очень простой но мощный протокол, основанный на EJSON (расширенный JSON). DDP поддерживает RPC и двустороннюю передачу данных, работает поверх WebSockets и SockJS.
- Best practices enforcement. HTML, CSS, LESS или coffeescript должны быть валидными (иначе проект не скомпилируется), чёткое разделение между шаблонами (spacebars — наследник handlebars), css и js.

#javascript #framework

Web Developer - это не просто расширение для Chrome, а целый набор полезных инструментов для управления элементами сайта — например, для анализа веб-ресурсов и макетов, тестирования кода и мгновенного изменения параметров и внешнего вида страницы.

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

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

Основные советы по оптимизации:
- Включите gzip-сжатие, если это возможно.
- Используйте оптимизацию изображений.
- Минимизируйте CSS и JavaScript
- Удалите неиспользуемый код CSS и JavaScript
- Используйте CDN
- Отложите загрузку низкоприоритетного контента, используя функцию ленивой загрузки.
- Уменьшить количество запросов, удалив то, что не влияет на работу сайта.
- Протестируйте Ваш сервер, его работа тоже влияет на время загрузки
- Проверьте время загрузки внешних скриптов и если они долго загружаются, добавьте им параметр async

#Статьи