Pull to refresh
14
0
Алексей @melik

Frontend

Send message

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

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

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

Хотя наши странные цикады весело уходят в иной мир, возникает очевидный вопрос: это просто случайность, или числа 7, 11, 13 и 17 какие-то особенные?
Читать дальше →
Total votes 696: ↑682 and ↓14+668
Comments119

Лайткуб (Фотобокс, Лайтбокс) своими руками за 300р

Reading time3 min
Views387K


Допустим, вы хотите сделать качественные фотографии гаджета для обзора или вас интересует предметная съемка в домашних условиях, но под рукой лишь недорогая мыльница. Как быть? Вам нужен лайткуб! О том, как я сделал свой недорогой, но прочный лайткуб, примеры фоток и многое другое – под катом.

Читать дальше →
Total votes 136: ↑124 and ↓12+112
Comments65

Используем console на полную

Reading time6 min
Views457K
Метод console.log() — отличный способ вывести отладочную информацию, не мешая пользователю. Но знаете ли Вы, что объект console имеет еще уйму других не менее полезных методов? Очень редко разработчики используют этот функционал, ограничиваясь неблокирующим alert'ом. Что-ж, давайте исправим это положение.

Вкусности console
Total votes 172: ↑168 and ↓4+164
Comments29

По колено в PDF. PHP парсер с плюшками

Reading time9 min
Views11K
Так получилось, что с месяц назад передо мной выросла совершенно неожиданная задача: сконвертировать PDF в html по имеющемуся шаблону. В том числе необходимо было разбивать все на страницы и выделять в них параграфы. Да и много еще чего. И все бы ничего, и обошелся бы я какой-нибудь левой библиотечкой, но кое-какие специфичные штучки-финтеплюшки, так необходимые мне, в библиотеках не нашлись. И это было печально…
Читать дальше →
Total votes 56: ↑53 and ↓3+50
Comments13

Как сделать собственный видео-плеер на HTML5 Video

Reading time9 min
Views188K
Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.


Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls.

<video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls />

Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).
Читать дальше →
Total votes 99: ↑84 and ↓15+69
Comments17

Равномерное выравнивание блоков по ширине

Reading time4 min
Views19K
Продолжая свои «css-раскопки» возникла новая идея, разобрать по косточкам ещё одну актуальную тему, которая касается равномерного выравнивания блоков по ширине. В принципе мои доскональные исследования я уже запостил у себя в блоге, но так как прошлая моя работа очень понравились Хабра-сообществу, то я решил сделать здесь небольшой краткий обзорчик этой статьи, чтобы ни одна хабра-душа не пропустили её наверняка. Так что, как говорил Гагарин: «Поехали».

В общем в задачах вёрстки периодически возникают моменты, когда появляется необходимость выровнять какой-нибудь список по ширине экрана. При этом пункты этого списка должны выравниваться равномерно, прижимаясь своими крайними элементами к границам контейнера, а расстояние между ними должно быть одинаковым.
image
Читать дальше →
Total votes 172: ↑163 and ↓9+154
Comments87

Лучший способ изучить Rails

Reading time5 min
Views200K
Доброго времени суток!

Предисловие


Когда-то я хотел познакомиться с Rails поближе, но не знал с чего начать, пока мне на глаза не попалась эта статья. Далее вы увидите перевод, смешанный с собственным опытом и свойственными мне лексическими и фразеологическими оборотами. Итак, поехали.

Введение


У меня за спиной огромный опыт работы с PHP, но сейчас я работаю Rails разработчиком. Огромную сложность для большинства людей, которые пытаются освоить что-то новое — это сам процесс обучения. Когда вы владеете каким-либо языком или фреймворком и знаете его вдоль и поперёк, переход на что-то новое не представляется необходимым.

Однако, изучение Ruby on Rails является достаточно простым занятием. Это невероятно мощный фреймворк, который имеет огромное сообщество, продвигающее его вперёд. Итак, у нас возникает вопрос: какой способ изучить Rails является лучшим? Вот он — план занятий.
Читать дальше →
Total votes 83: ↑69 and ↓14+55
Comments118

Почти кроссбраузерный beforeprint

Reading time3 min
Views3K
Для Internet Explorer впервые реализовали события beforeprint и afterprint, и долгое время он был единственным, кто их поддерживает. Затем подтянулась Mozilla, поддерживающая эти события с 6-ой версии своего браузера. Вебкит очень долго не решался на реализацию, и наконец полностью от неё отказался, отсылая нас к интерфейсу matchMedia. Опера, насколько автор смог разобраться, не реализовала ни события, ни matchMedia, хотя не исключено недостаточное гугление этого вопроса.

На основании всего вышеизложенного хочется поделиться с читателями простым плагином jQuery, который добавляет поддержку методов beforeprint и afterprint.

Читать дальше →
Total votes 22: ↑19 and ↓3+16
Comments2

Определение доминирующих тонов на изображении [v 1.1]

Reading time2 min
Views53K
После публикации прошлой статьи, я полностью забил на попытку выполнить алгоритм при помощи HSV или Lab координат. Забил на использовании библиотек цветов и вообще на сам скрипт забил.

Но что-то стало скучно и опять зачесались руки поработать с изображениями и одновременно захотелось исправить уже имеющийся алгоритм.
Скрипт: link

Читать дальше →
Total votes 113: ↑107 and ↓6+101
Comments76

Оформление изображений на CSS3

Reading time8 min
Views70K
При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.
Читать дальше →
Total votes 253: ↑245 and ↓8+237
Comments51

Расшифровка вредоносного JavaScript

Reading time3 min
Views20K
Здравствуйте, уважаемые пользователи хабра. После того, как я опубликовал данную статью, у пользователей появился интерес, и они стали спрашивать меня в ЛС и в комментариях, а как именно расшифровываются данные скрипты и что же именно такого делают данные коды.

Вступление


Так всё же, что делают эти скрипты? Чаще всего вредоносные JScript файлы устанавливаются «хакерами», для получения какой либо выгоды, а именно:
Пополнение своего ботнета, установка винлокеров, исправления файла hosts для перенаправления пользователей на фейковые сайты, ну и конечно же для обмена трафиком.

Так вот, я попробую подробно рассказать о том, как раскодировать вредоносный JavaScript и в последствии вычислить адрес, куда он ведет.
Читать дальше →
Total votes 96: ↑82 and ↓14+68
Comments24

3D кнопки с помощью CSS3

Reading time6 min
Views43K
Здравствуй, дорогой хабрадруг! Сегодня мы научимся создавать объемные кнопки CSS3! Они основаны на популярной PSD фриби от Orman Clark для его веб-сайта Premium Pixels. Мы постараемся создать копию этих кнопок с помощью CSS с минимальным количеством кода HTML.

Preview

Читать дальше →
Total votes 98: ↑73 and ↓25+48
Comments59

Подборка html/javascript/css инструментов и библиотек от SmashingMagazine

Reading time5 min
Views22K
Разработка вебинтерфейсов дело не самое легкое. Причем начать вроде бы несложно, а вот добиться совершенства поистинне проблематично. Уж очень многое необходимо учесть. Просто масса настроек и ньюансов, в которых легко запутаться и сделать что-то не так. К счастью, разработчики и дизайнеры склонны упрощать этот нелегкий труд и постоянно изобретают всяческие инструменты позволяющие сделать больше и лучше за то же самое время, а главное не погрязнуть в мелочах и состредоточиться на чем-то более важном.

Множество удобных инструментов, найденных командой популярного онлайн журнала SmashingMagazine, приводится под катом
Читать дальше →
Total votes 125: ↑123 and ↓2+121
Comments19

Оптимизируем запросы к Facebook Graph API с помощью Real-Time Updates

Reading time9 min
Views17K
Приложения для Facebook могут иметь разнообразный функционал: например, часто приложению будет достаточно информации, полученной через API, во время работы пользователя с приложением. Но что делать, если ваше приложение должно работать с самыми “свежими” данными пользователе, даже если они не открывали его уже больше месяца?

Есть два способа для того, чтобы получать данные не только во время работы пользователя с приложением:
  1. Получить от пользователя offline_access permission (сохранить “вечный” пользовательский access_token) и получать необходимые данные “по расписанию” (дергать скрипт cron-ом).
  2. Написать скрипт, который будет получать все изменения данных от Facebook, настроить и подписаться на обновления через Real-Time Updates.

Под катом вы узнаете виртуальный пример, как использование real-time updates помогает сократить за день количество запросов к API более чем в 100 раз в некоторых ситуациях. Мы напишем скрипт подписки на обновления и проверим его работу, получив данные о изменении объектов от самого Facebook.
Читать дальше →
Total votes 31: ↑30 and ↓1+29
Comments55

Параллельная загрузка JavaScript и CSS без блокирования парсинга страницы

Reading time5 min
Views66K
Известно, что следуя идеям старой школы, а именно, добавляя ссылки на JS и CSS в страницы, может обернуться большим временем загрузки страницы. Браузер отображает страницу по мере скачивания, но останавливается, если натыкается на тег script со ссылкой, до того момента, пока скрипт не будет загружен и выполнен. Сайты стали использовать всё большее количество скриптов, начальное отображение страницы занимает всё больше времени, к примеру, на этой странице, которую вы читаете, 13 скриптов, 7 из которых находятся в head'е. Ко всему прочему, некоторые браузеры по-прежнему придерживаются ограничений на одновременное количество загрузок с одного хоста.

Сразу предлагаю принять, что все JS файлы минимизированы, и передаются в сжатом виде.

Существует несколько решений, как то:
— поместить стили и скрипты прямо в страницу;
— установка аттрибутов async/defer тегу script;
— склеить все скрипты в один файл;
— помесить ссылки на скрипты в конец body;
— разместить все файлы на CDN/на разных хостах;
— свой вариант…

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

Началось всё, конечно, с того, что я взялся за один проект, и в какой-то момент мне показалось, что простенькая страница достаточно долго загружается, и посмотрел на график загрузки, и на результаты YSlow. Огонь на секунду потух в моих глазах, но зная, что может быть лучше, я полез искать,
как сделать лучше.
Total votes 94: ↑89 and ↓5+84
Comments49

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

Reading time5 min
Views47K


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

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

Читать дальше →
Total votes 238: ↑230 and ↓8+222
Comments117

Миграции баз данных — обзор библиотеки и ее использование

Reading time5 min
Views5.3K
Как вы уже могли прочесть, недавно вышла новая версия CodeIgniter, одним из нововведений которого является библиотека Migration. Один из главных ее разработчиков, Phil Sturgeon был настолько воодушевлен удобством управления версиями баз данных для Rails, что решил создать аналог такого метода для CodeIgniter, и вот, в конце-концов вы можете видеть эту библиотеку в официальной поставке.
Из этой статьи вы получите общее представление о миграциях, а также научитесь их создавать. Во второй же части, мы с вами увидим, как легко они могут быть интегрированы в ваше приложение.
Данная статья будет полезна начинающим пользователям CodeIgniter, но я надеюсь что и более продвинутые коллеги узнают об этой чудесной библиотеке и подчерпнут для себя что-нибудь новое.

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

Итак, если я сумел вас заинтересовать, то добро пожаловать под кат!
Total votes 40: ↑38 and ↓2+36
Comments22

Новая библиотека Drawing в Google Maps API V3

Reading time3 min
Views17K
Недавно в Google Maps API V3 появилась новая библиотека Drawing. Она предоставляет набор инструментов, с помощью которых пользователи могут ставить маркеры, рисовать на карте линии, круги, прямоугольники, многоугольники, чтобы выделить различные места на карте.

image

Данные инструменты могут быть использованы для сбора разной информации от пользователей. Приложение может прослушивать события и реагировать соответствующим образом, например, сделать поисковый запрос или сохранить информацию в базе данных.
Читать дальше →
Total votes 42: ↑40 and ↓2+38
Comments42

Простой способ передачи табличных данных из PHP в Excel

Reading time3 min
Views42K
К написанию данного топика меня подтолкнула одна заметка о генерации xls в PHP.
Способ, представленный в той заметке действительно очень прост, но не всегда может быть удобен.
Есть множество других способов передать табличные данные из PHP в Excel, я опишу тот, который показался мне наиболее простым и функциональным. Нужно особенно отметить, что что я не говорю о генерации xls файла, а лишь предлагаю пользователю открыть полученные данные при помощи Excel так, что пользователи не искушённые в программировании не заметят подлога.
Читать дальше →
Total votes 45: ↑36 and ↓9+27
Comments38

Расстановка точек над onmousewheel и немного о луковом супе

Reading time10 min
Views16K
Я уже писал о своих экспериментах со скроллбарами на сайтах и в веб-приложениях, но эти опыты удались не вполне. Поэтому я пока оставил идею кастомизации скроллбаров, но решил досканально разобраться с событиями, вызываемыми прокруткой колеса мыши.

Итак, задача: реализовать реакцию на события прокрутки мышиного колеса над определённым блоком, то есть не трогая «родной» скролл окна браузера. Реализация должна быть кроссбраузерной и не использовать какие-либо фреймворки.

Забегая вперёд, скажу, что этот экперимент удался вполне, а итоговый результат работает во всех десктопных браузерах, начиная с IE7 (по идее, должно работать и в шестом, но сейчас нет возможности это проверить). Также, хочу выразить благодарность поисковой системе Гугл. Без неё жизнь была бы соткана из уныния и отчаяния.
Читать дальше →
Total votes 102: ↑95 and ↓7+88
Comments40

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity