Как стать автором
Обновить
36.57

HTML *

Стандартный язык разметки web-страниц

Сначала показывать
Период
Уровень сложности

История о том, как Google подсматривал за нашим сайтом и галлюцинировал

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров31K

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

Читать далее

Новости

Геометрические фигуры на CSS

Время на прочтение4 мин
Количество просмотров969K
Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.

Квадрат



#square {
	width: 100px;
	height: 100px;
	background: red;
}

Читать дальше →

Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать

Время на прочтение20 мин
Количество просмотров317K
Идеальная вёрсткаВы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

Клиенту неважно насколько красив ваш код, но ему важен результат. Качественный код нужен фирме, т.к. он надёжней и в будущем его будет легче поддерживать.

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

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:
  • 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
  • 2015/08/10: актуализирован список исключений для CSSLint
  • 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
  • 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
  • 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
  • 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
  • 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
  • 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
  • 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
  • 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.


Далее с примерами - как проверить html, даже если вы ничего не понимаете в вёрстке.

Как превратить браузер в notepad за 1 секунду

Время на прочтение1 мин
Количество просмотров138K
Открыть новую закладку, скопировать в адресную строку

data:text/html, <html contenteditable>

и нажать Enter.

Вуаля.


При клике на белом поле появляется курсор, и можно писать мысли, заметки, наблюдения. Романы, стихи…

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

Я выставил счёт $18 000 за статичную веб-страничку… и мне это сошло с рук

Время на прочтение5 мин
Количество просмотров116K
Не так давно я работал контрактником, перескакивая с одного проекта на другой. С некоторыми краткосрочными проектами справлялся за неделю. Другие длились пару месяцев. Они приносили достаточно денег, чтобы взять отпуск. Но я предпочитал короткие, потому что там можно было установить бóльшую часовую ставку. Я не только сам себе хозяин, но и не приходилось слишком много работать, чтобы зарабатывать на жизнь. Даже мои самые высокие ставки были вполне разумными, и я всегда обеспечивал высокое качество обслуживания. Так было до тех пор, пока мне не предложили контракт в большой компании.

Эта компания связалась со мной в срочном порядке, и менеджер сказал, что им нужен человек прямо сейчас. Сотрудник, который обеспечит максимальную производительность после минимального тренинга. Хорошо это или плохо, но таков был мой девиз. Проект мне очень нравился. Он был маленьким, быстрым и хорошо оплачивался.
Читать дальше →

Сложнейшая проблема компьютерных наук: центрирование

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров37K

Заявляю: «Мы, как цивилизация, разучились использовать центрирование». Ну то есть мы, конечно, знаем, как это делать — очень просто:

display: flex;
justify-content: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */

Не спрашивайте, почему вам нужно запомнить четыре слова вместо просто горизонтальное/вертикальное; всё равно лучше, чем было до этого.

Ещё можно использовать сетку:

display: grid;
justify-items: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */

Также не спрашивайте, почему выражение justify-content стало justify-items.
Читать дальше →

Пример — часы на СSS3 без изображений и JavaScript

Время на прочтение9 мин
Количество просмотров92K


Это статья о том, как был сделан демонстрационный пример Wall Clock in Pure CSS3. Изначально, я предполагал написать данную статью в виде пошагового учебного пособия, но в процессе я понял, что такой пример мало для этого подходит. Потому я решил остановиться только на деталях, которые, на мой взгляд, наиболее интересны, а реализацию остального можно посмотреть и в коде.

Для начала собственно сам пример — на codepen.io или на cssdesk.сom

Читать дальше →

Почему HTML считает, что «chucknorris» — это цвет?

Время на прочтение1 мин
Количество просмотров124K
image

Вы никогда не пробовали задавать цвет фона в HTML при помощи разных строк? Например, строка

<body bgcolor="chucknorris"> test </body>

сделает фон документа кроваво-красным во всех браузерах и на всех платформах (jsfiddle).

Кстати, если слово chucknorri тоже приводит к красному цвету, то chucknorr дает желтый!

Стало интересно, почему так происходит? Добро пожаловать под кат.
Читать дальше →

В поисках идеального css-фреймворка. Требования, реализация, maxmertkit

Время на прочтение14 мин
Количество просмотров70K


Я обожаю twitter bootstrap. Прост, местами логичен, достаточно красив, подходит для быстрого прототипирования веб-интерфейсов. Но этого оказалось недостаточно. Взяв twitter bootstrap в большой проект, мне пришлось целиком его разобрать и переосмыслить css-фреймворки как боевые единицы в веб-проектах. В результате переосмысления родились требования к любому css-фреймворку, удобному как верстальщику, так и frontent-разработчику.
Требования и реализация

HTML и CSS безумие [перевод]

Время на прочтение6 мин
Количество просмотров107K

или Создаем 3D миры при помощи HTML, CSS и JS


image
В прошлом году, я сделал демо, которое показывает как можно использовать CSS 3D transforms для создания 3D пространства. Демо было технической демонстрацией того, чего можно достичь при помощи CSS на то время, но я хотел увидеть насколько далеко я могу зайти, поэтому последние несколько месяцев я работал над новой версией с еще более сложными моделями, реалистичным освещением, тенями и определением столкновений. Этот пост документирует то, как я это делал и какие техники применял.

Демо Демо2
Читать дальше →

Тренды, возведенные в культ

Время на прочтение4 мин
Количество просмотров30K
Несколько последних лет ознаменовались появлением большого количества новых терминов, понятий, технологий, течений. Также появилось достаточное количество базвордов, которые заполонили медийное пространство. И заполонили до такой степени, что многие айтишники начинают поддаваться на соблазны и искушения рисующихся золотых перспектив. Но не буду говорить загадками — под катом список понятий, с которыми связано большое количество надежд, холиваров и… заблуждений. Давайте немного разберемся, что к чему.
Читать дальше →

HTML5 как победа научного материализма

Время на прочтение15 мин
Количество просмотров6.3K
Стандарт HTML5 уже почти готов к использованию. Где-то все еще идут жаркие споры по конкретным секциям DOM, видеокодекам, анимации и прочим 3D, но основа HTML5 — его синтаксис, атрибуты и теги — уже устаканились. Эти разделы стандарта не меняются уже многие месяцы; окончательно и по факту их зафиксируют релизы IE9 и FF4, после чего какие-либо их изменения в рамках пятой версии станут невозможны.
Так как костыли для старых версий IE уже созданы и обкатаны, то уже совсем-совсем скоро, начиная новый проект, можно будет открыть свой любимый редактор и, не скрывая наслаждения, написать

<!doctype html>

Сначала, конечно, html5 появится скорее в бложиках энтузиастов, чем на серьезных сайтах, но — вот увидите — через несколько лет в каждой региональной газете появятся объявления типа «ремонт и настройка ПК, заправка принтеров, 1С, сайты на HTML5».

В IT, как и в других областях техники, спецификации бывают хорошие, как у Страуструпа, а бывают плохие и даже отвратительные, как спецификация ECMAScript. По моему скромному мнению, спецификация HTML5 обещает стать воистину великой, просто-таки образцовой вершиной этого бюрократического жанра.
Пролистывая на выходных свежую версию черновика стандарта (от 5-ого марта), я в очередной раз не мог не восхититься изящностью принятых решений и филигранной точностью формулировок родившейся в тяжелых муках спецификации.

Эта статья о том, почему стандарт html5 получился именно такой, и что на самом деле скрывается за его внешне обтекаемыми формулировками.
Читать дальше →

Подборка инструментов для фронт-энд разработки

Время на прочтение2 мин
Количество просмотров134K
Как разработчику, мне очень нравятся инструменты, которые помогают сэкономить время или упростить процесс разработки фронт-энда. В этой статье я собрал мои любимые веб-инструменты для упрощения разработки веб-интерфейсов.

Картинки кликабельны.

Form builder


Формы являются очень важной частью любого веб-сайта, но их верстка может занять продолжительное время. Этот очень удобный инструмент, поможет вам создать красивую веб-форму очень быстро.
image
Читать дальше →

Ближайшие события

Лёгкий сайт или как посадить браузер на диету

Время на прочтение14 мин
Количество просмотров145K

А что если объединить профессионалов, работавших над крупными web проектами, чтобы создать исчерпывающее руководство по оптимизации front-end разработки?
И получить в результате не скучную инструкцию, а что то поинтереснее? А если позвать Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google), и Sérgio Lopes (Caelum) чтобы собрать лучшие практики?

Именно это мы и сделали! Мы научим вас создавать быстрые сайты.

Zeno Rocha, руководитель проекта.


Читать дальше →

Генератор случайных котов за 8 шагов

Время на прочтение8 мин
Количество просмотров76K

Доброго времени, Хабр!
Я всегда очень любил котов, и любил их рисовать, особенно морды кошачьи. Чуть изменишь форму, линию — и совершенно другое выражение, другое настроение. У меня листы А4 были изрисованы под предел. И тут мне недавно стукнуло в голову — а что если сделать генератор морд котов? Чтобы нажал на кнопочку и тебе выкинется случайная морда кота. Как можно более случайная и интересная. Давайте же посмотрим, как же сделать такую штуку.
Прошу под кат, любители котов.
Читать дальше →

Чёртова дюжина советов начинающим верстальщикам. Часть первая

Время на прочтение6 мин
Количество просмотров32K
Доброго времени суток!

Введение


Я являюсь фрилансером. Раньше я не особо задумывался над тем, как и что делают верстальщики. Я делал серверную часть, а мой друг верстал и набивал контент. Совсем недавно мне захотелось попробовать «что и как». Пару дней назад мне на глаза попался материал, который мне очень понравился. Он наглядно обЪяснял, что и как нужно писать. К сожалению, сылку дать не могу, так как я не запаомнил, где располагался сей мануал, но… Казалось бы, можно это и запомнить, но я пошёл ещё одним путём — законспектировал это дело. Собственно, добро пожаловать в мою записку.
Читать дальше →

Создание Doodle jump на HTML5

Время на прочтение7 мин
Количество просмотров16K
Doodle Jump
Здравствуйте, Хабражители!
В этом топике я хочу рассказать о том, как я создал браузерную игру «DoodleJump» на HTML5 без использования каких либо то фреймворков. Для тех кто не знает, DoodleJump — это популярная мобильная игра где главный герой «doodler» бесконечно прыгает вверх по платформам, преодолевая различные препятствия, и собирая бонусы. Эта игра широко распространена почти на всех мобильных платформах, но приличной браузерной версии этой игры нет, поэтому я и решили написать браузерную версию этой игры, пусть даже управляемую клавишами а не гироскопом.
Читать дальше →

Ещё семь фич HTML5, о которых вы могли не знать

Время на прочтение3 мин
Количество просмотров89K
Доброго времени суток!

Все мы достаточно наслышаны об HTML5 и его возможностях. Например, элементы audio и video, которые у всех на слуху. Но несмотря на это, существует парочка тегов, о которых знают далеко не все, и о которых не знал я до недавнего времени. Итак, вот чем я хочу с вами поделиться.
Читать дальше →

Создаём максимально недоступный сайт с идеальной оценкой Lighthouse

Время на прочтение6 мин
Количество просмотров50K
Встроенный инструмент тестирования Google Lighthouse оценивает доступность (accessibility) сайтов по шкале от 0 до 100. Похвально стремиться к максимальной читаемости контента, но оценка 100 не означает, что сайт идеально доступен. Для доказательства я провёл небольшой эксперимент.

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



Lighthouse награждает лучшие сайты зелёным кружочком с цифрой 100, которую вы с гордостью показываете клиентам и друзьям.
Читать дальше →

8 HTML элементов, которые вы не используете (а следовало бы)

Время на прочтение4 мин
Количество просмотров96K
image
Веб сегодня все больше и больше семантический. Но что означает «семантический»? Почему это важно?

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

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

Ок, итак семантическая разметка — это хорошо, но как ее использовать. Лучше всего начать с замены обычных тегов на более выразительные. Давайте посмотрим восемь элементов, которые позволят вам войти в эту игру.
Читать дальше →
1
23 ...