Обновить
111.74

HTML *

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

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

Верстаем новостной сайт с помощью Flexbox

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

Примечание: этот материал представляет собой свободный перевод статьи Джереми Томаса о том, как просто работать с Flexbox на примере верстки шаблона новостного сайта.

Поверьте, нет никакой необходимости в детальном разборе всех аспектов работы с Flexbox, если вы хотите начать им пользоваться уже сейчас. В этом руководстве автор собирается познакомить вас с некоторыми свойствами Flexbox и сделать «новостной лейаут» наподобие того, который вы могли видеть на сайте The Guardian.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №234 (24 — 30 октября 2016)

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


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

Select / Multiselect без JS

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

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


Конечно, есть огромное количество решений, представляемых фреймворками/библиотеками (тот же бутстрап). Но все они предполагают наличие JSа. Разумеется, в этом нет ничего страшного/плохого, но я попробовал сделать стилизуемый селект без JS в качестве фоллбэка на случай, если js по каким-либо причинам сломается.

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

Слайд-шоу без JS

Время на прочтение3 мин
Количество просмотров21K
Вам приходилось когда-нибудь делать на сайте слайд-шоу? Думаю да, именно поэтому я решил написать эту статью. Иногда мне приходится делать это на сайтах, но я пока не знаю js и обычно ищу, скачиваю исходники и пытаюсь их настроить.
Читать дальше →

Валидация в HTML5

Время на прочтение4 мин
Количество просмотров39K
Интерактивные веб-сайты и приложения невозможно представить без форм, которые позволяют нам общаться с нашими пользователями и получать данные, необходимые для обеспечения гладких сделок с ними. В то время как мы можем улучшить удобство и простоту использования наших форм с удачно выбранным шаблоном проектирования UX. HTML5 также имеет собственный механизм для ограничения проверки, который позволяет нам поймать ошибки ввода прямо на фронт энде.

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

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

Небольшой препроцессор HTML

Время на прочтение1 мин
Количество просмотров3.8K
Было принято решение написать препроцессор HTML, который просто убирал бы закрывающие теги и использовал питоний синтаксис определения позиции блока.
Читать дальше →

Гибридные Android-приложения для малышей

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


Сегодня статья о гибридных Android-приложениях для малышей. Во всех смыслах этих слов. Мы поговорим о написании простейшего гибридного (Java+HTML+Javascript) Android приложения для опросов учеников начальных классов об их рюкзаках. Предполагается минимальное знание основ Java, HTML и JavaScript. Если Вы Android-разработчик, хоть с минимальным опытом – Вам эта статья вряд ли будет интересна, можно не открывать. Всех остальных, кто еще только начинает или думает начать разработку под Android, и кому интересны основы разработки под Android, прошу под кат.
Читать дальше →

Использование CSS Flexbox для позиционирования блоков на странице

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

Задача


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

image

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

Как мы всех на юх послали (ну или продолжение истории про шаблонизотор)

Время на прочтение8 мин
Количество просмотров13K
Вообще я очень любвеобильный человек, особенно в плане различных плюшек. Но что-то во мне переворачивается, как только это вот (еще секунду назад мне искренне симпатичное) обретает ореол святости и становится предметом преклонения. В этот самый момент мой внутренний голос (да я слышу голоса) строго так мне говорит – «пойдем-ка мы отсюда!».

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

Позавчера был JQ. Ну полезная ей богу вещица. Но стали появляться специалисты искренне считающие, что JQ – это часть JavaScript и что без оного привязка событий к узлам вовсе невозможна (шепот в зале: потомушта там какие-то проблемы с кроссбраузерностью, цссс). И стали возводиться церкви с храмами, и стал JQ с икон на нас грешных смотреть, и книги писались с названием «Программируем JQuery» (JQ «программируем», Карл!).
Читать дальше →

Событие при изменении размеров блочного элемента — resize

Время на прочтение1 мин
Количество просмотров14K
Иногда нужно отслеживать поведение блочного элемента и при изменении его размеров запускать дополнительный код. Актуально при адаптивной вёрстке или подгрузке контента через AJAX, когда размеры блочного элемента заранее не известны. Например у меня адаптивная вёрстка, нужно чтобы при уменьшении ширины окна некоторые пункты основного горизонтального меню перемещались в дополнительное вертикальное меню, которое открывается при наведении мышкой. В моём случае учитываются border, padding, scrollbar и content блочного элемента, но вы можете изменить код исходя из ваших задач.
Читать дальше →

Инструментарий для front-end разработки под Linux

Время на прочтение6 мин
Количество просмотров25K
Доброго времени суток, господа девелоперы! В этой статье я расскажу, как сделать разработку под Linux действительно комфортной и удобной, чтобы она приносила только боль удовольствие.

Чего мы добиваемся:
Просматриваем страницу в браузере и правим в текстовом редакторе HTML и CSS/SASS. Код извлекаем напрямую из PSD, попутно корректируя до PixelPerfect прямо в браузере. При сохранении SASS автоматически преобразуется в CSS и загружается на сервер. Необходимые картинки из PSD шаблона вырезаем в два клика, после чего они так-же автоматически загружаются на сервер. Как этого добиться менее чем за пол часа? Я расскажу вам!

Сразу хочу предупредить вас, если ваш опыт работы более нескольких лет и вы являетесь достаточно опытным front-end'ером, то ничего нового вы в этой статье не найдете. Она предназначена для людей, которые относительно недавно присоединились к GNU/Linux сообществу или только решили к нему примкнуть.

Краткое содержание


  1. Выбор браузера
  2. Установка расширений для Firefox
  3. Выбор текстового редактора
  4. Необходимые расширения для Sublime Text 3
  5. Дополнительные инструменты и оптимизация системы
Читать дальше →

Как Yahoo перешла от Flash к HTML5 в видео

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


Adobe Flash когда-то был стандартом де-факто в мире веб-медиа, но со временем индустрия отвернулась от него из соображений безопасности и производительности. Требовать у юзеров устанавливать плагин для воспроизведения видео — тоже плохая практика. В результате, мы переходим к HTML5 для видео.


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


  • Адаптивный битрейт (ABR): Алгоритм определяет пропускную способность канала пользователя, мощность процессора, размер плеера и т.д. в реальном времени и подстраивает параметры видео.
  • Изменяемый размер буфера: возможность, позволяющая нам управлять временем, которое нужно для запуска воспроизведения.

Эти возможности позволили индустрии стриминга видео перейти от Flash к HTML5 и JavaScript.


Наш видео-плеер в Yahoo использует HTML5 во всех современных браузерах. В этом посте мы опишем наш путь к реализации этих возможностей, расскажем о проблемах, с которыми столкнулись, и опишем возможности, которые мы видим.

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

Canvas Gauges 2.0

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

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


Как и раньше, библиотека OpenSource и распространяется по лицензии MIT, так что берите, используйте и, вообще, далайте что хотите без каких-либо ограничений.


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

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

Быстрый рендеринг с DOM шаблонизаторами

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

Борис Каплуновский (BSKaplou)


Борис Каплуновский

Я довольно долго работал над докладом и старался сделать его настолько противоречивым, насколько это возможно. И сразу начну с противоречия – я в корне не согласен с тем, что веб-компонентами можно пользоваться. Уже поднимался вопрос о 300 Кбайтах, я глубоко уверен, что 300 Кбайт для страницы Javascripta – недопустимо много.

Сегодня я расскажу о довольно глубоком путешествии во фронтенд. Началось это путешествие тогда, когда я обнаружил, что фронтенд aviasales.ru тормозит, и надо что-то делать. Это путешествие началось года полтора-два назад, и вещи, о которых я буду рассказывать, – это сжатое повествование того, что я узнал.

Самым критичным, на мой взгляд, в производительности фронтенд-приложений является рендеринг. Все мы знаем, что работа с DOM – это такая вещь, которую нужно стараться избегать. Чем больше вы делаете вызовов к DOM API, тем медленнее работает ваше приложение.

PostCSS. Будущее после Sass и Less

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

Андрей Ситник (Iskin, Злые марсиане)


Андрей Ситник

В 2013 году Holowaychuk анонсировал свой проект Rework в статье «Модульный CSS-препроцессинг с Реворком» (http://tjholowaychuk.tumblr.com/post/44267035203/modular-css-preprocessing-with-rework ).

Как раз тогда я искал какой-то инструмент для того, чтобы сделать автопрефиксер. Когда я прочитал эту статью, я был поражен, потому что это был действительно революционный подход, он менял все. И поэтому первые версии автопрефиксера базировались на Rework’е. Но, к сожалению, Rework – это был Proof Of Concept, это было первое поколение, чтобы доказать, что это вообще работает. Поэтому мы его жестко форкнули, переманили всех разработчиков, устроили маленькую революцию и сделали PostCSS.

PostCSS – это второе поколение модульного процессора.

Верстка: отображаем пользовательский контент

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


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

Какие ссылки использовать: абсолютные или относительные?

Время на прочтение3 мин
Количество просмотров35K
Имеется в виду: какие адреса использовать для переходов внутри сайта? Допустим, мы хотим создать на домене site.ru с уже работающим сайтом другой подсайт, файлы которого будут находиться в папке shop. URL этого подсайта будет такой:

http://site.ru/shop

Почему мы усложнили задачу, будет ясно в конце данной статьи.

1. Абсолютные ссылки (absolute)


href="http://sites.ru/shop/" — ссылка на главную страницу магазина
href="http://sites.ru/shop/t-shirts/t-shirt-life-is-good/" — cсылка на страницу товара
Читать дальше →

Браузеры наши меньшие, или Нам нужно серьёзно поговорить

Время на прочтение15 мин
Количество просмотров38K
Вадим Макеев

Вадим Макеев (Opera Software)


Меня зовут Вадим Макеев (pepelsbey). Я работаю в компании «Opera Software». Мы выпускаем браузеры, в частности, десктопные, мобильные и т.д.

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

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

Я, как пользователь Интернет (регулярно, много, года с 2001-го только этим и занимаюсь) испытываю проблемы, когда пользуюсь вебом. Главные проблемы состоят в том, что люди, которые разрабатывают веб (т.е. мы с вами и я лично), в некоторых ситуациях закрывают информацию от пользователя, не дают людям нормально ею пользоваться, блокируют доступ… Каждый день так или иначе это делают. Решают ли они не поддерживать «ie 6», решают ли сделать клиентский рендеринг или еще что-нибудь такое – то, что хорошо для одних, но плохо для других, и решают вместо сайта запустить нативное приложение… Это все приводит к некоторым проблемам.

Книга «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.»

Время на прочтение5 мин
Количество просмотров41K
image Привет, Хаброжители! У нас вышло второе издание книги Бена Фрэйна:

Книга охватывает все важные особенности адаптивного веб-дизайна. Методология адаптивного веб-дизайна расширяется в ней за счет применения новейших, наиболее полезных технологий, предоставляемых HTML5 и CSS3, как никогда ранее повышающих компактность и облегчающих сопровождение создаваемых конструкций. В книге также даются объяснения самым востребованным и передовым методам написания и предоставления кода, изображений и файлов.

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

О чем эта книга


Глава 1 «Основы адаптивного веб-дизайна» представляет собой краткий обзор ключевых составляющих в создании программных продуктов, отвечающих требованиям адаптивного веб-дизайна.
Читать дальше →

Modest — разработка открытого движка HTML рендера на «голом» Си

Время на прочтение5 мин
Количество просмотров18K
Всем привет! Меня зовут Александр Борисов и я разрабатываю Modest — открытый движок HTML-рендера на «голом» Си без использования внешних зависимостей (далее движок). Сразу хочется пояснить, что значит «без внешних зависимостей» — весь код пишется с нуля, код нигде не заимствован.

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