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
The Icon of - коллекция из 1100+ отличных иконок, подходящих для любого проекта. Все иконки доступны в самых популярных форматах, включая оптимизированный веб-шрифт.

#Графика
Ungit решает все эти задачи с помощью интуитивно понятного графического интерфейса для управления Git-репозиториями. Он представляет ваш репозиторий как паутину коммитов и ветвей.

Основные особенности:
- Чистый и интуитивно понятный интерфейс для Git (что есть невероятно круто для освоения Git)
- Работает на любой платформе с установленными Node.js и самим Git
- Веб-ориентированный. Возможность запускать его в облаке.

#Инструменты
Метод утенка - метод решения проблем.

Этот метод построен на том, что, переводя разбросанные в голове мысли в упорядоченную речь, мы упорядочиваем и имеющуюся информацию. Это позволяет выделить главное, расставить приоритеты, понять, чего не хватает для того, чтобы сделать выбор или принять решение.

Шаг первый – ставим перед собой желтого резинового утенка (да-да, ту саму игрушку для ванной) или мысленно представляем себе такового. 

Шаг второй – объясняем ему свою проблему или задаем интересующий вопрос (во всех подробностях!). Делать это можно устно или мысленно (как правило, если ситуация позволяет, то лучше устно). В процессе этих рассуждений и должно прийти оптимальное решение или искомый ответ. Часто бывает даже так, что они буквально лежат на поверхности, и вы сразу увидите их, как только вы начнете формулировать свой вопрос утенку.

#Советы
🔥 Лучшее на канале за последнюю неделю

1) Переходим на темный режим
2) Git How To — это интерактивный тур, который познакомит вас с основами Git.
3) Идеи для проектов на JavaScript для начинающих.
4) Animation Library - библиотека анимации на чистом CSS
5) Landrick - отличный HTML-шаблон для множества тематик

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

#Лучшее
Live Server - расширение для Visual Studio Code, которое позволяет запускать локальный сервер разработки для тестирования кода. В нем есть функция перезагрузки в режиме реального времени как для статических, так и для динамических веб-страниц.

В этом расширении можно настроить номер порта и браузер по умолчанию, оно поддерживает HTTPS и прокси.

#Расширения #vscode
Paletton - это мощный инструмент для создания цветовых комбинаций и палитр цветов, которые хорошо сочетаются друг с другом. 

Основным преимуществом Paletton является то, что он не использует современное компьютерное и инженерное цветовое пространство RGB, а построен на классическом художественном цветовом круге, применяет классическую теорию цвета и работает в специально созданном цветовом пространстве RYB . 

#Инструменты
Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких

Это обновлённый и переработанный видео-курс Gulp 4, в котором Вы детально разберёте работу с Gulp, ознакомитесь с новыми методами построения задач (тасков), узнаете, какими способами можно установить, настроить Gulp и как с его помощью автоматизировать и ускорить процесс веб-разработки. Знакомство с возможностями инструмента будет на реальном примере и будет создано удобное рабочее окружение для HTML вёрстки от А до Я. 

#Курсы
Выберите правильный ответ ниже. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.
Ответ
Anonymous Quiz
15%
1
9%
9
17%
21
39%
57
20%
125
RegEx 101 - бесплатный отладчик регулярных выражений на основе PCRE для различных языков программирования с объяснением в реальном времени, обнаружением ошибок и выделением.

#Инструменты
Eva Icons - это пакет из более чем 480 красиво оформленных иконок с открытым исходным кодом для пользовательского интерфейса. Кроме того, иконки поддерживают 4 типа анимации: zoompulseshake и  flip

Загрузите на компьютер, чтобы использовать их в своих веб-проектах, iOS и Android. Иконки представлены также в двух визуальных видах: Fill и Outline и в нескольких форматах, в том числе pngsvgfontSketch.

#Графика
Swiper - это самый современный бесплатный мобильный сенсорный слайдер с аппаратным ускорением переходов и потрясающим собственным поведением. Он предназначен для использования на мобильных веб-сайтах, мобильных веб-приложениях и мобильных нативных / гибридных приложениях.

Swiper поддерживает работу с React и Vue.

#JavaScript #React #Vue
Editor X — новый веб-конструктор, который включает в себе передовые технологии для верстки и прототипирования Вашего проекта.

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

Пример кода:

class {
onCreate() {
this.state = { count:0 };
}
increment() {
this.state.count++;
}
}

<div.count>
${state.count}
</div>
<button.example-button on-click('increment')>
Click me!
</button>

#HTML #JavaScript
Sapiens — большая бесплатная библиотека иллюстраций людей для Вашего проекта с прекрасным инструментом кастомизации любой части тела и экспортом в SVG/PNG.

#Графика
PerfectPixel — расширение для Google Chrome, которое позволяет «наложить» на веб-страницу полупрозрачную сетку и сверять по ней заданные расстояния.

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

👨‍💻 P.S. Всех с днем программиста!

#Расширения #Chrome
Be1 - комплекс инструментов для продвижения сайтов. Среди них есть инструмент «Расширение семантического ядра», который позволяет ввести URL своего сайта, а также до 10 сайтов конкурентов. Инструмент покажет запросы, по которым ранжируются конкуренты. Результат с полученными запросами можно скачать в csv. 

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

1) Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких.
2) Swiper - современный бесплатный мобильный сенсорный слайдер.
3) Eva Icons - это пакет из более чем 480 красиво оформленных иконок с открытым исходным кодом для пользовательского интерфейса.
4) Sapiens — большая бесплатная библиотека иллюстраций людей для Вашего проекта.
5) Editor X — новый веб-конструктор, который включает в себе передовые технологии для верстки и прототипирования.

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

#Лучшее
Идеи для проектов на JavaScript. Часть 2.

1. Приложение для прогноза погоды
При создании этого приложения, помимо обычного набора технологий, используется Dark Sky API — для сбора информации о погоде. Так что это отличная возможность научиться взаимодействовать с API.

2. Поиск книг
Приложение для поиска книги по запросу (название, автор и т. д.). Список книг отображается со всей информацией о них. Можно использовать Google Books API.

3. Карточная игра
Игра на время, в которой после клика по карточке, появляется изображение. Необходимо найти такую же картинку среди других карточек.

4. Список дел
Классическое приложение, где пользователь может записать все мысли, задачи и цели, чтобы не забыть.

5. Тестирование
Игра-тест, в которой можно проверить свои знания, отвечая на вопросы. В конце игры суммируются баллы и можно получать какие либо награды или звания.

#Статьи
This media is not supported in your browser
VIEW IN TELEGRAM
Project Filter Tabs - простая реализация фильтрации контента по вкладкам на HTML и CSS без использования JavaScript.

#HTML #CSS
CSS Values ​​- это простое одностраничное веб-приложение (SPA), которое позволяет искать практически любое свойство CSS и получать простой список возможных значений.

#CSS