Monthly Archives: November 2014

X-Gravatar: HTML5 Web Component for Displaying Gravatar Profiles

I’ve just added a new component to my HTML5 Web Components gallery. X-Gravatar is a custom tag, using Gravatar‘s REST API to display Gravatar profiles.

thumb

Usage

<acidjs-xgravatar mode="full" hash="14804fe005220d42595e1c2adb65c658"></acidjs-xgravatar>
<acidjs-xgravatar mode="compact" hash="johnsmith"></acidjs-xgravatar>
<acidjs-xgravatar mode="minimal" hash="johndoe"></acidjs-xgravatar>

HTML Attributes

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

  • hash – Required username of the gravatar profile to show or MD5-hashed email of the user. You can create MD5 hashes here online. Examples: johnsmith or 14804fe005550d42595e1c2adb65c234.
  • mode – Optional display mode of the component, one of the following "full" (default), "compact" or "minimal".
  • width – Optional width of the component in pixels or percentage. Default: "100%".
  • height – Optional height of the component in pixels Default: "auto".

JavaScript Methods, Getters and Setters

The component does not expose any custom methods, setters or getters and all standard JavaScript APIs are supported.

Have a great weekend, and don’t forget to check the demo on this page.

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

X-Icon: HTML5 Web Component for Font Awesome

AcidJs.XIcon is another (hopefully) useful HTML5 Web Component for generating icons as custom tags using the amazing icon set of Font Awesome.

thumb

Usage

<acidjs-xicon name="home"></acidjs-xicon>
<acidjs-xicon name="spinner" spin size="2x"></acidjs-xicon>
<acidjs-xicon name="shield" rotate="90" size="3x"></acidjs-xicon>
<acidjs-xicon name="facebook" flip="horizontal" size="3x"></acidjs-xicon>

HTML Attributes of the Tag

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

  • name – Name of the icon. Check the currently available icons here. If name is not set, a warning will be displayed.
  • spin – The setting of the attribute makes the icon spin continuously.
  • size – Width and height of the icon. Available sizes: "lg" (large, +33%), "2x", "3x", "4x" and "5x". The default size is 16px or 1em.
  • rotate – The setting of the attribute will rotate the icon by the degree value set. Possible values: "90", "180" or "270".
  • flip – Flip the icon horizontally or vertically. Possible values: "horizontal" or "vertical".

Check the code of the demo page or the distribution to see how to use X-Icon and have an awesome day!

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

 

Молебените на БПЦ за успех на Свети Кубрат Пулев срещу Сатаната Кличко

Как БПЦ не препоръча на всеки богобоязлив мирянин из дълбоко религиозната държава Тъпостан, да сложи икона на Света Андреа между чреслата си, и с лиготочене по скромната ѝ пазва, да се помоли за успех на свети Кубрат Пулев срещу нечестивецът Владимир Кличко?

Следващият път БПЦ не бива да забравя да отправи и гореща молитва, съпроводена от литийно шествие и за други свети професионални боксьори и кечисти – Скалата, Ракиши, Стив Остин и т.н. Те също са смирени борци срещу нечестивите сили на Злото.

И последно. Като изтъкнати евромайданисти и евроатлантици, не е ли по-разумно да подкрепим Кличко, че току-виж добрите и праведни другари от ЕС и #дансwithme ни анатемосали като антиглобалисти и комунисти?

Panel Bar – New HTML5 Web Component

The latest addition to my constantly growing collection of HTML5 Web Components has just been released. X-Panel is a HTML5 Web Component, built on top of Mozilla’s X-Tags which makes possible the creation of full-featured panel bars and drawers fun and without any JavaScript as custom tags.

thumb

The Markup

<acidjs-xpanel multiple>
    <acidjs-xpanel-drawer icon="icons/pdf.png" label="PDF Files" open>
        Drawer content...
    </acidjs-xpanel-drawer>
    <acidjs-xpanel-drawer icon="icons/doc.png" label="MS Word Documents">
        Drawer content...
    </acidjs-xpanel-drawer>
    <acidjs-xpanel-drawer icon="icons/xls.png" label="MS Excel Sheets">
        Drawer content...
    </acidjs-xpanel-drawer>
    <acidjs-xpanel-drawer icon="icons/txt.png" label="Text Files">
        Drawer content...
    </acidjs-xpanel-drawer>
</acidjs-xpanel>

HTML Attributes of the <acidjs-xpanel /> Tag

Apart from the standard HTML attributes, the tag also supports the following component-specific attributes:

  • multiple – If attribute is set, multiple open drawers will be enabled. By default, expanding a drawer collapses other expanded drawers.
  • width – Width of the drawer. The default width is "100%".
  • height – Height of the drawer. The default height is "auto".

HTML Attributes of the <acidjs-xpanel-drawer /> Tag

Apart from the standard HTML attributes, the tag also supports the following component-specific attributes:

  • icon – URL to an optional drawer icon.
  • label – Drawer label text.
  • height – Optional height of the drawer. If the content exceeds the height specified, scrollbars will appear.
  • hint – Optional hint text for the drawer header.
  • open – By default all drawers are closed. Setting the open attribute will render that drawer open by default.

Check the code of the demo page or the distribution to see how to use X-Panel and have a great weekend!

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

Моделът #Кой би обезсърчил Оруел, Хъксли и Бредбъри. Може би.

Дали Оруел, Хъксли и Бредбъри биха стигнали до модела “#Кой”? Ако това се беше случило, “1984”, “Прекрасният нов свят” и “451 по Фаренхейт” биха звучали различно.

#Кой не промотира четенето. За него е важно служителите му просто да знаят имена на книги, с които да впечатляват. Четенето на книги предполага вникване в тях, а това е опасно, защото #Кой ще започне да губи служители.

#Кой си няма име, цвят или убеждения, защото знае, че има проли, които трудно забравят и не се поддават на промиване на мозъка. В същото време, #Кой е прекалено страхлив да се разправи физически с лошите. Не за друго, а защото е загрижен за имиджа си. #Кой разчита на вътрешните търсения, противоречия и съмнения на субектите си, дори и на тези, които работят за него. #Кой знае, че не всички са убедени, че Океания не винаги е била във война с Ийстазия, и не би си позволил директно да декларира обратното.

#Кой е достигнал до философията, че няма нужда от новговор. Напротив – #Кой въвежда сложни неологизми като “#протестър” и “#контра”, дава ново значение на думи като “колорадски бръмбар” и “комунист”. Макар, че #Кой е стар, колкото лицемерието знае, че трябва да е съвременен, затова тези неологизми задължително  се представят като модерни хештагове. Животът на тези думи от неологизми до архаизми е кратък – точно колкото трябва.

#Кой не разбира от изкуство, но знае как да го редефинира под форми, разбираеми за своите служители или обикновените еснафи. #Кой превръща обикновената интелектуална клизма върху паметник във висша форма на изкуство.

Децата на #Кой – стотици интелектуално безпризорни са моделирани във влиятелни блогъри и протестъри, неразбиращи (или съгласни с факта), че в един момент ще бъдат просто правещи си селфита със злите символи на комунизма търсещи внимание.

#Кой не приема дозата си сома всеки ден, защото е ранобуден, и работи във фабриката за сома, предлага я безплатно с изстрадалото, почти божествено излъчване на емисар на доброто. Отказващите да я приемат са поставяни в “онези списъци”, превръщаши ги в част от лесносмилаемата, публична част на модела #Кой.

#Кой търпеливо модерира публичните коментари за себе си, и допуска само тези, които критикуват модела #Кой и не се опитват да го анализират. За непросветените и грозните #Кой трябва да остане абстракция, неподлежаща на разбиране. Онези, които се опитват да анализират модела #Кой биват блокирани и отблъснати с мълчание.

#Кой винаги има по две театрални трупи, и внимава да няма преливане на актьори от едната в другата трупа. В държавата България тези трупи се наричат #дансwithme и #контри.

#Кой, обаче е достатъчно глупав, за да си мисли, че когато той не те вижда (понеже те е блокирал), ти също не можеш да го видиш (в известен смисъл е глупав като чудовището Бъгблатер на Дъглас Адамс). Това отговаря и на въпроса дали Оруел, Хъксли и Бредбъри биха се сетили за модела #Кой. Именно защото онези са тези, които не само гледат #Кой, но и го виждат.