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
🔥 Лучшее на канале за последнюю неделю

1) Креативная реализация формы Авторизации / Регистрации.
2) Hover slider - интересная реализация слайдера.
3) Курс по основам React в одном видео на примерах и практике от Владилена Минина.
4) Clean CSS - очень полезный онлайн-сервис с набором инструментов для работы с HTML, CSS, JSON, JS.
5) Octicons - это набор качественных интерфейсных иконок в формате SVG

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

#Лучшее
Consoleimg — библиотека для отображения изображений в консоли разработчика.

Как подключить:
1. Перед закрывающим тегом </body> добавить библиотеку
<script src="consoleimg.min.js"></script>

2. Вывод изображения происходит таким образом
<script>
consoleimg.load('image.jpg', {size: 320, color: '#FFFFFF'})
</script>

#JavaScript
WhatTheHex - онлайн помощник нейминга.

Если у Вас проблемы с неймингом цвета в CSS, то данный сервис помогает с этим, достаточно ввести HEX код или выбрать цвет в палитре и скопировать необходимое имя себе в проект.

#Инструменты
Angular 9 Основы. Полный Курс для начинающих.

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

#Курсы
Terminus — удобный кроссплатформенный терминал.

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

#Инструменты
Набор из более 700 качественных иконок пользовательского интерфейса, которые снабжены хорошо организованной библиотекой компонентов и имеют собственную API.

Доступные форматы:
css, svg, tsx, fig, xd, json, xml

#Графика
Выберите правильный ответ ниже. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.
Superplaceholder.js — отличная библиотека для анимации ваших плейсхолдеров в input формах. Это позволит освежить внешний вид Вашего проекта. Библиотека очень минимизирована и имеет размер <1кб.

#JavaScript
This media is not supported in your browser
VIEW IN TELEGRAM
Some Sticky-Stacked Cards

Интересная реализация отображения блоков в виде карточек при скролле окна браузера. Данная реализация выполнена на чистом CSS без JS.

#CSS
Reveal.js - это фреймворк HTML с открытым исходным кодом. Это инструмент, который позволяет любому пользователю с веб-браузером создавать полнофункциональные и красивые презентации бесплатно.

Презентации, сделанные с помощью Reveal.js, основаны на открытых веб-технологиях. Изменение стилей с помощью CSS, <iframe> добавит внешнюю веб-страницу или можете добавить свое собственное поведение с помощью  JavaScript API.

Фреймворк обладает широким набором функций, включая вложенные слайды , поддержку Markdown , Auto-Animate , экспорт PDF , заметки докладчиков , поддержку LaTeX и выделенный синтаксис кода.

#HTML #JS
Как закрыть сайт от индексации в Robots.txt

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

В этой статье рассмотрим несколько способов закрытия сайта от поисковой индексации.

#Статьи
Control Illustration - бесплатный набор из 108 иллюстраций различной тематики для Вашего проекта.

#Графика
30 seconds of code — полезный сервис с подборками коротких фрагментов кода, выполняющих конкретные задачи.

Используйте строку поиска, чтобы найти фрагменты, которые соответствуют вашим потребностям. Вы можете искать по имени, тегу, языку или используя описание фрагмента.

#Инструменты
Шпаргалка по регулярным выражениям JS.

Перевод статьи «Regex Cheat Sheet» автора Emma Bostian. Регулярные выражения или «regex» используются для игнорирования регистра, а также для поиска символов и пробелов с дополнительными условиями. Всего 25 примеров.

#JavaScript
Какой(им) JS библиотекой / фреймворком Вы пользуетесь или хотите освоить?
Anonymous Poll
20%
Angular
59%
React
33%
Vue
5%
Svelte
27%
JQuery
8%
Не использую
2%
Другое (вариант в чат)
🔥 Лучшее на канале за последнюю неделю

1) 30 seconds of code — полезный сервис с подборками коротких фрагментов кода, выполняющих конкретные задачи.
2) Набор из более 700 качественных иконок пользовательского интерфейса.
3) Superplaceholder.js — отличная библиотека для анимации ваших плейсхолдеров в input формах.
4) WhatTheHex - онлайн помощник нейминга.
5) Шпаргалка по регулярным выражениям JS.

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

#Лучшее
Marketspot v1.0 - шаблон цифрового магазина HTML.

Это специальный HTML-шаблон торговой площадки, в котором есть все необходимые шаблоны для электронной торговли.

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

#Шаблоны
FilePond - библиотека JavaScript, которая предназначена для загрузки файлов. Оптимизирует изображения для более быстрой загрузки, а также предлагает большой, доступный UX.

Данная библиотека адаптирована под React , Vue , Angular и jQuery.

#JavaScript
HTML для JS разработчиков.

Этот бесплатный видео-курс от Алекса Лущенко подойдет тем, кто ворвался в js разработку и нуждается в хорошей базе HTML + CSS. В данном курсе рассмотрены организация кода, flexbox, grid, позиционирование, настройка gulp и многое другое.

#Курсы
Mousetrap - простая библиотека для обработки сочетаний клавиш в Javascript. Это автономная библиотека без внешних зависимостей. Он весит около 2 КБ в сжатом виде.

#JavaScript