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
SVGminify - этот инструмент удаляет ​​лишнюю информацию у файлов SVG, тем самым уменьшая размер ваших изображений.

Редакторы векторной графики, такие как Adobe Illustrator или Inkscape, встраивают в экспортированный файл SVG много информации, которая не требуется для презентации.

#инструменты
Buefy — легковесная библиотека UI-компонентов для Vue, созданная на базе Bulma (CSS-фреймворк). Она комбинирует Bulma с Vue, помогая создавать прекрасно выглядящие приложения с минимальным количеством кода.

#vue
Turbo CSS - это язык CSS более высокого уровня . Имена классов компилируются так же, как исходный код JavaScript. Служебные функции, такие как w in w-16 , действительно являются функциями, принимающими аргументы. CSS фактически создается путем вызова этих служебных функций и передачи им предоставленных аргументов.

Turbo CSS использует ориентированный на мобильные устройства подход к адаптивному дизайну.

Пример кода:
<div class="t1 w-full flex flex-col w6:flex-row w6:flex-end-center p-16 bg-c-white">
  <button class="t1 u1.btn u1.btn-m u1.btn-action-3 mb-8 w6:mb-0 w6:mr-8">Tertiary</button>
  <button class="t1 u1.btn u1.btn-m u1.btn-action-2 mb-8 w6:mb-0 w6:mr-8">Secondary</button>
  <button class="t1 u1.btn u1.btn-m u1.btn-action">Primary</button>
</div>

#css
Запись экрана 2021-07-24 в 16.56.21.mov
5 MB
Facet - позволяет редактировать изображения с учетом содержимого прямо в вашем браузере.

Facet понимает, как маскировать все, от одежды, волос и оттенков кожи до текстур и диапазонов яркости в четверть тона, позволяя вам сосредоточиться на общих концепциях изображения, а не на редактировании на уровне пикселей.

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

#графика
PageMap - мини-карта для веб-страниц. Вы можете создать краткий вид сайта возле скролла. Библиотека похожа на карту как в IDE или редакторах кода.

#javascript
Cirrus.CSS - полностью отзывчивая и всеобъемлющая структура SCSS с красивыми элементами управления и упрощенной структурой. Интегрируйте его с любым существующим дизайном или используйте его, чтобы начать свой следующий проект.

#css
NodeGui - создавайте производительные, нативные, кроссплатформенные настольные приложения для Windows, macOS и Linux с помощью JavaScript и CSS.

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

#javasript #css
Gradien Stroke - реализация обводки с градиентом. Кажется ничего особенного, но уверен, мало кто знает как это делать. Забираем в коллекцию!

#codepen #css
Size Limit - это инструмент определения производительности для JavaScript. Он проверяет каждую фиксацию на CI, вычисляет реальный размер вашего JS для конечных пользователей и выдает ошибку, если размер превышает лимит.

#javascript #инструменты
Автор статьи рассказывает о том, как организовать поиск по веб-странице на JavaScript без каких-либо зависимостей. А мы - берем и пользуемся готовым решением!

#javascript #статьи
Auto Close Tag - расширение для VS Code, которое упрощает разработку автоматически добавляя закрывающий тег HTML / XML.

#расширения #vscode
В CSS существует множество единиц измерения. Обычно мы используем единицы размеров, но также есть единицы для углов — например, deg и turn, единицы времени — s и ms, единицы плотности экрана — например, dpi и dppx и другие.

Здесь будут рассматриваться только единицы размеров, которыми мы пользуемся чаще всего.

#статьи #css
Layzr.js - небольшая, быстрая и современная библиотека для отложенной загрузки изображений. Layzr был разработан с учетом современного рабочего процесса JavaScript.

#javascript
cdnjs - бесплатная CDN с открытым исходным кодом, созданная для облегчения жизни разработчиков, обслуживающих более 12,5% всех веб-сайтов, работающих на Cloudflare.

#полезное
Eleventy (11ty) - более простой генератор статических сайтов. Написано на JavaScript. Преобразует каталог шаблонов (разных типов) в HTML.

Работает с HTML, Markdown, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug и шаблонными литералами JavaScript.

#cms
Автор: Эрик Хэнчетт, Бенджамин Листоун
О книге: 2019 год, 304 страницы, Русский язык, 42.92Mb

Vue.js – это популярная библиотека для создания пользовательских интерфейсов. В ней значительно переосмыслены реактивные идеи, впервые появившиеся в React.js.

Книга «Vue.js в действии» рассказывает о создании быстрых и эластичных пользовательских интерфейсов для Интернета. Освоив ее, вы напишете полноценное приложение для интернет-магазина, где будут присутствовать списки товаров, админка, а также организован полноценный процесс онлайнового заказа.

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

#javascript
Почему стоит использовать тег <picture> вместо <img>

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

Выбор между тегами picture и img может показаться мелким решением, но сделав правильный выбор, вы сможете повысить и удобство для пользователя, и производительность.

#статьи
CSS Wand - онлайн-инструмент CSS с открытым исходным кодом, который ускоряет разработку и предоставляет небольшой интерфейс кнопок и прелоадеров.

#css #html