CodeRoll | Frontend
4.98K subscribers
1.6K photos
73 videos
1 file
913 links
— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.me/coderoll_chat

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
Генератор неонового текста для CSS и HTML

Есть функции копирования исходного кода, настройки свечения и использования иконок FontAwsome. А так же можете развернуть проект у себя на сервере.

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

1) Plyr — красивый, простой и легко настраиваемый js плеер, который поддерживают все современные браузеры. 
2) Tarly - универсальный HTML-шаблон лендинга.
3) Курс по созданию HTML5 игр с помощью Phaser 3 и JavaScript.
4) Phosphor — коллекция из 558 бесплатных иконок в 6 начертаниях для интерфейсов
5) eCSStractor - замечательное расширение для VS Code, которое извлекает список селекторов из разметки

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

#Лучшее
Pygame — это модуль-обертка для мультимедийной библиотеки SDL. Simple DirectMedia Layer представляет собой кроссплатформенную библиотеку разработки, которая дает низкоуровневый доступ к: аудио, клавиатуре, мыши, джойстику, графическим аппаратным средствам через OpenGL и Direct3D.

Pygame портативен и запускается практически на всех платформах и операционных системах. Несмотря на то, что Pygame — это, в первую очередь, игровой движок, он вполне сгодится для простого воспроизведения mp3-файлов из Python-скриптов.

#Python
HTML DOM - крутая шпаргалка по JavaScript c подробным пояснением для тех, кто работает в основном c DOM частью на проекте.

#javascript
StackBlitz - это онлайн-среда разработки, в которой вы можете создавать проекты Angular, React, Vue, Svelte, которые сразу же становятся онлайн и доступны по ссылке… всего одним щелчком мыши.  Он автоматически заботится об установке зависимостей, компиляции, объединении и быстрой перезагрузке по мере ввода данных.

#инструменты
Подборка курсов с Udemy, на которые сейчас проходят акции и в ограниченный срок Вы можете их забрать себе и изучать в дальнейшем!

1) Python для начинающих: введение в Python.
2) Курс Adobe Premiere Pro CC - от начального до продвинутого.
3) Стек PERN. Создайте клон Yelp - Postgres, Express, React, Node.

#Курсы
Davur - HTML шаблон панели администратора для заказа еды в ресторане, кафе, интернет-магазинах . 

Комплектация: 
- HTML файлы,
- файлы jQuery и jаvascript,
- CSS и файлы Sass,
- документация.

#шаблоны
Шпаргалка по БЭМ. Классное объяснение как работать с CSS-препроцессорами и БЭМ. Список рекомендаций по неусложнению жизни себе и другим участникам проекта по вёрстке.

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

#html #css
Protractor — это сквозной тестовый фреймворк, написанный на Node.js для тестирования приложений на AngularJS и Angular. Он был создан на основе WebDriverJS и проверяет приложения подобно конечному пользователю, используя специальные драйвера и встроенные события.

#angular
Google Chrome начнет блокировать JavaScript-редирект по кликам на ссылки.

Атрибут target=«blank» дает команду браузеру открывать ссылку в новой вкладке при клике. У этого атрибута есть известная проблема безопасности, которая позволяет злоумышленникам использовать JavaScript для перенаправления на другой URL. По этому адресу могут находиться фишинговые страницы или те, которые автоматически загружают вредоносы.

Чтобы этого не происходило, в браузер Chrome включили атрибут ссылки HTML rel=«noopener», который не позволяет новой вкладке использовать JavaScript для перенаправления.

Функция уже включена в Chrome Canary и, как ожидается, войдет в Chrome 88 в январе 2021 года.

В 2018 году Apple уже внесла подобное изменение в Safari. Там обрабатываются все ссылки с target="_blank". Если эта функция включена, даже при отсутствии у сайта атрибута rel=«nooopener» в URL-адресах браузер все равно обработает их.

#статьи
Unicons — коллекция из более чем 3300 векторных иконок в трех начертаниях для Вашего проекта. Доступны как иконки в SVG, так и веб-шрифты.

#графика
Swagger — это набор правил и инструментов для описания API. Инструмент представляет собой языково-независимую утилиту. Это значит, что Swagger создаёт чёткую документацию, которая читается одинаково хорошо как человеком, так и машиной, позволяя автоматизировать процессы зависящие от API.

#инструменты
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