tag:blogger.com,1999:blog-85123360956249723532024-03-19T03:32:40.371+00:00Shohel’s Developer MindScapeLead Software Engineer, Lead Software Engineer in Bangladesh, Lead Software Engineer (Java), Lead Software Engineer (Java) in Bangladesh, Software Engineer, Software Engineer in Bangladesh, Angular Expert, Angular Expert in Bangladesh, AngularJS Expert, AngularJS Expert in Bangladesh, Java Expert, Java Expert in Bangladesh, Java Spring Boot Expert, Java Spring Boot Expert in Bangladesh, PostgreSQL Expert, Machine Learning Expert, Machine Learning Expert in Bangladesh, NLP Expert, AI Expert, AI EShohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.comBlogger39125tag:blogger.com,1999:blog-8512336095624972353.post-22659705911874505172019-09-16T16:34:00.002+01:002019-09-16T16:34:56.640+01:00Git Quick Learning & ShortCuts<a href="https://medium.com/@mdshohelrana85/git-quick-learning-shortcuts-98145332040f">https://medium.com/@mdshohelrana85/git-quick-learning-shortcuts-98145332040f</a>Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-7052425184072150262019-07-02T10:14:00.000+01:002019-07-02T10:14:04.333+01:00Most popular Angular questions to StackOverflow<a href="https://www.freecodecamp.org/news/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0/">Details</a>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja5h_u0dseiImf8msxokDxIAnIpHc4zWrLikaFkL4T2kQMeCbfkL0LPsaTnJnpEjoev6FHu8AVsimQrur6LVOuf7RTtU2oucTDvxM0v8_QgmAdcjtzf2VcHWcUCJcCQNcbeWWLzYDAw_s/s1600/dd.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja5h_u0dseiImf8msxokDxIAnIpHc4zWrLikaFkL4T2kQMeCbfkL0LPsaTnJnpEjoev6FHu8AVsimQrur6LVOuf7RTtU2oucTDvxM0v8_QgmAdcjtzf2VcHWcUCJcCQNcbeWWLzYDAw_s/s320/dd.png" width="320" height="138" data-original-width="800" data-original-height="344" /></a></div>Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-77298092535486682392019-06-24T05:35:00.000+01:002019-09-09T00:58:19.547+01:00Top 10 tips and tricks for ReactThe beginner's collection of powerful tips and tricks for React
<blockquote>Name your components
No matter how you expose your component, name it
Prefer functional components
Replace divs with fragments
Be careful while setting state
Binding component functions
Adopt container pattern (even with Redux)
Server rendering
Internationalization</blockquote>
Find more about
https://www.freecodecamp.org/news/the-beginners-collection-of-powerful-tips-and-tricks-for-react-f2e3833c6f12/
Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-33668699257163050982019-04-05T18:04:00.000+01:002019-04-05T18:06:10.516+01:00Top 10 standard typescript guideline<h1>Top 10 standard typescript guideline</h1>
<hr/>
<h3>1. TypeScript StyleGuide and Coding Conventions</h3>
<a href="https://github.com/basarat/typescript-book/blob/master/docs/styleguide/styleguide.md">Link</a>
<h3>2. Coding guidelines</h3>
<a href="https://github.com/Microsoft/TypeScript/wiki/Coding-guidelines#stop-reading-immediately">Link</a>
<h3>3. TypeScript Style Guide</h3>
<a href="https://www.zanjoy.com/typescript-style-guide/">Link</a>
<h3>4. Excel Micro TypeScript Style Guide</h3>
<a href="https://github.com/excelmicro/typescript#ts-type-annotations">Link</a>
<h3>5. Typescript Best Practices</h3>
<a href="https://jobs.zalando.com/tech/blog/typescript-best-practices/?gh_src=4n3gxh1">Link</a>
<h3>6. Do's and Don'ts</h3>
<a href="https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html">Link</a>
<h3>7. Five tips I wish I knew when I started with Typescript</h3>
<a href="https://codeburst.io/five-tips-i-wish-i-knew-when-i-started-with-typescript-c9e8609029db">Link</a>
<h3>8. clean-code-typescript</h3>
<a href="https://github.com/labs42io/clean-code-typescript">Link</a>
<h3>9. Typescript Guidelines</h3>
<a href="https://github.com/unional/typescript-guidelines">Link</a>
<h3>10. TSLint core rules</h3>
<a href="https://palantir.github.io/tslint/rules/">Link</a>Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-7028832082342889422019-03-12T18:13:00.001+01:002019-03-12T18:16:19.162+01:00The Ultimate Template Syntax in AngularThe Angular application oversees what the client sees and can do, accomplishing this through the connection of a segment class occasion (the segment) and its client confronting layout. Many code scraps outline the focuses and ideas, every one of them accessible in the Template Syntax Live Code <code>https://stackblitz.com/edit/angular-ultimate-template-syntax</code>Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-45647025203362137152019-02-14T06:14:00.001+01:002019-02-16T17:53:06.513+01:00All About JavaScript Arrays<h2>How to merge two arrays in JavaScript and de-duplicate items</h2>
<pre name="code" class="brush: erlang">
var array1 = ["Shohel","Rana"];
var array2 = ["Shipon", "Shohel"];
let noDuplicate = array1.filter ( i => array2.findIndex(a => i==a)==-1 );
let result = [...noDuplicate, ...array2];
console.log(result);
</pre>
<h2>JavaScript Array splice vs slice</h2>
<pre name="code" class="brush: erlang">
var array=[1,2,3,4,5];
console.log(array.splice(2));
This will return [3,4,5]. The original array is affected resulting in array being [1,2].
var array=[1,2,3,4,5]
console.log(array.slice(2));
This will return 3,4,5. The original array is NOT affected with resulting in array being [1,2,3,4,5].
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var removed = array.splice(2,2);
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
for( var i = 0; i < array.length-1; i++){
if ( array[i] === 5) {
arr.splice(i, 1);
}
}
//=> [1, 2, 3, 4, 6, 7, 8, 9, 0]
var elements = [1, 5, 5, 3, 5, 2, 4];
for(var i = elements.length -1; i >= 0 ; i--){
if(elements[i] == 5){
elements.splice(i, 1);
}
}
</pre>
<h2>JavaScript pushing element at the beginning of an array</h2>
<pre name="code" class="brush: erlang">
TheArray.unshift(TheNewObject);
</pre>
<h2>Remove Elements from End of a Array in JavaScript</h2>
<pre name="code" class="brush: erlang">
var ar = [1, 2, 3, 4, 5, 6];
ar.length = 4; // set length to remove elements
console.log( ar ); // [1, 2, 3, 4]
</pre>
<h2>Remove Elements from End of a Array using pop in JavaScript</h2>
<pre name="code" class="brush: erlang">
var ar = [1, 2, 3, 4, 5, 6];
ar.pop(); // returns 6
console.log( ar ); // [1, 2, 3, 4, 5]
</pre>
<h2>Remove Elements from Beginning of a Array in JavaScript</h2>
<pre name="code" class="brush: erlang">
var ar = ['zero', 'one', 'two', 'three'];
ar.shift(); // returns "zero"
console.log( ar ); // ["one", "two", "three"]
</pre>
<h2>Remove Element by Array filter Method</h2>
<pre name="code" class="brush: erlang">
var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var filtered = array.filter(function(value, index, arr){
return value > 5;
});
//filtered => [6, 7, 8, 9]
//array => [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
</pre>
<h2>Remove Elements by Delete Operator in JavaScript Array</h2>
<pre name="code" class="brush: erlang">
var ar = [1, 2, 3, 4, 5, 6];
delete ar[4]; // delete element with index 4
console.log( ar ); // [1, 2, 3, 4, undefined, 6]
alert( ar ); // 1,2,3,4,,6
</pre>
<h2>Clear or Reset a JavaScript Array</h2>
<pre name="code" class="brush: erlang">
var ar = [1, 2, 3, 4, 5, 6];
//do stuff
ar = [];
or
ar.length = 0;
//a new, empty array!
var ar = [1, 2, 3, 4, 5, 6];
console.log(ar); // Output [1, 2, 3, 4, 5, 6]
ar.splice(0, ar.length);
console.log(ar); // Output []
</pre>
<h2>Insert an item into an array at a specific index (JavaScript)</h2>
<pre name="code" class="brush: erlang">
var arr = [];
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";
console.log(arr.join());
arr.splice(2, 0, "Lene");
console.log(arr.join());
</pre>
<h2>Array sort and reverse in Java Script Array</h2>
<pre name="code" class="brush: erlang">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // First sort the elements of fruits
fruits.reverse(); // Then reverse the order of the elements
</pre>
<h2>Array Extension</h2>
<pre name="code" class="brush: erlang">
//delete object
//split javascript object
Array.prototype.spliceObject = function (sourceToRemove) {
//Remove the deleted entry from list
var index = this.indexOf(sourceToRemove);
if (index != -1) { // Make sure the value exists
this.splice(index, 1);
}
return index;
};
// calling arrayList.spliceObject(entity);
Array.prototype.spliceObjectByID = function (id) {
//Remove the deleted entry from list
var index = this.map(function (x) { return x.id; }).indexOf(id);
if (index != -1) { // Make sure the value exists
this.splice(index, 1);
}
return index;
};
// calling arrayList.spliceObject(entity.id);
//array move
//move up move(array, element, -1);
//move down move(array, element, 1);
Array.prototype.arrayMove = function (element, delta) {
var index = this.indexOf(element);
var newIndex = index + delta;
if (newIndex < 0 || newIndex == this.length) return; //Already at the top or bottom.
var indexes = [index, newIndex].sort(function (a, b) { return a - b; }); //Sort the indixes
this.splice(indexes[0], 2, this[indexes[1]], this[indexes[0]]); //Replace from lowest index, two elements, reverting the order
return;
};
</pre>
<h2>Find the Highest (or Lowest) Array Value</h2>
<pre name="code" class="brush: erlang">
//Sorting ascending:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// now points[0] contains the lowest value
// and points[points.length-1] contains the highest value
//Sorting descending:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// now points[0] contains the highest value
// and points[points.length-1] contains the lowest value
</pre>
<h2>Java Script Array Clone</h2>
<pre name="code" class="brush: erlang">
https://e2ecode.blogspot.com/2013/12/array-clone-in-java-script.html
</pre>
Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-68318275294084596702019-01-27T02:46:00.000+01:002019-02-01T14:26:33.666+01:00How to Start Angular 7 Step by Step<h1>What is Angular?</h1>
<a href="https://angular.io">Angular</a> is one of the JavaScript framework that helps developers to build smaller to large scale applications of mobile, web and desktop. Angular library provides a series of features that make it trivial to implement the complex requirements of modern applications, such as data binding, routing, and animations.
Angular is one of the only JavaScript libraries to provide a comprehensive style guide with a number of opinionated guidelines on how you could write your code with the framework.
</br>
</br>
<h1>Installation</h1>
</br>
<h3>Prerequisites</h3>
Before starting of your Angular application, you may need some latest tools that are below.
</br>
* <a href="https://nodejs.org/en/">[Nodejs]</a>
</br>
* <a href="https://git-scm.com/">[Git]</a>
</br>
* <a href="https://code.visualstudio.com/download">[Visual Studio Code]</a>
</br>
* <a href="https://github.com/angular/angular-cli">[Angular CLI]</a>
</br>
</br>
For the CLI generated project, you need the Node 6.9.0 or higher.
</br>
</br>
<h3>Downloading and Setting up</h3>
Download the prerequisites tools directly from the below link according to your operation system and install those tools.
</br>
* <a href="https://nodejs.org/en/">[Nodejs]</a>
</br>
* <a href="https://git-scm.com/download/win">[Git]</a>
</br>
* <a href="https://code.visualstudio.com/download">[Visual Studio Code]</a>
</br>
* <a href="https://github.com/angular/angular-cli">[Angular CLI]</a>
</br>
</br>
After installing Nodejs, the node package manager (npm) should automatically be installed.
</br>
> Test it out by doing: open terminal window and write the following command
</br>
> `npm --version`
</br>
After installing Git, the git package manager (git) should automatically be installed.
</br>
> Test it out by doing: open terminal window and write the following command
</br>
> `git --version`
</br>
After installing Visual Studio Code, you can check the installed IDE from your start program menu.
</br>
> Test it out by doing: open visual studio code IDE from start program menu.
</br>
</br>
<h3>Install Angular CLI</h3>
Open terminal window and write the following command for global installation
</br>
npm install -g @angular/cli
</br>
_N.B: Internet connection is needed before doing this job._
<a href="https://github.com/mdshohelrana/examples-of-angular/wiki">Learn more....</a>Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com1tag:blogger.com,1999:blog-8512336095624972353.post-8691815340313869712018-09-25T04:45:00.003+01:002018-09-25T04:45:33.414+01:00Hierarchical Query to Return All Children and Parent
<blockquote>--========Get all ancestor</blockquote>
<code>
;WITH cte AS (
SELECT dbTable.*
FROM dbTable
WHERE id = 100000200
UNION ALL
SELECT dbTable.*
FROM dbTable
INNER JOIN cte ON cte.ParentID = dbTable.id
)
SELECT * FROM cte
</code><br>
<blockquote>--========Get all successor</blockquote>
<code>
;WITH cte AS (
SELECT dbTable.*
FROM dbTable
WHERE id = 100000200
UNION ALL
SELECT dbTable.*
FROM dbTable
INNER JOIN cte ON dbTable.ParentID = cte.id
)
SELECT * FROM cte
</code><br>Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com1tag:blogger.com,1999:blog-8512336095624972353.post-42551312684884881742018-03-24T00:35:00.001+00:002019-01-26T15:02:34.827+01:00How to download and install PyCharm - lesson 3<a href="https://www.slideshare.net/MdShohelRana9/how-to-download-and-install-pycharm-lesson-3">https://www.slideshare.net/MdShohelRana9/how-to-download-and-install-pycharm-lesson-3</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/-aKkUvF5xEI/0.jpg" frameborder="0" height="450" src="https://www.youtube.com/embed/-aKkUvF5xEI?feature=player_embedded" style="clear: left; float: left;" width="100%"></iframe></div>
<br />Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-18148138172157480912018-03-24T00:33:00.001+00:002019-01-26T15:03:38.334+01:00How to download and install Python - lesson 2<div class="separator" style="clear: both; text-align: left;">
<a href="https://www.slideshare.net/MdShohelRana9/how-to-download-and-install-python-lesson2">https://www.slideshare.net/MdShohelRana9/how-to-download-and-install-python-lesson2</a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/AuLMMymX7b8/0.jpg" frameborder="0" height="450" src="https://www.youtube.com/embed/AuLMMymX7b8?feature=player_embedded" style="clear: left; float: left;" width="100%"></iframe></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-48393231031531360912018-03-17T05:58:00.000+00:002019-01-26T15:04:24.872+01:00How to start Python - lesson 1?<a href="https://www.slideshare.net/MdShohelRana9/how-to-start-python">https://www.slideshare.net/MdShohelRana9/how-to-start-python</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/tmoBS_0618U/0.jpg" frameborder="0" height="450" src="https://www.youtube.com/embed/tmoBS_0618U?feature=player_embedded" style="clear: left; float: left;" width="100%"></iframe></div>
<br />Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-22360290177772790042016-08-14T11:36:00.003+01:002018-04-21T16:26:51.875+01:00Print PDF directly from JavaScriptThis question demonstrates an approach that might be helpful to you: <a href="http://stackoverflow.com/questions/975652/silent-print-a-embedded-pdf">Silent print a embedded PDF</a><br />
<br />
<div>
It uses the <embed> tag to embed the PDF in the document:<br />
<br />
<pre><embed
type="application/pdf"
src="path_to_pdf_document.pdf"
id="pdfDocument"
width="100%"
height="100%">
</embed>
</pre>
Then you call the .print() method on the element in Javascript when the PDF is loaded:
<br />
<br />
<pre>function printDocument(documentId) {
var doc = document.getElementById(documentId);
//Wait until PDF is ready to print
if (typeof doc.print === 'undefined') {
setTimeout(function(){printDocument(documentId);}, 1000);
} else {
doc.print();
}
}</pre>
<pre></pre>
You could place the embed in a hidden iframe and print it from there, giving you a seamless experience.</div>
Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-91963496143006808482016-05-20T09:35:00.001+01:002016-05-20T09:35:38.665+01:00sql server change length of nvarchar column<br />
<br />
declare @schema nvarchar(255)<br />
declare @table nvarchar(255)<br />
declare @col nvarchar(255)<br />
declare @dtype nvarchar(255)<br />
declare @sql nvarchar(max)<br />
<br />
declare maxcols cursor for<br />
select<br />
c.TABLE_SCHEMA,<br />
c.TABLE_NAME,<br />
c.COLUMN_NAME,<br />
c.DATA_TYPE<br />
from<br />
INFORMATION_SCHEMA.COLUMNS c<br />
inner join INFORMATION_SCHEMA.TABLES t on<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>c.TABLE_CATALOG = t.TABLE_CATALOG<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>and c.TABLE_SCHEMA = t.TABLE_SCHEMA<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>and c.TABLE_NAME = t.TABLE_NAME<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>and t.TABLE_TYPE = 'BASE TABLE'<br />
where<br />
c.DATA_TYPE like '%varchar'<br />
and c.CHARACTER_MAXIMUM_LENGTH = 500<br />
<br />
open maxcols<br />
<br />
fetch next from maxcols into @schema, @table, @col, @dtype<br />
<br />
while @@FETCH_STATUS = 0<br />
begin<br />
set @sql = 'alter table [' + @schema + '].[' + @table +<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>'] alter column [' + @col + '] ' + @dtype + '(2000)'<br />
exec sp_executesql @sql<br />
<br />
fetch next from maxcols into @schema, @table, @col, @dtype<br />
end<br />
<br />
close maxcols<br />
deallocate maxcolsShohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-36718157929123006422015-05-06T09:09:00.003+01:002015-05-06T09:09:46.500+01:00How to use template cache in angularjsfunction getQuery(){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var setupCache = $cacheFactory('setupServiceCache');<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var deferred = $q.defer();<br />
var CustomerName = setupCache.get("CustomerName");<br />
if (!CustomerName || CustomerName.length === 0 ) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>$http({<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>url: serviceBase + 'GetCustomerName',<br />
method: "GET",<br />
params: { locationID: userInfo.locationID }<br />
).then(<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>function (results) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>setupCache.put("CustomerName", results.data);<br />
deferred.resolve(results.data);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>});<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>} else {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>deferred.resolve(CustomerName);<br />
}<br />
return deferred.promise;<br />
}<br />
<br />
<br />
function post(){<br />
return $http.post(url + 'Delete', entity).then(function (result) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return result;<br />
}).catch(function (ex) {<br />
throw ex;<br />
});<br />
}Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com1tag:blogger.com,1999:blog-8512336095624972353.post-75988043322871066632015-05-05T00:47:00.001+01:002018-04-21T16:28:58.749+01:00Busy indicator in angularjsBusy indicator directive
<pre>
<br />'use strict';
define(['angular'], function () {
var busyIndicatorDirective = function ($q, $timeout, $window, httpInterceptor) {
return {
restrict: 'EA',
//transclude: true,
scope: {
indicatorDelay: "@"
},
//templateUrl: 'CommonComponents/Controls/BusyIndicator/busyIndicator.html',
link: function (scope, element, attrs) {
var overlayContainer = null,
timerPromise = null,
timerPromiseHide = null,
inSession = false,
queue = [];
init();
function init() {
wireUpHttpInterceptor();
if (window.jQuery) wirejQueryInterceptor();
overlayContainer = document.getElementById('overlay-container');
}
//Hook into httpInterceptor factory request/response/responseError functions
function wireUpHttpInterceptor() {
httpInterceptor.request = function (config) {
processRequest(config.method);
return config || $q.when(config);
};
httpInterceptor.response = function (response) {
processResponse();
return response || $q.when(response);
};
httpInterceptor.responseError = function (rejection) {
processResponse();
return $q.reject(rejection);
};
}
//Monitor jQuery Ajax calls in case it's used in an app
function wirejQueryInterceptor() {
$(document).ajaxStart(function () {
processRequest();
});
$(document).ajaxComplete(function () {
//processResponse();
});
$(document).ajaxError(function () {
//processResponse();
});
}
function processRequest(method) {
queue.push({});
if (queue.length == 1) {
if (method === 'GET') {
timerPromise = $timeout(function () {
if (queue.length) showOverlay();
}, scope.indicatorDelay ? scope.indicatorDelay : 500); //Delay showing for 500 millis to avoid flicker
} else if (method === 'POST') {
if (queue.length) showOverlay();
}
}
}
function processResponse() {
queue.pop();
if (queue.length == 0) {
//Since we don't know if another XHR request will be made, pause before
//hiding the overlay. If another XHR request comes in then the overlay
//will stay visible which prevents a flicker
timerPromiseHide = $timeout(function () {
//Make sure queue is still 0 since a new XHR request may have come in
//while timer was running
if (queue.length == 0) {
hideOverlay();
if (timerPromiseHide) $timeout.cancel(timerPromiseHide);
}
}, scope.indicatorDelay ? scope.indicatorDelay : 500);
}
}
function showOverlay() {
var w = 0;
var h = 0;
if (!$window.innerWidth) {
if (!(document.documentElement.clientWidth == 0)) {
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else {
w = document.body.clientWidth;
h = document.body.clientHeight;
}
}
else {
w = $window.innerWidth;
h = $window.innerHeight;
}
var content = document.getElementById('overlay-content');
var contentWidth = parseInt(getComputedStyle(content, 'width').replace('px', ''));
var contentHeight = parseInt(getComputedStyle(content, 'height').replace('px', ''));
content.style.top = h / 2 - contentHeight / 2 + 'px';
content.style.left = w / 2 - contentWidth / 2 + 'px';
overlayContainer.style.display = 'block';
}
function hideOverlay() {
if (timerPromise) $timeout.cancel(timerPromise);
overlayContainer.style.display = 'none';
}
var getComputedStyle = function () {
var func = null;
if (document.defaultView && document.defaultView.getComputedStyle) {
func = document.defaultView.getComputedStyle;
} else if (typeof (document.body.currentStyle) !== "undefined") {
func = function (element, anything) {
return element["currentStyle"];
};
}
return function (element, style) {
return func(element, null)[style];
}
}();
}
}
},
httpProvider = function ($httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
},
httpInterceptor = function () {
return {}
};
var busyIndicatorApp = angular.module('busy.Indicator', []);
//Empty factory to hook into $httpProvider.interceptors
//Directive will hookup request, response, and responseError interceptors
busyIndicatorApp.factory('httpInterceptor', httpInterceptor);
//Hook httpInterceptor factory into the $httpProvider interceptors so that we can monitor XHR calls
busyIndicatorApp.config(['$httpProvider', httpProvider]);
//Directive that uses the httpInterceptor factory above to monitor XHR calls
//When a call is made it displays an overlay and a content area
//No attempt has been made at this point to test on older browsers
busyIndicatorApp.directive('busyIndicator', ['$q', '$timeout', '$window', 'httpInterceptor', busyIndicatorDirective]);
});
</pre>
<pre>
//use this html into your index.html page<br /><div data-busy-indicator="" data-indicator-delay="500">
<div id="overlay-container" class="overlayContainer">
<div id="overlay-background" class="overlayBackground"></div>
<div id="overlay-content" class="overlayContent">
<br />
<img src="/Content/images/spinner.gif" />&nbsp;&nbsp;Loading
</div>
</div>
</div>
</pre>
//css<br />/*Busy Indicator*/
/* wcOverlay directive CSS styles */
.overlayContainer { display: none;}
.overlayBackground {
top:0px;
left:0px;
padding-left:100px;
position:absolute;
z-index:1000;
height:100%;
width:100%;
background-color:#EEEEEE;
opacity:0.3;
}
.overlayContent {
position:absolute;
border: 1px solid #BDBDBD;
background-color:#FAFAFA;
font-weight: bold;
height: 100px;
width: 300px;
z-index:99999;
text-align:center;
}<br />Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-29090248088691785382015-04-13T04:54:00.000+01:002015-04-13T05:04:15.740+01:00Simple Authentication Filter Attribute for web api<pre style="background: white; font-family: Consolas; font-size: 13px;"><span style="color: blue;">public</span> <span style="color: blue;">class</span> <span style="color: #2b91af;">CustomAuthorize</span> : <span style="color: #2b91af;">AuthorizeAttribute</span>
{
<span style="color: blue;">public</span> <span style="color: blue;">override</span> <span style="color: blue;">void</span> OnAuthorization(<span style="color: #2b91af;">HttpActionContext</span> actionContext)
{
<span style="color: blue;">base</span>.OnAuthorization(actionContext);
<span style="color: blue;">if</span> (actionContext.Request.Headers.Authorization != <span style="color: blue;">null</span>)
{
<span style="color: green;">// get value from header</span>
<span style="color: blue;">string</span> authenticationToken = <span style="color: #2b91af;">Convert</span>.ToString(actionContext.Request.Headers.Authorization);
<span style="color: green;">//authenticationTokenPersistant</span>
<span style="color: green;">// it is saved in some data store</span>
<span style="color: green;">// i will compare the authenticationToken sent by client with</span>
<span style="color: green;">// authenticationToken persist in database against specific user, and act accordingly</span>
<span style="color: blue;">string</span> authenticationTokenPersistant = <span style="color: blue;">null</span>;
<span style="color: blue;">if</span> (authenticationTokenPersistant != authenticationToken)
{
<span style="color: #2b91af;">HttpContext</span>.Current.Response.AddHeader(<span style="color: #a31515;">"authenticationToken"</span>, authenticationToken);
<span style="color: #2b91af;">HttpContext</span>.Current.Response.AddHeader(<span style="color: #a31515;">"AuthenticationStatus"</span>, <span style="color: #a31515;">"NotAuthorized"</span>);
actionContext.Response = actionContext.Request.CreateResponse(<span style="color: #2b91af;">HttpStatusCode</span>.Forbidden);
<span style="color: blue;">return</span>;
}
<span style="color: #2b91af;">HttpContext</span>.Current.Response.AddHeader(<span style="color: #a31515;">"authenticationToken"</span>, authenticationToken);
<span style="color: #2b91af;">HttpContext</span>.Current.Response.AddHeader(<span style="color: #a31515;">"AuthenticationStatus"</span>, <span style="color: #a31515;">"Authorized"</span>);
<span style="color: blue;">return</span>;
}
actionContext.Response = actionContext.Request.CreateResponse(<span style="color: #2b91af;">HttpStatusCode</span>.ExpectationFailed);
actionContext.Response.ReasonPhrase = <span style="color: #a31515;">"Please provide valid inputs"</span>;
}
}</pre>
<pre style="background: white; font-family: Consolas; font-size: 13px;">
</pre>
<pre style="background: white; font-family: Consolas; font-size: 13px;">
</pre>
<pre style="background: white; font-family: Consolas; font-size: 13px;">Some important link</pre>
<pre style="background: white; font-family: Consolas; font-size: 13px;">
</pre>
<pre style="background: white;"><span style="font-family: Consolas;">Authentication
1. http://adamalbrecht.com/2014/09/22/authorization-with-angular-and-ui-router/
2. http://weblog.west-wind.com/posts/2013/Apr/18/A-WebAPI-Basic-Authentication-Authorization-Filter
3. https://msdn.microsoft.com/en-us/library/ff649096.aspx
4. http://codeidol.com/community/dotnet/example-adding-users-to-roles/16971/
5. https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
Authentication Important
0. https://github.com/MikeWasson/LocalAccountsApp
1. http://stackoverflow.com/questions/11775594/how-to-secure-an-asp-net-web-api/21634723#21634723
2. http://blog.novanet.no/anti-forgery-tokens-using-mvc-web-api-and-angularjs/
3. http://www.toptal.com/web/cookie-free-authentication-with-json-web-tokens-an-example-in-laravel-and-angularjs
4. https://curah.microsoft.com/202661/angularjs-authentication-resources
5. http://stackoverflow.com/questions/5507234/how-to-use-basic-auth-and-jquery-and-ajax
</span><span style="font-family: Consolas; font-size: 13px;">
</span></pre>
Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-26245368826283287272015-01-18T08:37:00.000+00:002015-01-19T02:39:15.393+00:00SQL SERVER Query Performace Tips and Tricks<div class="MsoNormal">
I see that some people are afraid of databases, academic and professional. Or something likes that, I’d never understand why. They end up learning on the go and not realizing some tips and good practices to optimize performance on their databases and queries.<br /><br />Badly-designed queries can degrade the database performance too much. I have seen huge processing jobs become blazing fast with just some adjusting on the queries executed. It is great to deploy an optimized product that runs dozen times faster than the previous version!<br /><br />So it is necessary to avail the executed queries on database, on whatever platform it is running. This text focuses primarily on SQL Server, but I have sure that most of the tips fits all major platforms.</div>
<div class="MsoNormal">
<br />• Don’t use the * in your queries. A SELECT * creates an overload on table, I/O and network bandwidth.<br /><br />• All columns involved in indexes should appear in WHERE and JOIN clauses in the same sequence they appear in an index.<br /><br />• Avoid VIEWs. Use them only when there are benefits of doing so.<br /><br />• Verify if a critical query gains performance by turning it into a stored procedure.<br /><br />• Avoid too much JOINs on your query: use only what is necessary!<br /><br />• Avoid cursors at all costs!<br /><br />• Always restrict the number of rows and columns of your result. That way, you save disk, memory and network of the database server. Always verify your WHERE clause and use TOP if necessary.<br /><br />• Verify if your server isn’t suffering from not-enough-disk-space illness. Sometimes you lose time searching for other problems only to find out that the server’s disk are almost full. Always have at least 30% of available space in your disc.<br /><br />• SQL Server is case insensitive: he does not care about ‘A’ or ‘a’. Save time and don’t use functions like LOWER and UPPER when comparing VARCHARs.<br /><br />• The decreasing performance order of operators is:<br /><br />• = (faster)>, >=, <, <=LIKE<> (slower)<br /><br />• If a query is slow and your index is not being used to it (remember to check your execution plan), you can force it usingWITH(INDEX=index_name), right after the table declaration on the FROM clause.<br /><br />• Use EXISTS or NOT EXISTS instead of IN or NOT IN. IN operators, creates an overload on database.<br /><br />• Try to use BETWEEN instead of IN, too.<br /><br />• When using LIKE operator, try to leave the wildcards on the right side of the VARCHAR.<br /><br />• Always avoid using functions in your queries. SUBSTRING is your enemy. Try to use LIKE instead.<br /><br />• Queries with all operations on the WHERE clause connected by ANDs are processed from the left to right. So, if an operation returns falsely, all other operations on the right side of it are ignored, because they can’t change the AND result anyway. It is better than to start your WHERE clause with the operations that returns false most of the time.<br /><br />• Sometimes is better to make various queries with UNION ALL than a unique query with too much OR operations in WHERE clause. Test it.<br /><br />• When there is a HAVING clause, it is better to filter most results on the WHERE clause and use HAVING only for what it is necessary.<br /><br />• If there is a need of returning some data fast, even if it is not the whole result, use the FAST option.<br /><br />• Use, if possible, UNION ALL instead of UNION. The second eliminates all redundant rows and requires more server’s resources.<br /><br />• Use fewer subqueries. If you must use it, try to test all of them on a unique block.<br /><br />• Avoid doing many operations on your WHERE clause. If you are searching for a + 2 > 7, use a > 5 instead.<br /><br />• Use more variable tables and less temporary tables.<br /><br />• Use functions to reuse code. But don’t exaggerate by using them!<br /><br />• To delete all rows from a table, use TRUNCATE TABLE statement instead of DELETE.<br /><br />• If you have an IDENTITY primary key and do dozens of simultaneous insertions on in, make it a non-clusterized primary key index to avoid bottlenecks.<br /><br />Now, some tips for the table structure. Sometimes it is necessary to make some alterations to the table design to extract more performance!<br /><br />• All tables should have a primary key. Except data warehouses and the like sometimes.<br /><br />• All tables should have a clusterized index, normally on the primary key.<br /><br />• Don’t be afraid to create non-clusterized indexes on most tables. Just be sure that you aren’t over indexing your tables! Too many indexes degrade insertions.<br /><br />• If you are creating an index, check the queries that are made against the table. Give preference to index columns that appear in most WHERE and JOIN clauses and their order!<br /><br />• Avoid TRIGGERs. Use it only as a last resource. It is better to use CONSTRAINTs and STORED<span style="white-space: pre-wrap;">PROCEDUREs to maintain the integrity of your databases!</span><o:p></o:p></div>
Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-45461490641516728092015-01-13T06:49:00.002+00:002015-01-13T06:50:48.702+00:00Full Size and Full Screen Html Element By Pure CSS<br />
<b><u><span style="color: red;">CSS</span></u></b><br />
<b></b>
<pre style="background: white; font-family: Consolas; font-size: 13px;">.full-size-element {
<span style="color: #a40000;">position</span>: fixed <span style="color: #404081; font-weight: bold;">!important</span>;
<span style="color: #a40000;">position</span>: absolute;
<span style="color: #a40000;">top</span>: 0;
<span style="color: #a40000;">right</span>: 0;
<span style="color: #a40000;">bottom</span>: 0;
<span style="color: #a40000;">left</span>: 0;
<span style="color: #a40000;">z-index</span>: 1050;
<span style="color: #a40000;">background</span>: #fff;
}</pre>
<pre style="background: white; font-family: Consolas; font-size: 13px;"></pre>
<pre style="background: white; font-family: Consolas; font-size: 13px;"></pre>
<pre style="background: white; font-family: Consolas; font-size: 13px;"><b><u><span style="color: red;">JAVA SCRIPT</span></u></b></pre>
<pre style="background: white; font-family: Consolas; font-size: 13px;"><b><u><span style="color: red;">
</span></u></b></pre>
<pre style="background: white; font-family: Consolas; font-size: 13px;">Add this class dynamically by click using javascript or jquery</pre>
<pre style="background: white; font-family: Consolas; font-size: 13px;"></pre>
<pre style="background: white; font-family: Consolas; font-size: 13px;"><pre style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Consolas;"> <span style="color: blue;">var</span> isOpen = <span style="color: blue;">false</span>;
</pre>
<pre style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Consolas;"> <span style="color: blue;">if</span> (!isOpen) {</pre>
<pre style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Consolas;"> $(<span style="color: #a31515;">"#id"</span>).addClass(<span style="color: #a31515;">"full-size-element"</span>);
isOpen = <span style="color: blue;">true</span>;
} <span style="color: blue;">else</span> {
$(<span style="color: #a31515;">"#id"</span> + attrs.niFullScreen).removeClass(<span style="color: #a31515;">"full-size-element"</span>);
isOpen = <span style="color: blue;">false</span>;
}</pre>
<pre style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Consolas;"></pre>
<pre style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Consolas;"><a name='more'></a></pre>
<pre style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Consolas;"><span style="color: magenta;">IF YOU WANT TO USE THE FULL SCREEN WINDOW, HERE IS THE THREE METHOD BELOW</span></pre>
<pre style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Consolas;"><span style="color: green;"> //make full screen element</span>
<span style="color: blue;">function</span> makeFullScreen(divObj) {
<span style="color: blue;">if</span> (divObj.requestFullscreen) {
divObj.requestFullscreen();
}
<span style="color: blue;">else</span> <span style="color: blue;">if</span> (divObj.msRequestFullscreen) {
divObj.msRequestFullscreen();
}
<span style="color: blue;">else</span> <span style="color: blue;">if</span> (divObj.mozRequestFullScreen) {
divObj.mozRequestFullScreen();
}
<span style="color: blue;">else</span> <span style="color: blue;">if</span> (divObj.webkitRequestFullscreen) {
divObj.webkitRequestFullscreen();
}
inFullScreen = <span style="color: blue;">true</span>;
<span style="color: blue;">return</span>;
}
<span style="color: green;">//reset full screen element</span>
<span style="color: blue;">function</span> reset() {
<span style="color: blue;">if</span> (document.exitFullscreen) {
document.exitFullscreen();
}
<span style="color: blue;">else</span> <span style="color: blue;">if</span> (document.msExitFullscreen) {
document.msExitFullscreen();
}
<span style="color: blue;">else</span> <span style="color: blue;">if</span> (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
<span style="color: blue;">else</span> <span style="color: blue;">if</span> (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
inFullScreen = <span style="color: blue;">false</span>;
<span style="color: blue;">return</span>;
}
<span style="color: green;">// get full screen element across several browsers</span>
<span style="color: blue;">function</span> getFSWindow() {
<span style="color: blue;">if</span> (document.fullscreenElement) {
<span style="color: blue;">return</span> document.fullscreenElement;
}
<span style="color: blue;">else</span> <span style="color: blue;">if</span> (document.msFullscreenElement) {
<span style="color: blue;">return</span> document.msFullscreenElement;
}
<span style="color: blue;">else</span> <span style="color: blue;">if</span> (document.mozFullScreenElement) {
<span style="color: blue;">return</span> document.mozFullScreenElement;
}
<span style="color: blue;">else</span> <span style="color: blue;">if</span> (document.webkitFullscreenElement) {
<span style="color: blue;">return</span> document.webkitFullscreenElement;
}
}</pre>
<pre style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Consolas;"><span style="color: magenta;">THE CALLING OF THREE METHOD</span></pre>
<pre style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Consolas;"><span style="color: blue;">var</span> inFullScreen = <span style="color: blue;">false</span>; <span style="color: green;">// flag to show when full screen</span>
</pre>
<pre style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Consolas;"><span style="color: blue;">var</span> divO = $(<span style="color: #a31515;">"#ID"</span>);
<span style="color: blue;">if</span> (inFullScreen == <span style="color: blue;">false</span>) {
makeFullScreen(divO); <span style="color: green;">// open to full screen</span>
} <span style="color: blue;">else</span> {
reset();</pre>
<pre style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; font-family: Consolas;">}</pre>
</pre>
Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-88812017802606675412015-01-13T02:52:00.001+00:002015-01-13T02:52:22.843+00:00Task Management Software List<div class="MsoNormal">
</div>
<ol>
<li><span style="font-size: 7pt; font-stretch: normal; text-indent: -0.25in;"> </span><span style="text-indent: -0.25in;">Bugzilla</span></li>
<li><span style="font-size: 7pt; font-stretch: normal; text-indent: -0.25in;"> </span><span style="text-indent: -0.25in;">Exceptional</span></li>
<li><span style="font-size: 7pt; font-stretch: normal; text-indent: -0.25in;"> </span><span style="text-indent: -0.25in;">FogBugz</span></li>
<li><span style="text-indent: -0.25in;">Jira</span></li>
<li><span style="font-size: 7pt; font-stretch: normal; text-indent: -0.25in;"> </span><span style="text-indent: -0.25in;">Lighthouse</span></li>
<li><span style="font-size: 7pt; font-stretch: normal; text-indent: -0.25in;"> </span><span style="text-indent: -0.25in;">Mantis</span></li>
<li><span style="font-size: 7pt; font-stretch: normal; text-indent: -0.25in;"> </span><span style="text-indent: -0.25in;">Rational ClearQuest</span></li>
<li><span style="font-size: 7pt; font-stretch: normal; text-indent: -0.25in;"> </span><span style="text-indent: -0.25in;">Redmine</span></li>
<li><span style="font-size: 7pt; font-stretch: normal; text-indent: -0.25in;"> </span><span style="text-indent: -0.25in;">Team Foundation Server</span></li>
</ol>
<br />
<div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -.25in;">
<o:p></o:p></div>
Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-43399334918664167242015-01-08T11:28:00.003+00:002015-01-08T11:29:05.420+00:00Important Link Domain Driven Design1. http://digitalpolis.co.uk/software-thoughts/ddd-mvc-entity-framework/<br />
2. http://techbrij.com/generic-repository-unit-of-work-entity-framework-unit-testing-asp-net-mvc<br />
3. http://blog.fedecarg.com/2009/03/11/domain-driven-design-and-mvc-architectures/<br />
4. http://www.infoq.com/articles/ddd-in-practice<br />
5. http://blogs.msdn.com/b/cesardelatorre/archive/2010/03/26/our-brand-new-ddd-n-layer-net-4-0-architecture-guide-book-and-sample-app-in-codeplex.aspx<br />
6. https://fnhmvc.codeplex.com/<br />
7. http://rogeralsing.com/tag/ddd/<br />
<br />
<br />
http://msdn.microsoft.com/en-us/library/ms143432.aspx<br />
<br />Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-23873930733277797222015-01-08T05:35:00.001+00:002015-01-08T05:35:23.881+00:00create dynamic property after creating instance of c# class<div style="background: rgb(255, 255, 255); border: 0px; clear: both; font-family: Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif; font-size: 14px; line-height: 17.8048000335693px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
You could use Reflection:</div>
<pre class="lang-cs prettyprint prettyprinted" style="background: rgb(238, 238, 238); border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif; font-size: 14px; line-height: 17.8048000335693px; margin-bottom: 10px; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto; word-wrap: normal;"><code style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">using </span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">System</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
using </span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">System</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">Reflection</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">class</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">Foo</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">string</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">Bar</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> get</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">set</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">public</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">class</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">Program</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">static</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">void</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">Main</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">string</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> name </span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="background: transparent; border: 0px; color: maroon; margin: 0px; padding: 0px; vertical-align: baseline;">"Foo"</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">string</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> property </span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="background: transparent; border: 0px; color: maroon; margin: 0px; padding: 0px; vertical-align: baseline;">"Bar"</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">string</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> value </span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="str" style="background: transparent; border: 0px; color: maroon; margin: 0px; padding: 0px; vertical-align: baseline;">"Baz"</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="background: transparent; border: 0px; color: grey; margin: 0px; padding: 0px; vertical-align: baseline;">// Get the type contained in the name string</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">Type</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> type </span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">Type</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">GetType</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">name</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">true</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="background: transparent; border: 0px; color: grey; margin: 0px; padding: 0px; vertical-align: baseline;">// create an instance of that type</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">object</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> instance </span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">Activator</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">CreateInstance</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">type</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="background: transparent; border: 0px; color: grey; margin: 0px; padding: 0px; vertical-align: baseline;">// Get a property on the type that is stored in the </span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="background: transparent; border: 0px; color: grey; margin: 0px; padding: 0px; vertical-align: baseline;">// property string</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">PropertyInfo</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> prop </span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> type</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">GetProperty</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">property</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="background: transparent; border: 0px; color: grey; margin: 0px; padding: 0px; vertical-align: baseline;">// Set the value of the given property on the given instance</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
prop</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">SetValue</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">instance</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> value</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> </span><span class="kwd" style="background: transparent; border: 0px; color: darkblue; margin: 0px; padding: 0px; vertical-align: baseline;">null</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="com" style="background: transparent; border: 0px; color: grey; margin: 0px; padding: 0px; vertical-align: baseline;">// at this stage instance.Bar will equal to the value</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">Console</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">WriteLine</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(((</span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">Foo</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">instance</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">).</span><span class="typ" style="background: transparent; border: 0px; color: #2b91af; margin: 0px; padding: 0px; vertical-align: baseline;">Bar</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">
</span><span class="pun" style="background: transparent; border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">}</span></code></pre>
Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com1tag:blogger.com,1999:blog-8512336095624972353.post-13998423619725475862015-01-01T03:22:00.003+00:002015-01-01T03:22:57.326+00:00Dynamic style - manipulating CSS with JavaScript<pre style="background: white; font-family: Consolas; font-size: 13px;"><span style="color: green;"> //remove style sheet</span>
<span style="color: blue;">var</span> sheetToBeRemoved = document.getElementById(styleID);
<span style="color: blue;">if</span> (sheetToBeRemoved) {
<span style="color: blue;">var</span> sheetParent = sheetToBeRemoved.parentNode;
sheetParent.removeChild(sheetToBeRemoved);
}
<span style="color: green;">//add style sheet</span>
<span style="color: blue;">var</span> sheet = document.createElement(<span style="color: #a31515;">'style'</span>);
sheet.type = <span style="color: #a31515;">'text/css'</span>;
sheet.id = styleID;
sheet.innerHTML = css;
document.getElementsByTagName(<span style="color: #a31515;">'head'</span>)[0].appendChild(sheet)
<span style="color: green;">//document.body.appendChild(sheet);</span>
<span style="color: green;">//apply</span>
element.addClass(modalClass);</pre>
Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-39281401393716208532014-12-03T10:48:00.002+00:002014-12-03T10:48:41.308+00:00Some useful link in css<b>Example</b><br />
<b><br /></b>
--Animations<br />
1. http://codepen.io/vennsoh/full/lckri<br />
<br />
--Page Splitter<br />
1. http://codepen.io/istrasoft/pen/unKsl/<br />
<br />
--Window<br />
1. http://metroui.org.ua/window.html<br />
2. http://metroui.org.ua/examples.html<br />
<br />
--Login Screen<br />
1. http://www.corelangs.com/css/box/fulloverlay.html<br />
<br />
--Layout<br />
1. http://www.creativebloq.com/css3/advanced-rwd-layout-techniques-71412175<br />
2' http://www.sitepoint.com/adding-css-animations-angularjs-applications/<br />
<br />
--Table layout<br />
1. http://salzerdesign.com/test/fixedTable.html<br />
<br />
--Bootstrap Mixed Form<br />
1. http://www.bootply.com/127826<br />
<br />
--File Style<br />
1. http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/<br />
<br />
<br />
<b>layout design </b><br />
<br />
1. http://bootstrapbay.com/preview/boom-admin-dashboard-web-app-template-B86EFAA<br />
2. http://www.bootply.com/templates<br />
3. http://jmdobry.github.io/angular-cache/guide.html#http<br />
4. http://wsnippets.com/category/twitter-bootstrap/<br />
5. http://wsnippets.com/free-twitter-bootstrap-based-admin-templates/<br />
<br />
--Responsive<br />
1. http://www.toptal.com/front-end/introduction-to-responsive-web-design-pseudo-elements-media-queries<br />
2. http://webdesign.tutsplus.com/tutorials/a-flexible-approach-to-responsive-navigation--webdesign-8397<br />
3. http://css-tricks.com/fluid-width-equal-height-columns/<br />
4. http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height<br />
5. http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/<br />
<br />
<b>Example</b><br />
0. http://learnlayout.com/index.html<br />
1. http://www.tutorialrepublic.com/twitter-bootstrap-examples.php<br />
2. http://bootsnipp.com/resources<br />
3. http://tympanus.net/Tutorials/FullscreenSlitSlider/index2.html<br />
4. http://spyrestudios.com/30-free-bootstrap-code-samples/<br />
5. http://bootstrapzero.com/<br />
6. http://usman.it/themes/charisma/<br />
7.http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table<br />
<br />
<b>Guide Line</b><br />
0. http://css-tricks.com/css-style-guides/<br />
1. http://www.bbc.co.uk/guidelines/futuremedia/technical/semantic_markup.shtml<br />
2. http://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/<br />
3. http://webdeveloperplus.com/css/25-incredibly-useful-css-tricks-you-should-know/<br />
4. http://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net-6741<br />
5. http://learn.shayhowe.com/html-css/writing-your-best-code/<br />
6. http://isobar-idev.github.io/code-standards/<br />
7. http://www.codeproject.com/Tips/666578/HTML-and-Some-CSS-Best-Practice<br />
8. http://www.w3.org/2001/06/manual/<br />
9. http://www.sitepoint.com/10-online-tools-apps-optimize-format-css/<br />
10.http://www.tutorialspoint.com/bootstrap/bootstrap_quick_guide.htm<br />
<br />
<b>Menu</b><br />
<b><br /></b>
1. http://www.joomla-css.nl/en/create-your-own-joomla-3-template/modify-the-base-template/create-a-dropdown-menu<br />
2. http://themefoundation.com/responsive-navigation-problems-and-proposals/<br />
3. http://webdesign.tutsplus.com/tutorials/big-menus-small-screens-responsive-multi-level-navigation--webdesign-8452<br />
4. http://vadikom.github.io/smartmenus/src/demo/index.html<br />
<br />
<b>Sub Menu Design</b><br />
1. http://www.bootply.com/92442<br />
<br />
<br />
<b>SASS</b><br />
<b><br /></b>
1. http://geek-rocket.de/frontend-development/scss-styleguide-with-bem-oocss-smacss/<br />
2. http://www.integralist.co.uk/posts/guide-to-using-sass/<br />
3. http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/<br />
4. https://wiki.bath.ac.uk/display/webservices/CSS+and+Sass+coding+conventions<br />
5. https://www.codeschool.com/courses/assembling-sass<br />
6. http://leveluptuts.com/tutorials/sass-tutorials<br />
7. https://github.com/keegan-lillo/Gumby/tree/feature/modular-scale-v2.x/sass<br />
8. http://webdesign.tutsplus.com/tutorials/how-to-use-sass-to-build-one-project-with-multiple-themes--cms-22104<br />
9. http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/<br />
10. http://web-design-weekly.com/2013/05/12/handy-sass-mixins/<br />
11. http://designwoop.com/2014/07/10-useful-sass-mixins-modern-developer/<br />
<br />
<b>Tools</b><br />
1. http://css2sass.herokuapp.com/<br />
2. http://csstoss.com/<br />
3. http://www.styleneat.com/index.php<br />
<br />
4. http://www.codebeautifier.com/<br />
<br />
<b>Scroll Content</b><br />
1. http://css-tricks.com/scroll-fix-content/<br />
<br />
<b>SVG</b><br />
1. https://psdtowp.net/svg.htmlShohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-45190827313037002142014-11-23T14:40:00.002+00:002014-11-23T14:40:36.142+00:00How to use Sass in Visual StudioPlease see the link<br />
<br />
<h2>
http://www.codeproject.com/Articles/844698/Start-SASS-in-Visual-Studio-with-example</h2>
Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0tag:blogger.com,1999:blog-8512336095624972353.post-81764003840521767582014-11-23T14:37:00.002+00:002014-11-23T14:38:22.143+00:00CSS and SASS Guide Line<div class="separator" style="clear: both; text-align: center;">
</div>
1. do not use !important<br />
<div>
<div>
2. use default !default</div>
<div>
3. use !important for state</div>
<div>
4. Order maintain</div>
<div>
5. structure, presentation, behaviour</div>
<div>
6. use em </div>
<div>
7. use % </div>
<div>
9. avoid import</div>
<div>
10. do not use underscore or dashes</div>
<div>
11. top down structure like generic class, header, nav, main-content.</div>
<div>
12. combine element like h1, h2, h3{}</div>
<div>
13. create your html first</div>
<div>
14. use multiple classes</div>
<div>
15. use short hand</div>
<div>
16. comments right way</div>
<div>
17. understand the block or inline</div>
<div>
18. use compressors</div>
<div>
19. use margin margin: 0 auto; to center layout</div>
<div>
20. do not this <div class="header-text"><h1>Header Text</h1></div></div>
<div>
21. avoid css hack</div>
<div>
22. do not use negative mergin to hide</div>
<div>
23. Avoid Extra Selectors "body #container .someclass ul li {....}" to .someclass li {...}</div>
<div>
24. color #000</div>
<div>
25. use font normalize YUI fonts.css</div>
<div>
26. should be written border: 1px solid #999;</div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div>
--Guide Line</div>
<div>
1. http://www.bbc.co.uk/guidelines/futuremedia/technical/semantic_markup.shtml</div>
<div>
2. http://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/</div>
<div>
3. http://webdeveloperplus.com/css/25-incredibly-useful-css-tricks-you-should-know/</div>
<div>
4. http://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net-6741</div>
<div>
5. http://learn.shayhowe.com/html-css/writing-your-best-code/</div>
<div>
6. http://isobar-idev.github.io/code-standards/</div>
<div>
7. http://www.codeproject.com/Tips/666578/HTML-and-Some-CSS-Best-Practice</div>
<div>
8. http://www.w3.org/2001/06/manual/</div>
</div>
<div>
<br />
--sass</div>
<div>
1. http://geek-rocket.de/frontend-development/scss-styleguide-with-bem-oocss-smacss/<br />
2. http://www.integralist.co.uk/posts/guide-to-using-sass/<br />
3. http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/<br />
4. https://wiki.bath.ac.uk/display/webservices/CSS+and+Sass+coding+conventions<br />
5. https://www.codeschool.com/courses/assembling-sass<br />
6. http://leveluptuts.com/tutorials/sass-tutorials<br />
<div>
<br /></div>
</div>
Shohel Ranahttp://www.blogger.com/profile/16188008708403871226noreply@blogger.com0