Доброго времени суток уважаемые хабражители. Сегодня увидел один интересный проект на GitHub. Эта маленькая библиотека (Voyeur.min.js — 1.2kb) очень привлекает своим синтаксисом и неплохим функционалом.



Даже не переводя документацию с официального сайта, код можно понять интуитивно. По традиции приведу несколько примеров:

Доброго времени суток уважаемые хабражители. На сегодняшний день создание разметки для страницы грубо говоря не автоматизировано. Разметку мы выполняем с помощью float или inline-block (подробнее). Поэтому я хочу поделиться с вами замечательной идей — Justify Grid Framefork.

Проблема

Если говорить о верстке на float, то мы сталкиваемся с проблемой центрирования элемента и нам приходиться скурпулезно указывать все значения ширины и отступов. Эту проблему безусловно решают существующие Grid фреймворки (к примеру 960.gs). Но получается симантически не верная разметка и разработчикам постоянно приходиться использовать .clearfix. Плюс ко всему проблемы могут возникнуть из за дробных пикселей. Если говорить об inline-block, то неудобства появляются из за того, что элементы с этим значением выравниваются по базовой линии, а не по верхнему краю. А если на странице несколько inline-block'ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки. Любой пробел повлияет на Ваш layout. Решение есть — CSS Grid Layout или Flexible Box Layout, но эти решения не поддерживаются на большинстве браузеров.

Доброго времени суток уважаемые хабражители. На сегодняшний день большинство техник создания меню-гармошки включают в себя использование псевдо-класса :target. Проблема использования :target заключается в невозможности закрыть какой либо блок в нашем меню, работать будет только «рыскрытие» гармошки.

Пример 1: раскрывающийся список (checkbox)

Пример 2: схлопывающийся список (radio)

Поэтому хочется показать Вам пример реализации Accordion меню на чистом CSS с помощью псевдо-класса :checked. С помощью этого метода у Вас появиться возможность контролировать открытие/закрытие блоков. Меню будет двух типов: полностью раскрывающееся и отображение одного блока при схлопывании других. Использовать будет checkbox и radio соответственно.

Компания Canon 21 февраля на презентации в Нью-Йорке в Manhattan's Classic Car Club представила широкой публике «умные» очки Canon MREAL. Пользователь, закрепивший устройство на голове, может увидеть элементы из настоящего мира, которые совмещены с виртуальными. Очки отображают видео, совмещающее в себе запись окружающего мира с помощью двух камер расположенных на уровне глаз и сгенерированный виртуальный мир с помощью ПО платформы MP-100.

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

iMac

PSD документ iMac + PSD Mac OS X внутри.

Ссылка для скачивания

Привет, Хабр! 24 февраля 2013 года Стиву Джобсу исполнилось бы 58 лет, и все поклонники помнят об этом. По случаю дня рождения этого легендарного человека я решил сделать подборку видеоматериал с его участием — это интересно, для многих познавательно, а некоторые смогут еще чему-то обучиться. Возможно, некоторые материалы уже встречались на хабре, но я считаю в этом топике собраны все самые знаменитые видео и все они на русском языке.

A Tribute to Steve Jobs

Наследие, которое Стив Джобс подарил нашему миру. Потрясающее видео, содержащие в себе нарезку из презентаций всех инновационных продуктов компании Apple. Последняя минута для меня самая впечатлительная — реакция публики на первый Mac. Такое ощущение, что Стив показал людям будущее. Овации не заканчиваются…

Это видео нельзя встроить, поэтому при желании посмотреть придется перейти по ссылке

23 минуты 1980 года со Стивом Джобсом

В это время первым массовым персональным компьютером, выпускавшимся миллионами экземпляров, стал компьютер Apple II. В Apple работают над новыми продуктами. Даже одна аналогия из этого видео имеет глубокий смысл: сравнивая потребление калорий различных животных и человека для преодоления определенной дистанции, человек занимает далеко от первого место, но на велосипеде он тратит в два раза меньше энергии. В этом основное преимущество человека, и для Apple задача сделать «велосипед для мозга».

Доброго времени суток уважаемые хабравчане. Хочу поделиться потрясающей новостью для любителей работать вне офиса и стартаперов – в понедельник 28 января в тестовом режиме запустился новый московский коворкинг-центр. Курирует эту площадку ГБУ «Малый бизнес Москвы». Проект полностью является их личной инициативой, и в дальнейшем планируется создание подобных центров (возможно, меньших по площади) в каждом округе. Располагается коворкинг-центр недалеко от станции метро «Первомайская», на улице Средняя Первомайская, на третьем этаже дома № 3 (БЦ «Майский»).

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

Доброго времени суток уважаемые хабражители. Насколько я понимаю себя — я перфекционист и для меня это проблема, не в плане невротического психического отклонения, а в плане того, что эта черта моего характера дурно влияет на мои/наши проекты.

Предисловие

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

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

Проблема

Перфект должен быть во всем

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

Речь идет о подразделении Motorola Home, занимающемся производством ТВ-приставок для подключения кабельного телевидения. Оно в случае одобрения регуляторов перейдет в собственность Arris Group Inc., передает Reuters.

 

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


ДЕМО

Привет, Хабр! Хочу поделиться с вами интересной инфографикой об истории HTML5.

Все началось с создания рабочей группы WHATWG в 2004 году. Ее участники совместно с представителями компаний Apple, Mozilla Foundation и Opera Software начинают разработку HTML5. А уже в скором 2013 ожидается, что принятие HTML5 станет настоящим бумом в 1 миллиард использований.

Доброго времени суток уважаемые хабраюзеры. На сегодняшний день Parallax Scrolling является неким трендом и я хочу рассказать о простой реализации данного эффекта. Техника основана на скорости изменения свойства background-position. Эффект Parallax Scrolling заключается в том, что фон движется медленнее чем содержимое

HTML разметка

Создаем два блока с атрибутами "data-type" и "data-speed":

<section id="home" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>
<section id="about" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>

Для управления значениями скорости и позиции в JavaScript, data-type используются как ключевые атрибуты при передачи необходимых параметров.

Доброго времени суток уважаемые читатели Хабра. Существуют замечательные CSS свойства с помощью которых можно задать реверсивное движение анимации — animation-direction: alternate и animation-direction: alternate-reverse (не путать со свойством animation-direction: reverse, которое задает реверсивное направление), но на сегодняшний день их не поддерживает большинство современных браузеров. Я хочу рассказать о том как сделать кроссбраузерную реверсивную анимацию фона.

Пример на Jsfiddle