CodeRoll | Frontend

WhatTheHex - онлайн помощник нейминга. Если у Вас проблемы с неймингом цвета в CSS, то данный сервис помогает с этим, достаточно ввести HEX код или выбрать цвет в палитре и скопировать необходимое имя себе в проект. #Инструменты

Consoleimg — библиотека для отображения изображений в консоли разработчика. Как подключить: 1. Перед закрывающим тегом </body> добавить библиотеку <script src="consoleimg.min.js"></script> 2. Вывод изображения происходит таким образом <script> consoleimg.load('image.jpg', {size: 320, color: '#FFFFFF'}) </script> #JavaScript

🔥 Лучшее на канале за последнюю неделю 1) Креативная реализация формы Авторизации / Регистрации. 2) Hover slider - интересная реализация слайдера. 3) Курс по основам React в одном видео на примерах и практике от Владилена Минина. 4) Clean CSS - очень полезный онлайн-сервис с набором инструментов для работы с HTML, CSS, JSON, JS. 5) Octicons - это набор качественных интерфейсных иконок в формате SVG Всем успешной разработки! #Лучшее

HTMx - мощный инструмент, который позволяет вам получать доступ к AJAX , WebSockets и Server Sent Events напрямую в HTML, используя атрибуты, поэтому вы можете создавать современные пользовательские интерфейсы с простотой и мощью гипертекста Размер htmx всего ~ 7k в min.gz'd, не зависимый, расширяемый и совместимый с IE11. #Инструменты

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

Когда то, мы рассматривали сервисы, которые помогут эффективно и удобно работать с дизайн-макетами. Хочу отметить среди этих сервисов PSDEtch. PSDETCH - это совершенно бесплатный инструмент, является альтернативой Photoshop, чтобы дизайнеры и разработчики работали более тесно и легко. Это позволяет дизайнерам больше сосредоточиться на проектировании, а разработчикам - легко извлекать информацию, необходимую из файлов проекта напрямую. Разработчики могут извлекать слои из файлов дизайна в другой формат (jpg, png, svg и т.д.), получать измерения слоев или получать информацию CSS для некоторых конкретных слоев. #Инструменты

Nim — язык программирования со статической типизацией, поддерживающий процедурный, объектно-ориентированный, функциональный и обобщённый стили программирования. По утверждению разработчиков, сочетает мощь Лиспа, простоту и понятность Python и высокую производительность Си. Основные особенности: - Управление памятью в Nim детерминировано и настраивается с помощью деструкторов и семантики перемещения, вдохновленных C ++ и Rust. Он хорошо подходит для встраиваемых систем реального времени. - Современные концепции, такие как итераторы с нулевыми издержками и оценка пользовательских функций во время компиляции приводят к чрезвычайно производительному коду. - Поддержка различных бэкэндов: он компилируется в C, C ++ или JavaScript, так что Nim может использоваться для всех нужд бэкэнда и внешнего интерфейса. - У Nim есть мощная система макросов, которая позволяет напрямую манипулировать AST, предлагая практически неограниченные возможности.

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

Hover slider - интересная реализация слайдера. При наведении на заголовки меняются фоновые изображения а так же выводится порядковый номер текущего слайдера. #HTML #CSS #JavaScript

Warp SVG Online — онлайн инструмент позволяет устанавливать нужную сетку и быстро деформировать SVG файл, что упрощает работу с графикой. #Инструменты

Clean CSS - очень полезный онлайн-сервис с набором инструментов для работы с HTML, CSS, JSON, JS. Вы сможете форматировать, минимизировать, конвертировать свой код. #Инструменты

Anima for Figma - крутой инструмент для экспорта вашего дизайна Figma в HTML/CSS код. Теперь работать с макетами стало еще проще. #Инструменты

Курс по основам React в одном видео на примерах и практике от Владилена Минина. React — jаvascript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов. React разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций. #Курсы

Креативная реализация формы Авторизации / Регистрации. При нажатии на чекбокс, меняется сторона формы. Такой вид анимации позволит сэкономить место на Вашем веб-проекте, а также приятно удивит ценителей качественных интерфейсов. Форма сделана на Bootstrap 4. #HTML #CSS

Octicons - это набор качественных интерфейсных иконок в формате SVG, созданных GitHub'ом для GitHub :) #Иконки

OGL - это небольшая, эффективная библиотека WebGL, предназначенная для разработчиков, которым нравятся минимальные уровни абстракции и которым удобно создавать свои собственные шейдеры. Написанный в модулях es6 с нулевыми зависимостями, API имеет много общего с ThreeJS. В своем дизайне библиотека выполняет минимально необходимую абстракцию, поэтому разработчики должны чувствовать себя комфортно, используя ее в сочетании с собственными командами WebGL. #JavaScript

🔥 Лучшее на канале за последнюю неделю 1) Quickly — бесплатный онлайн инструмент для генерации совершенно разных векторных фигур. 2) Cursors CheatSheet - шпаргалка с демонстрацией различного состояния курсора. 3) Denzel. - HTML шаблон персональной страницы. 4) CSS Tooltip Magic - классная реализация всплывающих подсказок (tooltip). 5) Базовый видео курс по Git от Devcolibri. Всем успешной разработки! Ваш CodeRoll | Web & Design #Лучшее

W3C Validator - сервис для проверки таблиц каскадных стилей (CSS) и документов (X)HTML с таблицами стилей. Данный инструмент не только сравнивает таблицы стилей со спецификациями и помогает обнаружить ошибки, опечатки, неправильное использование CSS, но и сообщает о риске возникновения проблем с доступностью контента. W3C обладает интерфейсом SOAP (RESTful API), с помощью которого достаточно легко использовать его в приложениях. #Инструменты