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]
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
false if you like to disable https support.
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.
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.
Why to use icon fonts?
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.
How to get access to the icon font of Office 365?
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.
src: url("//cdn.sharepointonline.com/14025/_layouts/15/fonts/Office365Icons.eot?#iefix") format("embedded-opentype"),
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.
Content of the icon font
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.
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.
INPUT Font by Font Bureau
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.
With Emmet all that needs to be written is this simple line.
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.
IntelliSense for SPServices in Visual Studio
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