1. ASP.NET Core Tag Helpers

2. About Me Web developer since 1995 Pluralsight Author
3rd Degree Black Belt, Tae Kwon Do
ASP.NET MVP
@boedie
weblogs.asp.net/boedie

3. ASP.NET Core Open source and cross platform No more System.Web.dll!
Full .NET Framework, .NET Core (Windows, Mac, Linux)
No more System.Web.dll!
MVC/Web API unified (no Web Forms)
Modular
wwwroot folder
Tag Helpers
Cross platform
Windows
Mac
Linux
Web Forms is NOT in .NET Core (use Full .NET Framework)
wwwroot – only files from this folder will be served

4. Razor View engine for ASP.NET MVC HTML with server side code fragments
@ prefix for code blocks
Visual Studio IntelliSense
.cshtml (C#), .vbhtml (VB)

5. Tag Helpers
“Enable server-side code to participate in creating and rendering HTML elements in Razor files”
Goal is to look much more like HTML
Pascal-cased class and property names for tag helpers are translated into their “lower kebab” case
Look like HTML – really helps designers
Microsoft.AspNetCore.Razor.Tools
Purple font on elements and attributes impacted by tag helper (needed to install “Razor Language Services”)
Compared to web server controls
“Don’t own the element they’re associated with; they simply participate in the rendering of the element and content”
“Tag Helpers can modify the tag and content of HTML elements that they’re scoped to, but don’t directly modify anything else on a page”
No DOM

6. Built In Tag Helpers <environment> <cache>
<distributed-cache>
Attributes
Form
Link and script
Image
Anchor
<distributed-cache> supports SQL Server or Redis

7. Custom Tag Helpers Derive from TagHelper
Implement ITagHelper,
Target elements based on element name or attributes
Visual Studio “Razor Tag Helper” template
Target elements using [HtmlTargetElement] or match based on class name (up to TagHelper)
Add to _ViewImports.cshtml or individual view files

8. Images http://httparchive.org/interesting.php#bytesperpage
63% of average page weight is images (3/1/2016), 59% in Nov 2010
Average web page has 100 requests, 54 of which are images (
Alexa Top 1,000,000 Sites (
JPG (46%), PNG (29%), GIF (23%), SVG (1%), WebP (0%)

9. Lazy Load Images
jQuery plugin and modified HTML to request images as scroll down
data-original – set to image URL
src – set to 1x1 clear pixel image
Pages with lots of images only load those “above the fold”

10. Responsive Image Goals
Avoid images if possible
CSS 3 (gradients, rounded corners, etc.)
Web Fonts
Icon Fonts
Vector images if possible (SVG)
Want to efficiently provide the most appropriate image for the design and device
Web fonts – often used images in the past to get specific fonts

11. Responsive Image Techniques
CSS 3 Media Queries
JavaScript
Server Image Adaptation
New Image Format? …
<picture>
<img srcset…
Client Hints
CSS 3 Media Queries
Background images
Image-set( ) – not well implemented yet (be like using “srcset” for bg images)
JavaScript approaches had various choices for “src” (mobile version, 1x1 pixel, desktop, etc.) that cause some level of double download (and rely on JavaScript support)
“Lookahead pre-parser” starts to request images before CSS and JavaScript downloads are completed…
Steve Souders - “preloading is the single biggest performance improvement browsers have ever made.”
Client Hints -

12. <picture> http://tinyurl.com/j5zsmf2
Use Cases (
“Art Direction”
Image Formats
Want specific control over what is loaded…
Art Direction – “change an image so it can be targeted towards the features of a particular display” (often cropping)
Order of sources matter
“We’re progressively enhancing the img by wrapping it in a picture.” (so styles and such go against img)

13. <img srcset… http://tinyurl.com/m894jsw
Use Cases (
Resolution/Viewport
Device-pixel-ratio
Rest
Inform browser about image widths and let it do what is “best”…
Resolution/Viewport – most common case to show same image at various sizes
Device-pixel-ratio – 1, 1.5, 2, 3
Sizes – tells the browser roughly how big the image will be (since don’t know rendered size yet), unfortunate need that in markup…
“unless the image source matches exactly the size that the image is being displayed in the page, it is always going to be too big. There is always going to be an opportunity to optimize it further by providing a smaller image” (Jason Grigsby)
Eventually do network connection speed detection or user preferences??

14. Picturefill http://scottjehl.github.io/picturefill/
Polyfill for srcset and <picture>

15. Multiple Tag Helpers
Multiple tag helpers can apply to the same element
Order – runs applicable tag helpers lowest to highest value
Code as if previous tag helper may have already modified…

16. Miscellaneous @tagHelperPrefix Opt out using “!”
Can change how they look (Tools > Options > Environment > Fonts and Colors)
3rd party tag helpers (Telerik, DevExpress, Component One, …)
Opt out using ! <!div></!div>

17. ASP.NET Core 2.0 TagHelperComponent
<environment> - include/exclude

18. Resources github.com/aspnet www.asp.net/core

19. Questions
@boedie
weblogs.asp.net/boedie