Update Wordpress Domain When Migrating

When you're migrating a Wordpress site to a new environment, having to change the domain name can be a bit of a pain. There are some plugins you can use, but if you're relatively comfortable with SQL queries you can do it manually.

UPDATE wp_options SET option_value = replace(option_value, 'http://www.oldsite.com', 'http://www.newsite.com') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://www.oldsite.com','http://www.newsite.com');
UPDATE wp_posts SET post_content = replace(post_content, 'http://www.oldsite.com', 'http://www.newsite.com');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://www.oldsite.com','http://www.newsite.com');

Get rid of Sitecore trying to set language from URL

Could not parse the language 'XXXX'. Note that a custom language name must be on the form: isoLanguageCode-isoRegionCode-customName. The language codes are two-letter ISO 639-1, and the regions codes are are two-letter ISO 3166. Also, customName must not exceed 8 characters in length. Valid example: en-US-East. For the full list of requirements, see...

If you're getting the following error when loading URLs, and you don't need a language requirement, you can turn off the Sitecore setting in the web.config.

• Under the "linkManager" sitecore item, set "languageEmbedding" to "never"
• Under the "Languages.AlwaysStripLanguage" setting, set value to "false"

Updating npm and node on Windows

To update npm and node on Windows, follow these steps from a StackOverflow answer:

Run PowerShell as Administrator

Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force

npm install -g npm-windows-upgrade

npm-windows-upgrade

How do I update node and npm on windows?

Creating a Website in Microsoft Azure with GitHub deployment

Microsoft Azure is a scalable, cloud-based web hosting solution.

Setting up a new Web App

1. Create a Subscription
• This is the billing account to use. You can use an existing one or create a new one.
• To create a new Subscription account, in the Azure portal left sidebar, click on Subscriptions > Add
• Select the payment account to use
2. Create a new Web App and App Service Plan
• The App Service Plan is the container for Web Apps. You can have multiple Web Apps in a single App Service Plan. Plans vary in bandwidth and are priced in tiers.
• In the left sidebar again, click on App Services > Add
• Select Web App > Create
• Fill in App name -- this will be used for your Azure URL on *.azurewebsites.net
• Select Subscription that you created previously
• Resource Group can be new, or you can use an existing one if there is one for that App Service
• App Service Plan: Create new is default, but only use if there isn't one already; otherwise use one that's already there.
• Click Create and Azure will begin deploying the new site. After 1-2 minutes, you should see an Alert that deployment is complete
• Now if you go to App Services the new web app will be there. If you select it and click Overview you will see URL, FTP and other info.
3. Select/Change Service Plan ***Azure will select Standard by default, so you need to manually change it if you want a free/cheaper plan
• Go to App Services > Scale Up and view the current plan or select a different plan

Setting up a Staging Environment

You can create a separate Web App for staging in the same App Service Plan, or you can create a Deployment Slot in the existing production Web App. Personally I think it is cleaner to use Deployment Slots, to minimize the number of Web Apps. Originally Deployment Slots were meant to be a pre-production environment that you can swap out with the real production environment. For example, you could deploy code changes to the Deployment Slot, then once it's working "Swap" the Deployment Slot and it will immediately update the Production environment. However I think this a different type of workflow than what I usually do with Git and having staging and master branches that deploy to the environments. I don't plan on using the Swap functionality, but many others like using it.

1. To create a deployment slot, select the App Service and click on Deployment slots > Add Slot
2. Name it, i.e. "staging" -- this will create a new subdomain on the *.azurewebsites.net site by adding the slot name to the existing Azure domain
3. Under Configuration Source, select to clone from the existing Web App
4. Click OK to create the new deployment slot

Setting up GitHub Deployment

At the moment, it's not possible to use an external Git repository for Azure and have staging and master branches that automatically deploy to Azure. GitHub is the suggested method of source control for now. First, create the GitHub repository and the master and staging branches. Once created, go back into Azure to connect the Web App to the repository.

1. Select the App Service (or App Service's Deployment Slot) > Deployment option
2. Under Choose Source, select GitHub. You may be prompted to log into GitHub; if so, log in using devservices (Credentials in 1Pass under GitHub)
3. Select Authorization, Organization, Project, and Branch.
4. Click OK to create the Deployment option.
5. Depending on how many files are in the repo, it make take a few minutes or longer to finish building the site. You can check the deployment status under Web App > Deployment options

Sitecore Admin Menus

Sitecore Admin Pages Explained, from the blog Fire Breaks Ice

Sitecore comes shipped with a plethora of admin pages that provide significant features to developers and administrators. Many of these pages aren’t exactly documented well or at all. I intend to identify and explain the admin pages that I know of and how they can be used to your advantage.

Read More:
http://firebreaksice.com/sitecore-admin-pages-explained/

Undoing a merge in Sourcetree/Git

Merging some changes into your master branch, then realizing you need an undo function, is stressful. Fortunately, whether or not you've pushed your merge, you can still reverse what you did. There's no actual "undo" in Git, but you can either reset the master branch, or reverse your changes.

If you haven't pushed to the origin master branch yet, you can reset the master branch to the previous commit before the merge. You'll want to reset using "Hard" mode so that your working copy of master will have the changes removed.

Sourcetree: 
Right-click the previous commit on the master branch, select "Reset current branch to this commit" and select "Hard" mode.

Git Command Line:
git reset --hard XXXXXXX (insert the Commit ID)

If your merge to master has been pushed, then you will need to do a reverse commit in the feature branch, which reverts everything in that commit, merge to master, then push master again. Later on, if you want to re-merge what was in the feature branch to master once again, you will have to reverse commit the reversion itself in the feature branch. This will reinstate the changes you had removed.

Using setInterval to run a script after element is finished loading from server

Sometimes I need to run a JS script on a set of HTML elements, but I run into problems when the script fires before elements or assets are finished loading from the server side.

For example, let's say I'm loading a grid of items, each of which has an image and some copy underneath. I want each item in the grid to be the same height, regardless of how much text it has. Generally I'd run a JS script to set the heights of all the items to the height of the tallest item.

However, since I'm loading the images through a CMS off the server, it sometimes takes a little bit before they are all loaded. If I run the script normally, it will fire before all the images finish loading, and it will resize the items to a height that is too short.

I've found that using the javascript function "setInterval" is a good solution; it runs at a frequency of your choosing, and each time it checks if the slower-loading element is loaded. If it isn't loaded, it will simply repeat the function; if the element is found to be finished loading, then it will run another JS script of your choosing, and clear the interval to stop checking.

// create your interval function as a named variable; having a name allows you to clear it later
var checkImages = setInterval(function () {

    // This checks the height of the last grid item's image, since it will be loaded last. 
    // Once it's loaded, the height will be more than 0.
    if ($('.grid:last img').height() > 0) {

        // if the image is done loading, clear out the interval
        clearInterval(checkImages); 
        
        // then run the script you want; this just happens to be the one I'm using
        equalizeHeights($('.grid__item')); 
    }
    else {
    }
}, 200); // run this every 200 ms

Reconnecting TeamCity build agent

We use TeamCity to build our projects when deploying to staging and production servers. Sometimes the Build Agent will get disconnected if the server gets restarted, and for some reason it won't reconnect.

If you are googling this issue frantically (like I have), you'll find a lot of people suggesting to open up Services in Windows and restarting the TeamCity Build Agent service. While this is needed, I found that doing so didn't reconnect the agent.

I finally started looking through the build agent configuration files, and found that the port change I had just done wasn't reflected in the build agent files. The file I was looking at was <TeamCity installation directory>\buildAgent\conf\buildAgent.properties and buildAgent.dist.properties. I had changed the port number for the web login, and while I saw in the buildAgent.dist.properties that it had the new port in the serverUrl config, the buildAgent.properties file still had the old port in the generated serverUrl.

I'm still not sure why the TC generation wasn't working, but I manually changed the port in the buildAgent.properties file. After restarting the TeamCity Build Agent service once more for good measure, I was able to see that the build agent was reconnected in the web interface.

Getting Grunt to run when deploying to a Windows server

I use Grunt to process my website css/js/etc files, which is quite handy. When deploying to a server, you do need to make sure that the files get processed as well. One way to do that is to install grunt on the server itself, and either run your grunt production task on deploy, or keep grunt running on the server with a watch task.

This is a short guide on how to run grunt as a Scheduled Task on a Windows server. (This assumes that you have already added a "watch" task on your grunt production task.)

• Create a .bat file in the root website directory, with the only content being "grunt" or whichever grunt task you want to run.
• In Windows Server Manager, click on Configuration > Task Scheduler > Task Scheduler Library > Microsoft > Windows
• Click Create Basic Task
• Enter the name and description, click Next
• Select "When the computer stats" for when the task should start and click Next
• Under What action do you want the task to perform, select "Start a program" and click Next
• Under Action > Program/script type in the name of the .bat file (don't use Browse), and under Start in type in the full path to the website directory (if you don't do this and use Browse to path to the file it won't run). Click Next and Finish to finish creating have it auto open the properties.
• In the Properties pop-up dialog, under Security options, select "Run whether user is logged on or not" and "run with highest privileges"

Shuffle an array of items in Javascript

This function will take an array, shuffle the items, and return a shuffled array.

function shuffleArray(array){

 var currentIndex = array.length, temporaryValue, randomIndex;

 // While there remain elements to shuffle...
 while (0 !== currentIndex) {

  // Pick a remaining element...
  randomIndex = Math.floor(Math.random() * currentIndex);
  currentIndex -= 1;

  // And swap it with the current element.
  temporaryValue = array[currentIndex];
  array[currentIndex] = array[randomIndex];
  array[randomIndex] = temporaryValue;
 }

 return array;
}

NuGet package errors in Visual Studio

If you're trying to install or manage NuGet packages in Visual Studio and you're getting error messages like "... end of Central Directory" or "Unable to read beyond the end of the stream," then you might have a corrupted .nupkg file.

To solve this, you will have to first see which packages are affected, and then manually download the .nupkg file for each package in question and replace them in your /packages directory.

To check which packages are corrupt, first open Visual Studio and the NuGet Package Manager in Tools > NuGet Package Manager > Manage NuGet Packages for Solutions.

Once you open it, click on the "Installed" tab and that is generally where you'll see the error messages.

To check which packages have corrupted files, open the /packages/packages.config file and one by one, comment out all but one of the <package> elements in <packages>, each time clicking back to the NuGet - Solution tab in VS to see if the error is still happening. If you don't get an error message for one, that means it's fine.

For the packages with errors, you will have to download the .nupkg files manually. Go to the NuGet site and type in the name of the package you want to download. Click "Download" in the left sidebar, making SURE that you have the same version that is in your Visual Studio! Then paste the file and overwrite your current corrupted .nupkg file in /packages/packagename. 

Once you do this for each of the corrupted packages, uncomment everything in packages.config and check in the Installed tab again. Hopefully your error messages will be all gone and you'll just have a list of the installed packages.

Adding field validation to Sitecore editor

Sometimes you may want to add validation to a field on Sitecore, like limiting the length of a text field. Sitecore comes with some sample field validations that you can add to your templates, or duplicate and modify to create new ones.

In the Sitecore Content Editor, go to sitecore > System > Settings > Validation Rules > Field Rules > Sample to see the pre-packaged rules. I wanted to create a Max Length 55 rule, so I duplicated one of the existing Max Length rules and changed the name, title, Description, and the Data Parameters to have that 55 value. Save and publish the rule.

Then go to Templates and expand the template until you can select the actual field in the left sidebar tree. In the right side, go down to the Validation Rules section, Validator Bar, and find the new rule you made in the Sample folder. Click to select, then click the ">" button to select it. Adding the rule to the validator bar will highlight the field in red if trying to save while the field is too long.

Save and publish the changes on the template, and you're done!

TeamCity Build Errors

A .NET site I work on uses TeamCity to deploy changes to both staging and live servers. I was encountering build errors related to the .csproj file on the staging server and couldn't figure out what the issue was. Looking at the build log, I noticed a bunch of errors saying "the type or namespace could not be found." However when I checked the files on the staging server, everything seemed to be there.

I was also googling about TeamCity and how it works (I inherited this project and am not super familiar with TC). I discovered that when TC builds, it actually copies all the files on the server into a separate TC work directory, builds that, then if it is successful it copies the changed files back into the actual server files. This means that the failed build was happening in the work directory, not the actual website.

The next day I went back to the problem with a fresh mindset. One thing I've started doing is the "talk to the duck" strategy for troubleshooting. This technique has you talk out loud to a rubber duck, or some other inanimate object, explaining what your issue is. This has actually helped me a ton when I'm stuck on some especially difficult problem. I don't talk out loud to an object, but what I have been doing is writing out the problem on a whiteboard. It works well because it takes you out of the tunnel vision when you're bug fixing and forces you to step back and look at the problem on a more high level.

Anyway, when I wrote out the problem, it was issues with the csproj file, and assembly errors. Knowing now that TC was erroring out in the work directory, I checked the bin folder and realized that it was almost completely empty. So I manually copied and pasted the bin files from the website directory to the TC directory and tried again. There were a couple other missing files which I also copied over. Finally I hit build one last time and it was successful!

The green message box has never looked so good.

I  haven't done this yet, but I think the /bin and other missing files need to be added to the csproj. My guess is that the bin files were copied and pasted manually previously. But at some point TC probably ran a cleanup and deleted everything to build from scratch, meaning with an incomplete project file, thus causing all the build errors.

In summary, for TeamCity build errors, check the following:

• See where the errors are happening in the log file
• Check that the /bin files exist in the TC work directory
• Copy/paste any missing files to the work directory and add to the csproj

Fixing Mixed Content Insecure Errors when Loading Telerik JS scripts via a CDN

Telerik gives you the option to load its scripts via a CDN. However, if your site is running on HTTPS, you will get a mixed content error and the scripts will be blocked.

As of the 2010 version of Telerik, it's possible to load the Telerik scripts securely over HTTPS. To do this, add CdnSettings elements inside your RadScriptManager, making sure to include one each for BaseUrl and BaseSecureUrl.

<telerik:RadScriptManager runat="server" ID="ScriptManager1"> 
   <CdnSettings BaseSecureUrl="https://d2i2wahzwrm1n5.cloudfront.net" TelerikCdn="Enabled" /> 
   <CdnSettings BaseUrl="https://d2i2wahzwrm1n5.cloudfront.net" BaseSecureUrl="https://d2i2wahzwrm1n5.cloudfront.net" TelerikCdn="Enabled" /> 
</telerik:RadScriptManager>

Further Reading:
The Telerik CDN – Now with SSL support too!

Focus on a textbox using jQuery

You may want to auto focus on a textbox in cases like when you have a search textbox dropdown when clicking on a search button.

The jQuery method .focus() can help with this. However in order for it to work you may need to add in a small delay in order for the browser to pick it up.

// Click event
$('#btnSearch').click(function(){

 // focus on search bar after delay
 setTimeout(function () {
     $('#txtSearch').focus();
 }, 500);

});

Real Favicon Generator

Here's a handy tool that will help quickly generate favicon, Apple, and Windows icons for your website. Just upload your originating PNG and it will create a zip file of all the files as well as give you an HTML snippet to put in your head tags.

http://realfavicongenerator.net/