Как обычно, раз в неделю, предлагаем посмотреть дайджест простых опытов от канала GTV.

В этом выпуске:

• тушение свечей содержимым «пустого» стакана;
• кипятильник из лезвий;
• возгорание потухшей свечи;
• простой опыт с кислородом из марганцовки.

и пара опытов, которые наверняка понравятся детям:

• рисуем на майке разводами от маркера и спирта;
• пена из перекиси водорода и марганцовки.

Под катом 6 видео.

В продолжение недавней статьи про адаптивную верстку, хочется более полно раскрыть тему. В реалиях, чаще всего, для адаптивной верстки используют CSS-фреймворки. Об одном из них я хотел бы рассказать, а если точнее – перевести мануал по ее использованию. Называется он Skeleton.

Разрешите представить вам перевод статьи «Cross-Browser Inline-Block», написанной Райном Доэрти холодным февралем 2009 года. В статье рассказывается о верстке элементов списка с установкой для свойства display значения inline-block. Статья об этом, а также о трудностях, возникающих в процессе достижения результата и о методах их «лечения».

Уже неоднократно видел утверждение, что CSS необходимо комментировать, чтобы потом было проще сориентироваться себе или тому, кто также поддерживает или будет в дальнейшем поддерживать ваш код. Но почему-то никто не предлагает использовать какой-то универсальный формат комментариев, который был бы понятен всем, хотя в программировании такое используется повсеместно: JavaDoc, JSDoc, PHPDoc и т.п.

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

В середине марта мы, фактически, закрыли наш стартап 9facts.com, о котором я писал на Хабрахабре в декабре. И вот к маю я таки созрел на написание этого поста.

Начну с самого важного:

От переводчика

С удовольствием ознакомился с этими рекомендациями и теперь предлагаю вам перевод.

Введение

Это руководство описывает правила для оформления и форматирования HTML и CSS кода. Его цель — повысить качество кода и облегчить совместную работу и поддержку инфраструктуры.

Это относится к рабочим версиям файлов использующих HTML, CSS и GSS

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

Американская компания Bocoup, как и многие другие веб-разработчики, постоянно использует в работе известный «пуленепробиваемый» шаблон для создания HTML5-сайтов HTML5 Boilerplate. Однако, сотрудники Bocoup решили не только пользоваться, но внести свой вклад в общее дело и выкатили для всеобщего пользования не менее концептуальную вещь — Backbone Boilerplate, набор лучших средств и приёмов для создания приложений Backbone.js.

Прямо из коробки мы получаем:

• Backbone, Underscore и jQuery, всё это на базе HTML5 Boilerplate.
• Инструмент Windows/Mac/Linux для прекомпиляции шаблонов, связывания и минификации всех библиотек, кода приложения и CSS.
• Лёгкий веб-сервер node.js.
• Многочисленные сниппеты кода для Backbone, облегчающие жизнь.

В Backbone Boilerplate логичная и элегантная файловая система (отдельно код, вспомогательные файлы, тесты, билды) и есть возможность создавать собственные классы Models/Collections/Views/Routers внутри модулей.

Разработчики говорят, что проект появился в результате их долгих попыток работать с другими шаблонами: оказалось, что в одних нет процесса сборки, другие налагают излишние ограничения. Новый Backbone Boilerplate призван исправить ситуацию и вполне может стать каноническим, каким стал тот же HTML5 Boilerplate.

Если на сайт вики-энциклопедии «Циклопедия» забредёт пользователь компьютера, оснащённого современным программным обеспечением Корпорации Microsoft, то тогда взгляд его прежде всего окажется привлечён шрифтом заголовков первого и второго уровня («Циклопедия», «Культура», «Общество», «Наука и техника», «Природа и человек», «Быт»): такой шрифт нынче не часто встречается во Всемирной Паутине (это вы можете без труда смекнуть и самостоятельно, когда сравните фрагмент скриншота, мною справа для того приложенный, с собственным вашим опытом).

Но этот шрифт, господа, да станет всем нам примером того, как не следует оформлять наши заголовки. А угадаете ли, почему это так? Да потому, что шрифт этот — Candara (и это нетрудно увидать воочию: достаточно прибегнуть к расширению «Context Font» или вглядеться в нынешний вики-код заглавной страницы Циклопедии и её подшаблона «Раздел»). Некоторые из нас ужé знают или хотя бы догадываются (а другим достаточно взглянуть в Википедию, чтобы узнать) о том, что Candara — это шрифт эксклюзивный, который встречается только в сравнительно недавних продуктах Корпорации Microsoft, таких как последние Windows (Vista, Windows 7) и Office 2007, да ещё раздаётся в составе Microsoft Powerpoint Viewer 2007 и Microsoft Office Compatibility Pack (в том числе для более ранних систем — для Windows XP, для Windows 2000). Если же на такой сайт забредёт читатель с Линуксом, или Маком, или Андроидом, или Айфоном, или Айпадом — то тогда, сами понимаете, «Кандару» взять ему будет неоткуда — и вид заголовка поневоле станет далеко отличаться от желаемого.

А ведь можно обеспечить единообразное отображение заголовка во всех системах и браузерах; для этого достаточно попросту отгрузить всем читателям один и тот же шрифт. Шрифт можно раздавать с собственного же сайта (добавив продуманные правила @font-face в свой CSS), а можно воспользоваться услугами внешнего хостинга шрифтов — например, услугами коллекции свободных и бесплатных шрифтов «Google Web Fonts», чей красивый новый интерфейс обсуждали на Хабрахабре в конце июня. О ней-то и поговорим под хабракатом.

Что следует сказать по поводу употребления Google Web Fonts при оформлении заголовков?

CSS3 и HTML5 развиваются всё быстрее и быстрее, браузеры начинают поддерживать всё больше новых фишек и плюшек. В связи с этим, мне хотелось бы заглянуть в наш будущий рай верстальщиков и сделать цикл обзорных статей по новым плюшкам и фишкам этих технологий.
В этом цикле мне хотелось бы рассмотреть такие свойства CSS3, как transition, animate, opacity и модель rgba().

Использование CSS3.

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

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

В этой статье мы попытаемся понять, что же из себя представляют эти загадочные "Отступы", что это за звери и с чем их едят. Так же рассмотрим, что такое inline-block, и почему после себя он ставит эти непонятные интервалы. Ну, и, самое главное, мы увидим несколько универсальных решений данного вопроса и, конечно же, обсудим все их стороны.

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

Этот перевод предназначен в первую очередь для тех, кто уже использует SSD диск и MacOS Lion. Лично я год с хвостиком радуюсь производительности SSD Intel X-25M и отсутствию карусельки смерти чего и вам от души желаю.

До сегодняшнего дня я был уверен, что мой SSD работает на 100% своих возможностей. Но не тут-то было! Если вы купили свой яблочный компьютер без SSD, то есть из магазина он выехал с обычным HDD, то обещанный во Льве TRIM у вас будет не активен, как оказалось только изначально укомплектованные SSD накопителем компьютеры имеют эту функцию по умолчанию. Проблема, как вы понимаете, в вызывающем вопросы маркетинге компании имеет софтверные корни, а не железные. И на эту подлянку от Apple мистер Грант Пеннэл предлагает свой болт с резьбой.

Хочу рассказать о проекте, который мы недавно выпустили.

Это открытый PHP-фреймворк для разработки бизнес-приложений: приложений, у которых есть бекенд, закрытый авторизацией, и к которым одновременно подключаются много пользователей с разграниченными правами доступа.



Фреймворк называется Webasyst, написан на PHP/MySQL/Smarty/jQuery, бесплатный, с открытым кодом (лицензия LGPL).

Далее представлена кроссбраузерная реализация скроллинга страницы средствами jQuery.

Как всё начиналось

В последнее время на многих сайтах можно увидеть в той или иной вариации кнопки для прокручивания страницы вверх или вниз. Смотрится это довольно мило, удобно в использовании, и просто в реализации. Столкнувшись с проблемой прокрутки объёмного контента в очередном разрабатываемом проекте, решил реализовать подобную функциональность.
Задача была следующая: сделать две кнопки. По нажатию на одну осуществлять прокрутку страницы в самое начало, по нажатию на другую – в самый конец. Также было решено дополнительно реализовать возможности чисто визуального характера, типа анимации, исчезновения кнопок и прочее, здесь я останавливаться на этом не буду, так как тема это – кросбраузерность. Собственно это стало основной проблемой в процессе написания кода.
Нарисовав симпатичные кнопочки, прикрутив анимацию и исчезновение кнопок, и реализовав собственно саму прокрутку, я обнаружил, что в разных браузерах наблюдаются проблемы со скроллингом. Раздосадованный (и почему-то ни капли не удивленный…) этим фактом (а также тем, что не получится уйти с работы пораньше), я решил ознакомиться с аналогичными реализациями в Интернете. Просмотрев несколько примеров, точно также, не воспринимающих какой-либо браузер, а подчас и работающих только в одном определённом, было решено заняться прототипированием, экспериментированием, решением задачи методом тыка (нужное подчеркнуть).
Далее я приведу кроссбраузерный вариант реализации простенького скроллинга страницы вверх/вниз, с пояснениями, где и что может пойти не так и в каком браузере (ни в коем случае не претендую на оригинальность решения, это просто желание поделиться собственным опытом, и сэкономить людям время при решении аналогичных задач). Ах да, забыл оговориться, подавляющая часть кода написана на jQuery.

В Сети можно обнаружить массу советов, статей и FAQ для web-маcтеров, которые посвящены теме взаимодействия сайтов и поисковых систем. Поэтому принципиально нового в идее schema.org, конечно, нет. На нем собрано (пока довольно небольшое) число примеров рекомендуемой HTML-разметки и некоторой другой полезной информации, использование которой web-мастерами позволит создавать «правильные» сайты, анализ которых поисковыми системами будет наиболее быстрым и эффективным, что, в свою очередь, позволит пользователям быстрее находить интересующую их информацию.

Более любопытным является то, что создателями сайта являются три крупных игрока IT-рынка, для двух из которых область интернет-поиска является, как минимум, ключевой в их бизнесе. Сайт создан Google, Yahoo! и Microsoft и, признаться, не часто приходиться видеть объединение конкурирующих компаний в деле, которое реально может быть полезным для обычных пользователей сети.

К сожалению, не могу публиковать топик-ссылку, пришлось сделать обычный.

Введение

jQuery UI больше всего известен как набор готовых виджетов. Главное их преимущество, на мой взгляд, — консистентное API: каждый виджет управляется одинаково. Второе их преимущество — они хранят свое состояние: если повторно навесить виджет на элемент, то результатом будет уже существующий инстанс виджета.
Но jQuery UI — это не только набор окошечек и табов (далеко не всеми любимых). Это еще целая инфраструктура для создания своих виджетов: с удобным консистентным API, с хранением состояния и с возможностью наследования. Как ни странно, это для многих новость, в результате чего и появилась эта статья — так же, как это было новостью для меня всего несколько месяцев назад.

Представляю вашему вниманию перевод статьи под названием "Innovative Techniques To Simplify Sign-Ups and Log-Ins" от Anthony T. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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



Форма авторизации на сайте Basecamp

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

Многие программисты оптимизируют JavaScript и CSS-код, чтобы страница грузилась быстрее.
Но не все они делают прелоадеры, которые дают пользователю эффект субъективно более быстрой загрузки.

Джед Шмидт, Томас Фухс и Дастин Диаз — достаточно известные в JavaScript-коммьюнити ребята в последнее время нашли себе новую развлекуху — писать полезные штуки размером не больше одного твита, то есть 140 байт. Даже домен зарегали — 140byt.es, куда приглашаются все желающие попробовать свои силы в написании супер-компактных функций.

Естественно, в ход идут все самые изощренные способы и техники уменьшения размера исходника. У них есть вики-страничка с советами, которую я и решил перевести.

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

Спрайтовая анимация — одна из тех вещей, которые при всей своей примитивности успешно работают и применяются в компьютерной графике и играх уже больше четверти века. Даже в трехмерных играх есть спрайты — например, билборды взрывов. Во многих браузерных и флеш-играх применяют именно спрайтовую анимацию, так как она очень проста и не требует высокой производительности — просто переключай кадры и все! А с появлением анимации в CSS 3 стало возможным использовать спрайты на своих страницах без яваскриптов.

Недавно на Хабре была статья про пятнашки на Canvas.
Отличная статья, уверен, новички найдут в ней много полезного. К сожалению, в комментариях высказались о немного завышеном потреблении процессора.
Это не от недостатка технологии, а от недостаточного опыта и удобных инструментов.
В этом топике я расскажу, как, при помощи LibCanvas, сделать эту игру совершенно нетребовательной к процессору и отлично выглядящей.