Статьи

Перевод статьи CSS Container Queries For Designers с сайта ishadeed.com, опубликован на CSS-live.ru с разрешения автора — Ахмада Шадида

При работе над дизайном для веба приходится иметь дело с макетами для разных размеров экрана. Опираясь на эти макеты, разработчик определяет ширину или высоту окна браузера медиазапросами, а затем, исходя из этого, меняет макет. Именно так мы верстали веб последние 10 лет, и вот-вот всё станет еще лучше. У меня для вас хорошие новости.

CSS-выражения от контейнера — долгожданная для веб-разработчиков фича — скоро появится в CSS и с ней уже можно поэкспериментировать в Chrome Canary. В этой статье мы познакомимся с этой фичей поближе, и узнаем, как она повлияет на вашу работу как дизайнера, и не только. Неважно, пишете ли вы код или нет, если увидите какой-то незнакомый CSS, то можете полностью игнорировать его и идти дальше.

Хватит слов, перейдём к делу!

Перевод статьи Don’t Fight the Cascade, Control It!
с сайта css-tricks.com для css-live.ru. Автор — Мадс Стуманн.

Если делать всё правильно и использовать наследование, которое даёт CSS-каскад, то конечного CSS нужно будет писать меньше. Но поскольку часто мы загружаем CSS из разных мест — из-за чего его бывает сложно структурировать и поддерживать, — каскад может сильно расстроить, и CSS из-за него окажется больше, чем нужно.

Несколько лет назад Гарри Робертс придумал ITCSS — умный способ структурировать CSS.

В сочетании с БЭМ ITCSS стал популярным способом написания и организации CSS.

Но даже с ITCSS и БЭМ иногда возникают большие трудности с каскадом. К примеру, я уверен, что вам приходилось делать @import внешних CSS-компонентов в определённом месте, чтобы ничего не сломать, или прибегать к жуткому !important.

Перевод статьи How to Read W3C Specs с сайта alistapart.com для css-live.ru. Автор — Джей Девид Эйсенберг.

(Примечание редакции CSS-live.ru: оригинал статьи написан более 20 лет назад. Не удивляйтесь, это не баг, а фича. Иногда полезно оглянуться назад и увидеть за калейдоскопом новинок какие-то неизменные основы. Или лучше понять ход прогресса технологий и порадоваться ему еще больше. В любом случае, многое в статье актуально по сей день, и уж точно стоит обсудить. Приятного чтения и приобщения к суперсиле спецификаций!)

Консорциум Всемирной паутины — это хранитель спецификаций по всем технологиям в вебе. Как веб-разработчик, вы могли заходить к ним на сайт в поиске ответа на вопрос про XHTML или чтобы узнать больше о новой технологии, такой как «Объекты форматирования XSL» или «Масштабируемая векторная графика»

Итак, вы обращаетесь к спецификации и практически тут же оказываетесь в замешательстве. Это невозможно читать, думаете вы. Но, на самом деле, это читаемо, если учесть один ключевой момент. Но всё проясняется, если учесть одну важную вещь:

Всем привет, меня зовут Лена. Сейчас я делаю фронтенд в компании AISA и борюсь за вёрстку кнопок кнопками. В сообществе могу быть известна пока что только тем, что модерирую чат Веб-стандартов в Телеграме. В свободное время катаюсь на разных досках. Ну, и погнали к докладу.

Знаком ли вам такой диалог?

— А вы поддерживаете доступность на своём сайте?
— Да, у нас есть версия для слабовидящих.

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

Нет. Не нужно.

Не секрет, что в последние годы веб развивается крайне стремительно. Периодически выходят новые библиотеки, фреймворки и другие полезные для нас инструменты. Всё это безусловно помогает нам решать повседневные задачи. Но в погоне за популярными новинками мы совсем не обращаем внимание на истоки. Многие начинающие разработчики начинают знакомство с кодом именно с инструментов, а не с фундаментальных вещей. Обычно это связывают с тем, что сегодня подавляющее большинство вакансий для фронтенд-разработчиков напичканы «модными» и «хайповыми» словечками вроде «React», «Vue», «styled-components», и множеством других. Поэтому разработчикам важно изучать именно эти вещи, чтобы не остаться без работы. Но разве причина только в этом? Именно поэтому разработчикам не важны основы? Думаю, что только отчасти.

А в чём, собственно, проблема, и она точно есть?

Перевод статьи How to Start Thinking Functionally in JavaScript с сайта itnext.io для css-live.ru, автор — Алекс Рицкован.

 Фото Denys Nevozhai с Unsplash

Функциональное программирование – это стиль программирования, который требует от специалиста думать на более высоком уровне абстракции. Как правило, когда мы учимся программировать, мы рассматриваем задачи в весьма императивном и процедурном стиле: сначала делаем это, потом – то и т.д.

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

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

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

Перевод статьи Essential JavaScript SEO Tips с сайта levelup.gitconnected.com для css-live.ru, автор — Айман Рахмат.

Сделайте свой контент доступным для поиска Google.

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

Давайте рассмотрим несколько приемов SEO-оптимизации, которые помогут пользователям найти ваш контент.

Перевод статьи The Web in 2020: Extensibility and Interoperability с сайта css-tricks.com для css-live.ru, автор — Юна Кравец.

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

Перевод статьи Do React Hooks Replace Higher Order Components (HOCs)? с сайта medium.com для css-live.ru, автор — Эрик Эллиотт

«Мандаринка» — снимок Малкольма Карлоу (CC-BY-2.0)

Как только API React-хуков вышел, стало появляться много вопросов о том, сможет ли он заменить другие общие библиотеки и паттерны в экосистеме React+Redux.
Хуки задумывались как замена классам и еще одна прекрасная альтернатива для композиции поведения в отдельные компоненты. Компоненты высшего порядка также полезны для композиции поведения. Очевидно, что их задачи где-то пересекаются, так не заменить ли нам компоненты высшего порядка хуками? Более чем ясно, что некоторые HOC-и они заменить могут. Но нужно ли заменять все ваши HOC-и на React-хуки?

Перевод статьи Do React Hooks Replace Redux? с сайта medium.com для css-live.ru, автор — Эрик Эллиотт

Вкратце: хуки хороши, но Redux они не заменят

«Мандаринка» — снимок Малкольма Карлоу (CC-BY-2.0)

Как только API React-хуков вышел, стало появляться много вопросов о том, сможет ли он заменить Redux.

Как по мне, хуки довольно слабо пересекаются с Redux. Они не дают никакого нового волшебства для состояний, а лишь улучшают API для того, что уже было в React. Но с API хуков пользоваться нативным React-инструментарием для состояния стало гораздо удобнее, а поскольку он – еще и более простая замена для классовой модели, мне теперь гораздо чаще удается к месту использовать состояние компонента

Чтобы мои слова стали понятнее, давайте сначала разберемся, зачем вообще нам бывает нужен Redux.

Перевод статьи Using CSS Custom attributes generated by JavaScript as a handover mechanism с сайта medium.com для css-live.ru, автор — Кристиан Хайльман

Обновление: изначально я слишком упростил, что пользовательские атрибуты не поддерживают конкатенацию, но благодаря Шиме Видасу, Брайану Карделу и Грегу Уитфорту ситуация прояснилась.

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

Перевод статьи CSS and Network Performance с сайта csswizardry.com, опубликовано на css-live.ru с разрешения автора — Гарри Робертса.

Несмотря на то, что сайт уже больше десяти лет называется «CSS-волшебство», за последнее время на нём не было ни одной статьи, связанной с CSS. Давайте я это исправлю, совместив две мои любимые темы: CSS и производительность.

CSS критически важен для отображения страницы — браузер не начнет рендеринг, пока не найдет, загрузит и распарсит весь CSS — поэтому крайне важно как можно скорее получить его на устройстве пользователя. Любая задержка на критическом пути скажется на нашей начальной отрисовке, заставив пользователя видеть пустой экран.

В чём главная проблема?

Собственно, вот почему CSS так важен для производительности:

1. Браузер не может отобразить страницу до построения дерева отрисовки;
2. дерево отрисовки получается из DOM и CSSOM вместе взятых;
3. DOM — это HTML плюс любой блокирующий JavaScript, который на него влияет;
4. CSSOM — все CSS-правила, применённые к DOM;
5. с помощью атрибутов async и defer можно легко сделать JavaScript неблокирующим;
6. сделать CSS асинхронным намного сложнее;
7. поэтому важно помнить, что скорость загрузки страницы определяется самой медленной таблицей стилей.

Перевод статьи Improve Your Debugging Skills with Chrome DevTools (Part 2) с сайта telerik.com для css-live.ru, автор — Питер Милчев

В этой статье мы рассмотрим продвинутые функции отладчика Chrome, закрепив навыки, полученные в первой части.

Вы научились проверять сгенерированный HTML и применённые стили? Уже смело можете отлаживать JavaScript в браузере? Надеюсь, поскольку в этой серии мы рассмотрим продвинутые функции отладчика Chrome, закрепив навыки, полученные в первой части.

Освоив новые навыки, мы поэкспериментируем с базовыми примерами Kendo UI, а в конце статьи возьмём реальный пример jQuery Grid, чтобы отточить на нем свежеприобретенные знания.

Перевод статьи Improve Your Debugging Skills with Chrome DevTools с сайта telerik.com для css-live.ru, автор — Питер Милчев

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

Бывали ли у вас неприятности с неверной работой JavaScript? Доводилось ли вам биться с подгонкой стилей элементов на своей странице? Бесит ли вас, когда страницу каждый раз надо тестировать на разных устройствах?

Если ответили «Да» хотя бы на один вопрос, то эта статья для вас. Вот наши полезные приемы и советы, которые помогут вам всё это побороть и повысить вашу продуктивность.

Перевод статьи Understanding why Semantic HTML is important, as told by TypeScript с сайта medium.com для css-live.ru, автор — Мэнди Майкл

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

Из-за того, что внимание во фронтенд-разработке всё больше сосредотачивается на JavaScript, а про HTML все как будто забывают, недавно мне пришлось потратить какое-то время, пытаясь понять, как объяснить разработчикам, нацеленным на JavaScript, почему важно изучать и понимать HTML

Это натолкнуло меня на идею:

«Почему семантический HTML важен, и как Typescript помогает это понять»