Совсем недавно у меня появилась задача защитить web-приложение полностью построенное на ajax от CSRF-атак.

Каков же механизм такой атаки? Суть заключается в выполнении запроса с другого сайта под авторизационными данными пользователя. Например, у нас есть действие удаления своего аккаунта example.com/login/dropme. Если защиты от CSRF атаки нет, мы можем на нужном нам сайте разместить тег:

<img src="http://example.com/login/dropme">

Сразу после того как пользователь зайдет на приготовленную нами страницу и подгрузит содержимое img, его аккаунт на example.com будет удален. О защите от этого я расскажу под катом.

Будущее не плохое и не хорошее, оно такое же как и мы

После прочтения некоторых статей на Хабре на тему «будущее...» WEB 3.0, Следующий шаг Всемирной паутины (часть 1), , Будущее социальных сетей, Золотой век Кремниевой долины окончен, и мы танцуем на её могиле, а также — относящиеся к тематике копирайта О гиках, индустрии массового искусства и о том, как копирайт убил классическую музыку, Стартап Unglue.it освобождает книги от копирайта с помощью краудфандинга, решил предоставить хабросообществу цикл статей о Web 3.0. В этих статьях я постараюсь как можно подробнее изложить свое видение на скорое будущее Интернета. Почему я решил писать о будущем? Потому как считаю, что мысли, почерпнутые из прочитанного мною, собранные в единую цельную концепцию, дополненную личными соображениями, будут полезны также и другим, особенно тем, кто хочет идти в будущее, завоевывать IT-рынок, а не заниматься тем, что уже завтра станет никому не нужным. К чему тут упомянутая тема копирайта? По моему мнению, именно концепция Web 2.0 полноценно разрушила сложившуюся схему защиты авторских прав, и как раз концепция Web 3.0 решит проблему копирайта самым неожиданным образом. Но об этом в следующих статьях. А сейчас уделим внимание теме интерфейса Web 3.0.

Недавно я писал, что Greensock, прекрасная библиотека для скриптовой анимации на Flash, теперь поддерживает и JavaScript. В этой статье я продемонстрирую основы работы с GSAP v12 (beta). Результат будет примерно таким:


Сразу оговорюсь, что графику и идею для примера я взял из документации $fx(), ведь кто из нас откажется

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

Злой троянец увел у меня аккаунт на хабр, после чего под моим аккаунтом начали публиковаться какие-то тупые мультики. К сожалению узнал я об этом только когда НЛО перевело меня в read-only, а рейтинг ушел в отрицательное значение. Не беда: повод наконец написать пост, который давно собирался.

Веб-разработчику консоль нужна, но не на столько что бы бросив все дела начинать читать толстенные книжки по линуксу. Именно поэтому я учился консольным хитростям от случая к случаю и, судя по моим сотрудникам, многие поступают точно так же. Раскрою пару удобных секретов, без которых я уже не могу жить.

Библиотека для работы HTML5 History API

Изначально этот проект был задуман добавить поддержку HTML5 History API в старые HTML4 браузеры. Первые версии библиотеки были нацелены именно на эти потребности, но с учетом прошедшего времени и пожеланий многоуважаемых разработчиков использующих эту библиотеку, она выросла до уровня того, что выполняет некие промежуточные действия по добавлению/исправлению того функционала что описаны в спецификациях по интерфейсу History.

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

Сегодня существуют разные мнения по поводу успешности объектной технологии. С одной стороны, большинство современных mainstream языков программирования являются объектно-ориентированными, с другой стороны, нередко можно услышать критику ООП, дескать, объектно-ориентированное программирование «провалилось» и не оправдало тех надежд, которые были возложены на нее индустрией разработки ПО. Все, мол, ожидали наступления вселенского счастья в виде увеличения повторного использования, упрощения сопровождения, да и вообще, обещали, что думать придется кому-то другому, а я за это буду деньги получать.

Конференция проходила 26-27 апреля в Варшаве, это была вторая конференция (Lea Verou о первой конференции) из серии, и судя по слухам и успешности — не последняя.

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

Сайт конференции, оф. хэштег #FrontTrends, так же организаторы обещали вскоре выложить видео записи презентаций (как появится информация, обязательно обновлю пост).

«Какой препроцессорный язык стоит использовать для CSS?» является очень актуальным вопросом в последнее время. Несколько раз меня спрашивали об этом лично, и казалось бы, каждые пару дней этот вопрос поднимался в сети. Очень приятно что беседа перешла из темы о плюсах и минусах препроцессинга к обсуждению какой же язык является лучшим. За дело!

Если быть кратким: SASS.

Немного развернутый ответ: SASS лучше по всем пунктам, но если вы уже счастливы с LESS — это круто, по крайней мере вы уже упростили себе жизнь используя препроцессинг.

Развернутый ответ: ниже

Думаю, многие из вас хоть раз видели старую главную страницу Mail.Ru, которая довольно долго не менялась. Поэтому для общего понимания, небольшая преамбула: технический апдейт, о котором пойдет речь в этом посте, стал возможен после внутренних изменений в компании.



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

Введение в Spine.js

Spine представляет собой небольшой фрэймворк, который позволяет работать по схеме MVC, создавая приложения непосредственно на языке JavaScript, что обеспечивает логическое разделение кода, наследование моделей через классы и расширения. Также во многом этот инструмент базируется на Backbone.js API, так что те разработчики, которые имели дело с данным фрэймворком, без труда разберутся и в Spine (однако существует целый ряд существенных различий). Spine.js может работать совместно с HTML5 и асинхронными запросами сервера.

Я постараюсь сделать самое полное и подробное описание возможностей Web Inspector, на русском языке.
В первой серии мы залезем в настройки, посмотрим, что умеет консоль и поиграемся с панелью «Elements».

Так как Web-Inspector не переведен на Русский, я буду сохранять оригинальные названия.


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

Доброго дня, уважаемые хабравчане-маководы!

Сегодня я расскажу как увеличить эффективность работы в Mac OS X за счёт использования консоли.

Лирическое отступление

Думаю, ни для кого не секрет, что Mac OS является Unix-based системой, но переработанной почти до неузнаваемости. Даже консоль засунули куда подальше — не сразу и найдёшь. И вся система нацелена на использование GUI, при дефолтных настройках даже переключение между кнопками по Tab не работает — без мыши никуда. И тем не менее, Мак — это не только окошки, не только док и лаунчер. Мак это ещё и вся мощь shell скриптов и консоли!

Если Вы пришли из мира M$, то для начала неплохо бы поучить общие команды shell'а, например, по вот этому учебному пособию. Как минимум, нужно усвоить команды перехода по каталогам и способы запуска программ и скриптов.

Если Вы пришли в мир Mac OS из мира Linux'а и FreeBSD, то, скорее всего, знаете как минимум основы shell-скриптинга. Но и для вас в статье может оказаться кое-что интересное, ведь в маке есть уникальные консольные команды, которые так же полезно знать.

Вот о некоторых особенностях маковской консоли далее и пойдёт речь.

В этом уроке мы будем создавать видео плеер, для этого будем использовать CSS3 для моделирования и библиотеку «MediaElement.js» для функциональности. MediaElement.js это HTML5 аудио и видео плеер, который работает в старых браузерах имитируя MediaElement HTML5 API с помощью Flash и Silverlight.

Демонстрационный вариант
Исходные файлы

Когда появился localStorage я был рад, как слон, но, немногим позже, после подробного изучения вопроса, я несколько разочаровался: там могут храниться только строки, а об объектах можно было забыть. Приходилось превращать их в строки для хранения, приходилось обратно конвертировать строку в объект для работы с ним, затем опять конвертировать в строку, чтоб сохранить. Не спорю, есть замечательные библиотеки, позволяющие манипулировать хранилищем максимально просто, но вызывать функции как-то не очень хотелось.

localStorage = { a: { b: 1 }, c: { d: 2 } }
localStorage.a.b = 3;

Круто было бы, не так ли?

Относительно давно, где-то около полугода назад я задался вопросом: как же, блин, сделать так, чтоб можно было работать с localStorage вообще без функций, чисто как с объектом. Challenge accepted!

Как говорит небезызвестный Геша: “Всё, я здзелал”.

Дальше читать не обязательно. Более разумное решение находится здесь: habrahabr.ru/post/144998

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

В своем обобщении я замахиваюсь ни много ни мало на определение технологии WEB 3.0! После успеха принципов WEB 2.0 было бы странно если бы шильдик 3.0 не растащили на свои определениям разнообразные визионеры. Однако, в своих попытках они нарисовали типичный «более лучший 2.0». Попытка увеличения номера версии с помощью таких эпитетов как «красивый», «профессиональный» является не более чем маркетинговой шелухой!
_{Пример такой чепухи — текущая нумерация версий Firefox. Использую я его редко, только для просмотра верстки новых версий проектов. При каждый запуске оказывается что сменилась версия и поменялись местами какие то кнопочки в меню.}

Признание новой версии может быть оправдано исключительно технологическим скачком в ключевой области для веб-сервисов — создания и обработки информации (контента). Этот скачок не может быть «более красивым» или «более профессиональным», он может быть лишь принципиально иным технологически.

Мое убеждение заключается в том, что ключевой особенностью WEB 3.0 станет «трансформация контента», которая изменит не только принципы проектирования и развития web-приложений, но так же понятия копирайта, и приведет к трансформации бизнес-моделей существующих сервисов.

Уже захотелось поспорить? Тогда велком под кат!

Преамбула:
Имеем в наличии TortoiseSVN и Total Commander, и активно их используем в работе.
Практически все действия в Total Commander'e успешно совершаются одной только клавиатурой, без использования мышки, какими-либо горячими клавишами. Главное их найти/знать/привыкнуть, и работа становится в разы проще и быстрее.
TortoiseSVN же из коробки предоставляет нам только пункты в контекстном меню, до которого можно добраться двумя способами:

• Мышкой. При активной работе, тянуться каждый раз до мышки, реально начинает напрягать уже через пару дней/часов/минут работы (зависит от крепости нервов разработчика) и времени занимает это довольно много.
• Через клавишу контекстного меню + стрелок. Этот вариант конечно чем-то проще и быстрее (ибо не надо тянуться за мышкой), но всё так же не удобен и всё такой же медленный.

Хочется все действия с TortoiseSVN выполнять так же быстро, как и действия в самом Total Commander'e.
Т.е. через горячие клавиши, в одно нажатие.

Облазив просторы интернета, не смог найти ни одной инструкции, как можно по-человечески интегрировать TortoiseSVN в Total Commander и сделать это возможным.
Поэтому решил написать свой небольшой простенький мануал.

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

Я хочу рассказать о простой задаче — вывод даты на главной странице Mail.Ru. Маленькая задача, нетривиальное решение.



Решение в лоб:

function print_date(date){
	return date.getDate() + ' ' + getMonth(date.getMonth()) …
}

print_date( new Date() );

От переводчика

С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.

Введение

Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

Это относится к рабочим версиям файлов использующих HTML, CSS и GSS

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