Search
Write a publication
Pull to refresh
0
Евгений @RuKoolread⁠-⁠only

User

Send message

20 сервисов и советов для веб разработчиков

Reading time6 min
Views5.7K
Ниже представлены полезные ссылки и советы исходя из моего личного опыта. Старался указать только то что может быть новым для разработчиков, поэтому ресурсов типа FireBug и других общеизвестных в списке нет.

NounProject — лучшая и наибольшая коллекция SVG картинок

В связи с тем что кроссбраузерная поддержка SVG не идеальна, я делаю следующим образом, нахожу на этом сайте SVG картинку которая мне нужна, открываю ее в блокноте и в ручную корректирую цвет и размеры (иногда и саму картинку), потом открываю файл с картинкой в браузере, делаю скриншот картинки, обрезаю ее в фотошоп и сохраняю в gif с наимешьшими параметрами. Вывод — наилучшее качество картинки, так как качество SVG не изменяется при уменьшении или увеличении, и занимает наименьшее количество места, и как следствие, отсутствие дефектов, как например, размытые края, неполное окрашивание когда цвет изменяется заливкой и тд.

Codebeautifier — кроссбраузерная подготовка CSS файлов c уменьшением веса самого CSS файла.

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

Iterm2 — лучшая консоль для mac OS и замена страндартному терминалу.

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

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

Web developer — плагин для Firefox дающее множество возможностей.

Например, смотреть/вносить/редактировать куки, просматривать топографию для симметрии, инфо по картинкам и прочее.

ColorZilla — плагин для firefox позволяющий кликнуть мышкой на любой точке экрана и получить код цвета.

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

DataUrl — генерирует код из изображения.

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

Pjax — плагин которой позволяет изменять содержимое страницы без ее перезагрузки.
Читать дальше →

Восстановление расфокусированных и смазанных изображений. Практика

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

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

Ниже показан результат обработки реального размытого изображения (не с синтетическим размытием). Исходное изображение было получено камерой Canon 500D с объективом EF 85mm/1.8. Фокусировка была выставлена вручную, чтобы получить размытие. Как видно, текст совершенно не читается, лишь угадывается диалоговое окно Windows 7.



И вот результат обработки:



Практически весь текст читается достаточно хорошо, хотя и появились некоторые характерные искажения.

Под катом подробное описание проблем деконволюции, способов их решения, а также множество примеров и сравнений. Осторожно, много картинок!
Читать дальше →

H.264 декодер на JavaScript

Reading time1 min
Views7.9K
Прежде чем отправить публикацию, крепко задумался, какой блог выбрать: JavaScript или Ненормальное программирование. Так или иначе круг задач, которые можно решить на детище Нетскейпа расширяется с каждым днем.

Так например разработчики из команды Mozilla смеха ради сделали H.264 декодер на JavaScript. Любопытно, что скрипт при этом не был написан вручную.

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

20 вещей, которые я должен был знать в 20 лет

Reading time3 min
Views718K
1. Мир пытается оставить тебя тупым. Начиная от банковских платежей и процентов и заканчивая чудо-диетами — из необразованных людей легче вытрясти деньги и ими проще управлять. Занимайтесь самообразованием столько, сколько можете — для того, чтобы быть богатым, независимым и счастливым.
Читать дальше →

Кроссбаузерный скроллинг

Reading time1 min
Views15K
На сегодняшний день эффекты при скроллинге набрали достаточно большую популярность (так называемый параллакс). Но, к сожалению, эти эффекты нейтивно не поддерживаются мобильными устройствами. Не так давно Mark Dalgleish предложил свой вариант решения этой проблемы:

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

ООП в JavaScript

Reading time4 min
Views40K
Хочу представить вам функцию-конструктор классов createClass.
Чем хорош этот конструктор:
1. Сам код выглядит более читабельным и понятным
2. Поддержка множественного наследования
3. Поддержка абстрактных методов
4. Наследование статических методов и свойств класса
5. Умный метод instanceOf (проверяет по всей цепочке классов)
Читать дальше →

Блокировка мобильных паразитов

Reading time2 min
Views163K
Многие пользователи мобильных телефонов жалуются на то, что с телефона списываются большие суммы, на то, что им приходит раздражающая ненужная реклама, на то, что операторы постоянно подключают им ненужные сервисы, которые ещё и начинают списывать средства, если их вовремя не отключить (музыка вместо гудков, погода и т.п.).

Но очень немногие знают, что все эти проблемы можно просто и быстро устранить.



Достаточно позвонить в абонентскую службу (лучше это делать прямо с мобильного телефона) и попросить включить несколько бесплатных услуг.
Читать дальше →

Клавиатурные сокращения с Javascript

Reading time1 min
Views1.9K
Mousetrap — маленькая библиотека (1.4 KB) для обработки клавиатурных нажатий.

// single keys
Mousetrap.bind('4', function() { highlight(2); });
Mousetrap.bind("$", function() { highlight(3); }, 'keydown');
Mousetrap.bind('x', function() { highlight(4); }, 'keyup');

// combinations
Mousetrap.bind('command+shift+K', function() { highlight(7); });
Mousetrap.bind(['command+k', 'ctrl+k'], function() { highlight(8); });

// gmail style sequences
Mousetrap.bind('g i', function() { highlight(11); });
Mousetrap.bind('* a', function() { highlight(12)});

// konami code!
Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([15, 16, 17]);
});

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

Работает в Internet Explorer 6+, Safari, Firefox, Chrome (с включенным Vimium не работает).

Пробуйте — craig.is/killing/mice

Изучить Github за 15 минут

Reading time1 min
Views127K
TryGit — интерактивный обучающий курс по Github в стиле Codecademy. Курс состоит из 25 мини-уроков, которые знакомят пользователя с базовыми понятиями и основными командами git, при этом ученик своими руками вводит команды в консоль, смотрит результат и читает сопровождающие надписи с объяснением происходящего.



Вот таким в будущем должно стать обучение в школах!

Конечно, 15-минутное введение не заменит полноценного учебника. Для обучения можно рекомендовать бесплатную книгу Pro Git и видеокурс Getting Git.

Софтверные лицензии в двух словах

Reading time1 min
Views2.9K
Если нужно быстро посмотреть, что разрешает/запрещает та или иная лицензия, то никто не объяснит это быстрее, чем новый поисковик-справочник по лицензиям tl;drLegal. Особенно ценным этот ресурс будет для тех, кто не привык разбираться в длинных юридических текстах.

Если кто не знает, tl;dr означает “Too Long; Didn't Read”.

Для каждой лицензии указаны основные тезисы: что лицензия разрешает, что запрещает и какие обязанности накладывает на пользователя. Плюс краткое резюме и ссылка на полный текст. Сейчас в списке на сайте 24 лицензии, но список пополняется буквально с каждым часов: ещё шесть часов назад было 22.

Поисковик пока официально не запущен, дата запуска — 9 июля, так что просьба относиться со снисхождением к возможным неточностям. В любом случае, идея отличная, в стиле упрощённой версии ToS на сайте 500px.com.

FLAC-декодер на Javascript

Reading time1 min
Views6K
Ребята из Official.fm Labs задумали совершить настоящую звуковую революцию в вебе: две недели назад они выпустили FLAC.js — декодер аудиофайлов формата FLAC (Free Lossless Audio Codec), а также Aurora.js — фреймворк на CoffeeScript для простого подключения декодеров и создания веб-приложений, работающих со звуком. Таким образом, через Web Audio API теперь можно слушать музыку в идеальном качестве, и все веб-приложения могут обращаться к звуковой карте стандартным образом.

Демо

JavaScript уже так могуч, что браузер декодирует звук, потребляя менее 5% ресурсов CPU. Можно представить, какие крутые звуковые редакторы, миксеры и прочие аудиоприложения появятся в вебе в ближайшее время.

Оповещение о новых письмах в Gmail по SMS средствами Google Calendar + Google Apps Script

Reading time4 min
Views114K
Увы, но этот способ перестанет работать с 27-го июня 2015, т.к. Google отключает функцию sms-оповещений для календаря.
support.google.com/calendar/answer/45351?hl=ru

Важно! SMS-оповещения будут отключены 27 июня
С 27 июня 2015 года вы больше не будете получать SMS-оповещения от Google Календаря. Функция SMS-оповещений была внедрена ещё до широкого распространения смартфонов. Однако современные мобильные устройства позволяют получать оповещения в более удобном формате и даже в офлайн-режиме.
Для просмотра оповещений вы можете использовать приложение календаря, которое было установлено на смартфоне по умолчанию, либо скачать Google Календарь для Android или iPhone. Подробнее об оповещениях…
Примечание. Это изменение не коснется пользователей Google Apps for Work, Education и Government.




Хочу поделиться с Харбра-обществом полезным, с моей точки зрения, лайвхаком: уведомления по SMS о новой почте в ящике Gmail. Реализуется это небольшим скриптом, который живет и работает в Google Drive (бывшие Google Docs).

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

Напоминание: Тема письма @ дата и время

Подробности реализации, как всегда, под «катом».
Подробности

Yeoman.io

Reading time3 min
Views19K
На конференции Google I/O 2012 во второй части своего выступления Paul Irish представил проект yeoman.io. Главной целью которого является собрать для разработчика лучшие библиотеки и фреймворки в одном месте и создать идеальную среду для разработки за кратчайшее время.
Читать дальше →

Foundation 3

Reading time1 min
Views7K
image

Вышла третья версия фреймворка Foundation. Скорее всего вы слышали о Twitter Bootsrap. После него большинство фреймворков смотрится блекло: элементов меньше, разметка ещё нелогичней, куча багов и ничего нового. Foundation отличается в лучшую сторону:

  • Разметка более лаконичная и логичная.
  • Заточен для работы с кучей всяких устройств. Можно контролировать, как именно будет выглядеть сайт при каких параметрах экрана. Имеется очень гибкая адаптивная сетка.
  • Для всего используется `box-sizing: border-box`.
  • Неплохие наборы кнопочек, формочек, менюшек и мелких элементов.
  • Табы, галерея и модальные окошки, которые отлично работают на всех устройствах.


Пробуем
Документация и демонстрация возможностей

JPEG сжатие картинки с альфа-каналом или SVG masks

Reading time5 min
Views11K
Привет, Хабр! Недавняя статья про сжатие в png-8 с сохранение полупрозрачности, напомнила мне об одной технике, которая позволяет применять на сайтах изображения с альфа-каналом, при этом используя алгоритм сжатия с потерями — JPEG, что позволяет существенно сократить их объём.
Читать дальше →

Экосистемный подход к сборке веб-проекта с TeaCSS

Reading time5 min
Views1.4K
В этой статье я расскажу как можно организовать процесс сборки фронтэнда «от и до».

Советую начать со вводной статьи, если кто не читал.

Там я рассказывал про TeaCSS как про надмножество CSS, и это была неправда. Точнее – полуправда. И таким он был во времена своего создания (откуда и название).

Сейчас – это декларативный метаязык для генерации контента, во многом черпающий вдохновение из QML, Lisp, Clojure, Nemerle.
Читать дальше →

TeaCSS – очевидный подход к созданию стилей

Reading time4 min
Views2.3K

Введение


Хотя CSS-подобных языков не так уж и много – на слуху и на плаву сейчас и вовсе одни Sass и Less, я все же начну с ответа на вопрос «А зачем нужен еще один?».

Если коротко, то TeaCSS не плодит новых сущностей, ведь этот тот же CSS, в который в качестве языка добавили JavaScript.

У этого подхода есть свои плюсы и минусы.

Плюсы – практически никаких подводных камней. Файл tea преобразуется в JavaScript, наполненный простыми командами вывода. Этот JavaScript можно отлаживать, смотреть в FireBug и вообще его поведение предсказуемо. В этом и состоит очевидность подхода, в вебе уже и так превалирует JS, поэтому вам не придется учить ничего нового.
Читать дальше →

Конвертация PNG24/32 в PNG8 с сохранением прозрачности

Reading time1 min
Views14K


Открылся веб-сервис TinyPNG, на котором можно быстро конвертировать полноцветные PNG24 в индексные PNG8 с сохранением альфа-прозрачности. Сайт работает на известных open source утилитах, так что квантование палитры можно сделать и без него, но здесь это просто удобнее.
Читать дальше →

5 полезных методов jQuery API, о которых вы могли не знать

Reading time2 min
Views55K
В статье я расскажу о пяти методах jQuery, которые я нашел для себя полезными и о которых, по моим наблюдениям, мало кто знает.

Я с jQuery работаю уже около двух лет, но до недавнего времени не использовал эти методы, так как и без них можно обойтись. Но с ними может быть на много легче.
Читать дальше →

Яндекс.Events — сайт о событиях

Reading time1 min
Views3.6K

Вот уже 8 лет Яндекс проводит различные профессиональные мероприятия. Начиналось всё с практических семинаров по контекстной рекламе и интернет-маркетингу. Затем появилась Школа анализа данных, чуть позже — Я.Субботник. С годами рос как сам список событий, так и их география.

Сегодня мы представляем вам Яндекс.Events — сайт, где мы объединили всю информацию о наших конференциях, семинарах, школах и т.д. Мероприятиях прошедших и предстоящих, больших и маленьких, для будущих специалистов и уже состоявшихся разработчиков, верстальщиков, менеджеров и маркетологов. Анонсы, формы регистрации, видеозаписи докладов, презентации и прочие материалы — всё это теперь живёт на events.yandex.ru.



Здесь вы найдёте, например, рассказ о том, как и зачем существует Yet another Conference, доклад о слайдере с Я.Субботника в Питере, сможете зарегистрироваться на предстоящие «Горизонты цифрового маркетинга» в Одессе или посмотреть, как идет автосборка iOS-проектов в Яндексе.

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

Команда Яндекс.Events
Увидимся в кулуарах!

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

Information

Rating
Does not participate
Location
Заречный (Пензенская обл.), Пензенская обл., Россия
Date of birth
Registered
Activity