How to minify the body of a HTML page using JavaScript

JavaScriptIn a new project where I´m working I needed a way to “minify” the  content of a HTML page in client side, via JavaScript, I mean, all the HTML code inside the tag <body> </body>.

Note: In my particular scenario, all the HTML pages that I want to minify doesn´t have JavaScript code and all css rules are inline.

I came across the next regular expressions that I used in my final code:

// Merge multiple spaces into one space
var string = string.replace(/\s+/g,’ ‘);

// Remove space between tags
var string = string.replace(/>\s+</g,’><‘);

//Remove all kinds of line breaks.
var string = string.replace(/(\r\n|\n|\r)/gm,””)

My final code looks like:

var wikiPageTemplate = wikiPageTemplate.replace(/(\r\n|\n|\r)/gm,"").replace(/\s+/g,' ').replace(/>\s+<');

References:

Hope you find this information useful!!

How to Center Anything With CSS

css3How to center a div, image, text are mainstream topics on the web without question these days, but find a nice tutorial/post that explains how to do that is no so common, well, not any more!. I came across with an excellent post on smashing magazine, called Absolute Horizontal And Vertical Centering In CSS that does that in a very easy way!. Kudos to

Inside this post you will find a link to another excellent post: How to Center Anything With CSS by  and most important, both articles cover various common scenarios, so, what are waiting for!? xD

Hope you find this information useful!

What is a client-side template?

options_0This post is an introduction to learn about client-side templates and It’s not always good to reinvent the wheel, and that applies to this article too.

I have found a very good article that explain what I wanted to write here, is called From The Server To The ClientClient-Side Templating. I truly recommend to read this article in detail if you want learn how to deliver dynamic content via client-side and maximize code reusability and maintainability using JavaScript/jQuery, HTML, CSS, Ajax, JSON and of course, client-side templates.

Also, my teammate, Osvaldo Flores, has wrote about the same topic, he focused on Trimpath that is still our current JavaScript Templating engine here on Base22, but as all has to evolve, we are currently working on a new version of our assets using dust as our new engine, but that is another topic.

If you want to see a live demo of this client-side development technique, please visit our website Base22.com, there we use our xWidgets assets to show dynamic content that live in IBM WCM v8.

Future readings:

Hope you find this information useful!!

Hack background-position using sprites in IE7

IEYup, is time for another hack for IE 7, this time I needed to find a way to correct an issue with a sprite that is used as background image to display a set of icons in a list of links (a set of <a> inside a <li>) and depending of the type of recourse is the icon that is displayed. (using the CSS background-position Property)

As usual all works perfect in FF, Chrome, Safari, Opera, and even IE8+, but since IE 7 doesn´t support inline-block property, in some cases, not only the icon of the resource was displayed but some of the rest of the icons in the sprite too!, that happened only in the items where the text of the link was longer that the defined width of the container, in my case an <a> tag (see the image below), so in that cases, I needed to find a way to display only the correct icon.background_images_icons_1The fist step of my solution was to use the hack to mimic inline-block on block elements, since that is what I needed, be able to use inline-block in IE7:

CSS:

.the_rule
{
// more declarations ...
*display: inline;
*zoom: 1;
}

Once applied those declarations in the css rule that is applied to all <a> tags only the text of the links was lined up correctly (see the next image), well, apparently I needed to do something more, ok, the next step was to find a way to only display the correct icon and hide the rest of them (that should not appear from the beginning and are not displayed in others browsers even IE8+ ) and at the same time show all the text of the URL, interesting isn’t?

background_images_icons_2After sometime, the final step of my solution was to add a height value in the css rule, in my particular case the same height of the icons (18px) to force to hide the rest of the icons that are part of the same sprite and also to display the complete URL,  as you can see in the next image, hoooray!!:

background_images_icons_3

Note: The blue border around the <a> tag shows the dimensions of the element <a>.

CSS:

.the_rule
{
// more declarations ...
*display: inline;
*zoom: 1;
height:18px;
}

Be careful with the rest of the elements that may be below the one you add the hack!!, depending of your HTML structure is possible you need to find a way to control or force the position of the elements since they could move up, as was my case, see the next image:

background_images_icons_4Hope you find this information useful!!

:after and :before css pseudo elements hack for IE 7

css3:after and :before css pseudo elements aren’t supported by IE 7 and if you need to offer the same user experience in many browsers as possible (included legacies) without create extra code css/javascript/html/etc.., you can use the following technique that I found in Stack Overflow, kudos to vieron who found this hack!!.

If you want to see how it’s done, read :after and :before css pseudo elements hack for IE 7 in the Base22 Knowledge Wiki.

Hope you find this information useful!!

Activity Stream portlet for IBM Connections 4.5

IBM Connections 4On April 9 of 2013, Luis Benitez announced on his blog that the IBM Connections portlets for IBM WebSphere Portal had been updated and were ready for download. During May 20 – 23, 2013, I was able to attend to the IBM Exceptional Web Experience 2013 Americas at the Hilton Chicago Hotel where more information was revealed of these new portlets.

I was particularly interested to know more about the portlet for the Activity Stream. The speakers showed a demo (a part of that demo is available here) of how it looks under IBM WebSphere Portal v8 and in resume:

  • This portlet expose the same layout and functionality of the Activity Stream that can be found inside Connections v.4/4.5 (you can test it under IBM Greenhouse)
    • This is because they reused the same code and just was adapted to run under IBM WebSphere Portal.
    • So, you don´t lose any functionality or get new ones  – (As expected)

    Active_stream_1

  • Is possible to pin it to a specific filter (i.e. a community) – (pretty cool!!)

active_stream_2

active_stream_3

  • It will not work correctly in a mobile device since the pop-ups will not be displayed – (to bad!!)
    • Consider to use the mobile version instead.
    • Is possible to configure if you want that the pop-ups be displayed (Ok)
  • Is possible to customize the look & feel of the portlet via CSS (too limited in my opinion)
  • Uses embedded applications to enable full interaction model – (pretty cool!!)

Update: Thank you to Adam Ginsburg – Product Manager at IBM that allowed me to add some screenshots of this new portlet.

Hope you find this information useful!!

How to submit a Google Form with ajax

google_driveKudos to my colleague, Ernesto Rivera, who finally discover how to  submit a Google Form (data) using Ajax, I just help partially and share with you the link to our solution.

In summary: in our scenario we don’t wanted to show the default Google Form since it doesn’t looks nice in our design but we need the Spreadsheet that Google Forms use.

Also, we detected two cases on witch Google Forms works:

  1. In old Forms (we assume before Google Drive), Google send the data to a Google Spreadsheet directly:
    • https://spreadsheets1.google.com/formResponse?formkey=id-form
  2. In new Forms Google use the Form itself and no the Spreadsheet to send the data:
    • https://docs.google.co/forms/d/id-form/formResponse

If you want to see how it’s done, read Sending data to Google docs from your web page, using your own form and AJAX! in the Base22 Knowledge Wiki.

We really hope you find this information useful.