CHUVASH.eu

CHunky Universe of Vigouros Astonishing SHarepoint :)

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:

.warning {
  background-color: red;
}

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

html .warning
div .warning
div.warning, div > .warning
body p#myP.blue strong.warning

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:

.contoso-html #s4-workspace { }

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

It is time to standardize the Chuvash Keyboard Layout

Proto-Bulgarian Runes. Wonder if they are supported in Unicode :)

Proto-Bulgarian Runes (Chuvash language is the closest language to the Proto-Bulgar language). Wonder if they are supported in Unicode :)

The Chuvash Computer Keyboard layouts have existed since 2001, but due to the lack for Unicode support we were forced to use the look-alike letters  from other latin-based keyboard layouts. On Linux The Chuvash keyboard layout was added in 2007 and Linux is still the only operating system that has a native keyboard layout for Chuvash language. On Windows we have used the Keyboard Layout Creator and distributed it as an executable file.

Today, when Windows XP is not supported anymore, the majority of users now have full support for the correct Chuvash letters from the Extended Cyrillic table. These four Chuvash letters are “additional” to the Russian alphabet: ӐӖҪ and Ӳ.

Now when new “keyboards” appear on Android, in web browser (they use the standardized letters) and hopefully in Windows and iOS, we have to consider put the correct letters into the keyboard layouts. For Linux the /usr/share/X11/xkb/symbols/ru file has to be updated:

// Chuvash language layout
// Anatoly Mironov @mirontoli
partial alphanumeric_keys
xkb_symbols "cv" {
    include "ru(winkeys)"

    name[Group1]= "Chuvash";

    key.type[group1]="FOUR_LEVEL";

    key        <AD03> {        [      Cyrillic_u,	Cyrillic_U,
                            0x010004f3,    0x010004f2      ]       };
    key        <AD05> {        [      Cyrillic_ie,     Cyrillic_IE,
                       0x010004d7,	0x010004d6     ]       };
    key        <AC04> {        [      Cyrillic_a,	Cyrillic_A,
                          0x010004d1,  0x010004d0      ]       };
    key        <AB03> {        [      Cyrillic_es,     Cyrillic_ES,
                            0x010004ab,    0x010004aa      ]       };

    include "level3(ralt_switch)"
};

Impact

This switch will have a huge impact on the Chuvash language. Much of content on forums, websites and Chuvash Wikipedia will be hardly searchable. But we have to do it, to standardize and prepare for the future. The Chuvash language Committee is not against it, despite it has not been updated the guidelines for using letters from 2009.

Using CAML with SharePoint REST API

Do you prefer REST over CSOM as I do? I’ll skip the whys. Andrew Connell put it already in wrtiting so nicely. Well, if you do prefer REST, then you must have discovered some shortcomings of REST, or its incompleteness compared to CSOM. I think of:

  1. Inability to filter items based on multivalued taxonomy fields
  2. Inability to filter items based on user fields where user is added through a group, rather than directly, e.g. AssignedTo=[Me] combined with a SharePoint group.

In such situations I was forced to use CSOM. Until yesterday. Yesterday I learned that we can actually use CAML queries in REST requests.

 

This enables using REST in all situations. The REST API is still developed and many features are added. Maybe a particular operation that needs a CAML query today, can be supported in the core REST API and can be easily refactored then.

But until then, we can use CAML queries in REST requests. Here are the important things about it:

  • A REST request with a CAML query is always a POST request
  • A REST request with a CAML query has always to have X-RequestDigest http header (actually because it is a POST request)
  • A REST request with a CAML query should always have the attached CAML query in the request body (and not in a query string). We don’t want to mess with long urls, do we?
  • A REST request with a CAML query must have the http header “Content-Type: application/json;odata=verbose” unless you use xml in the request body.
Needed HTTP Headers in REST requests

HTTP headers you have to provide in REST requests with CAML queries

You can use jQuery or SP.RequestExecutor to make an ajax call. The REST endpoint is:

_api/web/Lists/GetByTitle('<your list title>')/GetItems

The request body (if you use json, and I bet, you do) is in this format:

{ "query" :
   {"__metadata": 
      { "type": "SP.CamlQuery" }
      , "ViewXml": "<YOUR CAML QUERY>" 
   }
}

Here is the boilerplate for a REST request with a CAML Query:

function getDataWithCaml(listName, caml) {
    var endpoint = "/_api/web/lists/GetByTitle('" 
        + listName + "')/GetItems";
    var requestData = { "query" :
           {"__metadata": 
              { "type": "SP.CamlQuery" }
              , "ViewXml": caml
           }
        };
    return jQuery.ajax({
        url: endpoint,
        method: "POST",
        data: requestData,
        headers: {
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "Accept": "application/json; odata=verbose",
            "Content-Type": "application/json; odata=verbose"
        }
    });
}

This function is just an example. It has no error handling, and it takes for granted that your list is in the root site for on your (sub-)domain (“/”). So take it as an example only.

Here is how the function can be invoked

var caml = "<View><Query><Where><Or><Eq><FieldRef Name='AssignedTo' /><Value Type='Integer'><UserID/></Value></Eq><Membership Type='CurrentUserGroups'><FieldRef Name='AssignedTo' /> </Membership></Or></Where></Query></View>";
getDataWithCaml("Tasks", caml);

Pragmatic Responsive Design

I have been curious about the responsive design but have not had time to try it out. To learn more I decided to make an existing website more responsive. A friend of mine drives a Chuvash Dictionary website: samah.chv.su. Today it looks like this in a mobile browser:

Before responsiveThe site is a classic 1000px-ish centered page with header and two columns. The left column is for the main content and the right column for additional “aside” information. Can it be more classic? This current version works, you can still use the dictionary on a mobile phone. But there are several improvements that can be done:

  • Avoid scaling to be able to read text
  • Avoid scrolling back and forth to read every line
  • Move the right column down, it is better to use the space for the main content.
  • Hide the quick links to the individual letters
  • Shrink unused space in the header.



What I wanted was to provide some easy steps to make it more responsive. The steps had to be pragmatic: some easy-to-implement steps that would make a difference, and with very little impact on existing markup.

I created a copy of this page and made it available publicly, because I wanted to access from everywhere and test it on so many devices and resolutions as possible. I used Github Pages to get the version control too, even though a public folder on Dropbox, OneDrive or Google Drive could give the same result.

Here is my list of what I did to make it more responsive:

Don’t do anything for larger resolutions

Just leave it as it is, unless you want to redesign your site.

Create the css file for responsive design

Just create a file and call it responsive.css. Reference this file inside your site in a usual way.

<link rel="stylesheet" href="./responsive.css" type="text/css">

Set witdh 100% when a scroll appears

Find the “break point” where your site gets a horizontal scroll. To do so, just fire the Chrome Dev Tools, dock it to the right, and resize your page. In my case it was 1016px. Now it is time to do a change. Create a media query for that and try to remove all the hard-coded width values by setting width:100%. Well something towards this “very responsive site”.

@media all and (max-width: 1016px) {
    .art-sheet {
        width: 100%;
    }
    div.art-header {
        width: 100%;
    }
}

Let the columns disappear

Find the width where two columns become ugly and impractical. Create a media query for that and just style the columns so they do not float. In my case the original site uses table-row layout. I set display:block and the right column went down.

@media all and (max-width: 675px) {
  div.art-content-layout-row {
      display: block;
  }
  div.art-content-layout div.art-layout-cell {
      display: block;
  }
  div.art-content-layout-row {
      display: block;
  }
}

Prevent scaling in mobiles

Now your page is more responsive in a desktop browser, but it is still unreadable in a mobile. The reason is the mobile browser that scales it for us. Let’s disable it. Just put this meta tag in the head session of your page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Hide rarely used elements

In a mobile we want to see the most important things, the actual content. Hide menus and remove empty spaces. In my case I hid the letters that took to much place and the language switcher. They can be shown in another menu (see below).

Make a responsive navigation menu

It is not complicated at all. You can google it. There are many tips and jQuery plugins. I did in a very easy way. I added a new div to my html:

<div id="responsive-menu" onclick="toggleMenu()">☰</div>

I also added this css style and hid this div for bigger resolutions:

#responsive-menu {
  position: absolute;
  right: 5px;
  top: 15px;
  font-size: 30px;
  cursor: pointer;
  display: none;
}
@media all and (max-width: 399px) {
  #responsive-menu {
    display: block;
  }
}

Here is the tiny javascript click event listener:

(function() {
  var menuOpen = false
      , menu
      , langSwitcher;

  window.toggleMenu = function() {
    menu = menu || document.getElementsByTagName("center")[0];
    menu.style.display = menuOpen ? "none" : "block";
    menuOpen = !menuOpen;
  }
})();

Here is the result. There are still some improvements that can be done, but here is the result of the my changes.

samah-004 samah-003

Add a website icon

Improve the user experience by adding a website icon. It will be used when an iPhone, iPad and Android user will save your page as a bookmark (and it will be placed on the screen and look like any app). Here is how I did:

  1. I created a 74 x 74 px png image and saved it as apple-touch-icon.png. I placed it in the “root folder”.
  2. In the page markup I added this line inside the head element:
<link rel="apple-touch-icon" href="apple-touch-icon.png">

That’s it. So now when someone saves the website as a bookmark, it looks like this:

photo samahsar-001 Screenshot_2014-03-25-23-30-02

Then on the mobile screen it looks like any other app. It works even on Android devices (even though the icon is an apple-touch-icon).

 

UPDATE 2014-03-25

Now these changes are implemented on the real site: samah.chv.su

What about the SharePoint app domain?

This is an open question about the domains for SharePoint apps. On Technet: Configure an environment for apps for SharePoint (SharePoint 2013) we can read the following:

You must configure a new name in Domain Name Services (DNS) to host the apps. To help improve security, the domain name should not be a subdomain of the domain that hosts the SharePoint sites. For example, if the SharePoint sites are at Contoso.com, consider ContosoApps.com instead of App.Contoso.com as the domain name.

Does it apply to SharePoint Online? Well, apparently not :) So why should we do it on premises?

subdomain

As we all know, sharepoint.com is used for our Office 365 tenancies and for apps.

First look at Yammer integration in SharePoint 2013 SP1

I have installed SharePoint SP1 on my development machine. Yammer and OneDrive links have appeared in the Central Administration:

yammer-001

If you go ahead and click “Configure Yammer”, you can activate it:

yammer-002

Because:

Yammer is Microsoft’s recommended tool for social collaboration.

When you activate Yammer, you’ll get this dialog, and the Yammer link in the SuiteBar:

yammer-003

yammer-004

What happens when you click on Yammer, is that you are redirected to Yammer.com and you are prompted a login page.

Then you have a usual yammer site with all your networks and stuff (in my case, SPC14 network):

yammer-005

Then, if you go to your newsfeed, the following message is shown:

yammer-006

This page displays updates for sites you’re following. To connect with people, use Yammer.

There are still many questions about the Yammer and Newsfeed. But I like the activation process in the SharePoint 2013 SP1

The sessions I attended

My colleagues and friends keep asking me what sessions I went to and what I would recommend to see on channel9 where all of them are publicly available. Here is my prioritized list of sessions:

  1. #spc325 Real-world examples of FTC to CAM transformations. This was the most exciting developer session. Vesa Juvonen takes the Cloud App Model to its maximum. Wanna know more about the future. See this session.
  2. #spc404 Build your own REST service with WebAPI 2. You know REST? You like $filter, $top and $select? Good, why not create an own api? You have all the tools in Visual Studio 2013. Just get inspired by Scott Hillier.
  3. #spc269 Developer audience keynote | What’s new for the Office & SharePoint developer. Get all the developer news presented at #spc14.
  4. #spc3999 SharePoint Power Hour – New developer APIs and features for Apps for SharePoint.
  5. #spc371 Developing socially connected apps with Yammer, SharePoint and OpenGraph. Chris Johnson talks about how to use Yammer API to post updates, like and comment from code. What if you wanted to send an update to Yammer from your Line-of-Business application? Very easy.
  6. #spc303 Advanced Performance Analysis for SharePoint. A real-world case study how performance of a SharePoint site is measured, captured and analyzed. Really interesting.
  7. #spc391 Deep dive into Mail Compose Apps APIs. Main compose apps are similar to SharePoint apps, they are run as iframes and can be used to update an email while writing it or start a workflow. Good stuff.
  8. #spc334 Real-world SharePoint architecture decisions. Wictor Wilén talked about his best topic: architecture decisions. He is probably the best in this area in the world, and his presentation becomes better and better every time he presents it.
  9. #spc3000 Changing the look of Search using Display Templates and CSR. You can do a lot of stuff using the Display Templates and Cliend-Side Rendering. See this session to get inspired and gather a deeper understanding how it works.
  10. #spc382 Managing Search Relevance in SharePoint 2013 and O365. How does XRANK work? Well it is complicated. This session is a must-see.
  11. #spc224 The SharePointConference.com Site: From Sketch to Launch to Live! Did you know that SharePointConference.com was built upon SharePoint? See this session to find out what was good in SharePoint for this site, and what workarounds and hacks were necessary to get it to work.
  12. #spc302 Advanced development patterns for SharePoint Apps. Provider-Hosted Apps are the best type of apps. Let’s see what examples and tips are provided in this session.
  13. #spc322 SharePoint 2013 Search display templates and query rules. An introduction to Search Display Templates.
  14. #spc301 Access is back! High-value, ‘no code’, functional & flexible business apps with the new Access services. There were a lot of jokes in this session. Access apps are new “no-code” solutions and will replace the InfoPath solutions.
  15. #spc407 Deep dive into the SharePoint 2013 CSOM API’s. The name is not correct. It is a dive into the CSOM, but it is not deep. See it if you want an introduction, but please keep in mind, the examples don’t follow the javascript coding conventions.
  16. #spc381 Load testing SharePoint 2013 using Visual Studio 2013. Never used load-testing with Visual Studio? Got a 1.15 hr to kill? Well, see it to learn how to start the Visual Studio and what difference is between a web test and load test.

 

The sessions I wish I had attended:

  1. #spc4o9 Deep dive: SharePoint and Office App Security Model (OAuth & S2S)
  2. #spc417 Speed up your app development skills with API abstraction

 

My five takeaways from the SharePoint Conference 2014

spc14

The SharePoint Conference 2014 was an astounding event. Over 10 000 like-minded SharePointers that met, learned a lot and shared new ideas, couldn’t be better. It was also the first time I was to the U.S. and Las Vegas. What a country, what a city! This place must burn people’s lives faster than anywhere else in the world :)

I want to share my five takeaways from this conference. I’ll keep it short:

Yammer will be the main social platform. The development of the Newsfeed will be discontinued. I remember the many questions and the ambiguity about what would happen with the newsfeed and Yammer in 2012. Now it has been clear. It will be Yammer and and it will be the cloud.

SharePoint Community is getting really mature. On the conference the the presence of the community was huge. The founders of the SharePoint-Community.net gave an interview on the SharePoint Conference TV (SPCtv). Microsoft introduced new open source projects on codeplex like for example officeams.codeplex.com and on github like for example SharePoint SDK for Android. Many speakers published their demos and the source code on github. All the organizers, speakers and attendees “worked like a network” on the SPC Yammer Network.

SharePoint is here to stay. More and more people work with SharePoint and Office 365. Office 365 is Microsoft’s fastest growing commercial product. The presence of former president Bill Clinton is just another statement that it is a “serious” business.

Apps will evolve and be the main type of solutions. We have not seen the final version of the App Model. There are still many questions and misunderstandings. Although I see a strong will to use solutions using Cloud App Model (CAM) opposed to Full Trust Code (FTC). Pioneers like Vesa “Vesku” Juvonen test the App Model and make the best of it. There are still many shortcomings that force us developers to find workarounds and some hacks. On the other hand, since I talked to the App Model Developers from Microsoft, I feel a sincere will to continuously improve the App Model. Provider-Hosted Apps (mostly written in .NET) will dominate the apps. Applications like the SPHelpDesk will be isolated applications which will be able to run independently from SharePoint and take advantages of the SharePoint environment (like user information and more) when they are opened from a SharePoint site.

SharePoint will go on a diet. We have already seen the divorce of SharePoint from the Workflow Services, from the Office Web Apps, from the App Fabric Cache. It won’t stay there. SharePoint will be redefined as a well-defined part of Office 365. All surrounding products will be separate products.

Custom Error and Access denied pages in Sharepoint

Anatoly Mironov:

Unfortunately in SharePoint 2013 the custom error pages are not applied: link 1, link 2. Hopefully there will be a hotfix that solves it.

Originally posted on morethansharepoint:

Ok, lets get started.

So for my latest project I had to replace the default sharepoint error pages with a custom one. There are different types of error pages such as the ones for 404 and 500 errors. These are set by IIS and are basically simple html pages that are shown if the requested page is not found or other errors.  But the error page that sharepoint uses is shown for errors that relate to sharepoint and shows correlation id and a simple message.

The default page for this type of error is located in the 14 hive /template/layouts/error.aspx.

Error.aspx inherits from Microsoft.Sharepoint.ApplicationPages.ErrorPage and by examining this in Reflector it’s relatively easy to see how it works. When an error occurs, the Item collection in the HttpContext gets filled by some keys such as ErrorText and ErrorCorrelationId. The error page simply gets these strings from the context (and also…

View original 150 more words

Discovering SharePoint

And having fun doing it

Bram de Jager's SharePoint blog

My view and thoughts on SharePoint.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

The Zuul Cat Idea Brewery

Where ideas on software development and entrepreneurship brew.

Paul J. Swider

Inspire! Teach! Awe!

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Alexander Ahrens

MCPD | SharePoint | Web Development | JavaScript | .NET

Cameron Dwyer | SharePoint, Outlook, OnePlaceMail

OnePlaceMail, SharePoint, Outlook & Life's Other Little Wonders

.:paul.tavares:.

Me and My doings!

Share SharePoint Points

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

SPJoel

SharePoint for everyone

SharePointRyan.com

Ryan Dennis is a SharePoint Solutions Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode, ya mama

Treacle tarts for great justice

Follow

Get every new post delivered to your Inbox.

Join 186 other followers