В продолжение своего топика Новое в CSS3: многоколоночность, flexbox, сеточная разметка предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами.



Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div'ов. Но все может стать намного проще с CSS3 Multi Column Module.

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

Короче, если вы, как и я, поиграли с этой библиотекой, понаписали красивых формочек, и вам это понравилось, то все это дело захотелось применить на реальном проекте. И тут проблема — в реальном проекте формочек больше чем одна. А раз такие инструменты, то хочется single web page application и никак иначе. А делать один контроллер и все темплейты заверстывать на одну страницу тоже тупо и тормозно.

Под катом приведу основу своего сложного приложения. Само оно совсем не сложное, но модульное и допускает расширения, а темплейты и модели подгружаются динамически. Идея была подсмотрена в этой презентации — http://www.knockmeout.net/2012/08/thatconference-2012-session.html, код презентации выложен на github — https://github.com/rniemeyer/SamplePresentation — на базе этого кода будем писать свой.

После некоторого, опыта решил написать небольшую статью-шпаргалку о загрузке файлов с использованием возможностей HTML5, а именно File API.

Читайте далее:

1. Поддержка браузерами.
2. Загрузка через Form Data.
3. Загрузка через File Reader.

Краткое содержание:

Возьмем немного функций высшего порядка, добавим частичное применение функций, приправим fold с map-ом и получим Javascript DSL для работы с DOM.

Человеческим языком:
Простое и понятное введение в функциональное программирование на чистом и понятном Javascript.

В отличие от «Через тернии к Haskell» все разжевано (возможно даже слишком) и разложено по полочкам.

Прочтение статьи развоплотит миф о неприменимости ФП в реальной жизни. Вы сможете смотреть на решение одной и той же задачи с разных точек зрения. Прямо как на картинке.

CSS Conditional Rules, как следует из названия, являются условными конструкциями, которые можно применять в самом CSS. Они реализуют проверку поддержки свойств текущим браузером с возможностью группировать условные выражения с помощью логических операторов and, or и not. В этом посте хотелось бы рассказать, кроме прочего, о синтаксисе этого модуля CSS3 и текущей поддержке его браузерами.

Наткнулся на очень простой в реализации, но интересный rollover-эффект для кнопок на CSS. Автор — некий японец ksk1015.



Демонстрация эффекта и процесс написания.

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

За последние два с половиной года команда jQuery UI проделала огромную работу. Было выпущено более десятка релизов, исправлено больше 500 багов. Но основная задача была сделать jQuery UI как можно стабильнее, и гибче. В прошлом году мы замахнулись на серьезную цель:

Мы хотим полностью обновить весь проект к версии 2.0. Мы упростим API, улучшим стабильность, документацию, и обеспечим полное тестирование каждого плагина.

И вот сегодня мы рады представить вам первый важный шаг в достижении этой цели — новая версия jQuery UI 1.9.0. Она содержит сотни исправлений, лучшее покрытие тестами, и обновленным API. В добавок, мы развернули новую версию сайта, с улучшенной документацией.

Псевдоэлементы :before и :after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены.

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

Хотя CSS3 ещё не является стандартом W3C, последние версии браузеров имеют его частичную поддержку. Можно встретить примеры реализующие те или иные свойства CSS3. Но вместе с восторгом многих не покидает также чувство опасения. Связано это в первую очередь с тем, что нет чёткого понимания в поведении браузера при обработке этих свойств. Под катом собрана таблица в которой сравниваются поддерживаемые CSS3 свойства во всех основных браузерах. Кроме этого указывается версия браузера и префикс для кодирования. Шпаргалка в форме изображения, поэтому её удобно скачать к себе на компьютер или мобильное устройство для дальнейшего использования.

Предисловие от переводчика.  В постскриптуме к моей вчерашней блогозаписи я указал, что AppJS — это не единственное такое средство, которое позволяет создавать приложения с GUI (графическим интерфейсом пользователя) при помощи вебоподобных методов разработки на языках HTML, CSS и JavaScript с использованием движка Node.js. Естественной иллюстрацией к этому постскриптуму является нижеследующий перевод гитхабовской страницы проекта node-webkit. И сразу скажу: я предвижу заранее, что непредвзятый взгляд ваш сочтёт node-webkit ещё более удобным и развитым средством, чем AppJS.

---

Введение

node-webkit — среда для запуска приложений, основанная на Chromium и Node.js. При помощи node-webkit можно создавать традиционные графические приложения посредством HTML и JavaScript. Также node-webkit позволяет вызывать модули Node.js прямо из DOM и тем обеспечивает новый способ создания таких приложений и употребления веботехнологий в них.

node-webkit создан и разрабатывается в Интеловском Центре технологий с открытым исходным кодом (Intel Open Source Technology Center).

Введение в node-webkit (слайды).

Достоинства

• Приложения создаются при помощи современных HTML5, CSS3, JS и WebGL.
   
• Полная поддержка API Node.js и созданных другими разработчиками модулей.
   
• Вызов API Node.js без потерь в производительности.
   
• Лёгкость упаковки и распространения приложений.

Сегодня я хочу познакомить вас с замечательными примерами hover-эффектов от Mary Lou. Многим понравились её примеры с hover-эффектами для меню и на этот раз она решила порадовать нас не менее замечательными примерами для круглых элементов. Поскольку сейчас у нас есть возможность использовать свойство border-radius, мы можем создавать круглые формы, и они все чаще появляются в качестве элементов дизайна на веб-сайтах. Один из вариантов использования, который мне более всего нравится, это круглые миниатюры, которые выглядят гораздо интереснее, чем обычные, прямоугольные. И сейчас мы собираемся создать несколько необычных эффектов при наведении на такие элементы!

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

Вот один из способов сделать свой peer-2-peer телеканал. Есть Talxy.com, который позволяет вставить на сайт флэшку и транслировать видео с вебкамеры для всех, кто эту флэшку увидит. При этом, чем больше смотрящих, тем меньше будет нагрузка на ваш канал и выше качество трансляции. Talxy устроен так, что смотрящие подсоединяются к peer-2peer сети и используются для ретрансляции видео друг другу.

Теперь берём какую-нибудь прогу для виртуальной видео-камеры, вроде ManyCam.com, задаем в ней воспроизведение всех видео из директории с любимыми фильмами.

Далее кликаем в talxy-флэшке на правую кнопку и выбираем в качестве вебкамеры виртуальную вебкамеру ManyCam.

Вуаля! Получаем свой телеканал для друзей без всякой рекламы с разрешением 640 на 480 (не HD, но тоже неплохо).

После того, как last.fm, уступив требованиям алчных правообладателей, лишил нас возможности бесплатного пользования своим весьма интересным и приятным сервисом, в этой сфере образовался некоторый вакуум. Хотя, свободно предоставляемый доступ к API last.fm, с одной стороны, и наличие необходимого и, пока, свободного контента на Вконтакте, с другой стороны, давало надежду, что кто-нибудь скрутит эти вещи вместе и мы получим свободное, last.fm-подобное радио. Справедливости ради, стоит отметить, что попытки были. Но предлагаемые решения не устраивали меня, поскольку, как правило, это были монстроподобные комбайны-плееры с кучей не всегда внятных настроек, а хотелось сделать просто удобное радио, со скробблингом и минимумом функций.

Итак, встречайте:

Freelast radio

Перевод статьи 8 Excellent Tools for Optimizing Your Images
К сожалению на момент перевода один из сервисов перестал работать. Но хабровчане предложили еще много хороших решений!

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

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

Как использовать прилипающий футер

Введение

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

Решения Райана Фэйта хорошо известно и работает, но требует лишний пустой <div>. Приверженцы чистого HTML-кода могут найти это богохульство несемантичным. В нашем решении лишнего <div> нет.

У многих айтишников есть проблемы со сном. Ниже — описание моей проблемы и метод, которым я её решил.


Несколько недель назад я получил сразу три крупных заказа, каждый из которых был жёстко ограничен сроками. Проекты были действительно интересными и хорошо оплачиваемыми, поэтому первые несколько дней я работал практически без сна. Естественно, производительность начала снижаться. Дошло до того, что я начал ловить себя на том, что несколько минут(!) я «тупо втыкал» в монитор, ничего при этом не делая, и даже не замечая своего аут-состояния.

Тогда я решил: всё, пора нормально выспаться. Сохранив всё «как есть», я отправился в постель… и понял, что проблема отнюдь не решена.

Не так давно вышла версия 0.5 (RC3) приложения для автоматического ускорения сайтов — Web Optimizer. Поскольку с момента написания предыдущего руководства по установке прошло уже три месяца, интерфейс и логика работы приложения существенно изменились (стали проще и нагляднее), то стоит осветить процесс установки еще раз, в новом виде и с новыми подробностями.

Шаг 1: загрузка архива

Web Optimizer поставляется в двух вариантах: ZIP-архив и мини-установщик. Для загрузки первого варианта идем по адресу code.google.com/p/web-optimizator/downloads/list и выбираем Featured версию 0.5 или выше.