Создание javascript проектов с помощью Grunt.

Grunt.js

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

Затем мы рассмотрим, как создать простое вводное контрольное устройство, используя Sass в роли препроцессора, как использовать grunt-cssc и CssMin для объединения и уменьшения каскадных таблиц стилей (CSS), как использовать HTMLHint для проверки правильности написания HTML кода, и как мгновенно сжимать цифровые объекты. Наконец, мы рассмотрим возможность использования UglifyJS для уменьшения размера JavaScript кода. Данный продукт также поможет убедиться в том, что наш веб-сайт использует минимально возможную полосу пропускания.

Читать далее

Неизвестные секреты повышения производительности с Alfred.

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

Что такое Alfred?

Для тех, кто не знает, Alfred – это замечательный лаунчер приложений и файлов для Mac OS X, который экономит время при поиске файлов в сети или на вашем компьютере. В новой версии, второй по счёту, реализован ряд улучшений, а благодаря Powerpack вы можете создавать свои собственные рабочие процессы.

Читать далее

Анализ лучших методов CSS.

Venn diagram that shows all possible logical relations between inline styles and styling via classes and markup.

Примечание редактора: данная статья описывает методы, которые реально используются в практической деятельности Yahoo! и вопросы, касающиеся методики кодирования. Вам наверняка будет интересно познакомиться с работой Джонатана Снука «Отделение HTML от CSS» и работой Робина Рендла «Элементарный дизайн с Sass». Пожалуйста, имейте в виду: некоторые из описанных методов не считаются наиболее передовой практикой — Ред.

Читать далее

Как организовать пересылку файла из клиентского компьютера на сервер (исследование конкретного случая).

The browsers used support File API

Однажды я обнаружил, что для разработки API (программный интерфейс приложения) необходимо загружать файлы от клиента на сервер. Я работаю на русский почтовый провайдер Mail.ru и мне приходится иметь дело со всеми аспектами JavaScript. Основной особенностью любого почтового веб-сервиса конечно же является возможность присоединения файла к электронному письму.

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

Читать далее

Взгляните за рамки с Vanilla JavaScript.

В течение последних четырех или пяти лет я регулярно вёл блог и проводил исследования для других проектов. За это время мне довелось столкнуться с тысячами статей о JavaScript.

Мне, кажется, что основную массу этих статей условно можно разделить на две очень общие категории:

Читать далее

Представление адаптивной веб-типографики с FlowType.JS.

Fluid Type

Мы с большим удовольствием поддерживаем активных членов веб-дизайн сообщества и сообщества разработчиков. Сегодня мы с гордостью представляем плагин FlowType.JS, который позволяет подобрать идеальное количество символов в строке для экрана любой ширины. Эта статья является еще одной чвстью нашей серии различных инструментов, библиотек и методов, которые мы уже опубликовали здесь, на Smashing Magazine: LiveStyle, PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin, CSSComb и Желеподобное меню навигации. — Ред. Читать далее

Введение в полигональное моделирование и Three.js.

Epic Citadel

Когда третье измерение вводится в развлекательную среду, оно навсегда изменяет способ представления и восприятия. Фотореализм CGI (интерфейс компьютерной графики) динозавров в Парке юрского периода открыл двери для фильмов, основанных на использовании компьютерных эффектов для создания подходящих визуальных сред. Без использования компьютерной графики такого результата попросту не смогли бы достигнуть. VeggieTales дали начало новым типам мультфильмов, основанных на использовании 3-D объектов вместо традиционных графических элементов. Подобный принцип создания мультфильмов лёг в основу популярных блокбастеров от Pixar и Dreamworks.
Читать далее

Прогрессивное улучшение.

Целью переиздания оригинальной статьи Джейка Арчибальда является повышение осведомленности и поддержка дискуссии о роли прогрессивного улучшения внутри сообщества. Мы с нетерпением ждем ваших мнений и мыслей в разделе комментариев – Ред.

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

Читать далее

Как создать эмоциональный дизайн с помощью эффекта наведения.

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

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

Читать далее

Анализ сетевых характеристик с использованием JavaScript и DOM (часть 2).

В первой части этой серии мы рассмотрели особенности работы основных веб-протоколов и возможности использования JavaScript для оценки их характеристик.
Читать далее