0 Comments Posted in:

As part of my blog rewrite, I wanted to create a striped list effect for my sidebars, something like this:

image

In this post I'll show how we can take a regular unordered list and style it with stripes using CSS. As an example, here's a simple list of items:

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
  <li>Pears</li>
  <li>Plums</li>
</ul>

By default, this will render with bullet points and some indentation:

image

Let's give our ul a class of striped-list, and then we can clear the default formatting like this:

ul.striped-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

This gets rid of the bullet points and indentation:

image

Next, let's introduce the striping. That's easy thanks to the CSS :nth-of-type() selector. We'll give every odd numbered row a background-color:

ul.striped-list > li:nth-of-type(odd) {
    background-color: #e9e9f9 ;
}

We're almost there already:

image

But we could do with some extra padding on li elements and I'd also like a dividing line between list elements. We can do that by giving each li some padding, and putting a one pixel bottom border on each li:

ul.striped-list > li {
    border-bottom: 1px solid rgb(221,221,221);
    padding: 6px;
}

image

Now we're almost there but if you look very carefully you'll see that the bottom item in the list has a border, and I only wanted to use the border as a separator between items. We can get rid of that with the help of the CSS :last-child() selector, turning off the border on the last li element only.

ul.striped-list > li:last-child {
    border-bottom: none;
}

And this gives us the desired effect:

image

Of course, I'm sure this is all very basic stuff if you already know CSS, but hope someone finds this useful. You can play with a full example on CodePen.


0 Comments Posted in:

Back in 2014 I moved away from blogger to a self-hosted blog. I considered several options at the time and ended up forking Miniblog.

This Christmas though, I've just finished a complete rewrite of this blog from the ground up using ASP.NET Core 2.0.

There were two main motivations for this. First of all Windows Live Writer is now effectively dead, and although the new Open Live Writer project seems promising, it still lacks some important features I want, and in any case I wanted to move to storing all my blog posts in Markdown.

Second, if you want to learn a new technology, build something with it! I wanted to get to grips with ASP.NET Core 2 and a blog is a nice sized puzzle to tackle - not too trivial, but not too huge. In the end I spent up taking about 3 days to complete the project. It was quite a journey and I plan to blog about some of the things I learned along the way. Here's a few of the highlights:

  • Started off using Razor pages but ended up realizing that regular MVC controllers and views made life easier
  • Made plenty of use of partial views - a great way to declutter your views
  • Instead of building on bootstrap, I created the CSS from scratch. This means no rules that I don't need or don't understand! Of course this involved plenty of F12 tools and "inspect element" to learn tricks from other sites.
  • I borrowed lots of ideas from Miniblog.Core, particularly things like:
  • Coded in VS Code rather than Visual Studio. I'm really loving the lightweight and fast VS Code experience. It still lags VS2017 very slightly in terms of intellisense and I do miss ReSharper, but the OmniSharp extension really is very impressive and is not far from catching up.
  • Continuous deployment from a VSTS hosted Git repository to Azure websites
  • Used MarkDig to render Markdown to HTML
  • Used YamlDotNet to parse the frontmatter in my new markdown blog post file format
  • Used Html2Markdown to convert all legacy posts into MarkDown. It wasn't perfect, but it got me 90% of the way
  • Wrote several LINQPad scripts to batch convert things, fix up links, rename images. It remains one of my favourite dev tools for automating all kinds of tasks.

I've attempted to check as many of the 500+ old posts on this blog as possible to ensure they all still display correctly. I've also tried to test on a variety of browsers. But I expect some things are broken now, so do let me know if you run into any problems.


0 Comments Posted in:

As usual, it's time to reflect on what happened this year, and start thinking about what I want to achieve next year...

I became a Microsoft MVP

I got a very nice and unexpected surprise back in March of becoming a Microsoft MVP. This was a tremendous honour and it's been fascinating to gain some insider access to what's going on with various product groups at Microsoft. I'm particularly looking forward to my first ever trip to the USA in March to attend the global MVP summit.

I released three Azure related Pluralsight courses

In January I released Azure Functions Fundamentals. Azure Functions is a really exciting platform that has continued to pick up great new features over the last year. I followed it up with Building Serverless Applications in Azure where I walked through creating a real-world application in a serverless application, using Azure Functions. And then finally I produced Azure CLI - Getting Started. The Azure CLI is a really easy to use and powerful commandline tool for managing Azure resources that's well worth your time learning.

I learned a lot of new stuff...

One of the joys (and frustrations) of programming is that you never stop needing to learn new things. And this year was no exception.

I started the year getting up to speed on Docker on Windows and am really impressed with what l've seen so far. As well as buying his excellent book, I've been following Elton Stoneman's weekly Windows Docker file series which has been a great way of reinforcing what I've learned so far.

Another focus area for me has been improving my front end web skills. I've picked up some new CSS techniques, completed a 30 day JavaScript course, completed a great Vue.js course, and completed this year's Advent of Code challenges in ES6. Finally, the eagle-eyed among you might have noticed that I've just relaunched my blog written in ASP.NET Core 2. Hopefully I've not broken anything important in the transition, and you can expect some blog posts about the journey in the near future.

The two languages I've made most progress in this year have been JavaScript (particularly the new ES6 syntax) and PowerShell. It’s also nice to see C# picking up some new features (a few of which I blogged about), especially since I haven't really had the opportunity to use F# as much as I'd like in the last year.

Of course, a huge focus this year has been Azure, which has been the main technology I use in my day job. I published 29 posts about Azure this year.

NAudio is slowly improving

During the year I released several new versions of NAudio, the latest being 1.8.4. I answered hundreds of NAudio questions on Stack Overflow and GitHub and I did a month of documention in November, adding 30 new tutorials to the project. I also accepted 13 pull requests So NAudio continues to progress but it is also true that now my day job is much more cloud focused, my time available for working on it is limited. Hopefully next year it will keep progressing in the right direction, and I'm still very open to bringing new people onto the NAudio team.

What's next?

I'm sure there'll be plenty of surprises next year, but it's looking like Azure (and especially Azure Functions) will remain a major focus area for me. I'm also hoping that next year includes some Docker, Vue.js and ASP.NET Core.

In 2018 I'd also like to give a few talks at local user groups. Topics I enjoy speaking on include LINQ, Technical Debt and Azure Functions/Serverless, so do let me know if you're on the lookout for something on those lines in the South of England and I'll see what I can do.

Big thanks to everyone who's followed this blog and helped me learn new stuff this year.