Что такое сброс стилей и зачем он нужен?

Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. При этом контент начинает везде отображаться по разному

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

#CSS

Рейтинг браузеров на 13.04.2020

Десктопные браузеры:
- Chrome: 67.72%
- Firefox: 8.49%
- Internet Explorer: 6.97%
- Edge: 6.2%
- Safari: 3.62%

Мобильные браузеры:
- Chrome: 63.91%
- Safari: 27.17%
- QQ: 1.74%
- UC Browser: 1.15%
- Android Browser: 0.95%

#Инструменты

XAMPP - кроссплатформенная сборка веб-сервера, содержащая Apache, MySQL, интерпретатор скриптов PHP, язык программирования Perl и большое количество дополнительных библиотек, позволяющих запустить полноценный веб-сервер.

Благодаря программе XAMPP вы сможете установить Apache, PHP, MySQL всего за 5 минут. Забудьте длинные и сложные процедуры, вам лишь нужно будет следовать указаниям установщика.

Кроме выполнения трех сложных задач по установке Apache, PHP и MySQL, программа также может установить такие инструменты, как PHPmyAdmin, OpenSSL, PERL или Webalizer. Вы получить полнофункциональный сервер, не затрачивая много сил.

#Инструменты

КиноПоиск научился распознавать лица персонажей в фильмах и сериалах и сообщать, какие актеры их играют.

Распознавание выполняет технология DeepDive. В ее основе лежат алгоритмы компьютерного зрения Яндекса и собственные разработки КиноПоиска в области машинного обучения.

Теперь во время просмотра фильма или сериала на КиноПоиске можно в любой момент узнать, что за актер сейчас на экране и в каких фильмах он еще играл. DeepDive определяет актеров в разном возрасте и даже в очень сложном гриме.

Делюсь с Вами отличным сервисом шрифтовых иконок, для меня это стало очень крутым открытием, так как раньше я не натыкался на них. Просто восхитительная система иконок.

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

На самом сайте очень крутой конструктор при выборе иконки. Вы можете сразу изменить ей цвет, а затем просто скопировать код для своего сайта либо выгрузить иконку в svg или png формате

Как их подключить на сайт:

1. Добавьте перед закрывающим тегом </head>

<link href="https://cdn.jsdelivr.net/npm/remixicon@2.3.0/fonts/remixicon.css" rel="stylesheet">

2. Выбираем иконку на самом сервисе и вставляем ее в нужное место на сайте

<i class="ri-admin-line"></i>

#Графика

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

Настроить кнопку можно двумя способами:

1. Добавить готовый вариант, разместив код в необходимом месте, разместив скрипт

<script async src="https://telegram.org/js/telegram-widget.js?8" data-telegram-share-url="https://core.telegram.org/widgets/share" data-size="large"></script

2. Настроить свои кнопки, добавив в нужное место

https://t.me/share/url?url={url}&text={text}

где {url}URL-адрес, которым будет делиться пользователь, и {text}необязательное описание, которое будет включено в ссылку. Оба значения должны быть в кодировке URL .

Более гибкие настройки вы можете посмотреть в документации телеграм,

Visual Studio Code — редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений.

Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, IntelliSense и средства для рефакторинга. Имеет широкие возможности для кастомизации: пользовательские темы, сочетания клавиш и файлы конфигурации.

Распространяется бесплатно, разрабатывается как программное обеспечение с открытым исходным кодом, но готовые сборки распространяются под проприетарной лицензией.

#Инструменты

Чек-лист по первичной индексации сайта

Чтобы сообщить поисковым системам о вашем новом сайте, следуйте моему чек-листу и ваши проекты очень быстро появятся в индексе.

- Настройте ЧПУ на вашем сайте и не используйте кириллицу в URL
- Создайте XML карту вашего сайта sitemap.xml
- Создайте правильный robots.txt для вашей CMS
- Добавьте sitemap.xml в robots.txt
- Добавьте микроразметку по Schema.org для сущностей на сайте
- Пишите чистый, понятный, валидный и сематический код

Полный чек-лист по ссылке ниже.

#SEO

Darkmode.js - Изменение цветовой схемы сайта в один клик.

Эта Open Source библиотека, которая использует CSS mix-blend-mode, чтобы установить темный режим на любой из ваших сайтов. Просто скопируйте и вставьте фрагмент, и вы получите виджет для включения и выключения темного режима. Вы также можете использовать его без виджета программно. Плагин легкий, построенный на VanillaJS. Он также использует localalstorage по умолчанию, поэтому ваши последние настройки будут запомнены!

Библиотеку нашли у наших друзей https://t.me/opensourcefuture

Disqus — веб-сервис, предоставляющий возможность импорта интернет-обсуждений и комментариев на сайт пользователя. Сервис использует свою социальную сеть, что упрощает комментирование на сайтах, использующих его.

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

Виджет социальных кнопок для сайта

Конструктор соцкнопок uSocial обладает удобным, понятным и эргономичным дизайном.
Перемещаясь по панели функционала, которая включает в себя несколько пунктов, вы можете всегда слева видеть окно предпросмотра, что является большим плюсом. При этом, конструктор не выглядит перегруженным. Он полностью на русском языке, но имеет также и полноценную английскую локализацию.

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

Простой способ прикрепить футер к низу страницы

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

Шаг 1.
Обернуть ваш хедер, контент и футер таким образом, чтоб в Вашей обертке wrapper было 2 родительских блока

<div class="wrapper">
    <div class="header_content">
        <nav>
            Ваше меню
        </nav>
        <main>
            Ваш контент
        </main>
    </div>
    <footer>
        Ваш подвал
    </footer>
</div>

Шаг 2.
Добавляем стили

.wrapper {
min-width: 100vh; /*Задаем на всю высоту экрана*/
display: flex; /*Задаем Flexbox элемент*/
flex-direction: column; /*Определяем раcположение блоков по вертикали*/
justify-content: space-between; /*Определяем пространство блоков по краям*/
}

Если у вас есть какие либо вопросы, пишите в личку @zapilim. Будем разбирать вместе!

Коллекция CSS прелоадеров

Креативная коллекция крутящихся прелоадеров, анимированных при помощи CSS3. Каждый «волчок» коллекции состоит всего из одного блока с классом .loader и текстом «Loading…». Текст задан для экранных читалок и обратной совместимости со старыми версиями браузеров, не поддерживающих CSS3.

Всем прелоадерам задан размер шрифта font-size в px (пиксели), а все другие размеры в em (относительная величина, зависящая от размера шрифта текущего элемента). Это сделано для того, чтобы можно было легко изменить размер всего прелоадера, оперируя только размером шрифта.

Установка очень проста, просто перейдите на сайт и выберите, что Вам понравилось и нажмите под прелоадером на ссылку "View Source". Откроется код для копирования на свой сайт,

#HTML_CSS

CDN (Content Delivery Network) - Сеть доставки содержимого — географически распределённая сетевая инфраструктура, позволяющая оптимизировать доставку и дистрибуцию содержимого конечным пользователям в сети Интернет.

Для чего стоит ее использовать?
Уменьшение задержки является ключевой причиной для использования сетей доставки контента CDN, потому что сеть располагает серверами во многих точках в мире. При этом, объекты вашего сайта будут загружаться для пользователя из ближайшего сервера который расположен в его регионе.

Это придаст вашему сайту большего быстродействия. В своих проектах я использую библиотеки от сервиса cdnjs.com

#Статьи

ColorPix - инструмент для определения цветового тона

Иногда необходимо быстро узнать цветовой тон на какой либо картинке и в помощь к нам приходит ColorPix.

Основная цель ColorPix - сохранить тон определенного пикселя и перевести его в читаемый формат. Однако основное преимущество заключается в том, что пользователь имеет возможность масштабировать и «захватывать» один пиксель за раз, когда это необходимо.

Определяет цвет сразу несколько цветовых моделей: rgb, HEX, HSB, CMYK. А еще он умеет определят позицию курсора на экрана. Работает на Windows XP - 10. Не требует установки.

#Инструменты

WOW.js — анимация элементов при прокрутке страницы

WOW.js позволяет отложить запуск анимации элементов до момента их отображения на экране при прокрутке страницы. Разработчик WOW.js рекомендует использовать Animate.css для анимации. Эта библиотека поддерживает более 70 эффектов.

Демонстрацию анимаций можете посмотреть на официальном сайте

ScrollMagic - это библиотека javascript, которая помогает вам легко реагировать на текущую позицию прокрутки пользователя.

Это идеальная библиотека для вас, если вы хотите:

- Анимировать на основе положения прокрутки - либо запустить анимацию, либо синхронизировать ее с движением полосы прокрутки (например, с помощью элемента управления воспроизведением).
- Закрепить элемент, начиная с определенной позиции прокрутки - либо на неопределенный срок, либо на ограниченный объем хода прокрутки (липкие элементы).
- Включать и выключать CSS-классы элементов в зависимости от положения прокрутки.
- Легко добавить эффекты параллакса на ваш сайт.
- Создать бесконечно прокручиваемую страницу (ajax загрузка дополнительного контента).
- Добавить обратные вызовы в определенных местах прокрутки или при прокрутке мимо определенного раздела, передав параметр прогресса.

#JS

Пример сочетания цветов и оттенков для кнопок Вашего сайта!

Делайте все правильно и красиво! Для захвата цвета можете использовать инструмент ColorPix, о котором мы недавно рассказывали.

Line Icon Pack - Бесплатные иконки для вашего проекта. Набор включает в себя 280+ иконок.

Коллекция иконок содержит разрешения от 28х28 до 1024х1024px, а так же популярные форматы: png, svg, шрифтовый тип. Имеются даже исходники под различные платформы. Забираем себе в коллекцию!

Brumm Shadow — отличный сервис для создания ровных теней. При помощи данного сервиса вы сможете легко в онлайн режиме настроить тени для блоков или кнопок Вашего сайта

Способ центрировать и обрезать миниатюры с помощью CSS

Если у вас на сайте блоки под изображения квадратного типа, а сами картинки неправильного размера, то вы при помощи этого трюка можете легко это исправить

Техника использует преобразования CSS3, поэтому она работает во всех современных браузерах, включая IE9 и выше.

Пример разметки HTML
<div class="thumbnail">
<img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">
<img src="portrait-img.jpg" class="portrait" alt="Image" />
</div>

Пример CSS свойств для этой разметки:
.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: 100%;
height: auto;
}

Вот и весь процесс, если что то не понятно, обсуждаем в нашем чате!

#HTML_CSS