JS | Мифы о веб-разработке

Программирование — большой мир, который, как и любая профессия, давно оброс мифами и легендами. Автор статьи собрал самые популярные и рассказал как их побороть:

Миф 1. Веб-разработка не для меня
Миф 2. Страшно сделать ошибку
Миф 3. Ошибка — конец света
Миф 4. Сложно сделать первый проект
Миф 5. Код можно никому не показывать
Миф 6. После курсов платят по 200 тысяч
Миф 7. Невозможно научиться самостоятельно

Подробности в статье.

CSS | Углубленное изучение псевдоэлементов

Псевдоэлементы ::before и ::after - невероятно универсальные инструменты в наборе инструментов CSS. Понимание их может помочь вам разработать практический CSS для решения самых разных ситуаций. Или вы можете пойти дальше и использовать их для создания впечатляющих визуальных эффектов. Подробности в статье.

WEB | Core Web Vitals - ранжирование поисковой выдачи в Google

В ноябре прошлого года команда Google анонсировала Core Web Vitals — новые факторы оценки качества ресурсов, которые смогут влиять на индексацию и вступят в силу в мае 2021 года.

Текущий набор показателей фокусируется на трех аспектах взаимодействия с пользователем:

1. Largest Contentful Paint (LCP) —скорость загрузки страницы и ее крупных визуальных элементов. Хороший показатель – до 2,5 с.

2. First Input Delay (FID) — интерактивность сайта, насколько быстро он становится доступным к взаимодействию. Желательно до 100 мс.

3. Cumulative Layout Shift (CLS) — скорость визуальной стабилизации, то есть насколько быстро всё становится на свои места. Идеально меньше 0,1.

Подробнее в статье.

PHP | Symfony DomCrawler

symfony/dom-crawler - это библиотека, предоставляющая средства для разбора HTML/XML.

Позволяет искать элементы с помощью xpath.

Если установить symfony/css-selector, то поиск также можно будет проводить с помощью css селекторов.

CSS | @media print, рекомендации к написанию стилей

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

В статье собраны примеры подготовки страницы к печати и разобраны основные css свойства отвечающие за отображение распечатанных страниц.

PHP | Package Wizard

Package Wizard - это консольный инструмент для генерации структуры директорий и начальных файлов для пакетов Composer.

Web | Everythingfonts - работа со шрифтами

Everythingfonts - сервис облегчающий работу со шрифтами: конвертация, генерация font-face, предпросмотр шрифтов и множество других функций собраны в одном месте.

PHP | Статичные конструкторы

Для создания объектов используется метод __construct.

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

JS | Drag-and-drop всё что нужно знать

Drag’n’Drop – отличный способ улучшить интерфейс. Захват элемента мышкой и его перенос визуально упростят что угодно: от копирования и перемещения документов до оформления заказа.

В стандарте HTML5 есть раздел о Drag and Drop – и там есть специальные события именно для Drag’n’Drop переноса, такие как dragstart, dragend и так далее.

Подробности в статье.

CSS | Все способы реализации masonry раскладки

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

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

JS | Основные паттерны, теория и практика

Ёмкая и понятная статья про шаблоны программирования, все шаблоны снабжены примерами реализации и рекомендациями к использованию.

CSS | Генератор CSS Grid

Layoutit grid - это генератор макетов CSS Grid. Быстро создавайте макеты веб-страниц с помощью простого редактора и получайте код HTML и CSS для быстрого старта проекта.

HTML | Семантическая верстка, рекомендации и советы

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

HTML5 принёс целый ворох семантических тегов - article, section, aside, nav, header, main, footer. В каких случаях их уместно использовать рассказывается в статье.

PHP | CORS

Cross-origin resource sharing - технология современных браузеров, которая позволяет предоставить веб-страницам доступ к ресурсам другого домена.

Чтобы ваше REST API могло отдавать данные приложениям на других доменах, достаточно добавить несколько заголовков к ответам.