Человек изобрел компьютеры, чтобы они выполняли за нас большую часть повторяющихся задач. Это позволяет нам экономить много времени и использовать его с максимальной пользой. И, так как эта статья о front-end разработке, в этой области таких задач много: компиляция css- и js-препроцессоров, сборка спрайтов, оптимизация изображений, минификация файлов и др.

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

Social-feed

В настоящее время практически на каждом сайте есть социальный блок, где отображаются последние посты из twitter, последние фото из instagram или обновления из facebook. Зачастую эти социальные блоки работают на основе iframe, что не позволяет гармонично интегрировать обновления из социальных сетей с основным контентом сайта. В случае, если необходимо отображать обновления только из facebook или только из instagram, то существуют jQuery плагины с редактируемым внешним видом (этот, или этот). Если вам необходимо отображать обновления сразу из нескольких социальных сетей, то на помощь приходит Social-feed.

При попытке отредактировать этот старый пост слетело всё форматирование. Может быть я его когда-нибудь исправлю.

Я потратил несколько месяцев на борьбу с глюками Git-svn и обдумывание разных вариантов, прежде чем пришёл к этому методу организации рабочего процесса с сайтом — простому, гибкому и удобному в работе.

Основные преимущества:

• Делая push из удалённой копии мы автоматически обновляем live-копию сайта
• Правки файлов на сервере не будут разрушать историю коммитов
• Простота, не нужны особые правила выполнения коммитов
• Можно применить к уже запущенному сайту, без повторного деплоя или перемещения файлов

Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.

Я веб-разработчик с опытом работы 2 года, работаю в firefox с firebug. Верстаю по технике Pixel-perfect. Почему?

• Быстрее создается страница, чем когда бегаешь между браузером и PSD.
• Гораздо качественнее получается результат, от чего и ваш клиент в восторге аж придраться не к чему.
• Банально удобнее видеть макет и тут же позиционировать элемент под ним.

Раньше я размещал изображение Html кодом. Но как неудобно выделять элемент в firebug-е если поверх всего лежит изображение. Приходилось каждый раз лезть в стили и прятать картинку. Pixel-perfect plugin для firefox почему-то не работал.
Тогда появилась идея создать скрипт, который будет прятать по short-cut(hotkey)-ю изображение. И пока создавал скрипт появлялись новые идеи для модернизации удобства использования. В итоге получился: Pixp

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

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

Команда разработчиков PayPal некоторое время работала над решением ряда проблем доступности в Bootstrap 3, итогом чего стало появление accessibility плагина, который недавно был выложен в открытый доступ. Фактически он позволяет реализовать доступность интерфейса на базовом уровне без каких-либо особых знаний в этой области.

Привет, Хабр! В этот раз мы поговорим о стилизации инпутов без картинок и JS, особенностях вертикальных отступов, CSS счетчиках, необъятных возможностях в именовании классов, а также расскажем, как улучшить анимацию на слабых устройствах.

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

Удалить это куки практически невозможно! (Все возможно, конечно, но слишком много мороки)

Куки хранятся в:

• HTTP Cookies;
• Local Shared Objects (Flash);
• Сохранение куки в значениях RGB автосгенерированных и форсированно кэшированных PNG с использованием HTML5 canvas;
• Сохранение куки в Web History;
• HTML5 Session Storage;
• HTML5 Local Storage;
• HTML5 Global Storage;
• HTML5 Database Storage через SQLite.

При удалении из одного из этих мест кука автоматически восстанавливается из оставшихся. Работает даже если пользователь сменит браузер (через Local Shared Objects из Flash).

Описание (на английском) и демо: http://samy.pl/evercookie/.
Попробуйте удалить куки, почистить систему и зайти назад.



Как пользоваться?

Moment.js это отличная библиотека для работы с датами в JavaScript. Примеры под катом.

Tinyicon это небольшая библиотека для манипуляции с favicon сайта для передачи информации о новых событиях. Для браузеров не поддерживающих canvas счетчик отображается в title страницы.

Кто-то вчера шутил, а кто-то занимался реально полезными вещами. Как например болгарский разработчик Мартин Ангелов, опубликовавший впечатляющий обзор JS библиотек:
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/
Настоятельно рекомендуется к обозрению.
PS Куда-то пропал тип топика «Ссылка» :(

От переводчика: Не смотря на то что оригинал данной статьи датирован январем 2009 года, она не потеряла актуальности и теперь. Я надеюсь что даже те, кто используют JavaScript не первый год, почерпнут для себя что-то полезное.

1. Используйте === вместо ==

В JavaScript существует два разных типа операций сравния: === / !== и == / !=. Считается хорошим тоном всегда использовать первую пару для сравнения.

“Если два операнда одного типа и значения, то === вернет true, а !== false”
JavaScript: The Good Parts

Как часто Вы используете конструкции вида «5 минут назад», «Полчаса назад» на вашем сайте? А что если пользователь открыл вкладку и забыл про нее на пару часов? «5 минут назад» явно теряет свою актуальность.
Именно для того чтобы исправить это досадное недоразумение служит uptodate.js

Вместо начала.

Недавно пришлось заняться написанием приложения по работе. Раньше работал исключительно с PHP и web-мордами, однако быо требование сделать полноценное windows-приложение с авторизацией, использованием forms и прочей «петрушки». Эту статью я пишу на отвлеченном абстрактном примере с целью сделать ман доступным и простым. Собственно, здесь важен сам ход действий, нежели само приложение.

Задача была без веб-интерфейса работать с табличными данными, получаемыми с сервера. Доступные инструменты: web-сервер Apache + PHP + MySQL и C#-приложение на стороне клиента.

Профессионалам вряд ли будет интересно. А вот новичкам, мне кажется, может пригодиться. Очень надеюсь, что я не перемудрил с воплощением идеи.
Кому интересна реализация связки — прошу под кат.

Статей про SASS(SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS-статей меня "зацепила", и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.

Что такое SCSS

SCSS — "диалект" языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся "про запас".

В настоящее время в сфере обеспечения безопасности веб-сайтов и приложений возникла очень интересная ситуация: с одной стороны, некоторые разработчики уделяют особое внимание безопасности, с другой, они напрочь забывают о некоторых видах атак и не считают ошибки, позволяющие выполнить данные атаки, уязвимостями. Например, к такой категории можно отнести CSRF (Сross Site Request Forgery). Эта атака позволяет производить различные действия на уязвимом сайте от имени авторизованного пользователя. Если вы не слышали о таком, то я рекомендую прочитать соответствующую статью в Википедии, чтобы иметь общее представление об этом виде атак. Основная часть статьи предназначена тем, кто обеспокоен правильной защитой своих сайтов от CSRF.

Перевод статьи «JavaScript insertAdjacentHTML and beforeend», David Walsh.

Если вы не знали: чертов DOM очень медленный. А по мере того, как наши сайты становятся все более динамичными и AJAX-использующими, нам становиться все важнее управлять DOM древом с наименьшим ущербом в производительности. Недавно я написал статью о DocumentFragment'ах. Это разумный подход к объединению списка дочерних элементов под неким «псевдо-элементом», для дальнейшего помещения в реальный DOM элемент. Еще один замечательный метод для работы с элементами insertAdjacentHTML: это способ добавлять элементы в родительский элемент не задевая других его потомков.

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


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

Я не люблю CSS. Он простой и понятный. Это движущая сила Интернета, но он слишком ограниченный и им трудно управлять. Пришло время привести этот язык в порядок и сделать его более полезным, используя динамический CSS при помощи LESS.
Объясню свою позицию на примере. Почему бы вместо использования #FF9F94 для получения темно-персикового цвета просто не хранить значение этого цвета в переменной для её последующего использования? Что бы перекрасить сайт достаточно будет изменить значение переменной всего в одном месте и всё.
Другими словами: это будет очень изящно, если мы будем использовать немного программирования и логики в CSS, что бы сделать его более мощным инструментом. Хорошо, что это всё возможно с использованием LESS.