Хабрахабр: Web-разработка / Блог / Захабренные Голосов: 1 Адрес блога: http://habrahabr.ru/blog/webdev/ Добавлен: 2008-06-12 19:52:21 блограйдером ZaiSL

Несколько интересностей и полезностей для веб-разработчика (выпуск 4)

2013-09-27 21:55:42 (читать в оригинале)

Доброго времени суток уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Pace.js — это самый простой способ (документация здесь) добавить к вашему проекту прогресс бар. Для Pace существует несколько тем, которые описываются только на CSS. От Hubspot есть еще два универсальных проекта на GitHub: Vex и Messenger — «Dialogs for the 21st century» и «Alerts for the 21st century» соответственно. Рекомендую.

Flat UI Free 2.1
Популярный информационный ресурс Designmodo опубликовал на GitHub обширный набор элементов интерфейса в стилей трендового плоского дизайна. Об этом еще в марте писал хабраюзер ilya42. А на этой недели проект обновился до версии 2.1. Теперь в Flat UI есть поддержка Bootstrap 3, появился ряд новых элементов, иконок, обновилились шрифты. Количество старов уже больше 5000.

Framer
Потрясающее изобретение разработчика Koen Bok. Framer — это бесплатный инструмент для прототипирования интерактивных и анимационных интерфейсов. Приложение синхронизируется с Photoshop, нарезает слои макета на .png (конечно же для верстки придется немного порезать руками, но все зависит от педантичности дизайнера к макету) и все верстает на z-index и trasnform matrix3d. А интерактив и анимацию дизайнеры добавят с помощью этого простого синтаксиса прямо в браузере (к сожалению только Chrome). PSD.Logo, PSD.OverviewButton — это имена PNG файлов. Говоря о разработчике Framer, хочется также упомянуть про его проект Cactus — генератор статистических сайтов на Python использующий Django template. Читать дальше →

---

SLI — быстрое создание мультиязычности на сайте

2013-09-27 09:20:21 (читать в оригинале)

Доброго времени суток Хабрачеловек! Публикую пост по просьбе программиста ganjar. Он помог нашему интернет магазину быстро сделать мультиязычность этим самым SLI, о котором пойдет речь. В комментах он ответит на все все вопросы.

SLI (Site Language Injection) — PHP скрипт для быстрого создания мультиязычности на сайте.

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

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

---

Pixel perfect верстка

2013-09-26 18:22:11 (читать в оригинале)

Я веб-разработчик с опытом работы 2 года, работаю в firefox с firebug. Верстаю по технике Pixel-perfect. Почему?

• Быстрее создается страница, чем когда бегаешь между браузером и PSD.
• Гораздо качественнее получается результат, от чего и ваш клиент в восторге аж придраться не к чему.
• Банально удобнее видеть макет и тут же позиционировать элемент под ним.

Раньше я размещал изображение Html кодом. Но как неудобно выделять элемент в firebug-е если поверх всего лежит изображение. Приходилось каждый раз лезть в стили и прятать картинку. Pixel-perfect plugin для firefox почему-то не работал.
Тогда появилась идея создать скрипт, который будет прятать по short-cut(hotkey)-ю изображение. И пока создавал скрипт появлялись новые идеи для модернизации удобства использования. В итоге получился: Pixp

После создания я смог его протестировать только на одном живом проекте, так что возможны баги, ну и так как это мой первый публичный проект для всех, прошу строго не судить. Однако прошло уже не мало времени как я ушел в back end, а мои друзья верстальщики продолжают работать используя данный скрипт.
Лично для меня процесс верстки стал гораздо удобнее. И доказывать клиенту что этот элемент расположен правильно, теперь не составляет труда. Так как ваш клиент также может использовать скрипт, не устанавливая доп. ПО.
Читать дальше →

---

Что делать, если вы немножко SharePoint, и как с этим жить?

2013-09-26 16:45:20 (читать в оригинале)


Так сложилось, что моя работа последние 6 лет связана с Microsoft SharePoint Server. В этой статье я не хочу выяснять хорошо это или нет, но я бы хотел помочь тем, кто уже выбрал этот путь или только присматривается к нему. Учитывая, что SharePoint почти не преподают в вузах, самостоятельно начать работать с данной технологией довольно трудно. Чаще картина следующая: компания берёт программиста .Net и начинает его прокачивать.

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

Путь программиста

---

SVG.js — достойный конкурент Raphaël

2013-09-25 16:24:52 (читать в оригинале)



Доброго времени суток уважаемые хабражители. Хочу поделиться с вами одной замечательной находкой на GitHub — SVG.js — удобная манипуляция и анимация SVG. Хочется сказать о трех вещах, которые сосредоточили мое внимание на этой библиотеке. Самое простое и важное это то, что с появлением retina дисплеев SVG становиться популярнее, более нужным чем раньше. SVG.min.js весит 34кб и 9кб в Gzip, что в разы меньше Raphaël и что можно пожертвовать для дизайна и эффектов. Минифицированный SVG.filter.js размером в 3кб является прекрасным кроссбраузерным аналогом для свойства webkit-filter.

Другие плюсы SVG.js