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
MetricsGraphics.js - это библиотека, построенная на основе D3, которая оптимизирована для визуализации и размещения данных временных рядов. Она предоставляет простой способ создания общих типов графики принципиальным, последовательным и гибким способом. В настоящее время библиотека поддерживает линейные графики, диаграммы рассеяния, гистограммы и таблицы данных, а также такие функции как базовая линейная регрессия.

#JS
Bulma - это бесплатный CSS-фреймворк с открытым исходным кодом, основанный на Flexbox и используемый более 200 000 разработчиков.

Основные особенности:
- Изначально ориентирован на mobile first
- Модульность. Просто импортируйте то, что вам необходимо
- Построен на Flexbox
- Открытый исходный код
- Простой, легко настраиваемый и не навязывающий реализации Javascript

#Framework #CSS
Давайте знакомиться! Часть 2: Сколько Вам лет?
Anonymous Poll
5%
до 15
20%
16-20
22%
21-25
18%
26-30
35%
>30
Owl Carousel 2 - плагин jQuery с сенсорным управлением на мобильных устройствах, позволяющий создать красивый адаптивный слайдер карусели.

Основные особенности:
- Более 60 вариантов настройки
- Поддержка Touch and Drag
- Полностью адаптивный
- Использует аппаратное ускорение с переходами CSS3 Translate3d
- Поддержка старых браузеров с CSS2
- Модульная структура

#jQuery
Lineicons - сервис с набором крутых шрифтовых иконок, которые подойдут как для веб-проектов так и мобильных проектов. Данный сервис содержит бесплатные иконки, а так же расширенную платную версию.
Patternico - классный и полезный сервис для создания безшовного фонового изображения для Вашего проекта. Вы можете настраивать цвет фона, загружать собственные иконки и собственный backround

#Инструменты
Крутая новость для студентов-разработчиков 🚀
Cтартует онлайн-марафон по разработке от ИТ компании КРОК. За три недели команда участников из 3-5 человек сможет решить реальную бизнес-задачу на Java или .NET
Какую?
💻 Например, создать онлайн-систему решения и проверки задач, in-memory OLAP-куб, инструмент для сбора и оценки метрик по работе с исходным кодом и многие другие. Огонь же? 🔥
Всё это с наставниками - экспертами компании. В рамках марафона пройдут вебинары и код-ревью, на которые можно зарегистрироваться отдельно без участия в решении задачи. 
📍Когда? С 20 июля по 7 августа, но сбор заявок заканчивается уже через неделю. 
📍Что нужно, чтобы присоединиться?
 Подать заявку по ссылке и пройти отбор. Участие совершенно бесплатное.

🛑 Спойлер: участие в марафоне можем оформить студентам как учебную практику (да, её можно пройти онлайн). Знаем, что круто, поэтому скорее переходи по ссылке и подавай заявку.
Помощник в виде шпаргалки с CSS триггерами.

Здесь вы найдёте некоторые свойства CSS и информацию о том, как они влияют на производительность браузерных движков.

Значения разноцветных полосок:
— Layout: перерасчет макета (синий цвет)
— Paint: прорисовка макета (зеленый цвет)
— Composite: компоновка макета (темно-зеленый цвет)
Bliss - небольшая классная библиотека, которая добавляет синтаксический сахар для Vanilla JS схожий на jQuery, делая API гораздо более приятным. В отличие от jQuery, он не влияет на сам API, а просто улучшает синтаксис, оставляя функциональность метода без изменений.

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

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

#Инструменты
🔥 Лучшее на канале за последнюю неделю

1) iziModal.js - современный плагин, который позволит Вам создавать красивые модальные окна.
2) Patternico - классный и полезный сервис для создания безшовного фонового изображения.
3) Siteliner - сервис, который позволяет вам исследовать ваш сайт.
4) Khroma — инструмент, который создает палитры на основе ваших предпочтений.
5) Bulma - это бесплатный CSS-фреймворк, основанный на Flexbox.

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

#Лучшее
Версия 5.0 фреймворка Bootstrap для создания веб-сайтов, ориентированных на мобильные устройства, перешла на стадию альфа-релиза, и этот инструментарий больше не зависит от библиотеки jQuery.

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

#Статьи
Zoomove - это плагин, разработанный с помощью jQuery, который позволяет динамически масштабировать изображения при наведении мыши, а также просматривать детали при перемещении мыши.

Настройка плагина:
1. Подключаем библиотеку

<!-- ZooMove CSS minified -->
<link rel="stylesheet" href="dist/zoomove.min.css">

<!-- jQuery CDN JS minified (must) -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- ZooMove JS minified -->
<script src="dist/zoomove.min.js"></script>

2.Теперь нужно подготовить наши изображения и показать их ZooMove.

<!-- Item image -->
<figure class="zoo-item" data-zoo-image="img/example.jpg"></figure>

<!-- Starting the ZooMove -->
<script>
$('.zoo-item').ZooMove();
</script>

ZooMove совместим с: jQuery 1.7+ в Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, Internet Explorer 9+

#jQuery
Argon Dashboard - бесплатный шаблон на Bootstrap 4.

Панель инструментов Argon состоит из более чем 100 отдельных компонентов, что дает вам свободу выбора и комбинирования. Все компоненты могут иметь разные цвета, которые вы можете легко изменить с помощью файлов SASS.

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

Каждый элемент имеет несколько состояний для цветов, стилей, наведения, фокусировки, к которым вы можете легко получить доступ.

#Шаблоны
Мини-курс по JavaScript ES7-ES9 от WebDev.

В данном цикле лекций будут рассмотрены основные фичи, которые появились в стандартах ES7-ES9 (ECMAScript). Будут разобраны различные методы и нововведения, которые существенно упрощают и ускоряют разработку на нативном jаvascript, как синхронном, так и асинхронном. И в этом мини курсе будут разобраны новые методы, которые были добавлены для массивов.
Что будет выведено в консоли?

Проверь свой ответ в этом посте

На канале Senior Front постоянно выходят задачки на проверку знаний в CSS и JS, интересные статьи:

Кнопка "В начало" на чистом CSS

Объект Set в ES6

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

Подписывайся, качай скиллы 💪
CSS Shrink — полезный инструмент, который умеет делать онлайн-сжатие вашего CSS-кода. Кстати, не только сжатие — можно вставить уродливо отформатированный код и получить на выходе красивый.

#Инструменты
Выберите правильный ответ ниже.
Ответ
Anonymous Quiz
8%
4
7%
6
38%
0
30%
NaN
17%
object6