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.

Reply via email

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.cjs)

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 items
const 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:

1. Runs appendToJSON.cjs to update links.raw.json
2. Builds the site with Eleventy
3. 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.

Reply via email

🧱 1. Fetching products from Printful

My site’s product data lives fully in src/_data/products.js. Here's the process:

1. On build:

   • Fetch /store/products via Printful’s REST API.
   • For each product, fetch its variants.
   • Generate a slug (slugify + small MD5 hash).
   • Deduce categories via getCategoryFromName(...).
   • Save the result to cache/products.json.

This makes the page templates super easy—they just loop over products or filter them by product.category.

I made sure the category names are consistent—t-shirts, hoodies, stickers, and a new one, hats. If the product name contains the word Hat, it'll now correctly be picked up as "hats", not mis‑grouped in "Other".

📂 2. Generating category and product pages with Eleventy

Data source

With the fully formed products array available globally, I can create dynamic templates like:

src/products/index.njk (all products & categories):

  {% set displayNames = {
    "t-shirts":"T‑Shirts", "hoodies":"Hoodies", "stickers":"Stickers", "hats":"Hats", "other":"Other"
  } %}
  {% set categorySet = [] %}
  {% for p in products %}
    {% if p.category and p.category not in categorySet %}
      {% set categorySet = categorySet.concat([p.category]) %}
    {% endif %}
  {% endfor %}
  {% set sortedCategories = categorySet | sort %}
  <ul>
    {% for cat in sortedCategories %}
      <li><a href="/products/{{ cat | slugify }}/">
        {{ displayNames[cat] or (cat | capitalize) }}
      </a></li>
    {% endfor %}
  </ul>
  <div class="products">
    {% for p in products %}
      <a href="/products/{{ p.slug }}/">
        <img src="{{ p.thumbnail_url }}" alt="{{ p.name }}">
        <h3>{{ p.name }}</h3>
      </a>
    {% endfor %}
  </div>

Note the careful categorization and display name mapping.

Pagination for categories

To generate /products/hats/ (and others):

src/products/category.njk:

---
layout: base
pagination:
  data: categoriesFlat
  size: 1
  alias: category
permalink: "/products/{{ category | slugify }}/index.html"
---

<h1>{{ category | capitalize }} Products</h1>
<ul>
  {% for p in products %}
    {% if p.category == category %}
      <li><a href="/products/{{ p.slug }}/">{{ p.name }}</a></li>
    {% endif %}
  {% endfor %}
</ul>

Here, categoriesFlat.js under _data/ returns a list of unique category slugs. Eleventy then auto-generates a directory for each one—now including hats.

🛒 3. Cart, variant selection, checkout with Stripe

On each product page, a select lets you choose the variant (size, colour). I added JavaScript to swap the preview image and update the price using Intl.NumberFormat:

const formatter = new Intl.NumberFormat('en-GB', {
  style:'currency', currency:variant.currency
});
priceEl.textContent = formatter.format(variant.price);

🛒 Clicking “Add to Cart” stores the item in localStorage. The main site header reads from localStorage and updates the cart icon count in real-time.

Finally, hitting Checkout sends the cart contents to a Vercel function (/api/checkout.js), which builds a Stripe Checkout session and returns a URL for redirection.

🧠 Lessons & Takeaways

• Eleventy + Printful = a flexible JAMstack store — no server, no CMS, just simple JS and APIs.
• Category handling: Ensuring string consistency (e.g. "hats" vs "hat") was crucial to avoid mis‑grouping.
• Pagination: Eleventy makes it easy to generate multiple category pages with minimal code.
• UX polish: Small touches like clean titles (productName – siteTitle) and formatted currency add a layer of professionalism.

Next Steps

• Add product descriptions with a Markdown file fallback.
• Show variant options dynamically on listings (e.g. “Available in XS–XL”).
• Add size guides or shipping info with data‑driven modals.
• Clean up code and publish on a public repo.

If you’re interested in helping me test, extend it, or make it even more dynamic—just drop me a line.

Reply via email

Work

• Not much freelance work done this year as I stepped back from doing so much, just focused on contract work.

• Finished Arrival Lift Services website - a custom design and build using Tailwind CSS and Eleventy

• Removed Forestry CMS from JF website because I wasn't using it any more and it's also being discontinued. Now that I'm back to using an iPhone, there are GitLab apps that allowed me to edit content on my repo, but this was quite a fiddly way to edit and add content to my website. I then added Forestry back because of Stream (Short posts that get syndicated to social media) posts as a temporary solution whilst I look into getting Tina CMS setup

• For a long time I used the project-hub.xyz domain name to host projects I was working on, as a way to show clients progress that was made - with a backlog of changes kept for reference. But since I've stopped doing freelance work, it was time to get rid of it. I tried selling the domain name, but there was no interest, so I let it expire :(

Personal

• Since we moved into our house about 8 years ago, we've just been working on updating the inside of the house. So this year it was time to work on the outside. We decided to extend the house into half of the loft (the other half is used for storage still) and add an extra two rooms (a bedroom and an exercise room).

• We also had the driveway and patio redone - the patio got a new design and shape. The driveway surface was redone using hardcore and new shingle. Plus we had an outside entertainment area built - it's sheltered with a big table and chairs, so we can have meals out there, also houses our barbecue and a seating area.

• As part of working on the outside entertainment area, I decided to get a new BBQ as part of the outside kitchen I will be building. I got a Traeger Wood pellet BBQ in the end, as it seemed like a great choice and easier to use. I love it. SO easy to use, and we can have BBQs even if it's raining because it's sheltered, and we can even eat out there as we had patio heaters installed.

• Middle child, Tasha, joined a football team, and I am super proud of her. She's doing really well for someone who has not been playing football for that long. I'm enjoying watching her play at the weekends and at training during the week, apart from it's been freezing cold!

• I turned 41 in November and how do you know you're officially old, the NHS send you for your free health check! Furthermore, I didn't do anything for my birthday. It was just another day for me. And I also got kidney stones, it's the second time I've had them in myself, and it still hurts a lot. By the time I got seen my someone at the hospital, I had already passed it.

• We decided it was time to add another addition to our family - yes, we got another dog. We got a 5-month-old Dobermann. He is the cutest! He was very shy at first, but soon started trusting us enough to let us take him home.

• I was advised to see a Neuropath to try and help me with this rash I've had for a while now. He seemed very knowledgable, but in the end it didn't help at all :(

• Due to the pandemic we decided it was still too early to travel abroad, so we decided to go back to our favourite glamping site in Yorkshire - Kingfisher Lakes

Well, there you have it. Not a great way to end the year.

Stats

Reply via email

Personal

Due to covid, I was without work for about a year and during that time I wasn't using my car. After I got my fully remote permanent role - I decided to sell my lovely Mercedes-Benz A-Class.

It had been off-road for over a year. I had to have it MOTd, serviced and taxed and then I got a quote from WeBuyAnyCar.

Selling via WeBuyAnyCar for the first time was an interesting experience. For example, did you know that once you take your car for them to inspect it and review the quoted price - you can no longer drive off and think about it, as it will invalidate their quote.

We had to get the train home!

Anniversary

In July my wife and I celebrated our 18th wedding anniversary and we celebrated by going to a restaurant for the first time since before covid and also the first time my wife has eaten at a Japanese restaurant - she liked it!

Holiday

We also went on our first holiday since before covid - we managed to book a place at a glamping site in Yorkshire. We had booked it quite early before everywhere in the UK was sold-out. It's a lovely site, with only 7 other families onsite at once. There was a lake and we hired a canoe for the week, which the kids loved using.

We stayed in a Bell tent. It was great - we had a fire pit and a BBQ where we cooked most of our meals.

Skateboarding

I wasn't much of a skateboarder when I was young - I was in my teens when I got into it and so didn't spend much time skateboarding. But one of my kids wanted to learn - so I dusted off my old skateboard and we spent quite a few summer evenings skateboarding in our local tennis courts as we don't have a skate park near us yet.

We even visited a skatepark - a first for both of us. I have to remember to take it easy as my body is not as young as my mind thinks it is!!

Health and fitness

My health and fitness took a huge leap backwards in 2021. At the start of covid in 2020, I self-isolated even before the first lockdown was announced and I pretty much stayed in unless I was going for a run or to take the dog out for a walk.

But then winter came and I didn't have the willpower to go out for a run in the cold, wet and muddy countryside where I live - nor have any enthusiasm to do any other type of exercise either.

So by 2021, I was already a hermit and barely left the house - I stayed up late every night watching TV and eating all sorts of rubbish food and drinking - I went through quite a few bottles of rum.

To add to this I had a daily, very itchy skin rash, all over my body that I got in March 2020 that has never gone away. I've been on prescribed antihistamines ever since. I paid for a private allergy test which tested 800 food and enviromental items and I got back a huge list of things that I was now apparantly allergic to. I stopped eating everything on the list - including wheat and dairy products.

Now I have a very basic and plain diet. It got better in 2021 but I still have a daily rash and I still take antihistamines. Doctors just told me to keep a food diary and stop eating anything that caused the rash - but they don't know the cause. Blood tests only work if they know what they are testing for, so mine didn't show anything.

I was fully vaccinated against covid - managing to get all the vaccines before the end of the year.

NFTs / Crypto

[Warning: This is about Crypto and Non-Fungible Tokens (NFTs). I'm not writing this to convince anyone that they should invest in Crypto/NFTs. If you want to chat about them, add me on Discord and I'll be more than happy to chat NFTs. Discord: CryptoJuan#9664]

In August I read about a 12-year-old kid from the UK who created a generative art collection as an NFT and it piqued my interest as something that I may be able to do myself. An opportunity to learn a new skill and delve into blockchain development.

So I took a deep dive into the world of NFTs and Crypto. It was one eye-opening experience with tons of learning.

I soon became a community mod for a new NFT project - CryptoGhosts - and that was the real eye-opener to the real world of NFTs and Crypto - a very shady, scam riddled industry and until it gets some sort of regulation, people will continue to lose a lot of money. My advice is to only use money you can afford to lose and don't go into expecting to become a millionaire overnight by spending a few hundreds of dollars/pounds.

Work

I have now been at my new permanent job for over six months and I have been slowly getting used to being a permanent member of staff at a company again.

I've done a lot of varied work in my first six months at intelliflo from styling a 3rd party help plugin, bug fixes, new components and even setting up our first design system/style guide.

Freelance

I designed and built four websites for existing and new clients, One of these was put on hold as the client was too busy to be able to provide the remaining content, but all the others went live.

Worked quite a bit on my website, but most of it was behind the scenes stuff. I added webmentions to my blog posts - which was only possible thanks to the 11ty community for kindly providing plenty of articles on the subject. I could not have done this without those articles.

Another behind the scenes change was that I finally fixed my Service Worker script. I wasn't deleting older versions and so returning visitors may not have seen the latest CSS changes. This again was something that I couldn't have done myself had it not been for the numerous articles and a book on implementing a service worker script.

Stats

Reply via email

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.

Reply via email

The year of the worldwide pandemic, bullshit politics, white supremacists, racists, Brexit and a whole bunch of rubbish I won't get into - it's fair to say we won't be forgetting 2020 in a hurry.

As I said, I almost didn't bother doing a review of 2020 - we all know it wasn't a great year and it seems that these - 'year in review' posts have become less popular, probably because a lot of people didn't have a great year. But since I've been doing them for a few years I wanted to continue the tradition - even if it's just a way for me to review my year and see what I need to do better and to celebrate all the wins too.

Work

Like the previous year, my contract rolled over into 2020 as it was extended from a six-week contract to a rolling contract. I returned to the Chartered Management Institute and was there until mid-April 2020.

I was scheduled to start a new contract with Signet Jewelers, whom I have worked with before - at the start of March but unfortunately, the UK went into our first lockdown. Signet had to close their stores (Ernest Jones and H. Samuel) and most of their IT staff were put on furlough - which is something a lot of companies had to do to survive.

CMI offered to keep me on for another two weeks (it could have been longer, but they too had to tighten the purse strings).

After those extra two weeks of work at CMI - I went full into lockdown and homeschooling mode because my wife, being a primary school teacher had to work.

My mother in law, who normally looks after our children when my wife and I are both at work - with her being more at risk due to her health, she was staying in her room (she lives with us) and away from us as much as possible to minimise the risk of her catching covid from my wife due to my wife's risk of exposure at school.

This meant I was in charge of homeschooling our three children and also cooking our dinners as my wife was having to stay at work a lot later than usual as the school was open for the children of key workers. I'm lucky all our children know how to get their breakfasts and lunches without supervision.

I was happy doing this, even though it was hard work and mentally taxing. I love cooking normally, but having to do homeschooling and then cook every day, was tiring.

This also meant I didn't do any freelance work or even look for new contracts as I didn't think I'd cope with a full-time job and all the other jobs around the house.

I did think that once things started to go back to 'normal' after the lockdown was lifted that I would easily get another contract but unfortunately that didn't happen until mid-November.

Luckily I had been saving money - enough for three months worth of wages but unfortunately that wasn't enough to cover me during an unpredictable event like a worldwide pandemic and I ended up having to use the money I had put aside for paying my corporate tax bill for the previous year.

After the schools opened up again in September I started looking for work, mainly focusing on getting freelance work as the contract work market was still pretty dire - unless you were a JavaScript/React/[insert other JS framework] developer.

Work started to pick up in October and I also started a new contract as an Interaction Designer towards the end of November with Defra.

This contract is my first and last contract inside IR35. It has not been a great experience. For example, you can only use a certain number of Umbrella companies that are pre-approved by the recruitment agency and the end client. You can't use your own Ltd. company. You then spend ages reviewing the umbrella companies - looking for the cheapest rate - us freelancers don't care much about the 'employee' benefits.

Anyway, I won't go into it too much - let's just say I won't be doing any more inside IR35 contracts.

Freelance

When it became obvious to me that the contract market wasn't going to recover as quickly as I had hoped - I decided to focus on getting back into freelance work.

I put on my marketing hat and started letting all my connections know I was looking for freelance work and it paid off as I was contacted by someone who saw one of my tweets about going back to freelance work and asked me if I would redesign and rebuild their property search website which has been doing very well in terms of visitors and generating a good income, but the design was quite dated and in need of a refresh.

Then I took on a new web hosting client whose website had been built and hosted by one of his employees who was now an ex-employee.

As you can imagine that was a tricky position for me to be in as I had to liaise with a disgruntled ex-employee. Unfortunately, I never got given access to the old hosting or given a copy of the site and database.

I had managed to download a copy of the website using the command line utility 'wget' but unfortunately this doesn't work all that well when its a WordPress website.

The client did want a new website but he had wanted to wait until 2021 but this forced his hand to get moving with the new site. I spent some time researching and creating a proposal for them which they accepted.

The new website will be launching early on in the new year.

They will be my first freelance project where I have not designed the website myself but instead hired a designer to do this - my very good friend and excellent designer, Fern Taylor.

Personal

I'm pretty sure we or most of us had a rubbish 2020 - mine wasn't great but I know it could have been much much worse. We were very lucky to not have caught covid or have lost anyone to it.

But on a more positive note - I completed the Couch to 5k program - I never thought I'd enjoy running but I have enjoyed getting into it. Especially running in the summer with the lovely Suffolk Coastal views to one side and farm fields to the other, whilst listening to dance music.

I decide to isolate right from the beginning – even before the first lockdown was announced – as much as possible – I didn’t leave the house at all unless it was for dog walks or going for a run.

Since my wife was already at work, being a teacher and already at higher risk - she decided that she could do the weekly shopping trip since Tesco was only allowing those at risk to use delivery slots.

But we used that time to get loads of DIY done in the house - we painted all the hallway walls and ceilings, my mother in laws bedroom, planned and hung a load of picture frames.

Side Projects

I didn’t have many side projects this year, but I did have a few things I focused on.

Chicks

On a bit of a personal 'side project' one of our chickens became broody and after a few weeks and one failed attempt, we got two beautiful chicks.

Blogging

I blogged a bit more than the previous year - a total of seven blog posts, whereas in 2019 I only wrote five blog post. I also managed to post 27 notes in 2020.

In 2019 I jumped on the week-notes bandwagon but it soon started to feel a bit repetitive with not much to write about. Then I saw Clive Walker was doing monthly notes and I thought that would be better-suited format and I managed to stick with it - writing one for every month of 2020.

Looking forward to 2021 I want to continue blogging – I had some very encouraging comments from people finding my posts useful and that was great but it’s also improving my writing skills and ability to better communicate about a particular subject.

My Website

I guess a side project is something you work on the side – so I guess my website was my main side project for the year.

I have spent quite a bit of time improving the performance of my website over the year. I also managed to add more to it.

I delved into security headers and that lead to further improvements to my website performance and overall user experience.

Another side project was a website I designed and built for a friend's martial arts business – Kuk Sool Won Woodbridge.

This was a fairly simple, bright design and a huge improvement on their previous website. All hand-coded with HTML, Sass and using Eleventy with Nunjucks templates.

I worked on another side project, which wasn’t planned – I built and released my first 11ty plugin – Cloudinary Images which allows the user to embed an image from cloudinary in your markup.

This is the first time I released anything code related to the wild. It got quite a bit of interest when released – including a 'like' from Chris Coyer.

Reading

I finally finished the Stephen King series The Dark Tower – all 8 books!

My fiction reading for quite a few years has just been Stephen King books for two reasons – I like his work and I have quite a few of his books. But after the Dark Tower series I fancied a change and have started reading The Fireman by Joe Hill (yes, Stephen King’s son 😁).

I also did a lot more reading from my Instapaper archive and I started tracking my monthly reads and sharing them on my monthly notes posts.

That’s it!

Well, it’s taken me all of January to get this review written and typed up. Just goes to show what kind of year 2020 was that I was so eager to write this.

Reply via email

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.

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.

Reply via email

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

Let's get started

1. Go to the eleventy website GitHub repository - https://github.com/11ty/11ty-website
2. Navigate to /_data/sites - here you will find JSON files - each one represents a website built with Eleventy and ones shown on the leaderboard
3. 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

4. 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

5. 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.

6. You don't need to add anything to the optional description field

7. Click on the Propose new file button

8. On the next screen, you can check your changes and then click on the Create pull request button to proceed.

9. 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

10. 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 if you followed this exactly you shouldn't have any conflicts.

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.

Check out my author page.

Reply via email

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.

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.

• Syntax for the config file
• Syntax for the 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"

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

• X XSS Protection documentation
• Content Security Policy documentation
• X Frame Options documentation
• X Content Type Options documentation
• Netlify Headers
• X Content Type Options on KeyCDN
• Improve your Mozilla observatory score
• Web Security - Mozilla guide

Tools

• NEW - Bulk Page Speed Test
• Mozilla Observatory
• Security Headers
• SSL Labs

Reply via email

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.

Reply via email

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.

• X Card Validator
• Facebook Sharing Debugger

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 me on Twitter.

Reply via email

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>

Reply via email

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.

I used this tool from KeyCDN to find out if my website was being served via the HTTP/2 protocol.

The Old Way

What I was doing before was to 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 load 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 wrong 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 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 JS 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

Reply via email

Work

This year I had a total of 4 contracts which meant I was working for most of the year without any big gaps. It was a year of 'firsts' for me; it was the first time I ended a contract early; first time I returned to working with a previous client; first time I got to work as an interaction designer for GOV project using the GOV.UK Prototype Kit.

Ending a contract early

I started a contract working with a company in the self-catering UK short breaks holiday space - but I ended the three-month contract early after only being there for one month. It seemed like the perfect contract - it was only an hours drive from home, which if you know where I live, you know that is not bad at all and after 2 weeks I was able to work from home three days a week.

So what went wrong?

I spent the first two weeks there without any work to do whatsoever. I was told to use that time to get familiar with the codebase - it didn't take that long to get familiar with it. So I had nothing todo, just waiting for the backend developers to finish their work so that I could do the front-end work. The project was delayed and eventually it was put on hold indefinitely - this was the project I was brought in to work on - the redesign of the checkout process for booking a holiday.

After that, I was given 'business as usual' work - to start with I had 2 tasks to work on. This was to get changes from the development environment to their QA environment - easy right - normally, just a case of creating a pull request to get your branch merged etc, except they didn't use version control!

Well, they said they did and what they meant was that their in-house 'CMS' was their custom version control - that was it - you had different versions of pages but no source control, no code changes were highlighted, so you had no idea what code had changed between versions.

Imagine taking work, previously worked on by three other developers, that have since left, without knowing what those changes were and no documentation - I had to go through work items and then figure out where the change was made and copy it over to QA, then a bunch of stuff would break, I'd fix it and then something else would break or a previous change got undone - more stuff would break, rinse and repeat!

This on-top of how miserable the place was - the town, the people at the company - I'd arrive in the morning and say "good morning" and barely get a response, most people were already on a 'call' so were unresponsive. Everyone always seemed to be on a call at this place.

I noticed that people were starting work early, have a short lunch break at their desk so they could leave work early. I didn't expect it to be a party over there every day, but this wasn't a nice working environment. I soon started doing the same, having my lunch in my car - I did start having lunch in the staff area, but everyone was always on their phones and no one ever said anything, so I may as well sit in my car and listen to music.

There was nothing to see in this town - no green spaces. It was a seaside town; but you couldn't even get to the beach!

I was not happy there and it was having an impact on my work, my mental health and also my family. I didn't like the idea of ending my contract early as I felt id be letting people down but after speaking to them several times about the lack of work and nothing changing, I decided it couldn't stay any longer.

Moving on

I took a short term contract, six weeks, in Manchester - which was a lot further than I normally travel for work. But having left my contract early this had left me in a bit of a financial situation - I was still waiting to be paid from the contract I'd just left and I had also made that mistake of not saving enough money to pay my corporation tax, so there was that pressure too - which meant I had to take what ever contract came my way.

Apart from having to travel to Manchester by train and staying there for the week, it was a great contract - so much to learn - but most of all working with so many passionate and smart people - unfortunately, it was a short contract with no chance for an extension because the company had already hired a full-time interaction designer who was working their notice and had a holiday planned before they would start their new job - I was a gap filler.

After the short contract in Manchester with the DfE, I started a new contract working with Signet in Borehamwood, North London.

Signet is the company that owns the H. Samuel and Ernest Jones jewellers and this was initially to be a three-month contract but ended up being there for seven months.

I was expecting quite a big team at the Signet headquarters but was surprised to find that the entire IT team was quite small - I joined a full-time front end developer and another contractor who was there as a senior front-end developer. He'd been there for about 7 months and had been working on the front-end setup for the new CMS and also setup a component library.

At first, I didn't think there was enough work to warrant another front-end developer - but eventually, the work picked up and we started working on our first big project.

The first project was the redesign and rebuild of the website header for both brands. Both brands share the same HTML but have different designs. This proved to be quite the challenge and it meant we had to have more HTML and CSS than we would normally need to build out those components that made up the headers.

The senior front-end developer built the complex navigation for Ernest Jones. Whilst I built the rest of the components for the header - he also helped out with any JavaScript that was needed for the rest of the header. I wrote some of the basic JavaScript and he then improved it and got it working with his code for the navigation.

After the Ernest Jones header went live - the senior front-end developer decided it was time to move on and I was then in charge of building the entire header for H. Samuel. This was quite a bit of work due to not being able to change the HTML structure as it was the same code used for Ernest Jones, which was now live - means any changes would impact the QA testing.

Then the final and biggest project was the redesign and rebuild of the product list pages and the product detail pages for both brands - for this they hired another three contractors and another permanent front-end developer came back after a six-month break. This was a huge undertaking in a small amount of time, but we did it - not 100% perfect and even though not live, a lot of the issues have now been fixed and will be released in the new year after the code freeze.

My last contract of the year has taken me back to the Chartered Management Institute (CMI). I first worked with CMI back in 2018 - another contract that that was initially 3-months and then got extended for seven months. This was the first time for me - returning to a company I had previously worked with - it's a great feeling and must mean I am doing something right.

With freelance work, it seems its more common to get repeat work from previous clients whereas I think that's not the same with contract work.

Freelance

Every year I say I'm going to stop doing freelance work and just focus on contract work to make life less stressful and every year I fail at this - and 2019 was no different - this means I did a bit of freelance work, got some new clients and also lost some.

Without looking for new freelance work, I managed to gain two new clients through recommendations - so it was hard to say no to them, but it always ends up with me having to do freelance work, alongside a contract which means that after I finish a days work, I end up going back to the hotel/AirBnB and doing some freelance work.

One of those new clients is a Day Nursery with three nurseries - they hired me to quickly get a new page up for their new nursery and change the website to have more content about the new nursery as they needed it to start showing on search results.

As part of the initial meeting with the client, we discussed the bigger piece of work they need - a redesign of their current website and a new CMS.

The other new client is an industrial design blog - they needed a front end developer to work with their backend developer to help implement new changes on the front-end - mainly helping out with HTML and CSS.

Losing a client

But the year ended with me losing a client - I suspected this was going to happen, but its never a great feeling when you lose a client. I have now heard back from them - I decided to email them and find out why they decided to abandon a perfectly good website and to get a new one.

I was originally hired by them to take an unfinished static website, finish it and add a CMS to it. At the time they couldn't afford my time to add the CMS to all pages, so they chose which pages they wanted to be able to edit and the others would be done at a later date.

After the website went live though, they approached me with a new project - an online store. I was excited about this project as I'd not done an e-commerce website in a very long time and it was an opportunity to move back into this line of work.

It was all going well...

The shop was built, I had tested it and it was over to the client for them to test it and populate the shop with their products. This never happened - due to illness and people being busy they didn't add the products or test the site. After a while, I needed to get on with other client work and I stopped chasing them.

Anyway, they now have a brand new Wix website created by the company they hired to help them manage their charity.

Personal

At the end of the year, I finally sorted out part of my pension plan - opened a Lifetime ISA - I didn't know about these - had I known I would have opened one sooner because you can only open one between the ages of 18-38 and pay into it until you're 40 - so that means I have 2 years to pay into it.

A lot of people I spork to didn't like the idea of a Lifetime ISA because you get hit with a hefty penalty if you take the money out early - but this is a good thing for me as it will stop me taking that money out before I retire. So this forms part of my pension plan. Also, with a Lifetime ISA, if you put in the maximum amount of £4000 a year, the government will top it up with 25% - which makes it worthwhile doing.

I opened an account with AJ Bell - there aren't many companies doing Lifetime ISAs and because I did it just before the end of the financial year of 2018/2019 - means I have until April to put in the 4k to take advantage of an extra year of this free 25%. Then I'll have 2 more years that I can pay into it before I turn 40.

Side projects

My only tech side project this year was this website. I decided to join the JAMstack trend and rebuild the backend of this website using a static site generator - Eleventy.

The previous backend was built in PHP and used Perch CMS - I decided to add Perch to my site because at the time I was doing a lot of freelance work for clients that needed a CMS and Perch is my go-to choice. I used my website to test out new Perch features or plugins so I could sell those onto my clients if they needed it.

But I'm doing a lot less work with Perch these days that I didn't need my site to still be using it.

I decided to treat my site rebuild as I would a project, using a proper git workflow - rather than just working directly on the master branch, including raising issues and working agaist those.

As well as using Eleventy as my static site generator I also moved the site hosting to Netlify and for the CMS I'm using the NetlifyCMS. Again, I don't need a CMS, but I wanted to learn more about static site CMSs.

I've enjoyed learning more about the JAMstack, Eleventy, Nunjucks and Netlify - its been awesome.

Personal

I finally finished a non-tech side project - it was close to not getting it finished - but my wife and I spent a few days before the new year getting it finished. My wifes help was required to stop me trying to create any kind of pattern.

When we had our kitchen done in 2018 - we had this wall, that other than having a small breakfast bar was very empty. I came up with an idea - lets cover the wall in pallets!

No one could visualise this - nobody liked the idea but I persuaded my wife to let me put a few pieces of wood on the wall and she was convinced.

So, it turns out that dismantling about 30 wooden pallets takes a long time and it's hard. They have so many many nails holding them together - it was hard work taking them apart without breaking the wood. But it felt good to recycle (upcycle?) these discarded pallets - some of which I found washed up on the beach! (FYI water logged pallets are really heavy.)

I already have my next non-tech project picked for 2020 - an outdoor kitchen with built-in BBQ, pizza/wood oven and maybe even a smoker. This project will involve me building some brick walls - something that I've never done.

Looking ahead to 2020

I'm lucky to be able to start the year with a contract in place already - which carried over from 2019 - this was due to end halfway through January, but it has been extended until March.

I don't do New Year's resolutions because I believe you don't need to wait for a new year to do things or change how you do stuff - but there a few things I want to get done this year.

• I'll be continuing to learn JavaScript - I need to stop learning it though and start practising it this year. I have one course to finish and I also have Wes Bos' Beginner JavaScript course to do.

• I want to start a tech side project where I can dive into JavaScript and put into practice what I have learnt so far.

• I still haven't had a fully remote contract and I want 2020 to be the year this happens - I think once I've had that first fully remote contract it will be easier to get more.

• Finish setting up my pension - the next stage of my pension plan is to set up a SIPP (Self Invested Pension Plan) which I will after April. I just need to learn more about investing money!

• I want to read more this year, I only just managed to finish 1 book out of the 10 I wanted to read. I also want to read more non-fiction books, but necessarily tech ones.

• And continue working on this website and continue learning more about the JAMstack ways, including adding some more IndieWeb features like webventions now that I have removed analytics.

Happy New Year and thanks for reading.

Year in review posts I've read

• Twenty Nineteen - Dave Rupert
• 2010-2019 - Dan Davies
• 2019: A year in review - Andy Bell
• A year in review: 2019 - Max Böck
• Yearnotes 2019 - Alice Bartlett
• 2019 in review - Simon Collison
• 2019 year in review - Justin Jackson

Reply via email

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:

1. Click on Blog -> Sections
2. Click the Add section button
3. Add the Title [image is not required]
4. 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.

1. Login to Perch
2. Go to the Blog app
3. Create or edit a post
4. Switch to the Meta and Social tab
5. Scroll down and select the section from the dropdown
6. 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.

Reply via email

The problem I have with these is that they tend to arrive either via email, phone call or even via Messenger and then I lose track of these requests - because these tools were not designed for tracking changes.

When I'm working on a project, I will have a Trello board set up for that project with all the tasks as cards, either for me or for the client - but only I have access to this board, the cards for the client are usually just things I expect the client to provide, i.e. assets etc.

I use a to-do app on my phone for personal tasks, i.e. pay car tax. But should I also use this for freelance tasks? I don't like the idea of mixing my personal and business tasks.

What should I do?

Should I get into the habit of logging those requests into a Trello board for non-project based work or should I introduce some sort of bug/task management application that will allow my clients to log any issues that require my attention themselves?

Would my clients actually use it - we're talking about small business owners, who are busy running their business and it's easier for them to just email or call.

I wondered whether Trello is the right tool for my clients, web developers and designers get how to use Trello - but do other people? I'm going to do a trial run with one of my clients - he is one of those clients that aren't afraid to try new technologies.

I've created a Trello board for his website and will search through my emails and find the things he has asked me to do and add them as cards to the board - then I will invite him to have a look around and see if he can create a card himself.

How do you manage your non-project based tasks? Have I missed something obvious or am I over complicating things?

Reply via email

When I say home automation - I mean basic home automation - I'm talking about using Alexa to do simple things - like switching on a lamp or lights in a room.

This isn't a how-to guide. There's so much out there and it varies depending on what tech you use and how you go about it.

Simplest approach

The simplest way, I think is the most expensive - to get started you could get a Phillips HUE lights kit - this comes with a controller and some WiFi bulbs - you can then make Alexa aware of these new devices and control them using voice commands - i.e. "Alexa turn on living room lamp".

With this approach, you may end up with different controllers for different technology, hence why I believe its more expensive.

The cheapest way is to get WiFi lightbulbs and use their own apps to set them up, then add them to Alexa. But this way you will end up with various different apps on your phone for all the different tech you automate.

My current setup

I opted to go down a different route, I bought a controller that can use various different protocols - a VeraPlus controller and also opted to use the Z-Wave protocol.

I have two amazon echo dots, one in the kitchen and another in my office (this one used to be in the living room until we upgraded it to an echo) and an echo in the living room.

I have two Sonos play 1 speakers in the kitchen and a Sonos amp in the living room connected to the surround sound speakers.

The new living room TV is also connected to Alexa via an Alexa skill - this is a fairly new addition - we can ask Alexa to pause/resume YouTube/Netflix etc without having to reach for the remote control and we can switch the TV on/off (but don't tell the kids).

Recently I got five smart plugs that control a lamp in the hallway, our tortoises' vivarium, an outside tree light, my office heater and one for the Christmas tree and outside lights (which is now in the loft until December!). These have all been added to Alexa and can be controlled via the app or a voice command. I have also created routines for those devices - for example, the hallway lamp comes on in the evening - saves us turning on the hallway lights (about 10 spotlights!).

In the living room, we have a lamp with a Z-Wave Plus Aeotec LED WiFi bulb - I tried a cheaper alternative before, a TP-Link, but every time we wanted to use it, it couldn't be 'seen' on the network.

The echo dot in the kitchen is mainly used to tell Alexa what music to play on the two Sonos play 1 speakers, which are set up in stereo mode.

How it's going so far...

So far this has been a stressful adventure into home automation and I've only hit the tip of the iceberg of possibilities. Why has it been stressful? Well, I have this love/hate relationship with technology - I love when it works, absolutely hate it when it doesn't work as it should.

The most frustrating thing about home automation so far for me is that it's not 100% reliable. Devices will sometimes stop working and you don't know whether the controller has a problem or its a problem with Alexa. Currently, we can't turn the TV on/off via Alexa - we don't know why, Alexa says to check network connection on the TV, but that's fine because Netflix works.

It relies on WiFi and an internet connection, for Alexa to be able to control a device that was set up via the controller, it needs to do this via the internet - for some reason they don't do it through WiFi even though it means they are in the same network. This isn't an issue for someone that lives in a city or town with really good internet - we live in the countryside and internet access is not the best.

It's not ready for everyone...

Home automation is really popular at the moment but I don't think its ready for everyone yet. Asides from it not being cheap to get started with, it's also not very plug 'n' play and forget about it.

One thing to consider when going down the home automation rabbit hole is how this will affect the other members of your household. For example, I named the lamp in the downstairs hallway, "Hallway Lamp" but none of the other household members knew that's what it was called - I've heard them trying various different names.

Ideally, I need a tablet with some sort of dashboard, accessible to everyone so they can interact with the automation manually. This isn't as simple as you'd hope.

The Vera controller app does not have great UX or a nice design, also for some reason, you can't do everything via the app - that you can if you connect directly to the controller via a web browser - not even to add a new device.

Finally, to get into the more advanced side of home automation, it appears you need to be an electrician.

What's next?

My plan, when I started this venture, was to be able to switch on/off the main lights in some of the rooms and the hallways. This proved to be more difficult than I was hoping for because it involves electricity and I'm not an electrician and looking at the wiring made no sense at all to me, especially when you have a 3 way light switch on one side of the room and a 2 way on the other.

I bought some of these Z-Wave Fibaro Single Switch, but they won't fit in a standard box behind the light switches. I also bought some of these Z-Wave TKB Double Relay Wall light switches but again, too complex for me to figure out.

I'd like to get some of the main lights automated - especially the outside lights, but I'm going to wait for the next time I have an electrician coming round and will get them to wire some of the Fibaro modules in for me.

I'll probably get a few more smart plugs, but first I need to sort out my WiFi - I think this is one of the main causes of issues. I've bought a Ubiquity WiFi AP, but there's a lot of moving of equipment that needs to happen before I can set it up.

So have you ventured into the home automation rabbit hole yet? Let me know how it went.

I know, I know, another post that isn't about web design stuff. I've just not been doing much web design stuff worth mentioning or writing about. But now I'm back to work and have a freelance project too, I'll have more to write about.

Reply via email

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.

Reply via email

I made it point of avoiding politics in 2018 and will continue to do so in 2019 - be it on social media or in real life. I can't change what politicians want to do and I don't know enough about it, so it just infuriates me.

Social media, in general, had an interesting year - most people now know how much data Facebook has on them and what they can do (and did) with it. Lots of people have left Facebook and even Twitter - there's even a hashtag - #DeleteFacebook.

I've been wanting to leave Facebook way before all of this happened - but the one thing that stopped me is that my mum is on there and she calls/messages me on Messenger (Turns out you can use Messenger even if you have deactivated your Facebook account). I've also recently joined a couple of very good groups - I had left the majority of groups I was in and also unliked/unfollowed a LOT of pages. Update: I finally deactivated my Facebook and Instagram accounts on New Year's Eve!

Mastodon came along and loads of people left Twitter for it but for a social network to work - it needs people and people didn't stick around long enough - oh well. In an attempt to make Twitter better for me I have unfollowed a lot of people and companies and have also started using the mute words to clean up my timeline. It has improved a lot.

The year had a great start with me getting a contract to start in February - which ended up being my longest contract to date (7 months).

Anyway, following on from last years theme and my second 'year in review' post, I'm going to look at went well and what didn't.

What went well

Work

I was hired as a front-end developer to work with the Chartered Management Institute (CMI) in Corby, Northamptonshire, originally on a three-month contract. I joined the digital team to help them clear their backlog of day to day jobs that had accrued over the last few months due to the team of three losing two team members.

I had to learn how to use a CMS I'd never used before - Sitecore - and unfortunately, it wasn't a recent version - it was a very old version. I wasn't able to use any of the modern development tools I've gotten accustomed to in the last few years - like Sass, Grunt/Gulp etc.

My contract was extended twice - first to six months, then to nine, but it was cut 7 months due to a company restructure.

I really enjoyed this contract - it was different to my previous contracts as I'm normally hired to work on a specific project. But at CMI - it was 'day to day' to start off with - but then it progressed into working on smaller projects on the CMI website.

I don't usually do long contracts and I still feel the same about them - I don't like them, they start to feel a lot like a permanent role. But I stayed because I made really good friends there and its good to have a long contract under your belt, so I'm told.

Thanks go out to Lee (my manager) and Harry (Junior Dev) for a great few months and for putting up with my nagging about code standards and design systems.

Update: I finished this contract mid way throuch October as I had four weeks off during the contract, it was already booked before I started the initial 3 month contract. After being away for 7 months, I decided to take the rest of the year off to spend it with my family, recharge my batteries (they're old and don't charge as quickly as they used to!) and did some DIY work around the house and garden.

On the freelance side of things - I finished one project. At the end of 2017, I was approached by the Graham Hughes International Charity (GHIC) to build them a website.

This was an interesting project for sure and a first for me. The charity had originally hired a London based design agency to design and build them a Wordpress website but they had some issues working together - the agency only delivered a static website, at which point the charity decided to stop working with them.

I was hired to take the static website, which wasn't live, build some extra functionality and add a CMS to it as well so that the charity could add their own content. For this, I chose to use Perch, as its what I know and love using for smaller projects, plus it's easy for the clients to learn and use.

They required a lot of changes and also a few new features - including a blog and a members area.

The biggest hurdle with this project was the quality of the code I had to work with - I was only being paid for the agreed changes and new features so I had a hard time stopping myself from refactoring the entire codebase. But that was definitely not in the budget, where ever I was adding to an existing section I would refactor code - as I couldn't work with it how it was.

Anyway, I finished the project on time, the client is happy and now I am still working with GHIC as we continue to update (and refactor) the website and add new features.

Side projects

This year I didn't build any web-based side projects - being away from home a 7-month contract (away Mon-Fri, back for weekends) meant I just wanted to do non-screen based projects.

So I finished my kids' treehouse!

This project started as a proper treehouse - we finally had the perfect tree for it - but my neighbour decided to change his mind about allowing me to build it in line with the property line, I did speak to him before I started it - but let's not dwell on this as it's still a sore point.

But I'm glad I have pretty much finished it - just need to cut in 2 porthole windows and add some perplex. I will do write up of this project - essentially a photo progress post.

I also repurposed an old kids playhouse shed that we hadn't even put back together since we moved to Suffolk 4 years ago.

I needed to build a new chicken coop as the old one that came with the house was starting to fall apart so I decided rather than bin the playhouse I'd turn it into a new chicken coop!

I plan on getting some more chickens soon and now there is plenty of room for them.

Bullet Journalling

I've been doing a basic version of bullet journaling for a few years now. But towards the end of the year, I started following the bullet journaling methodology properly. I plan on expanding this further in 2019 and get a bit creative with it as well - being inspired by AmandaRachLee on Youtube.

Health

My health and fitness have continued to improve throughout the year. During most of my 7-month contract, I was going to the gym two to three times a week and eating healthy food prepared from scratch, rather than living off microwave meals, staying away from sweets and cake also helped (this wasn't easy in an open office).

At the of the year I signed up to do The Body Coach's 90-day plan (I'm now on month 2 of 3). This is a High-Intensity Interval Training (HIIT) program and a healthy eating regime - but it's not a diet - the portions are huge! What I want to get from this is to be fitter - which I am now starting to see a change.

I plan on continuing with the gym while I'm away on contract - this is easier when I'm away from home - but not sure how easy it will be if my next contract is in London - as its a 2hr commute each way - which will mean I'll be very tired. So we'll see what how that goes.

Family

In 2018 we had a family holiday of a lifetime - the five of us went to Orlando, Florida and spent three weeks going to all the Disneyland and Universal parks. That's three weeks of walking - a LOT of walking - some days I did over 25k steps.

But we loved this holiday - my wife and I preferred Universal - but the kids loved all of it. We've been planning for this holiday for a while - we had to time it right so that our youngest (6) would remember it but also our eldest (10) would still find it magical.

This holiday was also the first time I have ever been on a rollercoaster! My eldest (also her first time) was the only one that was tall enough to ride but, of course, she needed to go with an adult and I was happy to step up!

Personal

I wasn't sure whether I should mention some of these personal things for fear of it coming across as a bit of a show-off - that's not what I want.

This year I treated myself to a few nice things - I've worked hard and I believe I deserve these things.

Firstly, I got my self a new laptop, a MacBook Pro - the last laptop I had was a £400 Toshiba that I bought five years ago - it has served me very well, but it was starting to show its age. I've been wanting to get an MBP for a while - especially since there is some Mac-only software I've wanted to use to for a while (I gave up waiting for them to release a Linux version).

Secondly, since I do a lot of driving when I am on contract - I got myself a newish car - a Mercedes A-Class 2017 plate - this is the nicest, most expensive car I have ever owned - my previous car was a 10-year-old Ford Fiesta - which rattled a lot on the motorways and almost killed me in this year when it spun out and I ended up off road - luckily it stopped just before a massive 20ft drop.

Update: When I say I bought, I don't mean outright - it's a lease, I'll have it for 4 years and then I can choose to keep it or give it back, or trade it for another.

Lastly, I got myself a motorbike - it is a 125cc custom cruiser - I don't have my CBT yet, that's happening in 2019 - but for my birthday I got a jacket and helmet, just need boots, gloves and trousers and I'll be set.

My wife says I'm having a mid-life crisis!

I think if you can, you should treat yourself, especially if it makes getting to your job that little bit nicer!

What didn't go so well

Blogging

I didn't do much writing on my blog in 2018 - I only managed 2 posts, three if you count the one that I should have published but didn't quite get to it. I was hoping to have posted a lot more as I had a great start in 2017.

But I blame this on being away for a long contract and where I was staying, I didn't have a proper desk, so couldn't do much work. Plus, after a days work, going to the gym and cooking my dinner, I didn't have much time to spend on the computer.

Reading

I wanted to have read ten books this year but I only managed two! I'm still reading Stephen King's The Dark Tower series - which have quite a few big books.

I managed to finish a book that I struggled to get into - "You're my favourite client" - it's not my usual sort of book. I do need to read a lot more non-fiction books, not just fiction and web design.

I only managed to read 74 articles in 2018 - which can be seen as a good thing because I feel as though I've done a lot of reading of technical articles but then I don't put anything I read into practice.

Side Projects

No personal digital projects this year. I have many ideas on paper - but lacked focus this year. Something I will do better in 2019.

A side project I started in 2018 - I started tinkering around with Home Automation - not sure if this is something will ever be finished. It has been an interesting and frustrating delve into this - I plan on writing about it. But let's just say, if you want to do it properly, it's not yet ready for the mainstream - it's getting there though.

I started to redo my website to use Eleventy - a static site generator but I didn't get it finished!

Sometime after designing and building my current website, I added the Perch CMS so that I could use it as a testbed for new plugins and functionality. But since I'm not doing many freelance projects that require a CMS these days and I've been wanting to dive into static site generators for a while now - I decided to give Eleventy a go.

Learning

I usually use side projects to learn something new but since I didn't do any, I don't feel as though I've learnt much. I started a few JavaScript courses but didn't get them finished.

Video Streaming

Something I wanted to get into was streaming. I've done a few gaming let's play videos and have streamed a few times (to an audience of zero!) but I've been wanting to stream web design content - what I think stopped me was lack of focus on 'what' the streams should be about and lack of confidence.

Pets

It wasn't a great year for our pets - we lost a few, but the one that hurt me the most was losing our dog, Zack.

We had him since he was a puppy - before we had our children - he watched our children grow up and they watched him grow old and frail.

We said goodbye to him in the summer and he now rests peacefully in our garden.

Our cat had to have an operation on his right leg bone - where they had to cut off the top of his leg bone - this procedure is done instead of a hip replacement - it was a tough decision to make, but a hip replacement is not as common as the other procedure plus the recovery time is much longer. It was hard enough to keep him under house arrest for two months as it was - if you have a Bengal, you'll know how much they love the outdoors.

We also lost loads of our rabbits - we were on holiday when it happened (we had someone looking after them, but it wasn't their fault - rabbits die pretty quickly if they get sick), we're down to 1 rabbit from 12. One of our chickens also died - so we only have 1 chicken and a cockerel left.

At the beginning of the year I also lost my pet lizard - a bearded dragon named Bernie - she was with us for a good 7 years, but she became ill and the vets didn't know what was wrong with her and we eventually lost her.

Looking ahead to Twenty Nineteen

In 2019 I want to focus on monthly goals, instead of resolutions, continuing learning JavaScript and learn Sketch app and Figma.

I am attending the New Adventures conference in January - its the first conference I've been to in a few years. I've heard so many good things about the past conferences - I'm so glad its back as it's already looking like its going to be a great conference. Fingers crossed I get to meet a few people in real life.

Last year I went with a theme word for the year which was 'focus' and that didn't work for me. Maybe if I'd had the word printed out in large text and stuck to the wall it would have been a constant reminder - but in 2019 I'm just going to set monthly goals instead.

These are the main things I want to focus on in 2019.

Work

I want to get my first fully remote contract job in 2019. I've had contracts that have allowed 1 or 2 days of remote work after I've been there for a month or so. But I really want a contract that will be fully remote, I'm happy to go to the office 1 or 2 days per week for meetings.

Learning

Need to stop 'trying' to learn JavaScript and make a conscious effort to actually learn it. I find myself in a strange situation - I've always been a front-end developer - but in all my permanent jobs, someone else was the JavaScript person, it was usually a backend developer that worked with JS and all I needed to do was HTML CSS and jQuery - so all of a sudden JS is really popular and I missed all the boats.

I'm in the middle - I'm not a JS developer or a UX Designer, but I am somewhere in the middle. I believe I'm more developer than a designer, so this is why I'm going to focus on learning JS.

I also want to dive into Vue and Gatsby - there has been so much love for both that you can't help wanting to get stuck in. Plus I also read that learning Gatsby will help with learning React, which I've tried but found too difficult because I don't know vanilla JS.

There's a whole bunch of other stuff I want to learn too - like CSS Grid!

Side Projects

I think the main issue with me learning JS is that I do a lot of reading and video tutorials but I don't do anything with it. Sometimes I will use vanilla JS instead of jQuery, but if I'm busy - then I don't have time to figure out JS, so will just default to what I know.

I need to build stuff and use JS so I can learn it, spend time making mistakes and figuring things out and I believe I can do this with side projects. What will I build I don't know yet, but whatever it is, it will be something for me and it may never see the light of day.

I also plan on streaming as much as possible and hopefully actually get people to 'tune' in - I want to stream so that I can practice speaking to an audience, learn to speak clearly while showing/doing demos/presentations etc.

Blogging

Gah. I really need to make this a habit. I like doing it and it helps with the learning side of things - if I write about something I've learnt, it helps commit it to long-term memory - so I want to do at least 1 blog post a month - I know it doesn't sound like a lot, but when I only managed 2 in twenty eighteen - 12 will be a milestone!

Health

After many many years of neglecting my health, fitness and well being - I am making a conscious effort to fix this. It won't be easy, but then you can't expect to fix years of damage in one quick HIIT session, can you?

I'm going to finish The Body Coach's 90-day plan and then create my own plan to keep the exercise and healthy eating going. I'm also going to try very hard not to have any sugar - which won't be easy - it means giving up things like chocolate, cookies and cakes! I have already replaced sugar in my coffee with a plant-based alternative.

Well, I think that's all I have to say for this year in review post (sorry it's a long one) - I hope you enjoyed reading it as much as I enjoyed looking back. Let me know if you did and if you also wrote your own - I love reading these.

Here are the ones I've read so far:

• Ashley Baxter
• Dave Rupert
• Ana
• Remy Sharp
• Charlie Marie
• Justin Jackson

Reply via email

I love these posts that show what designers and developers use to do their job - so I thought I'd post my own. It's been a long while since I last wrote anything, so thought this would be an easy one to get me back into writing.

Update: These are the tools I like to use, it's ones I use when I can, but as a contractor I am used to adapting and using what ever tools the client needs me to use. So don't feel that just because I like a MacBook doesn't mean I can't use Windows. 😊

Web Design

Editor

My editor of choice is Sublime Text 3 using the Seti theme & colour scheme with whole bunch of add-ons and custom settings. I'm happy with ST3 and I know there are other editors, like the new VS Code, but ST3 is not broken for me, so I don't need to change it.

Terminal

For terminal emulation I have just started using iTerm 2 - previously when using Ubuntu, I just used the default terminal - I tried Hyper but I didn't get on with it.

I have always used Bash but now on the MBP, I'm trying out Fish shell and Oh My Fish.

Desktop Apps

For design I use GIMP - Adobe Photoshop is far too expensive, does not work on Linux (which is what I've used for the past 10 years) and I never used more than 10% of its features.

I still have to use FTP for some clients, FileZilla has been my FTP client of choice for a long time.

My development browser is Chrome - it has great developer tools and it's faster than Firefox. I have Firefox and Opera for testing. Firefox is my main browser.

For notes and writing, I use Simplenote. It's cross-platform, which means all my notes are available on my phone, on the internet and my laptop.

Slack and Skype for communication. Currently trying out Franz - an app that houses other apps, like Hangouts, Facebook Messenger, Skype and more, all under one app.

Desk Setup

My development machine is a 15" MacBook Pro 2018 with 32gb of ram and its plugged into a 21" Samsung monitor. I've only had the MBP for about a month. My previous machine was a 15" Toshiba Satellite Pro with 16gb ram - It was about 4 years old.

Other Gear

My phone is a OnePlus 5T
For testing responsive websites I build, I use the following mobiles and tablets:

• iPhone 4s
• iPhone 5s
• LG Nexus 4
• LG G3
• Google Pixel 3
• OnePlus 5T
• Kindle Fire 10
• iPad Mini

Not forgetting notepads, pens and pencils!

Have you written a similar post? I'd love to read about your setup.

Reply via email

It was a good year for me, work-wise and personally. I got more contract work experience - two contracts and I also landed a freelance client website.

We got quite a lot of work done to the house and I have very nearly finished the treehouse I started building for my children! They will get to finally use it in the summer.

What went well

Being very self-critical, its hard to notice when you've had a good year because its easier to remember the not so good things that happened - but I making a point of thinking about the things that did go well first.

Work

I only got did two contracts this year, and to some contractors (and recruiters) this seems to be a big deal - not for me, being freelance/contract doesn't mean you have to work every day of the year - if I did that, I would pay a huge amount of tax (I pay all the taxes I'm required to pay) and never get to spend any time with my family.

It's funny how some people react when you tell them you're taking 4 months off work. Technically I never stopped working, I still run a business and a lot of business tasks get left behind when I'm working away on a contract.

My first contract of the year happened right at the beginning of the year in January. I got to work with a great UX Research team at Ofgem.

This was a great role - my job was to build interactive prototypes based on the research the team had conducted. The prototypes were then tested on real users, people selected at random, based on certain criteria that we needed to test, and I got to watch them interact with the prototypes I had built and seeing how it worked or didn't. After each testing session, we would then iterated the prototype ready for the next session.

I really enjoy this kind of work.

This was followed by a freelance website design project - a new website for a new business selling prestige cars - Lusso Prestige.

The client approached me to design and build a website for his new business - the client has been selling supercars for Romans Internationals for a quite a few years and he has taken all that experience and set up his own business. The client approached me based on a recommendation and based on the work I did at Motortrak - an agency that specialises in websites for used car dealers like Tom Hartley, Mercedes Benz, McLaren, Ferrari and many more.

This took me until June with a few breaks sprinkled in between. I was then offered a contract at Intelliflo, based in Kingston Upon Thames.

I was hired as a UX/UI Front End Designer and I was brought in to take an existing design and apply it to a new app that was being built in-house. This is was, what's knows as an SPA or Single Page App - using the angular framework and bootstrap.

The team were building an app store and a developer portal - the app store will feature apps developed for their SaaS software product - Intelligent Office. I took the existing design and built a basic design system using Pattern Labs with Sass and GruntJS.

Once I had built all the existing pages that had been designed and for the prototype working, I was able to redesign pages, components and build new pages and user journeys much faster.

This was originally a 3-month contract, which was later extended to four - I was asked to redesign the app store, developer hub landing pages and the documentation sections.

Ended the year doing a quick job for Molo Finance - I was asked to design and build a temporary landing page as they currently do not have a website.

After 4 months of being away from home and family - I decided to take a break from contract work until the new year. I travelled down to Surrey Sunday nights and stayed until Thursday, then I drove back after work and had the weekends at home - surprising how tiring this gets after four months.

Health

My health has improved in 2017 and I hope to continue improving it this year.

While working away in Surrey on my last contract - I actually went to the gym twice a week. This was the first time I'd been to a gym in about 10 years! So you can imagine, this took some willpower to get me to the gym after a day at the office.

I was also watching what I eat and was eating healthier meals. I find it so much easier to do this when I am away from home, but this is something I need to get better at when working from home.

What didn't go well

Reading

I continued reading web design/development, but didn't stick to reading 2 per day - this means I ended up with a huge backlog of articles, that I'll never get to read and I ended up deleting a huge amount of unread articles twice last year.

I only managed to read six books - I'd set my self a challenge of reading ten books, so I was a bit short there. But I've made a good start on Stephen Kings The Dark Tower, currently on the 4th book.

Writing

Only managed four blog posts last year, not great, but better than last year. I had some sort of block, I wasn't sure who I was writing for, who is my audience.

Focus

Twenty seventeen lacked focus. I ended up with too many things on the go, both work and personal projects, which meant the year ended with quite a few unfinished tasks. So already the start of this year has been lacking focus, so this is why focus is going to be my theme for 2018.

Numbers

I really like collecting stats! Here are some number from 2017. TV series, not all are finished, some I've already carried on watching this year. The coffee numbers aren't all there, I've gone through a few phones this past year, so being able to log my coffees hasn't always been an option.

TV series (17)

• Arrow
• Blindspot
• Castle
• Criminal Minds: Beyond Borders
• Colony
• Dexter
• Outcast
• Parks and Recreation
• Quantico
• Red Dwarf
• The A-Team
• The Flash
• The Gifted
• The Orville
• The Walking Dead
• ZNation
• Zoo

Movies (7)

• Allegiant
• E.T. the Extra-Terrestrial
• Flatliners
• Insurgent
• Judge Dredd (1995)
• The Day
• The Fault in our Stars
• The Green Hornet
• The Jungle Book (2016)

Games Played (7)

• Destiny
• Doom
• Dying Light
• Fallout 4
• Gran Turismo
• Horizon Zero Dawn (PS4)
• Minecraft

Contracts (3)

• Ofgem
• Intelliflo
• Molo Finance

Side projects: 1

Blog posts published: 4

Books read: 6

Coffees: 208

What’s ahead for 2018

This year I going to have a theme - and that Focus - I want to be better at focusing on getting things finished, streamlining my business so I don't spend time doing unnecessary tasks, or end up working more time than I need to. A great example of this is my accounts - since I started freelancing all those years ago, I've been doing my own accounts and that meant spreadsheets. But since I started my limited company and got an accountant, it turns out he doesn't use my spreadsheet - he just needs the bank statements with some notes on items that aren't obvious - so it turns out I've been doing unnecessary work.

Health: I want to continue improving my health. I'm going to make sure I continue with the gym when I'm away on contracts and will be building my own mini gym at home, once I've cleared out the garage.

Work: I need to get to a stage where my contracts are seamless without any large gaps in between. I also want to get into remote work so that I can spend less time away from home.

Writing: Continue writing blog posts - I've decided (thanks to some useful advice) to focus on writing for me, this will allow me to improve my writing and allow me to discover who my audience is.

Reading: Continue reading at least two design/development articles per day. Carry on reading my Steven King and technical books - get a least 10 books read this year.

Video: I also want to start creating more videos - I did some personal gaming ones, but I want to create some web design video content in 2018.

That's it for my year in review post for twenty-seventeen. Have you written a year in review post? I'd love to read it.

Reply via email

How it all started

Well, let's take a journey back in time - if you’ve met me, you’ll no doubt get that I’m a bit of a geek!

I went to college to study GNVQ Information Technology at an intermediate level - I then moved onto the advanced version of the course the year after, but a few months into it, I realised that this wasn't for me - it was far too theory based and I was more into the practical side of technology.

As well as my love of computers, I'd discovered the internet in my first IT course, but I wasn’t just browsing websites - I wanted to know how they were built, so I spent a lot of time looking at websites’ source code and copying everything I found that was ‘cool’.

Yes, I had a Geocities website - remember those? Unfortunately, I don’t have any screenshots of those early sites - phew!

I decided to find out what courses taught web design, but back then there wasn’t a specific course for web design - so I did the next best thing - a Higher National Diploma in Multimedia - a course that covered web design, game design, video and music production, photography and programming.

This course allowed me to get really creative and I knew I had found what I wanted to do for a living!

Part of the course was to work with a local business owner to design and develop a website for their business.

This is what we did as a group:

I ended up working privately with that client and he has been my client ever since.

After the 2 years doing the HND Multimedia course, we were given the option of staying on for a 3rd year to get a BA degree in multimedia - I stayed. I got a 2.2 for my BA - turns out I wasn’t that great at researching and writing a 15000-word dissertation - it brought my mark down from a 1st for my practical work, to a 2.2 - oh well!

I can’t remember the exact title of my dissertation, but it was about looking into the impact that digital equipment was having on the music over analogue equipment, for example, vinyl vs CD etc.

I remember being told that we should send out questionnaires - but for me sending out paper questionnaires seemed like an archaic thing to do, so I built a website with my questions, that saved the answers to a database - all very basic, but it worked - shows you how interested I was in writing a dissertation. :D

After I finished college and got my Bachelors degree, I tried to get a job as a website designer, but back then there wasn’t that many companies doing web design and the ones that were, were too small to hire me because I didn’t have any commercial experience, and I couldn’t get any commercial experience because I couldn’t get a job - the ol' catch 22!

So I got a job working at Tesco! I started stacking shelves like everyone does and I had done before while at college - but after a month I moved up to stock control, but I really did not like working in a store. I ended up getting an IT job working for the NHS, working as an IT Support Analyst. Soon after I ended up working with an IT manager on a new project, to refit all local doctors surgeries with brand new computers and servers, it was just me and him - it was great.

I loved this project so much, this project was my first foray into self-employment - I know I wasn't self-employed, but because it was just me and this manager, we got to schedule our own time and workload. I ended up being the first port of call for all GP IT issues. But even though I was loving my IT job, I was still doing web design work in the evenings after finishing my job - also known as 'moonlighting'.

I teamed up with a colleague from my multimedia course, who was also not having any luck getting a job as a web designer. We created a partnership and traded as Multi Creative Media.

This was our first website - my business partner was the creative genius!

We carried on working together for a few years, I then landed my first ever website designer job working at Tesco Compare - one of the first insurance comparison websites - yeah I know, Tesco again :D

I was actually employed by RBS - Tesco Compare was a joint venture between RBS and Tesco, but after 2 years working there, Tesco bought the RBS half of the business and a year later they moved the business to Scotland. I was offered my job up there, but at that time, I was recently married and we had our first child - we didn’t want to move to Scotland.

It was time to move on

My second website designer job was working for TUI Travel at Crystal Ski - I was working as a UX Developer. This was a huge leap for me, working in the UX department and as a front-end developer ( a new name for website designer).

I got to work on some great projects, some that were just for testing out new ideas to see if they would work and others actually got implemented. The last thing I worked on was the Snow Reports section on the Crystal Ski website and it still in use - yay!

I found that job and company quite restrictive in the end, I loved the people I was working with, but the politics & rules of big companies really got to me.

I moved onto to a new job - working as a front-end developer for a company called Motortrak - they are an agency that specialises in building CMS sites for the used car market. I got to work with some great people and some great brands, including McLaren, Mercedes-Benz, Land Rover and Tom Hartley.

I lasted about 2 years at this job this time. It was going great, I started building an internal framework that was going to be used to build all websites and it was responsive, but my very supportive Head of Technology left and things took a turn - the company really changed into something that I didn’t like, so it was time to leave.

At that time, I was working from home 3 days a week, I was in the office Monday and Tuesday. I had moved to Suffolk from Surrey - I was driving down for the 2 days and then coming home.

I decided to leave. I also decided that I was going to work for myself. No more big company rules and politics to deal with.

I built this website, it has changed a little bit since then, for the purposes of finding work. After about 6 months I found my first contract job.

I got a 3-month contract working in Norwich with Virgin Wines - they were re-building their entire front end website and back-end. This was a great first contract, but I felt like I wasn’t good enough for it, so I was always staying late - until about 8 pm, which meant I'd get home at about 10 pm and I did that for a few months. It was hard work, but I learnt a lot.

The setup was quite different, there were 3 contractors and 3 perm staff, we got given a room and for the duration of the project, each developer was paired with a designer and we worked closely on the section we were designing and building.

This was a great way of working. We were also using Pattern Lab and building out a style guide - this was amazing, I had read so much about it, to actually work this way and seeing how it was being used by other people in the company was great.

I’ve had a few more contracts since then but now I am trying to focus more on freelance work.

This is the kind of work that I thrive on. I love solving problems, I do like working with other people and I do, if I need a new logo for a client website or if a client needs something that is beyond my skill set. But the majority of the time, it is just me.

When I started contracting, I took my old name, Multi Creative Media and registered it as a Limited company and I still use that company name, but this year I decided that I was just going to trade as myself - Juan Fernandes Freelance Website Designer.

This felt like the right thing to do, working as Multi Creative Media, I always felt that I gave the impression that I was bigger than I actually was - website copy referred to ‘We’ rather than ‘I’ etc.

All in all, I have about 12 years of experience as a website designer, having gained that experience working in many roles and a few different industries.

After my second contract, working as an Interaction Designer with a great team up in Sheffield, I was offered a full-time position, but based in their London office - I didn’t think twice about accepting it, but I should have. Because I had worked with such a great bunch of people, I forgot about my dislike for big companies, I also thought that working from London, would have been the same as it was when I worked in Sheffield. Things weren’t the same, and a lot of change happened within the company - 90% of the Sheffield office were made redundant and then 6 months later, I too, was made redundant.

So I decided to go back to contract work and also work on establishing myself as a freelance website designer.

When I say I dislike working for big companies, I’m not saying there is anything wrong with them - I believe that I am not suitable to work for large companies.

What I didn’t realise all those years was that perhaps I was not suited to permanent work for companies and that I should have started working for myself all those years ago. But I have gained a lot of experience.

I hope that by reading this quite long post you have gotten to know me a bit better and have learnt about my journey to becoming a company of ‘Juan’ and establishing myself as a freelance website designer.

Reply via email

Have you ever wondered what it is like to work with a website designer? Does it stop you hiring one because you don't know how they work - what if your ways of working don't align with theirs?

I hope that by sharing my process, you might find we would work well together.

Let's get started

After a potential client has been through the onboarding stage, which we wont cover in this post, we schedule a meeting - this meeting can either be face to face if you're local or a Skype video call - I can travel to your offices if you prefer.

The purpose of the meeting is for us to discuss your project in detail - this gives me an idea of the priorities, overall goals and project complexity.

Whether its a new website or an existing one, we will cover pages you need, what functionality you want, existing branding.

We'll talk about colours, typography and images - the look and feel you are after and logos, websites you love and hate - all of this will help me when it comes to the design stage - it helps me visualise your project.

After our meeting, there are a few things that I will need you to do. I will need you to create a pinterest board or a word document and fill it with visual inspiration for your website, complete the design questionnaire and have upload all your website content (text and photos) to the Google Drive folder I share with you.

I will then work on your project proposal - this will detail how I intend on solving your problem in detail, the cost and the contract - don't worry, the contract is written in plain English and it's designed to help both of us in case we change our minds during the project. It will also explain what happens next.

What happens next

Providing you are happy with the proposal, contract and there are no amends needed - but you are free to suggest amends.

A typical project is split into three stages, Design, Build and Live - but before the first stage can start - I will need you to have signed and returned the contract, as well as a down-payment of 50% of the total project cost. This enables me to schedule you in, create a project plan and start working on the design.

We will be in constant contact throughout all of the stages and you will have access to the Project Hub - a place where you can check the process of your website. While you are checking, if you find any issues at this stage, I will need you to log them on a spreadsheet that will be created for this project - this allows me to focus on getting things done and we wont lose track of any issues.

Finishing up

We will catch up once more before the site goes live. If you have chosen a CMS, I will show you how to update your website, we will go over the documentation to make sure it all makes sense and you are able to edit your site.

After I receive the final payment, the website goes live, and you can start sharing your new website. But this isn't the end, I will always be on hand to help you with your website, if you get stuck or have any issues or decided to add more to it.

My process is not set in stone, and neither should yours - it should be constantly reviewed and changed to suit your needs.

Have you found this post useful? Did I miss anything out that you would like to know more about? Please leave a comment and I will be more than happy to get back to you or even add to this post.

Reply via email

Now, this is fairly easy to do using PHP on its own, just using this line of code:

    <?php echo date("Y"); ?>

But, you if allow your CMS users to edit the copyright text, then you can't use PHP in a Perch HTML template.

After reading this article, Passing Variables Into Templates, I created this code snippet that sets a variable with the current year and then I pass this variable to the Perch template.

    <?php
        $curYear = date('Y');
        PerchSystem::set_var('curyear',$curYear);
        perch_content_custom('Footer', array(
            'template'=>'footer.html'
        ));
    ?>

This is the Perch template I use to add the copyright text and year.

    <p class="copyright">©2015 - <perch:content id="curyear" /> <perch:content
    type="text" id="footer-copyright" label="Copyright Text" required="true" /></p>

This may be a bit over the top, I could simply just added the PHP code in the footer template and not allow the user change the copyright text, but my copyright statement is part of a bigger template that needs to be CMS managed.

I hope you found this tip useful. Let me know if you see any way I could improve this code.

How are you setting the copyright year?

Reply via email

In September, a colleague and I got to work on an awesome project - a hi-fidelity prototype proof of concept app for GlobeCast. This was a really quick turnaround project, but I got a chance to implement a basic ServiceWorker script so that the app would work offline. I plan on doing a case study for the GlobeCast work.

Sadly, myself and a few others from the London office were made redundant just before Christmas and now I'm back to working freelance full-time.

Health

Health has not been great and my long train journeys didn't help - it didn't leave me with much time left for doing any sort of exercise. The only exercise I managed was a 30m walk to the office each way, I chose to walk rather than get the tube.

My posture, due to years of bad posture, while working on computers for over 15 years, has had a massive impact on my health. I have started seeing a physio about this and being more aware of my posture.

I did start doing weights, but this kind of fell through, again due to lack of time, so I'm going to be picking this up again, but after the physio says is ok to do this.

I'm going to start regular swimming and running! Swimming will help with my posture and upper body health. Running should help me improve my overall fitness.

Reading

Have read a lot of articles in 2016 due to my long train commutes but I realised I was consuming a lot but wasn't sure how much of it was sticking - a lot of reading and not a lot of practising what I was reading. This is something I want to change this year.

Feeling overwhelmed with all the unread articles, I decided to delete 90% of my unread Instapaper articles and was only left with articles dating back 1 year.

I managed to read more fiction and I want to do a lot more of that next year. I've set a target of 10 books, I only managed to read 4 books in 2016. I'll also be reading a lot more non-fiction, self-help types of books - like Deep Work and more.

Writing

Finally started blogging, even though I only managed a few posts, it's definitely a good start for me, as it's something I've never done, but have always wanted to. I hope to use blogging as a way to remember what I have learnt and read about, and hopefully, others will find it useful.

Numbers

I read a few year in review posts and some had posted number, I liked this idea - so here are some numbers. I'm going to do a better job of collecting this kind of data for next year's review.

• Books read: 4

• Blog posts published: 3

• Coffees: 158

• Conferences attended: 1

• Client projects: 4

• Side projects: 3

• Games played: 2

  • Minecraft
  • Firewatch

• TV Shows watched: 24

  • 11.22.63
  • Agents of Shield
  • Banshee
  • Blindspot
  • Childhood's End
  • Colony
  • Fear the walking dead
  • Humans
  • Mr Robot
  • Outcast
  • Peep Show
  • Plebs
  • Red Dwarf
  • Revenge
  • Slasher
  • The Man in the high castle
  • The Strain
  • The X-Files
  • Undatable
  • Walking Dead
  • Wayward Pines
  • Westworld
  • Zoo
  • ZNation

• Films watched: 6

  • Deadpool
  • Westworld
  • The Secret Life of Pets
  • Arrival
  • Finding Dory
  • The Good Dinosaur
  • Moana

Looking ahead

I have quite a list of things I want to achieve this year - I hope it's not too many things, as we all know if we try to achieve too many things at once, it just sets us up for failure.

I've been thinking of starting a local community for a while, either for web designers or for website owners - so either a meetup for web designers in the area or a Home Brew Computer Club.

Work

Establish my freelance business

Because I was made redundant, I didn't have a plan for going full-time freelance and I am currently looking for work. Depending on whether or not I find a freelance client in the next few weeks, will determine whether or not this year is the year I go full-time freelance. But one thing is for sure, I do not want to go back to working for someone else on a permanent basis. That is just not me. I will be looking at possibly going back into contracting just so I can get some savings in place for being able to go full-time freelance.

Health

Exercise more and eat healthier

I have started the year with a '31 days of yoga' video course, currently at day 9 and oh boy you wouldn't think yoga would be that hard, but when you have spent years sat at the computer with bad posture, you soon discover how inflexible your body has become.

Have started having smoothies for breakfast, again, then just a light snack for lunch.

Something else that I read about that I wanted to try this year - no caffeine or alcohol - yup! In 2016 I cut down the number of coffees I had a day to just 2 max because I started having double espressos, I found that I rarely needed a second one throughout the day. But after reading a post by Tobias van Schneider - No Alcohol, No Coffee for 27 Months {http://www.vanschneider.com/no-alcohol-no-coffee-for-15-months-this-is-what-happened/} - I realised I was having some of the effects of caffeine and had never attributed it to caffeine.

Giving up alcohol for me is just a health thing, I've had way too many beers and my belly is showing that! We'll see how long that lasts, but I'm not hopeful - I have a trip to Madeira in the next few weeks to see my parents, and its tradition to stop off at a bar on the way home from the airport to have a Poncha.

Finally, another new thing for me in 2017 - I have started meditation - it has become really popular over the years and I never thought it as something for me, but after my wife went to a mindfulness meditation course and we spoke about it, I have wanted to try it myself.

Let me know if you have reviewed your year, I'd love to read it. If you want to read a few more year in review posts - check out the Year In Review for Makers website.

Reply via email

An SVG sprite is the new way of doing image sprites, like the old way of doing CSS image sprites - where you would put all your icons on one image files then use CSS to position that image to show the icon you needed, this is essentially the same thing, but instead it's a list of SVG icons that can be used throughout a site.

See this article on CSS Tricks about creating an Icon System with SVG Sprites

Usually, SVG sprites are created by a developer/designer when building a website and then never revisited unless the site has a redesign. The creation of a sprite is likely to be an automated process using a task runner like Grunt or Gulp JS.

But this process does not apply to a site once it's gone live and is managed by a content management system (CMS).

A similar technique inspired me to create this. See Clive Walker's post - Using Perch layouts and managing SVG assets with Perch.

Let's get into the code

To start, you need to create a PHP file which will list all the SVG icons. This PHP file has to be included on all pages - but they will be hidden. This file is not in the root of the site and is not indexed by search engines.

Once you have that setup, you can include the ability to add SVG icons to your templates, and all the user needs to do is insert the ID of that SVG.

Create a PHP file inside the /perch /includes/ - you don't have to create the includes folder, but I like to keep these types of files separate.

I called the page svgs.php but you can name it anything - icons.php may have made more sense.

    <?php include($_SERVER['DOCUMENT_ROOT'].'/cms/runtime.php'); ?>
    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" style="display: none" class="hidden">
        <?php perch_content('svgs'); ?>
    </svg>

In this PHP file, I have a perch_content tag called svgs - again this could be called anything. Make sure you include the runtime.php as per usual and then go to that file on your website: websiteaddress.uk/cms/svgs.php - you can now edit that page via Perch CMS.

You need to create a new template for adding icons to the svgs.php file. Create the template in /templates/content/ and you can call it anything you want; I called mine SVG_icons.html and use the following code:

    <perch:before>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" style="display: none" class="hidden">
    </perch:before>
          <symbol id="svg-<perch:content id="id" type="text" label="ID" requi
          red="true" size="m" />" width="<perch:content id="width" type="text" label="Width" required="true" size="s" />" height="<perch:content id="height" type="text" label="Height" required="true" size="s" />" viewBox="<perch:content id="viewbox" type="text" label="ViewBox" required="true" size="m" help="Format: 0 0 0 0" />">
            <title><perch:content id="title" type="text" label="Title" required="true" title="true" order="1" /></title>
            <perch:content id="text" type="textarea" label="SVG Paths" html="true" editor="markitup" />
          </symbol>
    <perch:after>
        </svg>
    </perch:after>

Now log in to your Perch CMS and go to Pages > svgs, click on the Icons region and select the new template - SVG Icons - make sure you check 'Allow multiple items' so that you can add multiple icons.

You need to include this code on all the pages that you want to be able to use the SVG icons on - I would add it to you header layout - make sure it's placed just after the tag.

    <?php
        perch_content_custom('svgs', array(
            'page'=>'/cms/includes/svgs.php',
            'template'=>'SVG_icons.html'
        ));
    ?>

Let's go back to the SVGs page - Pages > svgs and let's add an icon.

<img src="https://res.cloudinary.com/juanfernandes/q_auto,f_auto//v1579162293/svgs-1.png" alt="Adding an SVG icon">

The SVG_icons.html template gives you the following fields:

• Title - if you are not hiding this icon for visually impaired users, you should give it a title
• ID - this has to be a unique name as it will be used to refer to the icon
• Width and Height
• ViewBox and SVG Paths.

Fill all of these in - you get this information by opening the SVG using your IDE - like Sublime Text.

Save this.

Once saved, that icon should now be in the svgs.php page - but it won't be visible because we are hiding the SVG container.

This is what the output will look like inside the <svg> tag in the svgs.php file:

    <symbol id="svg-html5" width="150px" height="150px" viewBox="0 0 32 32">
        <title>html5 Icon</title>
        <path d="M4.665 3.411l2.063 23.176 9.258 2.574 9.284-2.578 2.065-23.172h-22.671zM8.951 8.911l-0.068-0.763h7.107v2.842h-4.005l0.259 2.911h3.746v2.842h-6.341l-0.698-7.833zM22.518 14.665l-0.667 7.483-0.043 0.48-5.822 1.616-5.814-1.616-0.398-4.463h2.849l0.202 2.267 3.163 0.854 3.165-0.856 0.329-3.686h-3.485v-2.842h6.587l-0.069 0.763zM23.032 8.911l-0.129 1.441-0.057 0.639h-6.846v-2.842h7.1l-0.068 0.762z"></path>
    </symbol>

Include the following code on any template where you want the user to be able to add an SVG icon from the sprite.

    <svg aria-hidden="true">`
        <use xlink:href="#svg-<perch:content type="text" id="skill-icon-id" label="Icon ID" required="true" size="m" help="SVG icon ID name" />" />
    </svg>

By adding the above code in a template, in Perch, you can use an SVG icon from the svgs.php file.

<img src="https://res.cloudinary.com/juanfernandes/q_auto,f_auto//v1579162293/svgs-2.png" alt="Adding an SVG icon to your content">

You should now be able to add your own SVG icons to your SVG sprite via Perch CMS.

This solution is what I am using on my own website and will be using in all future website that I create that use Perch CMS.

What do you think of this solution? Can you see any way this can be improved? I'd love to get some feedback - this is the first time I have shared any code that I have used in Perch.

Reply via email

You don’t have to read every single article in every single newsletter, but what you will find is that some links repeat across newsletters, so you know it's worth reading it then.

Bellow is a list of all the newsletters that I am currently subscribed to. Hopefully, you will find some that you aren't subscribed to yet.

Let me know if there are other great newsletters that I should subscribe to and add to the list - send me a tweet or message.

Newsletters

• CSS Animation Weekly - https://cssanimation.curated.co/
• CSS Layout News - http://csslayout.news/
• CSS Tricks - https://css-tricks.com/
• CSS Weekly - http://css-weekly.com/
• Design Systems - https://designsystems.curated.co/
• Front End Front - https://frontendfront.com/
• From the front - https://frontendfront.com/
• FrontEnd Focus - http://frontendfocus.co/
• Paul Jarvis - https://pjrvs.com/signup/
• Perchology - https://perchology.curated.co/
• Offline FIrst - http://offlinefirst.org/news/
• The Smashing Magazine - https://www.smashingmagazine.com/the-smashing-newsletter/
• Tobias Van Schneider - http://www.vanschneider.com/signup/
• UI Animation Newsletter - http://valhead.com/newsletter/
• UX Booth - http://www.uxbooth.com/subscribe/
• Web Tools Weekly - http://webtoolsweekly.com/
• WebAIM - http://webaim.org/newsletter/

Reply via email

Why Now

Some say that blogging is no longer relevant, but for me, I want to use it to improve my writing and also to document what I learn as a front-end developer, maybe rant and ramble now and again. That’s it, I’m not hoping for hundreds or thousands of readers, I’d be happy with two. :)

What's the plan?

So over the years I have read a lot! A lot of it goes in and doesn’t stick. So my plan is to take something I want to learn about, for example, Flexbox, read about it, play around with it, create some demos and write about what I have learned.

Simple right?

So this year I am going to learn JavaScript. So I will be writing about what I have learned, but I also want to play around with Flexbox, srcset, and loads of other exciting front-end techs. Exciting times ahead.

Reply via email