BEM Methodology : Introduction

BEM stands for Block Element Modifier.

Blocks, elements, and modifiers are all called BEM entities.

It is a notion that can be used both to refer to an individual BEM entity and as a generic term for blocks, elements, and modifiers.

BEM methodology was invented at Yandex to develop sites which should be launched fast and supported for a long time. It helps to create extendable and reusable interface components. (Source)

What is BEM Methodology?

When you are building smaller websites, how you organize your styles is usually not a big problem. You create your usual files, write all the needed CSS, and that’s all.

However, when it comes to larger scale, complex projects, how you organize your code becomes crucial.

How the code is structured is even more important if you are working in a team consisting of multiple front-end and back-end developers.

BEM Methodology will substantial improve code maintainability and speed up the development process

Today, there are plenty of methodologies with the aim of reducing CSS code and making your CSS code more maintainable. In this article, I am going to explain and provide a few examples of one of them: BEM.

The main idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules. If you ever saw a class name like header__form--search, that is BEM in action. Yes, classes can be named very long, but they are all readable and understandable Read more…

Auto Update Copyright Year using JavaScript

Copy the script code below and paste it into your website where you want your copyright notice to appear.

<script language=”javascript” type=”text/javascript”>

document.write(‘©’ );

document.write(‘YourSiteName.com’);

document.write(new Date().getFullYear());

</script>

Happy Coding 🙂

How to detect browser name and version using javascript or jquery in asp.net

<html>
<head>
 <script>
 navigator.sayswho = (function () {
 var ua = navigator.userAgent, tem, M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
 
 if (/trident/i.test(M[1])) {
 tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
 //return 'IE ' + (tem[1] || '');
 return { name: 'IE ', version: (tem[1] || '') };
 }
 
 if (M[1] === 'Chrome') {
 tem = ua.match(/\bOPR\/(\d+)/);
 //if (tem != null) return 'Opera ' + tem[1];
 if (tem != null) { return { name: 'Opera', version: tem[1] }; }
 }
 
 M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];

 if ((tem = ua.match(/version\/(\d+)/i)) != null) {
 M.splice(1, 1, tem[1]);
 }
 alert('Browser Name: ' + M.join(' and Version # '));
 return M.join(' ');
 })();
 </script>
</head>
</html>

Copy above code and paste it into notepad and save notepad as .html file. Now open .html file and you will see the result.

http://www.codeproject.com/Answers/898796/How-to-get-browser-name-in-javascript-or-jquery-in#answer2

Detecting a mobile browser

In the growing mobile internet world, it is necessary to make your application mobile browser friendly.

I am working on client project where client has some specific requirement when application is open in mobile device browser. I have to show/hide CSS class based on browser detection. I was googling for solution to detect mobile device/browser using JavaScript or jQuery. I found the solution which works great for me.

Source: http://www.abeautifulsite.net/detecting-mobile-devices-with-javascript/

Github: https://github.com/kaimallea/isMobile

Minified version of script included in the HTML since it’s <1kb.

<script>
// Minified version of isMobile included in the HTML since it’s <1kb
(function(i){var e=/iPhone/i,n=/iPod/i,o=/iPad/i,t=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,r=/Android/i,d=/BlackBerry/i,s=/Opera Mini/i,a=/IEMobile/i,b=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,h=RegExp(“(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)”,”i”),c=function(i,e){return i.test(e)},l=function(i){var l=i||navigator.userAgent;this.apple={phone:c(e,l),ipod:c(n,l),tablet:c(o,l),device:c(e,l)||c(n,l)||c(o,l)},this.android={phone:c(t,l),tablet:!c(t,l)&&c(r,l),device:c(t,l)||c(r,l)},this.other={blackberry:c(d,l),opera:c(s,l),windows:c(a,l),firefox:c(b,l),device:c(d,l)||c(s,l)||c(a,l)||c(b,l)},this.seven_inch=c(h,l),this.any=this.apple.device||this.android.device||this.other.device||this.seven_inch},v=i.isMobile=new l;v.Class=l})(window);

// My own arbitrary use of isMobile, as an example
(function () {
var MOBILE_SITE = ‘/mobile/index.html’, // site to redirect to
NO_REDIRECT = ‘noredirect’; // cookie to prevent redirect

// I only want to redirect iPhones, Android phones and a handful of 7″ devices
if (isMobile.apple.phone || isMobile.android.phone || isMobile.seven_inch) {

// Only redirect if the user didn’t previously choose
// to explicitly view the full site. This is validated
// by checking if a “noredirect” cookie exists
if ( document.cookie.indexOf(NO_REDIRECT) === -1 ) {
document.location = MOBILE_SITE;
}
}
})();
</script>

Happy Coding 🙂

Rotate Image 360

Rotate Image 360 degree using Jquery & CSS

Add animation effect without flash using jquery and css. Add following code of block under HEAD section and before BODY section.

<style>

.rotate{
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;

overflow:hidden;

}

.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}

</style>

<body>

<img src=”Demo1.png” class=”rotate” />

</body>