Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «developments»
Font boosting в мобильных браузерах 2014-03-04 15:00:26
Я хочу рассказать о том, что такое font boosting в мобильных браузерах, к какой ...
+ развернуть текст сохранённая копия
Я хочу рассказать о том, что такое font boosting в мобильных браузерах, к какой неожиданной проблеме он может привести при web-разработке и как с этой проблемой бороться.
Рассмотрим пример из реальной жизни:
 Пример 1:
- Имеется вновь созданный элемент с
display: inline-block.
- Измерим его ширину через свойство
offsetWidth.
- Поменяем его цвет.
- И, вдруг, в Google Chrome for Mobile, после изменения цвета ширина элемента резко увеличивается, переставая соответствовать той, что была измерена всего двумя строчками выше!
Показать код<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset=utf-8" />
<title>Проблема с Font boosting в Google Chrome for Mobile</title>
<script type = "text/javascript">
window.onload = function ()
{
var spnSpan1 = document.getElementById ("span-1");
alert ("Ширина элемента до изменения цвета: "+ spnSpan1.offsetWidth +"px"); //59px
spnSpan1.style.color = "red";
alert ("Ширина элемента после изменения цвета: "+ spnSpan1.offsetWidth +"px"); //186px (WTF?!)
}
</script>
</head>
<body>
<p>
<span id = "span-1" style = "display: inline-block;">Элемент</span>
</p>
<!--
На странице должно быть достаточно текста.
Если убрать этот абзац, глюк перестанет возникать.
-->
<p>
abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
</p>
</body>
</html>
Смотреть пример on-line.
(Для просмотра примеров из этой статьи воспользуйтесь Google Chrome for Mobile или обычным Google Chrome в режиме эмуляции смартфона, например Apple iPhone 5 или Samsung Galaxy Note II).
Почему же изменение цвета элемента приводит к увеличению его размера?! Причиной этого странного поведения, как раз, и является font boosting. Что же это такое?
Тэги: boosting, chrome, developement, font, google, inline-block, javascript, mobile, reflow, веб, веб-разработка, мобильный
Разработка «браузерки» — уровень представления 2014-03-04 11:40:26
Единственный участник проекта, который аналогично остальным выполнял большой объем работ, но ...
+ развернуть текст сохранённая копия
Единственный участник проекта, который аналогично остальным выполнял большой объем работ, но про работу которого я могу сказать настолько мало – художник. Точнее, за несколько месяцев до старта у нас оказалось уже два художника, но мое понимание их принципов работ от этого не увеличилось.
Я, несомненно, вижу, насколько много им пришлось сделать для проекта, но я вижу только конечный результат в виде вороха иллюстраций, оформления страниц, иногда – промежуточные наброски. С художником мы контактируем настолько мало, что историю переписки «скайпа» можно уложить в пару страниц документа doc за все время работы над проектом. Все потому, что мы с художником – совершенно разные по характеру, и если координатор может подстроиться под общение с каждым участником команды, то мы с художником, грубо говоря, несовместимы.
Для описания части работ с точки зрения художника, пришлось провести полномасштабное расследование, позволяющее узреть и понять основные тонкости его работы. При этом в статье присутствует авторский текст самого художника, поскольку без его видения своей работы над проектом, данная статья получилась бы неполной.
Читать дальше →
Тэги: development, game, браузерные, веб-разработка, графика, игры, иллюстрации, разработка
ZOO Extension 2014-02-28 15:13:25
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore ...
+ развернуть текст сохранённая копия
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Тэги: application, builder, cck, cms, content, development, joomla, management, web, wordpress
Вышла Derby 0.6.0-alpha3 2014-02-23 15:29:56
 + развернуть текст сохранённая копия
DerbyJs — реактивный фулстек javascript-фреймворк. О нем неоднократно писали на хабре — материалы по Derby. Буквально пару дней назад в репозитории Derby произошла смена основной ветки. Теперь версия 0.5 отошла на задний план, 0.6 — основная.
Не в традициях команды разработчиков заниматься пиаром — изменения произошли тихо и незаметно. А что же поменялось?
Подробности
Тэги: derby.js, derbyjs, development, fullstack, javascript, веб-разработка
Промо-сайт для мобильного приложения. Часть 2 2014-02-20 14:26:21
Дисклеймер
В предыдущей статье “Промо-сайт для мобильного приложения. Часть 1” я ...
+ развернуть текст сохранённая копия
Дисклеймер
В предыдущей статье “Промо-сайт для мобильного приложения. Часть 1” я изложил своё видение и теперь хотел бы узнать у вас какой должна быть landing page для продуктов мобильной индустрии?
От теории к практике
В конце поста список вопросов с вариантами ответов. Всего их 5. Уверен, вам и самим будет интересно узнать, как отвечали другие. Вы увидите это сразу после ответа на каждый из вопросов.
Это важно для чистоты эксперимента
Примеры даны лишь для иллюстрации тех ответов, где они нужны. Не оценивайте данные конкретные сайты.
Тратьте на выбор ответа от 1 до 3-х секунд после их прочтения и просмотра примеров, также, как это делает посетитель, отвечая себе на вопрос: “интересен ему этот сайт или нет?”.
Читать дальше →
Тэги: development, mobile, web-дизайн, web-разработка, веб-дизайн, веб-разработка, мобильные, приложения, промо-сайт
Главная / Главные темы / Тэг «developments»
|
Взлеты Топ 5
Падения Топ 5
|
