Pull to refresh
52
0
Александр @akira

User

Send message

Меняем цвет выделения текста с помощью CSS.

Reading time1 min
Views93K
Text Selection Color

Одна из интересных функций CSS3, которую мы и рассмотрим сегодня, носит имя "::selection", при помощи которой можно заменить стандартный цвет выделения текста в браузере. Следует заметить что, на момент написания статьи, эту функцию поддерживают только лишь Safari и Firefox, причем отображают совершенно по разному. Однако, на мой взгляд, стоит быть в курсе всех новинок дабы не отставать от этих, так сказать, «вперед-идущих» техник.

Начнем:

::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}


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

[ПРИМЕР]

p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #fff2a8;
}
p.yellow::-moz-selection {
background: #fff2a8;
}


Total votes 58: ↑55 and ↓3+52
Comments40

И снова о speed performance вашего сайта

Reading time3 min
Views1.9K
Уф… наконец-то я решился написать свой первый пост.

В этом посте я хочу рассказать вам о некоторых простых, и в тоже время эффективных способах ускорения загрузки вашего сайта.
Все методы основаны на LAMP + nginx + drupal, но я уверен что всё это верно и для остального тоже.
Разговор пойдёт о первой загрузке сайта, то есть когда у клиента нет ещё кеша в браузере.
Читать дальше →
Total votes 54: ↑47 and ↓7+40
Comments76

CSS: все о сжатии

Reading time1 min
Views1.6K
После статей «Практический CSS/JS: архивируем все!» и «JavaScript: жать или не жать» стало ясно, что проблема уменьшения CSS-файлов в размере действительно актуальна, и общественности хотелось бы аналогичного исследования уже конкретно для такой оптимизации. Которое, собственно, и приведено ниже.

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

График сжатия CSS-файлов

читать дальше на webo.in →
Total votes 41: ↑39 and ↓2+37
Comments29

(X)HTML — структура и семантика кода

Reading time4 min
Views5.7K
Структура правильного HTML-документа базируется на логике, порядке и использовании семантически корректной верстки. Если у вас есть заголовок — используйте для него елементы Heading(h1-h6), если абзац/параграф — paragraph(p). Если у вас есть список — используйте элементы списков (ul/ol), если вы цитируете — используте blockquote или cite. Эти элементы придают смысловое значение разметке, делая ее семантически корректной, в дополнение к правильной структуре.

После составления корректного HTML-макета, используйте CSS для визуального оформления. (Тут уже дело вкуса, некоторые верстают CSS «с лету», а некоторые только после создания HTML-макета)

Стандарт XHTML более строг к синтаксису чем HTML, он не допускает наличия незакрытых тегов, одинарные теги тоже должны быть закрыты (self-closing). Элементы в XHTML прописываются строчными, а не заглавными буквами. Значения атрибутов элементов должны быть указаны в кавычках. Есть и другие отличия, но более подробно я описывать их здесь не буду.
Читать дальше →
Total votes 75: ↑64 and ↓11+53
Comments186

JavaScript: жать или не жать?

Reading time1 min
Views1.8K
После публикации статьи на тему архивирования JS/CSS-файлов для последующей выдачи клиенту, я задумался на тему, какой же метод минимизации (minify) следует использовать. В докладе на конференции ClientSide'2007 не удалось установить четкого критерия, чем и как лучше всего сжимать JavaScript-файлы. Данная заметка посвящена рассмотрению как раз этой проблемы.

Задача



В качестве цели исследования был закреплен анализ всех известных средств статической минимизации JavaScript-кода, после чего нужно было ответить на три основных вопроса:

  • Имеет ли смысл пользоваться каким-либо минимизатором JS-кода?
  • Есть ли среди них универсальное средство, показывающее лучшие результаты в подавляющем большинстве случаев?
  • Если такого средства нет, то каковы критерии использования набора инструментов?


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

читать дальше на webo.in →
Total votes 45: ↑41 and ↓4+37
Comments61

Практический JS: оптимизируем CSS expressions

Reading time1 min
Views1.1K
Примечание: ниже находится перевод статьи «CSS Expression Optimization», в которой автор немного освещает использование и проблематику динамических свойств в CSS (aka CSS expressions). Также автор предлагает способ их оптимизации (исполнение один-единственный раз вместо постоянного выполнения). Далее приведены несколько тезисов с ClientSide'2007 по заявленной тематике. Мои комментарии даны курсивом.

CSS expressions были впервые представлены в Internet Explorer 5.0, который позволял назначать JavaScript-выражение в качестве CSS-свойства. Например, следующий код позволит разместить элемент в зависимости от того, какого размера окно браузера.

#myDiv {
   position:   absolute;
   width:      100px;
   height:     100px;
   left:       expression(document.body.offsetWidth  - 110 + "px");
   top:        expression(document.body.offsetHeight - 110 + "px");
   background: red;
}


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

читать дальше на webo.in →
Total votes 40: ↑30 and ↓10+20
Comments26

Практический CSS/JS: архивируем все!

Reading time1 min
Views2.7K
Примечание: ниже частичный перевод статьи «Compress JavaScript and CSS without touching your application code», в которой описывается статичное сжатие CSS- и JS-файлов на сервере и корректная выдача их затем клиенту. Далее даны мои комментарии с более комплексным решением. Приношу извинения, если для кого-то тема будет слишком знакома или неинтересна: в Рунете нормальной статьи на данную конкретную тематику обнаружить не удалось.

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

  • Проверить, умеет ли клиент принимать файлы в формате gzip-encoded.
  • Обеспечить соответствующий вывод на стороне сервера через gzip-функции, либо уповать на то, что всем этим займется непосредственно Apache.
  • Поиграться с .htaccess, чтобы обеспечить корректный content type.


читать дальше на webo.in →
Total votes 38: ↑36 and ↓2+34
Comments68

Описание более 350 команд Линукс

Reading time2 min
Views41K
На дигге была найдена интересная ссылка (PDF-версия) — описание более, чем 350 команд Линукс (на английском языке). Фактически представляет собой шпаргалку, где команды разбиты на категории. Отмечу, что это не простой список команд, а именно описание с применением. Чтобы не быть голословным приведу несколько примеров.

Читать дальше →
Total votes 74: ↑70 and ↓4+66
Comments89

Разгони свой сайт: gamma-версия

Reading time4 min
Views916
Примерно три недели назад стартовал проект, посвященный методам оптимизации времени загрузки веб-страницы на клиенте.

Почему оптимизация?



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

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

Почему клиентской части?



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


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

WEBoptimizator

Читать дальше →
Total votes 77: ↑74 and ↓3+71
Comments120

JavaScript. Создание объектов

Reading time2 min
Views107K
JavaScript предоставляет разработчикам возможность создавать объекты и работать с ними. Для этого существуют следующие приёмы:
  • Оператор new
  • Литеральная нотация
  • Конструкторы объектов
  • Ассоциативные массивы

Читать дальше →
Total votes 56: ↑42 and ↓14+28
Comments81

Создание простой MVC-системы на PHP 5

Reading time18 min
Views208K

Предисловие


В этом руководстве Вы узнаете, как построить простую систему по архитектуре MVC (Model-View-Controller, Модель-Отображение-Контроллер) на PHP 5.1 с использованием возможностей библиотеки SPL (Standard PHP Library, Стандартная Библиотека PHP).

Читать дальше →
Total votes 13: ↑12 and ↓1+11
Comments116

Парсим микроформаты

Reading time7 min
Views3.8K
Микроформаты — это способ внедрения специфических семантических данных в HTML, который мы используем сегодня. Первый вопрос, который задал бы гуру XML: «А зачем применять HTML, если XML позволяет создать ту же самую семантику?» Я не буду перечислять все причины, по которым XML был бы лучшим или худшим выбором для кодирования данных, или же почему микроформатами был выбран HTML в качестве базы. Эта статья будет сосредоточена на том, как работают базовые правила парсинга, и как они отличаются от XML-ных.
Читать дальше →
Total votes 28: ↑27 and ↓1+26
Comments13

Анти-IE

Reading time4 min
Views4.3K
Я думаю, эти строки ударят по сердцу каждого, кто пробовал когда-либо заниматься версткой, и знает, что такое «кроссбраузерность». Для тех, кто знаком с темой меньше, представлена следующая часть текста.

Доля Internet Explorer на рынке браузеров составляет порядка 80%, притом еще год назад она была на уровне 90%. Это — самый популярный браузер. Почему? Он самый удобный? Большинство тех, кто когда-либо использовал другие браузеры, так не считают. Он самый безопасный? Информационные IT-агентства просто кишат сообщениями об «очередной дыре в IE». Это факт, с которым согласится даже самый упорный. Он функциональный? По функциональности переплюнуть Opera сможет только Firefox с плагинами. Тогда почему?
Читать дальше →
Total votes 123: ↑98 and ↓25+73
Comments502

Teamer и его команда

Reading time2 min
Views2.9K
Ateve Commercial представляет новый проект — Teamer.ru. С его помощью организация командной работы станет намного проще — как для компаний, так и для команд фрилансеров.

Проект предназначен для использования небольшими группами людей, которые решают некие задачи. При его создании мы сделали упор прежде всего на работу с интернет-проектами.
В чем же фишка?
Total votes 59: ↑55 and ↓4+51
Comments225

Практический JS: разгоняем все, что движется

Reading time1 min
Views864
Примечание: ниже находится перевод статьи «Speed Up Your Javascript Load Time», в ней автор рассматривает некоторые наиболее эффективные техники и методы действия по уменьшению времени отработки JavaScript'а на клиенте. Большая часть из них общеизвестна, но в статье важно не просто их перечисление, а общий подход для решения задачи оптимизации времени загрузки. Далее мои комментарии курсивом.

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

Пользователи так ненавидят ждать: им подавай все и сразу. Давайте тогда рассмотрим несколько методов, которые помогут вам «причесать» ваш сайт. Здесь находятся все рабочие примеры, которые будут приведены далее.

читать дальше на webo.in →
Total votes 51: ↑49 and ↓2+47
Comments27

Tabs Generator и Reflection Maker

Reading time1 min
Views2.4K
Вашему вниманию предлагается пара полезных (особенно для новичков) инструментов оформления сайтов. Названия не стал переводить, слишком уж ужасно получается: Генератор табов и Создатель отражений.

1. Концепт и интерфейс Tabs Generator похож на Stripe Generator, который позволяет вам легко создавать табы для меню ваших сайтов за считанные секунды. Можно настроить размер, цвет, радиус закругления, границу и цвет фона.



2. Reflection Maker — простой инструмент для создания Веб2.0-стилизованных изображений с отражением. Просто загрузите изображение с компьютера или укажите его адрес в интернете, откорректируйте степень отражения и необходимый цвет фона перед запуском. Замечу, размер изображения не должен превышать 200 Кб.

Total votes 39: ↑27 and ↓12+15
Comments36

«Пакет дня Debian»

Reading time1 min
Views1.3K
По адресу http://beshenov.ru/debaday/ опубликованы переводы всех публикаций известного блога «Debian Package of the Day». Регулярно появляются новые статьи на русском.

На родственном сайте http://beshenov.ru/potd/ с таким же названием — «Пакет дня Debian» — находится русская версия http://potd.redsymbol.net/ Аарона Максвелла. Здесь в RSS-поток регулярно отправляется описание пакета Debian GNU/Linux. Выписывайте ленту, и читайте каждый день о новом пакете.

Ресурсы оценят пользователи не только Debian, но и, конечно, Ubuntu, Kubuntu, Edubuntu (хотя, в принципе, подробные рассказы о программном обеспечении можно читать, не отвлекаясь на систему управления пакетами именно Debian и родственных систем).
Total votes 13: ↑8 and ↓5+3
Comments5

Flash-Ajax Video Component

Reading time1 min
Views725
В Adobe Labs выложили занятный компонент, благодаря которому ваши AJAX-приложения могут обзавестись flash-видео: вы получите всё необходимое для создания видео-плеера, с возможностью кастомизации HTML и Javascript.
Читать дальше →
Total votes 16: ↑14 and ↓2+12
Comments9

Кропотливая оптимизация PHP-приложений (рассматриваю PHP5, но большинство справедливо и для 4-й ветки)

Reading time9 min
Views8.8K

Когда во сне снится «ой а если сервера не хватит...»


Для начала, Доброй Ночи. Пишу что-то полезное вроде впервые (если не считать разного рода полу-тестов в моём блоге). Человек я допытливый до жути, неожиданно в голову пришло, что могу помочь сэкономить кому-то много времени ;).


танцуем с бубном
Total votes 99: ↑95 and ↓4+91
Comments147

Information

Rating
Does not participate
Location
Санкт-Петербург и область, Россия
Date of birth
Registered
Activity