Рубрика: Советы

Советы и уроки по разной тематики.

Опубликовано

Постпроцессоры CSS для начинающих: советы и ресурсы

Постпроцессоры CSS для начинающих: советы и ресурсы

От автора: о концепции препроцессоров в CSS большинство разработчиков или уже знают, или читало. Мы уже разобрали в мельчайших деталях препроцессоры, чтобы помочь разработчикам как можно быстрее освоиться с этой популярной технологией. Но что такое постпроцессоры?

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

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

Читать далее «Постпроцессоры CSS для начинающих: советы и ресурсы»

Опубликовано

Полный сброс: использование начальных значений CSS

Полный сброс: использование начальных значений CSS

От автора: по своему определению разработка стилей включает в себя установку CSS свойствам новых значений. Сложные стили, в конечном счете, доходят до такой точки, когда необходимо «потереть» CSS значения, т.е. сбросить их на начальные. В отдельных случаях первоначальные значения известны, их легко запомнить. У других же свойств все не так. К счастью, современный CSS дает нам простой способ сброса свойств.

Дави на кнопку

Скажем, вы задали изображениям свойство float: left по умолчанию:

И потом вам нужно сбросить обтекание изображений с определенными условиями (изображения с классом .recall)… а вы не помните, стоит ли float: none или что-то еще.

Читать далее «Полный сброс: использование начальных значений CSS»
Опубликовано

Google AMP и WordPress: все что нужно знать

Google AMP и WordPress: все что нужно знать

От автора: пару лет назад Google представила технологию, которая потрясла мобильный SEO, и называлась она AMP. Если не знакомы с термином, то AMP расшифровывается как Accelerated Mobile Project (ускоренный мобильный проект). С помощью AMP Google хочет ускорить загрузку страниц на мобильных устройствах, особенно для тех пользователей, которые до сих пор застряли в 3G скоростях. Google использует AMP, чтобы как и раньше максимально быстро предоставлять искомый контент.

Почему AMP имеет значение

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

Google поощряет использование AMP премиум местами в поисковой выдаче для сайтов с технологией AMP. В частности для любых поисковых запросов по новостям и блогам. Взгляните на скриншот ниже:

Читать далее «Google AMP и WordPress: все что нужно знать»

Опубликовано

CSS псевдоэлементы (:before или :after) и transform: мои любимые инструменты CSS

CSS-HERO

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

Что такое псевдоэлементы?

Если вы когда-либо использовали:beforeили:afterв своем селекторе, и у него былcontentстиль, вы создали псевдоэлемент. Они вставляются в DOM и могут рассматриваться как свободныеspanэлементы, которые могут иметь текст, происходящий из CSS.

Я не использую их для текста очень часто: их поддержка в вспомогательных технологиях нечеткая, и внедрение текста из CSS — последнее средство для меня.

Ониотлично подходятдля создания дополнительных элементов, которые необходимы для макета или дизайна без необходимости загромождать ваш HTML. Самое популярное использование для.clearfix, но это только верхушка айсберга.

Читать далее «CSS псевдоэлементы (:before или :after) и transform: мои любимые инструменты CSS»
Опубликовано

Обещания (promise). Четыре функции, которые вам нужно знать

Обещания помогают сделать код чище, уменьшить количество зависимостей от внешних библиотек и подготовиться к async и await в ES7. Разработчики, которые ругают или не используют их, не знают, что они теряют.

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

Читать далее «Обещания (promise). Четыре функции, которые вам нужно знать»
Опубликовано

Обзор CSS Resets в 2020 году

Обзор CSS Resets в 2020 году

От автора: сегодня речь пойдет о CSS Resets 2018. Все браузеры поставляются с набором стилей по умолчанию, которые применяются к каждой веб-странице в так называемой «таблице стилей агента пользователя». Большинство из этих таблиц стилей имеют открытый исходный код, поэтому вы можете просмотреть их.

Многие стили согласованы во всех таблицах стилей пользовательских агентов. Например, я привык думать, что элемент head не был виден из-за какой-то специальной функции, но на самом деле он скрывается, как и любой другой элемент на странице, с помощью display: none! Вы можете увидеть этот же стиль в WebKit, Chromium и Mozilla.

Много стилей, однако, являются несовместимыми между разными таблицами стилей агента пользователя. Например, посмотрите, как выглядит поле поиска в разных браузерах. Читать далее «Обзор CSS Resets в 2020 году»

Опубликовано

Дизайн состояний кнопок

Дизайн состояний кнопок

От автора: дизайн кнопок является основным элементом любой системы оформления. Лучшие из кнопок — простые, универсальные, возможно, даже немного веселые. Но есть много скрытых сложностей в этих веселых элементах управления и переключения … сложностей, которые легко упустить из виду, когда мы фокусируемся на тех же самых старых состояниях по умолчанию и наведения.

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

Опубликовано

Angular, React и Vue — который из них выбрать в 2019 году

От автора: в настоящее время JavaScript-фреймворки является одной из самых горячих тем среди разработчиков. Хотя сообщество разработчиков по-прежнему не понимает, который из них лучше использовать всегда, решение принимается в соответствии с их требованиями. Проведя сравнение Angular, React и Vue, мы рассмотрим, какую платформу лучше изучать начинающему разработчику.

Примерно 2-3 года назад разработчики были довольствовались Angular и React. Недавно мы увидели восходящий рост еще одного игрока — Vue. Сравнение этих фреймворков приводится ниже: Читать далее «Angular, React и Vue — который из них выбрать в 2019 году»

Опубликовано

Топ 5 навыков JavaScript, которые нужны начинающему

Топ 5 навыков JavaScript, которые нужны начинающему

От автора: Джерод, Дивья, Ник и я недавно говорили о востребованных навыках для начинающих разработчиков JavaScript во втором сегменте JS Party #77. Это постоянно повторяющаяся тема в мире JavaScript, потому что все оооочень быстро меняется, и трудно понять, на чем сосредоточиться. Читать далее «Топ 5 навыков JavaScript, которые нужны начинающему»

Опубликовано

6 простых инструментов и советов, которые помогут вам ускорить WordPress

6 простых инструментов и советов, которые помогут вам ускорить WordPress

От автора: сайты, которые работают на WordPress, могут замедляться по ряду причин. Это может быть что угодно: раздутый код, некачественный плагин или низкая производительность хостинга. Выяснить, что замедляет вас, достаточно сложно. Еще труднее разобраться в инструментах, предназначенных для увеличения скорости (например, плагинов кэширования), полных загадочных настроек.

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

Читать далее «6 простых инструментов и советов, которые помогут вам ускорить WordPress»

") //-->

Статистика

Метки

Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять