Pull to refresh
1
0

User

Максимальная адаптивность с минимальным количеством медиа запросов, или метод обратной адаптивности

Reading time 4 min
Views 14K
"У всякой проблемы всегда есть решение — простое, удобное, и конечно ошибочное". — Генри Луис Менкен.

Суть проблемы


На первый взгляд реализация адаптивной верстки может показаться «линейным квестом » с довольно небольшим полем для маневров.

Назначаем нужные классы, меняем по мере надобности размеры, положение или порядок элементов и дело вроде бы сделано.

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

При столкновении с необычными дизайнерскими решениями медиа запросы становятся «толще», появляются нестандартные брейкпоинты, а при смене деталей дизайна, внесение правок в вёрстку становится довольно тяжелой работой.

Любая поправка от клиента или дизайнера, и css код нужно редактировать во всех медиа запросах (особенно если это чужой css и они разбросаны по всему коду в разных местах с нелогичной последовательностью).

Что часто приводит к ситуации когда вы уже не совсем контролируете ситуацию и появляется соблазн прибегнуть к «жёстким» методам, таким как директива !important, или вложенность. Код становится ещё менее настраиваемым и где-то там среди тысяч строк появляются строки которые уже не нужны и только (пусть и незначительно ) замедляют работу браузера.
Читать дальше →
Total votes 21: ↑20 and ↓1 +19
Comments 18

SVG маски и вау-эффекты: о магии простыми словами

Reading time 5 min
Views 51K


О существовании SVG знают все, кто занимается фронтендом. Этой технологии уже не один год, про нее уже не раз писали на хабре. Но есть один момент. Частенько на разных ресурсах, в том числе и на тостере, начинающие задают вопросы о создании определенного семейства анимаций на сайте и получают довольно странные ответы от “бывалых” разработчиков. Возникает ощущение, что в такие моменты все думают в контексте HTML+CSS+JS и просто забывают о существовании SVG, предлагая все рисовать на canvas и попутно давая обещания дать тому, кто это придумал, клавиатурой по голове. Но этот путь (рисование на canvas) зачастую слишком сложен относительно решаемой задачи. В предыдущей статье мы обсуждали идеи создания частичных вау-эффектов, а в этой поговорим о масках и посмотрим пару анимаций, которые с их помощью можно сделать.
Total votes 61: ↑61 and ↓0 +61
Comments 12

Удивительный Angular

Reading time 31 min
Views 211K

Awesome Angular



От переводчиков


Всем привет, с вами Максим Иванов и Дмитрий Сергиенков, и сегодня мы поговорим о новостях в мире Angular. Мы подготовили для вас наиболее интересные материалы и отобрали список вопросов, который вам должен понравиться. Отметим только, что если вы будете ждать от этой статьи ответа на вопрос "Чем Angular лучше других технологий?", то придется вас огорчить, у нас не будет ответа на него. Почему? Как правило, все мнения вида "Технология X лучше технологии Y" почти всегда не более, чем отражение точки зрения высказывающегося. Однако для тех, кто только начинает изучать этот фреймворк, мы постараемся объяснить, что дает вам эта технология и какую пользу она приносит. Также не проходите мимо и ответьте на опрос, самые популярные ответы будут отправлены Игорю Минару (ведущий разработчик команды Angular). Ну что же, приступим.

Читать дальше →
Total votes 47: ↑45 and ↓2 +43
Comments 59

Оптимизируем свои трудозатраты при разработке приложения в Google Material Design

Reading time 3 min
Views 22K


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

Итак, перед нами стоит задача: опираясь на готовые решения в открытом доступе, максимально оптимизировать затраченный труд на разработку приложения в стиле Google Material Design.
что удалось откопать...
Total votes 22: ↑18 and ↓4 +14
Comments 16

Rclone: rsync для облаков

Reading time 5 min
Views 69K
PR-2358

В предыдущих публикациях мы уже не раз рассказывали о полезных утилитах для работы с нашим облачным хранилищем. Сегодня мы поговорим ещё об одном интересном, простом в обращении и — не побоимся этого слова — уникальном инструменте. Знакомьтесь: rclone. Разработчики описывают его краткой и ёмкой фразой «rsync для облачных хранилищ».

Основная функция rclone — это синхронизация данных в хранилище и на локальной машине. Утилита несомненна окажется полезной для широкого круга пользователей облачного хранилища. Её можно использовать и для резервного копирования, и в работе со статическими сайтами…

Есть у rclone и опции, которых нет ни у одного другого инструмента аналогичного плана. Подробнее обо всём этом мы расскажем ниже.
Читать дальше →
Total votes 19: ↑18 and ↓1 +17
Comments 14

Нюансы коммерческой разработки на WordPress

Reading time 7 min
Views 51K


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

По большей части информация будет «технического плана», касательно CMS Worpdress, «по верхушкам». Я рассказываю лишь про наш путь, для кого использование технологий, путей, приемов etc. вопрос религии — просьба воздержаться от холиваров.
Приступим
Total votes 22: ↑19 and ↓3 +16
Comments 32

Переходим на Fusion Drive

Reading time 9 min
Views 158K

Активные пользователи Mac OS X наверняка помнят анонсированную 23 октября функцию Fusion Drive. Напомню, что она представляет из себя логическое объединение установленных в ваш Mac SSD и HDD. Объем единого диска будет равен сумме объемов SSD и HDD, но главные плюс — часто используемые файлы (например, ядро системы) Mac OS автоматически и прозрачно для пользователя размещает на более быстром SSD, а все прочие файлы на HDD.

Читать дальше →
Total votes 64: ↑60 and ↓4 +56
Comments 84

Бесплатный курс из 11 лекций про маркетинг, продажи и клиентский сервис в веб-студии/агентстве

Reading time 2 min
Views 44K
Всем привет! В течение последних пяти лет я (Андрей Терехов) периодически писал на Хабре (и в общие блоги, и с недавних пор в блог проекта Ruward) различные материалы про маркетинг, продажи и клиентский сервис в веб-студиях и агентствах. Как правило, эти статьи получали положительный отклик от пользователей. Мы решили пойти дальше и составили самый полный курс из всех, которые я когда-либо читал (включая оффлайн), по данной тематике.

Мы записали более 8 часов видео, разбитых на 11 лекций, подготовили презентации, кейсы, материалы по теме, кучу разного рода примеров, образцов и шаблонов, которые могут пригодится в жизни веб-студии. Это все превратилось в большой спецпроект, который мы и анонсируем сегодня – www.megaplan.ru/digital.

Итак, какие темы вошли в наш курс из 11 лекций (заодно дам ссылки на мои материалы с хабра по этим же темам там, где они есть):

  1. Структура интернет-агентства. Принципы проектного управления. Треугольник sales-pm-account. (по мотивам http://habrahabr.ru/post/66033/)

  2. Ценообразование в веб-студии. Формирование расчетной сметы. Оправдание цены. Виды демпинга и способы борьбы с ним. (по мотивам http://habrahabr.ru/company/ruward/blog/169559/)

  3. Функции службы маркетинга, основные каналы привлечения клиентов. Работа по разным сегментам ЦА.

  4. Позиционирование — ищем ключевые точки. Собственный сайт студии/агентства — типовые ошибки. (по мотивам http://habrahabr.ru/post/121053/)


Читать дальше →
Total votes 53: ↑39 and ↓14 +25
Comments 14

Vesta Control Panel

Reading time 3 min
Views 74K

Полгода непрерывной работы. Более тысячи установок. Добавлено 95 тысяч новых строк. Удалено 84 тысячи. Было сделано 360 комитов. Вышла новая версия.
Я хочу рассказать о наиболее важных изменениях.
Читать дальше →
Total votes 53: ↑49 and ↓4 +45
Comments 40

Веб-дизайн + Mac OS − Adobe = Sketch. Чем новый инструмент лучше всех старых

Reading time 4 min
Views 111K
Программы Адоби я очень сильно не люблю. Они большие, несуразные, прожорливые, и с ними приходится мириться, потому что за неимением сильных конкурентов Фотошоп с Иллюстратором стали уже стандартными инструментами в профессии.

Начинал я рисовать сайты, как и все, в Фотошопе. Но чем сложнее становились задания, тем сильнее ощущалась его неприспособленность для проектирования интерфейсов. Оно и понятно: Адоби никогда не говорили, что он предназначен для интерфейсных дизайнеров, это дизайнеры как-то сами себе придумали. Всегда хотелось иметь инструмент с двумя кнопками и тремя ползунками — все равно я больше не использовал ни в Фотошопе, ни в Фаерворксе ни в ИнДизайне. Сейчас у меня из «адобовского» набора есть только доставшийся бесплатно (в нагрузку к планшету) Фотошоп Элементс, установленный из принципа (халява же), а все остальное я уже давно заменил другими приложениями. И вот одно из.

Читать дальше →
Total votes 51: ↑47 and ↓4 +43
Comments 59

Первый пост в нашем блоге. Поговорим про клиентский сервис в веб-студии/интерактивном агентстве

Reading time 8 min
Views 23K
image

Привет, Хабр! Это наш первый пост в корпоративном блоге проекта «Ruward: все рейтинги Рунета». Проект задумывался как агрегатор всех существующих нишевых топов на агентском digital-рынке (сейчас у нас 52 рейтинга и более 1000 компаний- участниц) – чтобы служить некой картой интерактивного рынка (а заодно – и шпаргалкой, чтобы быстро посмотреть, кто на каких позициях в каких топах)

Поскольку рейтинговая тема является довольно спорной и иногда вызывает негативную реакцию: «Yet another digital ratings!», мы решили в нашем блоге выкладывать полезные авторские (наши) материалы про жизнь веб-студий и интерактивных агентств. Предлагаю начать наш цикл с разговора про клиентский сервис, поскольку в подавляющем большинстве случаев на нашем рынке с ним просто беда. Итак:

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


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

Основные функции службы клиентского сервиса


Можно выделить три основные зоны ответственности службы клиентского сервиса в типовом агентстве:
Читать дальше →
Total votes 49: ↑28 and ↓21 +7
Comments 6

OVH: заказываем микро-сервер у крупнейшего хостера в мире

Reading time 3 min
Views 110K
OVH — на данный момент является крупнейшим хостинг-провайдером в мире, 120 тысяч серверов в Европе и еще 360 тысяч — в Канаде. Дичайшая конкуренция на французском рынке держит цены на низком уровне (особенно на трафик).

Интерес эта компания у многих вызывала давно, до 2011-года они вообще работали только с резидентами ЕС, после — регистрироваться приходилось в разных отделениях в разное время, оставалось много неясных (для меня) вопросов. Их я и решил прояснить.

Под катом — краткий рассказ о том, в какой валюте придется платить, как избавиться от НДС, какие документы требуют и краткий тест выделенного сервера на Atom-е за 10 евро в месяц.
Читать дальше →
Total votes 75: ↑74 and ↓1 +73
Comments 127

Новое для веб-дизайнера за первую половину декабря

Reading time 1 min
Views 52K
Новые полезные штуки для веб-дизайнеров за первую половину декабря 2012. Прошлый месяц: ноябрь. Во все подобные топики буду добавлять тег "новое для веб-дизайнера"

Сервисы и инструменты


Weavly — бесплатный онлайн-сервис для удобного создания роликов из видео, аудио и gif-картинок.

Читать дальше →
Total votes 96: ↑85 and ↓11 +74
Comments 11

[Перевод] Современный веб-разработчик, или 6 вещей, которые вы должны знать, чтобы выжить

Reading time 4 min
Views 97K
Это статья об изменениях, которые произошли в мире веб-разработки. Я наблюдаю огромное количество веб-разработчиков, которые буквально застряли в устаревших технологиях, особенно в мире .NET. Если вы еще не начали совершенствовать свои навыки, и адаптироваться к изменяющимся трендам, вы должны начинать уже сегодня.
Читать дальше →
Total votes 169: ↑132 and ↓37 +95
Comments 90

Техники и инструметарий parallax

Reading time 1 min
Views 26K
С тех пор как появился parallax-эффект, мы заметили, что нашим читателям нравится эта техника, и решили собрать в одном месте инструментарий и туториалы, которые помогут внедрить parallax-прокрутку в ваших собственных проектах. Этот эффект создаёт иллюзию глубины и движения экрана, и будучи качественно реализованным, может запросто обворожить пользователя. Как и в случае любого другого эффекта, главное тут — умеренность. Использование parallax для того, чтобы оживить сайт и заинтересовать в нём, вполне оправдано, но всё же старайтесь избегать чрезмерности, чтобы не вышел слишком перенасыщенный сайт.
Читать дальше →
Total votes 24: ↑16 and ↓8 +8
Comments 2

Новое для веб-дизайнера за ноябрь 2012

Reading time 1 min
Views 57K
Продолжаю подборку новых полезных штук для веб-дизайнера за прошедший месяц. Прошлые выпуски: октябрь, сентябрь.

Сервисы и инструменты


Photo Raster — новый мощный графический редактор онлайн.

Читать дальше →
Total votes 92: ↑86 and ↓6 +80
Comments 27

GPL панель управления сервером Vesta

Reading time 3 min
Views 70K


Сейчас уже сложно сказать, когда именно я начал работу над вестой. Если считать первые скрипты добавления виртуальных хостов в апач, то это был 2007 год. Получается 5 лет тому назад. Помню тогда на работе состоялся примерно такой диалог:
— Ты решил написать свою панель управления?
— Ага, ведь cPanel это ужас, Plesk хоть и лучше, но сильно дорогой. Да и вообще у меня уже почти все готово
— Хм… для того чтобы просто приблизиться к сPanel тебе потребуется минимум 2 года

Не помню, что тогда ответил, но фразу про то, что почти все готово, я повторял еще не раз. Сейчас еще я хочу рассказать что готово в версии 0.9.7
Читать дальше →
Total votes 68: ↑65 and ↓3 +62
Comments 101

Сайт для программиста [на Node.js]. Просто. Стильно. Бесплатно

Reading time 5 min
Views 93K

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

Меня аккаунт Вконтакте, и даже в Фейсбуке в качестве своего сайта не устраивает. Слишком много лишнего, навязанный формат и прочие неудобства.

Если бы я не был веб-разработчиком, мне пришлось бы плакать и грызть кактус. К счастью, я им являюсь, поэтому решил сделать себе сайт сам. Чтобы выкладывать на нём статьи вроде этой, небольшие хобби-проекты, и чтобы было что указать в поле «сайт» профиля на Хабре.

Если вы тоже хотели бы иметь сайт, который полностью контролируете, на котором всё именно так, как вам хочется, но всё никак руки не доходили разобраться и сделать, то эта статья для вас.

Некоторые знания HTML и JS вам пригодятся. Опыт работы с Node.js не обязателен.

Читать дальше →
Total votes 131: ↑90 and ↓41 +49
Comments 96

Подходы к реализации адаптивного меню

Reading time 6 min
Views 56K
Когда мы начинаем работать с адаптивным дизайном, мы сталкиваемся с различными техниками того, как лучше обработать изменение нашего навигационного меню для экранов с низким разрешением. Возможности кажутся бесконечными. Поэтому, я покажу вам четыре главных подхода с их достоинствами и недостатками. Три из них сделаны с использованием только CSS и один — с небольшим количеством JavaScript.

image
Читать дальше →
Total votes 24: ↑21 and ↓3 +18
Comments 5
1

Information

Rating
Does not participate
Location
Россия
Registered
Activity