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
Regex101 - онлайн-инструмент для тестирования регулярных выражений с подсветкой синтаксиса, объяснениями, шпаргалками для PHP / PCRE, Python, GO, JavaScript, Java.

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

#графика
Transition.css - библиотека с готовыми стилями для создания на Вашем проекте эффектов перехода. Импортируйте CSS и установите атрибут на странице HTML.

#css #html
Layoutit! - онлайн инструмент для быстрого создания Grid сеток, где вы сможете быстро скопировать код сгенерированной сетки и вставить в свой проект. А также, для энтузиастов, есть открытый исходный код данного проекта.

#инструмнты
jsPDF - ведущее клиентское решение HTML5 для создания PDF-файлов. Идеально подходит для билетов на мероприятия, отчетов, сертификатов и т.д.

#javascript
Cssreference.io - это бесплатное визуальное руководство по CSS. В нем представлены наиболее популярные свойства и объясняются их иллюстрированные и анимированные примеры .

#css #полезное
Vuex-persistedstate - готовое решение для сохранения и восстановления своего состояние Vuex между перезагрузками страницы.

#vue
Reseter.css - отличная альтернатива Normalize.CSS и Reset.CSS.

Существует много браузеров с сотнями версий. Каждая версия имеет как минимум 500+ несоответствий с разными версиями разных браузеров. И чтобы устранить это несоответствие - используйте Reseter.css.

#css
BackstopJS - автоматизирует визуальное регрессионное тестирование вашего адаптивного веб-интерфейса, сравнивая скриншоты DOM с течением времени.

#javascript
Panabee - это простой способ в виде генератора для поиска доменных имен, названий приложений, названий веб-сайтов и названий компаний.

#инструменты
Изучение @property и его анимационных возможностей (En).

@property - правило в CSS, которое представляет собой регистрацию пользовательских свойств непосредственно в таблицу стилей без необходимости запускать любые JS.

#css #статьи
Glassmorphism - онлайн инструмент для быстрой генерации эффекта матового стекла на CSS

Пример кода:
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );

#css #инструменты
Evil Insult Generator - с помощью этого API Вы можете создать приложение, или объединить его с другим, например, реализовать сгенерированные оскорбления в шаблонах мемов.

Единственный минус, а для кого то плюс - английский язык. Но вы всегда можете написать свой сервис и поделиться с нами!)

Пример ответа сервера:
{
"number":"117",
"language":"en",
"insult":"Some cause happiness wherever they go; others, whenever they go.",
"created":"2020-11-22 23:00:15",
"shown":"45712",
"createdby":"",
"active":"1",
"comment":"http:\/\/www.mirror.co.uk\/news\/weird-news\/worlds-20-most-bizarre-insults-7171396"
}

#api
AnimXYZ помогает создавать, настраивать и составлять анимацию для вашего веб-сайта. Работает на переменных CSS, позволяющих создавать практически неограниченное количество уникальных анимаций без написания единого ключевого кадра. Сэкономьте время и получите полный контроль над движением ваших элементов. AnimXYZ, созданный для Vue, React, SCSS и CSS, оживит ваш сайт.

#css
ReactPlayer - компонент React для воспроизведения различных URL-адресов, включая пути к файлам, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion и Kaltura.

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

1) Glassmorphism - онлайн инструмент для быстрой генерации эффекта матового стекла на CSS.
2) Reseter.css - отличная альтернатива Normalize.CSS и Reset.CSS.
3) Vuex-persistedstate - готовое решение для сохранения и восстановления своего состояние Vuex между перезагрузками страницы.
4) AnimXYZ помогает создавать, настраивать и составлять анимацию для вашего веб-сайта.
5) ReactPlayer - компонент React для воспроизведения различных URL-адресов

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

#Лучшее
WaveUI - UI-фреймворк для Vue.js.

Основные особенности:
- Поддержка Vue 3
- Нет зависимости
- Обеспечение мощных элементов, например написание меню навигации в одну строку
- Без бесполезных оберток DOM внутри элементов пользовательского интерфейса.
- Обработка всех размеров и интервалов из одной $base-font-sizeпеременной Sass, которую вы можете переопределить
- Предоставление простых и последовательных опций и названий компонентов

#vue
This media is not supported in your browser
VIEW IN TELEGRAM
Parallax Photo Carousel - реализация красивого слайдера с эффектом параллакса. При переходе на другой слайд создаётся впечатление объёмного рисунка. Забираем в коллекцию!

#codepen
EasyVK (VKontakte API Manager) - данная библиотека создана для того, чтобы VKontakte API имел удобную поддержу на node.js. С помощью этой библиотеки вы можете делать все, что позволяет официально ВКонтакте API, и не только.

#node
Planck.js - это 2D физический движок для кроссплатформенной разработки игр HTML5 с использованием TypeScript.

#typescript
Harold - это статический сайт и генератор блогов, основанный на Handlebars и Markdown. Со встроенной поисковой системой и готовыми адаптивными шаблонами.

#cms