Нам нужно:

1. Установить на сайте собственные иконки с помощью SVG.
2. Они должны управляться с помощью CSS (форма, размер, заливка, эффекты в том числе и их поведение).
3. Они должны иметь маленький вес и находиться в одном месте для экономии http запросов.
4. Работать во всех основных современных браузерах.

демо

Печальное зрелище представилось сейчас моему усталому рабочему взгляду…

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

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

Сейчас мы рассмотрим методы встраивания SVG, их плюсы и минусы, а так же возможности манипулирования элементами SVG.

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

	Иконочный шрифт	IMG, background-image	Object	Inline
CSS Манипуляции	Частично1	Нет	Частично2	Да
JS манипуляции	Частично1	Нет	Да	Да
SVG анимации	Нет	Да	Да	Да
Интерактивные SVG анимации	Нет	Нет	Да	Да

Дело было вечером, делать было нечего... © С. В. Михалков
Навеяно публикацией «Как я bind`ом вирусы искал…», а конкретно этой веткой комментариев. Надеюсь, не поздно размещаю.

Сидел я и думал, телевизор Samsung, WinPhone, (а впоследствии может кофеварка и пылесос) показывают суперназойливую рекламу, надо с этим чтото делать, и раз в WinPhone и телевизор(кофеварку, пылесос) плагина AdBlock нету, то он должен быть там где ходит их трафик, на роутере.

ЧПУ станок — это станок с числовым программным управлением. Позволяет изготавливать детали по заранее подготовленной программе с высокой точностью, повторяемостью и скоростью. В этой статье пойдет речь о созданном мною намоточном станке, которому я дал название Орбитер (Orbiter).

Сфера ЧПУ плотно пересекается со сферой 3D принтинга. Мой станок имеет довольно необычную для станков ЧПУ конструкцию, так как все привыкли видеть фрезерные станки с ЧПУ, ЧПУ выжигатели, 3D принтеры, а станок, описываемый в данной статье, намоточный, а точнее станок для намотки шаров-абажуров из ниток и клея. Принцип работы — намотка на надутый вращающийся шар, который после высыхания клея спускается и вынимается.



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

Пару лет назад попалась мне на глаза статья на хабре о 3D-сканере за 30$, и очень меня эта тема заинтересовала, хотя быстро пришло понимание того, что ни о каких 30$ для качественного сканирования не может быть и речи.

Но основной плюс, который я вынес из статьи – программа для сканирования David-3D, к которой действительно есть хорошее руководство на русском языке и, что немаловажно, покупка лицензии — это последнее, что требуется, так как ограничение у бесплатной версии только на сохранение результата сканирования. Все остальное работает в полной мере, а значит вполне можно тестировать программу, настройки и свое железо сколько угодно. А если вам и результат не требуется с высокой точностью – то и вовсе без покупки лицензии можно обойтись.

Почему это важно?

На современных web сайтах объем картинок может составлять от 30% до 70% всего размера страницы. Например, объем изображений на Хабре обычно составляет несколько мегабайт.



Большинство изображений в Web'e — это фотографии. Профильные фото в соц. сетях, альбом с телефона, профессиональные снимки и т.п. Правильная стратегия и инструменты для работы с фотографиями позволят сделать сайт быстрым для посетителей.

«Пиратское» видео доклада «Пишем #b_ правильно» с конференции «WebCamp 2015: Front-end Developers Day», прошедшей 4 июля в Одессе.

Как сверстать сайт вручную «по-БЭМ» без классов «block__element__element», и на реальном примере со всеми его проблемами, а не меню-пункт_меню-ссылочка, как вы видели раньше. Без BEMJSON, BEM Tools, но с миксованием, модификаторами и разбором ошибок.

Я знаком с БЭМ давно и все эти годы встречался с множеством заблуждений и стереотипов в использовании. В докладе постарался развеять популярные мифы и рассказал о своём трехлетнем опыте внедрения и использования БЭМ и связанным с этим наступании на грабли.

Слайды: delka.github.io/talks/webcamp/2015/bem

В среде веб-разработчиков все больше распространяется знание о том, что скорость важна. Многие стараются ускориться: используют сжатие gzip, минификацию, кеширующие заголовки, сокращение запросов, оптимизацию картинок и другие.

После выполнения этих рекомендаций возникает вопрос: а что именно мы оптимизируем? Оказывается, что в большинстве случаев это время полной загрузки страницы со всеми элементами. Однако, это не совсем то, что нужно. На самом деле важно время, за которое пользователь получает «первый экран» страницы с важными функциональными элементами (заголовок, текст, описание товара и т.д.) Другими словами, важен момент начала рендеринга страницы. Здесь и возникает критический путь рендеринга, который определяет все действия, которые должен выполнить браузер для начала отрисовки страницы. С этой штукой мы и будем разбираться в статье.

Вчера утром была выпущена бесплатная кроссплатформенная виртуальная машина Oracle VirtualBox версии 5.0. Среди улучшений: drag-and-drop файлов и папок, шифрование жесткого диска на лету и многое другое. Краткий список улучшений под катом, скачать можно с официального сайта.

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

Компания Google вышла на новый уровень в продвижении своего детища — Material Design. Выпущена версия 1.0.0 open-source проекта Material Design Lite.

Это третья публикация по материалам нашей внутренней конференции Sync.NET. Первая публикация была посвящена многопоточности в .NET, вторая — реактивным расширениям.

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

Я надеялся, что это было временно. Я надеялся, что 2015 год будет годом производительности. Я ошибался. Средний вес веб-страницы возрос на 7.5% за пять месяцев, превысив 2Mb. Для этого же потребуется три 3.5-дюймовые дискеты двойной плотности!

Согласно отчёту на HTTP Archive за 15 мая 2015, статистика, собранная на почти половине миллиона веб-страниц, такова:

Предлагаю читателям «Хабрахабра» перевод публикации «Is ReactJS really fast?» из блога компании 500Tech.

tl;dr; Нет.

Большинство разработчиков считают само собой разумеющимся, что ReactJS — это супер быстрый движок по сравнению
с другими более тяжеловесными фреймворками, такими как AngularJS и EmberJS.

И даже публикация фэйковых результатов не вызывает подозрений, а ведь если копнуть глубже и проанализировать код тестов, то вы будете сильно удивлены.

Интро

Не так давно я выступал на конференции FrontendConf 2015 (РИТ++) с темой данной статьи. И при подготовке доклада начал искать информацию, а кто вообще выступал на данную тему и что есть в Сети на данный момент.

Оказалось, что информации совсем немного, более-менее можно было бы отметить доклад mikewest.org/2013/09/frontend-security-frontendconf-2013 от Mike West из компании Google, но какой-то «непентестерский» взгляд и уж совсем мало материала. И www.slideshare.net/eoftedal/web-application-security-in-front-end где тема раскрыта более детально, но выступление 2011 года. А за 4 года технологии и атаки на месте не стояли.

Долго и сложно выбирая темы, что же все-таки рассказать разработчикам фронтендов про безопасность, при этом минимум касаясь бекэнда (местами все-таки это неделимо), получился доклад, а здесь — его текстовый пересказ.

О чем вообще разговор?

А действительно, о чем тут вообще можно разговаривать? Говоря про взломы и безопасность невольно приходят в голову тезисы — слили базу, получили доступ к выполнению команд ОС на сервере, прочитали чужую переписку. Но это все — server side код. А что ж может «нагородить» фронтэндер? Главная опасность, конечно же, в обходе атакующим SOP — Same Origin Policy, главной политики безопасности браузеров, которая регулирует работу в разных Origin. Но не только, давайте разбираться.

Маленькая зарисовка на тему того, как разработать высокоуровневую архитектуру приложения.

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

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

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

Теперь нарисуйте под каждым нарисованным сверху субъектом прямоугольник с названием UI или API — это интерфейсы, к которым будет обращаться пользователь или внешняя управляющая система. Иногда UI тоже может обращаться к API. Объедините все прямоугольники с UI одним контуром и обзовите слоем представления. Объедините все прямоугольники с API и обзовите слоем сервисов.

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

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

Теперь справа нарисуйте несколько длинных прямоугольников снизу доверху и напишите в них: журналирование, конфигурация, мониторинг производительности, обработка исключений и что-то ещё, что является общей инфраструктурой (или сквозной функциональностью) для всех слоёв вашей программы.

Вы получили логическую архитектуру приложения. Разбросайте слои по серверам — получите физическую архитектуру.

Теперь вам остаётся детально проработать каждый маленький квадратик.

Маленький практический пример запрячу под кат.

Не так давно компания, в которой я работаю, наконец-то окончательно отказалась от поддержки IE8 и, как следствие, я вплотную занялся вопросом перехода с растровых иконок на векторные. Основные плюсы SVG — это масштабирование, малый вес и возможность стилизации через CSS.

Сначала я попробовал воспользоваться техникой спрайтов, просто использовав вместо растра вектор, но тут возникло две проблемы:

• Масштабирование. При произвольных размерах элементов спрайта для того, чтобы его точно отпозиционировать, приходится танцевать с бубном. И при изменении размера самого спрайта (например, при добавлении нового элемента) все может поползти.
• Возможность стилизации посредством CSS отсутствует, потому что физически SVG-картинки в HTML-коде нет.

Ранее в нашем блоге мы поднимали тему создания качественных веб-интерфейсов, в частности в одном из предыдущих топиков рассматривался вопрос правильного использования анимаций. В сегодняшнем материале речь пойдёт о технологии SVG, принципах работы с этой технологией, её плюсах и минусах. Кроме того, мы поинтересовались у отечественных дизайнеров, применяют ли они SVG, и если нет, то почему.

Это история о том, как я бросил все и начал делать игры.

Шаг нулевой — решение

Почти десять лет я занимался электронным документооборотом. Наверное, если бы мне кто-нибудь десять лет назад сказал, что я в этом настолько серьезно увязну — не поверил бы. Тем не менее, хоть предметная область и не менялась, довольно долгое время мне все это было интересно. Интересно было создавать службу поддержки вместо повинности программистов дежурить по очереди, интересно было создавать всероссийское (ух, слово-то какое пафосное) сообщество разработчиков, интересно было встречаться с сотнями неглупых людей из десятков ведущих российских компаний, от производителей бургеров до строителей АЭС. Постоянно искать хитрые решения нестандартных запросов. На этом месте часто пишут «и вот в один прекрасный день я понял...», но, на самом деле, такого дня не было.