В последнее время сложилось ощущение, что много людей пишет про создание табов (вкладок) на CSS.
Сейчас я хочу рассказать про ещё один способ создания вкладок на CSS (Предупреждая выпады в свою сторону, упомяну, что без :target).

Но обо всём по порядку.

Тема изучения английского языка, судя по результатам поиска, здесь довольно актуальна. А коли так, давайте узнавать о нём больше вместе.
Вспомните-ка, какую конструкцию заменяет ain’t: am not, have not или do not?
Правильный ответ: все три! А это предложение только для того, чтобы нельзя было догадаться по короткому ответу :) Давайте посмотрим, как же так вышло и как правильно использовать это слово.

По следам недавних топиков, а также постоянных рассказов в стиле «мой стартап не взлетел, потому что его зохавала лапша из callback-ов».

Как раз недавно я закончил небольшой проект (ссылку не даю, чтобы не заподозрили — кому надо см. профиль), полностью и на всех этапах написанном только на JS, и притом полностью асинхронный. Разумеется, я столкнулся с пресловутой проблемой «лапши». И, вы не поверите, совершенно спокойно решил её без всяких там фреймворков и хитрых приемов.

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

Всем добрый день.

Недавно я задумался надо вопросом фонового обновления информации и мне пришла в голову одна идея.

Суть задачи — мы находимся на странице списка новостей. Необходимо обновлять список по мере поступления новых новостей. Серверный язык PHP

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

1. Сообщество или социальная сеть?
2. Как люди образуют связи
3. От слабых связей к сильным
4. Поддержание сильных связей

Автор этой серии публикаций — Майкл Ву (Michael Wu), ведущий аналитик компании Lithium, специализирующийся в изучении социальных взаимодействий и онлайн-сообществ.

---

Я хочу поделиться с вами своим недавними исследованиями, посвященными взаимосвязи между социальными сетями и сообществами.

С 2008 года социальные медиа становятся широко используемым и модным понятием в корпоративном мире. Вопрос в том, что такое социальные медиа? Одни, похоже, отождествляют это понятие с сайтами, называющимися социальными сетями, вроде Facebook. Другие думают, что социальные медиа — это блоги, микроблоги (вроде Twitter), Flickr, Youtube или любые другие аналогичные вебдванольные сервисы, основанные на коллективном обмене информацией между пользователями. Указывают на разные типы социальных медиа, начиная с сервисов социального взаимодействия (вроде Wikipedia, Delicious или Digg), и заканчивая онлайн-сообществами (вроде тех сообществ, которые мы создаем вокруг брендов или же таких как Yahoo! Answer).

Все эти определения в некоторой степени верны, если мы классифицируем социальные медиа по их функциональным признакам. С другой стороны, писатель и блоггер Брайан Солис (Brian Solis) предложил иную классификацию социальных медиа, основанную на способах общения между людьми. Он назвал свою классифиацию «Призмой общения» (conversation prism). Однако, если мы хотим понимать социальные медиа с точки зрения выстраивания связей между людьми в рамках социальной антропологии, мы обнаружим, что существует всего два основных типа социальных медиа:

1. Социальные сети
2. Онлайн сообщества

Мы уже ранее затрагивали возможности модуля CSS3 Backgrounds and Borders, рассматривая работу с тенями (box-shadow). Сегодня мы немного поговорим о еще одной интересной возможности — использовании нескольких изображений в фоне.

Композиция фонов

Существует множество причин, по которым, вам вообще может потребоваться композиция нескольких изображений в фоне, среди них наиболее важные — это:

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

Могут быть и другие разумные причины :)

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

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

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

Подробности под Хаброкатом.

Новый справочный сайт HTML5Please может сильно помочь при разработке кросс-браузерных сайтов на HTML5.

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

HTML5Please идёт дальше. Кроме информации c caniuse.com, он ещё даёт практические рекомендации, каким образом лучше реализовать каждую фичу HTML и CSS. Просто вписываете в поисковую строку любую функцию — и сразу видите рекомендацию, можно её использовать или нет в данный момент, а если можно, то с какими условиями.

Если функция поддерживается не во всех браузерах, то сразу же приведены ссылки на соответствующие полифилы (polyfills), кросс-браузерные фрагменты кода обычно на github, которые добавляют недостающий функционал в старые браузеры (см. список полифилов). Если для функции нужен фоллбэк (откат на другую функцию или другой формат для совместимости), то вкратце описывается, как это сделать и в каких условиях это необходимо.

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

Довольно часто в пользовательском интерфейсе есть кнопки «Сохранить» и «Отмена». Особенно часто эти кнопки используются в формах. Несмотря на то, что в современном мире всё идёт к упрощению интерфейса, но на эти кнопки всё равно есть спрос.

Сегодня я предлагаю разобраться как с помощью KnockoutJS принимать и откатывать изменения для индивидуальных observables так и целых view models.

Знакомые с KnockoutJS сразу могут выдать две ссылки на лучший блог о сабже

• Creating smart dirty flag in KnockoutKS
• Guard your model accept or cancel edits

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

• Dirty flag — не позволяет сохранять изменения, а только сбросить их в начальное состояние.
• protectedObservable — никто не видит изменений observable до тех пор, пока не произойдёт commit. Это ограничение сильно удручает при использовании dependent observables, к примеру.

Ну и к тому же, они нацелены на индивидуальные observable'ы, а хотелось бы работать с несколькими полями сразу.

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

Компания-создатель облачной IDE Cloud 9 на конференции NodeSummit, посвященной Node.js, планирует представить ряд новых улучшений в своем продукте, попутно представив сообществу англоязычный сборник документации по Node.js, который доступен по адресу nodemanual.org.

Весь сборник разделен на две части — Basic и Tutorials; при этом как таковых «HowTo» для новичков нет, поэтому можно сказать, что целевой аудиторией сайта являются все же профессионалы в Node.js. Авторами большинства статей называются разработчики Mozilla и Joyent, а примеры, представленные в документации, можно запустить в Cloud9, имея в ней аккаунт. GitHub сборника можно найти здесь.

Также Дениэлс намерен представить и блог nodebits.org, направленный на "… поддержание духа Node.js и инновационности". Сейчас блог не отличается большим числом статей (первая датируется только 30 декабря), но его обещают пополнять, называя среди авторов ведущих разработчиков Node.js-сообщества Тима Касвелла, Берта Белдера и Бена Нурдхаиса (Tim Caswell, Bert Belder, Ben Noordhuis).

[NodeManual]

Обнаружив трёхдневной давности правку в вики Node, я жмякнул по приведённой там гиперссылке и попал на сайт-каталог «The Node Toolbox», довольно полезный. Как я понял тотчас же, целью этого сайта является распределение по категориям (или по тегам) всех тех пакетов с джаваскриптами для Node, которые содержатся в каталоге пакетного менеджера npm. Таким образом, сайт этот может быть ценною отправною точкою для поиска пакетов для Node по их предназначению. (В мире открытого кода это средство, как и другие до него, позволяет человеку внимательному не переизобрести ненароком чей-нибудь велосипед.)

Наверху сайта «The Node Toolbox» видна «горячая десятка» наиболее свежих пакетов и десятка наиболее используемых пакетов (по числу зависимостей других пакетов от них) — в общем-то это средство менее полезно и инновационно, чем список категорий, потому что эти рейтинги и без того видны на search.npmjs.org (притом там в рейтингах видать по пятнадцать пакетов, а у «The Node Toolbox» всего лишь по десять).

Более или менее пристальное вглядывание в эти рейтинги на протяжении нескольких последних месяцев привело меня ко впечатлению (быть может, и ошибочному: архивов-то рейтингов я не веду, а полагаюсь на память) о постепенном росте популярности пакета async, сейчас вошедшего ужé в десятку наиболее используемых. Он полезен тем, что содержит два десятка функций, серьёзно упрощающих объединение вызовов асинхронных функций, составление из них более крупных фрагментов алгоритмов. Не могу не отметить, что наблюдаемая популярность вполне заслужена пакетом async. Есть основания думать о части функций пакета async (притом о заметно большой части их) как о своего рода асинхронном аналоге соответствующих функций underscore, используемых при пакетной обработке коллекций (то есть массивов и объектов) — а ведь тот же рейтинг называет пакет underscore наиболее используемым в других пакетах для Node. Логично, что популярен и асинхронный аналог его.

Всякий, кто взглядывал на график выхода новых версий браузера Firefox, ожидающихся в 2012 году, уж конечно видел там, что прямо сейчас идёт работа над внедрением новых возможностей в версии Firefox 12 — которая, постепенно пройдя через стадии «Aurora» и «Beta», выйдет в свет в конце апреля нынешнего года. И вот почему, просто глядя на все те возможности, которые нынче внедряются в Firefox 12, можно предвидеть будущие возможности web-приложений почти на полгода вперёд — и порадоваться (а не то и посидеть с отвисшею челюстью) заранее.

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

Внедрён API WebSMS (описанный в MozillaWiki и обсуждавшийся в багзилле), который добавит в DOM объекты, управляющие отправкою и приёмом сообщений SMS.

Внедрён API WebTelephony (описанный в MozillaWiki и обсуждавшийся в багзилле), который добавит в DOM объекты, позволяющие звонить по телефону, а также принимать (или отклонять) входящие звонки и интересоваться состоянием мобильника (таким, как «идёт набор номера», «дозвон», «занято», «соединился», «рассоединился», «входящий звонок», и так далее).

Само собой разумеется, что эти интерфейсы предназначены для мобильных версий Файерфокса.

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

Вступление

Так всё же, что делают эти скрипты? Чаще всего вредоносные JScript файлы устанавливаются «хакерами», для получения какой либо выгоды, а именно:
Пополнение своего ботнета, установка винлокеров, исправления файла hosts для перенаправления пользователей на фейковые сайты, ну и конечно же для обмена трафиком.

Так вот, я попробую подробно рассказать о том, как раскодировать вредоносный JavaScript и в последствии вычислить адрес, куда он ведет.

Уважаемые Хаброжители! Мы очень рады тому, что теперь с Вами! Поверьте, это крайне важно для нас — быть на связи с профессионалами. Мы тоже себя считаем профессионалами и Ваши комментарии, тому свидетельствуют.
Мы динамично развиваемся и расширяемся. Нам очень нужны сейчас iOS/Android девелоперы, которым мы готовы предложить все, для того чтобы им работалось очень интересно и супер комфортно. Об этом чуть подробней и чуть позже.
А пока немного о том как попасть к нам в команду. Все просто! Надо всего лишь уметь разбивать кирпичи!



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

Недавний доклад Гарри Бернхардта на CodeMash оказался довольно популярен (прим. пер.: в том числе и на хабре). В докладе он шутит по поводу некоторых особенностей поведения ruby и javascript.
Вряд ли я смогу вас убедить, что есть какой-то смысл в том, на что жалуется Гарри. Тем не менее, надеюсь, я смогу вам объяснить, почему javascript ведёт себя именно так.

Привожу перевод статьи Ника Карсона. В статье собраны вместе, как мне кажется, основные правила построения интерфейса для iOS приложений.

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

2. Ориентируйтесь на устройство при создании приложений: учтите не только размер экрана, но и где и когда устройство используется. Больше всего iPad используется для развлечений между 8-11 часами вечера, перед сном, тогда как iPhone — в очереди на автобус или в кофейне. Учтите различные сценарии использования при разработке приложений – включая и то, как далеко устройство расположено от лица пользователя.

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

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

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

За остальными 45-ю — добро пожаловать подкат.

Статьи про создание tooltips'ов уже не раз поднимались на хабре [1,2] в виду большой популярности этого элемента. Сегодня вы узнаете еще один способ как создать простые, анимированные подсказки с помощью псевдо-элементов before и after, а так же свойства transitions.



В качестве примера были сделаны иконки социальных сервисов, при наведении на которые показываются названия этих сервисов.

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

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

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

Но статья, на самом деле, не об этом. Я хочу рассказать про две замечательные команды git, которые я недавно для себя открыл. Это git blame и git bisect

Инженер из компании Google, автор трёх книг по веб-производительности и оптимизации, Стив Содерс (Steve Souders) опубликовал презентацию "JavaScript Perfomance" о том, какие методы нужно применять, чтобы скрипты меньше тормозили загрузку страниц.

По статистике WebPagetest, блокировка загрузки файлов .js на сайтах из Alexa Top 100 снижает среднее по медиане время загрузки страницы c 3,65 с до 2,487 с, то есть на 31%. Если вы видите медленную загрузку веб-страниц и хотите улучшить этот показатель, то, по мнению Стива Содерса, первым делом нужно посмотреть на JavaScript.