CodeRoll | Frontend

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

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

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

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

Советы для создания "узнаваемого" логотипа 1. Простота. Когда дело доходит до разработки логотипа "простота является ключом к успеху." Логотип это не место, чтобы показать свои художественные навыки. Он не должен быть сложным и богатым. 2. Адаптивность. Убедитесь, что ваш логотип гибкий и адаптируемый к различным стилям и цветовых схем. Логотип должен выглядеть резким в больших и малых размерах. 3. Значимость. Каждая компания имеет свою историю за плечами, и эта история часто используется на логотипе. Логотипы, как правило, рассказывают о девизе компании и идеалах, которые они разделяют с клиентами. Все советы читайте в полной статье. #Статьи

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

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

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

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

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

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

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

Gitexplorer - полезный сервис для тех, кто не освоился достаточно комфортно с командами гита. Выбираете в выпадающем списке последовательно, что хотите сделать. Вам выводится пример использования в консоли с комментариями. #Инструменты

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

Принцип 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} Согласитесь, выглядит намного читабельнее и элегантнее.

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

jQuery FancyBox — плагин для создания красивых фотогалерей и вывода изображений в модальных окнах. Для использования последней версии придется потратиться. Плагин платный. Способ подключения: 1. Подключаем файлы jQuery и FancyBox <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link href="/path/to/jquery.fancybox.min.css" rel="stylesheet"> <script src="/path/to/jquery.fancybox.min.js"></script> 2. Создание ссылок на показ картинок в виде галереи <a data-fancybox="gallery" href="big_1.jpg"> <img src="small_1.jpg"> </a> <a data-fancybox="gallery" href="big_2.jpg"> <img src="small_2.jpg"> </a> #jQuery

OpenCart — это бесплатная и современная платформа для создания индивидуального интернет-магазина. OpenCart построен по принципу MVC и может быть установлен на любом веб-сервере с поддержкой PHP и MySQL. Основные особенности: - Система фильтрации, помогающая быстро найти нужные товары. - Функциональная корзина, в которой отображается полная информация по заказу; - Выбор способов онлайн-оплаты и доставки товаров; отслеживание заказов; - Сохранение истории заказов с возможностью фильтрации по клиентам; - Личный кабинет покупателя, в котором отображается вся информация о его заказах. - Присвоение статусов, определяющих новинки, хиты, сопутствующие и рекомендуемые товары; - Создание целевых страниц, применение промокодов; подписка на уведомления об акциях и скидках; #CMS