Pull to refresh
0
0
Send message

Необычные jQuery и CSS селекторы

Reading time 6 min
Views 22K
Селекторы имеют очень важное значение. Большинство JQuery методов требуют выбора элементов для использования. К примеру, перед тем как прикрепить событие click к кнопке, нужно выбрать саму кнопку.

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

Давайте перейдем к списку!

Читать дальше →
Total votes 41: ↑29 and ↓12 +17
Comments 15

Как сделать многослойную Parallax иллюстрацию на CSS & JavaScript

Reading time 5 min
Views 56K
image
Рисунок используемый для parallax эффекта. Автор Patryk Zabielski

Привет друзья, я покажу вам как создать простою многослойную иллюстрацию с глубиной, которая переходит к контенту. Мы будем использовать метод, в котором необходим только css и чистый JS(coffeescript) (Никаких jQuery!).

Этот урок для начинающих, с начальным знанием JS и CSS, так что я буду объяснять большинство вещей и ссылаться на внешние источники.

Финальное демо
Читать дальше →
Total votes 39: ↑27 and ↓12 +15
Comments 23

Подборка: 40+ полезных инструментов, ресурсов и исследований о работе с email

Reading time 3 min
Views 13K


В нашем блоге на Хабре мы часто пишем о создании почтовых рассылок — верстке HTML и CSS, работе с plain-text сообщениями и описываем интересные эксперименты. Сегодня мы представляем вашему вниманию подборку полезных ресурсов, туториалов и исследований на английском и русском языках, посвященных работе с email.
Читать дальше →
Total votes 10: ↑8 and ↓2 +6
Comments 2

400 потрясающих бесплатных сервисов

Reading time 16 min
Views 717K

Рад представить дополнение оригинального списка из 300 потрясающих бесплатных сервисов. Автор оригинальной статьи Ali Mese добавил ещё +100 новых сервисов, которые помогут найти все — от источников вдохновения и редакторов фотографий до создания опросов и бесплатных иконок.

И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.



A. Бесплатные веб-сайты

  • HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
  • Bootswatch: Бесплатные темы для Bootstrap.
  • Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
  • Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
  • Strikingly: Конструктор веб-сайтов.
  • Layers: Создание сайтов на WordPress (new).
  • Bootstrap Zero: Самая большая коллекция бесплатных шаблонов Bootstrap (new).
  • Landing Harbor:  Продвижение мобильного приложения c помощью бесплатного лендинга (new).
Читать дальше →
Total votes 108: ↑89 and ↓19 +70
Comments 38

Продолжаем бороться с frontend-рутиной

Reading time 7 min
Views 37K
image

Прошло полгода с последней новости о TARS на хабре.

Напомню, что TARS — это сборщик html-верстки, основанный на gulp, в помощь любому frontend-разработчику (или даже целой команде), для создания проектов любой сложности. За последние шесть месяцев было закрыто 88 issue, выпущено 7 версий, появился CLI, так вышло, что с yeoman’ом отношения не сложились, поэтому появилась своя версия. TARS переехал в свой новый дом на github, обзавелся командой из 4 разработчиков + небольшой армией фанатов. Кстати, огромное вам спасибо за мгновенные фидбеки после релизов и не только. TARS был внедрен в нескольких вебстудиях России и за рубежом. Сборщик научил компонентному подходу не один десяток разработчиков, привлек в ряды frontend’еров тех, кто боялся всей рутины верстки. В общем, появилось много всего нового, и об этом хотелось бы рассказать.
Подробности
Total votes 28: ↑26 and ↓2 +24
Comments 10

По-настоящему адаптивные письма. Часть вторая. Фреймворк

Reading time 3 min
Views 28K

Картинка для привлечения внимания честно сперта у invisionapp (кстати, у них божественная рассылка)

С момента публикации последнего поста прошло ни много ни мало, полтора месяца, но на то были причины. Уйма работы и бредовые мысли задрота-верстальщика. Сначала я собирался просто перенять приемы Николь Мерлин для верстки писем себе, но потом хипстерская голова подумала: А почему бы не зафигачить целый фреймворк? Громкое слово для моей поделки, но мне приятно его так называть. Начнем с простого.
Читать дальше →
Total votes 21: ↑20 and ↓1 +19
Comments 8

Как обычному сайту на Wordpress набрать 99/100 в PageSpeed Insights

Reading time 5 min
Views 136K
Началось все с того что Adsense в очередной раз понизил оценку эффективности страниц:
image
А все мы знаем, что скорость сайта – один из факторов ранжирования в выдаче Гугла.

И если раньше удавалось исправить ситуацию простыми действиями, включить кэширование или сжать JS, то теперь, похоже, пришло время взяться за сайт основательно.

Изначально имеется сайтик со статьями, коих в интернете миллионы: CMS Wordpress 4.2, два десятка плагинов, тема, сверстанная фрилансером и shared хостинг.
Читать дальше →
Total votes 27: ↑23 and ↓4 +19
Comments 19

Эффективная обработка фотографий в Photoshop

Reading time 6 min
Views 146K
Эффективная обработка фотографий в Photoshop

Читая статьи о Photoshop, я часто удивляюсь тому, насколько многие авторы усложняют решение по сути простых задач по обработке. Этим страдают и многие «монументальные» писатели, например Дэн Маргулис. Но ему это простительно – его задача написать о всех тонкостях и нюансах процесса обработки, рассмотреть его со всех ракурсов и сторон. Хотя именно эта особенность подачи материала в его книгах отталкивает многих читателей.

На самом деле, корни подобных способов «увеличить резкость в 40 действий» растут из очень простой вещи – люди, которые пишут эти уроки, никогда не работали с большим объемом фотографий. То есть, как правило, у них есть пара фотографий и они готовы в процессе их обработки убить вечер-другой. Но когда у тебя идут постоянные заказы, и с каждой фотосессии тебе надо серьезно обработать несколько десятков кадров – начинаешь задумываться о более простых и удобных способах обработки.

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

Читать дальше →
Total votes 288: ↑244 and ↓44 +200
Comments 117

Вопрос по сборке домашнего медиацентра

Reading time 1 min
Views 1.8K
Здравствуйте, господа и дамы!

Решил себе собрать простенький компьютер в качестве домашнего медиацентра. Соответственно, рассматриваю потенциальные платформы XBMC и MythTV.

Вот его конфигурация:
1. Материнская плата,
2. Процессор,
3. 2 планки ноунеймовской памяти по гигу,
4. Кулер на процессор,
5. Корпус.

В связи с грядущей покупкой у меня есть несколько вопросов:
1. Потянет ли компьютер в такой конфигурации проигрывание FullHD видео (предполагаются BD-Rip'ы) одновременно соскачиванием торрентов?
2. Нужно ли покупать еще что-то, чтоюы компьютер эффективно охлаждался или одного кулера на процессор достаточно?
3. Какую платформу для медиацентра выбрать?

Спасибо большое за внимание и буду благодарен за ответы.
Total votes 40: ↑7 and ↓33 -26
Comments 46

Эмуляторы игровых консолей на платформе Android

Reading time 5 min
Views 97K
image

Не секрет что Android как платформа стремительно набирает популярность, и хотя уже сейчас имеется возможность поиграть во множество интересных и красивых игр, всё же до iOS ещё далеко. Однако также не является секретом то, что на старых игровых консолях достаточно много качественных, и достойных нашего с вами внимания проектов, а что ещё важнее – в них без проблем можно поиграть на эмуляторах. Я попытался составить список самых популярных игровых эмуляторов на платформе Android. Список стоящих игр к эмуляторам также прилагается.
Читать дальше
Total votes 87: ↑73 and ↓14 +59
Comments 51

Google Navigation работает во всем мире… благодаря небольшому хаку ;-)

Reading time 2 min
Views 3.1K
Многие из Вас слышали, что пару недель назад Google представил свою программу для Навигации.
Кто не видел- вот ссылка на видео
Но с этой программой была одна проблема… Она работала только в США.
Вероятно, лицензии на карты, купленные Google не позовляли использовать навигацию в других странах
(в США у Гугла уже свои карты ;-) )
Но, как мы знаем, мир не без добрых людей: Благодаря их стараниям, Навигация работает во всем мире, в том числе и в наших странах- сам только что катался с ней по Киеву:
image image
Под катом- как этого добиться на Вашем телефоне под OS Android
P.S. Оригинал этого руководства взят с форума xda-developers
Читать дальше →
Total votes 123: ↑119 and ↓4 +115
Comments 52

Google выпустил HTML5-редактор для веб-дизайна

Reading time 1 min
Views 131K
Компания Google выложила в свободный доступ программу Google Web Designer (бета): HTML-редактор кода со встроенным графическим редактором для создания рекламных баннеров.


Читать дальше →
Total votes 81: ↑75 and ↓6 +69
Comments 60

Чем тестировать адаптивный дизайн?

Reading time 4 min
Views 266K
image

Хватит менять размер окна браузера, хватит его насиловать! Готов спорить, вы не раз слышали это. Хорошо, возможно и не слышали. Но если вы профессионально занимаетесь разработкой адаптивных сайтов, вы понимаете о чем я: любое изменение DOM или правка CSS, и вы снова начинаете тянуть край браузера вперед, назад, тестируя изменения и просматривая ничего ли не сломалось.

Целью ваших движений является имитация экранов различных устройств.

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

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

Для тестирования я выбрал реально адаптивный сайт PajamasOnYourFeet.com, сайт построено на основе HTML5 шаблона, бесплатно предоставленным EGrappler.
Читать дальше →
Total votes 30: ↑27 and ↓3 +24
Comments 33

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

Reading time 1 min
Views 51K
Новые полезные штуки для веб-дизайнеров за июнь 2013. Остальные подборки доступны по тегу "новое для веб-дизайнера"

Инструменты




Red Pen — сервис позволяет легко получать обратную связь на свои работы в формате PNG: после загрузки картинки любой пользователь может оставлять свои комментарии к файлу
Читать дальше →
Total votes 86: ↑78 and ↓8 +70
Comments 9

Пишем клиент для любимого сайта на phoneGap

Reading time 7 min
Views 50K
Бывает что есть сайт, но пользоваться им с мобильного телефона не очень удобно и было бы замечательно иметь отдельное приложение для него. Любители веб разработки легко смогут это сделать использую phoneGap. Под катом речь пойдет про сервис отслеживания почтовых отправлений, которым я часто пользуюсь и написанный для него демонстрационный клиент с базовым функционалом: авторизация, получение списка треков и описания к ним и возможность добавить новый трек. Я не связывался с разработчиком по этому поводу и очень надеюсь что он на меня не обидится за наглость, за копание в JavaScript коде и за то что в приложении не будет показана реклама. Так же прошу простить за костыльность и велосипедность кода, воспринимайте его как пример.
Читать дальше →
Total votes 44: ↑35 and ↓9 +26
Comments 18

Responsive Email Design, или Как прочитать письмо на холодильнике

Reading time 9 min
Views 26K
image Для нас, как и для большинства социальных сетей, очень важны email-рассылки. Одной из интересных и сложных технических задач является корректное отображение писем на мобильных устройствах. Сейчас около 23% писем Badoo открывается именно на них, и это число постоянно увеличивается. А возможно, кто-то прямо сейчас читает наше письмо на своем интернет-холодильнике.
Сегодня мы расскажем, каких правил придерживаться в разработке электронных писем, как сохранить их юзабилити на мобильных устройствах, а также поделимся своими хитростями, накопленными в процессе работы.

Требования


С какими проблемами мы столкнулись и какие требования предъявляются к нашим письмам:

  • письма должны корректно отображаться в множестве разных почтовых клиентов и браузеров;
  • они должны быть оптимизированы под различные устройства на платформах iOS и Andriod (смартфоны с большим, средним и малым разрешением экрана; планшетные компьютеры);
  • нужна обязательная поддержка Outlook 2003/2007/2010, т.к. он занимает большой сегмент использования;
  • редактирование компонентов, которые применяются еще в 50 шаблонах писем;
  • необходимо создавать универсальные блоки, которые будут подстраиваться под ситуацию, т.к. в письмах данные имеют динамическую структуру (например, письма переводят на 44 языка, в них меняются размеры блоков, изображений, размер текста).
Читать дальше →
Total votes 92: ↑81 and ↓11 +70
Comments 26

Try jQuery — новый интерактивный самоучитель по jQuery

Reading time 2 min
Views 72K
Раньше я как-то не стремился глубоко изучать jQuery, поскольку работаю в основном с back-end. Однако самоучитель TRYjQuery, ссылка на который пришла в недавнем письме от CodeSchool, вызвал интерес с первых кадров.

Читать дальше →
Total votes 66: ↑60 and ↓6 +54
Comments 14

DivShot — онлайн-сервис прототипирования Bootstrap

Reading time 1 min
Views 74K
DivShot — отличный новый инструмент для работы с Twitter Bootstrap. С помощью него создавать прототипы интерфейсов с использованием популярного CSS-фреймворка стало до безобразия просто.

Читать дальше →
Total votes 155: ↑145 and ↓10 +135
Comments 21

CSS печатной версии страницы

Reading time 3 min
Views 166K


На многих сайтах есть возможность отобразить версию страницы для печати, но всегда ли удобно ими пользоваться?

Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @media:
Читать дальше →
Total votes 109: ↑101 and ↓8 +93
Comments 27
1

Information

Rating
Does not participate
Registered
Activity