Pull to refresh
8
0
Yevhen Isakov @Vend3tta

Frontend Dev @ EPAM Systems

Send message

Несколько полезных сервисов

Reading time2 min
Views126K
Хочу поделиться ссылками на несколько полезных сервисов. Некоторые из них помогут сэкономить время, другие — сделают за Вас незнакомую/нелюбимую работу. Список разбит по категориям, чтобы было легче ориентироваться.

Сервисы опросов
userreport.com (добавил Romanych)
simpoll.ru
webanketa.com (добавил mihass)

Кнопки постинга в социальные сети
Кнопка от Яндекса
addthis.com (добавил UksusoFF)
share42.com
Читать дальше →

Plugin Detector — каталог и рейтинг плагинов jQuery

Reading time6 min
Views5.6K
Последние четыре года я работал верстальщиком в разных питерских веб-студиях.

От полуподвальных контор из 3-5 человек до больших фирм 25-40 человек, работающих на рынке дорогих сайтов для крупных заказчиков. Но независимо от размера компании задачи были одни и те же.
  • нужно продать дизайн
  • сделать сайт, который не стыдно положить в портфолио
  • сделать оригинально, как еще не делали конкуренты

Таким образом, задачи верстальщикам и дизайнерам ставились одинаковые: «давайте что-то креативное, свежее, интересное».

Я очень хорошо понимаю верстальщиков, дизайнеров и владельцев веб-студий, поэтому чтобы облегчить им поиск плагинов под готовый функционал и в то-же время показать что-то свежее, чего еще многие [возможно] не видели, решил уволиться отовсюду, и запустить проект Plugin Detector



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

HTML KickStart — еще один способ быстро создать интерфейс своего веб-приложения

Reading time1 min
Views27K
Не один раз в комментариях замечал что народ негодует по поводу того, что веб-разработчики стали злоупотреблять использованием Bootstrap от Twitter. Признаюсь, я и сам успел закончить несколько небольших веб-приложений с использованием этого набора скриптов и стилей. Я не против использования Bootstrap от Twitter, я против злоупотребления этим когда есть столько хороших альтернатив. Я почти каждый день натыкаюсь на интерфейсы, построенные на Twitter Bootstrap, и это начинает напрягать. Последней каплей для поиска альтернативы стало изменение интерфейса биллинг панели моего хостера на шаблон Bootstrap. В этой записи я хотел бы немного рассказать про одну из альтернатив — HTML KickStart.
Читать дальше →

Стилизация HTML5 плейсхолдера с помощью CSS

Reading time2 min
Views138K
В HTML5 есть замечательный атрибут — placeholder (текст-подсказка для элементов ввода). Задается он следующим образом:

<input type=«text» placeholder=«type here some text» />

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

Свойства CSS, влияющие на рендеринг шрифта

Reading time2 min
Views75K
Когда дело доходит до рендеринга шрифта на Вебе, дизайнер может сделать не слишком многое. То, как шрифт выглядит на экране, по большей части зависит от операционных систем, браузеров, дизайна гарнитур, шрифтовых файлов и от того, дополнены ли эти файлы инструкциями для самых неожиданных сценариев рендеринга. Но иногда свойства CSS могут повлиять на то, как выглядит шрифт.



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

Демотивация по полной программе или почему я жду конца света?

Reading time6 min
Views17K
Низкий поклон Хабранароду!

Предисловие

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

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

CSS кнопки с помощью псевдо-элементов

Reading time5 min
Views47K


Здравствуйте, друзья. За последний месяц я экспериментировал с псевдо-элементами, особенно, с их использованием в создании кнопок. Таким образом, удалось создать крутые эффекты, которые раньше можно было сделать только со спрайтами.

В этом уроке я покажу как создать кнопку с изюминкой, используя только якорный тег и мощь CSS.

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

Новая типографика для веба. Microsoft демонстрирует возможности OpenType

Reading time2 min
Views7K
Microsoft опубликовала демо-страницу улучшенной типографики для формата OpenType. Это альтернативные глифы, лигатуры, кернинг, дроби, малые прописные и минускульные цифры. Эффекты видны, если наводить на текст мышкой. Демо хорошо работает только в браузерах с поддержкой OpenType, сама Microsoft рекомендует IE10+ и Firefox 8+. В других браузерах могут проявиться не все эффекты, это ещё зависит от операционной системы.


Альтернативные глифы и малые прописные

С Microsoft можно согласиться — OpenType действительно поднимает оформление текста в вебе на новый уровень, близкий к типографскому. Возможности этого формата явно превосходят @font-face.
Читать дальше →

Selectik — стильные селекты

Reading time2 min
Views13K
Веб-дизайнеры любят стилизировать стандартные элементы форм. Потом эти элементы приходиться реализовывать нам — верстальщикам.

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

Естественно, после всего этого я решил изобрести свой велосипед.

Пример разработан без дополнительных картинок с помощью CSS3. Демо-страница с песочницей здесь.
Читать дальше →

Как Google тестирует ПО

Reading time9 min
Views40K
Прослушав вебинар «How Google Tests Software» я был так вдохновлен, что решил записать некоторые тезисы. Эта статья и есть мой конспект. Прежде всего, я должен внести ясность относительно ее содержания. Это не дословный перевод. Здесь описаны только те вещи, которые показались мне важными. Проще говоря, здесь описано не все, что прозвучало в вебинаре. Так же существует вероятность, что я понял что-то не до конца или даже понял неправильно. Поэтому горячо рекомендую прослушать вебинар самостоятельно.
Его ведет Джэймс Витакер, который в данный момент занимает пост технического директора по тестированию ПО в Google. Джэймс совместно с коллегами готовится выпустить одноименную книгу. В ней можно будет получить исчерпывающую информацию о том, как проводят тестирование GoogleMaps, Google+, ChromeOS, Android и т.д…
Читать дальше →

Cтреловидные формы элементов с помощью CSS3

Reading time5 min
Views10K


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

Итак, начнем.

Делаем управляемый закат с помощью CSS3 и javascript

Reading time7 min
Views6.9K

Небольшая демонстрация возможностей CSS3 на примере. Данный пример затрагивает свойства border-radius, box-shadow и linear-gradient.

head

Прошу расценивать предлагаемый код не в качестве готового решения, которое требуется использовать в своем проекте, а лишь как демонстрация. Хотя, при должной доработке, вполне возможно подойдет для какой-нибудь задачи.
Для тех, кому лень читать весь текст статьи я сразу прилагаю ссылку на рабочий пример. Солнце можно двигать по экрану, при его приближении к горизонту создается имитация заката. После полного ухода солнца за линию горизонта на небе выплывают звезды.
Пример тестировался в последних версиях современных браузеров — IE9, Chrome 16, Opera 11.60 и Firefox 8. Как ни странно, но шустрее всего на моей машине пример работал в браузере IE9, чуть похуже обстояли дела в браузере Firefox. В Chrome и Opera заметны некоторые фризы при движении.

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

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

Reading time20 min
Views316K
Идеальная вёрсткаВы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

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

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

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:
  • 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
  • 2015/08/10: актуализирован список исключений для CSSLint
  • 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
  • 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
  • 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
  • 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
  • 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
  • 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
  • 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
  • 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.


Далее с примерами - как проверить html, даже если вы ничего не понимаете в вёрстке.

Принцип цикады и почему он важен для веб-дизайнеров

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

Однако, в зависимости от вида, каждые 7, 11, 13 или 17 лет периодические цикады одновременно массово вылезают на свет и превращаются в шумных летающих тварей, спариваются и вскоре умирают.

Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?
Читать дальше →

Много нового про семантическую разметку от Яндекса

Reading time2 min
Views5.5K
Сегодня у Яндекса есть сразу несколько новостей из мира семантической разметки и передачи данных о сайтах.

Начнём с крупного. Яндекс вошёл в состав Schema.org Working Group и теперь участвует в разработке стандартов семантической разметки для всего мира. В Помощи теперь можно найти перевод оригинального руководства по началу использования семантической разметки Schema.org – Getting Started, с небольшими дополнениями.

Теперь о современном. Роботы Яндекс.Видео научились распознавать тег video спецификации HTML5. Теперь эта разметка учитывается наравне с остальными. Как и в случае со schema.org, данный тег позволяет отметить несколько видеороликов на странице.

Немного о вкусном. Мы начали поддерживать разметку Schema.org для рецептов. Владельцам кулинарных сайтов нужно просто разметить рецепты на своём ресурсе с помощью схемы Recipe (http://schema.org/Recipe), и их сниппеты в результатах поиска Яндекса автоматически станут такими же наглядными:



А также про hCard и вакансию в Яндексе

Изменение ширины элемента с «шагом» в несколько пикселей

Reading time4 min
Views6.3K
Заранее оговорюсь, что чистым CSS здесь, к сожалению, обойтись не получится: Firefox и IE8+ слишком точно (да-да, в данном случае это плохо) производят вычисления ширины блоков. Однако для этих браузеров дописывается нехитрый скриптик в пару строк, если таки надо достичь идеала, хоть это и портит всю прелесть.

Для тех, кому лень читать всё, ссылка на окончательный вариант: jsfiddle.net/XeFTr/11

В чем суть?


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

Как это работает?


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

Эту штуку описывал в лебедевском скринкасте Сергей Чикуёнок еще в 2008 году, в контексте исправления бага с «прыгающими» блоками в IE6. Однако я, к своему удивлению, так и не нашел описания этой презабавной технологии на Хабре.

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

Как мы попали в Кремниевую Долину

Reading time5 min
Views5.7K
image

Все началось в середине сентября. На тот момент, наш стартап работал уже пол-месяца и все, что мы собирались делать в публичном плане – это участвовать в предстоящем в Кишиневе Startup Weekend’e, который намечался на 11-13 ноября. Просматривая организаторов данного мероприятия, у меня в голове была только одна мысль – найти кого-нибудь, кто помог бы нам попасть в Кремниевую Долину. Тогда эта была всего лишь мысль и о том, каким образом и как скоро она реализуется я даже и представить не мог.
Читать дальше →

DocHub.io — удобный справочник HTML, CSS, Javascript

Reading time1 min
Views14K
Интернет наполнен огромным количеством документации для веб-разработчиков. Но, к сожалению, использование большей части документации довольно неудобное. Для примера, возьмем Mozilla Developer Network (MDN). Сайт Mozilla Developer Network предлагает большой объем документации по CSS, JavaScript, HTML, SVG и т.д., но навигация по нему утомительна — нет никакого глобального меню и поиск не столь удобный.

Это привело разработчика Рафаэль Гарсия создать instaCSS — быстрый способ просматривать документацию CSS от MDN. Благодаря хорошей функции поиска и чистому, простому дизайну с хорошим глобальным меню instaCSS стал хитом по мнению читателей Hacker News. В связи с большим спросом, Гарсия перевел проект на более широкий домен DocHub.io и расширил поиск по CSS, HTML, JavaScript и DOM.
Читать дальше →

Делаем приватный монитор из старого LCD монитора

Reading time2 min
Views978K


Вы наконец-то можете сделать кое-что со своим старым LCD монитором, который завалялся у Вас в гараже. Превратите его в шпионский монитор! Для всех вокруг он будет выглядеть просто белым экраном, но не для Вас, потому что у Вас будут специальные «волшебные» очки.

Всё что Вам нужно – это пара старых очков, нож для бумаги и растворитель для краски.

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

Фоторама

Reading time4 min
Views55K


Около полугода назад я написал простой джейкверный плагин для галерей на сайтах. Назвал его Фоторамой и выложил в интернет. По клику кроссфейдом показывалась следующая фотография, клик с шифтом мотал назад — вот и всё.

За эти месяцы Фоторама повзрослела, обзавелась сайтом с логотипом и, думаю, теперь можно написать о ней на Хабре.
Читать дальше →

Information

Rating
Does not participate
Location
Киев, Киевская обл., Украина
Date of birth
Registered
Activity