Давным-давно, года 3 назад, я узнал, что некоторые браузеры стали поддерживать перетаскивание файлов FileAPI. Эта новость меня очень впечатлила, и в голове родилась идея простого сервиса. Нужен сайт-рабочий стол: заходишь, перетаскиваешь файл с компьютера на сайт. Оказываешься за другим компьютером — скачиваешь файл.

Сказано — сделано. Находим скрипт «ajax file upload drag&drop», тестируем, допиливаем. Форма регистрации, несколько полезных функций — все, можно пользоваться.

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

Если интернет — место свободы, то почему отношения между разработчиками и пользователями неравномерны? Пользователи, создающие контент, — часть команды, но им не дают нормальной возможности высказаться и повлиять на будущее сайта.

Сегодня мы бесплатно открываем Метрику для приложений для всех разработчиков. Она работает с iPhone, Android, Windows Phone, Windows Store, .NET. В ней мы объединили всё, что сами хотели бы от инструмента для разработчиков приложений. Прежде всего, понятный интерфейс, в котором нет ничего лишнего, — всего за несколько кликов вы можете найти ответ на любой вопрос об аудитории ваших приложений.



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

На мобильной секции на YaC о Метрике для приложений рассказывал Александр Кочубей, менеджер этого проекта. Сегодня Саша уехал на конференцию Apps World, поэтому этот текст не от его имени, но написал его именно он. Читайте под катом подробности о том, какие данные о работе ваших приложений будут теперь вам доступны.

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

Рассмотрим ранее опубликованные решения, затем сделаем обзор методов консоли с помощью перевода недавней статьи Axel Rauschmayer-а, разработчика и консультанта с более чем 15-летним стажем, затем я опубликую некоторые свои решения, которые оказались удачными в процессе эволюции и отладки на ряде проектов.
UPD 2015: обновление таблицы команд до актуального состояния, Github (ru, en; разворачивание на javascript).

Всем привет!

Хочу начать вольный перевод отличной книги «WebGL Beginner's Guide», которая, на мой взгляд, будет интересна не только новичкам, но и более продвинутым разработчикам.

Содержание:

• Глава 1: Начиная работать с WebGL
• Глава 2: Рендеринг геометрии
• Глава 3: Освещение
• Глава 4: Камера
• Глава 5: Движение
• Глава 6: Цвет, глубина и альфа-смешение
• Глава 7: Текстуры
• Глава 8: Выбор
• Глава 9: Собираем все вместе
• Глава 10: Дополнительные методы

WebGL первоначально была основана на OpenGL ES 2.0 (ES означает Embedded Systems), версии спецификации OpenGL для таких устройств как iPhone от Apple и iPad. Но спецификация развивалась, стала независимой, ее основная цель это обеспечение переносимости между различными операционными системами и устройствами. Идея веб-интерфейса, рендеринг в реальном времени открыли новую вселенную возможностей для веб-3D сред, таких как видеоигры, научная и медицинская визуализация. Кроме того, из-за широкого распространения веб-браузеров, эти и другие виды 3D-приложений могут быть запущены на мобильных устройствах, таких как смартфоны и планшеты. Если вы хотите создать свою первую веб-видеоигру, 3D арт-проект для виртуальной галереи, визуализацию данных ваших экспериментов или любое другое 3D-приложение, вы должны иметь ввиду, что первым шагом должно быть то, что вы должны убедиться, что у вас есть подходящая среда.
В этой главе вы сможете:

• Понять структуру WebGL-приложения
• Создавать свои области рисования (canvas)
• Проверить WebGL-возможности вашего браузера
• Понять, как устроена машина состояний WebGL
• Изменять переменные WebGL, которые влияют на вашу сцену
• Загружать и исследовать полнофункциональные сцены

Вступление

В статье я собрал советы по использованию media query. Расскажу, как можно более эффективно использовать media query. В конце статьи есть список использованных источников.

• Внешнее подключение media query
  
• Больше чем просто размер viewport
  
• Не только смартфоны
  
• Инструмент для работы с media query
  
• Выделяйте специфичное
  
• Breakpoints когда и сколько?
  
• Второстепенные breakpoints
  
• Относительные единицы измерения
  
• Условная загрузка
  
• Список использованных ресурсов
  

Привет, Хабр!
Аккурат к инициативе поддержки стартапов, озвученной deniskin, мы в ФРИИ продолжаем знакомить сообщество с темой бизнес-инкубаторов и акселераторов. В прошлой статье мы детально разобрали, в чём различие между бизнес-инкубаторами и акселераторами. Сегодня — расскажем о том, куда же, собственно, идти.

Увидев как все ринулись искать XSS на прекрасно-синем Хабрахабре решил попытать свое счастье. POST-овые self-xss, бесполезные во многих контекстах и векторах, начиная с фильтрации в самых популярных браузеров (chrome/safari/ie etc) и заканчивая сложностью их же применения и эксплуатации было решено оставить остальным первопроходцам и отправиться на поиски чего-то более стоящего.

Не стоит преследовать цели, которые легко достичь. Стоит нацеливаться на то, что удается сделать с трудом, приложив немалые усилия — Альберт Эйнштейн

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

В этой статье не будет ничего принципиально нового, однако некоторым будет весьма интересен взгляд со стороны спамера (уже бывшего) со стажем. Идея написать на хабр пришла давно, после прочтения этой статьи, которая только вызвала улыбку. Так уж вышло, что давным-давно, во времена учебы в университете, я искал удаленную работу, поскольку на стипендию трудно выживать, не говоря уже о каких-то развлечениях. Тогда один товарищ пригласил меня в компанию, где работал сам. Работа была простая – оставлять где угодно ссылки на определенные сайты, попутно добавляя к ним какое-то сообщение, т.е. обычный спам. Тут, как понимаете, абсолютно никакая капча, проверка cookies или javascript не спасет ситуацию, поскольку регистрируется настоящий человек с помощью обычного браузера. По поводу автоматических спамилок ситуация похожая, если они разновидности «заскриптованный браузер». Однако есть способы усложнить жизнь спамерам и, если не полностью убрать, то значительно снизить поток спама на свой сайт.

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

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

Недавно я рассказывал о своём опыте разработки SlideStackView в мобильной почте Mail.Ru под Android. Тогда я пообещал, что в ближайшее время подготовлю вторую часть, в которой расскажу о том, как реализовать наиболее интересную, с точки зрения программирования визуальных компонентов, часть. Естественно, речь пойдёт о том, что добавляет интерактивность в приложение — об анимации. Все уже давно привыкли к тому, что мобильное приложение должно быть отзывчивым к действиям пользователя. Очевидно, что основным способом взаимодействия с вашим приложением является использование Touch screen.

Доброго времени суток, Хабражители. Хочу поделиться неким опытом (советами) при работе с JavaScript + jQuery (по сути, вместо jQuery можете подставить любой другой JS фреймворк). Статья будет интересна новичкам JS и jQuery, но и динозаврам опытным проходить мимо не стоит, в ней вполне можно найти полезную информацию. В основном, в статье я привожу не однозначные случаи, но и место для «стоТыщРазПовтор» я счёл уместным.

Инициализация

Сплошь и рядом встречаю загрузку JS файлов в теге . В большинстве случаев - это не корректно! Почему? В этом случае JS начинает загружаться до загрузки HTML, и как следствие клиент дольше ждёт загрузки информации за которой он пришёл. Размещение скриптов в оправдано только в тех случаях, когда JS используется в качестве контроллера (к примеру, всё содержимое на странице мы достаём поблочно через AJAX запросы, в зависимости от URL или Hash). Если не используем, то гораздо лучше вставлять скрипты перед зыкрытием тэга . JS начнёт загружаться только после того, как посетитель увидит страницу.

Мы выпустили бета-версию API Яндекс.Карт 2.1. Главная ее особенность — полный редизайн интерфейса карты. Причем изменения затронули не только внешний вид, но и поведение элементов управления картой. Поскольку изначально было понятно, что поломки обратной совместимости не избежать, мы также внесли архитектурные изменения, которые были необходимы для улучшения работы API (о них ближе к концу поста).

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

Для решения наших задач мы решили в новой версии реализовать адаптивный дизайн интерфейса. На Yet another Conference дизайнер madhare и разработчик zloylos выступили с докладом о том, зачем нам понадобилась адаптивность и как именно мы ее реализовали в API. В этом посте я опишу предысторию и концепцию наших решений, расскажу о том, что еще нового появилось в версии 2.1-beta, а также о том, что еще изменится к релизу 2.1.

В один прекрасный (или печальный, кому как) день мне надоело, что у меня периодически заканчивается место на ноутбуке. Да, я в курсе, что жёсткие диски сейчас дешевы, но это для меня не выход, потому что:

• У меня SSD, а он всё-таки подороже будет, чем обычные HDD (объём моего текущего SSD — 120 гигов)
• Ноутбук рабочий, соответственно данные на нём тоже, должны быть шифрованы, всё такое, поэтому самопальный и не утверждённое работодателем носитель втыкать не стоит
• Я жадный :)

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

Зачем нам вообще нужны спрайты?

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

• Во-первых, используя спрайты, мы ускоряем загрузку страницы; в случае использования иконок, можно создать универсальное средство для применения в проектах;
• Во-вторых, не все устройства с высоким ppi (например, Windows Phone 7.5-7.8, Android до 4 версии на стоковом браузере) поддерживают использование webfonts.
• Легкая интеграция, используя специальные сервисы генерации спрайтов

Постановка проблемы или чтобы жизнь малиной не казалась

Используя css-спрайты со множеством элементов встает проблема о создании css-свойств с background-position; Их нужно писать много, иногда очень много. Конечно, нам помогают многие сервисы по генерации спрайтов — они выдают вместе со спрайтом еще и css/less/sass — файл с координатами. Но практически всегда все жестко завязано на пикселях:

• Изменяя размер (например, для retina-экранов) исходного файла-спрайта все «едет»;
• Мы не можем изменять размер элемента-контейнера, куда хотим вставить, допустим, иконку, чтобы эта иконка смасштабировалась: свойства background-size: cover/contain/100% не работают по понятным причинам;

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

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