16 сентября 2014 г.

Макет резиновой таблицы

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

Размер html таблицы зависит от размера содержимого. Поэтому таблицу почти не возможно вписать в какой-либо контейнер. Отдельной проблемой может стать скролл, размер которого не контролируется.


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

Основное ограничение, это не учитывается высота "резиновой" колонки, потому что он находится в блоке с абсолютным позиционированием. Этот эффект в примере прикрыт обрезанием длинных строк. Чтобы преодолеть это ограничение нужно добавить немного кода на js.
Комментариев нет :
Ярлыки:

6 сентября 2014 г.

Погружение в Angular

Сухим текстом представляю мои впечатления от знакомства с Angular.
До этого работал с Backbone и обратить на него внимания меня вынудили разговоры с командами которые его используют.
Чтобы лучше понять на каких принципах построен Angular реализовал небольшое приложение, которое разместил на github-е.

Что сразу бросилось в глаза.
Динамика интерфейса приложения скорее всего будет в верстке. Если же, разработчик не испытывает отвращение к "декларативному подходу".
Благодаря использованию директив обычная верстка перейдет в разряд шаблонов. Встроенная логика - дополнительный синтаксис, на подобии  SQL, LINQ. В таком примере
ng-options="key as value for (key, value) in categories"
часть после for относится к источнику, выражение до for определяет, какое значение использовать в качестве атрибута value опции, а какое в качестве текста опции.
Параметризация шаблонов с возможностью двунаправленного биндинга поддерживается изначально.
<h3>{{[«Добавление»,«Изменение»][(item.id>0)+0]}} записи</h3>
По слухам, в шаблоне не работает тернарный оператор, поэтому в этом примере он был заменен такой конструкцией.

Достоинства:
  • Не требует зависимостей. В Backbone, для примера, потребуется jquery и underscore;
  • Встроенная реализация привязки данных. В Backbone для аналогичного функционала придется создать удобный подсобный инструментарий или использовать стороннее решение (epoxy.js, ribs);
  • Приемлемая архитектура построенная на патернах.
Недостатки :
  • Не  имеет 100% эквивалентной замены функционала jquery для работы с DOM. К примеру, метод $element.find() работает только с названиями тегов и не работает с селекторами атрибутов (elem.find('[type=submit]'));
  • Из личного, не так просто взять и вставить в нужное место вьюшку как в Backbone. Надо все обставить в специально "приготовленные" для этого директивы.
Сравнение с Backbone
Backbone по содержанию напоминает фреймворк кастомных MV* фреймворков. Необходимо самому реализовать вывод представления (метод render()). Можно использовать любой другой шаблонизатор по мимо underscore.template и т. п. Как связать атрибуты модели к вьюшке кодер решает сам. Т.е. то что будет использовано под "вывеской бекбона" будет удовлетворять вкусу и взглядам на правильный подход конечного разработчика. Поэтому необходимо, что бы у разработчика были представления о best practise и способах их достижений:
  • Декларативное описания логики в шаблоне или перенос их в js код представления;
  • Отдельное представление для каждой коллекции или коллекции будет вставлятся в DOM представления;
  • Одна модель - одно представление или у одной модели может быть много представлений.
Разные слои абстракции. 
Backbone: Backbone.Events, Backbone.Model, Backbone.Collection, Backbone.View
под девизом "расширяй и наследуй".
Angular: service, fabric, module, controller, directive, filters Внедрение зависимостей.
В Angular роль бэкбоновской модели выполняют scope и сервисы, коллекции так же размыты.

Оффтоп
В Backbone для представления списка однотипных элементов имеется абстракция - Backbone.Collection (коллекции). Когда мне приходилось реализовывать коллекцию связанную с моделью представления в котором она размещается, всегда терзался вопросом правильной реализации. Вплоть до того, что стал коллекции выносить в отдельные дочерние представления. Ситуация осложнялась, тем что нет в Backbone механики для взаимодействия модели представления с моделями коллекции.

В последнее время у меня появилась мысль, что коллекции в Backbone (Backbone.Collection) получили ход, благодаря тому что в модели поддерживаются только plain объекты (без доступа к дочерним под объектам). Но пока эта мысль у меня развивается.


Комментариев нет :
Ярлыки: ,

1 сентября 2014 г.

Находки в сети за август

Самые интересные проекты и статьи которые я видел и читал за месяц. В основном по веб разработке и всему такому.

Сжималки и переcжималки графики
https://tinypng.com/
http://www.jpegmini.com/
http://pnggauntlet.com/

Фотосток со свободными изображениями
www.raumrot.com/10/

Неистовый sublime
Что делать с sublime-ом если вы не кодер
http://xakep.ru/howtos/sublime-text-not-for-coding/
Полезное описание, как прикрутить Package Control
Описание хоткеев
http://nosensus.com/sublime-text-3-hot-keys/

Язык программирования
LENS - встраиваемый язык программирования для .Net
https://github.com/impworks/lens/

API virustotal.com
https://www.virustotal.com/ru/documentation/public-api/
https://www.virustotal.com/ru/documentation/browser-extensions/

Node.js
Электронные таблицы
https://ethercalc.org/
sublime подобный редактор
https://github.com/slap-editor/slap
Изменения в Express 4.0
http://scotch.io/bar-talk/expressjs-4-0-new-features-and-upgrading-from-3-0

Css3 animation library
http://anijs.github.io/

Подробнее о strict mode в js
http://stepansuvorov.com/blog/2014/07/strict-mode/#more-1730
Unit tests
http://xakep.ru/howtos/js-unit-testing/

.gitconfig
http://stepansuvorov.com/blog/2014/02/gitconfig/#more-1131

Верстка почтовых рассылок
Теги поддерживаемые gmail
http://xakep.ru/news/gmail-tags/

На карандаш:
AndroidManifest.xml разрешения которые используют зловреды:
"android.permission.INTERNET"
"android.permission.ACCESS_NETWORK_STATE"
"android.permission.READ_PHONE_STATE"
"android.permission.RECEIVE_BOOT_COMPLETED"
"android.permission.WAKE_LOCK"
"android.permission.WRITE_EXTERNAL_STORAGE"
"android.permission.READ_EXTERNAL_STORAGE"

Ссылки на страницы с историей использования сервисов:
https://www.youtube.com/my_search_history
https://www.youtube.com/feed/history
https://history.google.com/history&hl=ru

Список спецификаций моделей mac mini
http://support.apple.com/kb/HT3476
Комментариев нет :
Подписаться на: Сообщения ( Atom )