35 blog posts categorised Development

Enhancing content articles in Nuxt3

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

I’ve already covered reading time and generated excerpts for Nuxt3 content but there are still a couple more things you can do to enhance your content articles.

I love typography and that includes the use of em-dashes, smart-quotes and other typographic niceties. I do not however enjoying having to type them in my simple markdown files. Thankfully Nuxt3 Content v2 is built on top of Remark which has many plugins including remark-typography which does exactly what we want.

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.

Developing a great SDK: Guidelines & Principles

  • đź“…
  • đź“ť 2,068
  • đź•™ 10
  • 📦 Development

A good SDK builds on the fundamentals of good software engineering but SDKs have additional requirements to consider.

When developing software as a team a level of familiarity is reached between the team members. Concepts, approaches, technologies, and terminology are shaped by the company and the goals are typically aligned.

Shipping breaking changes

Breaking changes are always work for your users. Work you are forcing them to do when they upgrade to your new version. They took a dependency on your library or software because it saved them time but now it’s costing them time.

Every breaking change is a reason for them to stop and reconsider their options. If your library is paid-for or the preferred way for paying users to access your services then lost users can come with a real financial cost.

From CircleCI to GitHub Actions for Jekyll publishing

I’ve been a big fan of static site generation since I switched from WordPress to Jekyll back in 2018. I’m also a big fan of learning new technologies as they come along, and now GitHub Actions are out in the wild; I thought this would be an opportunity to see how I can port my existing custom CircleCI build to Jekyll.

A quick recap from part 5 — Hosting & Building, my CircleCI configuration was basically two jobs that have subsequently been tweaked since then. They are:

Notes from my Spectrum +3 manual

I’ve recently been working on a full HTML5 conversion of the Sinclair Spectrum +3 manual with full canvas-drawn screenshots and diagrams for smooth scaling/high res displays as well as some close font matching and layout as well as cross-reference links all over the place.

My ZX Spectrum +3 Manual conversion is now available!

My own Delphi story - celebrating 25 years

It’s 1995, and a wiry-looking engineer in need of a haircut is working at a tech services company in the Channel Islands. The island is Jersey (you can see the French coastline on a clear day), and he’s over here for a week or two for training from his nearby Guernsey home.

This company does everything from IBM AS/400 maintenance to custom PC software development — the developer involved was brought in and trained to work on a banking package on those AS/400s but has ended up on the PC development side through a series of improbable events.

SemVer is an intent - not a promise

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

Semantic versioning is a simple agreement on how packages should be versioned.

Semantic versioning (SemVer) gives package developers a framework to version their software and provides consumers of packages an expectation of how changes will be handled over time.

WordPress to Jekyll part 5 - Hosting & building

The next stage is considering where to host the site and whether to use a content delivery network (CDN). My preferred approach on other sites has been to:

Adding the CloudFront CDN was essential if you wanted SSL with your domain name, but GitHub pages added support for SSL certs with custom domains

WordPress to Jekyll part 4 - Categories and tags

Jekyll does support categories and tags directly but doesn’t support the pagination of categories and tag list pages. The Paginate-v2 gem does solve this — and also lets you tweak the URL format.

My site used the URL formats /blog/category/{category-name}/blog/category/{category-name} and /blog/tag/{tag-name}/blog/tag/{tag-name} with 4 articles per page and a little pager at the bottom offering some indication of what page you are on, and some navigation arrows like this:

WordPress to Jekyll part 3 - Site search

Site search is a feature that WordPress got right. Analytics also tells me it is popular. A static site is at a disadvantage, but we have some options to address that.

My first consideration was to use Google Site Search alas it was deprecated last year. There are alternative options, but few are free. I agree that people should be paid for their services, something has to keep the lights on, but a small personal blog with no income stream can’t justify this cost.

WordPress to Jekyll part 2 - Comments & commenting

I do enjoy discussion and debate, whether designing software or writing articles. Many times the comments have explored the subject further or offered corrections or additional insights and tips. They are vital on my blog, and I was disappointed that Jekyll provides nothing out of the box to handle them.

Third-party solutions like Disqus exist that require you either pay a subscription or have ads inlined with the comments. That $9/month adds up. The alternative of injecting ads onto my blog to support comment infrastructure doesn’t sit right with me.

WordPress to Jekyll part 1 - My history and reasoning

It’s hard to believe it was 13 years ago, back in a cold December on the little island of Guernsey, when I decided to start blogging. I’d had a static site with a few odd musings since 2000, but this was to be more regularly updated and with technical content. Blogspot seemed the easiest way to get started.

Within 18 months of regular blogging, I’d moved over to Subtext, which, being a .NET app, required Windows hosting, so I threw it on a small Shuttle PC on my home DSL. I started using it as an experiment for CSS and web techniques but, within a year, I’d had my 1MB DSL brought to its knees twice through articles featured on BoingBoing.

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.

Download files with progress in Electron via window.fetch

Working on Atom lately, I need to be able to download files to disk. We have ways to achieve this, but they do not show the download progress. This leads to confusion and sometimes frustration on larger downloads such as updates or large packages.

There are many npm libraries out there, but they either don’t expose a progress indicator, or they bypass Chrome (thus not using proxy settings, caching and network inspector) by using Node directly.

Time window events with Apache Spark Streaming

If you’re working with Spark Streaming, you might run into an interesting problem if you want to output an event based on multiple messages within a specific time period.

For example, I want to send a security alert if I see 10 DDOS attempts to an IP address in a five-minute window.

Sequence averages in Scala

I’ve been learning Scala and decided to put together a C# to Scala cheat sheet. All is going pretty well but then I got stuck on the equivalent of Average.

Enumerable.Average in .NET calculates a mean average from your sequence by summing up all the values and counting them in a single pass then returning the sum divided by the count in a floating point format (or decimal).

Designing a great API

Several years ago I worked on a payroll package developing a core engine that required an API to let third parties write calculations, validations and security gates that would execute as part of its regular operation.

We were a small team and I had many conversations with another developer tasked with building a payroll using the API I would provide. Some methods here, classes there, the odd helper function and I had an API and then we had a mini payroll running.

Anatomy of a good bug report

  • đź“…
  • đź“ť 1,187
  • đź•™ 6
  • 📦 Development
  • đź’¬ 2

Working on the .NET Framework was an interesting but often difficult time, especially when dealing with vague or incomprehensible bug reports.

Head to Bing, Google, official support sites and bug database if you have access to it (Microsoft Connect, Bugzilla for Firefox etc.) to see if others have run into this issue. Searching for the error message can yield good results but remove elements of the message specific to your project (e.g. class names, property names etc.)

How did I get started in software development?

Ken Egozi tagged me with the latest meme and this time it’s at least relevant :)

Some time between 10 and 12 when my father bought home a ZX Spectrum and I ended up delving into the excellent programming manual when I finally ran out of games to play. At the same time my school opened up the computer room at lunchtimes…

Safari 3.1 includes developer tools

  • đź“…
  • đź“ť 166
  • đź•™ 1
  • 📦 Development

Safari 3.1 has just been released and besides the partial CSS3 (fonts) and partial HTML5 (media tags, off-line storage) support there are some new developer tools included.

Safari has had a hidden Debug menu for some time and WebKit featured developer tools but with 3.1 Apple have unleashed them to the masses.

Testing web sites with the iPhone SDK

Apple’s iPhone SDK is now available in beta format for free download (running your apps on a real iPhone is a one-time $99 charge).

The 2.1GB download contains the full Xcode 3.1 environment for Mac app development but also an extra 22MB of iPhone-specific SDK goodness including an iPhone simulator named Aspen Simulator (perhaps the code-name for iPhone). Whilst most of the iPhone’s apps are absent you can still access settings, photos, Safari and contacts.

Humane theme for TextMate and Xcode

My Humane theme for Visual Studio is getting a fair bit of traffic today courtesy of Scott Hanselman. Given I have been messing with Mac development lately I thought it was worth porting to TextMate and Xcode 3.

My Envy Code R programming font isn’t great on the Mac yet so I have configured these to use the excellent but overlooked Panic Sans in 12 point which unlike Monaco is available in bold, italic and bold italic variants. (I love my comments to be italics)

Preview of Envy Code R programming font

Envy Code R has been updated since this post.

My last post got me thinking — if I’m so happy with Envy Code B bar it’s ability to scale or take advantage of ClearType then there is only one real option. I reached for the pixelated TrueType conversion of Envy Code B and five hours later had a rough version of my first ever vector fontfirst ever vector font — Envy Code R.

Comparing programming fonts

The blogging about favorite programming fonts doesn’t seem to want to truly die down so here’s how I rate the most popular fonts for programming in descending order with my own Envy Code B which I use all the time — but now desperately needs the ClearType treatment.

If you click the image you’ll see red boxes highlighting what I feel are the various problem characters/positioning with each font.