Принцип цикады позволяет строить очень длинные неповторяющиеся фоны веб-страниц из нескольких простых изображений. Он был впервые описан Алексом Уокером в апреле 2011 года и быстро завоевал популярность. На сайте designfestival.com появилась целая галерея фонов, сделанных по этому принципу.

Во многих случаях можно сэкономить ещё больше, используя градиенты. Даже с учётом того, что пока практически все браузеры поддерживают свойство linear-gradient только с префиксами, суммарный объем кода CSS, необходимый для создания фона, в несколько раз меньше размера нескольких PNG с фрагментами, и, что ещё важнее — вообще не требует лишних запросов к серверу. Так, Эрик Мейер недавно привёл пример реализации первых двух фонов из оригинальной статьи Уокера на чистом CSS. Для простых цветных полосок (вверху) понадобилось 2.66 Кб кода CSS (с префиксами, без минификации и компрессии). В будущем, когда все популярные браузеры избавятся от префиксов, будет достаточно 0.59 Кб кода. В оригинальном примере изображения весили около 6 Кб + 3 запроса к серверу. Второй пример с занавесом (внизу) впечатляет ещё больше. Даже с префиксами получается примерно десятикратный выигрыш.

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

Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.

Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?

Спустя 7 лет разработки увидела свет первая мажорная версия Warsow. Warsow — это атипичный для OpenSource проект с рядом особенностей, и вот почему:

Буквально пару месяцев назад, мы начали переписывать весьма крупный сайт, с момента прошлого крупного релиза прошёл не один год, конечно, сайт дорабатывался, правились баги и в итоге в настоящее время создаётся новая версия. В ней будет активно использоваться AJAX, поэтому весьма остро стоял вопрос с генерацией контента на клиенте, полученного в формате JSON. Прошлые шаблоны были собственной разработки, так как на то время вариантов было не так много, которые по разным причинам не подходили, базировались наши шаблоны на jquery, с помощью атрибутов происходило заполнение.

Прежде всего было решено провести тест, при генерации списка из 1500 элементов было получено превосходство в 20 раз, похожие результаты показывает сравнение с jQuery Template (страница с тестами).

На Хабре уже проскальзывали обзоры плагинов для стилизации селекта (раз и два)

Возможно буду заброшен помидорами за изобретение очередного велосипеда, но все текущие реализации меня не устраивали. Да, отличный плагин chosen, но в нем чрезмерное количество ненужного мне функционала. ikSelect, да, почти то что надо, но мне не понравилась генерируемая разметка.



Итак, задача — сделать плагин с блэкджеком и ш… для стилизации селекта, который по максимуму повторяет поведение стандартного. А это навигация с клавиатуры, автоподгонка ширины дропдауна, поддержка optgroup, автокомплит и самое главное полная кастомизация, включая скроллбар*.

Привет, Хабр!

Данный пост посвящен прекрасному инструменту Google Forms, как за 10 минут сделать форму обратной связи на сайте или более полезные вещи.

Fluid UI: очень удобное HTML5-приложение для создания прототипов мобильных интерфейсов в браузере (Chrome или Safari). Буквально за пару минут можно сделать приличный набросок.



Поддерживает жесты, действия на прикосновения, драг-н-дроп, переходы между страницами, дублирование шаблона на несколько страниц, библиотеки iPhone и Android, загрузку пользовательских изображений и скриншотов. Ссылку на созданный дизайн можно быстро отправить коллеге или протестировать на мобильном устройстве. Можно экспортировать в PDF, HTML или графический формат.

Syte был разработан Родриго Нери (Rodrigo Neri) — собственно его страничка и является одним из примеров использования Syte.
По сути, это простое и мощное Django-приложение, которое позволяет интегрировать такие социальные сервисы, как Tumblr, Twitter, Github, Dribbble и Instagram.

Ребята с сайта mc.westeroscraft.com воссоздают в мире Minecraft земли Семи Королевств (Game of Thrones).

Пока информации как таковой на сайте довольно мало (в основном — видео созданных земель, ну и адрес сервера посмотреть можно, mc.westeroscraft.com), но я считаю, пост имеет смысл, дабы просто показать это. Всегда удивлялся терпению и усидчивости подобных людей.

Под катом — еще видео.

Ребята из Development Seed запустили MapBox Static API. Теперь вы можете использовать красивые статичные карты MapBox в своём приложении без использования JavaScript и сторонних библиотек. Перед вами перевод официального анонса.

Эксклюзивно для Хабра.



(кликабельно)

Идея взята у Dan Eden (demo), я лишь немного доработал способ.

Сегодня вышел новый релиз блого-социального движка LiveStreet 1.0.

Новые возможности:
— Новый дефолтный шаблон Synio (победитель конкурса, автор AlekseyPopov)
— Шаблон на HTML 5 и полный отказ от MooTools. Теперь поддерживается только jQuery
— Стена пользователя
— Переработанный профиль пользователя
— Ajax авторизация и регистрация в том числе в попапе
— Модуль гео-базы и на его основе выбор места проживания в профиле пользователя
— Поиск и сортировка среди пользователей
— Поиск и сортировка среди блогов
— Возможность для избранных топиков добавлять свои теги и поиск топиков по ним
— Счетчик избранного для топиков и комментариев
— Подписка на новые комментарии к топикам

У вас в vk.com есть любимые музыкальных группы или друзья, с которыми ваши музыкальные вкусы совпадают? У меня да. И хотелось иметь актуальную локальную копию музыки этих групп и друзей, чтобы слушать её, например в машине, телефоне, плейере или где-нибудь ещё. Так родилась идея создания консольного open source приложения vmd (vkontakte music downloader), которое я обещал выложить на github вот в этом посте. Программа мультиплатформенная работает под linux, windows и mac os x. Скачать бинарные сборки под эти ОС можно скачать на домашней странице проекта. Под хабракатом рассказано, как vmd использовать и некоторые технические подробности.

Неужели у кого-то было время этим запариться!

css3ps.com

Работает как вебсервис, от того время ожидания результата работы 30 секунд.

1) Качаем плагин под нужную версию фотошопа, открываем через windows->extensions->css3ps;
2) рисуем шейп, накладываем стили, отправляем на сервер через расширение;
3) ждем 30 секунд, смотрим на результат.

Естественно, сервис разбирает не все, что вы натворили в стилях.
Обратите внимание, что шейп нужно рисовать аккуратно.



Все работает) Фантастика.

Открылся веб-сервис TinyPNG, на котором можно быстро конвертировать полноцветные PNG24 в индексные PNG8 с сохранением альфа-прозрачности. Сайт работает на известных open source утилитах, так что квантование палитры можно сделать и без него, но здесь это просто удобнее.

До появления HTML5 единственное, что мы не могли контролировать и управлять (без перезагрузки контента или хаков с location.hash) — это история одного таба. С появлением HTML5 history API все изменилось — теперь мы можем гулять по истории (раньше тоже могли), добавлять элементы в историю, реагировать на переходы по истории и другие полезности. В этой статье мы рассмотрим HTML5 History API и напишем простой пример, иллюстрирующий его возможности.

Основные понятия и синтаксис

History API опирается на один DOM интерфейс — объект History. Каждый таб имеет уникальный объект History, который находится в window.history. History имеет несколько методов, событий и свойств, которыми мы можем управлять из JavaScript. Каждая страница таба(Document object) представляет собой объект коллекции History. Каждый элемент истории состоит из URL и/или объекта состояния (state object), может иметь заголовок (title), Document object, данные форм, позиция скролла и другую информацию, связанную со страницей.

Основные методы объекта History:

1. window.history.length: Количество записей в текущей сессии истории
2. window.history.state: Возвращает текущий объект истории
3. window.history.go(n): Метод, позволяющий гулять по истории. В качестве аргумента передается смещение, относительно текущей позиции. Если передан 0, то будет обновлена текущая страница. Если индекс выходит за пределы истории, то ничего не произойдет.
4. window.history.back(): Метод, идентичный вызову go(-1)
5. window.history.forward(): Метод, идентичный вызову go(1)
6. window.history.pushState(data, title [, url]): Добавляет элемент истории.
7. window.history.replaceState(data, title [, url]): Обновляет текущий элемент истории

Здравствуйте, хабраюзеры!

Недавно довелось копаться с рассылкой писем в HTML-формате. Есть много статей, написанных на тему валидной вёрстки рассылок, однако здесь речь пойдёт не об этом. Известно, что у каждого почтовика есть свои особенности отображения HTML-письма. Меня заинтересовали эти особенности и различия в отображении письма на разных почтовиках.

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

Это стало возможным благодаря получению 10 млн долларов венчурного финансирования от Kleiner Perkins, Index Ventures, Union Square Ventures, Юрия Мильнера и Ричарда Брэнсона, сообщает TechCrunch.

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

Многим из нас чуть не ежедневно приходится сталкиваться с недружным строем разнообразных разъёмов для подключения между собой различных устройств. Вспомнить хотя бы многообразие портов на некоторых компьютерах некоторое время назад, когда на одном системном блоке можно было встретить COM, LPT, PS/2, MIDI, USB и FireWire одновременно. По счастливому стечению обстоятельств, COM, LPT, PS/2 и FireWire на современных бытовых компьютерах вымерли, теперь для целей подключения периферии у нас остался только USB. Разнообразной периферии стало больше. А интерфейсов ещё больше.

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