Run JSLint over the code
After the issues highlighted by JSLint have been fixed, organise the code so that it follows a more structured outline such as having a collection of vars and functions.
Add the AMD define call
For it to be recognised by module loaders such as require.js, the code needs to be wrapped in define calls which will turn it into an AMD module.
Dependencies such as jQuery
To add any dependencies such as jQuery, simply include them in the define call array such as this:-
Any dependencies added in this way also need to be AMD compatible modules or a shim might be needed, documentation for jQuery can be found here:- https://requirejs.org/docs/jquery.html
Add a little Encapsulation
One of the advantages of the module pattern is that it can be structured so that variables and functions can be internalised and effectively defined in a 'private' scope. The module's return object can define exactly what should be publicly accessible. In the previous code snippet, the variable
foo and both functions were all returned by the module. This means that they would all be publicly accessible by any client code. Instead, we want to ensure that
foo and the functions are initially defined as private, and then expose the functions explicitly in the return object.
Through the life of this blog in its many guises I have used Blogger, Community Server and WordPress. Now comes the time to move again and I have opted to use MiniBlog; a project created by Mads Kristensen of Visual Studio Web Essentials fame.
MiniBlog is written in ASP.Net, C# and uses the website template in Visual Studio. It has a simple architecture and persists the blog posts in XML format as physical files on the web server drive. There is much more to this platform though such as:-
- Windows Live Writer support
- RSS and ATOM feeds
- Support for robots.txt and sitemap.xml
- Much much more…
Although I have had a great experience using WordPress over the past few years, I have become more apparent of the bloat that is downloaded to the users browser in the form of Java Script and CSS. As a developer who strives to optimise web pages to get a better UX for the user, this didn't sit right with me.
This is the old sites Java Script showing over kb of data downloaded to the users browser.
The CSS is also loaded with the many styles from various plugins used in WordPress.
Wordpress is written in PHP and my experience is .Net, also the back end it's MySQL again a technology I am not 100% experienced with. So to make the changes to optimise the blog to a level I was happy with would leave me with either rewriting the entire theme and persistence layer or move to a technology stack I can have more control over. MiniBlog gives me this. I can create the style and layout I want with Razor and CSS and tweak the caching layer in the C# code. I can also get gulp up and running to run tasks to concatenate and minimize the css and Java Script files. Also like other projects I am working on, I can easily create a work flow in Team City to do the build and deploy.
What I had to do
Firstly I had to export all my blog posts from WordPress into a format that MiniBlog can understand. Again thanks to Mads Kristensen I could use the MiniBlogFormatter tool to get my posts into the correct format. This tool outputs each post to a seperate XML file. Then going through the current blog I found and separated post I wanted to keep that covered topics and technology that are still current. Then I created a temporary website in IIS to test these posts. It soon became apparent that the directory structure was different and MiniBlog uses a post directory to store files. I didn't want to loose any links to popular posts especially those that are referred to from other sites, so I created a url rewrite rule to do redirects to the new structure for users coming in on the old url.
As I have mentioned in a past post concatinating and minification of Java Script and CSS can be achieved by using gulp. Once this was done, the number of files downloaded was much less than before.
Now only 16 files are downloaded as opposed to 46 in the old site.
Also with the CSS, there are only 2 as opposed to 7 requests.
With the images, I used Paint.Net to decrease the resolution and size for better performance.
Then in IIS, I navigated to the HTTP Response Headers section for the directories that contain the Java Script and CSS files.
Clicked on the ‘Set common headers’ link in the top right hand corner.
Set the expires date to a date far into the future.
I was getting a lot of spam comments which Akismet took care of, so I had to find an alternative which would also protect me. I enjoy reading the comments and like to respond so switching off comments was not an option. I eventually went for Disqus which has a plugin architecture that was really simple to implement.
So there you have it, this is now the new blog site. It will change in style over the next few weeks as I make tweaks here and there, but with the CI/CD workflow I have in place this is very easy to work with.
I run all my sites of the same box which also has both MySQL and SQL Server running on it, so soon I can switch off MySQL, uninstall the PHP processor that it's part of IIS and hopefully free up some more resources.
- Part 2: Setting up an IIS Base Image and Creating Containers to Run a Website (this post)
Creating an IIS Base Image for Containers
New-Container –Name ServerCoreIIS –ContainerImageName WindowsServerCore –SwitchName “DHCP”