Во время разработки нашего сервиса bitcalm.com, нам потребовалось организовать автоматическую сборку проекта. Перед нами стояла цель улучшить производительность frontend-части нашего приложения, а также оптимизировать процессы разработки и развертывания на сервере.

Основными задачами, которые требовалось решить, стали:

1. Объединение и минификация скриптов
2. Объединение и минификация стилей
3. Сжатие png-изображений
4. Создание спрайтов из всех изображений (с возможностью удобного использования и с поддержкой двух видов спрайтов для девайсов с разным PPI)
5. Построение разных версий html-документов для разработки и для продакшна

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

Читать дальше →

Всё-таки странно иногда звучит фраза «люди постарше». Особенно применительно к 30-летним. С другой стороны, мир информационных технологий меняется так быстро, что волей неволей приходится употреблять эту избитую фразу. Так вот, люди постарше ещё помнят, что когда-то не было никакого разнообразия веб-браузеров. Мир делился на два полюса, как во времена холодной войны — были только Internet Explorer и Netscape Navigator. NN был на голову лучше соперника (похоже, это просто его карма): он был быстрее, удобнее, с более широким функционалом и продуманным интерфейсом. И в недрах коллектива, создававшего Netscape Navigator в далёком 1995 году, был также разработан один из самых распространённых и популярных ныне языков программирования — JavaScript. Изначально он был наречён LiveScript, но 4 декабря 1995 года его официально переименовали. Так что сегодняшний день можно считать днём рождения JavaScript. С чем мы и поздравляем от всей души всех, кто использует JavaScript в своих проектах по долгу службы или по зову сердца!
Читать дальше →

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

На самом деле, задача Polymer не только упростить создание сайтов, Polymer должен помочь создавать веб-приложения, способные без дополнительного вмешательства функционировать на различных устройствах: от десктопов и мобильных платформ до телевизоров. Polymer можно назвать воплощением Material Design'а для веба.

И специально для тех, кто интересуется будущим веб и вообще приложений (да-да, эти миры очень тесно связаны! И, если вдуматься, то Polymer связывает их еще больше) мы подготовили профессиональный транскрипт видео докладов с Google I\O:

• Polymer: Creating responsive UIs
• Polymer: making Web Components accessible
• Componentize the Web
• Polymer: Interacting with Google Services using nothing but HTML

Читать дальше →

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

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

Пример нового заголовка комментария, ответы к которому были свёрнуты:


Таким образом, мы автоматически отфильтровываем глубокие ветки обсуждений, что сильно облегчает беглый анализ комментариев, но, при желании, мы можем быстро развернуть какую-то из веток и почитать остальные комментарии, если тема оказалась интересной.
Читать дальше →

+ развернуть текст   сохранённая копия

Тэги: css, frontend, html, javascript, sublime, text, веб-разработка, инструменты, редакторы, текстовые, фронтэнд