15 blog posts tagged webdev

Generated Excerpts for Nuxt3 Content

  • đź“…
  • đź“ť 377
  • đź•™ 2
  • 📦 Development

Nuxt3 has been my stack of choice for a while now and it was time to port my site over from Nuxt2 — an exercise in itself I should blog about — but more concretely is the idea of excerpts.

Basically when you have a list of articles you want to show a short snippet of the article to entice the reader to click on it. This can either be the description if it’s a simple one-liner used in a card for example, or it can be the start of the article itself. Nuxt’s Content v2 supports generating excerpts for you by taking the content up to the <!--more--><!--more--> marker in the text as the excerpt.

Nuxt Content v1 content.db database & file size

I’ve been using NuxtJS successfully for a number of client sites, and this one, for quite a while. One of my clients, MKG Marketing, has produced a lot more content than the others with over 200 podcast episodes most containing a full transcript. It’s been going very well with them maintaining all the markdown content in CloudCannon and the site itself being built and published with CloudFlare pages.

MKG, like DamienG.com, is a Nuxt 2 site I haven’t upgraded yet — the upgrade Nuxt guide is a bit daunting and there’s some Nuxt Content specific migration guidance to go through as well.

A blog comment receiver for Cloudflare Workers

A number of years back I switched to a static site generator for damieng.com, firstly with Jekyll, and then with Nuxt when I wanted more flexibility. I’ve been happy with the results and the site is now faster, cheaper, more secure and easier for me to maintain.

The tricky part was allowing user comments without a third-party service like Disqus. I came up with a solution that has comments into markdown files just like the rest of the site content so they can be published as part of the build process.

Email form sender with Nuxt3, Cloudflare, Brevo & reCAPTCHA

I’ve been using Nuxt quite extensively on the static sites I work on and host and use Cloudflare Pages to host them. It’s a great combination of power, flexibility, performance and cost (free).

While one of the sites I manage uses ActiveCampaign successfully for both their newsletters and contact forms, this latest customer just wanted plain emails ideally with no subscription involved.

Rendering content with Nuxt3

  • đź“…
  • đź“ť 749
  • đź•™ 4
  • 📦 Development

I’ve been a big fan of Nuxt2 and Nuxt3 is definitely a learning curve and I have to admit the documentation is a bit lacking — lots of small fragments and many different ways to do things.

I basically wanted a simple example or page that looks at the slug, finds the markdown content for it and renders it unless it’s missing in which case returns a 404. Oh, and I want to use Typescript.

Adding reading time to Nuxt3 content

  • đź“…
  • đź“ť 452
  • đź•™ 3
  • 📦 Development

I’ve been using Nuxt2 quite a bit for my sites (including this one) and am now starting to use Nuxt3 for a few new ones and am finding the docs lacking in many places or confusing in others so hope to post a few more tips in the coming weeks.

Today we have the “reading time” popularised by sites like Medium.

Using variable web fonts for perf

  • đź“…
  • đź“ť 1,345
  • đź•™ 6
  • 📦 Typography

Webfonts are now ubiquitous across the web to the point where most of the big players even have their own typefaces and the web looks a lot better for it.

Unfortunately the problem still exists that either the browser has to wait before it draws anything while it is getting the font or it renders without the font then re-renders the page again once the font is available. Neither is a great solution and Google’s PageSpeed will hit you for either so what is an enterprising web developer to do?

Comma-separated parameter values in WebAPI

The model binding mechanism in ASP.NET is pretty slick — it’s highly extensible and built on TypeDescriptorTypeDescriptor for re-use that lets you avoid writing boilerplate code to map between CLR objects and their web representations.

One surprise, however, is that out of the box, neither WebAPI nor MVC support comma-separated parameter values when bound to an array, e.g.

5 signs your ASP.NET application may be vulnerable to HTML injection

If you don’t encode data when using any of the following methods to output to HTML your application could be compromised by unexpected HTML turning up in the page and modifying everything from formatting though to capturing and interfering with form data via remote scripts (XSS). Such vulnerabilities are incredibly dangerous.

Using MonoRail or Microsoft’s MVC does not make you automatically immune — use {! }{! } in MonoRail’s Brail engine and the HtmlHelpers in Microsoft’s MVC to ensure correct encoding.

LINQ in C# Web Applications

  • đź“…
  • đź“ť 210
  • đź•™ 1
  • 📦 .NET

I’m a big fan of the Web Application type that was previously available as an add-on to Visual Studio 2005 but thankfully got promoted to a standard citizen with Service Pack 1.

So with a little more time on my hands lately I’ve been delving into the wonder that is LINQ — part of the forthcoming Orcas release of technologies.

Localizing .NET web applications

It seems that globalization often makes the wish list of many a web site until the client realizes professional quality translations require a significant investment of time and money.

On occasion however smaller web applications with their limited vocabulary are prime targets for localizationlocalization globalization and it can be quite feasible to translate the couple of hundred strings involved.

Extending GridView to access generated columns

  • đź“…
  • đź“ť 507
  • đź•™ 3
  • 📦 .NET

ASP.NET’s GridView is a useful control and one of it’s best features is it’s ability to generate the columns automatically from the data source given.

The problem however is that these generated columns are not exposed as part of the Columns collection or indeed available at all so you can’t hide or manipulate the selected columns.

Extend HttpApplication with session counts and uptime

It’s sometimes useful to know or display how many people are currently using your web application and how long it’s been up for.

As web applications normally inherit from System.Web.HttpApplicationSystem.Web.HttpApplication we can extend this class with a common re-usable class to add the required functionality.