CodeRoll | Frontend

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

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

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

Интересная и красивая реализация карусели с использованием HTML, CSS и JS. В карусели применяется анимация и несколько элементов управления. #JS #HTML #CSS

Frest v2.1 - шаблон админ панели HTML и Laravel. Frest - это мощный шаблон панели администратора, созданный на основе Bootstrap 4, удобный для разработчиков, богатый функциями и легко настраиваемый. Высокие отраслевые стандарты предоставляют вам отличный шаблон администратора, который не только быстр и прост в использовании, но и легко масштабируется. #Шаблоны

Webpack - это статический модульный сборщик для приложений на jаvascript. Подобные инструменты позволяют разработчикам упаковывать, компилировать и в целом организовывать все ресурсы, необходимые для проекта. В этом видео курсе Вы узнаете как настроить шаблон Webpack 4, подключите babel 7, а также разберетесь с webpack dev server. Подключите js библиотеки на примере vue.js и bootstrap, настроите loaders, узнаете как работать с препроцессорами, автопрефиксами и многое другое. #Курсы

Какими навыками должен обладать первоклассный верстальщик в 2020 году? Основные навыки топового верстальщика. - Умение делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. - Отличное владение CSS, работа с препроцессорами Sass, SCSS. Хорошее знание Flexbox и Grid. - Работа с SVG графикой, анимацией, canvas. - Уверенные знания Git - Понимание методологии разбиения на блоки, такие как БЭМ или другие. - Знание одного из фреймворков, таких как Bootstrap. - Знание JS на уровне своей области (модальные окна, работа с анимацией и другое), а также понимание работы с jQuery. - Понимание того, как верстаются макеты из графических редакторов Figma, Photoshop, Sketch. - Автоматизация своей работы при помощи npm-скриптов, Autoprefixer, Gulp или Webpaсk. - Понимание как адаптировать шаблон на CMS. - Умение работать с шаблонизаторами, такими как PUG (Jade). #Статьи

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

Three Dots - набор загрузочных анимаций CSS, созданных из трех точек, которые создаются одним элементом. Данная библиотека может не только улучшить ваш проект, но и в целом ускорить разработку. Настройка библиотеки: 1.Подключите CSS файл перед </head>: <link href="/path/to/three-dots.css" rel="stylesheet"> 2. Добавьте нужный класс в  div: <div class="dot-elastic"></div> Список всех доступных классов и их примеры можете посмотреть в демонстрации или на GitHub. #HTML #CSS

🔥 Лучшее на канале за последнюю неделю 1) Vivify — это бесплатная CSS библиотека, которую вы можете использовать для анимации кнопок, изображений и многого другого. 2) Shapedivider — онлайн инструмент для простого создания скривлений с экспортом в SVG. 3) Мини-курс по JavaScript ES7-ES9 от WebDev. 4) Colormind — генератор цветовых схем, который использует машинное обучение. 5) CSS Shrink — полезный инструмент, который умеет делать онлайн-сжатие вашего CSS-кода. Всем успешной разработки! #Лучшее

Polymer - это библиотека веб-компонентов, разработанная специалистами компании Google, предназначенная для создания и использования пользовательских элементов. Основное преимущество данной библиотеки в том, что как заверяют разработчики, она создана с нуля и предназначена для быстродействия и эффективности Ваших элементов. Компактная библиотека сделает Ваш проект более легким, быстрым, красивым и совместимым со многими браузерами, если не сказать со всеми, ведь новая версия основана на новых стандартах. #JS #HTML

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

Shapedivider — онлайн инструмент для простого создания скривлений с экспортом в SVG. Вы можете создать фон волны для своего проекта очень быстро и легко. Инструмент подойдет для разработчиков и дизайнеров. #Инструменты

Пришла пятница, а это значит - время смотреть что-то интересное. Мир Дикого Запада (2016 — …) Этот сериал под интересным углом освещает отношения между людьми и машинами. Роботы обслуживают посетителей парка развлечений. А развлечения в этом парке, мягко говоря, не самые безобидные. Будут ли роботы следовать заложенным в них инструкциям, или у них есть собственный сценарий развития событий? Ответы в сериале. КиноПоиск: 8.1 IMDB: 8.7

Vivify — это бесплатная CSS библиотека, которую вы можете использовать для анимации кнопок, изображений и многого другого. Она имеет несколько анимационных эффектов на выбор, таких как мяч, пульсация, удар влево, удар вправо, дрожание, выскакивание, прыгание, исчезновение, вращение, растяжение и складывание. Подключение библиотеки: 1. Подключите файл vivify.css перед </head> <link href="vivify.min.css" rel="stylesheet" type="text/css"/> 2. Добавьте класс vivify к элементу, который вы хотите анимировать. Если вы хотите, чтобы ваша анимация была бесконечной, вы также можете добавить класс infinite. #CSS

React - не безызвестная JavaScript-библиотека для создания пользовательских интерфейсов. Многие Front-End разработчики уже знают что это такое и используют в полной мере.Библиотека разработана и одновременно используется Facebook Inc. Основные особенности: - Декларативные представления сделают код более предсказуемым и упростят отладку. - Основан на компонентах. Поскольку логика компонента написана на JavaScript, а не содержится в шаблонах, можно с лёгкостью передавать самые разные данные по всему приложению и держать состояние вне DOM. - React также может работать на сервере, используя Node.js и на мобильных платформах, используя React Native. #JS

Как и когда использовать ссылочные атрибуты rel="sponsored" и rel="ugc". В настоящее время для ссылок можно использовать три атрибута: “nofollow”, “sponsored” и “ugc”, каждый из которых усиливает разное значение. rel=”sponsored” – ссылки, связанные с рекламными материалами или платными местами размещения (обычно называются платными ссылками), следует помечать как рекламные. rel=“ugc” – для ссылок, которые ведут на контент, созданный пользователями, например комментарии или записи форумов, рекомендуется применять атрибут ugc. rel=”nofollow” – если вам не подходят описанные выше атрибуты, и вы не хотите, чтобы роботы Google переходили по ссылкам на вашем сайте, используйте значение nofollow. Ссылки записываются в таком формате <a rel="Название атрибута" href="#">Ссылка</a> Google советует размечать платные/спонсированные ссылки с помощью атрибута “sponsored” или “nofollow”, но не “ugc”. #Статьи

Colormind — генератор цветовых схем, который использует машинное обучение. Информацию сервис может извлечь из изображений, видеороликов. Каждый день загружаются разные наборы. Сервис отлично подойдет как для верстальщиков, так и для дизайнеров! #Инструменты