Ofer Zelig

@oferzelig

http://fullstack.info

Pearls and Must-Have

Tools for the Modern

Web / .NET Developer

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

RESPONSIVE DESIGN

• 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

• 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

• Is it a new project?

Don’t hesitate – use Bootstrap

• Don’t know what Bootstrap is?

Responsive Design

• 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

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

Templates• Admin interfaces

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

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)

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

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

CLIENT SIDE MVC

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

Client Side MVCAnd 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

Client Side MVC

OK, you convinced me.

Now: which one?

• Ember

• AngularJS

• Backbone

• Knockout

Client Side MVC

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

Client Side MVCAngularJS

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

Client Side MVCAngularJS

• 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

PERFORMANCE

Performance

• Dozens of things you can do

• 99% are really easy to implement – just Google them

• No business justification not to do them

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)

PerformanceJust 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

Performance

Where do I start?

Meet your best friends:

Performance

Chrome: PageSpeed Insights (link)

Performance

Firefox: YSlow (link)

Performance

WebDevCheclist.com

Site + Chrome Extension

(DEMO)

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

LEGACY BROWSER SUPPORT

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.

Legacy Browser SupportIE 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%

Legacy Browser SupportHow 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

FEATURE SUPPORT

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/

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…

VISUAL STUDIO TOOLING FOR

WEB DEVELOPMENT

VS Tooling for Web Dev

• The one ultimate extension you’ll need:

Web Essentials

• It has soooo much….

• Just a few examples:

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

VS Tooling for Web Dev

• Web Essentials - JavaScript:

• JSHint

• Minification & Bundling

• Intellisense

• Go to definition

• and much more

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

VS Tooling for Web Dev

• Web Essentials - More:

• TypeScript side-by-side preview

• MarkDown editor & compiler to HTML

• robots.txt intellisense

WEB APPS TIPS

Web App TipsTime 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

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.

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.

Web App TipsHTML 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!

Web App TipsDeployment

• 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.

Web App TipsDeployment

• Make a “System Health Check” screen in your back

office

Web App Tips

Platform Dependency

• Try not to hook yourself to one platform (e.g. Azure)

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)

Web App Tips

Browser<->Server Communication

• Scenario

Web App TipsBrowser<->Server Communication

ClientServer

1st option: short polling

Web App TipsBrowser<->Server Communication

ClientServer

2nd option: long polling

Web App TipsBrowser<->Server Communication

ClientServer

3rd option: WebSockets

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)

TESTING

TestingServer 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

TestingClient side:

• Jasmine

• QUnit

• Karma Runner

SAAS

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

SAAS

• A/B Testing (or “Split Testing”)

• Optimizely

• Want to do it yourself anyway? FairlyCertain

NETWORK

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

Network

Is the site down just for me or for everyone?

http://isup.me

Network

Have my DNS changes propagated around the world?

www.whatsmydns.net

Network

Hackers’ ping / nslookup web interface

digwebinterface.com

• Authoritative / non-authoritative lookups

• Colouring

• Short / Long / Trace

WHAT/WHO TO FOLLOW

IN THE .NET AREA

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.