Не так давно я перевела интервью Элона Маска. Миссия на Марс. Еще один материал по теме — как обеспечить дешевый перелет к Марсу и основать марсианскую колонию.

Миллиардер Элон Маск, основатель и главный исполнительный директор частной космической компании SpaceX, хочет помочь основать на Марсе колонию численностью до 80 тысяч человек, обеспечив перелет исследователей на Красную Планету стоимостью около 500 тысяч долларов за рейс.

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




«На Марсе возможно создать самоподдерживающуюся цивилизацию, способную вырасти в нечто большее» — сказал Маск 16 ноября на конференции Королевского авиационного общества в Лондоне. Здесь Маск говорил о своих бизнес-планах и получил специальную золотую медаль за вклад в развитие коммерческого освоения космоса.
[эксклюзивное видео space.com: SpaceX — поиски Святого Грааля ракетной техники]

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

В ночь с 11 на 12 июля Российский Google наконец опубликовал официальную позицию по закону о создании реестра запрещенных сайтов.

Да-да, понимаю, надоел уже 100500-й пост на эту тему, но теперь у меня на руках имеется полный комплект позиций российских интернет-гигантов (Google, Яндекс, «Рамблер» и Mail.Ru) по поводу закона, включая выраженные непублично (в письмах). В этом посте я решил собрать их все в хронологическом порядке, чтобы было потом на что ссылаться и опираться.

Наткнулся на интересную сравнительную демонстрацию масштабов различных объектов нашей вселенной.

Здесь есть все — от кварков до размера видимой вселенной.

Даже мир Minecraft'а! Как видите, он сопоставим по размерам с Нептуном!



Поиграться с флэшкой можно по ссылке.

PS: У кого открывается только белый экран и пара строк текста — отключите AdBlock.

На Хабре о ней уже вспоминали: контр-адмирал ВМФ США, один из создателей первого американского компьютера MARK-I, автор первого в мире компилятора, разработчик языка программирования COBOL, изобретатель термина "баг" в его нынешнем понимании и просто талантливый человек Грейс Хоппер. А еще в её честь назван эсминец и учреждена премия, которую в своё время получили Кнут, Возняк, Столлман, Страуструп и прочие достойные люди.

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

(Кто не в курсе — субтитры включаются и настраиваются кнопкой «СС»)


P.S. Ютюб в некоторых странах рассказывает, что видео не доступно. Но вот например с американским ВПН — работает (и видео и субтитры).

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

Быстрое изменение состояния посреди анимации

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

@keyframes toggleOpacity {
  50% { opacity: 1; } /* Turn off */
  50.001% { opacity: 0.4; }

  /* Keep off state for a short period */

  52.999% { opacity: 0.4; } /* Turn back on */
  53% { opacity: 1; }
}

Вот как я использовал этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow:

Регистрация на сайте — это большая ответственность для большинства людей. Пользователи, которые регистрируются на вашем сайте, дают свою персональную информацию, доверяя ее вашему ресурсу. Большинство сегодняшних пользователей более обеспокоены тем, кому они передают свою личную информацию. Виртуальный мир кишит хакерами и спамерами, но кто может обвинить их? Если вы не видели много форм регистраций, то ваша форма — препятствие для пользователя. Ниже изложено 8 основных причин, по которым пользователи не заполняют формы регистрации.

Как же все-таки работает HTTPS? Это вопрос, над которым я бился несколько дней в своем рабочем проекте.

Будучи Web-разработчиком, я понимал, что использование HTTPS для защиты пользовательских данных – это очень и очень хорошая идея, но у меня никогда не было кристального понимания, как HTTPS на самом деле устроен.

Как данные защищаются? Как клиент и сервер могут установить безопасное соединение, если кто-то уже прослушивает их канал? Что такое сертификат безопасности и почему я должен кому-то платить, чтобы получить его?

Веб сейчас везде, и предлагает очень мощную среду для создания и распространения приложений. Вместо цикла: написание кода → компиляция → запуск, просто обновите приложение или даже напиши код «на живую» в браузере. Кроме того, это относительно безболезненно позволяет распространять своё приложение на огромном количестве платформ. Интересно, что в последние несколько лет, разработка игр, используя HTML5, стала реальностью.
Элемент canvas был введен вместе с HTML5 и предоставляет API для работы с ним. API — прост, но если Вы никогда не работали с графикой, Вам потребуется время чтобы привыкнуть. Canvas поддерживается большим количество браузеров, что делает веб — хорошей площадкой для создания игр.

Решил я однажды реализовать гибкий способ стилизации подчеркивания ссылок — чтобы просто делать полупрозрачные подчеркивания, регулировать паттерн в dashed/dotted-border, делать волнистые подчеркивания и вообще иметь настройки CSS3 text-decoration, которые еще ни один браузер не умеет.



В результате получился генератор PNG в data-URI на LESS.

Демо.

Все мы слышали про ajax и node.js. Они прочно обосновались уже не просто в словарном запасе, но и в наборе инструментов веб-разработчика. Ajax — асинхронное подтягивание данных с сервера на страницу, node — фреймворк с асинхронным IO. Но как в таком однопоточном языке, как Javascript, реализуется та самая асинхронность?

Вы, наверное, уже догадались из заголовка, речь пойдет об основном цикле («main loop»).

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

Существует два основных подхода для стилизации скроллбара средствами HTML/CSS, каждый из которых имеет свои плюсы и минусы:

• Эмуляция скролла средствами JavaScript
• JavaScript обёртка над родным скроллом

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

На днях в сети появился минисайт minifesto.org со здравой, на мой взгляд, тезисной выжимкой опыта подхода к стартапам (да и к разработке в целом). Манифестность текста смягчается от начала к концу, но это не делает его хуже.

Снова прошу прощения за отсутствие перевода словосочетания “computer science”.

Кратко

• Боритесь за закон Парето, следите за тем, чтобы 20% вашего труда давало вам 80% результата;
• Расставляйте приоритеты, ведь минимализм нужен для того, чтобы делать то, что нужно, а не распыляться по мелочам;
• Лучшее — враг хорошего: сначала просто сделайте, потом сделайте правильно, потом сделайте лучше;
• Убивайте в зародыше, не бойтесь начать всё сначала. Чем быстрее ошибётесь, тем быстрее научитесь;
• Повышайте свою ценность. Постоянно думайте о том, чем можно помочь команде, — и развивайтесь в этом направлении;
• Сперва основы. Мыслите последовательно, ориентируясь на лучшие практики мира Computer Science;
• Посмотрите с разных сторон. Простое получается тяжелее, чем сложное, поэтому включайте воображение;
• Синтаксис — основа взаимодействия. Мы пишем код для людей, а не для машин;
• Не запутывайте. Старайтесь проектировать слоями, по мере возможности не зависящими друг от друга;
• Вычищайте оставленное-на-всякий-случай. Минимализм борется с отвлекающим от основного.

Автопрефиксер — утилита нового поколения для добавления префиксов к экспериментальным свойствам из CSS 3. Она берёт с Can I Use последние данные о префиксах и популярности браузеров, читает ваш файл стилей, находит свойства и значения, которым действительно нужны префиксы и добавляет их.

Вы просто пишите обычный CSS:

a {
    transition: transform 1s
}

Автопрефиксер сам заменит нужные (и только нужные) свойства и значения (обратите внимание на -webkit-transform):

a {
  -webkit-transition: -webkit-transform 1s;
  -o-transition: -o-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
}

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

Проблема

К сожалению текущие инструменты плохо решают задачу:

• Писать вереницы свойств руками — очевидно плохое решение. Такой код невозможно читать, легко забыть поправить остальные свойства при редактировании.
• В Sass и LESS вам нужно самому следить за актуальностью префиксов и копировать примеси из проекта в проект. К тому же примеси могут решить проблему только у свойств, а не у значений (например, calc()).
• Compass или Bourbon уже лучше, там список примесей хранится централизовано и его легче держать актуальным (но практика показывает, что обычно в примеси добавляют все префиксы не следя за актуальностью). Проблема значений всё так же не решена.
• Самая главная проблема Sass и LESS, что вам всё равно нужно постоянно думать «из CSS 3 это свойство или нет?» — и в зависимости от этого использовать примесь или нет. Эту проблему немного решил Stylus — у него синтаксис примесей не отличается от обычных свойств, так что префиксы добавляются невидимо. Впрочем, проблема актуальности и значений всё равно остались.
• Есть ещё скрипты добавления префиксов прямо в браузере, например Prefix Free, но лучше всего обрабатывать стили на этапе разработки и выкладки, а не повторять обработку каждый раз в браузере клиентов.

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

Серьезно, прекратите. Это пустая трата времени и сил. Поищите регулярку для проверки Email в Google, взгляните на нее — и захочется отойти подышать свежим воздухом. Вспоминается одна очень известная цитата:

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

Джэйми Завински, regex.info

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

Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.

Предыдущий пост с описанием фреймворка maxmertkit получил большой отклик. Фреймворк особенно понравился, почему-то, японцам, но наилучшую конструктивную критику и помощь я получил от хабрасообщества. Теперь к делу.
Нынешние фреймворки, включая мой, имеют модульную структуру. Но все эти модули в некоторой степени являются зависимыми друг от друга. Это плохо. Именно эту проблему я и хочу решить.

Статья с тэгом «обучающий материал». С нуля, поэтому будем писать свой не сложный (для начала) физический движок и сразу же не сложную игру (я выбрал змейку) на нем. Но статья скорее будет не об этом, так как это не такое уж и сложное задание, а о том, как это все будет на JavaScript, причем с максимально красивым (правильным) кодом (жду, что все что можно сделать еще лучше вы опишите в комментариях). «А в ответ полетели спелые помидоры..». Начнем.
(кто дочитал аж до сюда, держите печеньки, управления стрелками влево-вправо):
— вот что будет: в части один
— и это же (dev-mode)

Deferred объекты появились в jQuery 1.5. Они позволяют отделить логику, которая зависит от результатов выполнения действия от самого действия. Для JavaScript Deferred объекты не новы, они уже были в MochiKit и Dojo, но с изменениями логики jQuery ajax от Julian Aubourg, внедрение Deferred объектов было неминуемо. С Deferred объектами несколько callback могут быть связаны с результатом задачи и любые из них могут быть привязаны к действию даже после начала его выполнения. Выполняемая задача может быть асинхронна, но не обязательно.

Deferred объекты теперь встроены в $.ajax() таким образом вы будете получать их автоматически. Обработчики теперь могут быть связаны с результатом следующим образом:

// $.get, ajax запрос, он асинхронный по умолчанию
var req = $.get('foo.htm')
   .success(function( response ){
      // что-нибудь делаем с ответом
   })
   .error(function(){
      // делаем что-нибудь если запрос провалился
   });
 
// это выполнится перед тем как $.get() будет выполнено
doSomethingAwesome();
 
// Делаем что-то ещё перед завершением запроса
req.success(function( response ){
   // делаем  что-то ещё с ответом
   // он будет выполнен когда запрос завершится, а если запрос завершен, то будет вызван немедленно
   // если запрос уже был выполнен
});

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