Recently Waldek Mastykarz (@waldekm) and I developed a sample for the Office Pattern and Practices. This sample query contact information by using the Microsoft Graph. We also optimism the user interface for mobile use.
While Waldek took care of the technical development of this sample I was responsible for the user experience and user interface design.
Today I had the great pleasure to record a webinar for SharePoint Europe. Actually, it was not a new session, it more hat the purpose to show people how I develop now in SharePoint. Especially how my branding workflow nowadays looks like. I use now SASS for all my branding in SharePoint, because it has a lot of benefits in manner of consistency, reusability and fundability of CSS changes and adoption.[Read more]
As mentioned in the previous blog posts I use Yeoman and the default web app generator to get my branding for on premises and Office 365 done. While in the past I struggled to configure HTTPS I had to use a mixed content hack to add the CSS or Javascript file to Sharepoint. This hack is might not the best approach and only recommended for development environments.
The good news. The web app generator has recently integrated a tool named Browser Sync.io. This allows you to switch easily from HTTP to HTTPS by simply set one additional property. All that needs to be done is add https and set the value to true or false if you like to disable https support.
...
browserSync: {
options: {
notify: false,
background: true,
watchOptions: {
ignored: ''
},
https: true
},
...
The next time your start with grunt serve your browse will open your web application using https instead of http.
What else to know? Well, you might get an exception by your browser that the certificate is not secure. This is because the certificate is self-signed. To avoid this notification add this certificate to your trusted one and you won’t see the message again.
Beside the easy SSL/HTTPS configuration this tool has some other nice features. It allows you to sync different browser windows for testing. So when you scroll your internet explorer it automatically scrolls your Chrome, Firefox. This makes it pretty easy to cross browser test your applications. Needless to say that in can be integrated with grunt as well as gulp. Check out this short introduction on their web site.
I also check the angular yeoman generator but this one still use the old web server component.
Sad but true. This makes the previous blog post on How to use CSS and JavaScript files from Yeoman directly in SharePoint obsolete.
In the first blog post I explained how to set up your Yeoman development environment. You have now a local web server and you can start your web development. Now lets take a closer look how you can integrate the files on this web serve directly into SharePoint on-premises and Office 365.
Open your project and start the web serve with the command ‘grunt serve’.
I’m not quite sure when it happened. During the last twosome of months, Microsoft provides some icon fonts in Office 365.Especially the newly introduced app launcher makes use of icons of this typeface.The content varies from icons, such as the Hamburger menu, arrows, general, UI elements, as considerably as all Microsoft Applications. The files of this font are hosted on the Microsoft CDN so they are ready to use to spice up Apps.
Office 365 Glyphs – Preview
Icon fonts provide a couple of benefits. Fonts are scaled better than any image across different screen resolutions and even looks great on high density displays without any loss of quality.
There is another advantage to use this font. By using the same icons as in Office 365 you will be able to provide a consistent user experience.
Microsoft created a while ago some UX Guidelines for Apps in SharePoint, but you won’t find any information on the icons.
As mentioned earlier CDN is the key. Microsoft provides some centralized assets there. There is only one problem the use of a CDN is mostly undocumented. One general documentation can be found on the MS Technet.
There are several CDN endpoints and in case of SharePoint only one url exist in Office 365 for a long time. This URL is //cdn.sharepointonline.com. This url can be accessed via http (port 80) and http’s (port 443).
To make use of the icon font the following code needs to be used in your courses.
@font-face {
font-family: "SPO365Icons";
src: url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.eot");
src: url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.eot?#iefix") format("embedded-opentype"),
url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.woff") format("woff"),
url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.ttf") format("truetype"),
url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.svg#web") format("svg");
font-style: normal;
font-weight: normal;
}
You might recognise the path in there that points to “_layout/15 “ which is the current version of SharePoint. The path before the layouts fairly undocumented and might change over time. I try to maintain those urls in future until there is an official documentation available.
The font-face definition can be added to the custom style sheet of your app. Again the content of this font is undocumented as well.
This was the reason why I set up a small interactive documentation that use the CDN urls and shows all relevant icons. So you don’t have to search all the 65536 glyphs (or characters).
The guide be found on my newly created lab site under the url lab.n8d.at.
A page that I’m looking forward to maintain in the future and add some additional information and things there.
Following the principles of “Ship or die”. The mobile support is currently beta too. I’m looking forward to provide a superb user experience.
If you have any comment, suggestion how to improve. Please feel free to comment. I will be lucky to hear from you.
The last weeks was really inspiring and I found some great resources. Time to honor those and some older ones with this blog post.
Eloquent Javascript is a free ebook for learning JavaScript.
This ebook was published by Marijn Haverbeke and start from the basic concepts of JavaScript to more advanced topics. It covers game development with HTML5 and Node.Js too. The book is available in various formats. A printed version is also available to purchase that has some extras.
You start a new project based on Angular, Sass and like to use the lastest HTML and CSS3 features. If you look up something in the documentation then you have to deal with three or four different websites.
The solution to this problem is devdocs.io.
This website allows to create your own set of API documentation.
The list of currently supported documentations is enormous and will be extended in future. An offline version that requires no setup is planned for the future.
While i was working last year on the SP24Conf I had a funny idea. I wondered if I will be able to use LINQ in JavaScript too. I search it on the web and found a project on CodePlex called Linqjs.
This javascript covers all .net 4.0 methods to query JavaScript objects. I used it for SP24 and the session browser that was online and it worked pretty well for me. So if you normally write C# code and like to use something you already know. This is the perfect addition to your code.
This is for font and development nerds like me that always wanted to have a better looking font in the code editor they currently use.
“Input is a flexible system of fonts designed specifically for code by David Jonathan Ross. It offers both monospaced and proportional fonts, all with a large range of widths, weights, and styles for richer code formatting.”
There are 168 different font styles available in this font family. Enough to make your code look unique just as you like it.
Emmet — the essential toolkit for web-developers. I can’t describe it better than that. It’s a plugin for text editors such as TextMate, Sublime, or NotePad++ that allows you to short code your html.
I’ll give you a short example. If you like to create an unordered list with four elements. The list finally looks like this.
<ul class="myList">
<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>
</ul>
With Emmet all that needs to be written is this simple line.
ul.myList>li*4>a[href=""]
After pressing CTRL+E or whatever key is defined in your editor it compiles this single line in the code above. Sadly, Visual Studio is currently not listed of supported text editor list.
Make sure to check out the emmet demo on their web site.
In case you haven’t heard. @Daniel_The_Nerd created an IntelliSense for SPServices. To get your hands on this take a look at Marc Anderson’s Blog