Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Рубрика «css» - 20
Дайджест свежих материалов из мира фронтенда за последнюю неделю №393 (9 — 15 декабря 2019)
2019-12-15 в 21:15, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, Разработка веб-сайтов, ссылки, фронтенд6 мощных селекторов CSS, которые действительно помогут вам написать чистый CSS
2019-12-14 в 15:51, admin, рубрики: css, перевод, селекторыПривет!
Предлагаю вашему вниманию перевод статьи «6 powerful CSS selectors that will really help you write clean CSS» автора Ibrahima Ndaw.
Селекторы в CSS используются для выбора элементов и стиля. Селекторы производительны и поэтому пользуются популярностью у разработчиков. В этой статье приведены 6 селекторов CSS, которые помогут написать чистый CSS в вашем следующем проекте (если, конечно, вы его используете).
Читать полностью »
6 самых распространённых ошибок разработчиков при написании HTML и CSS
2019-12-11 в 14:08, admin, рубрики: css, html, ошибки, перевод, ПрограммированиеПривет! Представляю вашему вниманию перевод статьи «The 6 most common mistakes developers when writing HTML and CSS» автора Stas Melnikov.
Использование атрибута placeholder вместо элемента label
Часто разработчики используют атрибут placeholder вместо элемента label. Но в этом случае пользователи скринридера (программы чтения с экрана) не могут заполнять поля, потому что скринридер не может прочитать текст из атрибута placeholder.
<input type="email" placeholder="Enter your email">
Поэтому я рекомендую использовать элемент label для поля имени и атрибут placeholder для примера данных, которые пользователь должен заполнить.
<label>
<span>Enter your email</span>
<input type="email" placeholder="e.g. example@gmail.com">
</label>
Использование элемента img для разметки декоративной графики
Я часто вижу, как разработчики путают декоративную графику с изображениями контента. Например, они размечают социальные иконки с помощью элемента img.
<a href="https://twitter.com" class="social">
<img class="social__icon" src="twitter.svg" alt>
<span class="social__name">Twitter</span>
</a>
Но иконка социальной сети — это декоративная иконка, которая помогает пользователям быстрее понять смысл элемента, не читая текст. Если мы удаляем значок, мы не теряем значение элемента, поэтому мы можем использовать для него свойство background-image.
Читать полностью »
Golden canon grid: страшилка для фронтендеров
2019-12-10 в 15:47, admin, рубрики: css, golden canon grid, Grid, Разработка веб-сайтовБольшая часть людей, так или иначе причастных к верстке сайтов, проходят через… Назовем это “путь бутстрапа”. Это такая философская позиция, когда у тебя есть 12 колонок и ничего больше. Ты берешь элементы, кладешь их в определенные колонки и все у тебя хорошо. Можно выключить мозг, погрузиться в нирвану и руки будут сами расставлять элементы. Красота… Но тут появляется современный дизайнер, который рисует что-то, что ну совсем не сходится с этой замечательной концепцией. Колонок явно больше, они все разной ширины, да еще и по высоте что-то нужно выравнивать. Жуть. А встречается такое все чаще, особенно если сделать шаг в сторону от магазинов или админок. Сегодня мы поговорим о том, что же это за чудо такое там используется и как его можно готовить в современном CSS. Кода будет совсем немного, в основном – размышления и картинки.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №392 (2 — 8 декабря 2019)
2019-12-08 в 21:18, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Тесты визуальной регрессии. Перезагрузка
2019-12-06 в 12:05, admin, рубрики: css, gemini, hermione, javascript, storybook, visual regression test, Блог компании DIRECTUM, Тестирование IT-систем, Тестирование веб-сервисовВ своей предыдущей статье я рассказывал про опыт использования движка Gemini для разработки визуальных тестов, точнее, тестов визуальной регрессии. Такие тесты проверяют, не «съехало» ли что-нибудь в UI после очередных изменений с помощью сравнения текущих скриншотов с ранее зафиксированными эталонными. С тех пор в наших подходах к написанию визуальных тестов многое изменилось, в том числе изменился и используемый движок. Теперь мы используем Hermione), но в данной статье я собираюсь рассказать не только и не столько о Hermione, сколько о накопившихся с того времени проблемах и способах их решения, которые в том числе привели и к переходу на новый движок.
Читать полностью »
Новичку only: 10 вещей, которые вы должны знать как веб-разработчик
2019-12-02 в 8:16, admin, рубрики: css, Git, github, html, javascript, python, web, web-разработка, веб-дизайн, Разработка веб-сайтов, языки программированияПривет! Представляю вашему вниманию перевод статьи «10 Things You Should Know As a Web Developer» автора Anuupadhyay.
Написание тысячи строк кода и превращение в веб-сайт — одна из творческих и сложных вещей для веб-разработчиков. Если вы в этом деле новичок, увидели множество красивых веб-сайтов и подумали попробовать силы в этом, нам необходимо открыть глаза и рассказать о некоторых вещах, нужных веб-разработчику. Создание веб-сайта, который привлекает внимание пользователей, — это не только изучение различных языков программирования, это также изучение других концепций, таких как DevTools, форматы данных, тестирование, API-интерфейсы, аутентификация и многое другое. Здесь рассказывается о некоторых вещах, которыми должен овладеть веб-разработчик.
1. HTML / CSS / JS
Важным навыком, который каждый разработчик должен изучить в первую очередь, является знание этих трех основных строительных блоков, то есть HTML, CSS и JavaScript. Вы будете использовать HTML и CSS во «фронтенде» для интерфейсов. Щелкните правой кнопкой мыши на веб-браузере и выберите вариант просмотра источника страницы. Вы найдете структуру вашего сайта, где много HTML-тегов используются для различных целей.
CSS также используется в веб-интерфейсе, который определяет стиль, дизайн, макет и то, как элементы HTML должны отображаться на экране.
Читать полностью »
Дайджест свежих материалов из мира фронтенда за последнюю неделю №391 (25 ноября — 1 декабря 2019)
2019-12-01 в 22:04, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, браузеры, дайджест, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Как вы избавляетесь от неиспользуемого CSS-кода? Часть 2
2019-11-28 в 9:30, admin, рубрики: css, Блог компании RUVDS.com, Проектирование и рефакторинг, разработка, Разработка веб-сайтовСегодня публикуем вторую часть перевода материала о борьбе с неиспользуемым CSS-кодом.
Как вы избавляетесь от неиспользуемого CSS-кода? Часть 1
2019-11-27 в 10:00, admin, рубрики: css, Блог компании RUVDS.com, Проектирование и рефакторинг, разработка, Разработка веб-сайтовАвтор статьи, первую часть перевода которой мы сегодня публикуем, хотел бы, чтобы читатели заранее знали о том, что избавление от ненужного CSS — это трудная задача. Если вы это читаете в надежде найти некий инструмент, запустив который, вы сможете узнать о том, какой именно CSS-код можно безбоязненно удалить из вашего проекта, то… Есть подобные инструменты, но их нужно использовать крайне осторожно, так как ни один из них не способен дать достойный ответ на вопрос о неиспользуемом CSS.
Несложно понять, что любому веб-разработчику хотелось бы взять некую утилиту, запустить её, и удалить тот ненужный CSS, о котором она сообщит. Пара минут — и сайт ускорен. Но не всё так просто. Автор этого материала полагает, что к подобным инструмента стоит относиться со здоровым скептицизмом. Ни один из них не лжёт разработчику. Эти инструменты обычно просто не обладают достаточным объёмом информации, позволяющим им выдать результаты, которым можно безоговорочно доверять. Но это не означает, что такими инструментами невозможно пользоваться. Не значит это и того, что от неиспользуемого CSS никак нельзя избавиться. Обсудим это.
Читать полностью »