Last week was a busy one at NDC Sydney and was happy to be back there for the second time.The conference was three days long with 117 speakers, 37 technologies, and 151 talks. Some of the popular speakers were Scott Wlaschin, Scott Allen,Troy Hunt, Damian Edwards, Steve Sanderson and a lot more.

NDC Sydney

Sessions

Each talk is one hour long and eight talks happen at the same time. Below are the talks I attended:

All sessions are recorded and are available here. The Sydney 2017 ones will soon be there. Overall it was a good event but did not match the one last year. Last year there were more of the popular speakers and the talk content was also more interesting. But still, I am glad that NDC Sydney is still happening, and it gives a good exposure and networking possibilities for developers. Thanks to Readify for sponsoring my tickets and it’s one of the good things about working with Readify.

Hope to see you next year as well!

We are typists first, and programmers second.

-Jeff Atwood

If you are like me, spending a lot of time with a computer, it’s worth you take the time to learn to type without looking at the keyboard a.k.a touch typing (if you currently type by the hunt and peck method). Though productivity cannot be measured by the number of words you type per minute, it’s good to learn to touch type. There are various applications that help you to improve your typing speed. Some of them are online and some offline desktop applications. Pick one that suits you and improve your typing speed.

Touch Typing layout

I learned to touch type only a couple of years back, getting inspired after reading Learn Anything in 20 Hours. In the book, the author explains how he learned a new keyboard layout, Colemak, in just 20 hours. The book explains the full process and setup used by the author. It uses various tools like Keyzen, Type-fu, Amphetype. More than the tools it is the process and the approach to the learning that is interesting. A summary of the tools and approaches is available here but highly recommend reading the book. I found the approach very helpful and effective and used to learn QWERTY layout.

Irrespective of the way you choose to learn touch typing, it might seem a bit hard at the start. Keep at it for some time snd you will soon see an improvement in your typing speed.

In the previous post, Generating a Large PDF from Website Contents we saw from a high level the approach taken to generate PDF files from a Content Management System (CMS) website. In this post, we will delve further into the details of each of those areas.

HTML To PDF

There are a lot of libraries and services that support converting HTML to PDF. We chose this mechanism mainly for keeping the content formatting simple and reusable. Most of the PDF data was to be structured like the website content. This means we can reuse (read copy/paste) the HTML styling for the PDF content as well.

We used Essential Objects HTML to PDF Converter library. Our website is hosted as an Azure Web App and the Essential Objects library does not work in the Azure sandbox environment. The Azure Sandbox restriction affects most of the HTML to PDF libraries. The recommended approach to use those libraries is to host the PDF conversion logic on an Azure Virtual Machine, which is what we also ended up doing. Alternatively, you can choose to use one of the HTML to PDF hosted services.

The below code snippet is what you need to convert an HTML URL endpoint to PDF. It uses the HtmlToPdf class from the EO.Pdf Nuget package. The HtmlToPdfOptions specifies various conversion and formatting options. You can set margin space, common headers, footers, etc. for the generated PDF content. It also provides extensibility points in the PDF conversion pipeline.

1
2
3
4
5
6
7
8
9
10
11
public FileContentResult Convert(string url)
{
    var pdfStream = new MemoryStream();
    var pdfDocument = new PdfDocument();
    var pdfOptions = this.GetPdfOptions();

    var result = HtmlToPdf.ConvertUrl(url, pdfDocument, pdfOptions);
    pdfDocument.Save(pdfStream);

    return new FileContentResult(pdfStream.ToArray(), "application/pdf");
}

HTML Formatting Tip

You might want to avoid content being split across multiple pages. E.g., images, charts, etc. In this cases, you can use the page-break-* CSS property to adjust page breaks. Essentials objects honors the page-break-* settings and adjusts the content when converting into PDF.

Bookmarks

A bookmark is a type of link with representative text in the Bookmarks panel in the navigation pane. Each bookmark goes to a different view or page in the document. Bookmarks are generated automatically during PDF creation from the table-of-contents entries of a document.

We generate a lot of small PDF files (per section and category/sub-category) and then merge them together to form the larger PDF. Each of the sections has one or more entries towards Table Of Contents (TOC). We decided to generate bookmarks first per each generated PDF. When merging the individual PDF, the bookmarks are merged first, and then the TOC is created from the full bookmark tree.

Bookmarks can be created automatically or manually using Essential Objects library. Most of the other libraries also provide similar functionality. Using the AutoBookmark property we can have bookmarks created automatically based on HTML header (H1-H6) elements. If this does not fit with your scenario, then you can create them manually. In our case, we insert hidden HTML tags to specify bookmarks. Bookmark hierarchy is represented using custom attributes as shown below.

1
2
3
4
5
6
<a class="bookmark" id="TOC_Category1" name="Category1">Category 1</a>
...
<a class="bookmark" id="TOC_Category1_Section1" name="Section1" tocParent="TOC_Category1">Section 1</a>
...
<a class="bookmark" id="TOC_Category1_Section2" name="Section2" tocParent="TOC_Category1">Section 2</a>
...

Once the PDF is created from the URL, we parse the HTML content for elements with bookmark class and manually add the bookmarks into the generated PDF. The GetElementsByClassName and the CreateBookmark methods help us to create bookmarks from the hidden HTML elements in the page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
 ...
 var result = HtmlToPdf.ConvertUrl(url, pdfDocument, pdfOptions);
 BuildBookmarkTree(pdfDocument, result);
 pdfDocument.Save(pdfStream);
 ...
}

private static void BuildBookmarkTree(PdfDocument pdfDocument, HtmlToPdfResult htmlToPdfResult)
{
    var bookmarkElements = htmlToPdfResult.HtmlDocument.GetElementsByClassName("bookmark");
    foreach (var htmlElement in bookmarkElements)
    {
        var bookmark = htmlElement.CreateBookmark();
        ... // Custom logic to build the bookmark hierarchy
        // based on custom attributes or whatever approach you choose.

        pdfDocument.Bookmarks.Add(bookmark);
    }
}

Handling Empty Pages

In our case, the content is from a CMS, and the user gets an option to select what categories/sub-categories and sections of data to be displayed in the generated PDF. At times it happens that some of the selected combinations might not have any data in the system. To avoid printing a blank page (or an error page) in the generated PDF, we can check the conversion result to check for the returned content. Whenever the content does not exists the HTML endpoint returns an EmptyResult class.aspx). At the PDF conversion side, you can check if the response is empty and accordingly perform your logic to ignore the generated PDF.

1
2
3
4
5
6
7
8
9
10
public static class HtmlToPdfResultExtensions
{
    public static bool IsEmptyResponse(this HtmlToPdfResult htmlToPdfResult)
    {
        return htmlToPdfResult != null &&
            htmlToPdfResult.HtmlDocument != null &&
            htmlToPdfResult.HtmlDocument.Body != null &&
            string.IsNullOrEmpty(htmlToPdfResult.HtmlDocument.Body.InnerText);
    }
}

Once the individual PDF files are created for each of the section and category/subcategory combination, we can merge them together to generate the full PDF. We will see in the next post how to merge the bookmarks together along with shifting the PDF pages and generating Table of Contents from the bookmarks.

If you own a website, then it is good to check their performance now and then. Various factors affect the site speed, and it’s better to use some tools to do the job for you.

Google PageSpeed is a set of tools from Google designed to check and optimize websites performance. PageSpeed Insights is one of the tools in the suite that helps identify the ways to make your site faster and mobile friendly. The tools check for common good practices and provide a score out of 100 points. PageSpeed Insights only considers the network-independent aspects of page performance: the server configuration, the HTML structure of a page, and its use of external resources such as images, JavaScript, and CSS.

PageInsights

YSlow is a similar tool from Yahoo!, that analyzes web pages for performance. It is available as a browser extension and has one for all popular ones. It provides a grade for the web page based on a predefined ruleset or a user-defined ruleset. The grade is calculated based on the YSlow Ruleset Matrix.

YSlow

I have been implementing some of the recommendations from the above tools on this blog, but as you can see from the above results, there is still more to be done. Hope you find this helpful for your sites.

At one of my recent clients, we had a requirement to generate a PDF dynamically based on the contents of the website. The website is a Content Management System (CMS) built on top of Umbraco. The content is grouped into different categories and sub-categories. Each category and sub-category had different sections/sub-sections under that. Some sections are optional for certain categories, and all of these are dynamic. In this post, I will walk through at high level the approach taken to solve the problem.

The user selects the categories/sub-categories and the sections that they wish to export as PDF. On submit, a PDF needs to be generated based on the website content.

Model Structure of Domain
1
2
3
4
5
6
7
8
9
10
11
12
public class Category
{
    public string Name { get; set; }
    public List<Section> Sections { get; set; }
    public List<Category> SubCategory { get; set; }
}

public class Section
{
    public string Name { get; set; }
    public List<Section> SubSections { get; set; }
}

Select options to download

The actual site had one more level of options (say sub-sections), so you can imagine the number of possible combinations to generate the content. The site content was huge as well, and a PDF with all options selected would be around 4000-5000 pages. So creating the PDF every time some one clicks the button was out of the question. We had to cache the generated PDF’s and serve them as the request comes in. But the challenge was how to manage the cache so that we can build up the PDF based on the options selected.

If you are using HTML to PDF libraries be aware that most of the libraries out there (Essential Object, EvoPDF etc.) does not work on Azure Web Apps. This is because of the sandbox restrictions on the applications irrespective of the Azure plan you are on. The preferred solution is to host the conversion code on a VM. If you find that an overhead (which it is) consider using the SAAS alternatives for converting HTML to PDF.

Below is the flow diagram of the complete process of generating the PDF as a request comes. The request specifies the categories/sub-categories along with the sections that need to be in the generated PDF.

PDF Generation Flow

We decided to create a PDF file for each section per category/subcategory selection. Once all the sections are ready, all the PDF files will be merged into one. While merging we also build up the bookmark tree and the table of contents. Inserting the table of contents page at the start of the PDF requires pushing all the page numbers to match the new ones.

The PDF layout for individual sections per category/subcategory is in HTML. The application exposes endpoints for the HTML content for the different sections. We used Essential Object HTML to PDF Converter to convert the HTML to PDF files. Bookmarks for the associated section are embedded in HTML. While converting to PDF, the bookmarks get added to the PDF, which later gets merged into the full bookmark tree. The generated PDF file is cached for any new requests.

Since we have around forty categories/sub-categories, twelve section, and ten sub-sections, generating the full PDF take a while. So we generate the cache at fixed intervals and as required (when content is updated in the CMS). The above approach of generating PDF files has been working fine for us. Since the individual PDF sections are generated in isolation, it gives us the flexibility to scale the generation process as required. Combining the generated PDF files is often fast and can be cached at a different level as well to speed up the whole process.

Chocolatey - Package Manager for Windows

Chocolatey is a package manager for Windows. Chocolatey is a central store of applications, tools, and other packages. It allows you to install them on your computer from the command line. Let’s look at an example to make things more clear. Let’s say I want to install the Google Chrome Browser on my system. Below is how I would go about installing it.

Installing Google Chrome (Without Chocolatey)

  1. Bing for Google Chrome (Assuming that you are on Windows and open up Internet Explorer and search for Google Chrome)
  2. Click the relevant link from the Search Results
  3. Hit the Download Chrome button
  4. Wait for the installer to download and open that to install.

Installing Google Chrome (With Chocolatey)

  1. Run ‘choco install googlechrome’ from command line

Installing with Chocolatey is quick and easy. You no longer need to go around searching the web for the software that you want to install. If you are unsure of the package name (e.g. googlechrome), you can search the entire packages library. This is possible from the command line using ‘choco search.’ Or you can also search on their website.

Run the below script from the command line to install Chocolatey Package Manager. Once installed you can start managing applications through the command line using Chocolatey.

1
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

Other than installing and searching packages, Chocolatey also supports a lot of other commands to manage applications including un-installation. The entire commands supported are available here. Instead, you can get the details in your command line using ‘choco -h.’

Hope that helps you save some time when you next want to install something.

Australia is known for its beaches, and there are a plenty of them all around. Sydney is no different for that, and it’s known for some of the world famous beaches including the Bondi beach. But at times it’s also good to try places other than beaches. Here is a list of such places around Sydney that is perfect for a day trip and not just limited to beaches.

TLDR;

Grand Pacific Drive

The Grand Pacific Drive makes a perfect day out with one of the best drives and perfect scenery along the route. It starts from Royal National Park through Wollongong, Shellharbour, Kiama, Shoalhaven, Southern Highlands, Eurobodalla and ending at Sapphire Coast. Each one of those places have things enough to spend a whole day. You can either choose to do the entire drive or do each of these places on separate day trips. The Grand Pacific Drive site has all the details that you need to plan your trip. It also has a trip planner that makes planning easier.

Grand Pacific Drive

Do make it one day for the sun rise at the Sea Cliff bridge. It’s amazing and worth waking up early enough to make it up there on time.

Fitzroy Falls

As the name suggests, the Fitzroy Falls spots a magnificent waterfall with a nice walking track along the sides. There are various lookouts to the waterfall along the walking track. There is also a cycling track from the falls to Kangaroo Valley for those interested.

Fitzroy Falls

Kangaroo Valley

Kangaroo Valley is a two-hour drive from Sydney and is popular for kayaking, canoeing, golf and wine tasting. You can take a break and play on the banks of the Kangaroo River. Do check out the Fudge House if you have a sweet tooth and the pie shop for a quick snack.

Audley Boating

Situated in the Royal National Park, Audley boating provides a great experience along the Kangaroo Creek. You can hire a boat or ride a bike and enjoy the magnificent views.

Morriset Park

If you want to see Kangaroos, then this is the place you should be. You can get close up with kangaroos and hundreds of them. It’s an experience that no zoo can provide. One of the Kangaroo spotting points is near the Morriset Hospital. Even on a rainy day, there were plenty of them so I am sure you would not miss out on it. There are a few other parks and places as well nearby where you can take a stroll and stand a chance of spotting one.

Morriset Park, Kangaroos

Mandarin Picking

Situated on the banks of Hawkesbury River at Wisemans Ferry there are a couple of farms where you can go picking mandarins. I had been to the Watkins Family Farm and enjoyed every bit of it. It’s great fun for kids and equally for adults. We ended up going back there twice in the same season. Make sure you check the farm sites for details on timing and months they are open.

There are a few other picnic spots as well around the area. There is a vehicle ferry service to take your vehicle across the river and explore that side as well.

Animal Farm (Kids)

If you have kids, then a day out at one of the animal farms around Sydney is an excellent way to spend your day. Google should help you find the farms around you. The Calmsley Hill animal farm is a family friendly environment with daily shows, picnic and BBQ area. They often run some online offers so make sure you check that out before you head off.

Taronga Zoo

The zoo is always a great place to spend time. The Taronga Zoo experience is no different. If you have not taken the Sydney Ferries before this is a good excuse to do that. It’s really big, and there are a lot of shows as well. Do check out the show times prior and plan for it upfront. It can be crowded at times. If you have kids getting an annual pass to the zoo might be worth.

Illawarra Fly Treetops

Escape into the trees at the Illawarra Fly Treetops and enjoy the stunning views and the zipline experience. It is a perfect place for a day trip and equal fun for families. It offers a breath taking views and a great experience. Check out for online offers!

Illawara Fly Treetop

Nan tien temple

The Nan Tien Temple is the largest Buddhist temple in the Southern Hemisphere. It’s a calm and peaceful place and a nice spot to take your day off and relax. The temple offers many services including a guided tour. They run various retreats and meditation classes if you are interested. You can either choose to spend a whole day here or spend a few hours on the way to Illawarra Fly Tree Tops.

Ku-ring-gai Chase National Park

Ku-ring-gai Chase National Park combines important history with scenic beauty, making it perfect for a day out for families and kids. There are great picnic areas, heritage walks, lighthouse, boating, etc. There are not many shops around so get all that you need on the way.

The Entrance, Central Coast

Even though the main attraction here is a beach, there still are enough things other than that to make your trip worth while. Tuggerah Lakes Cycleway is an off-road, scenic 12-kilometre ride and is perfect to spend some time. Don’t miss out on the Pelican Feeding which happens at 3:30 pm every day all round the year.

These places make a perfect getaway for a day. Mix it up with some of the awesome beaches - Bondi, Palm, Wattamolla, La Perouse, Coogee, Ramsgate, Cronulla, etc. and it should be enough to keep all your weekends busy. What places did I miss? Sound off in the comments.

Have great weekends ahead!

With the blazing fast internet speeds at work (and at home) it might be hard to imagine how sites would work for people with a lower bandwidth. When developing for the Web, it is good to keep in mind that people from various regions across the globe might access your site. Internet speeds are not that fast around the world. So it is essential to test how your website performs for people on a lower bandwidth.

There are a lot of plugins and external tools that can simulate a lower bandwidth scenario and makes testing on slower bandwidth easier. If you are using Google Chrome, then you already have one such tool under your belt. The Network tab under Google Chrome Developer Tools has an option to set different bandwidth profiles. Setting this to a profile that you want, and launching the site forces the site load on the set bandwidth.

Google Chrome Developer Tools - Network Delay

There are many default bandwidth profiles in there, and it also allows you to add custom profiles if required. There is also an option to simulate offline mode, to test how the application behaves without an internet connection (if that applies to you). However such testing is mostly restricted to manual testing, and for automating this, you might have to look for external tools.

Hope this helps optimize your site for lower bandwidth!

At one of my clients, we faced a strange issue recently. The Azure Web application restarted automatically very often. The event log in the Kudu console showed the below error message.

2017-07-13 00:09:50,333 [P45516/D4/T171] INFO Umbraco.Core.UmbracoApplicationBase - Application shutdown. Details: HostingEnvironment

_shutDownMessage=Directory rename change notification for ’D:\home\site\wwwroot’.
Overwhelming Change Notification in wwwroot
HostingEnvironment initiated shutdown
Directory rename change notification for ’D:\home\site\wwwroot’.
Overwhelming Change Notification in wwwroot
Initialization Error
HostingEnvironment caused shutdown

As you can tell from the logs, the website is an Umbraco CMS hosted as an Azure Web application. We noticed that the restarts were happening more when the content was getting updated through backoffice. The error also states that the restart was caused due to Overwhelming Change Notification in wwwroot. This hints that there are changes that are happening under the wwwroot folder, where the site is hosted.

Even though this post details on why the specific site on Umbraco was restarting, most of the contents are still applicable for any other ASP.NET MVC application.

fcnMode Configuration

A quick search got me to the fcnMode.aspx)setting under httpRuntime.aspx) section. An ASP.net application monitors certain files and folders under the wwwroot folder and will restart the application domain whenever it detects changes. This likely look looks the reason why the web site is restarting.

The fcnMode enumeration.aspx) can take one of the four values below. For an Umbraco application this is by default set to Single.

  • Default: For each subdirectory, the application creates an object that monitors the subdirectory. This is the default behavior.
  • Disabled: File change notification is disabled.
  • NotSet: File change notification is not set, so the application creates an object that monitors each subdirectory. This is the default behavior.
  • Single: The application creates one object to monitor the main directory and uses this object to monitor each subdirectory.
fcnMode set to Single for Umbraco application
1
2
3
4
5
6
7
8
9
10
<system.web>
    ...
    <httpRuntime
        requestValidationMode="2.0"
        enableVersionHeader="false"
        targetFramework="4.5"
        maxRequestLength="51200"
        fcnMode="Single" />
    ...
<system.web>

FCNMode creates a monitor object with a buffer size of 4KB for each folder. When FCNMode is set to Single, a single monitor object is created with a buffer size of 64KB. When there are file changes, the buffer is filled with file change information. If the buffer gets overwhelmed with too many file change notifications an “Overwhelming File Change Notifications” error will occur and the app domain will recycle. The likelihood of the buffer getting overwhelmed is higher in an environment where you are using separate file server because the folder paths are much larger.

- ASP.NET File Change Notifications and DNN

You can read more about fcnMode setting and how it affects ASP.Net applications here.

What’s causing file changes?

Default reaction when you come across such a setting or configuration value might be to turn that off and fcnMode does allow that as well - Disabled. But first, it is better that we understand what is causing file changes under the wwwroot folder and see if we can address that. The FCN Viewer helps visualize how many files and folders are being watched in as ASP.Net application.

In the Umbraco website, we are using a third party library ImageProcessor that helps to process images dynamically. The ImageProcessor caches images and the cache location is configurable. By default, it caches files under the App_Data/cache folder, which also happens to be one of the folders that the ASP.Net application monitors for changes. So anytime there are lots of files changing in the cache folder it causes the single monitor object monitoring the folders. This causes a buffer overflow and triggers an application restart due to Overwhelming file change notifications. However, ImageProcessor does allow moving the cache folder outside of the wwwroot folder. This causes the file not to be monitored and still work fine with the application. Since the library does not create the cache folder automatically, we need to make sure that the folder specified in the config file exists.

Having moved the cache folder outside of the wwwroot, I no longer need to update the fcnMode setting and can leave it as intended. If you are facing application restarts as well due to overwhelming change notification in wwwroot see what is likely causing the file changes and then try and fix that instead of just setting the fcnMode to disabled.

Hope that helps fix your application restarting problem!

Writing is hard work. A clear sentence is no accident. Very few sentences come out right the first time, or even the third time. Remember this in moments of despair. If you find that writing is hard, it’s because it is hard.

– William Zinsser, On Writing Well

Editing is the hardest part of writing and one that I skip the most. I try hard not to skip editing, but often I end up being lazy to do the hard work. I try to cover this up with some tools to make it faster. It is hard for one tool to get it all right. So it’s best if you have a range of tools under your belt to support you with writing.

The Hemingway Editor highlights hard to read sentences, adverbs, complicated phrases, etc. The writing app uses different colors to highlight the various issues as shown below. The editor also shows a summary of the text including the reading time, total words, sentences etc. The app also shows a Readability Grade using Automated Readability Index.

Hemingway Editor

The Hemingway Editor is available for free on the web with lesser features. The web application does not let you save your work. You are always at risk of loosing the work if you are authoring on the site.

The Windows/Mac applications supports a larger set of features but for a price. The desktop application works without an internet connection, allows publishing to Wordpress/Medium. It also supports to exporting to different formats (word, pdf, html, markdown etc.).

I use the Hemingway Editor (on the web) occasionally and find it useful at times. It’s good to double check for any issues before publishing the post. Hope this helps you as well in your writing.