DEV Community: C.S. Rhymes

Coding with Laravel Boost and Kiro AI

C.S. Rhymes — Sat, 24 Oct 2026 00:00:00 +0000

I recently built a Laravel app using Laravel Boost along with Kiro, Amazon’s AI service, and wanted to share what I discovered. This is more of an opinion piece as I try to put into words what I think about the new way of developing. This reflects my current thinking and I’m absolutely sure that each developer will have a different experience than mine.

The set up

I started by creating a new Laravel project with the Laravel installer. I selected the Livewire option as that was what I was already familiar with.

I then installed Laravel Boost as a composer dev dependency and ran the install command, selecting Kiro as my AI tool. This created all of the files needed for the AI to know about Laravel and its recommended way of working.

I then set up Kiro in PHP Storm with the ACP so I could write the prompts directly in the IDE.

The first step - database

I started with the same process I would with other apps I’ve built in the past, with the database models and migrations. I suppose I could have just written a prompt as to what I wanted to build and let it go and fill its boots, but I wanted to control the database structure. From past experience, getting the database structure and the relationships right early makes everything else easier down the line. I guess I just didn’t trust AI to do it how I wanted it.

Laravel makes it pretty easy to get started with the scaffolding by allowing you to create a model, migration and factory with a single artisan command. I ran the commands, defined the tables in the migrations and then created the relationships in the models.

Getting the AI involved

Now I had a foundation for the database schema in place, I asked the AI to create Livewire components and forms for each of the models. I did this for each model one by one so I could see what the output was and judge the changes it made. As part of the prompt I told it to use the database migrations to know what fields to create in each Livewire form, and I also asked it to use Livewire Flux UI (that was installed by default anyway) to build each form interface.

The AI spat out a load of text into the chat window as it processed what I had asked it to do and started reading all the files in the project. I tried to keep up with the text, but it was outputting text too fast for me to read and often disappeared anyway after it had come to some kind of decision. I’m not really sure of the point of all that, I guess it’s instead of just showing a loading spinner? Maybe it looks more impressive to spam a load of text so fast you can’t read it. Anyway, I quickly gave up reading most of the text and waited for the text at the end that summarised what it did. The summary was still quite long, but it was broken into steps so you could skim read the bullet points if you wanted to.

Interestingly, the AI asked for permission to do certain tasks, such as reading files and searching. After the first few times I just pressed ‘Yes’, but I always liked to take time and read what it was asking when it came to running scripts in the terminal. Just out of an abundance of caution.

Long story short, (too late), it produced a clean looking interface using Flux UI and it mostly worked. It was surprising how little information I had to provide to make it build something. It seemed that having something for it to reference is key and having all the rules or guardrails in Laravel Boost helped steer the output to what I was familiar with.

Once the AI had produced a component I could then provide another prompt to ask it to make a specific change to the component without giving it too much detail. It seemed to follow on from the previous prompt, using the existing context from the chat session. It allowed me to try things out and see the changes quickly without being too caught up in how long it would take to code it and take a prototyping kind of approach to get what I wanted.

Tests and formatting

One thing that I really liked about Laravel boost is that it instructs the AI to automatically write tests to confirm what it built works. I always write tests to ensure things work the way they should, but also to help document the functionality so future code changes would flag a change in behaviour. But writing tests can become laborious, so the AI writing them was definitely a bonus for me. It used PEST to write the tests which is also another win as they are written in a very fluent style so it was easy to read through the tests that had been written and quickly understand what they were doing.

One thing I would say, if I were writing the tests myself I would have spent a bit longer writing more reusable tests and passing in datasets to test the different inputs and outputs. The AI could write tests so fast that I guess it’s easier for it to create simpler tests, but more of them. I’m wondering if that could lead to greater technical debt in future?

It also ran Laravel Pint after each change, ensuring the formatting is what you would expect, keeping the code easy to read and consistent. I normally set up a pipeline to do this when I push code up to the remote repo, but having it format as you go is very useful.

Making manual changes

When trying out the user interface, I noticed a couple of things that weren’t quite right, so I jumped into the code myself and then made some changes. I then prompted the AI to add some extra functionality to the same Livewire component. It suddenly seemed confused that the files didn’t match what it was expecting. I can’t remember the exact wording, but it seemed very possessive over the files and like it wanted to discourage anyone else making changes to the stuff it had output.

This was a bit of a shock to be honest. I wanted a tool that would work with me, not do everything for me. Once it had reindexed the updated files it got over itself and made the relevant changes.

Folder structure

What I like about working with Laravel is the folder structure. It has a convention that has changed slightly over the years, but it is pretty consistent. For example, if you run an artisan command to create a notification, it will put it in a Notifications directory in the app directory.

Laravel Boost helps the AI follow that convention, meaning if you are new to the project you can find what you are looking for quickly and start making changes. This is a massive efficiency gain that is often overlooked.

I have to say, after looking at some other projects that are more towards being vibe coded, the consistency and structure is missing. If you open up the codebase you’ll have to spend a lot of time to figure out where everything is before you can start working on it.

I sometimes wonder if this is deliberate, that AI puts things in different places in different projects so that you are more inclined to use AI to make changes in future, guaranteeing its future business model?

Comments, lots and lots of comments

I like to write a few comments here and there in the code, but AI seems to love comments. It’s an LLM after all, so writing chunks of text is what it does best. But AI seems to write way too many comments to me.

After considering this for a moment, I realised that AI has a finite memory. If you close a chat session and start a new one, it needs to relearn your codebase all over again. Laravel Boost helps it understand the structure, but the business logic is a mystery to it. Writing loads of comments is like its way of dumping its decision making into the code, so that next time it does something it can read through all the comments and remember why something was done that specific way.

Developers definitely work like that too with comments by adding notes for themselves and others in future, but once you become familiar with a project you remember why things are done a certain way. You’ve been in the meetings with the customer when the business decisions are made, but AI doesn’t have that ability. Well, maybe that’s the next evolution of what’s to come…

Part of being a good developer is writing code that is readable. To me, this helps reduce the need for so many comments. This is where real world developer experience can count.

So what did I think overall?

It was certainly quick to create new components and tests. It seemed to produce consistent and readable code, but I think that is more due to the Laravel way of doing things and the AI following the standards set out in the Boost package.

But was it fun?

I have to say no. It definitely made things easier, but the difficult bits are what make a job worth doing. There is a lot of job satisfaction to be had in working through a problem and finding the best solution. That part of the job is now reduced with AI.

The following quote seemed to resonate with me when thinking about how AI coding works.

“It’s not the destination, it’s the journey”

The journey is what makes great software and AI seems to jump straight to the destination.

I tend to first build something that works, but then spend more time afterwards enhancing and optimising it. This part of the process, this part of the struggle, actually provides inspiration for how something could be further improved. It gives your mind time to think about the possibilities, making those minute decisions as you go along that end up with a great result.

Maybe the developer being the bottleneck was a good thing after all?

Photo by Matt Moloney on StockSnap

Updating my website's theme

C.S. Rhymes — Tue, 15 Sep 2026 00:00:00 +0000

As a web developer, your own website can act as a portfolio for your work, showcasing all of your other work and projects, but sometimes it is the last thing that gets the attention it deserves. I decided that my website needed a facelift, and I decided to move away from my old theme.

Bulma-Clean-Theme

I first built bulma-clean-theme to power my own website in September 2018. I would say that being able to use the same theme for over eight years is a sign of success. The theme has been downloaded over 130 thousand times from the Ruby Gems directory and I have released many versions with tweaks and changes, along with many contributions from other developers that have helped make it such a success.

But…

The Bulma CSS framework hasn’t had a new version released in over a year now. It works well, but it feels like it is time for me to look at alternatives and something that will offer me more flexibility to do my own thing.

Bulma-clean-theme is still available to use, but I wanted to make my own website how I want it to be.

TailwindCSS

One of the other themes I had been working on occasionally was Purpletual blog theme that used TailwindCSS. This is a simple blog theme (with lots of purple) but uses PostCSS to compile the TailwindCSS code. It was a starting point for me to learn how to use TailwindCSS.

I have since used TailwindCSS in other work projects and it took me a little while to get to grips with it, but once you are familiar with the utility classes it feels like second nature. I decided that this was what I wanted to use on my own website.

Design

I’ll be honest, I’m not really a web designer. I would class myself as a developer first and foremost. But what I like about TailwindCSS is that it’s easy to try things out, easy to prototype something and see it come together bit by bit.

I started looking at the TailwindCSS showcase page and found some aspects of designs that I liked. What’s great with TailwindCSS is that you can inspect the page that others have built and see the styling building blocks by simply reading the utility classes. I found this really inspirational and gave me some ideas for my own website design.

One nice little feature was the background image fixed (the bg-fixed class), which I used on medium and up screen sizes on the hero image. This is a little nod back to late 2000’s when parallax scrolling was all the rage. Back then we used a variety of jQuery libraries to achieve the effect, but now it’s all in one CSS class. Amazing how things have changed.

Final design?

So is this the final design? I would say no, at least for now. Doing this upgrade has allowed me to build a new design, but it also allows me to experiment with the design going forward and enhance it more. The old theme did a great job, but now I can spend some time building something more unique and improving my web design skills over time.

One last thing…

I just wanted to say thank you to bulma-clean-theme and the 8 years it has served me powering my website, but it seems nothing stays the same in web development forever.

First impressions of Flux UI

C.S. Rhymes — Tue, 21 Apr 2026 00:00:00 +0000

Recently I had the opportunity to work on a new side project. I had already decided I wanted to use Laravel and Livewire, but I wasn’t sure about the frontend user interface. I had seen some demos of Flux UI and liked what I had seen, so decided to give it a try.

Installation

First things first, the installation was very easy in a new Laravel app as Flux UI was installed by default when I selected Livewire as the starter kit using the Laravel installer. This meant I could get started developing straight away.

Theming

Initially I wasn’t concerned about the styling and kept things standard, but later on I decided to change things up and add some colour. Luckily the Flux UI website has a tool for building a theme and you just need to copy and paste the output into the app.css file, then the changes were shown straight away.

Local development

This is more of a Laravel feature than Flux, but it was the first time I have used the composer run dev command to run the development environment. This made it really easy to get started developing with a SQLite database and the local installation of PHP. No need for docker or Laravel Sail. This was really handy for me as I was developing on a MacBook Air, rather than my more powerful work machine, and meant I didn’t need to do much set up to get working.

Auth views and dashboard

So everything was installed and up and running, so I started to build my new Laravel app. The first thing I really appreciated was that the scaffolding and views were all in place for registering and logging in. Great.

Next thing, once I had registered a user I was shown a dashboard starter screen. This had some great features built in, allowing users to manage their profile and a nice sidebar layout where I could add links too. Another worry off my mind!

Header and Sidebar

Here things slowed down a little at first as I got used to the way Flux UI works. The header and sidebar is built up of a lot of smaller components. This makes them really reusable, but there is quite a lot to take in. I think the Header and Sidebar pages could do with a little more detail in the documentation, helping to explain how on desktop it shows links in the header, then on mobile and tablet it uses the sidebar. Once you get your head around this it’s very easy to use. Other frameworks I’ve used tend to have one menu which has two different sets of styles for mobile devices and desktop screens.

Forms and inputs

Building a form was very easy using the Livewire methods I was used to and hooking them up to the relevant flux inputs was very simple too, using the flux:input shorthand syntax and passing in the wire:model and the label. What’s really nice is the inputs also handle displaying the validation error messages for you without any extra work.

The app I was building had a couple of file uploads. I saw that there was a File Upload component, but it wasn’t included in the standard Flux UI package. What was great though, was that the standard flux:input allowed you to set the type to file and use this for file uploads. Although it doesn’t have all the features of the pro version of Flux UI, it did allow me to keep building what I needed for now and fits in nicely with the rest of the interface.

Tables

I also tried out the table component for an index page with a data table. This has a lot of really nice features built in, such as sorting/ordering columns, pagination and sticky headers. The way the component names are namespaced is very logical to me too, so you start off with a flux:table, then flux:table.columns, which have multiple flux:table.column inside.

What I really liked about Flux UI was the fact that it seems to have most standard use cases catered for. You can start with an empty app and quickly and easily build up a user interface that looks neat and tidy and functions well.

Accessibility

One thing that I am unsure about is the accessibility. Everything seems very small to me, but maybe that’s from my day job working in local government where we try and meet WCAG AAA where possible, making interactive controls at least 44px wide and 44px high. Reflecting on this though, Flux UI has similar look and feel to GitHub for navigation and sidebars, which I use daily without issue. A standard flux:input is around 40px high so it’s not far off the AAA standard, but sidebar links are closer to 30px high so a bit further away from that standard.

I’m pretty sure I could spend some time looking at how to overwrite the default styles in the theme to achieve this if I needed too. Flux UI uses TailwindCSS and again, works really well with it, allowing you to customise the theme and ensure sufficient colour contrast, etc.

Would I use Flux UI again?

Yes, definitely. You can tell it’s built by the same people that built Livewire. It works so well together and makes building a Laravel app very easy. I like to work on the functionality and features of an app and know that the UI will just work without much hassle. Like I said earlier, there is a bit of learning to do, but once you get your head around it is very logical to use. There also seems to be regular updates and new components and features added regularly which is a great sign for the future.

Photo by Burst on StockSnap

Hosting a Next.js site with AWS Elastic Beanstalk

C.S. Rhymes — Thu, 05 Feb 2026 00:00:00 +0000

I thought I’d share some learnings about how to host a Next.js site with AWS Elastic Beanstalk. This is a minimum configuration to get a basic site up and running.

Getting started

In this example, we are going to create a new Next.js project, but the process should apply to existing projects too.

The following command creates a folder called ‘my-app’ and creates a new Next.js app

npx create-next-app@latest my-app --yes
cd my-app

We need to create a few files so that the Next.js app is built on the server before it is deployed, then we need to tell AWS Elastic Beanstalk how to start the Next.js project. There is also a little configuration that will help our site deploy.

Hooks

When you set the platform to node.js, Elastic Beanstalk should automatically run npm install to install your dependencies, but it doesn’t automatically run the next build that is needed for a production site.

There are a couple of ways that you can get around this. One way is to build your app locally and zip it up, then deploy that build, or you can add some hook scripts to run the build on the server. We are going to run the build on the server, as this allows us to set environment variables in Elastic Beanstalk and use them when the site is built.

Beanstalk offers both deployment hooks and configuration hooks.

Deployment hooks are run when you push up code changes and configuration hooks run when you update configuration or environment variables through the web console or CLI.

When you update an environment variable, you need to re-run next build to build the code with the latest environment variables.

Make a .platform directory in your project root, then hooks and confighooks directories, then create a predeploy directory within each.

.platform/
- hooks/
- predeploy/
- confighooks/
- predeploy/

We can create a 01_build.sh script file in both the .platform/hooks/predeploy and .platform/confighooks/predeploy directories to run the build when either the code is pushed or the config is changed.

#!/bin/bash

set -e

cd /var/app/staging
npm install
npm run build

We need to use the predeploy hook as this runs after the code has been checked out, but before the code is deployed.

Beanstalk creates a /var/app/staging directory to do the build work,
It then deletes the /var/app/current directory,
It then renames the /var/app/staging directory to /var/app/current for your live app
Then it starts up the service

More information about platform hooks.

Procfile

Beanstalk has a default run command of npm start but we want to specify the port number so nginx is listening on the correct port. We can customise the start command using a Procfile in the project root.

web: node_modules/.bin/next start -p $PORT

More information on the Procfile.

Setting the server type

By default, Beanstalk uses t3.micro EC2 servers. From my initial testing, the build time took too long and actually timed out the deployment.

We can define the servers we want to use in our build with a config file. Create an .ebextensions directory in your project root, then create a file called next.config. The name doesn’t really matter but it’s handy to know these are settings that are useful for Next.js setup.

Paste the below into the next.config file and save it. This will:

Use the t4g.medium server as a minimum which has 4GB of RAM and 2 vCPUs. Feel free to try lower spec servers and see if it works for you.
Set nginx to listen on port 3000
Set the environment to launch a single instance. This will save on costs for this example, but for a production site you probably want a load balanced environment and multiple servers running.

option_settings:

  # Min 4GB RAM per instance for Next
  # The next build times out with micro servers
  aws:ec2:instances:
    InstanceTypes: t4g.medium, t4g.large

  # Configure the port the proxy server (nginx) listens on
  # https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/nodejs-platform-proxy.html
  aws:elasticbeanstalk:application:environment:
    PORT: 3000

  # Launch a single EC2 instance without a load balancer
  aws:elasticbeanstalk:environment:
    EnvironmentType: SingleInstance

Creating a beanstalk application

Now we have our files in place we can create an application using the Elastic Beanstalk CLI. You need the AWS CLI and the Elastic Beanstalk CLI, as well as configuring single sign on for the AWS CLI.

In the below examples we are using my-aws-profile as the AWS Single Sign On profile for our AWS account.

The application is the container that can have many environments, such as production, staging, etc.

Let’s create a Beanstalk app called example-next

eb init example-next --profile my-aws-profile

This should automatically recognise that you are using node.js from your project files. Select the version of node you would like to use and follow the instructions to either create a new key pair or use an existing key pair for SSH access.

The process takes a few minutes to run to generate the application.

Creating a beanstalk environment

Once we have an application, we can then create an environment and deploy our app. The Elastic Beanstalk CLI will zip up your project and upload it to an AWS S3 bucket. As Elastic Beanstalk automatically runs npm install we can remove the node_modules directory from our project before running the create or deploy commands to make the upload smaller.

eb create staging --profile my-aws-profile

This will zip up your code and upload it to the S3 bucket that was created when we initialised the environment. It will then create the resources it needs, along with an EC2 server.

When the EC2 server is ready, it will then copy the code into the staging directory, run npm install, then the predeploy hook and then move it to the current folder and run the command in our Procfile. It may take a bit longer the first time this is run as it has to create the environment and the EC2 server first. It should be quicker when deploying updates.

Opening the environment

To see our running Next.js app, run the below and it should launch a new browser window for you.

eb open staging --profile my-aws-profile

Deploying updates

Let’s say we change our app code and want to deploy the latest version to our existing staging environment. This can be done with the following command. You use eb deploy rather than eb create as the environment already exists. The staging in the below command is the name of the environment you want to update.

eb deploy staging --profile my-aws-profile

This command will take a few minutes to run as it will build your Next.js app on the EC2 server before deploying the build and starting the server.

Adding environment variables

You can add environment variables using the web console or the CLI. When you update the environment variables it should run the confighooks we set earlier. This means it will rebuild your app using the latest environment variables, deploy it and then start it up.

Photo by Christina Morillo on StockSnap

HTML is beautiful

C.S. Rhymes — Tue, 07 Oct 2025 00:00:00 +0000

Building a modern website can sometimes lead you to be so far separated from the end result that is sent to the user. Developers can end up focusing on building sites with component based frontend frameworks, fetching data from APIs and installing hundreds of npm dependencies. We can become more interested in writing great code in their chosen programming language than what we serve to the website visitors. How did we get so far away from writing HTML?

HTML is simple

It’s true. HTML is pretty simple. It’s a markup language with some simple tags to tell the browser how to render the content.

If you need a top level heading, put it in a <h1> tag.
If you need a paragraph of text, put it in a <p> tag.
If you want an unordered list, put it in an <ul> tag with <li> for each list item.

This has led some to question whether HTML is a programming language.

Maybe that’s why developers feel the need to abstract their time away from HTML? Make it a bit more complicated to feel like they are doing something more technical? I don’t know?

Anyway, check out the HTML elements reference for a full breakdown.

HTML is future proof

The first ever webpage written with HTML can still be viewed to this day. This displays that it is backwards compatible with modern browsers, but if you think about it the other way, it also means that it is future proof.

HTML is graceful

There are different specifications for HTML, with HTML5 being the most recent, but HTML5 tags will degrade gracefully in older browsers. Unlike JavaScript which stops rendering when an error occurs, HTML will gracefully continue rendering the rest of the page.

For example, if the old browser finds an article or section tag then it will be rendered as a span.

On a side node, HTML5 still feels like a new thing to me, but after looking it up I discovered it was first released in January 2008!

HTML5 was first released in a public-facing form on 22 January 2008, with a major update and “W3C Recommendation” status in October 2014.

https://en.wikipedia.org/wiki/HTML5

HTML is responsive

If you have been working in web development for a few years (ok, quite a few years) you may remember creating fixed width layouts with tables, then maybe using divs, then having to build mobile specific versions of websites, then responsive websites where the same website adapts to the device and screen size that is being used to view the website.

Haven’t we come a long way!

Well, no not really, because if you think about it, HTML with no CSS was already responsive. Content in a paragraph tag automatically wraps to the screen size. Developers forcing content into a fixed width layout broke HTMLs default flowing nature.

HTML is beautiful

If we want the user to click on something on the page to submit a form, then we could create a div and give it some styles to make it square with a fancy border and some shadow, then add a JavaScript listener so we can perform an action to submit the form when the user clicks it.

Or, we could use an input with type ‘submit’ that does all that for us.

<form>
  // More form content
  <input type="submit" value="Submit" />
</form>

In this day and age of React components and endless frontend build complexities and npm dependencies, it’s sometimes easy to forget what HTML can already do for you out the box.

Keep things simple where you can and make the most of built in and widely supported features where possible.

Fixing a few SEO issues with my author website

C.S. Rhymes — Sat, 23 Aug 2025 00:00:00 +0000

When I launched my cozy mystery series, The Little-Astwick Mysteries, I decided to create a new website to promote it. But I made a few mistakes with SEO that have led to a few issues with Search Engine Optimisation (SEO). Here is how I fixed them.

www or non-www subdomain

The site is built using Jekyll, which has a _config.yml file where you can specify your site_url that is used to build all the links and the sitemap. I set the site_url to www.littleastwick.co.uk, but the configuration in Netlify was set to use littleastwick.co.uk (without the www) as the primary domain.

What was the impact?

A simple mistake, but it meant lots of redirects from the www addresses to non-www addresses and a conflict between the generated sitemap file and the pages being served to visitors.

Search engines see each sub domain as a separate site. So www.littleastwick.co.uk is a different site to littleastwick.co.uk.

In essence, I was telling search engines a list of urls on one subdomain, but when Google tried to crawl them it would be redirected to another domain (the non www domain).

How was this fixed?

I host my site with Netlify. This was fixed by updating the ‘Domains configuration’ in Netlify to set the www address as the primary domain. Netlify now directed visitors to the pages with the www prefix and the sitemaps matched the subdomain correctly.

Of course, this is just for Netlify. The way to resolve this will vary depending on your hosting provider. Some have easy to use settings, whereas others may require you to edit configuration files. You may also need to update DNS (Domain Name System) settings to fix this issue, so check with your provider or speak to a developer, before you change anything.

Pitfalls avoided

The other saving grace with this was that Netlify is clever enough to only serve the site on one of the domains. If it was served on both then Google may have seen both sites and listed them separately in the search results or thought the site was duplicating content on purpose.

Permalinks

Jekyll has the option for you to set the permalinks of your pages. This is the format of the url for the generated page. For blog posts it could have the year, month and day of the post in the url. For normal pages it defines if the page should end in a forward slash / or index.html or custom-page-name.html.

I didn’t set a value for the permalinks thinking it all worked and was ok with whatever defaults Jekyll decided to use.

What I didn’t realise was that Netlify allowed you to visit the url ending in .html, but also visiting the page without the .html, or the url that ended in a forward slash. Some pages in the site directed visitors to the page without the .html, but the sitemap pointed search engines to pages with the .html.

What was the impact?

The result of this was lots of pages with duplicate content. Many pages had canonical urls redirecting search engines to the page with .html. A canonical url is a way of telling search engines what the true source should be and what you prefer to be shown in search results.

How was this fixed?

My resolution to this was to add permalinks: pretty to the _config.yml file. This meant the links in the built site and the sitemap now all end in a forward slash instead of .html.

I am fully expecting there to be some fall out of this in the short term as search engines will have to reindex the site again with the updated urls, but hopefully it should resolve these issues in the long term.

Potential pitfalls avoided

The bonus is that if someone visits an old link with the .html suffix, then it redirects the page to the new permalink ending with the forward slash suffix. Search engines should see these redirects and hopefully update their indexes over time to use the updated url.

404 page

Whilst I was testing all this out, I also realised that I didn’t have a 404 page for my site.

What was the impact?

If someone had visited a broken link, there wasn’t any links for them to easily get to where they needed to be or to easily get to the homepage, just a standard Netlify error page.

How was this fixed?

This was resolved by creating a new custom 404.html page that used the default page layout. This meant it had the header and footer links to be able to navigate to other pages on the site and it had a message stating that it was a 404 error.

There are different settings needed depending on your hosting, so check out the custom 404 documentation.

Conclusion

Hopefully these changes should lead to both a better user experience and a better configured site for search engines to be able to determine what the actual url should be.

I’m going to keep my eyes on the Google Search Console over the next few weeks and see what other items are raised. If you haven’t yet set up Google Search Console, then I recommend you do. It has performance reports to show you how visitors are finding your site, but it also has really useful reports for potential SEO issues with pages it finds.

Ensure you add your sitemap.xml file (create one if you don’t have a sitemap yet) to Google Search Console so it can easily find all your site’s pages and be informed when you create a new page too.

I may need to add some manual redirects from old urls to new urls, but luckily there is a Jekyll redirect from plugin that I can use for that.

What I have learned is to spend more time on the configuration details. This site is quite small and does not many pages, but making these changes on a larger site could result in a much bigger impact to its search rankings and take longer to resolve.

Creating a custom toggle in TailwindCSS

C.S. Rhymes — Tue, 29 Jul 2025 00:00:00 +0000

I’ve only just started using TailwindCSS, (I know late to the party huh), and I wanted to create a custom toggle switch that looked a bit nicer than a standard checkbox. This blog post goes through some of the thought processes and the tools that Tailwindcss v4 has out of the box that you can make use of.

Starting with the Checkbox

As I said, I wanted a checkbox to look nice, but what was really important to me was that it could still be used as a checkbox so it would be usable with a keyboard and work with Livewire, so when the state was updated the page would also update.

<label>
  <input type="checkbox" />
</label>

I also wanted on and off labels to indicate what was changing when the checkbox was checked or unchecked.

<label>
  <input type="checkbox" />
  <span>Off label</span>
  <span>On label</span>
</label>

Basic styles

I have added some basic styles to make the labels appear side by side using flexbox, round the labels edges, and added the background colour of violet-700. The off label has a white background and the on label has a violet background to match the label background colour.

Next we want to hide the checkbox from view, but still keep it in the page and make it visible to screen readers. We can use the sr-only utility for this.

<div class="inline-flex">
  <label
    class="cursor-pointer flex flex-row rounded-full bg-violet-700 px-2 py-2"
  >
    <input type="checkbox" class="sr-only" />
    <span
      class="mr-2 inline-flex cursor-pointer rounded-full bg-white px-4 py-2 text-black"
      >Off label</span
    >
    <span
      class="inline-flex cursor-pointer rounded-full bg-violet-700 px-4 py-2 text-white"
      >On label</span
    >
  </label>
</div>

Using peer

I need the style of the labels to change based on the state of the checkbox. So if the checkbox was checked then the ‘On label’ should be prominent, but if it was unchecked then I wanted the ‘Off label’ to be prominent.

Tailwind has a peer utility that allows you to style based on a sibling’s state. This was perfect for my needs.

We can add peer to the checkbox class:

<input type="checkbox" class="peer sr-only" />

Then we can add the styles for the checked state for the off label usingpeer-checked: to swap the text colour and background colours so it has a violet background and white text when the checkbox is checked.

<span
  class="mr-2 inline-flex cursor-pointer rounded-full bg-white px-4 py-2 text-black peer-checked:bg-violet-700 peer-checked:text-white"
>
  Off label
</span>

Then we do the opposite for the on label by making the background white and the text black when the checkbox is checked.

<span
  class="inline-flex cursor-pointer rounded-full bg-violet-700 px-4 py-2 text-white peer-checked:bg-white peer-checked:text-black"
>
  On label
</span>

Now when we click to check and uncheck the checkbox, the highlighted label will also update to reflect whether the checkbox is checked or not.

We can also use the keyboard to focus on the checkbox using tab, then use space bar to check and uncheck the checkbox input, changing the label appearance.

Adding an outline with focus-within

It’s always useful to indicate the focus state of an input, especially for keyboard users. But in our case we have hidden the checkbox, except for screen readers so how can we show the element is focused?

Again, Tailwindcss has you covered with the focus-within utility that lets you apply styles to a parent element when the focus state is within the parent.

We can add an amber outline by using focus-within: on the outer label.

<label
  class="cursor-pointer flex flex-row rounded-full bg-violet-700 px-2 py-2 focus-within:outline-4 focus-within:outline-amber-400"
>
  <!-- Input content here -->
</label>

Now when we focus the state by clicking with the mouse or selecting the checkbox with the keyboard then the outline appears.

Adding a transition

To make the transition between the on and off states a bit smoother and animated we can use Tailwind’s transition utility and add it to both spans.

Here we add transition-all duration-700 ease-in-out to tell tailwind to transition all items with a duration of 700ms and using ease-in-out transition timing feature.

<span
  class="mr-2 inline-flex cursor-pointer rounded-full bg-white px-4 py-2 text-black transition-all duration-700 ease-in-out peer-checked:bg-violet-700 peer-checked:text-white"
>
  Off label
</span>

Final example

Further improvements

This focuses purely on the styling, but I think further work would be needed to make this fully accessible by adding additional aria attributes to indicate to users the current state of the checkbox.

Photo by Candace McDaniel on StockSnap

Testing window.open() in JavaScript with Jest

C.S. Rhymes — Sun, 01 Dec 2024 00:00:00 +0000

I recently had to write a test for a React component that opened a new browser window. To open the new window I made use of window.open() in my code. This made the component easy to write, but I had to think a bit differently about how to write the test for this.

More information on the window.open() method is available on mdn web docs.

To set a bit or background, I had a React component that had a simple form with a couple of inputs. When the user completed the inputs and submitted the form it opened a new window to a specified URL with the inputs as URL parameters.

The component to test

Here is a very simplified version of the component as a demonstration. I’d recommend using something like react-hook-form to add validation to your form.

// MyForm.js
import React, { useState } from "react";

const MyForm = ({ baseURL }) => {
  const [name, setName] = useState("");
  const [subject, setSubject] = useState("");

  const onSubmit = () => {
    window.open(
      `${baseURL}?name=${encodeURIComponent(name)}&subject=${encodeURIComponent(
        subject
      )}`,
      "_blank"
    );
  };

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="name">Name</label>
      <input name="name" id="name" onChange={(e) => setName(e.target.value)} />
      <label htmlFor="subject">Subject</label>
      <input
        name="subject"
        id="subject"
        onChange={(e) => setSubject(e.target.value)}
      />
      <input type="submit" value="Submit (opens in new window)" />
    </form>
  );
};

export default MyForm;

Now we have our component, lets think about the test for it.

What I’d normally test

Normally I would test what has been rendered in my component, using assertions such as expect the component to have text content or assert the url is what is expected (using window.location.href), but I quickly realised that approach won’t work in jest for this example.

Window.open opens a new browser window, so it doesn’t affect the component we are testing. We can’t see what is inside the new window or what its url is as it is outside of the scope of the component we are testing.

So how do we test something that is outside of what we can see? We don’t actually need to test that a new window is opened as that would be testing the window interface’s functionality and not our code. Instead, we just need to test that the window.open method is called.

Mocking window.open()

Therefore we need to mock window.open() and test that it was called inside our code.

// Mock window.open
global.open = jest.fn();

Now we can set the values in the inputs, submit our form and then test that the window.open was called. We can use fireEvent to set the values of the inputs and pressing the submit button.

fireEvent.input(screen.getByLabelText("Name"), {
  target: {
    value: "Test Name",
  },
});
fireEvent.input(screen.getByLabelText("Subject"), {
  target: {
    value: "An example subject",
  },
});
fireEvent.submit(
  screen.getByRole("button", { name: "Submit (opens in new window)" })
);

It’s worth having a read through the documentation for the considerations for fireEvent. You may want to use user-event instead depending on your use case.

We want to await for the method to run. We can do that using waitFor().

await waitFor(() => {
  expect(global.open).toHaveBeenCalled();
});

To ensure we are not opening loads of new windows, we can check that we only call window.open once.

await waitFor(() => {
  expect(global.open).toHaveBeenCalledTimes(1);
});

We can also check what arguments the method is called with, passing in the URL we expect as the first argument and the target as the second.

await waitFor(() => {
  expect(global.open).toHaveBeenCalledWith(
    "http://example.com?name=Test%20Name&subject=An%20example%20subject",
    "_blank"
  );
});

The complete test file

Here is the complete test file for your reference.

// MyForm.test.js
import React from "react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import MyForm from "./MyForm";

describe("MyForm test", () => {
  beforeEach(() => {
    // Mock window.open
    global.open = jest.fn();
  });

  it("opens a new window with the correct url", async () => {
    render(<MyForm baseURL="http://example.com" />);

    fireEvent.input(screen.getByLabelText("Name"), {
      target: {
        value: "Test Name",
      },
    });
    fireEvent.input(screen.getByLabelText("Subject"), {
      target: {
        value: "An example subject",
      },
    });
    fireEvent.submit(
      screen.getByRole("button", { name: "Submit (opens in new window)" })
    );

    await waitFor(() => {
      expect(global.open).toHaveBeenCalled();
      expect(global.open).toHaveBeenCalledTimes(1);
      expect(global.open).toHaveBeenCalledWith(
        "http://example.com?name=Test%20Name&subject=An%20example%20subject",
        "_blank"
      );
    });
  });
});

Photo by energepic.com on StockSnap

Adding social icons to the Bulma Clean Theme footer

C.S. Rhymes — Tue, 03 Sep 2024 00:00:00 +0000

Version 1.1.0 of Bulma clean theme has been released. It has a small update that allows you to easily add social media links to the footer of your site.

Font Awesome update

It sounds like a small feature update, but I wanted to create a blog post about it as it required updating to Font Awesome v6 to get the latest social media icons.

When upgrading to v1.1.0 of the theme, please ensure you take a read through the changes in Font Awesome and see if your site is affected by any of the changes.

Font Awesome 6 - What’s changed?

Adding social links to the footer

To add social media links to the footer you need to add a social key to your _config.yml and add the relevant social network names with links to your profiles.

For example:

social:
  facebook: https://www.facebook.com/
  instagram: https://www.instagram.com/
  threads: https://www.threads.net/
  tiktok: https://www.tiktok.com/
  x: https://www.x.com/
  youtube: https://www.youtube.com/

For more information take a look at the theme documentation.

Building a landing page for your book

C.S. Rhymes — Sat, 15 Jun 2024 00:00:00 +0000

This post follows on from my last post about using your website to promote your ebooks. The first step of the article explains that you need to make a website, but didn’t go into too much detail. This post aims at explaining how you can build a landing page for your book with Bulma Clean Theme.

I’ve recently added a new promo page layout which can be used to build a landing page for your book. You can see a demo page here.

To make it easier to get started I have created a repository that you can fork to get started. Don’t worry if you don’t understand the jargon right now, we will walk through the set up step by step.

Creating a GitHub account.

If you don’t have a GitHub account then you can sign up for one for free. From the github.com homepage, press the Sign up button on the top right and follow the instructions.

Forking the repository

Rather than starting from scratch, I have create a starter repository that you can use to build from.

Go to the example-promo-page starter repository and click on the Fork button towards the top right of the page.

Give your fork a name and press Create fork.

Making changes

With GitHub you normally clone the code, edit your content on your computer and then use git to commit your changes and push them back up to GitHub. Don’t worry. To simplify the process, we are going to use the ‘Edit in github.dev’ editor.

To start the GitHub.dev editor, press . whilst viewing your fork in GitHub. More information is available on the GitHub docs.

You should see an editor appear with the list of files on the left of the screen.

Edit the configuration

The site wide settings are stored in the _config.yml file. Edit the following.

title - set this to your author pen name
description - set this as a description of your website.
base_url - set this to ""

Add images

Go to the img folder and add an image for your avatar. A square cropped image about 400px wide by 400px high should work well here. In this tutorial we will call the image author.jpg. Drag and drop the author image into the img folder.

Now add an image for your book cover. An image cropped to a 800px wide by 1277px high. This is a 2 by 3 image ratio that seems to work well for book covers. Once you have your cropped image you can drag and drop this into the img folder too. Let’s call this image book-cover.jpg for this tutorial.

Update the index.md page

The index.md page is your homepage. There is a section called front matter that is between the two sets of ---. These are the settings and configuration for the page. Below the second —-- is the page content that is used for the about section.

Update the title and subtitle for your book. Use the title for your book name and then the subtitle as your author pen name.
Update the hero_image to the path to your book cover image file that you added to the img folder. As we named it book-cover.jpg, we need to set this to /img/book-cover.jpg.
Update the hero_image_alt text to the name of your book.
Update the hero_link to the link to where you sell your book, such as the amazon store page.
Update the snippet text. This should be a short description of your book.
Update the about_image to our author image, so we need to set it to /img/author.jpg.
Edit the content of the page (below the second ---) and write about yourself and your books. This content is written in markdown format.

For full instructions on this page take a look through the documentation for creating a promo page.

Reviews

To add a few reviews, edit the _data/reviews/book1.yml file. More information is available on the reviews documentation page.

To add a newsletter form, edit the _includes/newsletter.html file. This file has a placeholder form that doesn’t do anything. Copy the code from your form provider for your mailing list, such as Mailchimp, and paste it over the form in the newsletter.html file.

Saving changes

Ensure that you have saved all your changes on each individual file by using cmd + s for Mac or ctrl + s for Windows.

Next, go to the source control tab on the left menu. You should see a list of the files that have been changed. Add a message into the top input box, something like ‘Initial setup’ and then press the Commit & Push button. This will commit your changes to your GitHub repository.

Deploying your site

We are now ready to deploy your site. It’s up to you where you host your site but I would recommend a service that integrates with GitHub which will automatically deploy your changes each time you Commit & Push to GitHub. One such service is netlify, but there are a range of options available. Take a look at the Jekyll deployment documentation for more information.

Domain Name

Hopefully you now have a working promo page for your new book. The next thing to do is get your DNS set up. How you do this depends on your choice of hosting, so take a look at the service you have chosen for getting the domain name set up.

Alternatively, work with a web developer to help get this configured for you.

What’s next?

As stated at the beginning of this article, the promo page is powered by Bulma Clean Theme and has all the built in functionality.

It has a blog page and a demo post that you can use to start blogging. Take a read through the Jekyll Posts documentation to get started with blogging.

You can also customise the colour scheme to suit your branding requirements.

Take a read through the Bulma Clean Theme documentation to see all the options available.

How to promote your ebooks with your website?

C.S. Rhymes — Thu, 06 Jun 2024 00:00:00 +0000

I’m a web developer by trade and a part-time author, so here are a few things that I have done to help promote my books and ebooks using my website and my tech know how from my day job.

Build a website

If you don’t have a website, then start by building one. Easy huh?

At the very least, start with a single landing page so you have a presence on the internet when people search for your name or book title. From here you can direct people to where your book is sold and your social media sites so people can be kept up to date.

I built a website, this website in fact, partly to promote my books, partly to promote my work.

This site is built using Bulma-Clean-Theme, a Jekyll theme that includes product listing pages that you can use to promote your books. If you are interested in development then this may be a way for you to go, but if you aren’t then take a look at site builders or something in between such as WordPress.

The biggest benefit to me of using Jekyll is that I can host it for free with GitHub pages or Netlify, whereas site builders normally come at a monthly cost. There is also no hassle with maintaining a web server as it is a static site. This means the HTML pages are generated into static HTML files and deployed somewhere, in my case GitHub Pages. The way I see it, if you are able to save some money on your website, then you have more to spend elsewhere.

Do what works for you. Pick a solution that is easiest for you to maintain and update, that way, you won’t be put off from making regular updates to your site and it will become part of your routine. Updating little and often, rather than overhauling everything every couple of years, is generally better as return visitors will be encouraged to come back more often and see what is new.

Register a domain name

Once you have your site up and running you need to register a domain name for your website and point it at your new website. Ensure that you own the domain name and not a third party, such as a developer or an agency.

You also want to ensure that you can update your domain name settings so you can point it somewhere else in future, such as to a different website host, if you want to move your website. You don’t want to be stuck and have to buy a new domain in future and have to start all over again.

Your domain should be concise and easy to type in the address bar. This makes it easier for return visitors to check back at a later date without having to rely on a search engine.

Create a blog

I’ve found that a good way of getting visitors to your new site is to create a blog. Like this one! Most of the traffic to my website comes from the blog posts. Once people land on your site they can look around and see what else is on your site.

You can always link to your books from your blog post (see what I did there) which will help visitors to your blog post find your books.

I have heard people say they want a blog, but then I ask them what are they going to write about. They create a single post and then never use it again. I’d suggest writing a list of possible blog post topics and pick the one that you are most excited to write about. If you are excited to write about it then others will be excited to read about it.

Every time you have a new idea for a blog post, ensure you write it down somewhere, otherwise when it actually comes to writing the post, you will be sat in front of an empty screen whilst you try to remember what your great idea was. I use the notes app on my phone to keep my list.

Add interesting titles and meta description tags to your pages

Spend some time thinking about the title and meta description for your page. These appear in the <title> tag and <meta name=“description”> tag in the <head> part of the HTML. This is normally used by search engines results so this is what people that find your site see, so it needs to encourage people to click on that result instead of one of the other links.

Take a look at some best practices for descriptions on the Google Search documentation.

The tile is also used when sharing your link on social media sites. You can go one step further for social media and add additional tags specific to Facebook and X (formerly Twitter), known as OpenGraph.

I use the Jekyll SEO tag plugin to automatically generate the meta tags for my site, but there are also plugins for WordPress to help you generate these tags.

Tell Google and other search engines

You may be lucky and a search engine may stumble upon your website, but why not give it a head start and tell search engines it exists. This can be done through Google Search Console. You provide the url of your site and then verify that you own it, either through adding a meta tag to the code, uploading a file, through Google Tag manager or Google Analytics, or by adding a DNS record. Sounds complicated, but it’s definitely worth doing.

Once you have verified you own the site, you can then submit your sitemap. The sitemap tells Google about all of your site’s pages so it knows they exist and can then crawl the pages and then display them in search results.

So what is a sitemap? It’s an XML file in a particular format that provides a list of your websites pages. Jekyll and WordPress have plugins to create a sitemap for you so you don’t have to manually write out a load of XML and keep it updated.

Each time you add a new page, such as when a new book page or a new blog post is added, it is added to your sitemap and Google should then index the page next time it reads your sitemap.

Add your website address to your social media profiles

People looking at your posts and profile will want to know more about you, so provide them with a link in your profile back to your website. This is especially useful if the social media site shows your public profile to search engines. Each link back to your site helps boost its rankings in search engines.

Share your blog posts on social media

When you have spent so much time writing a blog post, ensure you share it with others. One thing that caught me out, but is probably obvious to most users these days, is that some social sites don’t allow links. Instagram is one example of this. So maybe concentrate on X (formerly Twitter), Facebook, LinkedIn and Threads for sharing links.

Sharing to other sites

I first got real traction for my blog posts after sharing to another site, who then promoted my blog post for me. In my case, the posts I tend to write are about my day job as a web developer using Laravel and JavaScript. I discovered Laravel News, which allows you to submit your links to their site.

Approved links then get published to a Community Links section on their site, but even more importantly, they also share the links on their social media profiles too, as well as sharing the links in a weekly email to their large subscriber base.

Remember to pick sites that are relevant to your subject matter to share to, so don’t submit non Laravel related blog posts to Laravel News.

I am still looking for a site that allows authors to share their blog posts with other authors and readers. If you are aware of one then please let me know!

Share your blog’s RSS feed

Most blogs allow you to generate an XML feed that can be read by other sites to provide links back to your site. Again, for Jekyll, there is a plugin that lets you create a feed for your posts and WordPress has it as a default feature.

As a developer, I found dev.to, which allows you to import posts from your website’s feed. The added bonus of this is that it sets a tag telling search engines that the post was originally created on your website. This is called a canonical link and helps tell search engines where the content originally came from.

Medium.com also allows you to import posts from my website’s RSS feed, again with a canonical link pointing back to your website.

Tell people about your site and your books

Last but not least, tell people in real life. I have to admit I am terrible at this. I have found that your website and blog will quietly sit there unused unless you go out of your way to tell people about it.

You should be proud of what you do and want others to read about it.

Add your website address to your business cards, email signature, wherever you can think of.

Hope that helps

Hopefully there are lots of ideas there to get you started and give your website and blog a boost to help give your books some more visibility.

If you have found this article useful then check out “How NOT to make a Website” by C.S. Rhymes for more information on what not to do when building a website.

Using the GOV.UK Design System with Laravel

C.S. Rhymes — Wed, 29 May 2024 00:00:00 +0000

I recently worked on a project using the GOV.UK Design System with a Laravel project. The GOV.UK frontend provides layouts and accessible HTML components with their own CSS and JavaScript. The two packages worked really well together, so I thought I would provide a quick example of how to get it setup.

Things to consider

Before you use the GOV.UK frontend you must consider the following:

You’re welcome to use the template even if your service isn’t considered part of GOV.UK, but your site or service must not:

identify itself as being part of GOV.UK

use the crown or GOV.UK logotype in the header

use the GDS Transport typeface

suggest that it’s an official UK government website if it’s not

GOV UK Frontend Readme

Creating a new project

First we create a new Laravel project, let’s call it gov-uk-laravel-demo:

composer create-project laravel/laravel gov-uk-laravel-demo

Install npm dependencies

Then we change into the directory and install our npm dependencies.

cd gov-uk-laravel-demo
npm install
npm install govuk-frontend --save
npm install sass vite-plugin-static-copy —dev

Importing the styles

Rename resources/css/app.css to resources/scss/app.scss and add the following content.

$govuk-assets-path: "/build/assets/";

@import "node_modules/govuk-frontend/dist/govuk/all";

The sass variable is updating the default path from /assets/ as we are using vite, which puts everything inside a build folder.

Importing the JavaScript

In resources/js/app.js, update to the following to initialise the govuk-frontend JavaScript.

import "./bootstrap";

import { initAll } from "govuk-frontend";

initAll();

Configuring vite and building

Update vite.config.js to build our scss files (previously css) and copy the fonts and images to the public/build/assets folder using the viteStaticCopy plugin.

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import { viteStaticCopy } from "vite-plugin-static-copy";

export default defineConfig({
  plugins: [
    laravel({
      input: ["resources/scss/app.scss", "resources/js/app.js"],
      refresh: true,
    }),
    viteStaticCopy({
      targets: [
        {
          src: "node_modules/govuk-frontend/dist/govuk/assets/",
          dest: "",
        },
      ],
    }),
  ],
});

Then run npm run build to build the css, js and copy the relevant assets.

Creating a page

Copy and paste the default page template HTML from the documentation page into the welcome.blade.php file.

Remove the script tags at the bottom of the page

<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module">
  import { initAll } from "/javascripts/govuk-frontend.min.js";
  initAll();
</script>

Then replace these two lines in the head:

<link rel="manifest" href="/assets/manifest.json" />
<link rel="stylesheet" href="/stylesheets/govuk-frontend.min.css" />

With this:

@vite(['resources/scss/app.scss', 'resources/js/app.js'])

Then run php artisan serve and head to http://localhost:8000 to view our new page.

What next

From here you can start building your app by creating a layout blade component that other pages can reuse, then create reusable components following the HTML examples in the GOV.UK Design System.

Photo by NegativeSpace on StockSnap

DEV Community: C.S. Rhymes

Coding with Laravel Boost and Kiro AI

The set up

The first step - database

Getting the AI involved

Tests and formatting

Making manual changes

Folder structure

Comments, lots and lots of comments

So what did I think overall?

Updating my website's theme

Bulma-Clean-Theme

TailwindCSS

Design

Final design?

First impressions of Flux UI

Installation

Theming

Local development

Auth views and dashboard

Header and Sidebar

Forms and inputs

Tables

Accessibility

Would I use Flux UI again?

Hosting a Next.js site with AWS Elastic Beanstalk

Getting started

Hooks

Procfile

Setting the server type

Creating a beanstalk application

Creating a beanstalk environment

Opening the environment

Deploying updates

Adding environment variables

HTML is beautiful

HTML is simple

HTML is future proof

HTML is graceful

HTML is responsive

HTML is beautiful

Fixing a few SEO issues with my author website

www or non-www subdomain

What was the impact?

How was this fixed?

Pitfalls avoided

Permalinks

What was the impact?

How was this fixed?

Potential pitfalls avoided

404 page

What was the impact?

How was this fixed?

Conclusion

Creating a custom toggle in TailwindCSS

Starting with the Checkbox

Basic styles

Using peer

Adding an outline with focus-within

Adding a transition

Final example

Further improvements

Testing window.open() in JavaScript with Jest

The component to test

What I’d normally test

Mocking window.open()

The complete test file

Adding social icons to the Bulma Clean Theme footer

Font Awesome update

Adding social links to the footer

Building a landing page for your book

Creating a GitHub account.

Forking the repository

Making changes

Edit the configuration

Add images

Update the index.md page

Reviews

Newsletter

Saving changes