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) Animated Tab Bar - красивая реализация панели вкладок, которые украсят любой проект.
2) Forge Icons - 300+ бесплатных, высококачественных SVG-иконок для вашего проекта.
3) Geolib - библиотека для выполнения основных географических операций
4) Mapbox - веб-сервис, с готовыми API, который предоставляет разработчикам точную информацию о местоположении и полнофункциональные инструменты.
5) Flowy - библиотека javascript для легкого создания красивых блок-схем.

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

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

Основные возможности:
- Автосинхронизация задач и списков со всеми устройствами.
- Сохранение списка дел в облаке.
- Установка для каждой конкретной задачи сроков завершения, повторные даты, подпункты, можно присваивать приоритеты, задавать подпроекты и цвета.
- Доступно управление всей информацией в офлайне.
- Участие в совместных проектах и чёткое назначение задач для командного решения целей.
- Просмотр уведомлений о правках и примечаниях.
- Мониторинг будущих планов при помощи визуального планировщика.

#инструменты
Octomments - javascript решение, которое создаст виджет комментариев на вашем проекте.

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

#инструменты
This media is not supported in your browser
VIEW IN TELEGRAM
Rating - красивая реализация выставления рейтинга в виде звезд для Вашего проекта.

#html #javascript #css
Polacode - расширение для VS Code, которое позволяет быстро и красиво сделать скриншот вашего кода в редакторе.

#Расширения #vscode
Рейтинг CMS за 2020 год.

Запускать веб-сайт в 2020 году проще, чем когда-либо. У вас есть множество платформ на выбор, и многие из них позволяют создавать практически любой тип сайта. Однако выбор системы управления контентом (CMS) никогда не был более сложным, из-за большого количества доступных опций.

Топ 5 лучших CMS по нашему мнению:
1. DataLife Engine
2. October CMS
3. WordPress
4. MODX
5. Joomla

Если Вам знакомы интересные и малоизвестные CMS - обязательно делитесь ими в комментариях!

#статьи
Всех с Новым Годом!

Будьте всегда в тренде, берегите зрение и нервы! ⛄️🎉🎉 🤪🥳
Сolor Generator - удобный онлайн-инструмент от Eva Design System, который поможет легко подобрать оттенок любого цвета.

#инструменты
PhaserJS - это отличный фреймворк для разработки игр, поддерживаемый сообществом, готовый для всех ваших настольных и мобильных нужд. Он поддерживает как WebGL, так и Canvas (для тех устройств, которые не поддерживают WebGL) и ориентирован на разработку 2D-игр.

#javascript
This media is not supported in your browser
VIEW IN TELEGRAM
Text Grid with Mouse Interaction - классная реализация эффекта увеличения текста при наведении с помощью CSS и JS.

#javascript #css
Rubicons - pixel perfect иконки для пользовательского интерфейса. Размер сетки 24x24 px. Выберите свой цвет, загрузите полный пакет или отдельные значки в формате SVG или быстро скопируйте код SVG.

#графика
Vue 3. Основы для Начинающих - авторский онлайн-курс по Vue.js 3 от Владилена Минина. Самая актуальная информация по 3-й версии Vue.js.

Vue - это JS фреймворк для создания реактивных пользовательских интерфейсов. Он отличается от других фреймворков своей простотой и эффективностью.

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

#react
Основные этапы разработки сайта под ключ.

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

Рассмотрим основные этапы:
1. Бесплатная консультация
2. Заполнение брифа
3. Обсуждение проекта
4. Подготовка коммерческого предложения
5. Подписание договора
6. Сбор семантики для SEO
7. Составление технического задания
8. Разработка дизайна
9. Верстка, программирование либо использование конструктора сайта
10. Тестирование сайта
11. Подготовка и размещение контента
12. Настройки и запуск проекта
13. Сдача проекта заказчику

#статьи #кейсы
Highlight.js - библиотека предназначена для выделения синтаксиса. Работать она может и в браузере, и на сервере. Highlight.js способна распознавать практически любой код и имеет встроенную функцию автоматического определения языка.

Она осуществляет поиск программного кода между тегами <pre><code>, определяя используемый язык и выделяя синтаксис. Помимо этого, она поддерживает несколько цветовых схем. Вот пример с отрывком JavaScript кода и стандартной темой редакторов.

#javascript
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Animations: Obvious CTA Buttons - забираем в коллекцию крутые кнопки с анимацией на CSS, которые привлекут внимание на любом проекте.

#CSS
Какое свойство CSS создаёт псевдоэлемент, который является первым потомком выбранного элемента. Часто используется для добавления дополнительного содержимого в элемент с помощью свойства content.
Anonymous Quiz
7%
:hover
32%
:after
56%
:before
3%
:focus
2%
:left
Как в JS удалить свойство (ключ: значение) c:3 из объекта obj? let obj = {a: 1, b: 2, c:3}
Anonymous Quiz
50%
delete obj.c
24%
remove obj.c
8%
obj = Object(remove c)
6%
obj.c = delete 3
11%
remove c['3']
Gurufy - отличный и удобный сервис для изучения React.js и его экосистемы. Осваивайте front-end быстро и легко!

Экосистема еще в процессе разработки, но основу уже можете начать изучать.

#react