The document provides insights and tools essential for modern .NET developers, with an emphasis on responsive design using Bootstrap, client-side MVC frameworks like AngularJS, and performance optimization techniques. It also outlines best practices for deployment, browser compatibility, and testing strategies to enhance web application development. The presentation is a comprehensive guide tailored for developers, highlighting both practical tools and theoretical considerations in web development.

1. Ofer Zelig
@oferzelig
http://fullstack.info
Pearls and Must-Have
Tools for the Modern
Web / .NET Developer

2. Quick Housekeeping
• It’s just a sample - don’t expect to see everything
• It’s just MY opinion
• Aimed for .NET developers, but many things are
cross platform
• Quick, condensed, presentation will be uploaded
• Those of you who read it in 2015+, please consider
the fact it’s written in 6/2014 

3. RESPONSIVE DESIGN

4. • Two approaches:
• Start wide and change flow as you get narrow
• Start narrow and change flow as you get wide
• Bootstrap 3+ : Mobile friendly (start narrow)
• More about Bootstrap later
Responsive Design

5. • Don’t know how to start? It’s very easy
@media (min-width: 768px) { /* your CSS rules */ }
• There’s a good boilerplate code for all common
resolutions
• A very few gotchas:
• Handling images (proportions etc.)
• Collapsible menus require a bit of JS
• As always, you need to test multiple browsers/platforms
Responsive Design

6. • Is it a new project?
Don’t hesitate – use Bootstrap
• Don’t know what Bootstrap is?
Responsive Design

8. • Now seriously. Bootstrap is:
• Premade CSS rules for full responsive design, starting
from mobile and growing to large desktops
• Styles for forms, controls & states, warning/info
messages, images & thumbnails, menus, progress bars
and a lot more
• Scripts for common functionality: modal dialogs,
button behavior, drop downs & menu effects, tooltips,
carousels…
• Bullet-proof CSS functionality (centering, clearfix,
container pulling, accessibility substitutions…
• Cross browser (IE8+) and cross platform
Responsive Design

9. A shiny new site - where do I begin?
• You don’t reinvent the wheel
• Bootstrap or one of hundreds Bootstrap-based
templates
• Just make sure it’s 3.2+ or you’ll regret later
• Templates today are not what they used to be
• Good links in the slideshow notes
Templates

10. Templates
• Admin interfaces

11. Templates
• Admin interfaces
• Dozens of admin templates to choose from
• Based on Bootstrap and contain lots of features that
either:
• Will consume lots of your time, instead of focusing on
code to deliver to the admin interface
• You’ll skip them because of lack of time or just won’t
think about them
• Just to name a few: login, action items, menu,
dashboard with KPIs, robust tables, many inner sample
pages, graphs…
• DEMO

12. Templates
• You’ll also likely to learn a lot from these templates
• I learned:
• Client-side graph libraries
• Nice overlay techniques
• Handy CSS techniques
• Useful plugins (‘loading’ behaviours, responsive images,
parallax effects and much more)
• Font substitution for common images (fontawesome.io)

13. More on responsive design
• The quickest, easiest & most charming way to see
how your site looks like in different resolutions:
Viewport Resizer
• More tools in the slideshow notes

14. More on responsive design
• Device emulators
• http://www.browserstack.com/ - see your site in
dozens of real devices, run automated tests (Selenium)
against them
• Less devices (9), but the most common ones and free -
https://modern.ie/en-us/screenshots

15. CLIENT SIDE MVC

16. Client Side MVC
Why?
• It makes your client (web pages) really smart & rich
• Server just serves main page template and control
templates (i.e. pure HTML+CSS)
• You just serve your data as Json, and the client does the
rest: binds it to the right HTML, detects changes in both
the HTML and the model, handling calls to the server…
• Great for SPA, but not exclusively

17. Client Side MVC
And what do all these things good for?
• Your site (app) runs much faster because logic is on the
client and it only goes to the server to fetch data, not to
get HTML artifacts (once initially loaded)
• You truly separate your structure (HTML+CSS) from your
data
• Your server focuses on what it’s good at: serving &
updating data

18. Client Side MVC
OK, you convinced me.
Now: which one?
• Ember
• AngularJS
• Backbone
• Knockout

19. Client Side MVC

20. Client Side MVC
AngularJS
Why? Because.
• Its 2-way binding is the best
• It’s maintained by Google
• It’s designed for testing right from the beginning
• It has loads of modules, plugins & directives
• Read more about its awesomeness here

21. Client Side MVC
AngularJS
Where do I start?
• Dan Whalin’s famous
AngularJS Fundamentals In 60-ish Minutes video
(BTW it’s specifically based on Visual Studio)
• or its complementary PDF
• The AngularJS site has a great step-by-step tutorial on
how to build a full app

22. Client Side MVC
AngularJS
• Recommended books: Mastering Web Application
Development with AngularJS, ng-book
• 17 PluralSight courses, the two I’ve seen and liked are:
• AngularJS Fundamentals
• AngularJS for .NET Developers
• Last one: 10 Angular Tips by John Papa

23. PERFORMANCE

24. Performance
• Dozens of things you can do
• 99% are really easy to implement – just Google them
• No business justification not to do them

25. Performance
Just a few samples:
• Static content compression (GZIP)
• Remove redundant host headers (also good for
security)
• Server, X-Powered-By, X-AspNetMvc-Version, X-AspNet-
Version
• Minify CSS+JS
• Compress images (lossless)

26. Performance
Just a few samples:
• Make image sprites
• Use a CDN, at least for common libraries
• Put your scripts at the bottom of the page
• Embed small images as Base-64 inside your CSS
• Enable proper caching, both for dynamic and static
content

27. Performance
Where do I start?
Meet your best friends:

28. Performance
Chrome: PageSpeed Insights (link)

29. Performance
Firefox: YSlow (link)

30. Performance
WebDevCheclist.com
Site + Chrome Extension
(DEMO)

31. Performance
Visual Studio:
Web Essentials Extension
• Minifying JS+CSS, lossless image shrinking, right click
image-to-base64, image sprites, bundling…
• Lots more beyond performance but we’ll get to that

32. LEGACY BROWSER SUPPORT

33. Legacy Browser Support
IE8 ?
• If you don’t genuinely have to, DON’T BOTHER.
• Don’t use polyfills, don’t try to tweak HTML+CSS,
don’t detect features with Modernizr – nothing
• Just put a generic “You’ve got an old browser” page
• Bonus: if you want to see why I hate IE8 so much go
read my blog post.

34. Legacy Browser Support
IE 9 + IE 10?
These are June 2014 browser stats (gs.statcounter.com):
Browser Percentage
Chrome (all) 45.36%
Firefox 5+ 17.66%
IE 11 8.67%
Safari iPad 5.77%
IE 8 5.43%
IE 10 3.22%
IE 9 3.22%

35. Legacy Browser Support
How to test IE versions side by side?
https://modern.ie/en-us/virtualization-tools
Free Virtual Machines for Windows, Mac & Linux, with preinstalled Windows OSs:
XP + IE6 Win7 + IE10
XP + IE8 Win7 + IE11
Vista + IE7 Win8 + IE10
Win7 + IE8 Win8.1 + IE11
Win7 + IE9

36. FEATURE SUPPORT

37. Feature Support
• Not sure if a feature you want to use is supported
across browsers?
• Modernizr
• http://caniuse.com/
• Feature support per browser per version
• http://html5please.com/
• Also includes filtering/instructions whether you need
polyfills, can fallback, support on mobile devices & more
• http://status.modern.ie/

38. All Things Client Side
• https://github.com/dypsilon/frontend-dev-bookmarks
• Everything you want for the client side, continuously
updated
• JS architecture guides, build tools, bootstraps &
boilerplates, image shrinkers, unused code cleanup
tools, weekly newsletters, JS frameworks, jQuery
learning / plugin authoring material, grid design
helpers, cross-platform, email design & boilerplates,
mobile platforms, typography, widgets, memory
analysis tools, video players…

39. VISUAL STUDIO TOOLING FOR
WEB DEVELOPMENT

40. VS Tooling for Web Dev
• The one ultimate extension you’ll need:
Web Essentials
• It has soooo much….
• Just a few examples:

41. VS Tooling for Web Dev
• Web Essentials - CSS:
• Intellisense: fixes errors, allows you to add vendor-specific
prefixes, font-faces, style names etc., Image URL picker
• Finds unused/redundant rules, browser support cues, font
previews, in-place color editor
• Minification & Bundling
• Conversions: RGB to HEX to color name, embed image as
Base64 string, LESS compilation

42. VS Tooling for Web Dev
• Web Essentials - JavaScript:
• JSHint
• Minification & Bundling
• Intellisense
• Go to definition
• and much more

43. VS Tooling for Web Dev
• Web Essentials - HTML:
• Image preview
• Minification
• Lorem Pixel & image placeholder generator
• Regions
• Go to definition (of CSS)
• Intellisense for most HTML tags
• Extract embedded JS/CSS to file

44. VS Tooling for Web Dev
• Web Essentials - More:
• TypeScript side-by-side preview
• MarkDown editor & compiler to HTML
• robots.txt intellisense

45. WEB APPS TIPS

46. Web App Tips
Time Zones
• Users perform actions on my web app.
What time should I save in the database? server time?
US time? client’s time?
NONE
• All dates & times as UTC on the code / database side
• You view these dates on each client according to that
client’s time zone
• When saving – vice versa

47. Web App Tips
Time Zones
• But it’s awkward to look at UTC times translate to my
local time all the time
Just think global. Your app doesn’t live in your home
country. It’s out there for global reach. Your local time is
meaningless.
That is, unless you’re in your home country, all of your
potential users are from the same country, your country
has only 1 time zone and you don’t have any thoughts of
expanding globally.

48. Web App Tips
HTML (template) vs Data
• Unless SEO is relevant, strive to send pure templates to
the client, and fetch all data in subsequent Ajax calls
• You can send initial data to the client together with the
page, as a JS variable
• AngularJS is perfect for that, but you don’t have to.

49. Web App Tips
HTML vs Data – SEO oriented sites
• Google has a spec to crawling sites that change state
in Ajax (like what AngularJS does…)
• Basically you detect that it’s a crawler and you serve a
statically rendered page
• Completely legit!
• https://prerender.io/ allows you to do that without
much of the manual plumbing (costs $ but you can
host it yourself for free)
• As of May 2014 Google’s crawler runs your JavaScript!

50. Web App Tips
Deployment
• Do yourself a big favor and automate your deployment:
• Build (including minifying, bundling, config transformations,
post cleanups…)
• Test
• Deploy
• You should ultimately be able to do all these with one click.
• There are good tools for that (like Octopus Deploy)
• You can’t because it’s time consuming?
• Your app failures due to a manual error in your deploy
process will consume more time, and will hurt more.

51. Web App Tips
Deployment
• Make a “System Health Check” screen in your back
office

53. Web App Tips
Platform Dependency
• Try not to hook yourself to one platform (e.g. Azure)

54. Web App Tips
ASP.NET Performance
• Dynamic/static caching of course
• Redis of course
• Async methods everywhere
• (at least in every place that goes to the database or I/O)

55. Web App Tips
Browser<->Server Communication
• Scenario

56. Web App Tips
Browser<->Server Communication
Client
Server
1st option: short polling

57. Web App Tips
Browser<->Server Communication
Client
Server
2nd option: long polling

58. Web App Tips
Browser<->Server Communication
Client
Server
3rd option: WebSockets

59. Web App Tips
Browser<->Server Communication
• SingalR
• Takes care of everything, makes it transparent, falls
back to Ajax when WebSockets are not available (IE8,
IE9, old iOS, Android < 4.4)

60. TESTING

61. Testing
Server side:
• Nunit + Moq
• Selenium – Web browser automation tool
• PhantomJS – Headless WebKit
• Nice uses:
• Detect screen regression
• Web page to PDF
• Automate load speed auditing
• Detect browser features

62. Testing
Client side:
• Jasmine
• QUnit
• Karma Runner

63. SAAS

64. SAAS
• First of all – go see Sam Kroonenburg and Peter
Sbarski’s legendary “Appfail – Story of a Melbourne
.NET Startup” (here it is).
• It will open your mind to the services you can achieve
for very cheap

65. SAAS
• A/B Testing (or “Split Testing”)
• Optimizely
• Want to do it yourself anyway? FairlyCertain

66. NETWORK

67. Network
• Share multiple sites from your dev machine to your
peers
• hosts file? That’s old…
• http://xip.io/
• 10.0.0.1.xip.io resolves to 10.0.0.1
• mysite.10.0.0.1.xip.io resolves to 10.0.0.1
• etc

68. Network
Is the site down just for me or for everyone?
http://isup.me

69. Network
Have my DNS changes propagated around the world?
www.whatsmydns.net

70. Network
Hackers’ ping / nslookup web interface
digwebinterface.com
• Authoritative / non-authoritative lookups
• Colouring
• Short / Long / Trace

71. WHAT/WHO TO FOLLOW
IN THE .NET AREA

72. What/Who to Follow
• Scott Hanselman – blog & podcast
• Scott Guthrie – used to be very relevant, today it’s all
about Azure
• The Morning Brew
• Dot Net Rocks podcast
• All .NET / ASP.NET / Entity Framework team blogs
• The list can of course be much longer, I think these are
the most important for .NET devs.