Типогра́фика — искусство оформления печатного текста, базирующееся на определённых, присущих конкретному языку правилах, посредством набора и вёрстки.

Подборка из 5 крутых примеров типографики на реальных проектах

1. https://bepatrickdavid.com/
2. https://kulbachny.com/
3. https://www.petas.it/
4. http://cafelapetitereine.ch/carte.html
5. https://www.jomor.design/

7 апреля состоялся релиз Chrome 81

В этой версии улучшена поддержка WebXR (действующий стандарт виртуальной и дополненной реальности в Интернете) и поддержка стандарта Web NFC в тестовом режиме. А вот от ряда новшеств, запланированных для Chrome 81, пришлось отказаться. Так, обновление пользовательского интерфейса отложили из-за того, что разработчики Google не успели вовремя внести последние штрихи в новый дизайн. Отменили и отказ от поддержки протоколов шифрования TLS 1.0 и TLS 1.1 из Chrome. Все эти изменения будут реализованы в следующих обновлениях Chrome.

Компания решила пропустить Chrome 82 и после Chrome 81 сразу перейти к Chrome 83. Следующая версия браузера ориентировочно будет выпущена в середине мая, то есть на три недели раньше, чем планировалось изначально.

IcoFont - шрифтовые иконки для сайта

Отличный сервис для реализации шрифтовых иконок на своем сайте. На сайте вы можете выбрать более 2100 иконок, которые разбиты на категории, что делает поиск еще более удобным. Всего собрана 31 категория.

Как их подключить на сайт:
1. Перейти на сайт и скачать саму библиотеку иконок по кнопке "Download"
2. Добавьте перед закрывающим тегом </head>

<link rel="stylesheet" href="myProjects/webProject/icofont/css/icofont.min.css">

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

<i class="icofont-brand-adidas"></i>

PageSpeed Insights - один из инструментов PageSpeed Tools от Google. Он анализирует содержание и технический стек вашего сайта и предлагает решения, позволяющие ускорить его загрузку. В параметры оценки входит не только скорость, но и удобство использования. Советы могут иметь желательный и критический характер. К критическим относятся такие вещи как, например, блокировка отрисовки страницы небрежно вставленным в header JavaScript-кодом.
#Инструменты

PHP-Fusion —PHP-Fusion является универсальной и очень масштабируемой CMS, которая дает вам больше возможностей для управления вашим сайтом. Поддержка проекта ведется с 2003 года

В PHP-Fusion 9 версии и более были стандартизированы методы веб-разработки и реализации безопасности - со встроенной автоматизацией - которые интуитивно помогают в разработке мощных дополнений или разработке на их веб-сайтах.

Прямо из коробки вы получите:
Новости, Статьи, Форум: Фотогалерея, Ссылки, Файловый архив, Голосования, Мини-чат, Приватные сообщения, Темы, Собственные страницы

И это часть возможностей это CMS. Её очень сильно недооценивают!

#CMS

Немного о тяжелых картинках и влиянии их на загрузку сайта

Большинство пользователей закрывают сайт, если он грузится слишком долго. Один из факторов, влияющих на скорость загрузки страниц – вес фотографий.

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

Рекомендую использовать только современные форматы изображений, которые имеют маленький размер - такие как webp и svg. А для сжатия изображений без потери качества рекомендую использовать сервис TinyPng

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

Каждый браузер устанавливает свои значения стилей по умолчанию для различных 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. Не требует установки.

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