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
Rockpack - это простое решение для создания приложения React с рендерингом на стороне сервера, сборкой, линтингом, тестированием, ведением журнала, локализацией.

Основная цель Rockpack - сократить время настройки проекта до 5 минут.

#react
Indenticator - это расширение для VS Code, которое визуально выделяет текущую целевую глубину. Это позволяет легко различать разные уровни разных блоков кодов. Глубина отмечена маленькими точками и линиями.

#расширения #vscode
🔥 Лучшее на канале за последнюю неделю

1) HTML DOM - крутая шпаргалка по JavaScript c подробным пояснением для тех, кто работает в основном c DOM.
2) Шпаргалка по БЭМ - классное объяснение как работать с CSS-препроцессорами и БЭМ. 
3) StackBlitz - это онлайн-среда разработки, в которой вы можете создавать проекты Angular, React, Vue, Svelte
4) Davur - HTML шаблон панели администратора для заказа еды в ресторане, кафе, интернет-магазинах. 
5) Unicons — коллекция из более чем 3300 векторных иконок в трех начертаниях для Вашего проекта.

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

#Лучшее
JSHint — гибкий инструмент, развивающийся сообществом, для обнаружения ошибок и потенциальных проблем в вашем JS-коде.

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

#инструменты
Sortable - это библиотека JavaScript для переупорядочиваемых перетаскиваемых списков.

Основные особенности
- Поддерживает сенсорные устройства и современные браузеры (включая IE9).
- Можно перетаскивать из одного списка в другой или внутри того же списка.
- CSS-анимация при перемещении элементов.
- Умная автопрокрутка.
- Плавная анимация.
- Поддержка множественного перетаскивания.
- Поддержка преобразований CSS.
- Создан с использованием собственного API перетаскивания HTML5.
- Поддерживает любую библиотеку CSS, например Bootstrap.

#javascript
📖 Как создать сайт. Комикс-путеводитель по HTML, CSS и WordPress

Автор: Нейт Купер
О книге: 2019 год, 266 страниц, Русский язык, 32.0Mb

Содержание: В книге — шесть глав. Каждая из них раскрывает одну тему — что нужно для начала работы, базовые HTML-теги, настройка и подключение СSS, работа с WordPress, выбор хостинга и запуск сайта.

#книги
This media is not supported in your browser
VIEW IN TELEGRAM
Sense of depth - непростая реализация вращающегося текста внутри изображения на чистом CSS при помощи свойства clip-path.

#html #css
Animated Illustrations — коллекция анимированных иллюстраций. Выберите понравившуюся иллюстрацию, выберите формат (видео или json) и разместите ее на своем веб-сайте, приложении, в социальной публикации или презентации.

#графика
Фича 5. Свойство font-style: oblique

Практически каждый раз, когда вы видите свойство font-style, оно используется в значении «normal» или «italic». Но оно также можете иметь значение «oblique».

Слово «oblique» типографский термин и представляет собой наклонный шрифт, но это не курсив.
В связи с тем, как CSS обрабатывает наклонный шрифт, он может быть взаимозаменяем с курсивом, если используемый шрифт не имеет наклонного типа.

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

Пример на Codepen

#фичи #css
Umami - это простая и быстрая альтернатива Google Analytics с открытым исходным кодом для веб-аналитики.

Umami выдаёт статистику по просмотрам всех конкретных страниц, по браузерам, ОС, рефереррам, устройствам и странам. Показано количество посетителей и просмотров, девайсы и среднее время визита за сутки, неделю, месяц.

#инструменты
ImpactJS - это игровой движок JavaScript, ориентированный в основном на разработку 2D-игр. При этом есть плагины, которые вы можете добавить в Impact для имитации трехмерной среды.

Движок поставляется с несколькими добавленными инструментами, такими как редактор уровней для любой игры 2D-типа, мощными инструментами отладки и очень интересной платформой для публикации под названием Ejecta , которая позволяет публиковать данные в iPhone AppStore.

#javascript
Какое свойство в CSS Grid отвечает за одинаковое пространство между элементами вдоль оси строки?
Anonymous Quiz
9%
flex-direction: row
10%
align-items: center
4%
float: align-border
64%
justify-content: space-around
13%
location: divide-equally
Ubuntu Web Remix — альтернатива Chrome OS.

Ubuntu Web Remix. Его начали разрабатывать в начале лета, а сейчас он доступен для загрузки. Основа дистрибутива — Ubuntu. Но разработчик постарался следовать минимализму Chrome OS, упростив интерфейс оригинальной операционной системы. Вместо Google Chrome здесь используется браузер Firefox, несколько веб-приложений из /e/, плюс Anbox, инструмент, который дает возможность запускать Android-приложения на Linux.

Дистрибутив дает возможность установить практически любое приложение для Ubuntu при помощи apt-get, но вот Ubuntu Software Center в этой ОС нет. Вместо этого используется линк на “Open Web Store”, размещенный в таскабре. При клике по ярлыку пользователь попадает на сат, где можно найти набор приложений на все случаи жизни. После загрузки и установки они отображаются в списке приложений ОС.

Для работы каждого из эти веб-приложений используется браузер Firefox. Каждое новое запущенное приложение открывается в новой вкладке.

#инструменты
Quasar - это фреймворк на основе Vue.js с открытым исходным кодом, который позволяет вам как веб-разработчику быстро создавать адаптивные веб-сайты / приложения.

Quasar никак не ограничивает возможности Vue, в нём нет навязанных паттернов и он не тянет за собой тонны зависимостей, по крайней мере поначалу — по умолчанию модули устанавливаются по мере необходимости, но при желании можно загрузить всё и сразу.

При помощи Quasar можно создавать:
- SPA (одностраничное приложение)
- SSR (серверное приложение с рендерингом) (+ необязательная подмена клиента PWA)
- PWA (прогрессивное веб-приложение)
- BEX (расширение для браузера)
- Мобильные приложения (Android, iOS,…) через Cordova или Capacitor
- Многоплатформенные настольные приложения (с использованием Electron)

#vue
Ресурсы для обучения или закрепления знаний по CSS.

1) CSS и CSS3. Свойства для форматирования HTML элементов — Html5Book;
2) Cascading Style Sheets (CSS) — Mozilla (MDN);
3) Справочник по CSS — Webref;
4) Инструменты разработчика Chrome DevTools для просмотра стилей;
5) Вёрстка на Flexbox в CSS. Полный справочник (перевод и оригинал на CSS Tricks);
6) БЭМ Методология;
7) БЭМ для начинающих. Очевидные и неочевидные вопросы верстки.

#css
SlashData опубликовала результаты исследований языков программирования с самым большим сообществом.

Рейтинг:
— JavaScript (12.4 млн разработчиков)
— Python (9.0 млн разработчиков)
— Java (8.2 млн разработчиков)
— C/C++ (6.3 млн разработчиков)
— PHP (6.1 млн разработчиков)
— C# (6.0 млн разработчиков)
— Swift (2.4 млн разработчиков)
— Kotlin (2.3 млн разработчиков)
— Go (1.5 млн разработчиков)
— Ruby (1.5 млн разработчиков)

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

1) Ресурсы для обучения или закрепления знаний по CSS.
2) Книга "Как создать сайт. Комикс-путеводитель по HTML, CSS и WordPress".
3) Animated Illustrations — коллекция анимированных иллюстраций.
4) Sortable - это библиотека JavaScript для переупорядочиваемых перетаскиваемых списков.
5) Umami - это простая и быстрая альтернатива Google Analytics с открытым исходным кодом для веб-аналитики.

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

#Лучшее
This media is not supported in your browser
VIEW IN TELEGRAM
Profile Card Hover Effect - простая, но интересная реализация отображения информации профиля в виде карточек на чистом CSS.

#html #css
Fluid Framework - это набор клиентских библиотек от Microsoft для распределения и синхронизации общего состояния. Эти библиотеки позволяют нескольким клиентам одновременно создавать и работать с общими структурами данных, используя шаблоны кодирования, аналогичные темы, которые используются для работы с локальными данными.

#typescript
PDF Converter - полезный сервис по работе с PDF материалами. Его главное преимущество в том, что он может работать с большими файлами, больше 100мб. Сжимает и объединяет большое количество файлов.

#инструменты
Code Spell Checker - базовая проверка орфографии, которая хорошо работает с кодом camelCase.
Цель этого средства проверки правописания - помочь выявить распространенные орфографические ошибки, сохраняя при этом низкое количество ложных срабатываний.

#vscode #расширения