Pull to refresh
0
0
Send message

Малоизвестные Git-команды

Reading time 4 min
Views 73K


У Git есть строгие обязательства по обратной совместимости: многие продвинутые возможности скрыты за разнообразными опциями, а не применяются как поведение по умолчанию. К счастью, Git также поддерживает и алиасы, так что вы можете создавать свои собственные команды, которые делают всю характерную для Git магию. Под катом — подборка полезных (или как минимум забавных) алиасов, определённых в моём .gitconfig.
Читать дальше →
Total votes 188: ↑162 and ↓26 +136
Comments 43

SVG-иконки – много и со стилем

Reading time 14 min
Views 50K

Маленький рассказ о том, как наша команда решила организовать иконки в грядущем проекте. Чуть-чуть исторического экскурса, взгляды по сторонам (на PNG и векторные шрифты) и рассказ о том, как мы всё-таки обустроились в итоге.

Иконки у нас используются, и активно – хорошо подобранная иконка заменяет слова и предложения (а фигово подобранной иконке можно сделать всплывающую подсказку, но не будем о грустном)

В общем, есть (и продолжают создаваться) иконки. Надо их положить на веб-страницу. Надо сделать это так, чтобы потом голова не болела про них весь остаток проекта и ещё пару лет в поддержке. Ну и есть дополнительные хотелки:
  • хочется вектора. Ну, ладно, вектор – это средство, а не цель. Цель – не беспокоиться ВООБЩЕ об изменении размеров, ретина дисплеях, сохранении изображения в разных форматах для разных целей.
  • хочется стилизации иконок. Потому что у нас из коробки как минимум два набора тем (светлая и тёмная), а то и контрастная, для людей с нестандартным зрением, а то и оранжевенькая какая-нибудь появится ближе к Новому году… В общем – одна и та же по сути иконка должна выглядеть слегка иначе в зависимости от выбранной на странице темы.
  • хочется динамической стилизации иконок. Статики – нам мало. Этого хватает для скриншотиков и рекламных буклетиков, но не для живых пользователей. А мы хотели жизни! Мы хотели ховера! Мы хотели селекшена!!! И дизаблить, дизаблить их всех!.. Извините.
  • НЕ хочется, чтобы в этом участвовал JavaScript в любой его форме и проявлении. Иконки – это внешний вид, а за него ответственный HTML + CSS. Ну, ладно, класс selected я готов навесить на элементы, но это последняя граница…

Есть и факторы, облегчающие задачу. Иконки сейчас (2015, осень, начинает снежить) в моде плоские, строгие. Если лет пять назад иконки пестрели, то сейчас это ушло под влиянием МС, Эппла, Материал Дизайна…

tl;dr Внимание. Следующие несколько разделов – это расплывание мыcлею по древу, причём вширь, обзор решений (в том числе – неудачных) и котик в разных ракурсах.
Кому хочется технических подробностей того, что же вышло в итоге – пожалуйте сюда.
А для остальных начнём по порядку...
Total votes 61: ↑58 and ↓3 +55
Comments 34

50+ лучших дополнений к Bootstrap

Reading time 5 min
Views 202K


Благодаря популярности CSS фреймворка Bootstrap, для него разработали массу различных дополнений. Даже сейчас вы можете использовать Bootstrap практически для любой задачи при разработке и оформлении вебсайта.

Для статьи я подобрал наиболее полезные дополнения «на все случаи жизни».
Читать дальше →
Total votes 123: ↑111 and ↓12 +99
Comments 25

Как мы придумывали конструктор для детской робототехники. #1

Reading time 12 min
Views 39K
Привет, Хабр! Некоторое время назад я не выдержал режима молчания о том, чем занимаюсь на работе. Ну и накатил, и написал об этом статью на Geektimes: «Как мы придумывали конструктор для детской робототехники. Часть 0. Акрил».

Результатом той статьи стало две вещи:
  • получил по шапке за самоуправство;
  • тема оказалась интересной и нашла своего читателя. Поэтому мы решили воскресить блог Амперки, чтобы я мог продолжать рассказ официально.

Вам близка тема детской робототехники? Вы уже пробовали примотать Arduino к металлическому конструктору синей изолентой? В таком случае вас заинтересует подкат.


Продолжение и много фото
Total votes 48: ↑47 and ↓1 +46
Comments 106

Генератор миниатюрок из Nginx-а

Reading time 3 min
Views 27K
Итак, сегодня мы соберём генератор миниатюрок на базе любимого народом веб-сервера — nginx-а. Что примечательно, сделаем мы это без единого гвоздя, т.е. без единой строчки кода, не считая конфигурации.
Что ж приступим...
Total votes 81: ↑76 and ↓5 +71
Comments 42

Я тебя по сетям вычислю: используем API крупнейших соцсетей в своих корыстных целях

Reading time 11 min
Views 175K


Ни для кого не секрет, что современные социальные сети представляют собой огромные БД, содержащие много интересной информации о частной жизни своих пользователей. Через веб-морду особо много данных не вытянешь, но ведь у каждой сети есть свой API… Так давай же посмотрим, как этим можно воспользоваться для поиска пользователей и сбора информации о них.

Есть в американской разведке такая дисциплина, как OSINT (Open source intelligence), которая отвечает за поиск, сбор и выбор информации из общедоступных источников. К одному из крупнейших поставщиков общедоступной информации можно отнести социальные сети. Ведь практически у каждого из нас есть учетка (а у кого-то и не одна) в одной или нескольких соцсетях. Тут мы делимся своими новостями, личными фотографиями, вкусами (например, лайкая что-то или вступая в какую-либо группу), кругом своих знакомств. Причем делаем это по своей доброй воле и практически совершенно не задумываемся о возможных последствиях. На страницах журнала уже не раз рассматривали, как можно с помощью различных уловок вытаскивать из соцсетей интересные данные. Обычно для этого нужно было вручную совершить какие-то манипуляции. Но для успешной разведки логичнее воспользоваться специальными утилитами. Существует несколько open source утилит, позволяющих вытаскивать информацию о пользователях из соцсетей.
Читать дальше →
Total votes 89: ↑83 and ↓6 +77
Comments 22

Пишем «рисовалку» для iPhone на HTML5 Canvas

Reading time 7 min
Views 9.8K
Здравствуйте, Хабражители!

В этом топике я покажу как создать простой графический редактор для iPhone. Статья написана максимально понятно, поэтому даже новичку не будет сложности разобраться. Более того, я расскажу:

  • об особенностях событий touch-устройств;
  • об особенностях верстки для мобильных девайсов;
  • почему для создания нормальной «рисовалки» нужно использовать несколько холстов;
  • что такое clickjacking и зачем я использовал этот хак в своей рисовалке;
  • о всех трудностях и некоторых мелочах, с которыми я столкнулся в процессе разработки;


Больше — под катом

Читать дальше →
Total votes 52: ↑47 and ↓5 +42
Comments 15

Инструменты командной строки для веб-разработчика

Reading time 3 min
Views 39K
Жизнь веб-разработчика омрачена сложностями. Особенно неприятно, когда источник этих сложностей неизвестен. То ли это проблема с отправкой запроса, то ли с ответом, то ли со сторонней библиотекой, то ли внешний API глючит? Существует куча различных прилад, способных упростить нам жизнь. Вот некоторые инструменты командной строки, которые лично я считаю бесценными.
Читать дальше →
Total votes 227: ↑217 and ↓10 +207
Comments 30

Обзор свежих материалов, апрель-май 2011

Reading time 9 min
Views 1.1K
Этот материал продолжает серию ежемесячных обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-март 2011.


Читать дальше →
Total votes 61: ↑55 and ↓6 +49
Comments 9

Новый Javascript фреймворк основаный на Scriptographer

Reading time 2 min
Views 2.5K

Создан Юргом Лени и Джонатаном Пакей, Paper.js является фреймворком сценариев векторной графики с открытым исходным кодом, который работает поверх HTML5 Canvas. Он предлагает чистый Scenegraph / DOM и много ярких функций, для создания и работы с векторной графикой и кривыми Безье.

Paper.js основана на и в значительной степени совместимы с Scriptographer, средой сценариев для Adobe Illustrator, первоначально разрабатывающаяся Юргом и Джонатананом более чем 10 лет.
Читать дальше →
Total votes 42: ↑41 and ↓1 +40
Comments 14

Верстка иконок с помощью псевдо-элементов и css свойства clip

Reading time 1 min
Views 21K
Хороший способ верстки иконок, расположенных рядом с заголовками, или в качестве нестандартных маркеров списка — с помощью псевдо-элементов.
Читать дальше →
Total votes 80: ↑74 and ↓6 +68
Comments 26

Pokki: веб-приложения внутри ОС

Reading time 2 min
Views 43K
Веб-приложения в последнее время набирают большую популярность. С ними мы имеем возможность делать ну всё, что угодно, не покидая окна браузера: обмениваться фото, редактировать видео, смотреть кино, слушать музыку, работать с почтой, создавать презентации. Есть много «облачных» инструментов и для веб-разработчиков, вот, кстати, недавняя хорошая подборка.

Но, да, пусть это и здорово — «не покидая окна браузера» и всё такое. Но в какой-то момент начинает казаться, что это перебор: всё-таки со стороны системы в целом, браузер — это одна программа, и пользователю не очень легко её настроить для удобной работы с приложениями, которые доступны «изнутри». Конечно, тут на помощь приходят расширения для браузеров, а в случае с Хромом — эдакие полноэкранные аддоны, которые так и называются — «приложения». Но в любом случае, это означает, что у них отсутствует чёткая интеграция с ОС, для их работы нужно держать браузер открытым, и так далее.

В случае с каким-нибудь хромбуком, это не проблема — там браузер и есть операционная система, высший слой, он не закрывается никуда. Но для Windows или OSX, описанная проблема всё ещё существует.

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

Pokki app screen

Читать дальше →
Total votes 64: ↑58 and ↓6 +52
Comments 39

Размытие изображений по Гауссу с помощью SVG

Reading time 6 min
Views 15K


В этом топике я хотел бы рассказать, как добавить изображениям на веб странице эффект размытия по Гауссу без использования флеша. Статью я планировал написать еще год назад, и, к моему большому удивлению, меня никто не опередил, хотя тема достаточно проста и интересна как с точки зрения веб дизайна, так и с точки зрения клиентской разработки. Для создания эффекта будем использовать уже ставшую популярной технологию SVG, которая работает во всех последних версиях браузеров. Для IE8- воспользуемся CSS фильтрами (Blur в частности), которые работают только в продуктах Microsoft. Для начала, предлагаю ознакомиться с итоговым вариантом здесь (наведите на любое изображение). Скрипт представлен в виде jQuery плагина, но выдернуть его для использования вне jQuery не составит труда.

Очевидно, целью работы являетя не только размытие картинки, а и анимация этого размытия.

Из простейшего примерамы видим, что интенсивность размытия зависит от атрибута stdDeviation в теге feGaussianBlur.
Читать дальше →
Total votes 115: ↑112 and ↓3 +109
Comments 46

Техники сжатия кода

Reading time 5 min
Views 5.4K
Джед Шмидт, Томас Фухс и Дастин Диаз — достаточно известные в JavaScript-коммьюнити ребята в последнее время нашли себе новую развлекуху — писать полезные штуки размером не больше одного твита, то есть 140 байт. Даже домен зарегали — 140byt.es, куда приглашаются все желающие попробовать свои силы в написании супер-компактных функций.

Естественно, в ход идут все самые изощренные способы и техники уменьшения размера исходника. У них есть вики-страничка с советами, которую я и решил перевести.

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

Читать дальше →
Total votes 146: ↑140 and ↓6 +134
Comments 121

Оптимизация PNG и JPEG без потери качества. Часть 1

Reading time 9 min
Views 234K

Введение


Предлагаю Вашему вниманию обзор посвященный оптимизации изображений формата PNG и JPEG без потери качества. Под «без потери качества» подразумевается, что визуально оригинальные и оптимизированные изображения ни чем не будут отличаться. Я читал на Хабре довольно много статьей посвященных данному вопросу, но скажу, большая часть — полная чушь, в них констатируются факты, а не причины. Данный обзор посвящен людям, которые имеют базовые знания об оптимизации изображений.
Читать дальше →
Total votes 235: ↑219 and ↓16 +203
Comments 138

Виртуальная клавиатура

Reading time 1 min
Views 19K

На днях набрел на хорошую виртуальную клавиатуру. Почему-то я ее раньше нигде не встречал, хотя продукт достойный. Наш, русский, даже имеет патент (РОСПАТЕНТа №2009611147 от 20.02.2009).
Читать дальше →
Total votes 85: ↑75 and ↓10 +65
Comments 35

Новый пуленепробиваемый синтаксис @font-face

Reading time 3 min
Views 71K
С самого начала «вебошрифтовой революции» мы полагались на неизящные хаки деклараций @font-face, чтобы шрифты из Паутины загружались во всех браузерах. Может ли существовать лучший путь? Вполне изящный и совместимый с будущими браузерами?

Вкратце об истории вопроса


В сентябре 2009 года Пол Айриш (Paul Irish) огласил пуленепробиваемый синтаксис для записи деклараций @font-face. Синтаксис был компактным и в то время действовал во всех браузерах. Недавно стали поступать, со временем усиливаясь, жалобы на отказ шрифтов загружаться в Android — поэтому мы стали вместо того рекомендовать синтаксис «Mo' Bulletproofer», сочинённый Ричардом Финком (Richard Fink). К сожалению, синтаксису «Mo' Bulletproofer» требуется двойная запись деклараций, так что поддержка его сложнее.

Синтаксис Fontspring @Font-Face


А вот таким этому коду следовало бы быть с самого начала. Чистым, ясным и простым:
@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?') format('eot'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

Что? Я не понял.


Хак Трюк, заставляющий этот код заработать — символ «?» вслед за именем файла EOT. Без шуток.

Как это срабатывает


Читать дальше →
Total votes 141: ↑132 and ↓9 +123
Comments 42

76 новых материалов на русском

Reading time 3 min
Views 1.6K
image

Недавно был снова обновлен центр по Internet Explorer на MSDN. Были добавлены 76 статей и книг, посвященных следующим темам:



Полный список материалов со ссылками под катом
Читать дальше →
Total votes 62: ↑46 and ↓16 +30
Comments 11

Watir: простой парсинг сложных сайтов

Reading time 4 min
Views 51K
imageКаждый, кто пишет парсеры, знает, что можно распарсить сто сайтов, а на сто-первом застрять на несколько дней. Структура очередного отмороженного сайта может быть сколь угодно сложной, и, когда дело касается сжатых javascript-ов и ajax-запросов, расшифровать их и извлечь информацию с помощью обычного curl-а и регекспов становится дороже самой информации.

Грубо говоря, проблема в том, что в браузере работает javascript, а на сервере его нет. Нужно либо писать интерпретатор js на одном из серверных языков (jParser и jTokenizer), либо ставить на сервер браузер, посылать в него запросы и вытаскивать итоговое dom-дерево.

В древности в таких случаях мы строили свой велосипед: на отдельной машине запускали браузер, в нем js, который постоянно стучался на сервер и получал от него задания (джобы), сам сайт грузился в iframe, а скрипт извне отправлял dom-дерево ифрейма обратно на сервер.

Сейчас появились более продвинутые средства — xulrunner (crowbar) и watir. Первый — безголовый firefox. У crowbar есть даже ff-плагин для визуального выделения нужных данных, который генерит специальный парсер-js-код, однако там не поддерживаются cookies, а допиливать неохота. Watir позиционируется разработчиками как средство отладки, но мы будем его использовать по прямому назначению и в качестве примера вытащим какие-нибудь данные с сайта travelocity.com.

Читать дальше →
Total votes 79: ↑65 and ↓14 +51
Comments 74
1

Information

Rating
Does not participate
Registered
Activity