Why not SVG !!!

What is new thing in web industry? Your answer is lot of things, I know. But do we ever think all over web industry we use vector graphics as a image. We make them vector, give lot of afford then we converte those as a image file. Why ? We don't resize it because if we do it loose quality. Or if we need html5 canvas animation image file could not help me rather than svg path. We use font icon as icon but if we need it as a background then .... could we do that! So it is time to know SVG.

SVG(Scalable Vector Graphics), is a XML-style markup driven vector graphic rendering engine for the browser. SVG is supported in every browser, except IE < v9 and Android < v3.

Resolution Independence

Every developer loose their passion when application run in different different viewport. Because at present we business not only content, I mean text also have lot of images in there. So application run in different viewport there is a change images loose quality. If you replace images as svg file it will solve.

Set as background

Few years ago we all are use font as icon image. Ya sometime it is very useful. But font, we can not use them as background image and sometime it is very painful. We converted those as image file then set them as background. But I question yourself it is really essential ! You can easily svg as background.

Super-Accessible DOM Node-Based API

So you write HTML? JavaScript? CSS? Good. Then you already know a lot of what you need to know to get writing SVG. SVG actually uses an XML-compatible format to define its rendering shapes. Beyond this, you can actually style shapes in CSS, and make them interactive with JavaScript. Multiple JS libraries exist to assist you in this world, like D3.js and Raphael. Here's an example of an SVG element group (the Envato leaf). You can also You can also see this example on JSFiddle.

If you are animation lover this link is for you.

Tell me, Why Aren’t You Using SVG?

How can I structure a Sass project

Hello everybody... I already told that I want to write few things about SASS because SASS surprise me a lot. I want to share my regular experience just. Hopefully it will be helpfully for beginner of SASS.

I am working a large application and when it built we did not think that we never use SASS or something. But after two year pass our team leader think that we need to mange our css more effective way. How can we do it? My answer was lets jump into SASS. So it the beginning of mine about SASS.

Sometime if CSS file being large, usually we break-down whole CSS file into each different files. Then we import it into main CSS file. But problem is in main CSS file, ok called it 'style.css' when we import our css file into it... each import we sent a request into server. and all developer want to reduce server hit. But SASS give me a solution also I can break-down my scss file.

Let me tell you, how we can separate our large css file into different SCSS file and what is the folder structure...

Make separate SCSS file by their nature. Note: Before the file name add [ _ ] sign. Something like _button.scss or _input.scss. This underscore sign [ _ ] told sass converter that it is supporting file, you don't need to covert is as css. After that you need to just import in your main SCSS file. just like @import '_fileName' oh you don't to need write file extension also.

A useful tip:

Now a day when we developed a larger application sometime we depended some third party scripts. and those third party script has css files. So we can separate those and make new SCSS file then we import it in our main style.scss file. It is good practice.



Here is a example how we can break them.

I always think that SASS is not very problematic but before SASS is hard. So I make two article for that.

Happy SASS

I'm a SASS Lover: Syntactically Awesome Style Sheets

When I first listen about Sass I am not too serious about it. Day after day I catch on, SASS makes my regular CSS world change.  I am happy enough myself, I knew it very beginning of my path.

At very beginning when I worked with Sass the problem I faced how to install Sass on my machine. So 'developing a sass file' or 'how to sass works' or 'how the sass syntax are work'  it not my problem. I browsed lot of web materials and listen their instruction very exquisitely but I failed. But I think it is good for me. Because now I know how to manage Windows Command Line and how it works. It is very essential to know about Windows Command Line because after that I discover lot of new things such as GIT (Source Control tool like Subversion, CVS, Perforce), YEOMAN (A workflow which robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications), GRUNT (Awesome tool java-script task runner), BOWER (by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for) and I love each of them.

They change me, they change my work flow most impotent thing is, they helping me become a smart man and I always wanted to be.

So Today I told my experience about installing Sass to my machine. if regular sass installing process is work for you then this post is not for you.

Go to Ruby site download Ruby and install it.

In right side, you can see a dialog box checked last two section. Most important thing is 'add Rubby executable to your PATH. it means you checked then win command line save ruby path so if you execute the command the fire.

After install Ruby go to cmd mode type 'ruby -v'
press enter show your Ruby version. Ruby install
successfully. Type gem install sass if sass install -
you are a lucky basted few are not. If it shows
ERROR: Could not find a valid gem 'sass' (>= 0),
here is why:Unable to download data from
https://rubygems.org/ - SSL_
connect returned=1 errno=0 state=SSLv3 read
server certificate B: certificate verify failed
(https://api.rubygems.org/latest_specs.4.8.gz)

Go to this link git gives a nice solution. just read it 

I have interest to write couple of post about SASS file structure , SASS variable , SASS Mixin. Those things are really surprise me. Again I told you SASS dont give me too much challenge rather than faced when I install SASS and I guess its the first beauty of SASS.

Until then best of luck.

Bootstrap Documentation escape this sh!t but escaping is not my nature

Bootstrap is very well known and I think most popular CSS Framework in current web industry. I loved it because of, not only its code simplicity also bootstrap community is so strong rather than Foundation-Zurb or Kube. If you are familiar with Bootstrap current version which is 3.31 than this post is for you and I assure you, Bootstrap document never mention this sh!t again.

Case 01
what do you do if need horizontal(Left-Right) margin in each columns?
What is the problem if, you add margin in each individual columns? Problem is when columns go in different devices application must be broken. Do you ever face this problem?

Simple solution is never give any horizontal margin between each columns. Just wrap your content(img/text) by suppose, div class name content-container then wrap the content-container by the column. Give a padding in content div. Padding will separate content to column also column to column.

Case 02
If you need increase gutter spacing,suppose you assume that content is too big and need space? It is very common and regular problem ?

Just add style in your custom Stylesheet:

.row.no-gutter{
      margin-right:0;
      margin-left:0
}//*you remove the negative margin*
.row.no-gutter[class*='col-']:not(:first-child),
.row.no-gutter[class*='col-']:not(:last-child){
                      padding-left:0;
                      padding-right:0
}//*increase 30px spacing without brake the bootstrap framework* 

Happy Coding

How to use Chocolatey: A yummy Windows package manager

Hello Folks, Yesterday in Dhaka has rained. Today nice weather here :) So I decided why not today I discus about a yummy thing like Chocolatey (A windows package manager).

Most Windows users like me don’t pay much attention to how desktop programs are installed on their computer. For years we’ve been trained to seek out a website, download an EXE or MSI file, and then click, click, click our way through the installation. Now time is changed, ask yourself is it really essential or what! Changing is good and we need to take over.

About Chocolatey
Chocolatey is a package manager for Windows (like apt-get or yum but for Windows). It was designed to be a decentralized framework for quickly installing applications and tools that you need. It is built on the NuGet infrastructure currently using PowerShell as its focus for delivering packages from the distros to your door, err computer.

Easy Install!
Go through Chocolatey wesite. Install process is very easy read out the whole document. Install it at cmd mode by administrator. Enjoy it, it is YUMMY chocolate. So if you installed chocolatey then time is install your desire program. Lets move...
Simple just write choco install programName in command line make sure that open as administrator

[*Note] If you get an error message then it's likely you will need to use the sudo command to install the program. It would look like: sudo choco install programName


Uninstall and Updating program
Write choco uninstall programName in command line make sure that open as administrator. you can also update your installed program by your commend line cup progremName

You see, life is very easy and beautiful. Take breath and eat my favorite chocolate do not matter if you are over weight or not  :-)

Designers can be smart:Use Zen Coding

Today I am talking about Zen Coding. Believe ME when you will use it feel yourself like superman :)

What is Zen Coding?
It is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing.

Zen Coding, Visual Basic (Web essentials) or Emmet are same concept. Use those in your regular coding life. I already link them. Click there, you can discover life is easy and simple.

Personally I am a big fun of Sublime Text So I add Emmit in my Sublime Text Package Control. Concept is through out zen coding. It is just an awesome experience. Just type html:5 and press 'Tab button' in keyboard automatic type HTML dock type format. Visit Emmet cheat sheet.

Regular code editor such like Dreamweaver, Note++ or Phpstorm you can install Emmet as a plugin and Emmit gives you zen coding flavor.

So I believe, Designers can smart.
Happy Coding :)