In a day, When you don't come across any problem, You can be sure that you're travelling in a wrong path.
--Swami Vivekananda

NEW

HAPPY INDEPENDENCE DAY to INDIA - Fifteenth of August

No comments:

Flag of INDIA
Independence Day, observed annually on 15 August, is a National Holiday in India commemorating the nation's independence from Kingdom of Great Britain [Commonly known as United Kingdom] on 15 August 1947. (Source Wikipedia)
- Hello everybody, Expect you all're fine. This post is dedicated to our country INDIA.
- I love my Country as you probably love yours.
- There are many Freedom Fighters who have fought for the Freedom of INDIA. Example: [Shahid] Bhagat Singh, Chandra Shekhar AzadBal Gangadhar TilakLala Lajpat Rai, (Mahatma Gandhi) Mohandas Karamchand GandhiRani lakshmibai, [Sardar] Vallabhbhai PatelSubhas Chandra Bose.
- You might like to know about Mahatma  in Mahatma Gandhi.. Right ? Mahatma means "Great Soul". By the way, Mahatma Gandhi is the Father of the Nation INDIA. (In India it's called Rastrapita).
- Every Fifteenth of August, There will be many activities done in All over INDIA like Flag Hoisting, Music and Dance Contests, In the movies channels, There might be screening Patriotic Movie whole day.
- It's happy occasion for the India.
- It would be cool if someone from the abroad wish the Indians Very Happy Independence Day :D
So, Here it's, Enjoy, take care :)

HTML Imports and CSS Variables Lands

No comments:

The wait is finally over, HTML Imports supported by Chrome 36 and Opera 23 (without enabling any flag) and CSS Variables supported by Firefox 31 (without enabling any flag).
- Looks like Firefox implementing the HTML Imports. (Embedded tweet)
- I've made a demo which can be used for an example for HTML Imports
Click to see the Demo
- I've written a post in SeeBeeTee about CSS Variables which you can find here.
- HTML Imports are really awesome in my opinion.
- Actually I don't know(till now) how to use the HTML Imports Polyfill but I'm giving you the link to Polyfill which might come handy... Polyfill for HTML Imports from Polymer.
How to Get Started with HTML Imports?
1. First you've to import it with the <link> tag. How?
<link rel="import" href="import.html" onload="handleLoad(event)" onerror="handleError(event)">
# onload and onerror are just for logging the status of the page. (If the import page has been loaded or not.)
I've wrapped my import page into <template> tag to clone it in a Javascript Variable.
2. You've to use Javascript to use the imported page.
// Thanks to http://www.html5rocks.com/en/tutorials/webcomponents/imports/
var link = document.querySelector('link[rel="import"]');

// Clone the <template> in the import.
var template = link.import.querySelector('template');
var clone = document.importNode(template.content, true);

document.querySelector('#getting-started-info').appendChild(clone);

function handleLoad(e) {
  console.log('Loaded import: ' + e.target.href);
}
function handleError(e) {
  console.log('Error loading import: ' + e.target.href);
}
# Variables: link used to select the link, template used to select the <template> from the imported page and clone for cloning the <template>'s content.
# Then we're just appending the <template>'s Content to the id getting-started-info of <div>.
# There are two functions. handleLoad will log that page which is imported has been loaded, And handleError will log that page has not been loaded (means some error).
3. Then we're done.
- This code is from my demo, Therefore the link will be which I've given above... Again: Demo page
- So this will be working if you're using the browser which supports HTML Imports.
- So here it's. Enjoy. Have any problems while doing this? Then leave your problem/issue in Comments and Yeah you can also give Feedback in Comments. :)

Fixing the space between two li elements which are displayed inline-block

No comments:

This post is totally inspired by Mr. Chris Coyier's post on CSS-Tricks Named "Fighting the Space Between Inline Block Elements"
While doing some navigation designs, I came across a problem that if I wrap 4 lis in a ul and wrap it in nav and gives the width of each li to 25% and style it with some basic css properties. A problem occurs.
The problem is that, The space between two li elements.
Click to zoom
You can see in the image that, There is a little space between Home, Products, About us and Contact us link.
I've made a pen in CodePen of this demo if you would like to see it live.
There are probably 5 ways to get rid of it and another one is to use flexbox.
The markup of the menu:
HTML
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</nav>
CSS
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: sans-serif;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
  width: 25%;
  text-align: center;
  padding: 1em;
  font-size: 1.6em;
  background: hotpink;
  color: #fff;
  margin: 0;
  -webkit-transition: 0.2s all ease-in-out;
  -o-transition: 0.2s all ease-in-out;
  transition: 0.2s all ease-in-out;
}

nav ul li:hover {
  background: #fff;
  color: hotpink;
}

nav ul li a {
  color: inherit;
  text-decoration: none;
}
Okay so how to Fix it?
To fix it you have to add comment between two li.
How?
<ul>
<li><a href="#">Home</a></li><!--
-->
<li><a href="#">Products</a></li><!--
-->
<li><a href="#">About us</a></li><!--
-->
<li><a href="#">Contact us</a></li>
</ul>
Please don't do like this...
<ul>
<li><a href="#">Home</a></li><!-- -->
<li><a href="#">Products</a></li><!-- -->
<li><a href="#">About us</a></li><!-- -->
<li><a href="#">Contact us</a></li>
</ul>
So now there should be no space between two elements.
After applying this technique I can get rid of the spaces between two li elements, Here is a preview of it.
I've also made a pen of it on CodePen, If you would like to see it live.
The other ways to do it, is on Chris Coyier's post on CSS-Tricks.
Thanks for reading the Post, Any queries/issues can be submitted via comments, Have a Nice Day!

Milestone Achieved : 150k Views to SeeBeeTee

No comments:

Click to Enlarge
Hello, Thank you very much.. We crossed 155K views. That's incredible.
# So Thank you for visiting SeeBeeTee.
# As always we try to improve our articles, and will try to write more articles as we can.
# If you would like to follow SeeBeeTee on twitter, our twitter handle is @cbloggingtips. It remains same on Facebook too (@cbloggintips on FB).
# Our official page on Google+ is +SeeBeeTee.
# If you would like to follow my creation on CodePen, I'm at @kman on CodePen.
# I would really like to know that what type of tutorial do you like to read .. I mean comment your tutorial wish related to Web Development, Web Designing, HTML, CSS, Sass, Markdown, Jade in comment.
# I will try to answer comments asap.
# I said about Sass, Markdown and Jade. May be you don't know about these.
  • Sass is a CSS preprocessor.
  • Markdown is an HTML preprocessor.
  • Jade is also an HTML preprocessor.
# Links of official sites: Sass, Markdown, Jade.
So here it's, Thanks and take care..

(Screencast) How to delete Directory(Folder) from Command Prompt

No comments:

# Have you ever tried to delete folder(directory) from Command Prompt in Windows ? But can't get it working?
# So I've done a little screencast on deleting directory from CMD.
1. Open CMD. (Win + R then Write cmd then press Enter).
2. Navigate to your directory path.
3. Type rd /s directory-name and press Enter after that Confirm it by Typing Y and then press Enter.
Note: You can't restore it from Recycle Bin.
Screencast
Do you want to watch it from vimeo ?
# Thanks and Share the trick if you like it.