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
PHP 8.0 теперь на альфа-тестировании.

Стабильный релиз PHP 8 должен произойти в ноябре 2020, а пока идет активное тестирование.

Что нам обещают в PHP 8:
— Поддержка JIT-компилятора (технология увеличения производительности программных систем, использующих байт-код, путём компиляции байт-кода в машинный код или в другой формат непосредственно во время работы программы).
— Типы объединения - совокупность двух или более типов, которые указывают, что можно использовать любой из них.
public function foo(Foo|Bar $input): int|float;
— Поддержка JSON теперь считается основной частью PHP и не может быть отключена.
— Поддержка синтаксиса криптографических сообщений (CMS) в коде PHP OpenSSL.
— Множество улучшений в расширении PHP Zip, в том числе для установки новых обратных вызовов в сочетании с последними выпусками libzip, метода замены файлов, параметров сжатия / шифрования для addGlob / addPattern и других изменений.

#PHP
OpenCart — это бесплатная и современная платформа для создания индивидуального интернет-магазина. OpenCart построен по принципу MVC и может быть установлен на любом веб-сервере с поддержкой PHP и MySQL.

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

#CMS
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
Hicon - это простой, но очень стильный векторный набор иконок, разработанный в Figma и созданный для дизайнеров и разработчиков. Выгрузить иконки можно в svg формате.

#Графика
Принцип 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 для построения пользовательского интерфейса. Данным набором могут пользоваться как дизайнеры, так и разработчики. 

#Графика