Asp.Net Core 2
In this series we will be focusing on all things Asp.Net Core 2.
We will start with one or more articles that can be used to get up and running using Asp.Net Core 2 as quickly as possible. The subsequent articles will be more in depth and will
be based on both the documentation and additional components that will add functionality to the core product.

#29 Generating The Offset Pagination Urls
In this article we will focus on generating all of the information that we need to
display all of the various components of our pager to the user. We will start by
generating the stats which will tell the user which items they are viewing out of
how many, next we will generate the urls for the first, next, previous and last
anchors, then we will generate the information for the individual page anchors
using a separate anchor class and lastly we will determine which of the first, next,
previous, and last anchors should be shown at all.

#28 Starting Offset Pagination
In this article we will discover the parameters that we need in order to
perform offset paging which we will get both from the user via the url
and provided by us. Once we have the required information we will create
a pager class that we will use to encapsulate the functionality that we
need. Using the pager we will determine the cases when we would need to
redirect the user and where to redirect them to as well as selecting the
correct entities from the database based on the current page.

#27 Creating A Mock Context Builder
In this article we will focus on creating a database context builder class
that will make it much easier for use to create data and use it as the data
store for an async capable mock dataset. Once completed we will just need
to retrieve the database context from the builder and use it when creating
our mock repository.

#26 Creating a Mock Repository
In this article we will build upon the previous by making it easier to first
create mock database sets and then make it easier to add data to them. We will
finish up by converting from using hard coded database sets to using a
repository which would more closely mirror what would normally be done in
a real world project.

#25 Mock Entity Framework Async Operations
There are many times that we would like to serve data from an in memory collection,
whether it be for unit testing or just messing around to see how something works, where
we have to/want to do it asynchronously. Entity Framework comes with a handy extension
method to convert a collection to a list asynchronously that we can use for this
purpose. Unfortunately for us there are a few hoops that we must jump through to do
this and we will see what those are in this article. By the time we are done here we
will have created all of the helper classes that we need to mock up a database set that
is capable of utilizing asynchronous methods.

#24 Picture Tag Helper
In this article we will round out our image related tag helpers by creating a picture
tag helper. The code required to generate the required html is a little bit more involved
due to the nature of the attributes required for the source tags but we will manage to
sort them out here. We finish up by updating our base class so that we can specify a
class, id, and/or additional attributes, such as data dash attributes, in the rendered
html using our tag helpers.

#23 Device Pixel Ratio Image Tag Helper
In this article we will create a new image tag helper that will take care of creating
img tags that will respond to the device pixel ratio (DPR) of the users device. This
allows us to serve a higher pixel density image for devices that can make use of it
while saving a users data by sending down a smaller image for lower resolution devices.
In this process of doing this we will create a base class that both of our tag helpers
can inherit from which will allow us to keep our code as DRY as possible.

#22 Responsive Image Tag Helper
In this video we will create a tag helper that will make it easier to create
responsive image tags. Our tag helper will use some easy to read and understand
attributes to generate the necessary attributes on our image tag. Not only will
the tag helper make sure that the attributes are formatted correctly if we should
ever need to make a change, to say how we implement lazy loading, all we will need
to do is update the tag helper and all of our images will be updated without us
ever having to track down all of our image tags and update them manually.

#21 Displaying The Optimized Images
In this article we will see how to create the ui for displaying the original and optimized
images from the previous article. One of the more interesting parts is seeing how to read
the sizes of the files located on the server and to organize the results using linq for
efficient display on the screen.

#20 Optimizing Images
In this article we will see how we can create a generic node script with a configuration file that we
can use to optimize our images using a package called imagemin. Imagemin has an ecosystem of around
40 plugins that you can use in order to optimize an image in just about any way you would need. We will
also take a look at a web based application that you can use to optimize individual images by hand while
at the same time being able to see what the final ouput will look like. Lastly we will also take a look
at another web application that we can use to compare images so that we can see how similar or not our
optimized images are when compared with the originals.

#19 Lazy Loading Images
In this article we will see how to lazy load all of our image tags. The process will be to
add a small npm package to our project and then to update our image tags. The updating is
extremely simple and basically boils down to adding a css class and coverting any srcset and
src attributes to be data dashed. As we will see this will work for all of our images
regardless of whether we are solving either the resolution switching or art direction problems.

#18 Responsive Images
In this article we will see how to deal with a couple of different problems, namely the resolution
switching and art direction problems, related to the use of images on our site. We will see how to
use the built in browser capabilities to dynamically switch to the appropriate image based on the
device the user is using to visit our site.

#17 Bottom Navigation
One of the most defining features of a mobile device is its relativaly small viewport. A popular
way of dealing with this when it comes navigation is to place our anchor tags within a collapsable
menu that is animated in and out with the press of a button. I have used and continue to use the
hamburger icon for this very purpose. If you do any amount of searching you can find plenty of
negativity around its use. One possible alternative, which we will implement here, is a bottom
navigation menu that is displayed only on smaller form factor devices.

#16 Main Navigation (Cookie Consent)
In this article we will implement the ability for use to display a message to the user indicating
that our site uses cookies and where they can find our policies in relation to their usage. This
message will be displayed if a consent cookie has not been set or has expired. The message will
continue to be displayed until the user accepts our policies by click an accept button which will
cause the consent cookie to be set.

#15 Main Navigation (Mobile Menu)
In this article we will set up our mobile navigation menu. In addition to adding the markup and
styling our approach will require the first use of javascript within our main navigation
component to animate the mobile menu in and out based on user interaction.

#14 Main Navigation (Search)
In this article we will continue the process of setting up our main navigation bar by
adding in a search form. In addition to that we will also add the required server side
code to take advantage of the search functionality that we added in previous articles.

#13 Main Navigation (Authentication)
In this article we will focus on adding the authentication links. For this project that includes the
ability for the user to register and login. If they are authenticated they will then have the ability
to visit their account page and to logout. In the case of logging out we will use a form and see how
to style it to look like all of the other links as well as how to include the anti-forgery token when
creating a reusable variable as we have been doing.

#12 Main Navigation (Anchors)
In this article we are going to create the main anchor tags for our top navigation bar. Once they are defined we
will of course apply some styling to make them fit in with the overall feel of our header. Probably the most
important step of the this process is we will mimic the mixin ability of templating languages like pug to allow
us to write the markup for the anchors once and have them displayed in different locations. This will be important
for us since we are working to create a responsive navigation bar that will work with any form factor from desktop
to mobile.

#11 Main Navigation (Logo)
In this article we will start creating the header of our web pages which will contain
the main navigation component. We will start by including a css reset and some basic
styling by importing a few files into our main sass file. Once that is done we will
create the basic layout of the main navigation starting with a logo area which we
will style in a separate sass file and once again importing into our main sass file.

#10 Displaying the Search Results
In this article we will create a razor page that we can use to add to, delete from, and clear our Lucene.Net search
index. Once we have that in place and we have created our index we will then modify our search page to actually perform
and display the search results. And finally we will modify our read page so that when a user clicks on a search result
they will actually be able to read the article they have selected.

#9 Interacting With the Search Index
In this article we will add the ability to add and delete entries within our search index. We will also add the ability
to clear the entire index and finally of course to be able to perform a search against it.

#8 Full Text Search Using Lucene.Net
In this article and a couple of following articles we will be adding full text search capability to our web application.
The project that we will utilizing to add this capability is Lucene.Net which is a port of the Lucene search engine
library.

#7 Seeding the Domain Database
In this article we will focus on adding some seed data to our domain database. We will make it so that whenever our
application is started our seed method is invoked so that the data is added automatically for us if needed. We will
also create the razor page that we will use to display our article.

#6 The Domain Database Using Entity Framework
In this article we will define a class that will represent the data within a table of a SQL server database. We will also
create the context that will allow us to interact with the database and a repository class that we can inject into other
code that will give us access to the data through the context. Finally we will use entity framework to create our database
and table for us without us having to write any SQL code.