Известно, что следуя идеям старой школы, а именно, добавляя ссылки на JS и CSS в страницы, может обернуться большим временем загрузки страницы. Браузер отображает страницу по мере скачивания, но останавливается, если натыкается на тег script со ссылкой, до того момента, пока скрипт не будет загружен и выполнен. Сайты стали использовать всё большее количество скриптов, начальное отображение страницы занимает всё больше времени, к примеру, на этой странице, которую вы читаете, 13 скриптов, 7 из которых находятся в head'е. Ко всему прочему, некоторые браузеры по-прежнему придерживаются ограничений на одновременное количество загрузок с одного хоста.

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

Существует несколько решений, как то:
— поместить стили и скрипты прямо в страницу;
— установка аттрибутов async/defer тегу script;
— склеить все скрипты в один файл;
— помесить ссылки на скрипты в конец body;
— разместить все файлы на CDN/на разных хостах;
— свой вариант…

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

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

Let — это такое ключевое слово с помощью которые мы можем определить переменную с ограниченной областью видимости, и эту область видимости мы можем ограничить аж четырьмя способами. Люди знающие OCaml сразу найдут параллель между let… in в Ocaml и let в JavaScript.
На хватит слов, давайте рассмотрим каждый способ применения let.

Пол Хаммонд (Paul Hammond) написал большую статью под названием «Ускорь свой сайт с применением отложенной загрузки контента» (Speed Up Your Site with Delayed Content). В своем материале он изложил технику для погрузки части содержимого, такого как изображения аватаров профилей пользователя в комментариях, после первоначальной загрузки страницы, что дает хороший прирост производительности при загрузке страницы.

Есть и другие ситуации, когда отложенная загрузка контента может быть применена, например в адаптивном веб-дизайне.

В очередной раз проверял свой рейтинг на Хабре, обнаружил себя 175, а 176 — автор постов-переводов выступления Питера Тиля (которые я перечитал 2 раза еще год назад).
И понеслась лавина идей.
(Я тут же написал zag2art свою идею — издать «методичку» для того, чтобы в каждом бизнес-инкубаторе имелась на видном месте, и запустить проект на бумстартере. И ооопа! через 2 минуты я вижу, что я не первый с подобной идеей — американцы опередили, но все же есть возможность создать из нуля единицу).


Весной 2012, Питер Тиль (Peter Thiel), один из основателей PayPal и первый инвестор FaceBook, провел курс в Стенфорде — «Стартап». Перед началом Тиль заявил: «Если я сделаю свою работу правильно, это будет последний предмет, который вам придется изучать»

За год добровольцы (zag2art, astropilot, mg1, ardin, barfuss,degorov, f1yegor,shellx,SemenOk2,9e9names,ntonio) перевели конспекты. За что им огромное спасибо.

Автор английской версии конспектов, будучи предприимчивым (или восприимчивым — он понял о том что говорит Тиль: «Действуй») анонсирует выпуск книги летом 2014.

Питер Тиль:
«Большой секрет состоит в том, что осталось много нераскрытых маленьких секретов. Все еще очень много белых пятен на карте человеческого знания. Вы можете исследовать их. Так идите и заполните эти белые пятна. Буквально каждый момент – это возможность пойти в эти новые места и исследовать их.

Не существует, по всей вероятности, никакого особенного времени, которое непременно правильное для того, чтобы начать свою компанию или свою жизнь. Но некоторые моменты кажутся более благоприятными, чем другие. Сейчас как раз такой момент. Если вы не возьмете на себя ответственность и не откроетесь навстречу будущему, если вы не возьмете ответственность за свою жизнь — есть ощущение, что этого не сделает никто»


На мой взгляд — эти конспекты являются лучшим пособием, которое инсталлирует адекватный/современный стартаперский mindset (мировоззрение, картина мира).

Если книга выйдет на русском языке, кто готов купить эту книгу?

Под катом — опросник

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

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

Но по-видимому, заноза прочно засела в голове, поэтому проснувшись в субботу я принялся творить.

В этом посте хочется поделиться личным опытом создания продукта с нуля. Путь «а давайте запилим/скопируем и выкинем на рынок» мы уже проходили. Такой подход чуть не убил нашу компанию.



По статистике, около 50% фич среднестатистического продукта никогда не используются и только 12% опций клиенты используют активно. Как всегда попадать в эти 12% функционала? А что, если я сам не являюсь пользователем этого продукта? Как сделать продукт простым и удобным? Наконец, стоит ли его вообще делать нашей компании? И как понять, будет ли продукт востребован рынком еще до его создания?

Привет, Хабр!

Этим постом я начинаю серию статей об образовании. Я долго подбирал портал для публикации, но лучше Хабра ничего найти не смог: многие СМИ уже настолько увязли в политике и троллинге, что их редакторы вынуждены отключать функцию комментирования. Поскольку я считаю, что в письменной культуре главное — не сам контент, а его обсуждение, я пришел именно на Хабр.

Нет, не Intel. Intl — JavaScript объект, содержащий в себе функции форматирования чисел, дат и сравнения строк. Приходит, потому что 29 апреля Firefox, последний из популярных браузеров, не поддерживающий Intl, обновляется до 29 версии, в которой поддержка интернационализации будет включена.

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

Что же даёт Intl JS программисту?

Это самая офигенная и позитивная игра про учёных, которую мы видели. Этот процесс будет интересен как тем, кого радует айтишный Game Development, так и тем, кто любит истории длинных проектов с сюрпризами.



Итак, на входе были правила на английском, написанные в духе математического минимализма, тексты карт и прототипы. Всё это появилось ещё в 2011-м от автора Дональда Вакарино. Прототипы выглядели вот так: он надёргал клипартов, чтобы пояснить свою мысль, и прописал параметры.


Мы решили делать игру не просто про безумных учёных, нет. Про добрых, но при этом совершенно, напрочь безумных учёных в духе «Понедельник начинается в субботу». И начали с концепта иллюстраций. Соответствующие концепты справа от прототипов.

Относительно не давно была выпущена первая Beta фреймворка «Laravel». Товарищ rsvasilyev начал публикацию статей о разработке на 4-й версии, я в свою очередь хочу описать новые преимущества и сравнить с его предыдущей версией.

Если вы заинтересованы в этом, прошу под кат.

Xpath — это язык запросов к элементам xml или xhtml документа. Также как SQL, xpath является декларативным языком запросов. Чтобы получить интересующие данные, необходимо всего лишь создать запрос, описывающий эти данные. Всю «черную» работу за вас выполнит интерпретатор языка xpath.
Очень удобно, не правда ли? Давайте посмотри какие возможности предлагает xpath для доступа к узлам веб-страниц.

Про директивы много написано, но мало о том как писать их правильно. Поделюсь опытом.

Хорошо написанная директива должна

• решать одну задачу
• легко расширяться
• не конфликтовать с другими директивами

Разберем каждый пункт на примере поля для ввода пароля (думаю, всем знакомо поле с глазиком)

<input ng-model="user.password"
       ng-minlength="6"
       form-password
       form-error="Не менее 6 символов">

Сколько директив используется?

Один французский «исследователь безопасности» этим летом опубликовал невиданно много найденных им уязвимостей типа arbitrary file upload в разных «написанных на коленке», но популярных CMS и плагинах к ним. Удивительно, как беспечны бывают создатели и администраторы небольших форумов, блогов и интернет-магазинчиков. Как правило, в каталоге, куда загружаются аватары, резюме, смайлики и прочие ресурсы, которые пользователь может загружать на сайт — разрешено выполнение кода PHP; а значит, загрузка PHP-скрипта под видом картинки позволит злоумышленнику выполнять на сервере произвольный код.

Выполнение кода с правами apache — это, конечно, не полный контроль над сервером, но не стоит недооценивать открывающиеся злоумышленнику возможности: он получает полный доступ ко всем скриптам и конфигурационным файлам сайта и через них — к используемым БД; он может рассылать от вашего имени спам, захостить у вас какой-нибудь незаконный контент, тем подставив вас под абузы; может, найдя параметры привязки к платёжной системе, отрефандить все заказы и оставить вас без дохода за весь последний месяц. Обидно, правда?

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

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

Введение

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

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

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

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

Основы

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

Анонимные замыкания

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

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

О чем все это

В последнее время о геймификации говорят много. Рассказывают о сути технологии и истории возникновения, описывают механики, приводят в пример Foursquare, собирают статистику и проводят опросы. Теории в сети достаточно, а вот качественных примеров применения геймификации в бизнесе мало. Данная статья ставит перед собой цель показать на примере LiveTex, каким образом можно органично вписать инструментарий геймификации в бизнес-процессы компании.

Composer (getcomposer.org) — это относительно новый и уже достаточно популярный менеджер зависимостей для PHP. Вы можете описать от каких библиотек зависит ваш проект и Composer установит нужные библиотеки за вас! Причём Composer — это не менеджер пакетов в классическом понимании. Да, он оперирует с сущностями, которые мы будем называть «пакетами» или библиотеками, но устанавливаются они внутрь каждого проекта отдельно, а не глобально (это одно из основных отличий от старого-доброго PEAR).

Кратко, как это работает:

1. У вас есть проект, который зависит от нескольких библиотек.
2. Некоторые из этих библиотек зависят от других библиотек.
3. Вы описываете в своём проекте те библиотеки, от которых непосредственно зависит ваш код.
4. Composer находит нужные версии требуемых библиотек для всего проекта, скачивает их и устанавливает в папку вашего проекта.

При создании Composer авторы черпали идеи и вдохновение из аналогичных проектов: npm для Node.js и Bundler для Ruby.

Изначально он был спроектирован и разработан двумя людьми Nils Adermann и Jordi Boggiano, сейчас в проекте участвует более двадцати контрибьюторов, Проект написан на PHP 5.3, распространяется под лицензией MIT и доступен на github.

Первые коммиты были сделаны апреле 2011 года и на сегодняшний день Composer находится в стадии «alpha3». Однако, он уже достаточно стабилен и используется многими популярными PHP проектами (например, Symfony 2). Список проектов использующих Composer можно посмотреть на сайте packagist.org — это официальный репозиторий Composer пакетов. Кстати, на недавней конференции Devconf 2012 разработчик фреймворка Yii в своём докладе упомянул, что Yii2 скорее всего тоже будет использовать Composer.

В этой статье я кратко опишу основные возможности Composer и мы попробуем создать демонстрационный проект использующий Composer для загрузки необходимых библиотек. Все примеры будут доступны на github.com и bitbucket.org.

Многие заметили, что на YouTube и на Medium появился небольшой новый элемент UI — прогресс-бар в виде тонкой цветной полоски в самом верху страницы, который примостился прямо под панелью браузера.

Внимание к новому элементу привлек недавний популярный пост New UI Pattern: Website Loading Bars на UsabilityPost. Как выяснилось, причина использования прогресс-бара в том, что вместо загрузки новой страницы содержимое подгружается через JavaScript, и поэтому собственный индикатор браузера о загрузке страницы может не срабатывать. Чтобы у пользователя не возникало ощущения, будто страница «зависла», эту функцию переложили на плечи маленького UI-приема.

Теперь у всех желающих появилась возможность быстро сделать на своем сайте точно такой же прогресс-бар благодаря плагину NProgress.js [Демо][GitHub].

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

Нам удалось заманить в студию Дмитрия Коткина, руководителя Санкт-Петербургской школы переговорщиков ШиП, который имеет широкий опыт переговоров — от работы в политике до консультирования IT-компаний. Несмотря на температуру, Дима продержался в кадре 20 минут и рассказал, как профессиональные переговорщики рекомендуют противостоять формуле нужды:



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