5 resources for web and one for SharePoint developer

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

Eloquent JavaScript
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.

DevDocs.IO

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.
devdoc.io
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.

Linq for JavaScript

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

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-font
“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.io

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.

emmet.io
I’ll give you a short example. If you like to create an unordered list with four elements. The list finally looks like this.

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

Client Side Rendering – In-place upgrade of SharePoint list views

When you migrate SharePoint 2010 to SharePoint 2013 or to Office 365 some of the views that was created in the previous version might look the same.
The user will get a mixed user experience because document libraries, switch between the old view styles to views that are configured for client side rendering. Via scripts those views can be recreate, but they also can be upgraded in-place.

Continue reading

Hide toolbar / hero button in list view web part using JSLink

To hide the tool part of a web part is pretty easy. You just need to edit the settings and set them to “No Toolbar” and you are done.
Today I needed to do this programmatically. After I debugged the list view web part an haven’t found a setting for this I took a look into the “clienttemplates.js”, which is mostly responsible to render the views correctly and voila I found a solution how to hide the toolbar.

Continue reading

Site logo inheritance on sub webs

Be careful when you change the title or the description in SharePoint you might set a logo url. Even if you don’t need to set one. Recently I found a strange behaviour in SharePoint during a branding project. The project included three site collections where each of those should have a different logo.
Somehow the logo couldn’t be changed in the complete site collection. A changed logo in the root of the site collection was not reflected on the sub site. Strange behaviour thou, because SharePoint has something that I call logo inheritance. Continue reading

Allow users with view permission add entries to the Newsfeed

Imagine you have a team site that provides curated information. Only a few people are allowed to update the content. The rest of the people only have view permission. To spread the word you like to make use of the Newsfeed web part for two reasons. People who follow this page will get updates on their Newsfeed. The other reason is that the viewers should be able to give feedback to your updates. Seem to be a pretty good solution and this is what the Newsfeed web part is actually being made more.

Newsfeed web part

Newsfeed web part

The problem is that this web part is by design only for users that have at least contribute permission. With some simple steps this behaviour can be changed and allow everyone reply to the Newsfeed.
First, let’s take a look where the data of the Newsfeed will be stored. Continue reading

Revised: Table of Contents for SharePoint Wiki Pages

It’s more then two years ago when I first wrote a table of contents script to enhance wiki pages in SharePoint. Time to release a new version and this time it’s a jQuery plugin. This new version will work potentially work with all versions of SharePoint and Office 365. I just have tested it in SharePoint 2013 and Office 365.
Now I also included support to for all levels of headlines (<h1> – <h6>).
This is possible because a found a good old part in the jQuery Documentation

Table Of Contents - Live in Action

Table Of Contents – Live in Action

Continue reading

Load Display Templates from Provider Hosted App or remote website

Display templates can only be stored in several places of SharePoint to get loaded. I was wondering if I will be able to inject this mechanism or if I will be able to provide a display template directly out of a provider hosted app.

Normally Display Templates will be uploaded to every site collection inside the master page catalog, but with a little tweak those can be loaded from everywhere in the world as long they are accessible via a web server. Continue reading

Typography First – Make your SharePoint content readable and compelling

Typography

The first thing when I start a new branding project I first make myself familiar with the fonts I want to use. This is because I want to see how they work on some basic text elements an if the text is readable.

In general the overall typography is the most important factor to success of any information system or web site. 90% to 95 % on a website is dominated by text. Becoming a master on typography means you become a better web designer or SharePoint brander, but it is no easy topic and I just want to scratch the surface here but provide some good links for further information at the end.

The basic

The typography setup can be mainly defined by the following factors:

  • The Font
  • Font Size
  • Font Weight
  • Line Height
  • Letter Spacing

In other words, these are our core ingredients how we can manipulate the text. For example, some fonts look great with the predefined letter spacings while others require a little bit more space in between the characters. You can also use the letter spacing to make a special effect on headlines. For some examples that a look at Helvetica, Bold, Big, Negative Letter-Spacing.

How many fonts should I use?

In general when, you plan a design it is common practice that you don’t use more than three to four different fonts. Those different fonts can be defined for:

  • Headline (<h1>-<h6>)
  • Paragraphs (<p>)
  • Quotes (<cite><cite>, <block quote> is decrepted with HTML 5)
  • Code, Navigation,…

When we take a look at the out of the box design of SharePoint 2013 at least 3 different fonts was used. Those fonts are Segoe UI (for smaller text), Segoe UI Light (for large text such as headlines) and Segoe UI Semilight (&lth2>-&lth3>).

The fonts are part of the same font family, but have a different font weight, which is indicated by “Light” and “Semilight” and those fonts are slightly different. The typeface was adapted to the weight and are not only bold and “not so bold”. The reason why Microsoft used those different font faces was that they look great in there specific use case. Improved the readability and the overall design.

Font picker in composed look

Font picker in composed look

When a theme is used in SharePoint the fonts can be changed to only a maximum of two fonts. Mostly Segoe is used for the regular text as used in a paragraph, navigation, and so on because of its good readability. The larger font in the font picker will be applied to the headlines only.

Reset and Reapply fonts using CSS

When a web design is created from scratch it is fairly simple to reset the fonts. All that needs to be done is to apply a base font to the body tag and additional fonts for the headlines.

HTML Typographic Template

HTML Typographic Template

In SharePoint this only partially works because some elements will still have the Segoe font applied. For a full change of the body font some additional classes need to be added.

Changed Typography in SharePoint

Changed Typography in SharePoint

So we now have two different styles that need to be applied differently to the Apps (first snippet) and SharePoint (second snippet). Both are probably stored in different style sheet files and we still don’t have any additional properties such as line height, font size or font weight applied to the fonts.

Finally and whats next

The two different style definitions cry for something more flexible and yes we can do this in SASS. By assigning variables we will be able to define the typography as global settings that are easy to change. Then we don’t have to care or worry about those style sheet classes.

In the meantime, you can do a test run and add the SharePoint Style Sheet from this blog post to your master page. If you want to get a little bit deeper into typography you can read the following resources.

Other articles in this series

Further readings