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

Оригинал

Те из вас, кто использует панель инструментов Google в Firefox, вероятно, достаточно знакомы со многими функциями панели инструментов 5 (бета) — от закладки до кнопки и окна поиска до «отправить». Мы добавили еще несколько функций для панели инструментов Firefox, так что вы можете скачать эту «вторую бета-версию», чтобы получить все новейшие и лучшие панели инструментов, которые Google может предложить.

Одной из особенностей я действительно восхищаюсь — это новая вкладка. Теперь, когда вы открываете новую вкладку, а не пустую белую страницу которую вы видите по умолчанию в Firefox, вы будете видеть небольшие картинки из ваших любимых сайтов (до 9), недавно закрытые сайты и закладки страниц, созданных на основе Вашей истории браузера. Вы можете редактировать картинки, и все эти данные остаются в вашем браузере, а это означает, что никакая информация о Вашых самых просматриваемых сайтах или недавно закрытых страницах не будет отправлена обратно в Google. Если по каким-либо причинам вам не нравится это, вы всегда можете изменить его на пустую страницу или на сайт по вашему выбору через панель инструментов или настройки Firefox.

Некоторые вкладки расширений могут конфликтовать с этой функцией, и в настоящее время является не совместимым с Firefox 2, поэтому проверьте настройки или обратитесь в справочный центр, если у Вас возникли какие-либо проблемы.



В следующий раз, когда вы хотите перейти на Ваш любимый сайт быстрее или восстановить случайно закрытую вкладку, вам не нужно вводить URL. Просто нажмите Ctrl + T или двойной клик справа от отрытой вкладки и вы увидите ваши любимые сайты.

Кроме того, в этой версии в настоящее время предоставляется возможность получить доступ к панели инструментов 5 с надежным текстовым сопровождением справа налево.

Мы постоянно работаем над улучшениями и новыми функциями для панели инструментов Google на основе обратной связи.

Я много времени провожу верстая в редакторе Dreamweaver и чтобы не уставали глаза, я сделал Dreamweaver-вариацию цветовой темы ruby_blue.

Зачем нужны камеры наблюдения? Правильно — чтобы наблюдать за происходящим и контролировать ситуацию! В наше неспокойное время эти самые камеры развешаны повсюду — от денежных хранилищ до придорожных кафе. Однако защищая свои владения, хозяева порой забывают о защите самой камеры путем банальной установки пароля на доступ из Интернета. И очень зря. Если пароль не установить — ваша камера «безопасности» превращается в публичную вэб-камеру с реалити шоу для всех желающих.

Microsoft Windows PowerShell — это расширяемая оболочка, разработанная на основе среды CRL .NET и платформы .NET Framework, с интерфейсом командной строки и сопутствующий язык сценариев. Первая версия была выпущена в 2006 году, в Windows 7 используется вторая версия оболочки. PowerShell работает в любой системе, где есть .Net 2.0 (Windows XP, Vista, Server 2003). В отличие от большинства оболочек, которые принимают и возвращают текст, оболочка Windows PowerShell принимает и возвращает объекты .NET, а также использует в своей работе только объекты. Это фундаментальное изменение делает возможным применять совершенно новые средства и методы администрирования и конфигурирования систем Windows.

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

Приветствую хабросообщество. Хочу поделиться с вами одним из своих последних мини-проектов — генератором иконок по геоданным MIG. С его помощью можно сгенерировать векторные (SVG) и растровые (PNG) иконки, с заданными параметрами (цвет, размер, обводка и прочее).



Всё это работает прямо в браузере и распространяется под лицензией MIT. Под катом можно узнать, как этим пользоваться и как оно работает.

На Хабре публиковалось немало статей о создании расширений для Chrome, но тема разработки Chrome приложений (они же Chrome apps) затрагивалась заметно реже. В последнее время она стала актуальнее из-за распространения устройств на ChromeOS. К тому же инфраструктура для создания приложений для Chrome стала более стабильной и удобной для использования. В этой статье я постараюсь ответить на основные вопросы: зачем вообще писать приложения для Chrome, чем они отличаются от расширений, веб-сервисов, десктопных приложений и т.п., а также как они разрабатываются, и какие на них накладываются ограничения. Если эта тема вызовет интерес, у статьи будут продолжения, затрагивающие более специальные вопросы.



Продолжение: Создание простого Chrome приложения

Приукрасим забытое старое

Для начала — небольшая картинка в качестве эпиграфа. Продолжение — под катом.

Здравствуйте, уважаемые читатели Хабрахабра!

Команде Бессвязного Девелопа удалось получить корпоративный аккаунт благодаря чудотворной программе Хабрахабра по поддержке начинающих стартапов без действующей монетизации. Мы — это ребята, которые частенько устраивают трансляции разработки различных приложений за 24 и 48 часов. Сегодня мы взяли курс на создание бесплатных аналогов нужных, но платных или обвешанных рекламой программ.

Чтобы наш приветственный пост не получился «Ни о чем», сегодня я расскажу о некоторых вкусностях работы с Xcode 5, подсмотренных на iOS 7 Tech Talks. В программе вечера:

1. Автодополнение кода: печенье, которое еще не все попробовали
2. Edit in scope: сытный шоколадный тортик
3. Объекты IB: назовите этот сорт клубничного желе
4. Двойной статус-бар: подавайте шоколадный шейк охлажденным
5. Color Blended Layers: вы неправильно наносите ромовый крем
6. Concurrent Object Enumeration: покройте все сахарной пудрой
7. Локализация: хватит каждый раз греть духовку

Бывает, наступает момент, когда нужно следить, не развалился ли лишний раз интерфейс мобильного приложения. Чтобы решить эту проблему используются автоматические тесты. Для веб страниц считается общепринятой практикой использовать Selenium Web driver, поэтому для мобильных приложений я искал похожие вещи. И, на счастье, таких нашлось немало, в них используется Selenium WebDriver JSON Wire Protocol.

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

Я тоже решил принять участие в этой специальной спонтанной олимпиаде кодерского мастерства, и вспомнил фразу одной моей подруги-музыканта: «Если уж играть, то на пианино». И решил: да будет так. Вместо игры напишу пианино. И написал.

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

Итак, начнем.

Клавиатура классического фортепиано состоит из 88 клавиш, покрывающих диапазон от A0 (Ля суб-контр-октавы, частота звучания 27.5 Гц) до C8 (До пятой октавы, частота 4186 Гц). Каждая октава на клавиатуре состоит из двенадцати нот:
До, До-диез, Ре, Ре-диез, Ми, Фа, Фа-диез, Соль, Соль-диез, Ля, Ля-диез/Си-бемоль, Си. Жирным выделены клавиши верхнего ряда, они на клавиатуре обычно бывают черного цвета.

Собственно, вот так выглядит одна октава:



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

Nx = N1 × 2^x-1, где:

• N – название ноты;
• x — номер октавы (от 0 до 8);
• Nx, соответственно, частота звука, соответствующая ноте N октавы x;

В формуле фигурирует N1 вместо N0 лишь потому, что часть нот суб-контр-октавы (N0) имеет частоту звучания ниже порога слышимости человеческим ухом (< 20 Hz).

Чтобы ноты получались чистыми, нам нужны достаточно точные значения частот нот контроктавы, от которой мы начинаем считать. Собственно, вот они:

Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Pace.js — это самый простой способ (документация здесь) добавить к вашему проекту прогресс бар. Для Pace существует несколько тем, которые описываются только на CSS. От Hubspot есть еще два универсальных проекта на GitHub: Vex и Messenger — «Dialogs for the 21st century» и «Alerts for the 21st century» соответственно. Рекомендую.

Flat UI Free 2.1
Популярный информационный ресурс Designmodo опубликовал на GitHub обширный набор элементов интерфейса в стилей трендового плоского дизайна. Об этом еще в марте писал хабраюзер ilya42. А на этой недели проект обновился до версии 2.1. Теперь в Flat UI есть поддержка Bootstrap 3, появился ряд новых элементов, иконок, обновилились шрифты. Количество старов уже больше 5000.

Framer
Потрясающее изобретение разработчика Koen Bok. Framer — это бесплатный инструмент для прототипирования интерактивных и анимационных интерфейсов. Приложение синхронизируется с Photoshop, нарезает слои макета на .png (конечно же для верстки придется немного порезать руками, но все зависит от педантичности дизайнера к макету) и все верстает на z-index и trasnform matrix3d. А интерактив и анимацию дизайнеры добавят с помощью этого простого синтаксиса прямо в браузере (к сожалению только Chrome). PSD.Logo, PSD.OverviewButton — это имена PNG файлов. Говоря о разработчике Framer, хочется также упомянуть про его проект Cactus — генератор статистических сайтов на Python использующий Django template.

От переводчика: Это первая статья из цикла о Node.js от команды Mozilla Identity, которая занимается проектом Persona. Как клиентская, так и серверная часть Persona написаны на JavaScript. В ходе работы команда проекта создала несколько инструментов на все случаи жизни — от локализации до отладки, управления зависимостями и многого другого. В этой серии статей разработчики Mozilla делятся с сообществом своим опытом и этими инструментами, которые пригодятся любому, кто пишет высоконагруженный сервис на Node.js.

Первая статья цикла посвящена распространённой проблеме Node.js — утечкам памяти, особенностям утечек в высоконагруженных проектах и библиотеке node-memwatch, которая помогает найти и устранить такие утечки в Node.

Все статьи цикла:

1. "Охотимся за утечками памяти в Node.js"
2. "Нагружаем Node под завязку"
3. "Храним сессии на клиенте, чтобы упростить масштабирование приложения"
4. "Производительность фронтэнда. Часть 1 — конкатенация, компрессия, кэширование"
5. "Пишем сервер, который не падает под нагрузкой"
6. "Производительность фронтэнда. Часть 2 — кешируем динамический контент с помощью etagify"
7. "Приручаем конфигурации веб-приложений с помощью node-convict"
8. "Производительность фронтенда. Часть 3 — оптимизация шрифтов"
9. "Локализация приложений Node.js. Часть 1"
10. "Локализация приложений Node.js. Часть 2: инструментарий и процесс"
11. "Локализация приложений Node.js. Часть 3: локализация в действии"
12. "Awsbox — PaaS-инфраструктура для развёртывания приложений Node.js в облаке Amazon"

---

Зачем заморачиваться?

Вы можете спросить, зачем вообще отслеживать утечки памяти? Неужели нет более важных дел? Почему бы просто не перезапускать процесс время от времени, или просто добавить памяти на сервер? Есть три причины, по которым устранять утечки всё-таки важно:

1. Возможно, вы не сильно переживаете об утечках памяти, но этого нельзя сказать о V8 (движок JavaScript на котором работает Node). Чем больше памяти занято, тем активнее работает сборщик мусора, замедляя ваше приложение. Так что в Node утечки напрямую вредят производительности.
2. Утечки могут привести к другим проблемам. Протекающий код может блокировать ограниченные ресурсы. У вас могут закончиться файловые дескрипторы или вы вдруг не сможете открыть ещё одно соединение с БД. Такие проблемы могут возникнуть задолго до того, как кончится память, но обрушат ваше приложение ничуть не хуже.
3. Рано или поздно ваше приложение упадёт. И это наверняка случится во время наплыва посетителей. Вас все засмеют и будут писать про вас гадости на Hacker News.

Я веб-разработчик с опытом работы 2 года, работаю в firefox с firebug. Верстаю по технике Pixel-perfect. Почему?

• Быстрее создается страница, чем когда бегаешь между браузером и PSD.
• Гораздо качественнее получается результат, от чего и ваш клиент в восторге аж придраться не к чему.
• Банально удобнее видеть макет и тут же позиционировать элемент под ним.

Раньше я размещал изображение Html кодом. Но как неудобно выделять элемент в firebug-е если поверх всего лежит изображение. Приходилось каждый раз лезть в стили и прятать картинку. Pixel-perfect plugin для firefox почему-то не работал.
Тогда появилась идея создать скрипт, который будет прятать по short-cut(hotkey)-ю изображение. И пока создавал скрипт появлялись новые идеи для модернизации удобства использования. В итоге получился: Pixp

После создания я смог его протестировать только на одном живом проекте, так что возможны баги, ну и так как это мой первый публичный проект для всех, прошу строго не судить. Однако прошло уже не мало времени как я ушел в back end, а мои друзья верстальщики продолжают работать используя данный скрипт.
Лично для меня процесс верстки стал гораздо удобнее. И доказывать клиенту что этот элемент расположен правильно, теперь не составляет труда. Так как ваш клиент также может использовать скрипт, не устанавливая доп. ПО.

Доброго времени суток, уважаемые хабражители. Хочу поделиться с вами одной замечательной находкой на GitHub — SVG.js — удобная манипуляция и анимация SVG. Хочется сказать о трех вещах, которые сосредоточили мое внимание на этой библиотеке. Самое простое и важное это то, что с появлением retina дисплеев SVG становится популярнее, более нужным, чем раньше. SVG.min.js весит 34кб и 9кб в Gzip, что в разы меньше Raphaël и что можно пожертвовать для дизайна и эффектов. Минифицированный SVG.filter.js размером в 3кб является прекрасным кроссбраузерным аналогом для свойства webkit-filter.

С выходом CSS3 появилось множество новшеств: с новыми свойствами стили стали сложнее, но не появилось никаких улучшений для поддержки новых и старых сложностей, в том числе дупликации кода. В чистом CSS отсутствует модульность, так как разбиение стилей на файлы и их подключение через @import пагубно влияет на производительность.
Решение этих проблем нашлось в CSS препроцессорах, с их помощью стало возможным использование переменных, выполнение математических подсчетов в коде, появилась возможность повторно использовать код с помощью миксинов и наследования.

Mobyfy.js — открытая библиотека, предназначенная прежде всего для облегчения создания отзывчивых (responsible) сайтов. Основная фишка состоит в так называемом «Capturing API» — позволяющем модифицировать DOM непосредственно ДО начала загрузки браузером ресурсов (скриптов, изображений и т.д.)

Привет, %username%!

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

На мой взгляд, самым значительным изобретением в мире веб-разработок, за последние несколько лет, стали CSS media queries — они позволяют организовывать внешний вид веб-приложения так, что он в корне может отличатся на разных разрешениях экрана. Любой форм-фактор девайса может иметь собственное представление дизайна и это прекрасно. Мы все это знаем, но речь пойдет не об этом, а о обработке событий…

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

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

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

Вы веб-разработчик?

Для вас есть новости.

В чем собственно проблема?

Все веб-фреймворки можно разделить на группы. У каждой из этих групп есть свои достоинства и недостатки.

Сервер-ориентированные

Например: RoR, Django, Asp Net, Express.js
Генерируют html на сервере.
Такой подход хорош для статических страничек.
Но как только вы хотите сделать что-то интерактивное, то начинаете утопать в jQuery-коде.

Клиент-ориентированные

Например: Backbone.js, Knockout.js, Ember.js, Batman.js
Генерируют html прямо на клиенте из темплейтов. Код на клиенте структурирован.
Хорошо для интерактивных сайтов.
Не отменяет необходимость использовать сервер-ориентированный фреймворк, что ведет к дублированию кода (модели, валидация и т.д.)

Кросс-компилируемые

Например: GWT, Cappuccino
Позволяют писать всё на одном языке.
Очень большой уровень абстракции.
Шаг вправо, шаг влево — расстрел.

Так же ни один из фреймворков не имеет механизмов синхронизации данных между клиентом и сервером и оставляет реализацию этого на нашу совесть.