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) Animista - набор готовых решений для создания анимаций на вашем проекте при помощи CSS.
2) Profile Card Hover Effect - простая, но интересная реализация отображения информации профиля в виде карточек на чистом CSS.
3) DarkModeJS - легкий и кроссбраузерный, помогает автоматически определять время пользователя и переключать тему на темную режим. 
4) Evericons - это коллекция из 460+ хорошо продуманных иконок для вашего проекта.
5) Calltoidea - это платформа для дизайнеров, которая может найти подходящие примеры элементов сайта для вдохновение в соответствии с потребностями.

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

#Лучшее
FullPage.js - простая и удобная в использовании библиотека для создания веб-сайтов с полноэкранной прокруткой (также известных, как одностраничные сайты). Она позволяет создавать веб-сайты с полноэкранной прокруткой, а также добавлять горизонтальные ползунки для разделов сайта.

#javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Clock JS - красивая реализация текущего времени для Вашего проекта на чистом JS c пошаговым прогрессбаром в 1 минуту.

#javascript
Flexbox.help — инструмент-помощник в освоении технологии FlexBox. При выборе какого либо из свойств, появится визуальное отображение с изменением кол-ва элементов в контейнере.

#css
PostCSS - это инструмент для преобразования стилей с помощью плагинов JS. Эти плагины могут линтировать ваш CSS, поддерживать переменные и миксины, переносить будущий синтаксис CSS, встроенные изображения и многое другое.

#инструменты
Plasmic -- инструмент, который позволяет разработчикам и дизайнерам визуально составлять пользовательские интерфейсы React. Работа дизайна происходит в Figma / Sketch, после чего можно преобразовать его в обслуживаемые, готовые компоненты - без ущерба для контроля разработчика. Вы можете импортировать компоненты Plasmic в существующую базу кода React, а также повторно использовать существующие компоненты кода в редакторе Plasmic.

#react #инструменты
Какой будет результат сравнения у данных свойств document.body.clientWidth === window.innerWidth?
Anonymous Quiz
33%
true
47%
false
12%
TypeError
6%
undefined
2%
number
Babel.JS – это транспайлер, переписывающий код на ES-2015 и выше в код на предыдущем стандарте ES5.

Обычно Babel.JS работает на сервере в составе системы сборки JS-кода (например webpack) и автоматически переписывает весь код в ES5.

#javascript #инструменты
Cristino - адаптивный шаблон личного портфолио. Это современный, креативный, чистый, профессиональный и привлекательный персональный шаблон. Работает на Bootstrap v4.5. При разработке шаблона было поставлено на первое место повторно используемый HTML и модульный CSS, сочетая современный стиль с разметкой на каждой HTML-странице. Шаблон оптимизирован, чтобы сэкономить ваше время и деньги. Это хорошо задокументировано, что поможет вам легко и быстро запустить ваш сайт. Вы можете легко настроить его в соответствии с потребностями вашего бизнеса.

#шаблоны
This media is not supported in your browser
VIEW IN TELEGRAM
Longcat Range Sliders.

Как Вам такая реализация range-слайдера в виде котиков? Мне кажется, котики - украшение любого проекта.)

#javascript
Test Cases - онлайн-инструмент для измерения и тестирования производительности JS-кода.

#javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Современные реалии по отбору кандидатов на уровень джуна.

#юмор
Storytale - высококлассные веб-иллюстрации для Вашего проекта. основная часть, к сожалению, платная, но есть и бесплатный раздел с не менее классными иллюстрациями (порядка 80 шт.).

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

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

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

1) FullPage.js - простая и удобная в использовании библиотека для создания веб-сайтов с полноэкранной прокруткой
2) Flexbox.help — инструмент-помощник в освоении технологии FlexBox.
3) Clock JS - красивая реализация текущего времени для Вашего проекта на чистом JS c пошаговым прогрессбаром в 1 минуту.
4) Longcat Range Sliders - реализация range-слайдера в виде котиков.
5) Cristino - адаптивный шаблон личного портфолио

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

#Лучшее
CSS Layout - коллекция популярных макетов и шаблонов, сделанных с помощью CSS. Они основаны на современных функциях CSS, таких как flexbox и CSS Grid.

#css
Accessibility Checker - это инструмент аудита доступности. Всегда лучше постараться сделать свои страницы максимально доступными, а axe поможет вам избежать случайного исключения сегмента пользователей с вашего сайта. 

#расширения #chrome
Preact  - быстрая альтернатива React размером 3 КБ с тем же современным API.

Основные особенности:
- Знакомые React API и шаблоны: класс ES6, хуки и функциональные компоненты.
- Обширная совместимость с React через простой псевдоним preact / compat.
- Все необходимое: JSX, VDOM, DevTools, HMR, SSR.
- Высокооптимизированный алгоритм сравнения и бесшовная гидратация от рендеринга на стороне сервера.
- Поддерживает все современные браузеры и IE11.
- Прозрачный асинхронный рендеринг с подключаемым планировщиком.
- Мгновенная настройка приложения производственного уровня с помощью Preact CLI.

#javascript
А на сколько ты опытен в работе с пк? Пиши в комментариях!
Modern CSS Solutions - ресурс, который разбирает современные решения старых проблем CSS. Сейчас рассмотрено 22 примера, но автор постоянно обновляет материал.

#css
Babylon.JS - Невероятно мощный движок веб-рендеринга, с помощью которого можно создавать игры, создавать объекты в 3D. Фактически, поскольку это движок рендеринга, а не игровая библиотека, у вас есть доступ к функциям более низкого уровня, особенно к тем, которые связаны с визуализацией.

#javascript