Expressing IT

Since last evening been struggling to create a decent cinemagraph … I mean one that is well executed and also practical. Similar ones, I can see it  being used on tourism related sites to breathe little life into the static pages, assuming that bandwidth is no issue

The little bit of nerd in me,  always gets diverted when I come across any new piece of technological innovation ( I surely need to do some YOGA to keep my focus) .   I was between serious work, understanding YouTube Channels , when I got digressed once again  into  “Cinemagraphs” .

I wanted to try my hands of creating one  for while now, but not being any good in photography  and  having just the least bit of photoshop blood in me, I had told myself a few months(years) back to let it go. But today my inner nerd was nudged again :)  and I ended up wasting  best part of the evening trying to create one  … just for “Been There Done That” status as far as Cinemagraphs are concerned ….

Anywaz! cutting my crap short!!! here it is …  have patience as these Animated GIFs are large files   ( this one is nearly 3MB)

 

What is a cinemagraph exactly ? … according to its  first creators “A Cinemagraph is an image that contains within itself a living moment that allows a glimpse of time to be experienced and preserved endlessly.”

I have no hesitation to say ( and Im sorry) that my above creation does total injustice to the professional Cinemagraphs that have been created out there.  If you wish to see some really good examples of a Cinemagraph, follow the link  http://cinemagraphs.com

Sometimes, so seemed trivial tasks becomes so daunting. “Add a Facebook image gallery to your site”, was just such a task. I simply though it would as  simple as adding any other Facebook Social Plugins  .

I started , by assuming that there would surely be a plugin provided by Facebook Developers Portal to  accomplish this task. To my surprise there is no such plugin provided as a part of Facebook Social Plugins  ( If you are one of those , who  havn’t used Facebook Social Plugins before , I have added a note at the end of this post simply for your benefit).

I googled for a solution and I realized that there are few options to go about doing this task . There were solutions which actually lead me to believe that this is NOT A TRIVIAL TASK, after all. There are solutions out there that suggest several techniques , one also had some solution using Facebook Graph API… Frankly, for all I know, this would be THE way to go about it, but not some simple solution I was looking for.

Finally , after looking a few options ( I have listed some below , for your reference) , I finally found one … I saw this embedded Facebook photo gallery on some page. The developer in me , did a view source and found the simple solution I was looking for  …. Just add the following code into your HTML , where you require the Facebook Photo Album to be inserted .

<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> 
<div class="fb-post" data-href="https://www.facebook.com/media/set/?set=a.375518759212.157287.64037939212&type=3" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/media/set/?set=a.375518759212.157287.64037939212&type=3">Post</a> by <a href="https://www.facebook.com/chembur">inchembur.com</a>.</div></div>

Well! The code above displays the FB Album as below …

Now this one seemed to have everything,  Facebook social links, comments etc.

Other three good techniques that I explored and that would be useful for a few,  looking at a different sort of look-n-feel , are listed below

• Display Facebook Photos on Your Website with Embed Social

  

Seems to be pretty decent, but  this was not the one I was looking for …

• Display Facebook Photos on Your Website with Galleria 

  Apparently there are some issues with the Galleria Plugin according to few comments I saw on the page linked above. Do have quick look at them as some might effect your requirement, provided they are not already taken care in the current build of the plugin

• Display Facebook Photos on Your Website with FBalbum

  I found this one too , which seemed interesting as it gave control over the CSS  of the Photo Gallery. So this option could prove surely a choice for those design orientated developers , who wish to tweek the look-n-feel to their satisfaction. Having said that it will take up quite some development hours for you will have to look at the implementation for what happens when the user clicks the thumbnails …  http://zach.lysobey.com/files/fbAlbum/fbAlbum.html

Facebook Social Plugins

For those who are unaware , here is a list of  Social Plugins provided by default by Facebook, that a developer could use to add to any website. Its pretty simple to add these plugins to any webpage you create, as simple as Ctrl-C & Crtl-V. Surely, if are a developer you would’nt require any more spoon feeding than this…  For exact codes that you would need to embed , I suggest you visit  Facebook Social Plugins page

Sometimes even the simplest things in life that we always took for granted seems to give us a kick on our backside. That is when we get to learn little lessons of life. The simplest piece of code that always worked like charm, fails to work, Today was just that day. I had an issue with a named anchor which I had defined to add a Jquery Smooth Scroll. The scroll to an anchor just failed to work … thankfully it was a very simple fix.

The code that I had (when the named anchor did not work) 
<a href="" id=”a_rate_this”></a> 

Got fixed when , I replaced the above with  
<a href=”javascript:void(0);” id=”a_rate_this”></a>

Or even just remove the href attribute as below
<a id=”a_rate_this”></a>
yeah! but in this case you will loose the default pointer cursor 

of the anchor tag and it will change to cursor of type text. 

You could solve this issue with a css fix, 

i.e. by adding cursor:pointer to the anchor tag.

In your dreams!!!

I saw this on some website … Words wont explain it better than this Union/Venn diagram.

What it means in English?

1. Good and fast      work will NOT be  CHEAP.
2. Fast and cheap    work  will NOT be necessarily GOOD.
3. Cheap and good  work will NOT be FAST.

PS: Thanks to the fellow developer who came up with this. Will be glad  to put your link here!!! let me know please.

I had read this in some blog. Thought it was nice to catalog this for future ref. and also could be an important interview question that you would be asked some day.

Write a snippet of CSS that will display a paragraph in blue in older browsers, red in newer browsers, green in IE6 and black in IE7

#content p{color:blue} /* New Browsers */
html>body #content p {color:red} /* Older Browsers */
* html #content p{color:green} /* IE 6  only Hack */
html>body #content p {*color:black;} /* IE 7 only Hack*/

PS. Sorry! I haven’t tested it!!!

Had this strange issue , where a piece of Javascript worked fine in all the browser  and as usual sans IE 🙂 …  Simple it was, but since the script was not written by me, It took a while to debug this “Object doesn’t support this property or method” error, that only IE was throwing up. Probably! If  I were to write the script, I wouldn’t have got this error at all , as I tend not to mix my variable names with field Ids :).

Problem: Object doesn’t support this property or method (on line 3)

function funzoneSP(){
    document.getElementById('video_id').style.visibility="hidden";
    shortdesc = document.getElementById('shortdesc').value;
    ....
}

Solution:
The error is generated on the thirdrow in the example above(Line 3… “shortdesc = document.getE….”). I tried all sort of stupid things , that I dont is even worth the mention here and finally guess what!  just changing the shortdesc var to something else got rid of the error. Basically! The variable name had to different from the fieldID

For a few hours now I have been looking at solutions to run/test my static HTMLs in the Eclipse/Android emulator.  Have not been totally successful yet…. what I mean by “Totally” is the HTML gets loaded OK but all the CSS and JS, i.e. the visual expression is  not seen. In developer words, the CSS is not applied to the page…

Thought it would a few   fellow newbie Android  UI developers , If  I noted the snippet down that I used to  display the  HTML .

AND Android gurus, PLEASE add your comments to help us novices in mobile application UI developers further!

Sorry! but Im assuming that you  know how to create a  Android Mobile Application in Eclipse.

Create this as your activity; This will read the file ‘index.html’ from your project assets/ folder.

public class Test extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WebView webview = new WebView(this);
        setContentView(webview);
        try {
            InputStream fin = getAssets().open("index.html");
                byte[] buffer = new byte[fin.available()];
                fin.read(buffer);
                fin.close();
                webview.loadData(new String(buffer), "text/html", "UTF-8");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

Re-Cycling is Buzzword and In Web Development it means no different.  It conserves energy, in terms of effort!

Over years of writing CSS and creating HTML from designs,  I have followed a few best practices, in pursuit of saving time and energy in what we commonly term as “Re-Inventing the Wheel”.  Time and time again, I have told myself, that I must create a few templates , some standard re-usable CSS  that I would use  OUT OF THE BOX in my future work. Though not completely but  I did manage to achieve some of goals.

In furthering, Re-Use of CSS , I had a  look at the few CSS frameworks that are commonly available to us and  decided to put them to use,  as these are tried and tested  and created by much experienced developers , than myself . More importantly “AVOID RE-INVENTING”.

Though common knowledge  to veterans,  I have tried to pen some key concepts/best-practices/thoughts that has gone into creating these frameworks, to make RE-CYCLING of CSS possible. Hope this will help some CSS developers who are just about to and recently boarded the CSS bandwagon!

Keys Re-cycling of CSS :

Use Naming  Conventions

This has to be the most important factor in making the CSS/HTML re-usable. Giving consistent names to page elements enables re-use of page components and their styles with little or modifications. In line with this argument,  Even HTML5 , in a major change change over its predecessors ,  is to introduce some structural tags  viz.  <article>, <section>, <header>, <aside>, and <nav> [What will HTML5 bring?].  Even with HTML 4(or lower),  it is best to name standard sections of your page consistanly like in the simple example below…

Remember,  Most pages on your project , end up having the same core structural elements. Identify these common core page elements ….

<div id="container">
   <div id="header">...</div>
   <div id="nav">...</div>
   <div id="sidebar">...</div>
   <div id="footer">...</div>
  </div>

Reset Default Styles ( CSS Resets) : Whether you use a framework or write your own , you must provide CSS Resets  [What are CSS Resets?], as they reduce or sometimes  eliminate  visual inconsistencies that  occur between various browsers.  In simple words the CSS Reset Mechanism  sets the styles of HTML Element  to  zero or null values, thus overriding any  browser default values they may poses.  This provides a clean slate to set the   properties of  these elements void of any User-Agent Defaults [CSS2.1 User Agent Style Sheet Defaults]. All the CSS  frameworks do have of reset mechanism. If you are writing you own CSS Resets, a word of caution is that if you happen to forget to reset a key property,  It could lead to cross-browser issues, that are very difficult to debug. Remember,  Keep a copy of the reset styles and drop them into each new project you create.

 body, div, dl, dt, dd, ul, ol, li,
 h1, h2, h3, h4, h5, h6,
 pre, form, fieldset, input, select, textarea,
 p,blockquote, table, th, td
 {
   border:0px;
   margin:0;
   padding:0;
 }

Set Defaults (Baseline Styles) to Elements :

After you have set ( to zero or null)  the default Values of certain attributes  of certain HTML Elements, It is necessary to apply some styles across every instance of these elements. These default setting could vary as per the design or according the best practices you follow.

Most CSS frameworks, always introduces some new defaults,  in addition to resetting default browser styles.
These defaults being void of the User-Agent Defaults(  stripped away by the CSS Reset), these will be consistent across browsers .

Remember, Baseline styles are used to  set  styles that are going be used design-wide. eg .

html { font-size: 77%; font-family: Arial, sans-serif; }
strong, h1, h2, h3, h4, h5, h6 { font-weight: bold; }

Abstract Styles for Common HTML Components and Common Classes :

Most project consisting of several pages will have common HTML elements used across the site, for e.g.  Some sort of forms, alerts and errors ,  Custom Popups, LightBoxes etc.  Since such components are used over again across projects, It will be useful  to  provide a set of classes associated with predefined styles for these components  and  you can save yourself a lot of time.

Apart from defining reusable styles definitions for the common HTML Components , we could abstract styles classes  pertaining to typography, color or even  layout.  I myself tend you use … common classes like Clearfix, Font08, FontGrey, AlignL, DisplayB etc.

form input{ border:0px;   background:#ffffff; padding:0px 10px; _padding:0px 0px; height:26px; color:#000000; line-height:30px;  font-size:1.1em; }
form textarea{  border:0px;   background:#ffffff; color:#000000; font-size: .9em; line-height:1.5em; overflow:visible; }

.fbold{font-weight:bold; color:#cccccc;}
.fgrey{ color:#666666;}
.flightgrey{ color:#bbbbbb;}
.clearfix {clear:both;}
.divider{border-top:1px solid #647B06; border-bottom:1px solid #9CC00A; height:0px; }
.displayb{display:block;} .displayn{display:none;}
.alignr{text-align:right} .alignc{text-align:center}
.floatr{float:right; } .floatl{float:left;}

Fixes to common browser quirks

Various browsers implement CSS code and provide varying level of  support for the CSS specifications.  The result of this  …. “Browser Quirks”, that we developers are left to tackle.    Especially, IE6  haunts most CSS coders with a deadline to meet. The good news is experience has  brought  together  possible REUSABLE fixes to these issues  ( Often termed as CSS Hacks) .

Remember ,  Keep these hacks/fixes handy

  /* The following zoom:1 rule is specifically for IE6 + IE7.  */
   * html .clearfix,
   *:first-child+html .clearfix {
          zoom: 1;
     }

Keep Refining Your  CSS

• The habit of re-cycling will not come to you in day. It has to developed. So plan your Re-Cycling . Bear this in mind that you could abstract defaults styles,  typography definitions, Layouts , HTML Element Styles etc.  Try to think ahead.
• Also look back at your past projects, it will help identify styles that you tend  to use often across porjects. Abstract it.
• Remove any unused styles.  This practice will keep your CSS framework from a common symptom called “Bloating” –
• Remove repetitive styles .
• Build a set of styles that are flexible enough to port it across projects.

A Look At CSS Frameworks

Finally.  If you are inspired and intend to use one or more of the CSS frameworks, Heres is quick list of a few popular ones ….

• 960 Grid System : The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are three variants: 12, 16 and 24  columns, which can be used separately or in tandem.  Thought nothing that you cannot create one for your own easily enough,  The framework provides grid templates for print in PDF format, that one can use to sketch your page designs.Bet ,  It would make a professional impression , if you carry a few sheets  when you go to a client for UI requirements gathering. It also provides basic grid templates for popular design software like Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio,  etc. providing a “starter for ten”  to begin your design work.
• Blueprint :  Blueprint provides distinctly classified CSS files for Resets, Grids, Forms, Print, Typography , Plugins for buttons, tabs and sprites etc. It also provides support for IE as a separate include.
• SenCSs : Unlike  the above two, SenCSs ( pronounced Sense) , doesnt have CSS definitions for Layout. It does include  fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more.
• BlueTrip : Its original claim to fame was that , it was  a combination of the best features provided by other others frameworks like Blueprint, Tripoli … from where it gets its name.  Its feature set includes 24-column grid, typography styles , orm styles, print, buttons etc.
• YUI Grids : Brought to you by the Yahooo Developer Network ,  supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number. As you can see , Its technically just the layout Components. YUI also provided  HTML/CSS  sets for other page elements
• YAML (Yet Another Multicolumn Layout)
• Emastic

Remember , using CSS frameworks  doesn’t imply that you are  lazy  to create one of your own … It implies that you are smart to learn from others experience & mistakes , SAVE TIME and INCREASE PRODUCTIVITY!!!!