Kategoriarkiv: html5

Devday 2016

Vi har haft vår årliga Devday, en dag i kunskapens tecken där syftet är att testa nya tekniker under ett paraply av vägledande och smått märkliga teman. Filosofin bakom Devday är att praktisera den pågående interna kunskapsspridningen, exempelvis i form av teknikkvällar, genom att erbjuda en dag för att förverkliga idéer och skapa lagkänsla. Då vi alla är kodfantaster är det ytterligare en bonus att kunna ha lite friare tyglar kring vilka tekniker man kan använda i utvecklandet. Årets övergripande tema var ”MasterDev” där varje lag med givna grundrecept, ett skafferi fyllt av ramverk och sin egen personliga kryddning fick en dag på sig att implementera något ur kategorierna:

– Intranet of things
– Adventures in the shell
– George Booles matkasse-webappar

Lagen tävlade mot varandra i två priskategorier: folkets val-priset, samt teknikpriset. Det sistnämnda gick till laget som plockade flest poäng från en lista med bonusobjektiv, där det fanns allt från dokumentation till unit-tester och användandet av specifika ramverk.

Så vad kunde våra lag koka ihop under en dag?

– En konsolbaserat tinder som använder SharePoints user profile service och visar ASCII art av dina potentiella matchningar. Högerpil för like!

– Recept-appar i varierande utformning som gav menyförslag baserat på valda kategorier och/eller sökord, förslag till restauranger som serverar maten, en ingredienslista om man föredrar att laga den själv, samt passande middagsmusik.

– En flic-integration som triggar text-to-speech över ett Sonos-system.

devday_1

devday_2

devday_3

devday_4

Publishing Visio drawings as SVG

svg-004

In my post yesterday I showed how to publish Visio files as html image maps. That was one of the alternatives. Today I’ll present how to use SVG to achieve the same goal: publish Visio diagrams in SharePoint without having the Enterprise license. There are some alternatives:

  1. Show Visio diagrams as pdf files on SharePoint Pages
  2. Embed Visio diagrams as html image maps – Read more in my previous blog post
  3. Embed Visio diagrams as svg pictures – This blog post.
  4. Link to Visio files that are opened using Visio Web Viewer in a new browser tab.

SVG

SVG stands for scalable vector graphic, it is a xml-based format for defining images. It is supported in all modern browsers. Because SVG can be part of a page markup, it can be easily embedded into SharePoint.

Visio

In Visio you can save a drawing as SVG. Thanks to my smart colleague: Dan Saeden. So the process of exporting and embedding a drawing is almost the same as for an image map. An improvement is that you don’t have to update the html markup and you don’t need to upload or base64-encode any pictures. It’s all in the markup (DOM). See some screenshots below.

Advantages and Disanvantages

Compared to image maps and other methods, we get following advantages:

  1. It is scalable (not pixelish) – you can show it in a small screen, and a big screen.
  2. Only markup is needed (xml), no need for uploading images
  3. No additional bandwidth is required for downloading images to the browser
  4. No need for updating html structure, easier to explain how to do it.

There are also some disanvantages:

  1. Complex SVG files increase the DOM complexity and it may affect the performance in browser
  2. No support for older browsers: In IE8 it won’t work

svg-000

How to

Use your drawing of choice:

svg-001

Save it as an SVG file:

svg-002

Add a Script Editor Web Part to a page and paste the content of the svg file (open it in a text editor):

svg-003

That’s it:

svg-005

Summary

Visio files can be exported to many different formats. SVG is a great modern html standard for graphics that acts as a part of the DOM. It still requires a manual process of exporting and putting it on a SharePoint page, but it is a good way to make it modern, fast and even responsive (with some additional css). Editors don’t need to adjust the markup, only copy it.

Tip: Use the weakest CSS selectors

I am reading Mobile HTML5 written by Estelle Weyle. It is an awesome recap and new knowledge about html, css and javascript. I want to highlight one of tips I got: Use the weakest CSS selectors (can be found on page 204).

We all know, that inline CSS and !important are evil. They have a higher level of specifity and override the standard cascade of the CSS rules. If you use !important, then it will be hard to override CSS rules when you really need it. After these two classic “evils” the evil number three is overqualifying of CSS selectors. You should really never add more classes or ids or elements than needed. Consider this:

It is often enough, you don’t need those:

SharePoint

In SharePoint sometimes we want override some OOB CSS rules. We have our own “namespace” to do that really simple. We have added a class to the html tag: “contoso-html”. Then it was really easy to update any OOB CSS rules, just copy the selector and add .contoso-html:

We also use less preprocessor and nest our selectors which has resulted that almost all of our selectors contain .contoso-html. Now back to the tip of that blog. This “namespace” made it harder to adjust CSS rules for special cases, like left navigation in the Search Center, we were forced to add more specific selectors, and selectors became bigger and bigger.

What I would recommend today is to skip the .contoso-html namespace in the CSS but keep it in the masterpage markup, use it wisely, meaning only if the original rule doesn’t work. Don’t nest too much in less files. Try always to find the weakest CSS selector. It is especially important in the SharePoint “markup djungle”.