Pull to refresh
21
0
Александр Сергеевич Инсайт @Insayt

Пользователь

Send message

Самые простые техники адаптивной верстки

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


Читать дальше →

AniJS – библиотека для декларативного описания CSS-анимации

Reading time1 min
Views25K
На днях занимался созданием лэндинга с приличным набором анимации, возникающей во время взаимодействия со страницей. Прям чувствовал, что должна быть какая-нибудь крутая библиотека для решения задачи. И тут я нашёл AniJS, которая меня совершенно покорила!

Читать дальше →

12 приемов художников Disney для оживления анимации

Reading time1 min
Views74K


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

Стоит вспомнить, что эти принципы (в продолжении они все показаны) созданы группой аниматоров, ставших основой Disney. Эта группа даже получила название "9 стариков Диснея".

Читать дальше →

Легкие контроллеры с AngularJS

Reading time2 min
Views36K
В дополнение к этому посту.

Кто не знает, есть такая штука ui-router. Замена стандартного роутера Ангуляра. Учитывая, что в Ангуляре 2.0 планируют запилить нечто подобное, вскоре этот роутер станет стандартом.

С помощью него можно строить приложение, например, так:
Читать дальше →

Префиксы и постфиксы в PHP (и CSS)

Reading time4 min
Views13K


Ещё давно я взял практику использовать префиксы и постфиксы в PHP и в CSS. Особенно это актуально, когда что-то выходит за рамки локальной видимости и находится в глобальном пространстве, взять те же модели в Yii.

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

Именование в стиле Венгерской нотации мне не пришлось по душе. Такой подход мне не нравился ещё со времён C++ / Delphi – я считал его избыточном и не всегда понятным. Мне понравилась реализация БЭМ, но в полной мере я её тоже не использую. Я постарался вычленить и объединить наиболее понравившиеся мне методы, о них и расскажу.

Читать дальше →

Сетки без заморочек

Reading time4 min
Views80K
Подавляющее большинство сайтов создано с использованием сеточных макетов. Они могут не использовать их в явном виде, но если на сайте присутствует блок с основным контентом, расположенный справа, и боковой блок (сайдбар), расположенный слева, то это и есть простейшая сетка.

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

В этой статье я расскажу вам, как я верстаю сеточный макет. Это не так уж и сложно. И даже сделать резиновые сетки не составит большого труда.
Читать дальше →

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

Reading time18 min
Views208K

Предисловие


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

Читать дальше →

Разработка web API

Reading time9 min
Views291K

Интро


Это краткий перевод основных тезисов из брошюры «Web API Design. Crafting Interfaces that Developers Love» Брайана Маллоя из компании Apigee Labs. Apigee занимается разработкой различных API-сервисов и консталтингом. Кстати, среди клиентов этой компании засветились такие гиганты, как Best Buy, Cisco, Dell и Ebay.

В тексте попадаются комментарии переводчика, они выделены курсивом.

Собираем API-интерфейсы, которые понравятся другим разработчикам


Понятные URL для вызовов API

Первый принцип хорошего REST-дизайна — делать вещи понятно и просто. Начинать стоит с основных URL адресов для ваших вызовов API.

Ваши адреса вызовов должны быть понятными даже без документации. Для этого возьмите себе за правило описывать любую сущность с помощью коротких и ясных базовых URL адресов, содержащих максимум 2 параметра. Вот отличный пример:
/dogs для работы со списком собак
/dogs/12345 для работы с отдельной собакой
Дальше

Серьезное проектирование серьезного магазина. Часть 2. Модули интернет-магазина

Reading time15 min
Views80K
В прошлый раз мы написали довольно популярную статью: «Серьезное проектирование серьезного магазина. Часть 1. Исследования», эта статья её логическое продолжение. В этой статье и в последующих мы опишем почти 60 функциональных модулей топовых интернет-магазинов мира, а также подробно разберем интерфейс многих страниц.

Главная страница интрнет-магазина в axure
Читать дальше →

Лёгкие контроллеры с Angular Classy

Reading time2 min
Views14K
Нашёл любопытный инструмент для облегчения структуры контроллеров — Angular Classy. Он представляет из себя модуль, размером в 1 килобайт (gzipped and minified), и помимо представления контроллера в виде объекта даёт ряд полезных плюшек, рассказ о которых под катом.

Читать дальше →

Защита ajax-приложения от Cross Site Request атак (CSRF)

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

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

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

Читать дальше →

Создание виджета «Счет Live» использую PHP Web Sockets

Reading time6 min
Views17K
Внедрение веб-сокетов позволяет веб-приложения обрабатывать данные в режиме реального времени, не прибегая к «хакам», таким как long-polling.
Одним из примеров применения, является отображение результатов спортивного матча. Даже сейчас, много сайтов, которые показывают эти данные используют Flash-приложения, т.к. Action Script позволяет общаться с сервером через сокет-соединения. Тем не менее, вев-сокеты позволяют сделать тоже самое используя только HTML и JavaScript. Это, мы постараемся сделать в данном руководстве, используя php-сервер.
image
Читать дальше →

Realplexor: производительный Comet-сервер с API для PHP и Javascript (realtime)

Reading time5 min
Views21K
Dklab Realplexor — это Comet-сервер, позволяющий держать одновремено сотни тысяч долгоживущих открытых HTTP-соединений с браузерами пользователей. JavaScript-код, запущенный в браузере, подписывается на один или несколько каналов Realplexor-а и вешает обработчик на поступление данных. Сервер может в любой момент записать сообщение в один из таких каналов, и оно будет моментально передано всем подписчикам (хоть одному, хоть тысяче), в режиме реального времени и с минимальной нагрузкой для сервера.

Хотя идейным вдохновителем Realplexor-а был предыдущий проект, dklab_multiplexor, код Realplexor-а не имеет с ним практически ничего общего. Поэтому я и решил сменить название. Несопоставимы также возможности продуктов (см. ниже), да и размер кода увеличился в 7 раз.

Realtime-направление сейчас довольно активно развивается на Западе, и в нем особенно выделяется продукт Tornado — событийно-ориентированный веб-сервер на языке Python. Правда, Tornado — это не столько Comet-сервер, сколько инструмент, с помощью которого можно запрограммировать «в том числе» и Comet-сервер. Ключевые слова: Comet, Push Server, Long polling, JavaScript, XMLHttpRequest.

Главные преимущества Realplexor-а:
  • простота использования: наличие API для JavaScript, API для PHP (в будущем — и для других языков);
  • простота конфигурирования;
  • широкий функционал (либо отстутствующий, либо недоступный напрямую в аналогах).

Лучше один раз увидеть...


Я сделал отдельную онлайн-песочницу, чтобы продемонстрировать функционал нового Realplexor-а и то, для чего вообще нужны Comet-серверы (кстати, это физически тот же самый демон Realplexor-а, что использует мой новый стартап РуТвит). Песочница реализует что-то типа многоканального чата: зайдя, вы получите как будто бы 2 независимых «браузера», запущенных на разных компьютерах.
  • Верхний «браузер» отображает каналы — в них моментально появляются новые сообщения, как только кто-то их туда отправляет на стороне сервера. Конечно же, эту страницу могут просматривать одновременно сотни тысяч пользователей, и они все будут видеть одно и то же (реализовано с использованием Realplexor JavaScript API). Можно «на лету» добавлять новые каналы (подписка) или скрывать уже имеющиеся (отписка).
  • Нижний браузер содержит формы, позволяющие добавлять сообщение в произвольный канал, указав его имя. Форма AJAX-ом отправляется на сервер, и уже там PHP-скрипт записывает в Realplexor полученный текст через PHP API. (И да, так можно чатиться.)
По умолчанию на странице открыто 3 канала с именами Alpha, Beta и RuTvit. Но, конечно, вы можете закрыть эти каналы и открыть новые. Вот, например, страница с единственным открытым каналом по имени Habrahabr: http://rutvit.ru/realplexor/demo?ids=Habrahabr.



Песочница демонстрирует следующие функции Realplexor-а:
Читать дальше →

Разъяснение http2

Reading time25 min
Views196K
На днях Даниэль Штенберг, один из участников группы HTTPbis IETF, которая ведёт разработку протокола http2, опубликовал в своём блоге крайне интересный документ «http2 explained». Небольшой PDF-документ на 26 страницах весьма доступным языком рассказывает о предпосылках и деталях реализации протокола http2.

Как мне кажется, на сегодняшний день это одно из самых лучших разъяснений о том, что такое протокол http2, зачем он нужен, как он повлияет на веб-разработку и какое будущее ждёт Интернет в связи с его появлением. Думаю, что всем людям, причастным к веб-разработке и веб-строению, информация будет полезна, ведь ожидается, что стандарт http2 будет принят уже в июне этого года после завершающей встречи группы HTTPbis в Нью Йорке.
Читать дальше →

Демо: Инкрементальный парсер для Web IDE

Reading time3 min
Views14K


Уважаемые коллеги,

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

А под катом я расскажу, о том, как работают современные IDE. И как проект, над которым я сейчас работаю, может помочь вывести индустрию разработки веб-редакторов на новый уровень.
Как сделать настоящую IDE для Java, работающую полностью в вебе

Тренды в онлайн образовании

Reading time5 min
Views38K
В последнее время на слуху феномен «муков» (MOOC) – массовых открытых онлайн курсов. Платформ для них создано большое множество.

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

При этом у онлайн образования есть большое концептуальное отличие от оффлайн образования – его проще измерить. А всё, что можно измерить, можно улучшить.

В этом посте я поделюсь личными соображениями о том, куда движется онлайн образование на примере MOOC-ов, в том числе по мотивам посещения Coursera Partners' Conference, прошедшей 4 недели назад в Лондоне.
Читать дальше про данные, специализации, смешанное обучение и платформу образовательных приложений

Правильное использование promise в angular.js

Reading time5 min
Views109K
imageВ процессе использования angular.js трудно обойтись без объекта $q (он же promise/deferred), ведь он лежит в основе всего фреймворка. Deferred механизм является очень простым и мощным инструментом, который позволяет писать лаконичный код. Но чтобы по-настоящему использовать эту мощь, необходимо знать обо всех возможностях данного инструмента.
Вот несколько моментов, о которых вы возможно не знали.
Познать мощь

Магия JavaScript: arguments

Reading time3 min
Views68K
arguments — очень специфическая штука, о которой новички и даже любители знают только то, что это «вроде массив, но какой-то неправильный». На самом деле, у него есть ряд интересных особенностей. Предлагаю в топике пофантазировать на тему TypeHinting, аргументов по-умолчанию и всякого другого.
(function (foo, bar) {
	console.log(typeof arguments); // ?
	
	arguments[0] = 42;
	console.log(foo); // ?
})(10, 20);


А также покажу интересную идею-библиотеку
function test (foo, bar) {
    Args(arguments).defaults(100, 100);

    return [foo, bar];
};

test(      ); // 100, 100
test(15    ); //  15, 100
test(21, 42); //  21,  42

Читать дальше →

Создаем чат на Node.js и Socket.IO

Reading time5 min
Views228K
В данной статье я попытаюсь показать, как можно создать простой чат, используя Node.js в связке с Socket.IO. Изначально я хотел построить чат на чистых Websockets, но столкнулся с практически полным отсутствием готовых реализаций сервера для них в Интернете. Так что решил не изобретать велосипед, а использовать готовую библиотеку.
В моем случае сервер работает под Ubuntu, поэтому все примеры будут для неё (и ссылки в примерах — на него же).

Установка компонентов

Первым делом нам потребуются собственно Node.js (инструкция по инсталляции и ссылки на скачивание здесь) и Socket.IO. Модули для Node.js проще всего устанавливать, используя менеджер npm —
curl http://npmjs.org/install.sh | sh
npm install socket.io

Серверная часть

Структура серверной части такова: сервер принимает сообщение, если это команда — выполняет определенные действия, если просто сообщение — рассылает всем остальным участникам.
Читать дальше →

Браузерный мультиплеер без сервера

Reading time3 min
Views20K

Про технологию WebRTC в последнее время пишут много. Она позволяет обеспечить взаимодействие двух клиентов без специализированного сервера между ними, но нужда в сервере отпадает только после установки соединения. А на этапе установки самого соединения некоторые серверные ресурсы все еще нужны. Можно ли избавиться от потребности в сервере? Небольшой эксперимент в этом направлении под катом.
Читать дальше →

Information

Rating
Does not participate
Location
Ростов-на-Дону, Ростовская обл., Россия
Date of birth
Registered
Activity