Предисловие

Так уж сложилось, что за последнее время я испробовал на себе много разных методов обучения — университет, онлайн курсы, вольные курсы, самообучение, чтение книг и тд. И во всех прослеживается четкая закономерность: сначала дается материал, а после следуют тесты/зачеты/задачи/работы. И чем больше я учусь, тем больше убеждаюсь в несовершенности подобного подхода. Были курсы, которые я посещал полностью и конспектировал, были и такие, которые сдавал не посетив ни одного занятия/лекции. И оглядываясь назад, я не могу определить в каком из вариантов остаток оказывался весомее, при том, что на посещение лекций времени уходило в разы больше.

И родилась у меня такая мысль: а не перевернуть ли этот процесс? То есть сначала давать задание, а потом материал? И не пойти ли еще дальше?

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

Form Builder



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

Здравствуйте.

У вас когда-нибудь возникала задача в определенное время запустить на сайте какой-нибудь видеоролик, с того же YouTube, к примеру? А нужно ли было сделать при этом так, чтобы пользователь, опоздавший к началу, смотрел с того момента, который смотрят все пользователи (которые начали просмотр с самого начала)?
Сразу скажу, что передо мной такой задачи не было, но что-то стрельнуло в голову и я решил попробовать сделать такую штуку.

С таким принципом можно сделать «реальный» онлайн кинотеатр, где опоздавшим зрителям не остается ничего другого, как продолжать смотреть фильм с текущего момента (в настоящем кинотеатре же не просят перемотать плёнку назад, верно?).

В подборке сервисы, плагины, темы и другие полезности, облегчающие работу с Twitter Bootstrap.

Стилизация

BootSwatchr — быстрая стилизация Twitter Bootstrap.

    - Google выше ранжирует сайты, которые загружаются быстрее.
    - Если на eBay или Amazone увеличить время загрузки страниц на 9% они теряют 1% прибыли.
    - Сделать свой сайт быстрее, чтобы сэкономить на клиентском трафике и на числе обращений к серверу.

.htaccess — наш герой

Профессионалы знают, что такое htaccess.
Тем кто собираются уйти с народ.ру на php-хостинг только предстоит узнать, что это такое.
Те кто только что установил свои первые jooml'у или wordpress срочно должны узнать о нашем герое — htaccess

Зачем нам .htaccess ?

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

Или другой пример. Скажем ваш ресурс начинает набирать популярность, но переезжать на выделенный сервер ещё рано, а мощностей VPS уже не хватает. Вас очень может выручить htaccess.

А ещё htaccess может решить некоторые вопросы с безопасностью вашего сайта.

А ещё…

Подробные инструкции, которые даются на code.google позволят вам:

• Сжать все многочисленные скрипты JS и стили CSS
• Соединить все полученные файлы в один JS и в один CSS
• Сжать полученные два файла в формат GZIP, который понимают почти все браузеры и умеют распаковывать на лету
• Прописать такой .htaccess, который заставляет браузеры кэшировать данные два файла

Всё это будет происходить при запуске единственного скрипта compress.php

Для примера, результат сжатия скриптов моего сайта:

• JS: сжато в gzip 26 698 B, сжато без gzip 95 796 B, было 120 147 B
• CSS: сжато в gzip 46 049 B, сжато без gzip 160 001 B, было 281 870 B

Получается, что экономия трафика составляет 329 270 B. Но основной выигрыш для скорости загрузки в том, что теперь загружается не 14 файлов, а всего 2 (а это намного быстрее, так как браузер не тратит время на запросы). Причём делается это один раз, а не динамически силами самого сервера (тем более, что не все сервера поддерживают подобное конфигурирование сжатия для экономии ресурсов процессора).

В итоге, получится:

<link rel="stylesheet" type="text/css" href="min/styles_1349888114.cssgz" />
<script src="min/all_1349888114.jsgz" /></script>

Поклонник одного из лучших телепроектов последних десяти лет "«Остаться в живых» («Затерянные», «Lost») программист Сантьяго Ортиз (Santiago Ortiz) создал прекрасный пример интерактивной визуализации взаимоотношений между главными и второстепенными героями шоу при помощи HTML5.

Сериал создавался силами более 30 сценаристов, которые должны были прорабатывать характеры и взаимоотношения персонажей, создавая при этом реалистичную атмосферу с точки зрения перемещения героев во времени, следить за непротиворечивостью событий, и при этом давать намёки на всевозможные загадки (например, почему Кейт видела в джунглях тёмную лошадь); при этом wiki-проект по мотивам шоу содержит более 7000 статей.

На одной улице в Бердичеве жили трое портных. У первого была вывеска: “Лучший портной в городе”, у второго — “Лучший портной в мире”, а третий написал: “Лучший портной на этой улице”.

Одно лишь странно повышенное количество статей про рецепты для богатых айтишников не сподвигло меня на написание очередного эпизода в этом хабра-сериале, если бы рецепты оставались в невинно-нейтральном варианте вида “лучше быть богатым, чем больным”. Любой лозунг, любая идея, пусть даже самая расплывчатая, действительно может воодушевить кого-то на размышление, на действие, а там, глядишь, и очередной миллионер появится. Но глядя на все новые и новые “практические” советы, я рискну публично возразить. Дело уже дошло до экономии на покупках в супермаркете и следовании популярным книжкам. Самое время вмешаться: вдруг кому-то удастся избежать ненужных и даже глупых телодвижений.

Вы никогда, НИКОГДА не станете богатым от экономии на покупках в супермаркете!

Сотни миллионов людей в мире экономят как на покупках, так и на самих супермаркетах, не говоря уже о миллионах голодных, “экономящих” на еде вообще. Можно предположить, что достаточно большая часть экономящих людей попадается на удочку относительно больших чисел, получаемых умножением грошей на 20-30-40 лет… без какого-либо положительного финансового эффекта. Причина элементарна: экономический план на десятки лет — это оксюморон. Такой план не учитывает множество факторов, влияние которых весьма значительно и на более короткие сроки, поэтому он может называться мечтой, фантазией, как угодно еще, только не финансовым планом. Кризисы, биржевые скачки, инфляция, изменения в жизни, в работе, в уровне доходов, политической обстановке… да одна только кратковременная флюктуация в курсе валют может мгновенно уничтожить нажитое непосильным трудом (как и наоборот, кстати). Вы не разбогатеете за 20 лет, отказывая себе в шоколадках, или не тратя деньги на сигареты, или “собирая бутылки”. Вернее, не так. Ваш шанс разбогатеть за NN лет совершенно не зависит от ваших сегодняшних действий и еще меньше зависит от мелочей. А все потому, что

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



Демо Скачать исходники

Контекст

Предположим мы поддерживаем небольшой web-проект. У нас есть песочница для разработки с git'ом, отладчиками и прочими полезными вещами. Сайт уже запущен, и код скопирован из песочницы на удаленный сервер. Код приходится иногда (а возможно и частенько) обновлять и дорабатывать. Любые изменения естественно обкатать в песочнице. И тут возникает вопрос: как максимально просто и удобно обновить код на сервере?

Первым же решением, пришедшим в голову, оказывается простая команда git push: мы пушаем в удаленный репозиторий и получаем обновленную версию кода на сервере. Но не все так просто.

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

Новый релиз движка интернет-магазина AdVantShop.NET Ultimate оснащён трансформером дизайна — OnTheFly. Он буквально с лёту — без входа в админку и без программиста — позволяет менять дизайн магазина и приближать его к идеалу… даже если сам эталон меняется несколько раз в неделю.

16.09.2012 в Киеве в три потока прошла конференция MageConf 2012. Два потока были посвящены системе Magento, третий – PHP. Посетив все 6 докладов на потоке PHP, хотел бы кратко изложить основную информацию, донесенную спикерами. В итоге пост получился набором полезных ссылок по разработке на PHP.

Докладчики особое внимание уделяли утилитам и софту, которыми они активно пользуются в Magento. Один из спикеров ранее был разработчиком портала i.ua.

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

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

В каком-то смысле это как user stories — именно они, выбранные правильно и реализованные четко, первичны. А не то, как там нарисованы гламурные полутени в альфа-версии, или сделана крутая ООП архитектура с новейшим IoC контейнером. Эти детали не важны на первом этапе.

Настоятельно рекомендую всем, кто занимается автоматизацией предприятий — программистам, руководителям проектов и так далее.

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

Думаю любому современному дизайнеру или верстальщику рано или поздно в голову приходила мысль «А почему бы на этом проекте не использовать принципы отзывчивого веб-дизайна?». Пожалуй, сложно найти человека, который не слышал о responsive design в наше время, когда сёрфить веб могут с телефона, микроволновки и тапочек. Приступая к работе над подобным проектом, неплохо было бы иметь под рукой примеры возможного поведения лейаута и его отдельных элементов.

Картинка стоит тысячи слов — мы же предлагаем взлянуть на скринкаст:



Засветились:

• LiveEdit — обновляет фрагменты страницы без перезагрузки, включая javascript
• ZenCoding — мгновенная генерация сложных конструкций из соответствующих CSS-селекторов
• AceJump — навигация по видимому участку кода

Разумеется мы умеем гораздо больше
Загрузить последнюю версию для вашей платформы

Наверное, вы уже слышали о таких вещах как CSS3 Pie, Selectivizr, HTML5 Boilerplate, CSS3 Media queries и т.п. Речь пойдет о том, как использовать все эти инструменты вместе: дело в том, что неоднократно были замечены конфликты между ними. Ну, а если вы не совсем понимаете, зачем вам HTML 5 и CSS 3, тогда не стану навязывать эти технологии; просто скажу, что они позволяют сократить время верстки (хотя, это не единственный плюс).

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

UICloud — это база бесплатных пользовательских интерфейсов с поисковой системой, рейтингом и каталогизатором в которой собрано все от исходников в формате PSD, до готовых решений на HTML, CSS или jQuery: формы, слайдеры, кнопки, календари, элементы и полноценные интерфейсы для мобильных и веб приложений. В проекте уже сейчас можно найти практически все что нужно для облегчения процесса разработки дизайнерам и разработчикам.

На данный момент в базе 23586 элементов и почти тысяча UI-сэтов включающие в себя готовые решения в едином стиле. Проект создан Британской студией Double-J Design целью проекта является создание самой обширной UI базы.

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

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