Обновить
117.31

HTML *

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

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

Фундаментальная уязвимость HTML при встраивании скриптов

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

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


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


<p name="value">

Тут [name] — это имя атрибута, а [value] — это его значение. В статье я буду использовать квадратные скобки вокруг кода, чтобы было понятно, где он начинается и заканчивается. После имени стои́т знак равенства, а после него — значение, заключенное в кавычки. Значение атрибута начинается сразу после первого символа кавычки и заканчивается сразу перед следующим символом кавычки, где бы он не находился. Это значит, что если вместо [value] вы запишете [OOO "Рога и копыта".], то значение атрибута name будет [OOO ], а еще у вашего элемента будет три других атрибута с именами: [рога], [и] и [копыта"."], но без значений.


<p name="OOO "Рога и копыта"."></p>

Если это не то, чего вы ожидали, вам нужно как-то изменить значение атрибута, чтобы в нем не встречалась кавычка. Самое простое, что можно придумать — просто вырезать кавычки.


<p name="OOO Рога и копыта."></p>
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №301 (5 — 11 февраля 2018)

Время на прочтение4 мин
Количество просмотров16K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


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

Машинное обучение контент менеджера

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


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

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

Современный CSS для динозавров

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

— Двигать пиксели в CSS и так было трудно! А теперь мне говорят, насколько круто использовать несемантические названия классов, встроенные стили в HTML и даже писать стили CSS на JavaScript!
[Вставь тут гифку из «Гриффинов»] — Ха!
Иллюстрации из Dinosaur Comics Райана Норта


Как ни странно, CSS считается одновременно одним из самых простых и одним из самых сложных языков для веб-разработчика. Определённо он достаточно прост в начале — вы определяете свойства стиля, значения для конкретных элементов и… это практически всё, что нужно знать! Однако в больших проектах ситуация становится довольно запутанной и сложной, чтобы организовать CSS каким-то осмысленным образом. Изменение любой строчки CSS для стилизации элемента на одной странице часто ведёт к непредвиденным последствиям для элементов на других страницах.

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

Цель этой статьи — показать исторический контекст, как развивались техники и инструменты CSS до их нынешнего состояния в 2018 году. Поняв эту историю будет легче понять каждый подход и как с выгодой его использовать. Итак, начнём!
Читать дальше →

Ищем поддержку hover на css

Время на прочтение2 мин
Количество просмотров14K
image Доброго времени суток, дорогие хабрахабровцы!

При создании адаптивной версии сайта, часто бывают ситуации, когда надо знать: поддерживает ли браузер пользователя hover, или нет. К примеру, выпадающее при наведении подменю, или же различные анимации, привязанные к событию hover — все это нужно только на ПК. На touch-устройствах поведение элементов должно меняться. Так как же задать определенные стили только для устройств с поддержкой hover на css, не забывая о кроссбраузерности?

VDOM своими руками

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

Привет.


У многих frontend-разработчиков бытует мнение, что технология VDOM, которая, в частности, используется в React.js, работает как черный ящик. Так же на просторах npm есть куча библиотек, реализующих эту технологию, однако вот как по мне — так в них черт ногу сломит. Сама тема VDOM-а меня заинтересовала некоторое время назад и я начал экспериментировать наощупь, сам. В конечном итоге все кончилось тем, что я сделал свою реализацию VDOM-а и встроил в свой фрейморк для датагридов (о нём я как-нибудь напишу). Это оказалось не просто, а очень просто и в этой статье я детально объясню что к чему, зачем и почему. И как оно работает тоже расскажу. Ныряйте под кат и мы предадимся интересному опыту.

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №300 ( 29 января — 4 февраля 2018)

Время на прочтение3 мин
Количество просмотров20K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


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

W3View — библиотека на Javascript, для которой был создан HTML

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

Да, ещё одна новая библиотека на JS, хочу поделиться. Фидбека жажду, любого, лучше конечно позитивного конструктивного.

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

Новый облегчённый язык разметки текста на основе парных кавычек (pq)

Время на прочтение8 мин
Количество просмотров19K
Я не могу объяснить, откуда пришла идея такого языка разметки, но то, что получилось в итоге — весьма… занятно.

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

Итак, перейду к описанию самого языка. [Если кто-то вдруг не понял, о чём вообще идёт речь, то к облегчённым языкам разметки относятся Markdown, BBCode, вики-разметка и т.п.]
Читать дальше →

Чеклист фронтенд-разработчика

Время на прочтение12 мин
Количество просмотров71K
Глеб Летушов, редактор-фрилансер, адаптировал для блога Нетологии чеклист с Github от David Dias. Этот чеклист уже переводили, но так как на Хабре его нет, мы решили, что он пригодится. В чеклисте собран полный список элементов, которые необходимо проверить перед запуском и публикацией сайта.



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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №299 (22 — 28 января 2018)

Время на прочтение4 мин
Количество просмотров16K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


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

Не вебпаком единым

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

Представляем лог доклада с OrelJS о настройке удобной среды разработки с использованием SystemJS. У сборки на основе Webpack полно недостатков, в докладе представляется альтернативный подход на основе SytemJS и JSPM.


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

Thinking in HTML

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

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


LaTeX поразил меня прежде всего размером пакета texlive-full. Затем — сложностью вставки кавычек-ёлочек: надо каждый раз переключаться на латиницу. Я попробовал начать писать эту статью в LaTeX, и понял, что это не нужно. Потому что а) у Хабра другие требования (например, кавычки Хабр делает сам), и б) у меня тоже другие требования: если статья не для Хабра, я всё равно буду ставить обычные кавычки, а потом заменю их на ёлочки макросом в Виме.


Думаю, так рассуждаю не я один — что удобнее во время написания текста ставить какие-то простые метки, обозначающие кавычки, ссылки, жирность, нумерованный список… А потом заменять эти метки на универсальную разметку типа HTML с помощью, допустим, Markdown.pl.

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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №298 (15 — 21 января 2018)

Время на прочтение4 мин
Количество просмотров18K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


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

Недокументированные приемы CSS

Время на прочтение8 мин
Количество просмотров56K
Всем привет! Зовут меня Дмитрий Григоров. Работаю фронтедером в Райффайзенбанке в команде RBO PRO. Я расскажу и покажу вам, как можно творчески применять данные возможности CSS. В статье мы рассмотрим следующие темы:

  • Фоны и рамки;
  • Фигуры;
  • Визуальные эффекты.

Веб-компоненты: обзор и использование в продакшне

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

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


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


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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №297 (8 — 14 января 2018)

Время на прочтение4 мин
Количество просмотров17K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №296 (1 — 7 января 2018)

Время на прочтение4 мин
Количество просмотров18K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


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

Путь верстальщика: с нуля до сеньора

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

Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик.
Многократно я слышал мнение, что верстка — удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти) веб-проекта. Это то, что пользователи видят в первую очередь. На текущий момент качественная вёрстка (особенно проектирование блоков) в крупном проекте требует большого количества различных навыков.


В данной статье представляю схему развития верстальщика


image
[большая по клику]
Само собой, это не всеобъемлющая и единственно верная схема. Есть ещё целая гора связанных навыков, релевантных технологий и так далее. Градация является субъективной.

Описание пути код катом

Дайджест свежих материалов из мира фронтенда за последнюю неделю №295 (25 — 31 декабря 2017)

Время на прочтение3 мин
Количество просмотров21K
Предлагаем вашему вниманию последнюю в этом году подборку с ссылками на новые материалы из области фронтенда и около него.


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