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
This media is not supported in your browser
VIEW IN TELEGRAM
Pure CSS toggle buttons - замечательная кастомная реализация чекбоксов без использования JS освежит и украсит Ваш проект.

#CSS #HTML
Image Preview – расширение для VS Code, которое предоставляет возможность предпросмотра изображения при наведении курсора. Это позволяет легко проверить, на правильное ли изображение поставлена ссылка.

#Расширения #vscode
Выберите правильный ответ ниже. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.
Beautiful CSS box-shadow examples - крутой онлайн сервис с готовыми примерами реализации теней для блоков.

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

#Инструменты #CSS
PNGcast - отличный сервис, на котором можно найти готовые изображения в png формате с прозрачным фоном. Сервис подойдет для дизайнеров, верстальщиков и разработчиков, которые работают с Front-End частью.

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

1) Pure CSS toggle buttons - замечательная кастомная реализация чекбоксов.
2) Книга 1400 задач по программированию.
3) Headroom.js - это легкий высокопроизводительный JS-плагин, который позволяет вам реагировать на прокрутку.
4) Beautiful CSS box-shadow examples - крутой онлайн сервис с готовыми примерами реализации теней для блоков.
5) PNGcast - отличный сервис, на котором можно найти готовые изображения в png формате с прозрачным фоном. 

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

#Лучшее
Vue Toastification - библиотека Vue для реализации всплывающих уведомлений. Она даёт в распоряжение разработчика массу настроек, благодаря которым с её помощью можно реализовывать уведомления, соответствующие самым разным нуждам.

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

#Vue
SpinKit - простые загрузочные спиннеры, анимированные с помощью CSS. SpinKit использует только ( transform и opacity) CSS-анимацию для создания плавных и легко настраиваемых анимаций.

#CSS
Aurelia — это интерфейсная среда с открытым исходным кодом. Ненавязчивый стиль Aurelia, основанный на стандартах, делает его единственным фреймворком, который дает вам возможность создавать компоненты с использованием JavaScript или TypeScript. Если вы знакомы с современными JS и HTML, Вы сможете создавать даже самые сложные приложения.

Основные особенности:
- Легко обучаемая.
- Обширная экосистема.
- Простое тестирование.
- Легкое кодирование с условными обозначениями.
- Высокая производительность.
- Реактивное связывание.
- Непревзойденная расширяемость.
- Маршрутизация, композиция и прогрессивное улучшение.

#Framework #Javascript
Фича 4. Свойство background

На сколько вы хорошо знаете свойство background? Это свойство может принимать сразу несколько значений.

background-image - устанавливает одно или несколько фоновых изображений для элемента.

background-position - задает начальное положение фонового изображения.

background-size -  позволяет задавать размер фонового изображения.

background-repeat - устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.

background-attachment - определяет, является ли позиция этого изображения фиксированной в области просмотра, или прокручивается вместе с содержащим его блоком.

background-origin - определяет область позиционирования фонового рисунка.

background-clip - определяет как цвет фона или фоновое изображение будут выводиться под границами блока.

background-color - определяет цвет фона элемента.

#Фичи #CSS
Strapi - это гибкая Headless CMS (система, которая отображает контент через RESTful API) с открытым исходным кодом, которая дает разработчикам свободу выбора своих любимых инструментов и фреймворков, а также позволяет редакторам легко управлять своим контентом. Strapi позволяет сделать панель администратора и API расширяемыми с помощью системы плагинов.

Основные особенности:
- Простая установка при помощи менеджера пакетов.
- Простое управление контентом.
- Удобный для разработчиков API.
- Имеет встроенную систему пользователей с настройками ролей.
- Система плагинов.
- Гибкая настройка.

#CMS
Ramda - практическая функциональная библиотека для программистов JavaScript. Ramda предлагает другой стиль написания кода, стиль, который был позаимствован из чисто функциональных языков программирования.

Здесь механизм создание сложной функциональной логики реализуется с помощью композиции. Однако, любая библиотека предоставляет возможность реализовать функциональную композицию. Но в отличие от других, тут это «делается с легкостью».

#JavaScript
Гайд по первичной SEO-оптимизации проекта.

1. Настройка ЧПУ (полная транслитерация).
2. Robots.txt и Sitemap.xml - два файла, которые используют все востребованные поисковые системы. Именно они дают понять роботу, какой контент может быть интересен пользователю, а какой скрыть.
3. SSL (https://) - необходим! Для простых проектов заказать базовый у регистратора.
4. Самое важное в сео - контроль текущего положения. Если запросы проседают, значит это кому-то нужно. Поэтому, результаты нужно сверять ежемесячно.
5. Заголовок и метатеги должны содержать максимально релевантную информацию для страницы. Наиболее частотная ключевая фраза размещается в title, прописывается в description.
6. Уникальный контент.
7. Компактные изображения и их разметка.
8. Семантическая разметка страницы.
9. Обязательно должна быть реализована страница с 404 ошибкой и отдавала соответствующий код.

#SEO
Iconly 2 - Essential icons
500+ бесплатных иконок для вашего проекта в 5 стилях (Light, Bold, Bulk, Two-tone, Broken)

Основные особенности:
- 5 стилей (Light, Bold, Bulk, Two-tone, Broken).
- Организованная библиотека и простота использования в Figma.
- Полностью векторные.
- Размер сетки 24px.
- Pixel Perfect.
- Трендовые.
- Простота использования в Figma.

#Графика
Iconate.js - библиотека JavaScript, которая добавит вашим статичным шрифтовым иконкам крутой анимации и "оживит" любой проект.

#JavaScript
Lightshot - Расширение дает возможность создать и редактировать скриншот экрана в браузере. Созданный скриншот можно сохранить на компьютер или поделиться им при помощи полученной ссылки. Главный недостаток ссылки — открытый доступ.

#Расширения #Chrome
Нужен ли уникальный дизайн сайта? Давайте разбираться вместе!

Основные плюсы уникального дизайна:
- Качественная отстройка от конкурентов.
- 100%-ная уникальность (как считается, это любят поисковые системы).
- Возможность выразить фирменный стиль.
- Максимально эффектное представление бизнеса.
- Эффективность, при условии профессионального исполнения.

Минусы уникального дизайна:
- Высокая сложность разработки и необходимость привлечения высококвалифицированных исполнителей.
- Высокая стоимость — создание сайта «с нуля» стоит в разы дороже готового решения.
- Увеличенный срок разработки, в результате чего запуск проекта откладывается на неопределенное время.
- Не всегда эффективно — из-за высокой сложности возрастают риски, особенно когда у исполнителей не хватает компетенций (например, используются неочевидные решения или сайт делается «как нравится директору»).
- Не всегда удобный сайт (потому что решение новое, а следовательно — «сырое» и не обкатанное).

#Статьи
This media is not supported in your browser
VIEW IN TELEGRAM
Creative Wave Button - крутая реализация анимированной кнопки с эффектом волны на чистом CSS. Отлично украсит и освежит Ваш проект.

#HTML #CSS
Не знаете, какие цвета использовать в своих проектах или где их использовать? 

Happy Hues - это сайт для вдохновения цветовой палитры, который служит реальным примером того, как цвета могут быть использованы в ваших дизайнерских проектах.

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

#CSS