Git How To — это интерактивный тур, который познакомит вас с основами Git. Тур создан с пониманием того, что лучшим способом научиться чему-нибудь — сделать это своими руками.

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

"Тёмный режим" или "тёмная тема" в последние пару лет является очень актуальной тенденцией в разработке мобильных приложений.

В CSS спецификации есть медиа запрос prefers-color-scheme, который на данный момент поддерживается практически всеми популярными браузерами.

Простой пример на CSS:
/* Light mode */
@media (prefers-color-scheme: light) {
html {
background: white;
color: black;
}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
html {
background: black;
color: white;
}
}

Или же подключаем стили через HTML:
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">

#CSS

Themeor — новая библиотека для React разработчиков. На данный момент она еще находится в разработке, однако уже существующих компонентов достаточно для построения mid-tier проектов.

В документации уже расписано взаимодействие с такими компонентами как Box, Font, Fit и Gap, которыми можно воспользоваться для построения полноценного UI. Компоненты по типу Line, Align и Icon помогают кастомизировать и упрощают работу с настройкой вашего UI на ваш вкус.

#React

Идеи для проектов на JavaScript. Часть 1.

1. Часы
Один из самых простых и базовых проектов, с которых можно начать, это обычные часы. Они должны показывать текущее время (часы и минуты, а возможно и секунды).

2. Форма с валидацией
Реализуйте форму и проверку значений, которые вводятся в ее поля, например, email-адреса или телефонного номера. Для валидации используйте регулярные выражения.

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

4. Калькулятор для подсчета налогов
Это приложение должно иметь поле, куда пользователь сможет ввести сумму своего дохода. Также в нем должна быть кнопка, при нажатии которой будет запускаться функция, подсчитывающая налоги.

5. Викторина
Создайте программу, которая выводила бы набор вопросов с вариантами ответа. Вопросы должны выбираться рандомным образом из большего набора данных.

#Статьи

Бесплатный видео-курс "С нуля до первого сверстанного сайта".

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

#Курсы

Фича 2. Свойство place-items в CSS Grid

Свойство place-items позволяет центрировать элемент по горизонтали и по вертикали, обходясь при этом минимальным объёмом CSS-кода.

Пример кода:
.box{
    display: grid;
    place-items: center;
}

Свойство place-items представляет собой сокращение, используемое для настройки свойств justify-items и align-items.

#Фичи #CSS

Animation Library - это библиотека анимации на чистом CSS. Появление, исчезновение, поворот элементов. Просто подключите файл библиотеки и используйте тег в HTML.

Пример кода:
<div class="u--fadeIn" >...</div>

#CSS #Animation

OmgoPass - библиотека может предоставить самое быстрое и минимальное (с точки зрения размера пакета) решение для генерации паролей.

Особенности библиотеки:
- Быстро: в 600 раз быстрее, чемpassword-generator
- Маленький: 322 байта (минимизированный и сжатый с помощью gzip)
- Безопасность: использует криптографически стойкий случайный API вместо Math.random
- Нет зависимостей
- Поддерживает Node.js

#JavaScript

The Icon of - коллекция из 1100+ отличных иконок, подходящих для любого проекта. Все иконки доступны в самых популярных форматах, включая оптимизированный веб-шрифт.

#Графика

Ungit решает все эти задачи с помощью интуитивно понятного графического интерфейса для управления Git-репозиториями. Он представляет ваш репозиторий как паутину коммитов и ветвей.

Основные особенности:
- Чистый и интуитивно понятный интерфейс для Git (что есть невероятно круто для освоения Git)
- Работает на любой платформе с установленными Node.js и самим Git
- Веб-ориентированный. Возможность запускать его в облаке.

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

Метод утенка - метод решения проблем.

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

Шаг первый – ставим перед собой желтого резинового утенка (да-да, ту саму игрушку для ванной) или мысленно представляем себе такового. 

Шаг второй – объясняем ему свою проблему или задаем интересующий вопрос (во всех подробностях!). Делать это можно устно или мысленно (как правило, если ситуация позволяет, то лучше устно). В процессе этих рассуждений и должно прийти оптимальное решение или искомый ответ. Часто бывает даже так, что они буквально лежат на поверхности, и вы сразу увидите их, как только вы начнете формулировать свой вопрос утенку.

#Советы

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

1) Переходим на темный режим
2) Git How To — это интерактивный тур, который познакомит вас с основами Git.
3) Идеи для проектов на JavaScript для начинающих.
4) Animation Library - библиотека анимации на чистом CSS
5) Landrick - отличный HTML-шаблон для множества тематик

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

#Лучшее

Live Server - расширение для Visual Studio Code, которое позволяет запускать локальный сервер разработки для тестирования кода. В нем есть функция перезагрузки в режиме реального времени как для статических, так и для динамических веб-страниц.

В этом расширении можно настроить номер порта и браузер по умолчанию, оно поддерживает HTTPS и прокси.

#Расширения #vscode

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

Основным преимуществом Paletton является то, что он не использует современное компьютерное и инженерное цветовое пространство RGB, а построен на классическом художественном цветовом круге, применяет классическую теорию цвета и работает в специально созданном цветовом пространстве RYB . 

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

Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких

Это обновлённый и переработанный видео-курс Gulp 4, в котором Вы детально разберёте работу с Gulp, ознакомитесь с новыми методами построения задач (тасков), узнаете, какими способами можно установить, настроить Gulp и как с его помощью автоматизировать и ускорить процесс веб-разработки. Знакомство с возможностями инструмента будет на реальном примере и будет создано удобное рабочее окружение для HTML вёрстки от А до Я. 

#Курсы

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

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

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

Eva Icons - это пакет из более чем 480 красиво оформленных иконок с открытым исходным кодом для пользовательского интерфейса. Кроме того, иконки поддерживают 4 типа анимации: zoom, pulse, shake и  flip. 

Загрузите на компьютер, чтобы использовать их в своих веб-проектах, iOS и Android. Иконки представлены также в двух визуальных видах: Fill и Outline и в нескольких форматах, в том числе png, svg, font, Sketch.

#Графика

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

Swiper поддерживает работу с React и Vue.

#JavaScript #React #Vue

Editor X — новый веб-конструктор, который включает в себе передовые технологии для верстки и прототипирования Вашего проекта.

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