DEV Community: Juan Fernandes

Building BKMRKS | A Lightweight Bookmarks Manager Project

Juan Fernandes — Fri, 03 Oct 2025 13:00:00 +0000

I’ve always relied on bookmarks to save useful links — design systems, dev docs, tools, inspiration, articles I want to revisit later. The problem is: browser bookmarks quickly become cluttered, messy, and difficult to manage across devices. I wanted something cleaner, more organised, and under my control.

So I decided to build my own solution: BKMRKS — a minimal, full-featured bookmark manager that runs anywhere, needs no database, and can be deployed on simple shared hosting.

The Starting Point

Originally, I experimented with Supabase as the backend for authentication, storage, and APIs. While it worked, it quickly felt like overkill. I didn’t want to depend on a hosted service, worry about migrations, or deal with vendor lock-in.

I asked myself: “Do I really need a database at all?”

The answer was no. For my use case — static bookmark storage, tagging, filtering, and importing/exporting JSON — a simple file-based approach was enough.

The Approach

I set out to build BKMRKS as a static-first app:

Frontend in React: Clean UI, fast search, category filtering, and tagging.
Data as JSON: Bookmarks live in a simple .json file — human-readable, portable, and easy to back up.
Import/Export: Users can upload/export their own bookmarks as JSON.
Deploy Anywhere: Works on Netlify, Vercel, or even plain old shared hosting. No database required.

This decision massively simplified the architecture. Instead of a stack with a database, auth, and server-side code, BKMRKS is essentially just a React app plus a JSON file.

Key Features

Despite its simplicity, BKMRKS is designed to feel complete:

Search – instantly find bookmarks by title, tag, or description.
Categories – group links under T-shirts, Hoodies... (just kidding 😅) — I mean Work, Design, Dev Tools, Articles, etc.
Tagging – flexible organisation across categories.
Import/Export – add bookmarks from your browser, or back them up in seconds.
Static Storage – everything is in JSON. No logins, no databases, just pure portability.

Lessons Learned

Dropping Supabase was the right move. I didn’t need realtime sync, row-level security, or a hosted PostgreSQL instance for something that’s essentially a personal library.

By keeping things static:

Setup is easier — no config, no environment variables.
Maintenance is zero — it just works on shared hosting.
Performance is great — no server round-trips, everything is local.

It’s a reminder that not every project needs a “modern stack” with APIs and databases. Sometimes, plain JSON files do the job.

What’s Next?

I want to expand BKMRKS with a few ideas:

Better UI polish — more drag-and-drop, cleaner category browsing.
Optional cloud sync — without tying users to a single provider.
Public sharing — the ability to make collections of bookmarks public.

For now though, it’s already doing what I need: a clean, no-frills way to manage my links across devices.

Why This Matters

Building BKMRKS reminded me why I enjoy side projects: solving my own problems in the simplest way possible. It’s lightweight, portable, and future-proof — no SaaS dependencies, just a little React app and a JSON file.

Sometimes, that’s all you need.

Automating my links list

Juan Fernandes — Wed, 20 Aug 2025 10:00:00 +0000

How I automated my Instapaper “liked” articles into a clean, sorted JSON feed for my 11ty site — with date normalization, HTML stripping, and deduplication, all running daily via GitHub Actions.

I keep a running list of articles I’ve read and liked — partly for reference, partly for sharing.

For years, I used Instapaper for saving articles, and IFTTT to log my “liked” ones into Airtable.

But getting them onto juanfernandes.uk/links meant manually updating a JSON file. Not exactly friction-free.

So I automated the whole thing. And over time, I’ve refined it to handle dates properly , avoid duplicates , and keep the list sorted — no manual edits, no mess.

✅ The stack

Instapaper RSS feed – for fetching my recently liked articles
A custom Node.js script – to grab new links, clean them, and update JSON
GitHub Actions – to run the script and rebuild my site daily
11ty – to display the links with pagination

Step 1: The Instapaper RSS feed

Instapaper gives you a feed of your “liked” articles:

https://www.instapaper.com/starred/rss/[user_id]/[token]

It only shows your 10 most recent liked items, so the key is appending new ones without losing older ones.

Step 2: Writing to `links.raw.json`

Instead of saving directly to links.json (which Eleventy uses for pagination), the script now writes to:

src/_data/links.raw.json

This file is my raw archive of everything I’ve ever liked on Instapaper.

Why? Because Eleventy treats .js and .json files in _data differently — having a .js file for links means I can read, sort, and clean the raw JSON every time before it’s passed to the templates.

Step 3: The append script (`appendToJSON.js`)

The script does the heavy lifting:

Fetches the Instapaper RSS feed
Normalizes dates → full ISO 8601 format (2025-07-28T18:53:22.000Z instead of 2025-07-28)
Strips HTML from titles , so tags like <details> don’t show in headings
Keeps HTML in content if I want formatted excerpts
De-dupes by URL (latest version wins)
Sorts newest → oldest before saving

Here’s a trimmed example of the mapping logic:

function stripHtml(str) { return str ? str.replace(/<\/?[^>]+(>|$)/g, "") : "";}function toIso(val) { if (!val) return new Date().toISOString(); const t = Date.parse(val); return Number.isNaN(t) ? new Date().toISOString() : new Date(t).toISOString();}// Map RSS itemsconst mapped = feed.items.map(item => ({ title: stripHtml(item.title || ""), url: item.link?.trim(), content: item["content:encoded"] || item.content || "", date: toIso(item.pubDate || item.isoDate)}));

Step 4: Sorting in Eleventy

Now that links.raw.json is clean, src/_data/links.js becomes the single source of truth for Eleventy:

const fs = require("fs");const path = require("path");module.exports = () => { const raw = JSON.parse(fs.readFileSync(path.join(__dirname, "links.raw.json"), "utf8")); return raw.sort((a, b) => Date.parse(b.date) - Date.parse(a.date));};

This guarantees that pagination always starts with the most recent items.

Step 5: Automation with GitHub Actions

My GitHub Action now:

Runs appendToJSON.js to update links.raw.json
Builds the site with Eleventy
Deploys the updated site

That means every day my “Read Articles” page refreshes automatically, and it’s always:

Up to date
Properly sorted
Free from HTML junk in titles
Duplicate-free

The result

juanfernandes.uk/links is now fully automated and clean.

No more manual edits, no more date format headaches, and no need to check if something’s already been added.

It just works. Every day.

If you want to set up something similar, the full append script is on my GitHub — or drop me a message and I can help adapt it for your setup.

Working an inside IR35 contract

Juan Fernandes — Mon, 26 Apr 2021 23:00:00 +0000

What is IR35?

IR35 is the name given to a tax legislation that is aimed at identifying individuals who are avoiding paying the tax that they should be. The IR35 legislation specifically challenges those people who supply their services to clients via their own company, often known as a ‘personal service company’, be it a limited company or a limited liability partnership, who, in the ever-watchful eyes of HMRC, should be classed as ‘disguised employees’. This means that HMRC do not recognise the contractor in question as ‘self-employed’ from a taxation perspective and therefore they should be taxed the same way that a permanent employee should be, thus falling insider what is called IR35.

Contractor Weekly

My experience

To be fair, I've only had one contract that was inside IR35 and after a brief Twitter conversation I decided to write a blog post about my experienvce working an inside IR35 contract and why I decided it's not for me and pushed me back to peermanent employment.

Umbrella companies

The biggest issue I had was finding a good umbrella company - you have to do your research, including looking at companies house and checking their accounts. If they haven't updated their accounts in a while, then something may not be right. Remember they get your money take a cut and then pay you - if they are having money problems, they may not be able to pay.

Also, checkout umbrella company reviews on contractor websites. This article on IT Contracting - Umbrella company reviews – can they be trusted? has a lot more information on what you should look at when researching umbrella companies.

You will need to find contracts that pay at least £100 per day more than your usual day rate if you want your take-home pay to be the same as an outside IR35 contract. When looking for an umbrella company, one of the main questions you'll want to get an answer to is - what is the take-home pay?

Not all recruitment agencies will let you just choose any Umbrella company - it will likely have to be one from a list of approved companies. I had a list of twenty to choose from - but the one that was highly recommended to me was not on that list.

Pensions

Umbrella companies have to automatically enrol you into a pension after three months - not something I needed as I already had a private one - but they still did it and I had to cancel it and chase get back two payments back.

Some umbrella companies allow you to pay your pension contributions into an existing pension, including a SIPP (Self-invested Personal Pension) if you have one - you need to check if they do this and you need to tell them before they auto-enrol you onto their one. If you have a SIPP, make sure they can pay your contributions into it.

Accountants

Your accountant may charge you more to be able to help with an inside IR35 contract if they normally just deal with your business accounts and not personal - since your earnings will be paid into your account and not your business account. Mine didn't and was very helpful.

Multiple employments

You can have more than one employment - you're employed by your own limited company as well as by the umbrella company but this means you won't have a P45 to give to the umbrella company - this is fine - but you may end up on the wrong tax code or the emergency tax code - which means you'll pay a lot more tax. Speaking with my accountant it was easier to just end my employment with my own company so that I could get a P45 instead of risking it.

Salary

If you normally pay yourself a salary from your limited company - then that will need to stop if you're no longer employed by them (you), but if you choose to stay employed with your company then be aware that you'll pay more taxes because you'll be earning more.

In the three months, I was in a contract - I only 4 weeks where my pay was the same. And once my tax code was changed at HMRC but no one knew why. In the 5 years, I've been self-employed that has never happened.

Timesheets

I had to complete three timesheets a week - the recruitment agency, the umbrella company and one for the client.

Just my experience

By the way, these are just my observations based on my short experience and research. Please speak to your accountant and/or a professional who specialises in IR35 regulation.

Is an inside IR35 contract right for you?

My advice is to try it and find out for yourself. After reading this you'll have more information and hopefully know more about what to expect. It's what I decided to do, I had only heard negative things about inside IR35 contracts and with more and more contracts being inside - I needed to see what it was like for myself.

Not just inside IR35 contracts

Some recruitment agencies will need proof that a contract is in fact outside the IR35 scope as stated by the client and this means you may need to pay a third party company, arranged by the recruitment agency, that will check whether the contract is or isn't outside IR35. Not sure if this is the same with all agencies, but I had to pay for this service - luckily the client was happy to pay this fee - as I wasn't happy to fork out the £80 for the privilege.

IR35 Insurance

There is tax investigation insurance for IR35. It also covers your compliance with regulations relating to national insurance contributions or VAT amongst other things. However, the spotlight right now is on IR35. This is not a sponsored link - but I have Professional indemnity insurance from WithJack and I found they now do tax investigation insurance as well.

Checkout WithJack insurance

That's it

I hope you found this post useful if you are currently considering a contract inside IR35. Do let me know if you have had a different experience.

How I improved my website because of Content Security Policies

Juan Fernandes — Fri, 08 Jan 2021 23:00:00 +0000

Last month I delved into security headers including Content Security Policies and added a bunch of them to my website. I did this to learn more about website security and improve my websites' security.

But I learnt that I had inadvertently broken some things on my site - this wasn't obvious because I have a cobbled together ServiceWorker which meant I didn't see the things that had stopped working - namely images and sliders.

I spent a few hours applying fixes to my website to comply with the Content Security Policies I implemented a few weeks ago and at the same time improved my websites' performance and usability.

CSP or Content Security Policy - are a set of rules you add to a web server to say how content should be served and from where. For example, you can choose to serve images, CSS and JS just from your domain. That means, for example, google analytics would not work and any scripts hosted elsewhere unless you specifically allow that domain.

The issue I had is that its either all or nothing. So you cant have any inline JS or CSS. The JS was a quick fix - I needed to move it to a file. But I use CSS to apply background images to components via the CMS. So I needed to move that to the CSS file and use a class to apply a chosen background image.

What I changed

Problem - Inline CSS

One of the issues I had was that all inline CSS is blocked, only linked to CSS files will be applied to my website, this meant that I had to change how I did the background images for the hero section. I was able to add the image via front matter or the CMS, which would then be added to the hero section using inline CSS.

Solution

I now have a list of modifier classes I add to the hero section that chooses the type of background image I use. I have been using the same image for code related blog posts, for example, so it made sense to move that to a class in my main stylesheet. I can always create new ones with different background images when I need them.

You can use the "inline-unsafe" CSP rule to allow inline styling, but this makes it, as the name suggests, not safe to use. I think with my limited security knowledge that if you disallow inline scripts, it would be safe to allow inline styling - I can imagine the only way for someone to change the styling of your website would be via an injected script.

Problem - Inline JavaScript, JS Library

I had a testimonials slider on my homepage - it used a slider script and some custom JS to customise the slider. I started by moving the custom code from being inline into a JS file and linking to it, but I was struggling to generate a SHA (Secure Hash Algorithm) for the slider library.

Solution

Since I was struggling to get a SHA to work with the code for the slider, I decided to get rid of all the JavaScript, not just from the homepage, but also from the portfolio work pages.

Now I show a random testimonial on the homepage, with a new one being randomly shown every time there is a new build of my website.

I also removed the image slider from portfolio projects. The images now are shown in a column with project details on the right which I also applied position sticky to the project detail sidebar to it stays with the user as they scroll down to see all the project images.

The result?

I enjoyed it this - now my website fully complies with very secure CSPs. It's more secure, has better performance and better for users. Win win.

Add your site to the Eleventy Leaderboards

Juan Fernandes — Wed, 09 Dec 2020 23:00:00 +0000

The Eleventy (11ty) leaderboard benchmarks websites built with Eleventy over time.

TL;DR - You need to add your site to the via GitHub to the eleventy site repository and create a pull request for it to be included in the leaderboards.

Let's get started

Go to the eleventy GitHub repository - https://github.com/11ty/11ty-website
Navigate to /_data/sites - here you will find JSON files - each one represents a website built with Eleventy and ones shown on the leaderboard
Now you need to create your own JSON file for your website, so click on the Add file button and then on the dropdown click on Create new file
Enter your a file name in the Name your file... input. This is a filename, so don't use spaces or punctuation marks, but you can use hyphens (-) or underscores (_) to separate words
Use the template below with your website's details as the content of your new file:

{
    "url": " ",
    "name": " ",
    "description": "",
    "twitter": "",
    "authoredBy": [""],
    "source_url": ""
}

url : The site’s live URL
name : Name of the site
description : A short text description of the site
twitter : Twitter username for the site or the site’s author.
authoredBy : An array of Twitter usernames of the site’s authors. Supplements the twitter entry. (Optional)
source_url : URL to the source code (Optional)

Now that you're done creating the new file, you need to save it and also create a pull request - this will ask for your file to be added to the eleventy repository.

You don't need to add anything to the optional description field
Click on the Propose new file button
On the next screen, you can check your changes and then click on the Create pull request button to proceed.
You don't need to add a comment, but you can thank Zach for creating Eleventy. Then click on the Create pull request button again
Next, GitHub will do a bunch of checks on your changes and it will tell you if there are any conflicts. Hopefully, there aren't, but you followed this exactly you shouldn't have any conflicts.

This is the result of me submitting an actual change, so I'd have a screenshot of what the final stage looks like.

That's it - you can now close the page and wait. Once your pull request gets merged, your website will be included in the next round of leaderboard checks and added to the leaderboard.

Keep an eye out on the Eleventy Leaderboards to see how your website scores.

Once your website has been added to the Eleventy GitHub repository, you will also get your author page on the Eleventy website.

Check out my author page.

Improving Website Security

Juan Fernandes — Fri, 20 Nov 2020 16:00:00 +0000

Ever since I converted my website to Eleventy - from PHP - I have been obsessively working ton improving its performance.

One well-known tool that I use for checking website performance is WebPageTest.org and they recently added a new metric to test for - security.

This new test is provided by the Snyk. You can sign up for a free account, give it access to your project's repository and it will actively perform security checks on your code dependencies and you'll be notified if there are any vulnerabilities.

You don't need to have a Snyk account to improve your website security. You only need one if you want them to scan your website repository. 👍 But If you do, you can also use their command-line tool to check your website locally as you work on it.

So why do this?

Firstly, I didn't like seeing that red square with an E grade next to all the green checks ✅ - but also it was a good learning opportunity.

Confession time - I'm not a website or server security expert. Everything I did to my website was based on what I learnt whilst researching the suggestions from Snyk and WebPageTest.

Also, and most importantly to protect my website and users from hacks introduced via JavaScript vulnerabilities like cross-site scripting or compromised npm scripts and a lot more.

How do I do this?

First, test your website using WebPateTest.org and see what level of security your website currently has. Then If you need to improve it, look at your security report to see what Snyk recommends you need to improve.

Based on the report from Snyk, on WebPageTest I researched each of the issues it said I needed to fix. To see what you need to fix, click on the grade letter for security to be taken to your detailed report.

These are the security issues I had to fix:

X Content Type Options: The only defined value, "nosniff", prevents Internet Explorer from MIME-sniffing a response away from the declared content-type. This also applies to Google Chrome, when downloading extensions
X Frame Options: Clickjacking protection: deny - no rendering within a frame, sameorigin - no rendering if origin mismatch, allow-from - allow from specified location, allowall - non-standard, allow from any location
Content Security Policy: A computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context
X XSS Protection: A Cross-site scripting filter. The HTTP X-XSS-Protection response header is a feature of Internet Explorer, Chrome and Safari that stops pages from loading when they detect reflected cross-site scripting (XSS) attacks.

Let's look at some code

This was done specifically for my website which is hosted with Netlify, but the same principles apply to other hosts - just be aware that the way the headers code is formatted may differ.

There are two ways to do this for a website hosted on netlify - you can either add it to your netlify.toml config file or create a _headers file.

It's up to you which one you use - the difference between the two is how the headers code is formatted.

I chose to add mine to the netlify config file because I already had that file and it made sense to keep all netlify related settings in the same place.

Here is what my security headers look like in my netlify config file:

[[headers]]
  for = "/*"
  [headers.values]
    X-Content-Type-Options = "nosniff"
    Content-Security-Policy = "default-src 'self' https://res.cloudinary.com; frame-ancestors 'none'; style-src 'self' 'unsafe-inline';"
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"

You could copy the above code and add it to your netlify config file, but it may be better if you do your research, as some of these security headers may stop scripts from third-parties working on your website.

Conclusion

There you have it - easy when you know how and I didn't break my site once. There are still a few more things to work on going forward, looking at the Mozilla Observatory test results for my website shows that there is still room for improvement - but I now have the basics covered and a more secure website.

I hope you found this post useful. I have listed the resources I used bellow to help you make your website more secure.

Resources

Learning Resources

Tools

Creating a Sitemap file with Eleventy

Juan Fernandes — Thu, 22 Oct 2020 23:00:00 +0000

This is a quick tip showing how I created a sitemap.xml file using Eleventy that will automatically update itself when you create new pages.

You need a sitemap to make it easier for search engines to index your website - but you can also inform them about how often pages are updated, when they were last updated and the priority level for each page.

What is a sitemap.xml file?

The Sitemaps protocol allows a webmaster to inform search engines about URLs on a website that are available for crawling. A Sitemap is an XML file that lists the URLs for a site. It allows webmasters to include additional information about each URL: when it was last updated, how often it changes, and how important it is in relation to other URLs of the site.

Wikipedia

How it works

The first thing I am doing here is excluding the sitemap file from the eleventy collection - we don't want the sitemap listing the sitemap.xml file as an entry.

I then set the permalink - which is the filename we want as its what search engines look for when they visit your website.

We then loop through the eleventy collections.all and output each page URL wrapped in a <url> tag. Inside that tag, we have the standard sitemap tags, <loc>, <lastmod>, <changefreq> and <priority>.

LOC is short for Location and holds the complete URL to the page
LASTMOD is short for Last Modified which is the date the file was last changed
CHANGEFREQ is short for Change Frequency which tells search engines how often the page changes
PRIORITY tag which tells search engines the priority of the page.

Let's see the code

---
eleventyExcludeFromCollections: true
permalink: sitemap.xml
---
<?xml version="1.0" encoding="UTF-8"?>
<urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
  {%- for page in collections.all %}
  <url>
    <loc>{{ site.url }}{{ page.url }}</loc>
    <lastmod>{{ page.date | w3DateFilter }}</lastmod>
    <changefreq>monthly</changefreq>
    {% if page.url == '/' %}
    <priority>1.00</priority>
    {% else %}
    <priority>0.50</priority>
    {% endif %}
  </url>
  {%- endfor %}
</urlset>

A couple of things to note

I am using a filter to process and format the date - that's the w3DateFilter in the lastmod tag.

Also, I'm setting the home page as having the highest priority and setting all other pages to be less of a priority. I'm not an SEO expert and so I don't know if this is the best way of doing it or not, but based on some quick research I'm convinced this approach will work as I read that if you omit the priority, then a page's priority is usually set to 0.5 by default. This will work for smaller sites, but on a large site - this may not be the best approach.

Same with the Change Frequency - I'm setting all pages to have monthly set as the default for how often the page changes. I won't be doing many updates on my clients' website so I think monthly is appropriate for their website.

That's it - this is enough for a small website that doesn't get updated very often, but we can make this better for larger sites with content authors - let's look into that now.

Now let's make it better

The above example works perfectly for my client and their small website. It doesn't need to be updated regularly and they don't have a lot of pages - plus they are not very technical, so asking them to specify a page priority and change frequency I know it just wouldn't work for them.

But let's say you have a client website that has content authors and they are used to SEO terms, page priorities and change frequencies - let's give them the ability to add those to pages.

Here we are adding it via frontmatter but this could be handled by a CMS as well.

---
eleventyExcludeFromCollections: true
permalink: sitemap.xml
---
<?xml version="1.0" encoding="UTF-8"?>
<urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
  {%- for page in collections.all %}
  <url>
    <loc>{{ site.url }}{{ page.url }}</loc>
    <lastmod>{{ page.date | w3DateFilter }}</lastmod>
    <changefreq>{% if page.data.changefreq %}{{ page.data.changefreq }}{% else %}monthly{% endif %}</changefreq>
    <priority>{% if page.data.priority %}{{ page.data.priority }}{% else %}0.5{% endif %}</priority>
  </url>
  {%- endfor %}
</urlset>

Let's look at what is different

We are now checking to see if the page data contains a changefreq if it does, we use it, otherwise, we use monthly as the default and we use the same approach with the page priority - if the user has not set a page priority, we use a default of 0.5 - that's it.

A nice and easy fix to allow content authors more control over their pages whilst also having a default value automatically set if the author has not set one.

Wrapping up

I love these quick wins - doing a small thing to make maintaining a website a lot easier. You can just set it and forget it.

Automated Open Graph images with 11ty and Cloudinary

Juan Fernandes — Tue, 22 Sep 2020 23:00:00 +0000

I wanted to find a way to dynamically generate a unique Open Graph (OG) image for each blog post or note automatically using post data, the Cloudinary API and Eleventy (11ty) for social sharing.

The purpose of this solution is to save time by not having to manually create a blog post image for each post and make blog posts stand out more when shared on social media websites like Twitter for example.

Previously I was using a generic image for posts, or if I used a specific image for the blog post header, then that would become the OG image. But I wanted something unique for each post and something that would instantly tell people on social media what the post was about.

There are many ways to achieve this, for example, Drew McLellan wrote Dynamic Social Sharing Images back in 2018, but Drew is doing this at build time and is using some very clever stuff with Puppeteer and also this post, Automated Social Sharing Images by Stephanie Eckles that also uses Puppeteer.

Those are great solutions, but I wanted something simpler to set up, lightweight on dependencies, not too technical and to just be able to 'set it and forget it'.

Solution

What I wanted to achieve was to have an OpenGraph image that shows the post title on top of the image with my logo added to the image as well. This is what it will look like:

First you will need to make sure you have the OpenGraph tags for images added to the <head> of your page template, in my case I have this in my blog.njk layout in eleventy. Here is the code I currently use:

{% if postImage %}
<meta name="twitter:image" property="og:image" content="{{ site.cloudinary_url }}{{ postImage }}" />
<meta name="twitter:image:alt" property="og:image:alt" content="{{ title }}" />
{% else %}
<meta name="twitter:image" property="og:image" content="{{ site.meta.ogImg }}" />
<meta name="twitter:image:alt" property="og:image:alt" content="{{ site.meta.ogImgAlt }}" />
{% endif %}

Here I am checking to see if the post has specified a post image, if not, then use the default one (which I need to amend to use what I am writing about here). You'll notice that I have merged the OpenGraph tags (name="twitter:image" property="og:image") that Facebook and Twitter use instead of having multiple lines of code for the same thing. Note that you can specify ALT text for the image.

Since I already use Cloudinary, I was happy to discover that their API has text and image overlays that you can add to your images when you request them.

This meant that my idea to have the post title and my logo overlaid on an image could be achieved.

How does it work?

This works by passing variables in the cloudinary image request URL, these variables are then used by the cloudinary API to create these custom images on the fly.

Here is the complete URL for requesting an image with some custom overlays - in this case, the blog post title and my website logo.

https://res.cloudinary.com/juanfernandes/w_1200,f_auto/l_juanfernandes-logo,w_100,g_south_east,x_60,y_40/l_text:Georgia_80_bold_center:Using Defer to improve performance,co_rgb:eee,c_fit,w_600//v1579162296/computer-18363301920-1.jpg

The great thing about this is that you can design your image right in the browser by adding a few variables to the URL.

Now, this is how my OpenGraph images code in my blog.njk layout template looks like using the Cloudinary variables and my blog post variables in Eleventy.

<meta name="twitter:image" property="og:image" content="{{ site.cloudinary_url }}w_1200,f_auto/l_juanfernandes-logo,w_100,g_south_east,x_60,y_40/l_text:Georgia_80_bold_center:{{ title }},co_rgb:eee,c_fit,w_600/{{ postImage }}" /><meta name="twitter:image:alt" property="og:image:alt" content="{{ title }}" />

Let's break it down

Essentially I am passing the post title text and image using Nunjucks variables, then I'm telling Cloudinary how to display that text and image overlay on top of the post image. Here is a breakdown of what all those variables mean:

https://res.cloudinary.com/juanfernandes/ this is a variable I use to pass the cloudinary URL which my account name
w_1200,f_auto/ here I am requesting the images at 1200px wide and automated image format
l_juanfernandes-logo this is the name of the image I want to use in the overlay, my logo, it's prepended with l_ and this is what tells cloudinary to use it as an overlay
w_100,g_south_east,x_60,y_40/ this specifies the size of the image, 100px wide and the position, bottom right and its exact placement using X and Y values
l_text:Georgia_80_bold_center this tells cloudinary that the overlay text should be in Georgia font and the font size should be 80px, bold and centred
Automated Open Graph images with 11ty and Cloudinary this is nunjucks variable for the blog post title
co_rgb:eee,c_fit,w_600 this tells cloudinary the colour we want the overlay text to be, places it centred vertically and horizontally and sets a max-width for the text
/v1579162296/computer-18363301920-1.jpg this variable passes the name of the post image already uploaded to cloudinary

For general posts, like Notes, I created a generic image using my brand colour and the text is added in the centre of the image and my logo at the bottom right.

For posts where I have used a custom image, I make sure that it's a dark image to make the white text is legible.

This was a quick solution and an easy win that will make my posts stand out a bit more on social media. I got to delve into and learn more about the Cloudinary API overlays in general.

Tip: Testing your social sharing images

Twitter and Facebook provide tools for you to test your social media 'cards' and here is what mine now looks like on Twitter.

Taking this further

I could take this a step further and pass the colour of the text or be able to choose a different logo or image to use as an overlay that can be set via a Content Management System, in my case that's Forestry.io when creating a post.

I could even turn this into an 11ty Plugin.

Hope you find this useful and if you want to discuss anything about it, reach out to be on Twitter.

Using Defer to improve performance

Juan Fernandes — Mon, 03 Aug 2020 23:00:00 +0000

In my last post, Exploring the benefits of HTTP2, I wrote about removing jQuery and my global.min.js files in favour of loading JavaScript on a per component or partial basis, so only when that component is included on a page it then loads the needed JavaScript code and library.

Which lead me to look into Defer in JavaScript as another way to improve performance.

"This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.

Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating." - MDN Web Docs

Since the testimonials slider on my homepage is near the end of the page, I don't need to load the JavaScript right away and since it's not used on every page, it makes sense to only load it where the slider is being used.

I read a few articles on Async and Defer to try and understand the difference between both and which was the correct one to use for the testimonials slider.

So I figured I would just need to add the defer attribute to the <script> tag for the TinySlider JavaScript and that would be it...

But I found that doing this, it stopped the slider from working - I'm still learning JavaScript, so you will have to forgive me. I looked at the TinySlider example code I used and realised it was written so it would run as soon as the browser loads that part of the code.

What I needed to do was change the code to only run when the DOM had finished loading and this meant that the HTML code for the slider would have been loaded too.

          <link rel="stylesheet" href="/assets/css/components/slider.css">
          <script src='/assets/js/tiny-slider.js' defer></script>
          <script>
            document.addEventListener("DOMContentLoaded", () => {
              let slider = tns({
                container: '.testimonials__slider',
                items: 1,
                autoHeight: true,
                speed: 400,
                loop: true,
                autoplay: true,
                autoplayButtonOutput: false,
                controls: false,
                autoplayHoverPause: true,
                nav: true,
                navPosition: "bottom",
              });
            });
          </script>

Exploring the benefits of HTTP/2

Juan Fernandes — Sun, 03 May 2020 23:00:00 +0000

Now that this website is hosted on Netlify and they serve websites using the HTTP/2 protocol I've started exploring the benefits of it and what I need to change to take advantage of those benefits.

HTTP/2 is a major revision of the HTTP network protocol. The primary goals for HTTP/2 are to reduce latency by enabling full request and response multiplexing, minimize protocol overhead via efficient compression of HTTP header fields, and add support for request prioritization and server push. - MDN Web Docs

After some research, I found out that when a website is being served via HTTP/2, you no longer need to rely on the following techniques to improve the performance of your website:

Concatenated CSS and JS
Inline CSS (criticalCSS)
Use of a CDN (Content Distribution Network)

This website is fairly simple and does not rely on a lot of JavaScript but does use it for a couple of sliders, one on the homepage for testimonials and another on each of the work pages.

The Old Way

What I was doing before was ti load jQuery in the footer on all pages along with a global.min.js file - which was a concatenated file made up of my main.js and plugins.js files.

The file was minified, but it's still a lot of JS to be loaded on every single page, even if it wasn't being used. And to top it all off, I was also loading jQuery.

Out with the old, in with the new... way

The first thing I decided to do was to get rid of jQuery - there's nothing wring with jQuery, I know its no longer flavour of the month, but it still has its place and it's still used by a lot of websites, but for my tiny website, it was overkill.

So I replaced the jQuery slider with a vanilla JS alternative, TinySlider. I spent some time researching to find a slider that was small in size as well as accessible. I'm not an accessibility expert, so I just made sure that the slider was navigable using a keyboard.

This meant I could remove the code in the footer that loaded the jQuery library from the jQuery CDN and also stopped including the plugins.js file into the global.min.js file.

It's a great start, the global.min.js file was now smaller and I was no longer loading jQuery.

But I didn't stop there. One of the advantages of HTTP/2 is that you don't have to worry about too many file requests.

Instead of including the JavaScript code for the slider on every single page. I decided to only include the slider code in the slider partial - I'm using Nunjucks for this, but you can do this with other templating languages.

This is the code for the testimonials slider on my homepage:

          <link rel="stylesheet" href="/assets/css/components/slider.css">
          <script src='/assets/js/tiny-slider.js' defer></script>
          <script>
            document.addEventListener("DOMContentLoaded", () => {
              let slider = tns({
                container: '.testimonials__slider',
                items: 1,
                autoHeight: true,
                speed: 400,
                loop: true,
                autoplay: true,
                autoplayButtonOutput: false,
                controls: false,
                autoplayHoverPause: true,
                nav: true,
                navPosition: "bottom",
              });
            });
          </script>

At the same time, I also included the CSS or the slider - just on the slider partial.

The JS and CSS files, as well as the slider JS code, are included the at the end of the slider partial so that when the JS runs, the HTML for the slider has already been loaded by the DOM.

This change has improved my websites' overall performance score on Lighthouse - but there is one more thing I need to fix before its perfect.

This is all new to me and I may have made a mistake or misunderstood something, if you spot something, please let me know - send me a tweet

May the 4th be with you

Multiple blogs with Perch CMS

Juan Fernandes — Wed, 13 Mar 2019 13:00:08 +0000

An existing client asked me to move their blog from /self-help/blog/ to the root of the website - but they wanted to keep the self-help blog, as well as having a blog for general posts and a blog for media related articles, ie press releases etc.

I wondered if the perch blog app had a built-in way of doing this - it does but not in the way I thought it would. It does have perch_blog_section() which allows you to output a blog section onto a page.

You can think of blog sections as virtual folders where you can store some blog posts. So you still write all your blog posts in the same way as before, but you choose which section it belongs to.

Create the sections

To get started you need to log into perch and create your new sections. Once you're logged in:

Click on Blog -> Sections
Click the Add section button
Add the Title [image is not required]
Click Save

For my client, I created the sections based on where they were going to be shown media and self-help.

You can leave Posts as the blog's default section.

Multiple blogs

We can now create our multiple blogs. Depending on the website you're working on, you'll either need to create a new page or edit an existing one.

For my clients' website, I created a new page using the default template and then added the following code:

<?php
  perch_blog_custom([
    'section' => 'media',
    'sort' => 'postDateTime',
    'sort-order' => 'DESC',
    'template' => 'blog/media_post_in_list.html'
  ]);
?>

If you already use Perch, then the above code will look fairly familiar, but if you don't.

Line 3 - instead of getting all the blog posts, we are calling just blog posts that belong to the media section
Lines 4-5 - we are sorting the blog posts in the date they were created and showing them in descending order
Line 6 - this specifies the template to use. This one is specific to my clients' website. You can just use your own one or the default post_in_list.html template.

Using the above code, you can create your multiple blogs in different areas of your website.

Creating the content

Now that you have the code to show posts from different sections on different pages of your website, you can create blogs posts and add them to each section.

Login to Perch
Go to the Blog app
Create or edit a post
Switch to the Meta and Social tab
Scroll down and select the section from the dropdown
Save

Now, go to the page for that blog section on your website and see your posts for that blog section.

If you're also moving a blog

In my case, I first moved the blog folder to the root of the website, changed all the URLs, updated the settings for the blog app in Perch settings and changed rewrites in the .htaccess file.

My Git Aliases

Juan Fernandes — Thu, 31 Jan 2019 16:05:36 +0000

I use Git via the command line and have always used it that way ever since it was introduced at a company I worked at a few years ago.

But soon after using it Git for a few days, I started disliking the repetitiveness of the commands - so I did some googling and found that I could create shortcuts (aliases) in Bash.

So I started creating aliases for the commands I used several times a day and over the years I have added to them as I find other developers' own git aliases.

How to create an alias

You can create an alias in a .bash_profile or in . bashrc, usually in the your users home directory.

A bash alias takes on this format:

alias ALIAS_NAME="ALIAS_COMMAND"

Here are my aliases:

You can see the list on this Github gist

Bash the fish

With my new laptop (MacBook Pro) I decided to try Fish, a bash alternative, so creating aliases with fish is not done the same way - they are know as functions in Fish.

Instead of adding them to a file, you create them on the command line, like so:

alias x='exit'

Then, save it using this command:

funcsave x

The functions are then saved in a folder: ~/.config/fish/functions/ - to see all the functions in a web based interface, type the following command:

fish_config functions

I won't get too deep into Fish, as I'm still learning it - maybe a future post.

Did you find this useful? Have you got a your own set of aliases - please share them.

DEV Community: Juan Fernandes

Building BKMRKS | A Lightweight Bookmarks Manager Project

The Starting Point

The Approach

Key Features

Lessons Learned

What’s Next?

Why This Matters

Automating my links list

✅ The stack

Step 1: The Instapaper RSS feed

Step 2: Writing to links.raw.json

Step 3: The append script (appendToJSON.js)

Step 4: Sorting in Eleventy

Step 5: Automation with GitHub Actions

The result

Working an inside IR35 contract

What is IR35?

My experience

Umbrella companies

Pensions

Accountants

Multiple employments

Salary

Timesheets

Just my experience

Is an inside IR35 contract right for you?

Not just inside IR35 contracts

IR35 Insurance

That's it

How I improved my website because of Content Security Policies

What I changed

Problem - Inline CSS

Solution

Problem - Inline JavaScript, JS Library

Solution

The result?

Add your site to the Eleventy Leaderboards

Let's get started

Improving Website Security

So why do this?

How do I do this?

Let's look at some code

Conclusion

Resources

Learning Resources

Tools

Creating a Sitemap file with Eleventy

What is a sitemap.xml file?

How it works

Let's see the code

A couple of things to note

Now let's make it better

Let's look at what is different

Wrapping up

Automated Open Graph images with 11ty and Cloudinary

Solution

How does it work?

Let's break it down

Tip: Testing your social sharing images

Taking this further

Using Defer to improve performance

Exploring the benefits of HTTP/2

The Old Way

Out with the old, in with the new... way

Multiple blogs with Perch CMS

Create the sections

Multiple blogs

Creating the content

If you're also moving a blog

My Git Aliases

How to create an alias

Bash the fish

Step 2: Writing to `links.raw.json`

Step 3: The append script (`appendToJSON.js`)