CodeRoll | Frontend
4.98K subscribers
1.6K photos
73 videos
1 file
912 links
— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.me/coderoll_chat

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
Channel created
Аллоха! Если вы попали на это сообщение, то знайте, Это не просто телеграм канал! Это большая и дружная семья, которая старается помочь разобраться в веб разработке. На данный момент мы создадим такую навигацию по каналу, для более удобного поиска по постам:
#HTML
#CSS
#JS
#jQuery
#Vue
#Wordpress
#DLE
#Статьи
#Инструменты
#Графика
Начинаем улучшать наш сайт!
Классная стилизация чекбоксов, которая придаст изюминку твоему сайту.
Кастомизация займет не более 10 минут времени.
#HTML_CSS
Сегодня хотелось бы поговорить о взаимодействии пользователя с Вашим сайтом. А именно о UX. О том как воспринимает пользователь или клиент Ваш сайт или продукт когда попадает на вашу страничку.
#Статьи
Essential Icons
Небольшой пак интерфейсных иконок в svg и png формате. В наборе имеются все исходники иконок для разных редакторов.
Photopea — это продвинутый, бесплатный онлайн редактор изображений. С его помощью можно открывать файлы PSD/Sketch/XCF и редактировать прямо в браузере. Поддерживает практически все форматы изображений.
#Инструменты
Расширенная статистика в Яндекс.Вебмастере

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

<meta http-equiv="Refresh" content="10" />

Вставлять между тегами <head></head>
10 – это число, обозначающее время, через которое должна автоматически обновиться веб-страница (в секундах).
PSD макет "Интерфейс приложения"

Красивый, стильный дизайн панели управления для web приложения. Сложные элементы управления, для тех, кто хочет прокачать свой опыт в верстке.
#PSD
4 апреля отмечается неофициальный профессиональный праздник — День веб-мастера (или Вебмастера). Дата этого праздника выбрана неслучайно: дата 4.04 очень напоминают по своему написанию ошибку 404 ("Страница не найдена"), имеющую прямое отношение к работе веб-мастеров.
Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя готовые HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения
Коротко о новых плагинах для Figma

Статья для тех, кто не только копается в коде, но и прикладывает усилие для качественного создания web-интерфейсов

AutoGrid — Поддержка сетки для AutoLayout.
Tracking – Плагин для создания аннотаций отслеживания.
Find and Replace Colors – Организация цветовых стилей в ваших дизайнах
Spacing Manager – Плагин для согласованных отступов в компонентах
Geometric – Создание математических фигур и кривых
Halftones – Плагин, позволяющий накладывать точечный или полутоновый фильтры на картинки
Batch Styler – Изменение нескольких стилей текста одновременно
Spell Inspector — Поиск и исправление орфографических ошибок
Sitemap – Плагин для создания карты вашего сайта
Style Organizer — Показывает и упорядочивает все цветовые стили
Focus CSS — Более удобное использование CSS в Figma
Flipbook – Плагин для анимации ваших дизайнов в Figma
SwiftUI Inspector – Плагин для улучшения рабочего процесса разработки для платформ Apple
Filter – Фильтрующий плагин для ретуши ваших изображений
COVID-19 API - программный интерфейс приложения, который отобразит данные о коронавирусе на вашем ресурсе. Показывает сколько заразилось, выздоровело, умерло.
#JS #jQuery
5 видеоплееров с открытым исходным кодом для вашего сайта

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

1. Video.js
2. Shaka Player
3. Plyr
4. MediaElement.js
5. Flowplayer

Более подробнее можете ознакомиться о каждом веб-плеере по ссылке 👇
5 трендов UI/UX-дизайна в 2020 году

Сегодня почти каждый, кто работает с ПК слышал о UI/UX-дизайне. Напомним, разница между UX и UI — в том, что UX-дизайнер планирует, как пользователь будет взаимодействовать с интерфейсом, какие шаги ему нужно предпринять, чтобы достичь цели. А UI-дизайнер продумывает, как будут выглядеть эти шаги и путь к цели в целом.

Большинство трендов 2020 года уже так или иначе встречались в 2019 году. Поговорим о них и о совершенно новых тенденциях в дизайне, которые будут нас радовать в ближайшее время.
#Статьи
Руководство по поисковому продвижению для начинающих

Сегодня поговорим о том, как привлечь посетителей на сайт, чтобы его показатели начали расти. Многие, после запуска сайта, не знают с чего начинается поисковое продвижение. Возможно, эта статья поможет тебе в этом не легком деле.
#SEO
Howler.js - Аудио библиотека для современного интернета.

Howler.js делает работу со звуком в JavaScript простой и надежной на всех платформах. Позволяет создавать на Вашем проекте плееры различной сложности - от обычного аудио плеера, до живого радио.
#JS
PSD Макет 404 ошибки

Качественный макет для заглушки 404 ошибки. Креативный подход для стилизации такой страницы. Забираем себе в копилку!
Типогра́фика — искусство оформления печатного текста, базирующееся на определённых, присущих конкретному языку правилах, посредством набора и вёрстки.

Подборка из 5 крутых примеров типографики на реальных проектах

1. https://bepatrickdavid.com/
2. https://kulbachny.com/
3. https://www.petas.it/
4. http://cafelapetitereine.ch/carte.html
5. https://www.jomor.design/
7 апреля состоялся релиз Chrome 81

В этой версии улучшена поддержка WebXR (действующий стандарт виртуальной и дополненной реальности в Интернете) и поддержка стандарта Web NFC в тестовом режиме. А вот от ряда новшеств, запланированных для Chrome 81, пришлось отказаться. Так, обновление пользовательского интерфейса отложили из-за того, что разработчики Google не успели вовремя внести последние штрихи в новый дизайн. Отменили и отказ от поддержки протоколов шифрования TLS 1.0 и TLS 1.1 из Chrome. Все эти изменения будут реализованы в следующих обновлениях Chrome.

Компания решила пропустить Chrome 82 и после Chrome 81 сразу перейти к Chrome 83. Следующая версия браузера ориентировочно будет выпущена в середине мая, то есть на три недели раньше, чем планировалось изначально.
IcoFont - шрифтовые иконки для сайта

Отличный сервис для реализации шрифтовых иконок на своем сайте. На сайте вы можете выбрать более 2100 иконок, которые разбиты на категории, что делает поиск еще более удобным. Всего собрана 31 категория.

Как их подключить на сайт:
1. Перейти на сайт и скачать саму библиотеку иконок по кнопке "Download"
2. Добавьте перед закрывающим тегом </head>

<link rel="stylesheet" href="myProjects/webProject/icofont/css/icofont.min.css">

3. Выбираем иконку на самом сервисе и вставляем ее в нужное место на сайте

<i class="icofont-brand-adidas"></i>