Фича 3. Гибкая настройка border-radius

При помощи свойства border-radius можно закруглять углы рамок. Однако, мало кому известно о возможности задавать значения закругления отдельно по оси X и Y.

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

.wrapper { border-radius: 30px 30px 30px 30px / 50px 50px 50px 50px; }

#Фичи #CSS

Spacedesk позволяет вам преобразовать iPad, старый ноутбук с Wi-Fi, или даже телефон во второй монитор для вашей основной машины.

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

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

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

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

#Статьи #CSS

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

#React

Представим, что вы захотели поправить CSS прямо в браузере, но после этого пришлось перезапустить страницу. Все ваши наработки пропали, и приходится вносить изменения заново. Используйте User CSS, который будет сохранять ваши стили. Больше не нужно переживать по поводу того, что CSS исчезнет. Функциональность расширения позволит тестировать написанный CSS при переходе на другие страницы.

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

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

1) Курс Bootstrap 5: полное руководство (шаг за шагом).
2) Создавайте новые и современные адаптивные веб-сайты.
3) Классификатор изображений с Django и React.
4) Современный JavaScript для React JS - ES6.

#Курсы

100 days css - испытайте себя и станьте экспертом CSS за 100 дней. Проявите творческий подход, представьте свой результат и проверьте, что создали другие.

#CSS

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

Основные особенности:
- Облачная платформа (PAAS)
- Хорошая документация
- Имеет встроенные инструменты и архитектуру.
- Контроль над архитектурой при разработке приложения.
- Развертывание выполняется (автоматически через GitHub или вручную с помощью команд git или CLI).
- Не требует много времени.

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

Slide Sign In/Sign Up form - интересная реализация формы регистрации/авторизации с плавным анимированным переключением между ними в виде слайдера.

#HTML #CSS #JavaScript

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

Эта коллекция поможет вам получить творческую силу и выполнять свою работу лучше, эффективнее и просто ускорить вашу работу.

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

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

1) Простая реализация фильтрации контента по вкладкам на HTML и CSS.
2) Spacedesk - утилита, которая позволяет вам преобразовать ваш гаджет во второй монитор для вашей основной машины.
3) Идеи для проектов на JavaScript. Часть 2.
4) Интересная реализация формы регистрации/авторизации с плавным анимированным переключением.
5) CSS Values - гайд по CSS свойствам.

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

#Лучшее

npm – это менеджер пакетов, который входит в состав Node.js. В течение многих лет Node широко использовался разработчиками JavaScript для обмена инструментами, установки различных модулей и управления их зависимостями. Вот почему людям, работающим с Node.js, очень важно понять, что такое npm.

Эта утилита помогает в установке и удалении пакетов, управлении версиями и зависимостями, необходимыми для запуска проекта. Чтобы использовать npm, нужно сначала установить node.js, так как они связаны.

Убедитесь, что node.js и npm установлены, выполнив несколько простых команд. Это покажет Вашу версионность,

node -v
npm -v

#Статьи

Headroom.js - это легкий высокопроизводительный JS-плагин без зависимостей, который позволяет вам реагировать на прокрутку.

Таким образом Вы можете сделать фиксированную шапку на сайте. При прокрутке вниз она ускользает из поля зрения и возвращается обратно при прокрутке вверх.

#JavaScript

Шаблон Mosto был разработан, чтобы предоставить вашим пользователям беспроблемный опыт просмотра, превратить их из посетителей в пользователей, скачивающих приложения и активных пользователей. Он соответствует последним тенденциям дизайна 2020 года, поэтому ваш сайт будет выглядеть безупречно.

#Шаблоны

📖 1400 задач по программированию

Автор: Д. Златопольский
О книге: 2020 год, 193 страницы, Русский язык, 3.3Mb

Содержание: В книге приведено более 1400 задач по программированию. Задачи имеют разный уровень сложности и охватывают большой круг тем. Они не привязаны к конкретному языку программирования и могут быть решены в программе на любом языке (Pascal, Python, С, школьном алгоритмическом языке и т. д.). Издание будет полезно как читателям, изучающим программирование самостоятельно, так и преподавателям школ, колледжей и вузов.

Рекомендация от подписчика.

#Книги

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

Название Vue 3.0 - это отсылка к манге "One piece" про парня, который хочет стать пиратским королем.

Основные особенности:
- Повышенная производительность.
- Меньший размер.
- Улучшенная интеграция с TypeScript.
- Новый API-интерфейс для крупномасштабных .проектов.
- Для средних проектов можно избавиться от Vuex.

#Статьи #Vue

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

#JavaScript

Shape 2 — крутая и очень большая коллекция полностью настраиваемых иконок и иллюстраций для разработчиков и дизайнеров.

#Графика

Начинаем серию мини-уроков по JS, которые Вам явно помогут при написании логики для Вашего проекта, а так же при прохождении собеседования.

💡 Удаление дубликатов из массива

Дан массив:
let arr = [1, 2, 3, 3, 4, 5, 6, 6, 7, 7, 7, 7];

В нем множество дублирующихся элементов. Чтобы удалить дубликаты элементов, мы можем использовать Set. Объекты Set позволяют сохранять уникальные значения любого типа, как примитивы, так и другие типы объектов. В Set не может быть повторяющегося значения.

Для удаления дубликатов из массива, мы напишем такой код:
const newArr = [...new Set(arr)];

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

В результате мы получили массив, содержащий в себе только уникальные значения.
newArr = [1, 2, 3, 4, 5, 6, 7]

Не до конца понял? Пиши в чат!

#МиниУрок #JavaScript

Pure CSS toggle buttons - замечательная кастомная реализация чекбоксов без использования JS освежит и украсит Ваш проект.

#CSS #HTML

Image Preview – расширение для VS Code, которое предоставляет возможность предпросмотра изображения при наведении курсора. Это позволяет легко проверить, на правильное ли изображение поставлена ссылка.

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