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
Checkbot - протестируйте SEO / скорость / безопасность 100 страниц в один клик! Проверьте неработающие ссылки, HTML / JavaScript / CSS, перенаправления URL-адресов, повторяющиеся заголовки...

#расширения #сhrome
Как в HTML сформировать ссылку-якорь в атрибуте href?
Anonymous Quiz
14%
anchor
3%
$anchor
6%
&anchor
74%
#anchor
2%
*anchor
2%
~anchor
🔥 Лучшее на канале за последнюю неделю

1) CSS Image Effect - отличная реализация ховер-эффектов для изображений с применением clip-path.
2) Honeycomb - это настраиваемая, в первую очередь мобильная, гибкая среда scss для создания веб-сайтов и веб-приложений, которые корректно реагируют на экран любого размера. 
3) Checkbot - протестируйте SEO / скорость / безопасность 100 страниц в один клик
4) Ikonate - отличный пак настраиваемых векторных иконок для вашего проекта. 
5) Книга - Функциональное программирование на JavaScript. Как улучшить код JavaScript-программ.

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

#Лучшее
Визуализация промисов и Async/Await.

Хорошая статья, которая помогает детально разобраться с промисами и Async/Awai. Промисы были представлены в ES6 и заняли важную часть в повседневной разработке.

#статьи #javascript
CSSeffects Snippets – замечательная коллекция CSS-эффектов (анимация, текст, кнопки), выполненная с помощью Vue.js.

#vue
This media is not supported in your browser
VIEW IN TELEGRAM
Magnetic button animation - интересная реализация ховер эффекта для кнопок. Забираем в копилку интересных вещей

#javascript #css
Visiwig - набор качественных svg и шрифтовых иконок для интерфейсов, а так же набор бесшовных фонов для сайта на одном ресурсе.

#графика
Jest-dom - библиотека для написания тестов, которые подтверждают различные вещи о состоянии DOM. Вы сможете избежать всех повторяющихся шаблонов, которые при этом возникают, проверяя атрибуты элемента, его текстовое содержимое, его классы css, вы называете его.

#javascript
InVision — это облачный сервис для быстрого преобразования веб и мобильных дизайнов в кликабельные прототипы и мокапы с интерактивными элементы для последующего их расшаривания и совместной работы.

Возможности InVision:
- Загрузка своих проектов и добавление горячих точек.
- Жесты, переходы и анимации.
- Презентации в режиме реального времени дизайн.
- Совместная работа.
- Инструменты белой доски.
- Бесшовная коммуникация, в том числе комментирование.
- Управление дизайн-проектами.
- Контроль версий и синхронизация с помощью InVision Sync или Dropbox.
- Бэкапы.
- 128 -битное SSL-шифрование.

#инструменты
Halfmoon - это отзывчивая интерфейсная среда, которая отлично подходит для создания информационных панелей и инструментов. Встроенный темный режим, полная настраиваемость с использованием переменных CSS (около 1500 переменных), дополнительная библиотека JavaScript (без jQuery), классы, подобные Bootstrap, и кросс-браузерная совместимость (включая IE11).

#html #css #framework
Video.js - это веб-видеопроигрыватель, созданный с нуля для мира HTML5. Он поддерживает видео HTML5 и современные форматы потоковой передачи, а также YouTube, Vimeo.

Он поддерживает воспроизведение видео на настольных и мобильных устройствах. Проект был запущен в середине 2010 года, в настоящее время он насчитывает сотни участников и используется на более чем 450 000 веб-сайтов.

#javascript
Layout Templates with CSS Grid.

Для тех, кто только начал изучение технологии Grid CSS - можете ознакомиться с некоторыми примерами расположения элементов в сетке.

#css
Koding - онлайн инструмент с открытым исходным кодом, который предоставляет разработчикам и менеджерам команд интерфейс для оптимизации рабочих процессов разработки в облаке без ограничения свободы и творчества. Тратьте меньше времени на настройку и больше на создание!

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


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

1) Визуализация промисов и Async/Await.
2) CSSeffects Snippets – замечательная коллекция CSS-эффектов (анимация, текст, кнопки), выполненная с помощью Vue.js.
3) Video.js - это веб-видеопроигрыватель, созданный с нуля для мира HTML5.
4) Layout Templates with CSS Grid - примерами расположения элементов в сетке.
5) Visiwig - набор качественных svg и шрифтовых иконок для интерфейсов, а так же набор бесшовных фонов для сайта на одном ресурсе.

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

#Лучшее
Вёрстка - это просто, если...

Автор ютуб-канала "Просто: разработка" - Виталий Киренков, рассказывает о 10 главных навыках, которыми должен обладать верстальщик.

#html #css
Какое из свойств CSS сработает на установление фона в виде картинки?
Anonymous Quiz
7%
background: image('image.svg')
58%
background: url('image.svg')
32%
background-image: ('image.svg')
1%
background-url: ('image.svg')
2%
background-url: image('image.svg')
Hexo - быстрый, простой и мощный фреймворк для блогов.

Основные особенности:
- Невероятная скорость генерации благодаря Node.js. Создание сотен файлов занимает всего несколько секунд.
- Вам нужна только одна команда для развертывания вашего сайта на GitHub Pages, Heroku или других платформах.
- Поддерживаются все функции GitHub Flavored Markdown, включая большинство плагинов Octopress.
- Предлагает мощные API-интерфейсы для безграничной расширяемости. Доступны различные плагины для поддержки большинства движков шаблонов (EJS, Pug, Nunjucks и многих других).

#node
vscode-icons - это расширение очень простое, но очень крутое, потому что делает ваш VS Code более красивым с огромным списком значков для разных форматов файлов. Замечательной функцией этого расширения является то, что папки могут изменять значки в соответствии с именем, эта функция может быть очень полезной для более быстрого поиска файлов.

#расширения #vscode
10 команд curl, которые вам следует знать.

Команда Mail.ru Cloud Solutions перевела статью, автор которой составил краткий справочник часто используемых команд curl для протоколов HTTP/HTTPS. Это не замена официального руководства по cURL, скорее, краткий конспект.

#статьи
Snowpack - это молниеносный инструмент для сборки интерфейса, созданный для современной разработки. Это альтернатива более тяжелым и сложным пакетам, таким как webpack или Parcel. 

Snowpack использует собственную модульную систему JavaScript (известную как ESM), чтобы избежать ненужной работы и работать быстрее, независимо от того, насколько большой ваш проект.

#инструменты
This media is not supported in your browser
VIEW IN TELEGRAM
CSS filter Editor - реализация фильтра на JS по наложению CSS эффектов на изображение. на борту большое кол-во различных эффектов.

#css #javascript