Setting line-height based on ex units

According to "Modern CSS Techniques To Improve Legibility", the optimal line height could be set with:

line-height: calc(1ex / 0.32);

VSCode notes

• Display theme scope for selected text:
• ctrl+shift+p and type in "scope", the fuzzy search should find you the command "Developer: Inspect TM Scopes"  (from stackoverflow)

SP2013: Restoring a site collection backup

Got a site collection backup from a server, and needed to restore it to a dev virtual machine.

Initial attempts at running restore-spsite got errors like this:

restore-spsite : 0x80070003...
  + CategoryInfo          : InvalidData: (Microsoft.Share...dletRestoreSite:SPCmdletRestoreSite) [Restore-SPSite], DirectoryNotFoundException

Eventually found the reason being a mismatch in versions between the source server and the dev VM.  Went to Central Admin on both servers and checked the versions listed under Upgrade and Migration -> Check product and patch installation status.  Found that the dev VM needed these installed:

• CU KB3101373 15.0.4771.1000 (prerequisite for this was installing SP1)
• Security Update KB3115169 15.0.4859.1000

Note:  Remember to disable and stop the IIS Admin service before installing updates, otherwise it takes up so much CPU that the update takes forever.  (See Why SharePoint 2013 Cumulative Update takes 5 hours to install?)  And remember to set it back to automatic after the updates.

Then to restore the site collection backup:

1. Create new web app, say http://mywebapp.
2. Created new site collection (Publishing Portal) under the new web app.
• set mydomain\mylogin as primary admin
3. On SQL Server, (see https://technet.microsoft.com/en-us/library/ee748655.aspx)
• set securityadmin role for mydomain\mylogin
• set mydomain\mylogin as db_owner of the content DB for the new web app
4. Using SP powershell, do these commands (see https://sharepoint.stackexchange.com/a/125228).  Without this step, you'll get this error:  "restore-spsite : Access is denied. (Exception from HRESULT: 0x80070005 (E_ACCESSDENIED))".
• $w = get-spwebapplication  http://mywebapp
• $w.GrantAccessToProcessIdentity("mydomain\mylogin")
5. Restore the site collection backup with SP powershell command: 
• restore-spsite -identity http://mysitecollection -path C:\pathtobackup\mysitecollectionbackup.bak -force

Atomic Design by Brad Frost

Atomic Design by Brad Frost

Flexbox notes

A must-read whether you think you know flexbox or not:
11 things I learned reading the flexbox spec – Hacker Noon

Script plugin to wait for images loaded

Checking for $(window).load() wasn't working for images in slideshows that were dynamically populated.  Found a plugin for imagesLoaded while reading this thread: http://stackoverflow.com/a/26930871.  Seems to work, so here it is:

http://imagesloaded.desandro.com/

Bower: git is not installed or not in the PATH

Need to use Git Bash instead of cmd.  (see stackoverflow).
Can also use Aptana's GNU Bash.

MDN: Demos of open web technologies

Mozilla supports a wide variety of exciting open web technologies, and we encourage their use.  This page offers links to interesting demonstrations of these technologies, including some that were popular in the Demo Studio, which has since been retired.

React.js notes

• Tutorial: Intro to React
• React "Aha" Moments

VisualStudio.com and Eclipse Git Notes

• To use Git with Eclipse, need Git Credential managers.
  Use Git Credential Managers to Authenticate to Visual Studio Team Services
• Git tutorial
• Get Started with Git and Team Services
• Visual Studio Team Explorer Everywhere (TEE) for Eclipse
• Team Foundation Server Plug-in for Eclipse - Beginner's Guide
• Share your code in Git using Eclipse

iOS iFrame Notes

• iframes and iOS devices
• put on html, body of iframe contents
• fixes input jumping around
• iframe problem for iOS
• setting width=1px and then min-width=100% prevents frame going past its container
• Scroll IFRAMEs on iOS
• fixes iframe not being scrollable on iphone
• comment section also mentions using
  body { -webkit-transform: translate3d(0, 0, 0); }
  to prevent rendering of iframe from being cut off
• comment section also mentions using !important for these:
  -webkit-overflow-scrolling: touch !important;
  overflow-y: scroll !important;
• How we fixed the -webkit-overflow-scrolling: touch; bug on iOS
• fixes keyboard disabling scroller:
  iframe {height:calc(100% + 1px); }
• Issues with position fixed & scrolling on iOS
• How to force page to scroll to top only after iframe formstack form was submitted:
  instead of window.parent.parent.scrollTo(0,0), use onload="parent.scrollTo(0,0)"
  (see http://stackoverflow.com/a/853252)
• How to get an IFrame to be responsive in iOS Safari?

SharePoint 2013 SEO notes

• Search Engine Optimization in SharePoint 2013

Poster/Image Fallback for HTML5 Video

From this answer to Display fallback image even if the browser supports html5 video:

Poster:  A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame.  https://developer.mozilla.org/en-US/docs/HTML/Element/video

About SPUtility.MakeBrowserCacheSafeLayoutsUrl

Is SPUtility.MakeBrowserCacheSafeLayoutsUrl Method useful at all?

Hashtag navigation in SharePoint 2013

From this thread:  I cant add a hashtag at the end of a url for a navigation item
(NYTom's answer)

//About the following block of code
//Because of SharePoint MDS, SP doesnt like appending data to the 
//querystring of a navigation item.
//If a navigation item has data appeneded like a ? or #, 
//it gets stripped off. I have contacted MS about this and this is by design
//To get around this, I have that when a navigation item 
//label startes with #, then the #gets stripped off and the url gets
//appended a # along with the label with spaces stripped off, 
//so the anchor tag will work. -- TJF
$anchorResults = $('a').filter(function() {
    var txt = $(this).text();

    return (txt.length > 1 && txt[0] == '#');
});

$.each($anchorResults, function (index, value) {
    var txt = $(value).text().substring(1);
    var href = $(value).attr('href') + '#' + txt.replace(/ /g, '');

    $(value).text( txt );
    $(value).attr('href', href);
});
//End Block

URLs and tokens in SharePoint 2013

URLs and tokens in SharePoint 2013:  info on URLs and tokens like ~sitecollection.

Android battery drain: clear cache

From How to fix the Android battery drain issue with these quick tricks:

• Clear the app cache for misbehaving apps, if you know which ones:  Settings | Apps, tap the app, tap Storage, and then tap Clear Cache.
• If you don't know which apps, then try clearing cache for all apps:  Settings | Storage | Cached Data.  Tap OK when it prompts to clear.  Reboot.
• If those don't fix the problem, then clear the system cache (you may have to do a search for your device and "clear system cache").

Sibling Selectors

https://www.w3.org/TR/selectors/#sibling-combinators

WTF, forms?

Friendlier HTML form controls with a little CSS magic at wtfforms.com.

With the sibling selector (~), we use the :checked state to trigger a makeshift checked state on the custom control.

Pagination with rel=“next” and rel=“prev”

From Google Webmaster Central Blog:

Much like rel=”canonical” acts a strong hint for duplicate content, you can now use the HTML link elements rel=”next” and rel=”prev” to indicate the relationship between component URLs in a paginated series.