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
Doom scroller - необычная библиотека JavaScript, которая поможет вам избежать бесконечного скроллинга страницы.

#javascript
Cockpit - простая платформа контента для управления любым структурированным контентом.
Cockpit идеально подходит, если вы хотите поддерживать несколько устройств или вам нужен пользовательский интерфейс управления контентом для конструкторов статических сайтов.

#cms
Вводим рубрику на логические задачки. Да, возможно, они не относятся к программированию, но для общего развития будет очень полезно и интересно.

Правильный ответ на эту задачу будет опубликованы через сутки.
This media is not supported in your browser
VIEW IN TELEGRAM
Creative Wave Button - креативная реализация кнопки с эффектов волны без применения javascript. Забираем в коллекцию!

#codepen
React Select - гибкий и красивый элемент управления Select Input для ReactJS с поддержкой множественного выбора, автозаполнения, асинхронности и создания.

#react
Ответ на логическую задачку.

Для раздела имеющихся лошадей необходимо заимствовать еще одну, после чего их общее количество станет 18. Раздел этого количества даст 2, 6 и 9 лошадей, которых в сумме окажется 17.
Одна лошадь из 18 оказалась как бы «лишней» — это заимствованная лошадь, которую следует вернуть владельцу после раздела имущества.

Можно решить головоломку и арифметическим способом:
пропорцию 1/2 : 1/3 : 1/9 достаточно умножить на 18 и получится тот же результат.

Ответ:
2, 6 и 9 лошадей.
Popmotion - библиотека функциональной и реактивной анимации, весит всего 11 килобайт. Позволяет разработчикам создавать анимацию, создавать действия, представляющие собой потоки значений, которые можно запускать и останавливать и создавать с помощью CSS, SVG, React, three.js и любого API, принимающего число в качестве входных данных.

#javascript
Rubber Icons — большой пак иконок для интерфейсов. Набор содержит более 570 иконок, в трех начертаниях, двух размерах 24px и 32px и форматах Figma, Sketch, SVG, PNG.

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

1) Creative Wave Button - креативная реализация кнопки с эффектов волны без применения javascript. 
2) CSS: полное руководство по функции calc().
3) Popmotion - библиотека функциональной и реактивной анимации
4) Simple Vue 8 Puzzle - реализация интерактивных пазлов в стиле "15 - пятнашки" на Vue.
5) Pure - набор небольших адаптивных модулей CSS, которые можно использовать в каждом веб-проекте.

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

#Лучшее
CSSBattle - соревновательная игра с кодом CSS, Используйте свои навыки CSS для реализации целей с минимально возможным кодом. Кто лаконичнее написал работоспособный код — тот и победил!

#css
Blueprint - это набор инструментов пользовательского интерфейса на основе React.

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

#react
EStimator - подсчитайте, какой размер и производительность сайта можно улучшить, перейдя на современный синтаксис JavaScript.

Отправка URL-адреса на анализ осуществляется без сохранения состояния. Сервис не хранит никакой информации о вас или об URL-адресах, которые вы анализируете.

#инструменты
This media is not supported in your browser
VIEW IN TELEGRAM
Toggle Button - симпатичная реализация кнопок переключения для вашего проекта. Забираем в коллекцию!

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

За считанные часы откройте для себя новые языки, алгоритмы, созданных ведущими разработчиками.

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

1) Полный мастер-класс по графическому дизайну и монтажу видео
2) Разработка расширений Google Chrome для новичков [2021]
3) Python для начинающих
4) Глубокое погружение в блокчейн

#Курсы
target = "_blank" - по умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>. В XHTML применение этого атрибута запрещено.

Как оказалось - это не очень безопасный атрибут и автор статьи рассказывает почему.

#статьи
Vue2-datepicker - элементы управления для выбора дат, создаваемые с помощью этой библиотеки, легко поддаются стилизации. Она поддерживает массу настроек, касающихся выбора дат и диапазонов дат. Библиотека позволяет формировать аккуратные и удобные элементы пользовательского интерфейса. Она даже поддерживает средства локализации.

#vue
Sinon.JS - это mock-библиотека для JavaScript, которую можно использовать с любым тестовым фреймворком. Она предоставляет функции для эмуляции и проверки требуемого поведения в JavaScript. В библиотеке представлено три вида тестирования с spy, stub и mock.

#javascript
MVP.css - минималистичная таблица стилей для HTML-элементов. Готовые стили CSS для элементов HTML. Ни имен классов, ни фреймворка для изучения.

#css #html
Многие разработчики по старинке пользуются конструкциями типа <div id="nav"> для обозначения навигации или других структурных элементов страницы. Тем временем в стандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо <div> и <span>

Почему семантика важна? Читайте подробно в данной статье.

#статьи
Компоненты Tailwind 2.0 UI.

Красивые компоненты пользовательского интерфейса, созданные с помощью Tailwind CSS.
Более 400 профессионально разработанных, полностью отзывчивых примеров компонентов, которые вы можете добавить в свои проекты Tailwind и настроить по своему усмотрению. 

Полностью интерактивные фрагменты кода, ориентированные на доступность, для React и Vue, а также HTML.

#html #vue #react