ZenCoding
ZenCoding is the one of the greatest
feature (at least I feel) in the Web essentials. It helps you a lot
to write HTML code in fastest way even visual studio 2013 provides
itself a lot of features like (automatically closes (or
modify/update) the tag when you write start tag and etc).
You can use the ZenCoding by
installing from Web Essentials site or
visual studio gallery into Visual Studio.
Zen coding is very much easy to
implement as you have some idea on CSS stuff. It uses the syntax
like CSS selectors. The selectors are
Selector
|
Usage
|
| # | Id |
| . | class |
| > | Child element |
| ^ | Climbs Up |
| * | Multiplication |
| + | Sibling element |
| [] | Custom Attribute |
| {} | Creates text for an element |
| $ | Incremental number (starts with 1) |
| $$ | Incremental number with padding(starts with 01) |
In this ZenCoding, you only need to
remember the selector and its usage, Based on that you can make “n”
number of combinations while designing HTML based on your
requirement. It saves the development time a lot.
Now, I am going to explain few
combinations which helps you to gear up on usage of ZenCoding in your
daily base development environment.
ZenCoding implementation, you have to type the expression and then by clicking on "TAB" then automatically that expression would be changed to HTML format.
The below provided examples each one contains three sections in a comments.
1. Requirement: It indicates the requirement to make a ZenCoding expression
2. Expression: ZenCoding Expression or syntax to achieve the requirement
3. Result: Result of the ZenCoding Expression
ZenCoding implementation, you have to type the expression and then by clicking on "TAB" then automatically that expression would be changed to HTML format.
The below provided examples each one contains three sections in a comments.
1. Requirement: It indicates the requirement to make a ZenCoding expression
2. Expression: ZenCoding Expression or syntax to achieve the requirement
3. Result: Result of the ZenCoding Expression
Scenario 1:
Note: This scenario,I have used $ for anchor id and $$ for anchor tag text. you can identify the difference in result.
As part of ZenCoding, Lorem Pixel Generator is also one of the feature provided in Web Essentials. It helps to generate sample or random images from lorempixel site.
It generates image tag by typing expression and then hitting "TAB" button.
I hope you get some brief idea on ZenCoding and Lorem Pixel generator for those are part of html features in Web Essentials.Please provide your valuable suggestions and comments if any.
1. Web Essentials html Features
2. Zen Coding Techniques by John Papa
Scenario 2:
Scenario 3:
Scenario 4:
Note: This scenario,I have used $ for anchor id and $$ for anchor tag text. you can identify the difference in result.
Scenario 5:
Scenario 6:
Section Items
Lorem Pixel Generator
As part of ZenCoding, Lorem Pixel Generator is also one of the feature provided in Web Essentials. It helps to generate sample or random images from lorempixel site.
It generates image tag by typing expression and then hitting "TAB" button.
The default image tag will be generated with height and width of 30 pixels. you can change the height and width of the image as well. The code pattern is as follows.
you can display the random images of animals, cats and nature etc from lorempixel site.
The other expressions, you can use in Lorem Pixel is as follows;
Conclusion:
I hope you get some brief idea on ZenCoding and Lorem Pixel generator for those are part of html features in Web Essentials.Please provide your valuable suggestions and comments if any.
References:
1. Web Essentials html Features
2. Zen Coding Techniques by John Papa
Very interesting and helpful article.
ReplyDeleteThank you Amitava! :)
Delete