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
Принцип DRY (Don't Repeat Yourself) – означает лишь, НЕ ПОВТОРЯЙТЕСЬ.
Старайтесь избегать в коде повторения каких-то блоков кода. Так как при дальнейшей разработке, когда нужно будет внести изменение – может оказаться сложным искать в разных частях программы то, что нужно поменять. Выносите повторяющиеся блоки кода в отдельные методы.

Особенности принципа «DRY»:
- Появляется модульная архитектура;
- Отличная поддержка проекта, его развитие;
- Высокое качество кода;
- Упрощается тестирование;
- Скорость разработки.

Но учитывайте то, что какой то из модулей/секций может быть в дальнейшем изменен!

Пример кода на CSS без DRY
.block1 {color: #fff; padding: 15px; margin: 15px}
.block2 {color: #fff; padding: 15px; margin: 15px}

Пример кода на CSS c DRY
.block1, .block2 {color: #fff; padding: 15px; margin: 15px}

Согласитесь, выглядит намного читабельнее и элегантнее.
Выберите правильный ответ ниже. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.
Gitexplorer - полезный сервис для тех, кто не освоился достаточно комфортно с командами гита.

Выбираете в выпадающем списке последовательно, что хотите сделать. Вам выводится пример использования в консоли с комментариями.

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

1) Trianglify - интересный онлайн инструмент для создания простых геометрических фонов для Вашего проекта.
2) Интересная и красивая реализация карусели с использованием HTML, CSS и JS.
3) Статья о навыках первоклассного верстальщика в 2020 году.
4) Three Dots - набор загрузочных анимаций CSS, созданных из трех точек, которые создаются одним элементом.
5) Хороший видео-курс по Webpack.

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

#Лучшее
Плавная прокрутка "Наверх" на чистом CSS.

Современные проекты очень часто используют кнопку "Наверх" для удобного пользования интерфейсом. Ведь это ускоряет взаимодействие с проектом в целом. Изначально такие кнопки многие делали на jQuery, но технологии не стоят на месте и можно сделать такую реализацию на чистом CSS без использования JS и каких либо библиотек.

#HTML #CSS
Griddy - полезный и удобный онлайн инструмент для автоматического создания grid-сеток с получением исходного кода. Пригодится, если Вам по быстрому необходимо набросать каркас для верстки, а также, если только начали изучать технологию Grid.

#Инструменты
Знакомство с JаvaScript.

Это бесплатный мини-курс от CodeDojo, в котором Вы узнаете основы языка jаvascript. В процессе этого курса Вы напишите простую программу, научитесь разбираться в циклах, переменных и условных конструкторах, поймете как работают функции, а также сделаете свой первый рефакторинг кода.

#Курсы
Vikinger v1.2.3 - HTML шаблон сообщества и маркетплейса

Vikinger - это набор из множества страниц, в котром есть различные пост-обновления, ящики с бейджами, о ящиках, календари, ящики с товарами, медиа, квесты, инфографика, потоки, обсуждения, посты в блогах и многое другое! Полная страница профиля с элегантным дизайном и слайдером для более удобного доступа ко всем разделам профиля. Внутри профиля вы найдете следующие разделы: друзья, группы, фотографии, видео, значки, посты, обсуждения и магазин.

#Шаблоны
NPkill - этот полезный инструмент позволяет вам найти любые устаревшие каталоги node_modules в вашей системе, которые Вы можете легко удалить.

Основные особенности:
- Избавьтесь от старых и ненужных node_modules, загромождающих вашу систему.
- NPkill написан на TypeScript, но поиск выполняется на низком уровне, что значительно повышает производительность.
- Простота в использовании: попрощайтесь с длинными командами. Использовать npkill так же просто, как прочитать список ваших node_modules.
-У NPkill почти нет никаких зависимостей.

#Инструменты
Three.js — легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL.

#JavaScript
Советы для создания "узнаваемого" логотипа

1. Простота. Когда дело доходит до разработки логотипа "простота является ключом к успеху." Логотип это не место, чтобы показать свои художественные навыки. Он не должен быть сложным и богатым.

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

3. Значимость. Каждая компания имеет свою историю за плечами, и эта история часто используется на логотипе. Логотипы, как правило, рассказывают о девизе компании и идеалах, которые они разделяют с клиентами.

Все советы читайте в полной статье.

#Статьи
Выберите правильный ответ ниже. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.
This media is not supported in your browser
VIEW IN TELEGRAM
Неоновые анимированные кнопки.

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

#HTML #CSS
БЭМ (Блок-Элемент-Модификатор) — методология web-разработки.

Когда дело доходит до поиска правильного имени класса, это может быстро привести вас в отчаяние. Даже самые опытные разработчики CSS не всегда сразу находят правильное имя класса. Этот инструмент призван помочь вам не потеряться в методологии БЭМ, предоставив вам рекомендации по наименованию некоторых наиболее распространенных веб-компонентов.

#Инструменты
Набор иконок - Tetrisly

Бесплатный набор из 266 качественных интерфейсных иконок в формате Figma, Sketch, SVG для построения пользовательского интерфейса. Данным набором могут пользоваться как дизайнеры, так и разработчики. 

#Графика
CSS Gradient Animator - онлайн инструмент, который сэкономит время на создание красивых анимированных градиентов для Вашего проекта, при этом работать с ним можно через веб-форму.

#Инструменты
Bounce.js - это бесплатный и простой в использовании онлайн-инструмент, который поможет легко создавать CSS3-анимации, просто скопируйте и вставьте экспортированный код CSS в свой файл стилей. А еще, Вы сможете развернуть такой же инструмент на своем сервере.

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