UI Gyan

Extra small (xs) - below 576px Small (sm) - between 576px and 768px Medium (md) - between 768px and 992px Large (lg) - between 992px and 1200px Extra Large (xl) - over 1200px

If you're front-end developer than you must be knowing the little struggle of implementing preprocessors like Saas and Less. This technologies helps you in adding second layer on top of your css layer. Most useful concepts in implementing the second layer are defining reusable global variables that we can reuse again. Good to know that now, CSS variables are now here and it will allow you to do a few things that you couldn't even do with preprocessors! In CSS now you can define :root { --main-bg: #dddddd; } body { background: var(--main-bg); } .container{ background: var(--main-bg); } You need to wrap variable under var() function. You can do inheritance .container { --type-font: Gotham; } .wrapper, .container { font-family: var(--type-font); } Even it allw you to specify multiple levels of fallbacks .container { font-family: var(--type-family, Arial); } Variable can be accessed and value can be changed via javascrpit var body =

Variable Name Single ' Double " Make this HTML safe (so it can be written inside HTML attributes) [ Info ] Also convert ' to ' (for use with HTML attributes that use ' as delimiters) Put in HTML and JavaScript code in here

Current Browser Versions Browser Happy site happy to help you...  Browser Happy

Overivew of Media Queries Media Queries are web modern way method lets say logical expression in css by which responsive page which can be work on any device can be created. We can set different target points/ media expressions for document. When user changes the resolution or user opens up same page in different devices if it is satifying the expression defined or lets say if its matching the breakpoint defined in media queris. Web page will automaticaly excute and apply all css defined in that media queries. There are different ways of doing it //External: <link rel="stylesheet" type="text/css" href="style.css" media="only screen and (max-width: 340px)" /> //While Importing: @import "style.css" only screen and (max-width: 340px); //Within CSS: <style type="text/css"> @media only screen and (max-width: 340px){ } </style> Here's a simple example of the media query for st

Adaptive Vs Responsive design Obective of both the approach is same to make your page works in any device and resolutions. For repsonsive design respond to the size of the browser at any given point. No matter what the browser width may be, the site adjusts its layout in a way that is optimized to the screen. In case of Adaptive design Adaptive design adapt to the width of the browser at a specific points. In other words, the website is only concerned about the browser being a specific width, at which point it adapts the layout. Responsive - Adapts at anytime any resolutions and any device. jQuery( window ).resize(function() { jQuery(div).html( jQuery( window ).width() ); }); Adaptive - Adapts at specific given point. @media screen and (max-width: 300px) { div { width: 200px; } }

GIT CHEAT SHEET STAGE & SNAPSHOT Working with snapshots and the Git staging area git status show modified files in working directory, staged for your next commit git add [file] add a file as it looks now to your next commit (stage) git reset [file] unstage a file while retaining the changes in working directory git diff diff of what is changed but not staged git diff --staged diff of what is staged but not yet committed git commit -m “[descriptive message]” commit your staged content as a new commit snapshot SETUP Configuring user information used across all local repositories git config --global user.name “[firstname lastname]” set a name that is identifiable for credit when review version history git config --global user.email “[valid-email]” set an email address that will be associated with each history marker git config --global color.ui auto set automatic command line coloring for Git for easy reviewing SETUP & INIT Configuring user information,

npm install -g @angular/cli ng new angular-tour-of-heroes cd angular-tour-of-heroes ng serve --open ng generate component heroes ng generate service hero ng generate service hero --module=app ng generate module app-routing --flat --module=app npm install angular-in-memory-web-api --save

Git Client Installation: For using command line, go to url  https://git-scm.com/downloads   and download the git client(Git Bash) for windows. For using windows GUI tool, go to url https://desktop.github.com/   and download the GIT Desktop tool for windows. Git Bash Usage: For cloning remote repository to local repository(in your windows machine), first set your present working directory to local repository parent folder by using below command: Command Syntax: cd <working directory> Example: cd C://Users/123456/git repo Then Use below command to clone: Command Syntax: git clone <git url for repo> Example: git clone https://github.com/jetway/Sitewide-frontend_VS.git By default, it will be checked out to master branch. Then in order to checkout to another feature branch which is already created in remote repository in git server, below command needs to be used. Command Syntax: git checkout  <feature_branch> Example: git checkout

Few nice features of HTML5 HTML5 is providing so many different useful features. without doubt its making web developer life easy. Some of the cool features I've listed below No Need for any XHTML DOCTYPE definition anymore. Your webpage can work without this. Video tag: You can embed video without third-party proprietary plug-ins or codec. Video becomes as easy as embedding an image. Your browser is old. Download this video instead. Audio tag: You can also embed Audio without third-party proprietary plug-ins. Download this file. Semantic tags: There is no need to remember those messy way of codding for web developers. HTML5 comes with very big list of semantic tags. Local Storage: This nice features allows in HTML5 allow you to save or remember everything you type even after you refresh or close the browser. Works nicely in modern