Можно ли, используя HTML, CSS и JavaScript, создавать настольные приложения? Автор статьи, перевод которой мы сегодня публикуем, даёт утвердительный ответ на этот вопрос. Здесь он расскажет о том, как, применяя веб-технологии и пользуясь возможностями фреймворка Electron, создавать кроссплатформенные приложения для настольных операционных систем.

Предлагаю читателям «Хабрахабра» подборку 22 дополнений (скриптов) помощников, необходимых фронтенд-разработчику.

Hexy

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

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

Unheap

Огромная коллекция реально качественных и нужных jQuery плагинов, грамотно расфасованная по области применения. В Unheap 5 основных разделов UI, Inputs, Media, Nav, Other и каждый из них содержит еще с десяток подкатегорий. В общей сложности на данный момент каталог насчитывает более 1000 различных плагинов.

Буквально недавно Крис написал про «Эффект капельного преобразования в CSS». Эффект реально крутой и сама техника реализована по-умному, но данный подход через обычные CSS фильтры имеет определенные недостатки: нельзя использовать непрозрачность, добавлять контент внутрь капель, проблемы с фоновыми цветами.

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

CodePen

Большие видео на заднем плане веб-сайтов — довольно популярный тренд в веб-дизайне. Умело примененные видео могут сделать веб-сайт более драматичным и привлекательным для пользователей.

Кроме того видео-фоны могут воспроизводиться плавно и без «тормозов» в отличие от фонов, созданны с помощью JavaScript, которые требуют загрузить определенный код и изображения прежде чем пользователь увидит результат анимации.

Существуют компании, как, например, Powerhouse или Adidas, которые используют видео в качестве заднего плана сайта, чтобы донести до пользователя определенное сообщение или историю о продукте или услуге.

Хотя и наиболее популярным способом создания видео-фона является использование HTML5 видео тега вместе с некоторыми параметрами CSS, стоит также обратить внимание на альтернативные источники видео, например, YouTube. В этом случае, вам не придется переживать о медленном ответе сервера, потому что запрос будет отправляться напрямик в YouTube.

В этой статье, я покажу вам, как можно построить клевый сайт, использующий видео с YouTube в качестве фона. Мы будем использовать jQuery.mb.YTPlayer.js для редактирования и управления внешним видом нашего видео. Итак, приступим!

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

В виду отсутствия хорошего материала по парсингу с помощью скриптового браузера SlimerJS и наличия свободного времени решил написать небольшую статью.

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

В этой статье я покажу вам некоторые из лучших JavaScript библиотек для построения диаграмм/схем (и сводных таблиц). Эти библиотеки помогут вам в создании красивых и настраиваемых графиков для ваших будущих проектов.

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

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

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

В сегодняшнем материале мы сравним собственный сервис Kato.im с лидерами рынка мессенджеров для командной работы Slack и HipChat.

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

Не знаю, то ли я плохо искал (на plugins.jqueri.com есть только один подобный — KitKatClock, но он несколько «недоработан»), то ли искать не хотел, то ли и в правду до такого элемента никому дела нет. В общем, поскольку часть интерфейса, которую я разрабатывал, была ориентирована на заполнение полей пальцем (целевая аудитория устройств — инфокиоски) или, реже, мышкой, а полей для ввода времени было предостаточно, я решил родить еще один никому не нужный jquery-плагин.

Когда вы приобретаете сервер VPS с 256MB или 512MB оперативной памяти на борту и лишь часть мощности процессора, то использовать для таких сервисов как MySQL/PHP/Apache настройки по умолчанию является очень плохой идеей. В настоящее время у меня запущено 3 сайта на самом дешевом тарифном плане с 512MB RAM/1 CPU. Не уверен полностью, но посещаемость составляет порядка 5-10 тысяч посетителей в день. Далее я хочу поделиться инструкцией как оптимизировать LAMP используя всего лишь 512 MB и при этом не уходя в swap. Обычно при такой настройки используется 256 – 378Mb памяти и все работает довольно быстро.

Определяем доступную память и активность swap.

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

$ free -m

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

$ ps -eo pmem,pcpu,rss,vsize,args | sort -k 1 -r | less

Настраиваем LAMP сервер для потребления малого количества оперативной памяти. Останавливаем, отключаем ненужные сервисы

Первый и очевидный вопрос, который необходимо задать — это «какие сервисы мне не нужны в использовании?». Недавно, я обнаружил очень удобную утилиту для управления сервисами. Она называется "sysv-rc-conf" и управляет сервисами при помощи псевдографики и флажками. Выгдялит вот так:

Здесь представлен список сервисов, которые я изменил.

• Postfix. Этот сервис позволяет отправлять и получать почтовые email сообщения для домена. Я использую для этих целей Google Apps для отправки почты и mailchimp для новостных подписчиков. Таким образом я остановил и отключил этот сервис.
• Bind9. Он нужен для управления DNS записями Вашего домена. Его можно отключить, так как все DNS записи хранятся у хостера.
• SSHD. Имеются и другие реализации, которые используют гораздо меньше памяти, но они не поддерживают sftp, поэтому данный сервис я оставил без изменений.

Не запускайте X-сервер, выключите все ненужные сервисы и настройте Apache, MySQL, PHP только с базовой необходимой функциональностью.

WebInspector

Мощный инструмент для дебаггинга JavaScript, полноценный инспектор кода для Sublime. Фичи: установка брейкпоинтов прямо в редакторе, показ интерактивной консоли с кликабельными объектами, остановка с показом стек трейса и управление шагами дебаггера. Все это работает на ура! А еще есть Fireplay от Mozilla, который позволяет подключаться к Firefox Developer tools и максимально простой дебаггер JSHint.

Спустя полтора года молчания крупнейшая американская компания по продаже книг Barnes & Noble выпускает новый ридер на электронных чернилах с подсветкой — Nook Glowlight, что происходит ровно через месяц после начала продаж обновленной версии Kindle Paperwhite от их главного конкурента — Amazon (который, напомним, уже доступен с 30-го сентября). Стоит отметить, что не раз появлялась информация о том, что B&N может быть продана. Целый год компания не предоставляла информации о новых устройствах, а представленная ещё в 2012-м году линейка моделей последнее время продавалась по значительно сниженной цене, что наталкивало на мысль о возможном скором прекращении выпуска данных «девайсов». Но сейчас, без предварительного анонса, Barnes & Noble начала продажи своей новой «читалки». Попробуем разобраться, за счёт чего новый Nook может обогнать конкурентов.

Исторически сложилось, что на моем MacBookPro Mid 2010 одновременно стояли три оси: Mountain Lion (10.8.3), Lion (10.7) и Snow Leopard (10.6). Все было бы хорошо, если для MacOS существовали бы 3ds Max и утилитка для создания всевозможных текстур The Compressonator, а старый верный ноутбук Toshiba, который спасал меня в такие ситуации, не ушел на пенсию по состоянию материнской платы. Нужно было создавать раздел Boot Camp, да так, чтобы не полетели остальные системы.

Менеджер пакетов в Mac OS X позволит нам легко работать с пакетам посторонних разработчиков. В этом топике рассмотрим два таких менеджера: MacPort и Homebrew.

Все менеджеры пакетов в Unix имеют определенные недостатки и большинство Linux-дистрибутивов пытаются по-разному эти недостатки обойти. В этом посте я расскажу про Homebrew — новый менеджер пакетов, нацеленный на простоту использования.

До Homebrew было несколько различных попыток создать эффективные пакетные менеджеры для OS X. Две наиболее популярные вылились в итоге в Fink и Macports, но у каждой из них все равно есть свои острые углы. В частности, в обоих создание своих пакетов или портов является черезчур сложным.

В Homebrew создавать новые пакеты и работать с ними проще пареной репы. Давайте посмотрим.

К сожалению у нас таких не было.

Хочу поделиться нашим опытом привлечение клиентов для вновь созданной веб-студии. Основанием нашей веб-студии официально можно считать 31 августа 2012 года, именно тогда мне выдали свидетельство о регистрации меня как индивидуального предпринимателя. С этого момента было перепробовано много методов привлечения клиентов в нашу молодую веб-студию. Все будущие сотрудник еще трудились на прежних местах работы и по вечерам делали сайты, а я в свою очередь пытался найти клиентов, совмещая с эникейством нескольких не больших организаций (да и так бывает, менеджер из эникейщика). Разработкой сайтов профессионально никто из нас раньше не занимался и естественно, как и кому продавать сайты тоже не знали. Все делалось путем проб и ошибок. Сначала не было даже программиста, был дизайнер и верстальщик в одном лице (в то время не очень сильный) и я в роли менеджера (тоже откровенно слабый).
Приступим к перечислению что делалось, как работало, а что не приносило результата:

Равно как у каждой девушки должно быть «маленькое черное платьице», у каждого front-end разработчика должен быть «маленький черный плагинчик»… как-то не очень звучит, пусть будет «маленький функциональный плагинчик», так о чем это я, я это о том, что хочу одним таким поделиться.

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

Так же, под катом, я расскажу о процессе написания плагина, с какими трудностями столкнулся и т.д., если я Вас заинтересовал — милости прошу под кат.

Когда мы объявили, что ищем новый дом для CodeIgniter, нас практически смыло волной электронных писем от потенциальных кандидатов (кстати, письма до сих пор продолжают поступать). Перед нами возник на первый взгляд простой вопрос: кому мы можем доверить поддержку фреймворка? Но найти верный ответ оказалось сложнее — нам нельзя было ошибиться.

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

Эффект Glitch Лукаса Беббера выглядит очень круто — как будто вы смотрите на текст на старом мониторе, который слишком часто роняли на пол и у него «плавает» вертикальная синхронизация и сведение.

Реализация этого эффекта на CSS выглядит вполне убедительно. Мне пришлось немного поломать голову, чтобы выяснить, как он работает, и теперь я хочу объяснить это вам. Кроме того, я воспроизвёл этот эффект не только для текста, но и для растровых изображений и SVG, а так же написал несколько примесей Sass, чтобы облегчить работу с ним.

Привет, хабр! Мы давненько (почти год) не писали про наш основной проект — Инфорзу. Какое-то время и писать было особо нечего — после первичного тестирования мы углубились в доработки, переписали архитектуру, доделывали новый функционал — и это заняло почти восемь месяцев. Но в середине июля мы перезапустились уже в боевом режиме, а на прошлой неделе реализовали новый сервис для веб-студий и digital-агентств, о чем я сегодня и хотел рассказать.



Напомним для тех, кто уже забыл, что Инфорза — это b2b-биржа заявок на digital-услуги. Заказчики оставляют заявки на выполнение того или иного проекта, а агентства по аукционной CPL-модели могут их приобрести (получить контактные данные). Таким образом, для заказчика Инфорза — сервис выбора оптимального агентства, для студий — новый канал продаж.

Итак, что интересного для агентской аудитории мы сделали за прошедшее время:

Запуск всех основных digital-вертикалей услуг

Если раньше Инфорза принимала заявки только по созданию сайта, то в середине июля мы начали поставлять агентствам заявки еще по четырем вертикалям услуг: