How to format Date / DateTime fields in Sharepoint 2010 using custom xsl and ddwrt formatting

When getting Calendar items, use ddwrt:FormatDate to format Date/Time as your liking:

from <xsl:value-of select="ddwrt:FormatDate(string(@EventDate),2057,3)"/>
to <xsl:value-of select="ddwrt:FormatDate(string(@EndDate),2057,3)"/>

Also, you can use custom formatting with this:

<xsl:variable name="monthy" select="ddwrt:FormatDateTime(string(pubDate), 1033, 'MMMM')"/>

More Links to help you:
Available locales
Custom date formats
MSDN DateTime custom format
ms:format-date Function
XSLT Date format dd-MMM-yyyy using ddwrt:FormatDateTime
ddwrt FormatDate and FormatDateTime
How to format date value in SharePoint Data View Web Part – xslt

Weird flickering effect with HTML/CSS

Just found out that when using in-page popups, using this CSS breaks the page so that it starts flickering/strobing constantly sometimes :D

html {overflow: auto;}

So word of advice: don't use it :) Or use it with some other parameter than "auto".

How to configure Firefox to automatically reuse the login credentials like IE

You need to enable NTLM Configuration within FireFox. It is very simple to do and should solve your problem:

Open Firefox and type “about:config” in the address bar. (without the quotes of course)
In the ‘Filter’ field type the following “network.automatic-ntlm-auth.trusted-uris”
Double click the name of the preference that we just searched for

Enter the URLs of the sites you wish to pass NTLM auth info to in the form of:

http://intranet.company.com,http://email.company.lan

Notice that you can use a comma separated list in this field.

How to disable the mystical 1px or 2px padding in table / tbody elements in Sharepoint 2010

Ever wonder, why tables get mystically some 1-2px padding around them? And any Developer console(F12) or Firebug won't show you why?
Well here's why. I guess Sharepoint(or Webkit) mystically adds a 1px invisible border around tables. Here is how to disable it with CSS:

table { border-collapse: collapse!important;}

Hide the Ribbon row in Sharepoint 2010-2013 modal box / dialog popup

Insert the following 3 lines of CSS code into your page:

.ms-dialog #s4-ribbonrow { 
    display: none;
}

Done!

How to trim/limit text length to a specified number of characters in Sharepoint 2010

Here I have specified 27 as the maximum length, plus three dots after the string.

<xsl:value-of select="substring(@Title, 1, 27)" />...

How to display Sharepoint List item/link in a pop-up/pop-in dialog window

Ever wondered why List items won't open in a dialog even though you have enabled "Launch forms in a dialog?" setting of the List?
Well wonder no more, and just create the popup yourself! Use this code:

<a href="javascript:OpenPopUpPage('http://mysite/Lists/Announcements/DispForm.aspx?ID={@ID}')"  >
<xsl:value-of select="substring(@Title, 1, 27)" />...</a>

btw, the code includes trimming text to 27 characters and inserting "..." in the end. Works!

Emulating old versions of Internet Explorer with Document Mode

Press F12 to reach Developer toolbar and scroll down on the left to reach Emulation(or press CTRL+8).

The Document Mode selection lets you choose how Internet Explorer interprets the page, and can be useful for diagnosing compatibility issues. There will be a (Default) next to the mode being used by the page. You can choose another mode, the number indicates the version of Internet Explorer. Each mode makes a series of changes to the browser's behavior so that it closely emulates the older browser version. The page reloads when you choose a new mode so that the web server and client-side markup is reinterpreted in the new mode.

Changes made to the Document Mode in F12 Developer Tools apply only for the duration of the browser session; when you close the browser and return to the site it will be in the default mode again.

Starting with IE11, Edge mode is the preferred document mode; it represents the highest support for modern standards available to the browser.