Search
Write a publication
Pull to refresh
36
0
Николай Садовников @GruZZ

Пользователь

Send message

Генерация CSS-спрайтов с Gulp

Reading time6 min
Views64K

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

Как писать парсеры на JavaScript

Reading time10 min
Views112K
… а именно как писать LL парсеры для не очень сложных структур при помощи конструирования сложного парсера из более простых. Изредка возникает необходимость распарсить что то несложное, скажем некую XML-подобную структуру или какой нибудь data URL, и тогда обычно возникает либо простыня хитрого трудно читаемого кода либо зависимость от какой то ещё более сложной и хитрой библиотеки для парсинга. Здесь я собираюсь совместить несколько известных идей (какие то из них попадались на Хабре) и показать как можно просто и лаконично написать довольно сложные парсеры уложившись при этом в совсем немного строчек кода. Для примера я буду писать парсер XML-подобной структуры. И да, я не буду вставлять сюда картинку для привлечения внимания. В статье вообще картинок нет, поэтому читать будет трудно.

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

Всё, что вы должны знать о прототипах, замыканиях и производительности

Reading time9 min
Views50K

Не всё так просто


На первый взгляд, JavaScript может показаться достаточно простым языком. Возможно, это из-за достаточно гибкого синтаксиса. Или из-за схожести с другими известными языками, например, с Java. Ну или из-за достаточно малого количества типов данных, по сравнению с Java, Ruby, или .NET.

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

В JavaScript поиск данных зависит от двух вещей: прототипного наследования и цепочек областей видимости. Для разработчика понимание этих двух механизмов совершенно необходимо, ибо ведет к улучшению структуры, а, зачастую, ещё и производительности кода.
Читать дальше →

Кроссплатформенный CommonJS на практике

Reading time12 min
Views16K

О чём речь?


О JS модулях, которые можно использовать в браузере и на сервере. Об их взаимодействии и внешних зависимостях. Меньше теории, больше практики. В рамках курса молодого бойца мы реализуем простое и весьма оригинальное приложение на базе Node.JS: ToDo-лист. Для этого нам предстоит:
  1. «Завести» кроссплатформенные модули на базе фреймворка Express;
  2. Научить их работать с платформозависимыми коллегами;
  3. Создать транспортный уровень между клиентом и сервером;
  4. Таки сделать ToDo-лист;
  5. Осмыслить результат.

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

Грабли, на которые не стоит наступать

Reading time5 min
Views80K
От переводчика: Это перевод статьи авторства Джоэля Спольски (Joel Spolsky). Через 2 года эта статья уже сможет получить автомобильные права в США, а еще через два — и не только там. Да, ей 14 лет (а точнее 14 лет и 11 дней), но актуальности она не потеряла ни грамма. Я регулярно вижу, как программисты (да и я сам, временами) порываются наступить на эти грабли. Тот факт, что я не нашел ее перевода на Хабре, вполне может свидетельствовать о том, что я плохо искал. Об ошибках перевода прошу сообщать в ЛС

UPD: Оказывается перевод статей Джоэля, в т. ч и этой, есть еще в бумажном издании «Джоэл о программировании»

Наконец выходит первая публичная бета-версия Netscape 6.0. Версии 5.0 не существует. Предыдущий мажорный релиз — версия 4.0 — был выпущен почти три года назад. Три года — это невероятно большой срок в мире интернета. Все это время в Netscape сидели и беспомощно наблюдали за тем, как уменьшается их доля рынка.

Это немного подло с моей стороны критиковать их за столь долгое ожидание между релизами. Они ведь не специально это сделали, правда?
Читать дальше →

HTML по стандартам

Reading time10 min
Views125K
Привет Хабр!

image Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.

В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.
Читать дальше →

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №93 (19 — 25 января 2014)

Reading time5 min
Views40K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости


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

jQuery Events изнутри

Reading time9 min
Views59K
Статья написана в рамках конкурса среди студентов Технопарка Mail.ru.
image

Думаю, JavaSript-библиотека jQuery в представлении не нуждается, но на всякий случай напомню, что jQuery призвана ускорить разработку, предоставить синтаксический “сахар” для нативного js и избавить разработчиков от проблем, связанных с кроссплатформенностью.
Прежде чем говорить о том, как устроена обработка событий в jQuery, нельзя не упомянуть об истории обработки событий в браузере.
Читать дальше →

Несколько применений Sublime Text 3, которыми Вы могли бы пользоваться

Reading time1 min
Views67K
Sublime Text относится к тем текстовым редактором, которые могут все. Гибкость позволяет настроить его на любой вкус, а большое комьюнити штампует плагины днями и ночами. Многие программисты используют его как среду разработки, однако до неосновных применений доходят не все. В этой небольшой статье я расскажу о некоторых из них.
Читать дальше →

60 FPS? Легко! pointer-events:none!

Reading time2 min
Views99K


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

.hover .element:hover {
  box-shadow: 1px 1px 1px #000;
}
Читать дальше →

Изменение коммитов в Git

Reading time2 min
Views298K
Это пост для тех, кто начинает работу с Git. Все, что здесь написано по частям можно найти в многочисленных простынях о Git на Хабре. Но я подумал, что неплохо было бы иметь отдельный предельно понятный топик, который бы гуглился по запросу «git изменение коммитов».
Читать дальше →

API консоли Javascript

Reading time15 min
Views36K
Разработчикам удобно пользоваться консолью для отладки, но ещё удобнее, если будет оболочка, в которой учтены особенности реализации консоли в различных браузерах, поэтому тема обёрток для консоли устойчиво существует.

Рассмотрим ранее опубликованные решения, затем сделаем обзор методов консоли с помощью перевода недавней статьи Axel Rauschmayer-а, разработчика и консультанта с более чем 15-летним стажем, затем я опубликую некоторые свои решения, которые оказались удачными в процессе эволюции и отладки на ряде проектов.
UPD 2015: обновление таблицы команд до актуального состояния, Github (ru, en; разворачивание на javascript).
ой, сколько букв

Хватит писать регулярные выражения. Используйте вербальные выражения

Reading time1 min
Views90K
Сразу оговорюсь, если Вы — профессионал в использовании регулярных выражений, то Вам лучше дальше не читать во избежание ^(.*)$

GitHub-пользователь jehna нашёл интересный метод ухода от реализации сложных регулярных выражений традиционным способом.
Вербальные выражения превращают сложный и иногда нетривиальный путь от логики до собственно регулярного выражения в ненавязчивую прогулку с использованием связанного набора функций.
Читать дальше →

Автопрефиксер — окончательное решение проблемы префиксов в CSS

Reading time4 min
Views58K
Автопрефиксер — утилита нового поколения для добавления префиксов к экспериментальным свойствам из CSS 3. Она берёт с Can I Use последние данные о префиксах и популярности браузеров, читает ваш файл стилей, находит свойства и значения, которым действительно нужны префиксы и добавляет их.

Вы просто пишите обычный CSS:
a {
    transition: transform 1s
}


Автопрефиксер сам заменит нужные (и только нужные) свойства и значения (обратите внимание на -webkit-transform):
a {
  -webkit-transition: -webkit-transform 1s;
  -o-transition: -o-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
}


Эта утилита работает во время выкладки сайта на сервера (и на машине программиста во время разработки), так что не заметна для клиентов и не требует какой-то поддержки от браузеров.

Проблема


К сожалению текущие инструменты плохо решают задачу:
  • Писать вереницы свойств руками — очевидно плохое решение. Такой код невозможно читать, легко забыть поправить остальные свойства при редактировании.
  • В Sass и LESS вам нужно самому следить за актуальностью префиксов и копировать примеси из проекта в проект. К тому же примеси могут решить проблему только у свойств, а не у значений (например, calc()).
  • Compass или Bourbon уже лучше, там список примесей хранится централизовано и его легче держать актуальным (но практика показывает, что обычно в примеси добавляют все префиксы не следя за актуальностью). Проблема значений всё так же не решена.
  • Самая главная проблема Sass и LESS, что вам всё равно нужно постоянно думать «из CSS 3 это свойство или нет?» — и в зависимости от этого использовать примесь или нет. Эту проблему немного решил Stylus — у него синтаксис примесей не отличается от обычных свойств, так что префиксы добавляются невидимо. Впрочем, проблема актуальности и значений всё равно остались.
  • Есть ещё скрипты добавления префиксов прямо в браузере, например Prefix Free, но лучше всего обрабатывать стили на этапе разработки и выкладки, а не повторять обработку каждый раз в браузере клиентов.

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

Школа разработки интерфейсов в Яндексе: личный опыт и новый набор

Reading time7 min
Views48K
В прошлом году я был одним из тех, кто поступил в Школу разработки интерфейсов Яндекса и закончил её, и сегодня хочу рассказать вам о том, каким я увидел учебный процесс в ШРИ, как это бывает и что даёт.

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

Надеюсь, что мой рассказ вдохновит кого-то самому поступить в школу, или хотя бы потом посмотреть видео лекций, когда они будут опубликованы (видео прошлого курса смотрите здесь).



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

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

Mojo Share — все социальные кнопки на CSS3 с иконочным шрифтом в одном месте

Reading time10 min
Views21K
Доброго времени суток уважаемые хабравчане. Начну издалека… Share кнопки — это очень важно. Большинство из нас с Вами использует либо стандартные кнопки определенной социальной сети, либо один из этих сервисов: Блок «Поделиться» от Яндекса, AddThis, ShareThis и новоиспеченный Pluso. Если рассматривать все эти способы с точки зрения кастомизации и дизайна, то достойнее всего, на мой взгляд, это реализовали в Pluso. Все остальное почти ничем не отличается друг от друга. Рассматривая основной функционал (непосредственно шаринг), отличается баганутостью только Pluso, где можно легко накрутить счетчики, нажимая кнопки помногу раз. Я не буду сравнивать качество сбора статистики этих сервисов хотя Pluso явно не фаварит, поскольку не компетентен в этом вопросе. Вернемся к кастомизации кнопок. Как таковой, во всяком случае удобной, ее нет. А если говорить про дизайн, то кнопки не адаптированы под Retina дисплеи, что сразу бросается в глаза. Поэтому я решил создать проект на GitHub, который состоит из иконочного шрифта MojoSocial и файла стилей MojoShare.

image

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

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

PhoneGap: как сделать приложение отзывчивым

Reading time11 min
Views56K
На сегодняшний день существует немалое количество обзорных статей о PhoneGap, но к сожалению, написаны они или front-end разработчиками, которые решили заняться мобильными платформами, или нативными программистами, которые решили попробовать себя в кроссплатформенной разработке. И именно с этих позиций рассматриваются достоинства и недостатки PhoneGap'а, возникают статьи о том, «насколько крута кроссплатформа», или об «ущербности кроссплатформенных решений».

В качестве затравки — видео демо-приложения, написанного за 6 часов; готовым был взят UI-бутстрап, наверстанный за 3,5 часа; использовались библиотеки iScroll, backbone, underscore, Jquery, и небольшая обертка на backbone (RAD.js — rapid application development, архитектурный фреймворк, берущий на себя часть оптимизации, связанной с мобильной средой выполнения).


Еще 2 часа было потрачено на фикс движка. Но сегодня речь не о том, что что-то тормозит, дергается, или самописный свайп не всегда вовремя отрабатывает на 14000 объектах данных; речь о том, что на PhoneGap можно и нужно писать.

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

Адаптивное меню с поддержкой retina

Reading time8 min
Views35K
В этой статье очень подробно описано пошаговое создание адаптивного меню для сайта с несколькими вариантами компоновки элементов (в зависимости от размера экрана девайса). Для поддержки retina-экранов используется иконочный шрифт.



Демо / Скачать исходники
Читать дальше →

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

Reading time2 min
Views91K
Работа с цветом — это первое, что должен уметь любой дизайнер. В интернете огромное количество разрозненной информации на эту тему, я попытался собрать самое полезное в одной подборке. Большинство полезностей с уклоном в веб-дизайн.

Инструменты




Colour Lovers — старый и функциональный инструмент для подбора цветовых схем. Аналоги — Colourcode, Color Scheme Designer и конечно Kuler. Подобных сайтов великое множество, но эти, на мой взгляд, самые удобные.
Читать дальше →

20 вопросов про веб-шрифты

Reading time12 min
Views266K

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

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

Много текста и картинок

Information

Rating
Does not participate
Location
Оренбург, Оренбургская обл., Россия
Date of birth
Registered
Activity