Pull to refresh
139
Karma
0
Rating
Павел Шиманский @shimapa23

User

Как отобразить количество оповещений в названии вкладки браузера

Reading time 3 min
Views 32K
Website development *JavaScript *HTML *Browsers
Tutorial
Translation


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

Существует пара наиболее распространенных способов оповещения пользователя. С одной стороны, социальные сети Facebook, Twitter и LinkedIn указывают определенное число, которое соответствует количеству обновлений. С другой стороны, Trello отображает небольшой красный кружок поверх favicon.

Trello Facebook and Twitter notifications
Оповещения Trello, Facebook и Twitter

В этом уроке мы воссоздадим подобные оповещения. Посмотрите демо (англ.), чтобы понять, чем мы будем заниматься.

Посмотреть на GitHub
Демо (рус.)
Читать дальше →
Total votes 53: ↑40 and ↓13 +27
Comments 17

Потрясающая коллекция бесплатных шрифтов за 2014 год

Reading time 1 min
Views 123K
Web design *Typography *
Привет, Хабр! Многие уже знают о моей страсти к попытке собрать самое лучше, что может быть полезно для веб-разработчиков или веб дизайнеров. И шрифты — не исключение. Программное обеспечение для работы со шрифтами постоянно развивается. Количество дизайнеров желающих опробовать себя в типографике растет с каждый днем. А сегодня я хочу представить вам их наработки — 30 потрясающих бесплатных шрифтов, которые мне удалось собрать за последний год.

Polar



Polar

Читать дальше →
Total votes 76: ↑68 and ↓8 +60
Comments 23

25 полезных шорткатов для Photoshop

Reading time 3 min
Views 181K
IT-companies
Translation
Здравствуй, дорогой хабрадруг! В этой статье приводятся 25 самых полезных сочетаний клавиш (шорткатов) в Photoshop, которые вы можете использовать, для того чтобы ускорить выполнение вашей работы. Некоторые из них редко упоминаются, некоторые применяются довольно часто, а некоторые вообще доступны только в Photoshop CS5. Я надеюсь, что каждый из вас найдет новые и полезные шорткаты в этой статье. Итак, давайте же начнем!


Читать дальше →
Total votes 126: ↑103 and ↓23 +80
Comments 76

Почему я не стану вас нанимать

Reading time 5 min
Views 42K
Personnel Management *
Translation
image

Один мой товарищ недавно активно искал работу, и спрашивал меня, как себя подавать перед работодателем. Погуглив, мы пролистали с десяток статей о том, как надо и как не надо делать во время поиска, и одну из них я решил перевести для хабрасообщества, возможно кому-то это поможет избежать ошибок, которые в ней описаны. Манера статьи довольно провокационная, язык местами нецензурен, поэтому я постарался сгладить углы. Итак, поехали..
Читать дальше →
Total votes 230: ↑159 and ↓71 +88
Comments 262

twitter2vk — из Твиттера во В Контакте

Reading time 3 min
Views 3.7K
Social networks and communities


twitter2vk — скрипт для автоматической перепубликации статусов из Твиттера во В Контакте. Например, если у вас остались старые друзья, которые никак не хотят уходить из В Контакте.

Преимущества


  • Не хранит паролей, так что потеря файла настроек не будет столь страшна. В настройках хранятся только ID сессии В Контакте и данные для OAuth-входа в Твиттер. Особенно актуально для тех, кто использует один пароль для нескольких сервисов.
  • Поддерживает ретвиты — публикует во В Контакте статусы других пользователей, которые вы отретвитили.
  • Настройка формата статусов и ретвитов во В Контакте. Можно, например, заменять пользователей на ссылки на них или обрезать текст оставляя ссылку после него в полном виде: «Длинный текс… http//twitter.com/my/status/31337».
  • Правила исключения статусов. Можно указывать, какие статусы не будут перепубликоваться во В Контакте (например, ответы другим пользователям Твиттера).

Читать дальше →
Total votes 33: ↑20 and ↓13 +7
Comments 25

iWebkit как способ оптимизировать свой сайт под iPhone

Reading time 4 min
Views 5K
Smartphones
iWebkit как способ оптимизировать свой сайт под iPhone.

Вчера мной была замечена библиотека разработки сайтов оптимизированных для iPhone и iPod Touch под названием PastryKit, библиотека включает в себя сборник из css и javascript. Все бы хорошо, но Apple не позаботилась о сторонних разработчиках и забыла (или не захотела) включить добавить документацию к своей разработке.


Недавно для меня была поставлена задача оптимизации моего сайта, для таких девайсов как iPhone, iPod Touch и для аппаратов использующих Android.
Для этого я выбрал другую, более легкую библиотеку под названием iWebkit, о которой сейчас и пойдет речь.

Первый пост на Хабре, так что не ругайте особо.
Читать дальше →
Total votes 42: ↑34 and ↓8 +26
Comments 15

20 событий 2011 года

Reading time 1 min
Views 761
Media management *

Здравствуй, дорогой хабрадруг. В 2011г. произошло множество различных событий, некоторые из них были приятные, некоторые — не очень. 20 самых запоминающихся из них были собраны воедино. Итак, «20 событий 2011 года» — изумительная иллюстрация 20 фактов, имевших место в прошлом году, и ваша задача заключается в том, чтобы их отгадать.
Под катом процесс создания иллюстрации (внимание, много картинок).
Читать дальше →
Total votes 50: ↑39 and ↓11 +28
Comments 91

Разбор «лохотрона» на игральных картах

Reading time 5 min
Views 111K
Algorithms *Mathematics *
Вместо вступления

В стандартной колоде для покера 54 карты. Без двух джокеров, которые не участвуют в игре, выходит 52 карты. Если вы хорошенько перемешаете колоду, то, возможно, создадите уникальную комбинацию из карт, которую никогда никто не создавал до вас. Потому что различных вариантов расположений 52 карт равно: image


Что-то мне подсказывает, что комбинация на изображении не так уникальна.

Теперь к теме

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

Я слышал, что у [блондинов/низких людей/тех, кто носит кепки/любой подходящий вариант] интуиция просто отстой! Вот спорим, что ты не сможешь угадать (в этот момент разводчик достает колоду карт) цвет каждой следующей карты? Можешь перетасовать колоду, как захочешь! За каждую угаданную карту плачу по тысяче рублей! А если не угадаешь, то ты даешь мне два рубля, потом докидываешь до четырех, до восьми рублей и дальше, ну ты понял? И чтобы было честно — остановить игру может лишь тот, кто проигрывает в общем счете, у кого выигрыш меньше. Идет?


Большинство читателей уже поняли схему и с улыбкой прикидывают сумму, которую может выиграть разводчик.
Мне стало интересно, до каких пор игрок выигрывает и как нужно действовать, чтобы увеличить шансы на выигрыш (лучший способ — отказаться от игры!). Естественно, правило про остановку игры я не учитываю, с ним выиграть невозможно.
Читать дальше →
Total votes 145: ↑123 and ↓22 +101
Comments 125

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

Reading time 1 min
Views 68K
Website development *Development of mobile applications *
Сделал небольшую подборку новых полезных материалов для веб-дизайнеров за сентябрь 2012. Надеюсь, будет полезна хабровчанам.

Полезные сервисы


Easel.io — отличный сервис для прототипирования прямо в браузере.

Читать дальше →
Total votes 136: ↑132 and ↓4 +128
Comments 21

Подключаем GPRS-интернет в деревне

Reading time 5 min
Views 43K
Network standards *
Наступили теплые дни, впереди жаркое лето, да и майские праздники подбавили настроения. Все это не оставляет почти никакого желания проводить воскресные дни в углах непросторной городской квартиры, а хочется свободы, свежего деревенского воздуха, запаха сена, мокрой от росы травы и света мерцающих звезд, прошедшего тысячи световых лет и доносящегося до нас сквозь бездну неизведанной темной материи.

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

(много картинок)
Читать дальше →
Total votes 51: ↑43 and ↓8 +35
Comments 75

62 полезных инструмента для адаптивного дизайна (Responsive web design)

Reading time 14 min
Views 201K
Website development *CSS *
Translation
UPD. Для краткого введения в адаптивный дизайн рекомендую прочитать статью «Как сделать один сайт для всех устройств (Responsive Web Design)».

Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

Техники Responsive web design


1. CSS Transitions and Media Queries
CSS Transitions и Media Queries

Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?



Читать дальше →
Total votes 112: ↑107 and ↓5 +102
Comments 14

Знакомство с Parallax Scrolling

Reading time 4 min
Views 290K
Web design *
Translation
Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.

Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.

Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.


Читать дальше →
Total votes 99: ↑92 and ↓7 +85
Comments 35

5 действительно полезных шаблонов адаптивной разметки

Reading time 5 min
Views 96K
Website development *
В связи с наплывом интересующихся адаптивной вёрсткой решил перевести эту статью. Пускай полежит здесь.

image

Адаптивная разметка требует совершенно иного образа мышления при планировании структуры макета, что является одновременно и сложным и интересным. Чтобы перепрограммировать свой мозг, чтобы посмотреть на макеты по-новому, мы собираемся взглянуть на некоторые интересные шаблоны адаптивной разметки, которые были созданы талантливыми дизайнерами по всему вебу.
Читать дальше →
Total votes 151: ↑149 and ↓2 +147
Comments 38

Золотые правила успешной кнопки

Reading time 3 min
Views 70K
Web design *
Translation
Здравствуй, дорогой хабрадруг! Сегодня существуют более тысячи способов создать кнопку; чтобы понять их сущность, вам нужно лишь потратить немного времени, просмотрев работы на сайте dribbble.com. Большинство из этих примеров очень похожи друг на друга, однако время от времени попадаются и такие кнопки, на создание которых потратили чуть больше внимания, времени и сил.



Воспользовавшись замечательными параметрами CSS3, мы можем создать элегантые и стильные кнопки без особых усилий (учитывая старые браузеры, конечно). Создаете ли вы кнопку непосредственно в CSS или пользуетесь специальными инструментами для их создания, всегда нужно тщательно подумать о том, как ваша кнопка будет выглядеть в контексте веб-сайта.
Читать дальше →
Total votes 224: ↑215 and ↓9 +206
Comments 55

Как дуэт блогеров меняет индустрию модных фотографий анимированными синемаграфами

Reading time 4 min
Views 3K
Image processing *
Translation
image
Синемаграф, созданный во время Нью-Йоркской недели моды в прошлом месяце

Восходящие звёзды Джейми Бек и Кевин Бёрг составляют дуэт, стоящий за бешено популярным Tumblr-блогом From Me To You.

(Можно было бы заявить, что эти звёзды уже взошли, учитывая их недавние кампании с Ralph Lauren и Juicy Couture, фотостатью в New York Times и появление в Lucky Magazine, но мы уверены, что это только начало.)

28-летняя Бек и 30-летний Бёрг сочетают необычный набор талантов, который привлекает не только внимание Tumblr-сообщества, но и растущий список брендов и редакторов.

Бек — фотограф, главная модель и стилист блога. Она использует свои навыки пинапа, макияжа и создания причёсок, а также винтажный гардероб для создания гламурных образов таких американских икон, как Одри Хёпберн и Грейс Келли.

Бёрг больше занимается технической стороной, создавая дизайн блога и собственно синемаграфы — анимированные GIF-изображения, которые выглядят как движущиеся фотографии. Кроме того, он — как я понял из встреч с одним из их клиентов и их менеджером, Карен Робинович из DBA — занимается деловыми отношениями, отмечая пожелания клиентов и сроки выполнения.
Читать дальше →
Total votes 84: ↑74 and ↓10 +64
Comments 44

flotr2 — графики и диаграммы на HTML5

Reading time 1 min
Views 35K
HTML *
flotr2 — это библиотека с открытым кодом для построения HTML5 графиков и диаграмм. Flotr2 — так как стала ответвлением от Flotr, но уже без привязки к Prototype JS и с множеством усовершенствований.


Читать дальше →
Total votes 85: ↑81 and ↓4 +77
Comments 26

CSS3: жизнь без префиксов

Reading time 4 min
Views 23K
Website development *
Префиксы вещь хорошая. Они помогают производителям браузеров в реализации новых возможностей. Но жизнь разработчиков от них становится только сложнее. Префиксов много, иногда наблюдаются различия в синтаксисе.

Проблема очевидна. Нужен способ облегчить работу с префиксами.

Естественно, перестать использовать префиксы было бы неразумно. Но переложить обязанность по их генерации на существующие специально для этого инструменты вполне возможно. Я попробовал перечислить возможные варианты.
Читать дальше →
Total votes 68: ↑62 and ↓6 +56
Comments 88

Создание анимированных tooltips'ов с помощью CSS3

Reading time 3 min
Views 7.9K
CSS *
Translation
Статьи про создание tooltips'ов уже не раз поднимались на хабре [1,2] в виду большой популярности этого элемента. Сегодня вы узнаете еще один способ как создать простые, анимированные подсказки с помощью псевдо-элементов before и after, а так же свойства transitions.

image


В качестве примера были сделаны иконки социальных сервисов, при наведении на которые показываются названия этих сервисов.

Читать дальше ...
Total votes 97: ↑91 and ↓6 +85
Comments 15

CSS3 с погружением

Reading time 7 min
Views 35K
Website development *
CSS3 видели и пробовали все, кого он мог заинтересовать. И закругленные уголки и падающие тени мы уже можем генерировать без лишнего труда.

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

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

Браузеры, поддерживающие свойства перечислены в виде CSS комментариев. Генераторы и инструменты чаще всего могут выполнять сразу несколько функций, поэтому в таких случаях я указывал их только там, где они, по-моему, справляются лучше всего.
Читать дальше →
Total votes 118: ↑109 and ↓9 +100
Comments 30
1

Information

Rating
Does not participate
Registered
Activity