Когда CSS-код с душком

Перевел тут на досуге очередную статейку.

На этот раз от британского разработчика Гарри Робертса (Harry Roberts). Оригинальное название «Code smells in CSS».

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

Недавно Крис Койер (Chris Coyier) ответил на чей-то вопрос:

На основании чего вы можете сказать, что от вашего кода попахивает? Каковы признаки того, что код малофункционален или что веб-разработчик выполнил работу нехорошо? На что вы смотрите в коде, чтобы определить его качество?

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

Свои будни я трачу работая в BSkyB. Занимаюсь большими веб-сайтами. Разработка клиентской части одного из последних заняла у меня более года (да и все еще продолжается). Для меня, в моем мире, плохой CSS — очень специфичная и хлопотная штука. Когда вы непрерывно работаете над одним и тем же сайтом месяцами, вы не можете позволить себе писать плохой код, будь то CSS или что-то другое, любой некачественный код нуждается в исправлении.

Читать полностью...

Какое решение для подстраивающихся изображений вы должны использовать?

Перевел тут на досуге очень полезную статью с блога Криса Койера (Chris Coyier) о существующих методах публикации изображений в концепции «подстраивающегося» (responsive) и «адаптивного» (adaptive) веб-дизайна.

Долго думал как по смыслу разграничить понятия «responsive» и «adaptive» применительно к изображениям, так ничего стройного не придумал :) Решил переводить «responsive» как «подстраивающийся» уж больно по-человечьи выглядит перевод «responsive web design» как «отзывчивый веб-дизайн»

Но всетаки некоторую ясность можно почерпнуть из статьи (ее перевод на хабре, где опять же, «responsive» переводят как «отзывчивый») о различии между подстраивающимся и адаптивным веб-дизайном. Хотя я согласен с мыслью Артёма Сапегина о том, что главное, чтобы все работало как надо, а название — дело второе и не очень важное.

Далее, собственно, перевод статьи Криса.

Читать полностью...

Сказ о двух вьюпортах — часть вторая

Наконец дошли руки до второй части статьи Питера-Пауля Коха (Peter-Paul Koch) A tale of two viewports — part two. Далее, собственно, перевод.

Читать полностью...

Сказ о двух вьюпортах — часть первая

Решил попрактиковаться в переводе статей. Выбор пал на quirksmode.org и статью A tale of two viewports — part one. Перевод второй части про мобильные браузеры — планируется ;) Далее, собственно, перевод.

В этом мини-цикле статей я объясню, как работают вьюпорт и ширина различных важных элементов страницы, к примеру, таких как <html> элемент, а также, как они соотносятся с окном браузера и экраном монитора.

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

Читать полностью...

Создание шаблона «1С-Битрикс»

Этот пост, представляет собой мою интерпретацию устройства шаблона CMS «1С-Битрикс» и процесса его создания, попытку в более-менее сжатой форме и одновременно наиболее подробно и наглядно рассказать о создании основного (базового) шаблона-каркаса Битрикс.

В CMS «1С-Битрикс» шаблонизация устроена довольно удобным образом. Здесь логика почти полностью отделена от представления. Все максимально просто и наглядно.

Более глубокое представление о шаблонизации, конечно же, даст изучение документации, которой на сайте «1С-Битрикс» предостаточно. К примеру, помимо мануалов для разработчиков и для простых смертных пользователей :), существует неплохой набор курсов, намного снижающий порог вхождения для новичков.

Читать полностью...

Сделать стартовой или добавить в избранное

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

Периодически я сталкиваюсь с определенными странностями в макете, нарисованными просто из за банального незнания дизайнером, самых что ни на есть, основ того, что с его макетом делают дальше :)

Одной такой странностью является присутствие в макете двух ссылок (когда это делают бездумно, то их обычно две) — «сделать стартовой» и «добавить в избранное». Не знаю отчего в подкорке многих недалеких дизайнеров образовалось это стойкое сочетание, но оно имеет место быть даже сейчас.

Читать полностью...

1984

Джордж Оруэлл - «1984»

В окончании поста размещены спойлеры из фильма, снятого по этой книге, так что вы предупреждены ;)

Эта книга, написанная Джорджем Оруэллом в 1949 году, стала первой из жанра фантастической тоталитарной антиутопии, мною прочитанной.

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

Читать полностью...

Запоминание состояний элементов с помощью cookie

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

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

В этом посте собственно я и буду разбираться с этой задачей, в итоге должно получиться что-то вроде этого.

Читать полностью...

К черту все! Берись и делай!

К черту все! Берись и делай!

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

Читать полностью...

Кросс-браузерное определение реальных размеров изображения с помощью jQuery

Кросс-браузерное определение реальных размеров изображения с помощью jQuery и вписывание его в область с заранее заданными размерами. Должно получиться следующе

Итак, дано: на странице имеются уже загруженные изображения немаленького размера.

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

Читать полностью...