CodeRoll | Frontend
5.04K subscribers
1.59K photos
73 videos
1 file
899 links
— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.me/coderoll_chat

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
Решил для Вас сделать подборку курсов с 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).
- Не требует много времени.

#Инструменты
This media is not supported in your browser
VIEW IN TELEGRAM
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
This media is not supported in your browser
VIEW IN TELEGRAM
Pure CSS toggle buttons - замечательная кастомная реализация чекбоксов без использования JS освежит и украсит Ваш проект.

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

#Расширения #vscode
Выберите правильный ответ ниже. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.
Beautiful CSS box-shadow examples - крутой онлайн сервис с готовыми примерами реализации теней для блоков.

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

#Инструменты #CSS
PNGcast - отличный сервис, на котором можно найти готовые изображения в png формате с прозрачным фоном. Сервис подойдет для дизайнеров, верстальщиков и разработчиков, которые работают с Front-End частью.

#Графика
🔥 Лучшее на канале за последнюю неделю

1) Pure CSS toggle buttons - замечательная кастомная реализация чекбоксов.
2) Книга 1400 задач по программированию.
3) Headroom.js - это легкий высокопроизводительный JS-плагин, который позволяет вам реагировать на прокрутку.
4) Beautiful CSS box-shadow examples - крутой онлайн сервис с готовыми примерами реализации теней для блоков.
5) PNGcast - отличный сервис, на котором можно найти готовые изображения в png формате с прозрачным фоном. 

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

#Лучшее