<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.10.0">Jekyll</generator><link href="https://hmz.ie/feed.xml" rel="self" type="application/atom+xml" /><link href="https://hmz.ie/" rel="alternate" type="text/html" /><updated>2026-10-05T17:01:58+00:00</updated><id>https://hmz.ie/feed.xml</id><title type="html">Housam Ziad</title><subtitle>Educator · Technology Leader · Consultant | Bridging technology, education, design and people.</subtitle><entry><title type="html">What I Built Next — Part 3: Building GrimeCall</title><link href="https://hmz.ie/what-i-built-next-3/" rel="alternate" type="text/html" title="What I Built Next — Part 3: Building GrimeCall" /><published>2026-09-21T00:00:00+00:00</published><updated>2026-09-21T00:00:00+00:00</updated><id>https://hmz.ie/what-i-built-next-3</id><content type="html" xml:base="https://hmz.ie/what-i-built-next-3/"><![CDATA[<p><em>This is Part 3 of <strong>What I Built Next</strong>, a series about the things I’ve been building, learning and experimenting with since leaving Oracle. The shorter versions of these stories are published on LinkedIn under [#WhatIBuiltNext].</em></p>

<h1 id="so-naturally-i-started-a-cleaning-business">So, naturally, I started a cleaning business.</h1>

<p>Because apparently servers weren’t enough.</p>

<p>The idea was fairly simple. I already owned a pressure washer. I enjoy fixing things. I enjoy improving things. And I hate dirt. I also wanted to try building something completely outside my usual world of software and technology.</p>

<p>So I thought: why not? And <strong>GrimeCall</strong> was born.</p>

<p>Except, almost immediately, I realised I wasn’t just enjoying the idea of building a business. I had missed <strong>building brands</strong>.</p>

<hr />

<h2 id="before-software-there-was-design">Before software, there was design</h2>

<p>Software engineering has been the biggest part of my professional identity for quite a long time, but it wasn’t where I started. Design was.</p>

<p>Long before I was worrying about APIs, distributed systems and software architecture, I was designing websites, identities, print materials and digital experiences.</p>

<p>Over the years, software gradually became the dominant part of my career.</p>

<p>I never stopped caring about design, of course. Good software requires good design thinking. But there’s something different about starting with absolutely nothing and asking:</p>

<p><strong>What should this thing be?</strong></p>

<p>GrimeCall gave me that opportunity again. Suddenly, it all came flooding back.</p>

<hr />

<h2 id="first-it-needed-a-name">First, it needed a name</h2>

<p>I didn’t want another generic local cleaning company called something like:</p>

<blockquote>
  <p>Dublin Exterior Cleaning Services.</p>
</blockquote>

<p>Perfectly descriptive. Perfectly forgettable. I wanted something that could have a personality. Eventually I landed on <strong>GrimeCall</strong>. It’s a deliberately ridiculous play on <strong>CrimeCall</strong>, the long-running Irish television programme about fighting crime.</p>

<p>Except instead of fighting crime… We’re fighting grime. Yes, it’s a terrible pun. That’s precisely why I liked it.</p>

<p>It immediately gave the business a personality and, more importantly, gave me something I could build around.</p>

<p>Once the name existed, the rest of the brand started taking shape.</p>

<hr />

<h2 id="a-logo-isnt-a-brand">A logo isn’t a brand</h2>

<p>Then came the obvious design work:</p>

<ul>
  <li>the logo</li>
  <li>colours</li>
  <li>typography</li>
  <li>visual language</li>
  <li>website</li>
  <li>imagery</li>
  <li>tone of voice</li>
</ul>

<p>But those are only the visible parts.</p>

<p>One of the things GrimeCall reminded me is that <strong>a brand isn’t a logo</strong>.</p>

<p>A brand is the collection of tiny decisions that eventually makes a business feel like one coherent thing.</p>

<p>How does someone discover the company?</p>

<p>What do they see first?</p>

<p>How do we describe the services?</p>

<p>How easy is it to request a quote?</p>

<p>What happens after they make contact?</p>

<p>What does the person arriving at their house look like?</p>

<p>What equipment do they bring?</p>

<p>How do we communicate?</p>

<p>What happens if something goes wrong?</p>

<p>What does the customer remember afterwards?</p>

<p>Those questions are design questions too.</p>

<hr />

<h2 id="designing-the-experience">Designing the experience</h2>

<p>This was probably the part I enjoyed most. I wasn’t designing a logo for a cleaning company. I was designing <strong>how the company should feel</strong>.</p>

<p>Friendly, local and approachable, but still professional. Memorable without becoming silly. Simple enough that someone can immediately understand what we do. And with enough personality that it doesn’t look like every other service business website.</p>

<p>One of my favourite details is on the GrimeCall website. In the hero section, there’s a file with a coffee-ring stain on it. The pressure washer cleans the coffee ring away. It’s completely unnecessary. I love it.</p>

<p>Those tiny details are the difference between creating something functional and creating something that feels like it belongs to a particular brand.</p>

<p>You can see it at: <strong>https://www.grimecall.com</strong></p>

<hr />

<h2 id="then-i-started-thinking-like-a-software-engineer">Then I started thinking like a software engineer</h2>

<p>This is where my different worlds started colliding.</p>

<p>Once I’d thought about the visual identity and customer experience, my engineering brain started asking what happens if this actually works.</p>

<p>How should jobs be organised?</p>

<p>How should quotes work?</p>

<p>What information should be collected from customers?</p>

<p>Could parts of the process be automated?</p>

<p>How should equipment be tracked?</p>

<p>What checklists should exist?</p>

<p>What happens when another person joins the business?</p>

<p>How do you make sure a customer receives the same standard of service regardless of who performs the job?</p>

<p>Suddenly I wasn’t thinking about cleaning driveways.</p>

<p>I was thinking about <strong>systems</strong>.</p>

<p>That’s when I realised that my apparently unrelated experience in design, software, business and management wasn’t unrelated at all.</p>

<p>They were simply different tools for solving different parts of the same problem.</p>

<hr />

<h2 id="reality-gets-a-vote">Reality gets a vote</h2>

<p>And then reality intervened.</p>

<p>Ireland experienced drought conditions, followed by water restrictions.</p>

<p>Not ideal timing for a business whose principal piece of equipment shoots water at things.</p>

<p>I could have looked at all the work I’d already done — the brand, website, planning, equipment and processes — and considered it wasted.</p>

<p>I don’t.</p>

<p>Because building something doesn’t guarantee that the environment will cooperate with your plan.</p>

<p>Products encounter markets.</p>

<p>Software encounters users.</p>

<p>Businesses encounter regulations, competitors, economics and, apparently, the weather.</p>

<p><strong>Reality gets a vote.</strong></p>

<p>So the plan changed.</p>

<hr />

<h2 id="changing-the-plan-isnt-failure">Changing the plan isn’t failure</h2>

<p>This may be one of the more useful lessons I’ve taken from the whole experiment.</p>

<p>Building doesn’t mean stubbornly following your original plan.</p>

<p>Sometimes the assumptions that made perfect sense when you started simply aren’t true anymore.</p>

<p>You can ignore that and continue because you’ve already invested time and money.</p>

<p>Or you can recognise that something has changed and adapt.</p>

<p>The interesting question becomes:</p>

<p><strong>What parts of what I’ve built are still valuable?</strong></p>

<p>The equipment still exists.</p>

<p>The brand still exists.</p>

<p>The website still exists.</p>

<p>The processes and ideas still exist.</p>

<p>And the skills I refreshed while building all of it certainly still exist.</p>

<p>GrimeCall may evolve into something slightly different from what I originally imagined.</p>

<p>That’s fine.</p>

<p>It’s still being built.</p>

<hr />

<h2 id="the-thing-i-rediscovered">The thing I rediscovered</h2>

<p>The biggest outcome from GrimeCall wasn’t actually anything to do with pressure washing.</p>

<p>It reminded me how much I enjoy starting with <strong>nothing but an idea</strong>.</p>

<p>Giving it a name.</p>

<p>Giving it an identity.</p>

<p>Thinking about the people who will use it.</p>

<p>Designing how it works.</p>

<p>Building the systems behind it.</p>

<p>Finding the problems.</p>

<p>Changing things.</p>

<p>Trying again.</p>

<p>For years, software engineering was the dominant way I did that.</p>

<p>GrimeCall reminded me that it isn’t the only way.</p>

<p><strong>Software wasn’t the beginning of my career.</strong></p>

<p><strong>Design was.</strong></p>

<p>It was rather nice to meet that part of myself again.</p>

<hr />

<h2 id="the-pattern-continues">The pattern continues</h2>

<p>When I started this series, I described the pattern I seem to keep following:</p>

<blockquote>
  <p><strong>See something that could be better → understand the problem → design a solution → learn whatever is missing → build it → iterate.</strong></p>
</blockquote>

<p>The homelab followed that pattern.</p>

<p>GrimeCall followed it too.</p>

<p>And, as it turns out, so did the next project.</p>

<p>Except this time there were no servers, containers or pressure washers involved.</p>

<p>There was a balcony.</p>

<p>And I had opinions about it.</p>

<p><strong>Next: What I Built Next — Part 4: The Balcony.</strong></p>

<p>[#WhatIBuiltNext]</p>]]></content><author><name></name></author><category term="What I Built Next" /><category term="personal" /><category term="business" /><category term="design" /><category term="branding" /><category term="development" /><summary type="html"><![CDATA[This is Part 3 of What I Built Next, a series about the things I’ve been building, learning and experimenting with since leaving Oracle. The shorter versions of these stories are published on LinkedIn under [#WhatIBuiltNext].]]></summary></entry><entry><title type="html">What I Built Next — Part 2 | The Homelab Rabbit Hole</title><link href="https://hmz.ie/what-i-built-next-2/" rel="alternate" type="text/html" title="What I Built Next — Part 2 | The Homelab Rabbit Hole" /><published>2026-09-16T00:00:00+00:00</published><updated>2026-09-16T00:00:00+00:00</updated><id>https://hmz.ie/what-i-built-next-2</id><content type="html" xml:base="https://hmz.ie/what-i-built-next-2/"><![CDATA[<p><strong>It started with a weird little computer in a thrift shop.</strong> I didn’t need it. Which, as anyone who likes computers knows, is rarely a good enough reason not to buy one. It was a tiny ARM-based computer called a <strong>Firefly Station P1 Pro</strong>. I’d never seen one before, it was cheap, still new in the box, and naturally I thought:</p>

<p><em>“I wonder what I can do with this?”</em></p>

<p>That question turned out to be expensive. Not necessarily in money. Most of my homelab has been built from old, second-hand or repurposed hardware. It was expensive in time. And sleep. And occasionally sanity.</p>

<p><img src="https://www.hmz.ie/images/media/2026/rack.jpg" alt="Rack" /></p>

<h2 id="the-little-arm-machine-that-started-everything">The little ARM machine that started everything</h2>

<p>The Station P1 Pro became my first proper homelab machine.</p>

<p>It is based on an ARM64 architecture, with Gigabit Ethernet and support for M.2 NVMe storage. Mine was running Ubuntu, and compared with the servers people normally show off in homelab communities, it was hardly intimidating.</p>

<p>That was part of the appeal. I wasn’t trying to build a data centre. I wanted to see how much useful infrastructure I could squeeze out of a small computer that had essentially been abandoned in a thrift shop. So I installed Docker. And that was the beginning of the problem. Because once you successfully self-host one application, you immediately discover another application you could self-host. Then another.</p>

<p>Then you start thinking: <em>“Why am I using that cloud service at all?”</em></p>

<h2 id="docker-all-the-things">Docker all the things</h2>

<p>Docker became the foundation of the lab. Instead of installing applications directly onto the operating system, I could run services in containers, experiment with them, break them, delete them and start again without completely destroying the host machine. At least, that was the theory. Over time, the little Firefly started running an increasingly ridiculous collection of services.</p>

<p>There was <strong>AdGuard Home</strong> for network-wide DNS filtering.</p>

<p><strong>Vaultwarden</strong> gave me a self-hosted Bitwarden-compatible password vault.</p>

<p><strong>Paperless-ngx</strong> became a place for scanning, organising and searching documents.</p>

<p><strong>Memos</strong> provided a lightweight personal notes system.</p>

<p><strong>code-server</strong> gave me VS Code through a browser.</p>

<p><strong>Portainer</strong> helped manage the growing collection of Docker containers.</p>

<p><strong>Homepage</strong> eventually became the dashboard tying everything together.</p>

<p>Then came media services, MQTT, Home Assistant integrations and various experiments that survived anywhere from several months to approximately eleven minutes. The Firefly had stopped being a weird little computer. It had become infrastructure.</p>

<h2 id="then-came-dns">Then came DNS</h2>

<p>Typing IP addresses and port numbers gets old remarkably quickly.</p>

<p>Something like: <code class="language-plaintext highlighter-rouge">192.168.x.x:8088</code> might be perfectly functional, but it doesn’t exactly feel like your own private cloud.</p>

<p>So I started using <strong>AdGuard Home</strong> for local DNS. Instead of remembering addresses, I could create names such as:</p>

<p><code class="language-plaintext highlighter-rouge">vault.home.lan</code></p>

<p><code class="language-plaintext highlighter-rouge">home.home.lan</code></p>

<p><code class="language-plaintext highlighter-rouge">music.home.lan</code></p>

<p><code class="language-plaintext highlighter-rouge">ha.home.lan</code></p>

<p>Now the services started to feel like part of an actual environment rather than a collection of containers scattered around the network. This also introduced me to an important principle of homelabbing: <strong>Every problem you solve unlocks a more complicated problem.</strong></p>

<p>Because now that I had nice domain names, obviously I needed HTTPS.</p>

<h2 id="enter-traefik">Enter Traefik</h2>

<p>I added <strong>Traefik</strong> as a reverse proxy. Instead of exposing a different port for every service, Traefik could receive requests and route them to the correct application based on the hostname.</p>

<p>A request for: <code class="language-plaintext highlighter-rouge">vault.home.lan</code> could go to Vaultwarden. A request for: <code class="language-plaintext highlighter-rouge">music.home.lan</code> could go to the music server. And so on.</p>

<p>Conceptually, it was beautiful. DNS knew where things lived. Traefik knew which application should receive the request. Docker ran the applications. For a brief moment, I felt like I knew what I was doing. Then I decided everything should have HTTPS.</p>

<h2 id="certificates-where-confidence-goes-to-die">Certificates: where confidence goes to die</h2>

<p>Public websites have a relatively straightforward certificate story. Private domains are different. My <code class="language-plaintext highlighter-rouge">.home.lan</code> domains only existed inside my network, so a public certificate authority couldn’t simply validate them. I experimented with locally generated certificates and trusted certificate authorities. This worked surprisingly well — until it didn’t.</p>

<p>A laptop might trust the certificate. A phone might not. A browser might be perfectly happy while an app complained. Vaultwarden was particularly useful for discovering just how many different ways TLS could ruin an otherwise pleasant evening. It was also a useful lesson. Security isn’t just about enabling HTTPS. Certificate trust, DNS, application behaviour, operating systems and network boundaries all interact.</p>

<p>The green padlock is the end result of quite a lot happening underneath.</p>

<h2 id="home-assistant-joins-the-party">Home Assistant joins the party</h2>

<p>At some point, the homelab also became connected to the house. I had already been experimenting with smart-home devices, so <strong>Home Assistant</strong> naturally became part of the infrastructure. Lights, cameras, televisions, thermostats, locks, sensors and other devices gradually started talking to one system. This is where the project changed for me. The homelab wasn’t just hosting applications any more. It was interacting with the physical environment. And because I prefer local control wherever practical, self-hosting Home Assistant made much more sense to me than building a house entirely dependent on somebody else’s cloud staying available.</p>

<p>Home Assistant has moved around the lab during its lifetime, including experiments with virtualisation, before eventually returning to dedicated Raspberry Pi hardware.</p>

<p>That sentence makes the process sound considerably more deliberate than it actually was.</p>

<h2 id="the-firefly-starts-running-out-of-fire">The Firefly starts running out of fire</h2>

<p>Eventually I reached the obvious limitation. The Station P1 Pro was never designed to become my personal cloud platform. ARM64 also occasionally made life interesting because not every container, package or random project on GitHub supported the architecture equally well.</p>

<p>More importantly, I wanted somewhere safer to experiment with virtual machines and infrastructure without putting everything on one little Ubuntu installation. So another second-hand machine entered the story: a <strong>Lenovo ThinkCentre M73 Tiny</strong>. It has an Intel Core i5-4570T, 8 GB of RAM and a 240 GB SSD. Again, nothing spectacular. And that is precisely what I like about it.</p>

<h2 id="one-plug-to-power-them-all">One plug to power them all</h2>

<p>As the homelab grew, I discovered another problem that had nothing to do with Docker, networking or Linux.
<strong>Power adapters.</strong></p>

<p>Every little device came with its own power brick. Before long, I had five different adapters occupying sockets, creating cable clutter and generally making my supposedly neat little homelab look like something I’d assembled behind a television in 2004.
This annoyed me far more than it probably should have.</p>

<p>So I started looking at the actual power requirements of each device and realised I didn’t necessarily need five separate power supplies. What I needed was one sufficiently capable USB-C power supply and the right cables.</p>

<p>Some of the machines weren’t designed for USB-C power at all, so I used USB-C Power Delivery trigger cables that negotiate the required voltage from the charger and present it through the connector the device expects. An example of the cable can be found by <a href="https://temu.to/k/e7kpxebmch4">clicking here</a>.</p>

<p>Eventually, five power adapters became one power supply and a handful of USB-C cables.</p>

<p>I was ridiculously proud of this. Not installing Proxmox. Not configuring Docker. Not getting DNS, Traefik and HTTPS talking nicely to each other. <strong>The cables.</strong></p>

<p>There is something deeply satisfying about looking behind a collection of computers and seeing one power supply where there used to be five chunky adapters fighting for space.
It also became another small example of what I enjoy about the homelab: the solution didn’t require buying newer computers. It required understanding what the hardware actually needed and finding a cleaner way to provide it.
And, perhaps most importantly, I can now look behind the desk without becoming annoyed.</p>

<h2 id="proxmox-changes-the-architecture">Proxmox changes the architecture</h2>

<p>I installed <strong>Proxmox</strong> on the ThinkCentre. This was probably the point where my collection of self-hosted applications officially became a homelab. Instead of thinking purely in terms of: <strong>machine → Docker → containers</strong></p>

<p>I could think in layers: <strong>physical hardware → hypervisor → virtual machines → Docker → applications</strong></p>

<p>Docker services could live inside their own VM. Infrastructure could be separated. Machines could be rebuilt without necessarily rebuilding everything else. Experiments became easier. Mistakes became slightly less terrifying.</p>

<p>The M73 gradually took over responsibilities from the Firefly, particularly the services that made more sense on x86 hardware. I also standardised the Docker applications under directories such as: <code class="language-plaintext highlighter-rouge">/opt/docker/vaultwarden</code></p>

<p>That sounds like an insignificant detail. After you’ve accumulated enough containers, configuration files, volumes and experiments, it absolutely isn’t.</p>

<p>Organisation becomes infrastructure too.</p>

<h2 id="remote-access-without-opening-the-front-door">Remote access without opening the front door</h2>

<p>The next problem was accessing everything when I wasn’t at home. The obvious traditional answer would have been port forwarding. I didn’t particularly like that answer. I wanted remote access without publicly exposing my internal services. So I started using <strong>Tailscale</strong>.</p>

<p>Tailscale creates a private network between authorised devices using WireGuard underneath. My laptop, phone and homelab machines can effectively behave as though they are on the same private network even when I’m away from home.</p>

<p>This solved several problems at once. I could remotely administer the lab. I could access internal applications. I could use a machine at home as an exit node when I wanted my traffic to leave through my home connection.</p>

<p>More recently, <strong>Tailscale Serve</strong> also gave me a much cleaner answer to some of my HTTPS problems. For example, Vaultwarden could be available through a private Tailscale HTTPS address with a valid certificate, without exposing it to the public Internet. After spending far too much time fighting private certificates, this felt almost suspiciously easy.</p>

<p><em>Apparently, now I can take a Raspberry Pi when traveling, the PI automatically connects to my home through Tailscale when booted, and it serves as my Travel Wireless Router. I am always surfing the web from inside my house!</em></p>

<h2 id="storage-becomes-another-rabbit-hole">Storage becomes another rabbit hole</h2>

<p>Applications inevitably create data. And media creates lots of it. I added external storage and started experimenting with a self-hosted music setup using tools including <strong>Navidrome</strong> and <strong>Lidarr</strong>.</p>

<p>Then one of the drives started producing read-only behaviour and I/O errors. Because apparently my homelab believed I hadn’t learned enough about storage yet. That experience pushed storage higher up my priority list and started another round of research into NAS systems, redundancy, backups and where data should actually live. This is the point where you discover that RAID isn’t a backup. Then you discover that knowing RAID isn’t a backup doesn’t magically mean you have a good backup strategy. There is always another rabbit hole.</p>

<h2 id="what-the-architecture-looks-like-now">What the architecture looks like now</h2>

<p>The original Firefly hasn’t disappeared, but the architecture has evolved considerably.</p>

<p>The ThinkCentre M73 runs Proxmox and provides the main virtualisation environment.</p>

<p>A Docker VM hosts many of the containerised services.</p>

<p>Traefik handles routing for internal web applications.</p>

<p>AdGuard Home provides DNS and local hostname resolution.</p>

<p>Tailscale provides private remote connectivity.</p>

<p>Home Assistant has returned to dedicated Raspberry Pi hardware.</p>

<p>External storage currently handles media while I work towards a more permanent NAS setup.</p>

<p>And spread across all of this are applications such as Vaultwarden, Paperless-ngx, Memos, Homepage, Navidrome, code-server, Portainer and whatever I happen to be experimenting with that week. None of this was designed upfront. It evolved. That might actually be the most important part of the project.</p>

<h2 id="i-broke-a-lot-of-things">I broke a lot of things</h2>

<p>The neat architecture diagram is always the final version.</p>

<p>It doesn’t show the hours spent wondering why one computer resolves a hostname while another doesn’t.</p>

<p>It doesn’t show certificates that work in the browser but fail in an app.</p>

<p>It doesn’t show containers that have perfectly good Docker images — just not for ARM64.</p>

<p>It doesn’t show drives suddenly becoming read-only.</p>

<p>It doesn’t show services being moved from one machine to another because the original architecture stopped making sense.</p>

<p>And it definitely doesn’t show the moment when you realise the problem you’ve spent an hour debugging is caused by a typo.</p>

<p>But that’s where most of the learning happened.</p>

<h2 id="the-cheapest-laboratory-ive-ever-owned">The cheapest laboratory I’ve ever owned</h2>

<p>Professionally, I’ve worked with software and systems considerably larger than anything sitting in my house. But there’s something different about building your own infrastructure. There is no infrastructure team. No network team. No security team. No storage team. No person to raise a ticket with. DNS isn’t working? Congratulations. You’re the DNS team. Docker won’t start? You’re DevOps. The certificate expired? Security team. The disk is making concerning noises? Storage team. Home Assistant can’t see the television? Apparently you’re also consumer electronics support. A homelab forces you to cross boundaries that are normally separated into different roles. Networking leads to DNS. DNS leads to reverse proxies. Reverse proxies lead to TLS. Containers lead to storage. Storage leads to backups. Remote access leads to security.</p>

<p>And eventually you realise that the weird little computer from the thrift shop has become an excuse to understand how all those pieces fit together.</p>

<h2 id="and-im-still-building-it">And I’m still building it</h2>

<p>The lab isn’t finished.</p>

<p>I’m not sure a homelab can actually be finished.</p>

<p>I still want better storage.</p>

<p>I want cleaner separation between infrastructure and applications.</p>

<p>There are services I want to move, replace or remove entirely.</p>

<p>There are probably several architectural decisions I’m currently very pleased with that Future Me will consider completely ridiculous.</p>

<p>That’s fine.</p>

<p>The point was never to build the perfect server.</p>

<p>It was to experiment.</p>

<p>To reuse hardware.</p>

<p>To understand the systems underneath the services we normally take for granted.</p>

<p>And, occasionally, to spend six hours automating something that would have taken thirty seconds to do manually.</p>

<p>All because I walked into a thrift shop, saw a strange little computer and asked:</p>

<p><strong>“I wonder what I can do with this?”</strong></p>

<p>Quite a lot, apparently.</p>]]></content><author><name></name></author><category term="What I Built Next" /><category term="personal" /><category term="business" /><category term="development" /><summary type="html"><![CDATA[It started with a weird little computer in a thrift shop. I didn’t need it. Which, as anyone who likes computers knows, is rarely a good enough reason not to buy one. It was a tiny ARM-based computer called a Firefly Station P1 Pro. I’d never seen one before, it was cheap, still new in the box, and naturally I thought:]]></summary></entry><entry><title type="html">What I Built Next — Part 1</title><link href="https://hmz.ie/what-i-built-next-1/" rel="alternate" type="text/html" title="What I Built Next — Part 1" /><published>2026-09-13T00:00:00+00:00</published><updated>2026-09-13T00:00:00+00:00</updated><id>https://hmz.ie/what-i-built-next-1</id><content type="html" xml:base="https://hmz.ie/what-i-built-next-1/"><![CDATA[<h2 id="apparently-i-still-build-things">Apparently, I Still Build Things</h2>

<p><strong>What I Built Next</strong> is a series I started on LinkedIn about the things I’ve been building outside my day-to-day work — personal projects, experiments, old hardware given new jobs, and ideas that got slightly out of hand.</p>

<p>The shorter versions of these stories are published as <a href="https://www.linkedin.com/in/housamz">posts on my LinkedIn profile</a>. Here on my website, I’m giving them a little more room: more of the story, more technical detail, more of what went wrong, and some of the decisions and lessons that didn’t fit comfortably into a LinkedIn post.</p>

<p>If you’d rather follow the series in smaller doses, you can <a href="https://www.linkedin.com/in/housamz">follow me on LinkedIn</a>. If you’re here because one of those posts sent you down the rabbit hole, welcome — this is the longer version.</p>

<p>For most of my career, building things was my job. Websites. Software. Interfaces. Internal tools. Research projects. Design systems. Things for clients. Things for companies. Things that had requirements, deadlines, tickets, meetings and, inevitably, meetings about the meetings. Then something changed.</p>

<p>I stopped building things because somebody asked me to. And started building things because I was curious again. That distinction turned out to matter more than I expected.</p>

<h2 id="going-back-to-where-i-started">Going back to where I started</h2>

<p>I’ve been making things with computers for most of my life. My first computer was a Sakhr MSX in 1989. I discovered BASIC and the wonderful idea that you could type instructions into a machine and make it do something that hadn’t existed a few minutes earlier.</p>

<p>That feeling never really went away. The tools just became more complicated. BASIC became HTML and CSS, then JavaScript.
Then, as any developer, databases, APIs, frameworks, cloud infrastructure, containers and all the other layers we’ve managed to place between an idea and the computer actually doing something.</p>

<p>Along the way, building things became a profession. I worked in graphic design, web design, software development, research and engineering. I built websites and applications for businesses. I worked on research platforms. Eventually, I worked on large enterprise systems with hundreds of engineers involved.</p>

<p>The projects became bigger. The technology became more sophisticated. But something else happened too.</p>

<p>The distance between <strong>having an idea</strong> and <strong>making the idea exist</strong> became larger.</p>

<h2 id="professional-software-is-supposed-to-work">Professional software is supposed to work</h2>

<p>This is, obviously, a good thing. When people depend on software, experimentation has consequences. There are requirements. Architecture discussions. Code reviews. Accessibility requirements. Security reviews. Testing. Deployment pipelines. Documentation.
Release schedules. Stakeholders. And Jira. Always Jira.</p>

<p>You can’t generally walk into work on Monday morning and announce: <em>“I found something interesting on GitHub at 2 a.m., so I’ve replaced half the infrastructure.”</em></p>

<p>Apparently this is considered poor change management.
But that slightly irresponsible curiosity is also how many of us learned technology in the first place. We took things apart. We installed software we didn’t understand. We broke operating systems. We opened devices that probably weren’t designed to be opened. And occasionally we fixed them again. I realised I missed that.</p>

<h2 id="so-i-started-building-things-for-no-particularly-good-reason">So I started building things for no particularly good reason</h2>

<p>Not products. Not startups. Not things accompanied by a pitch deck explaining the total addressable market. Just things I wanted to exist. Sometimes because I had a problem. Sometimes because I wanted to learn a technology. Sometimes because an existing solution annoyed me. And sometimes for the worst possible reason: <strong>because I wondered whether I could.</strong></p>

<p>That last category is dangerous. It is responsible for an unreasonable percentage of the projects in my house.</p>

<h2 id="the-joy-of-unnecessary-engineering">The joy of unnecessary engineering</h2>

<p>There is something wonderfully liberating about building something that doesn’t need to become a product. It doesn’t need investors. It doesn’t need thousands of users. It doesn’t even need to make sense to anybody except me. If I want to spend an evening creating a service that saves me thirty seconds a week, the business case is irrelevant. If I want to take an old computer and turn it into a server instead of buying a new device, nobody is calculating my engineering cost against the price of the hardware. If I want to connect two systems simply because I want to understand how they communicate, that’s enough. Of course, there’s an irony here. These supposedly pointless projects have taught me an enormous amount.</p>

<h2 id="building-became-learning-again">Building became learning again</h2>

<p>When you’re working inside a large technology organisation, your world can become surprisingly specialised. You may be working on an incredibly complicated system while interacting with only a small part of it. Personal projects remove those boundaries. Suddenly you’re responsible for everything. The interface. The backend. The database. The network. The deployment. The security. The documentation. And the confused user wondering why the application doesn’t work. Unfortunately, the confused user is also you. That makes personal projects excellent teachers. They expose the gaps between the things you know professionally. And because nobody is waiting for a sprint review, you can follow those gaps wherever they lead. One evening of curiosity can turn into three weeks of learning about something you had absolutely no intention of studying. I’ve discovered that I rather enjoy that.</p>

<h2 id="then-teaching-changed-how-i-built-things">Then teaching changed how I built things</h2>

<p>Teaching software development added another dimension. When you have to explain something, <em>“I know how to do this”</em> isn’t enough. You need to understand why it works. You need to anticipate where someone will get confused. You need to break complicated systems into understandable pieces without pretending they’re simpler than they really are. That changed how I approached my own projects. I started documenting more. I started questioning decisions I’d previously made automatically. Why this framework? Why this architecture? Why am I adding another dependency? Could I explain this to someone who hasn’t spent years staring at code? Sometimes the answer was uncomfortable. <em>“Because everyone else does it”</em> isn’t a particularly satisfying technical explanation. Neither is: <em>“I copied it from Stack Overflow eight years ago and it has worked ever since.”</em></p>

<p>Teaching made me curious about technology again in a different way.</p>

<h2 id="old-hardware-is-particularly-dangerous">Old hardware is particularly dangerous</h2>

<p>I also have a weakness for old electronics. I dislike throwing away technology that still has some useful life in it. A computer doesn’t become useless simply because it can no longer run the latest fashionable workload. Sometimes it just needs a different job. An old PC can become a server. A Raspberry Pi can become part of a smart home. A forgotten drive can become storage. A strange little device from a thrift shop can become… Well. That one deserves its own story. Because one day I walked into a thrift shop and found a small ARM-based computer called a <strong>Firefly Station P1 Pro</strong>. It was new in the box. It was cheap. I had never seen one before. I absolutely did not need it. So naturally, I bought it. I took it home, looked at it and asked the question that has caused me an extraordinary amount of trouble over the years: <strong>“I wonder what I can do with this?”</strong> That question became a homelab. But that’s Part 2.</p>

<h2 id="what-i-built-next">What I Built Next</h2>

<p>That’s what this series is about. Not tutorials, exactly. Not a portfolio either. It’s the story of the things I’ve been building, fixing, breaking, redesigning and occasionally finishing. Some are software projects. Some involve hardware. Some solve genuine problems. Others exist largely because my brain refused to leave an idea alone. I’ll explain what I built, but also why I built it, what went wrong and what I learned along the way. Because after years of building technology professionally, I’ve rediscovered something I knew when I first sat in front of a computer as a child:</p>

<p><strong>The best way for me to understand something is still to build it.</strong></p>

<p>And occasionally break it. Then build it again.</p>]]></content><author><name></name></author><category term="What I Built Next" /><category term="personal" /><category term="business" /><category term="development" /><summary type="html"><![CDATA[Apparently, I Still Build Things]]></summary></entry><entry><title type="html">Exploring Essential JavaScript Concepts</title><link href="https://hmz.ie/exploring-essential-javascript-concepts/" rel="alternate" type="text/html" title="Exploring Essential JavaScript Concepts" /><published>2024-07-02T00:00:00+00:00</published><updated>2024-07-02T00:00:00+00:00</updated><id>https://hmz.ie/exploring-essential-javascript-concepts</id><content type="html" xml:base="https://hmz.ie/exploring-essential-javascript-concepts/"><![CDATA[<p>JavaScript is a versatile and powerful programming language that’s essential for web development. Whether you’re building simple web pages or complex applications, understanding core JavaScript concepts can significantly improve your coding efficiency and effectiveness. This blog post will delve into some fundamental JavaScript concepts with detailed explanations and examples.</p>

<h2 id="1-event-loop">1. Event Loop</h2>

<p>The event loop is a crucial concept for understanding how JavaScript handles asynchronous operations. JavaScript is single-threaded, meaning it can execute one piece of code at a time. The event loop allows JavaScript to perform non-blocking operations by offloading tasks to the web APIs and bringing them back to the main thread when they are ready.</p>

<h3 id="example">Example:</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">start</span><span class="dl">'</span><span class="p">);</span>

<span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">middle</span><span class="dl">'</span><span class="p">);</span>
<span class="p">},</span> <span class="mi">2000</span><span class="p">);</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">end</span><span class="dl">'</span><span class="p">);</span>
</code></pre></div></div>

<p><strong>Output:</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>start
end
middle
</code></pre></div></div>

<p>In this example, <code class="language-plaintext highlighter-rouge">setTimeout</code> moves the callback to the web API, which pushes it to the callback queue after 2000ms. The event loop then moves it to the call stack once the main script execution is completed.</p>

<h2 id="2-const-var--let">2. Const, Var &amp; Let</h2>

<p>JavaScript provides three ways to declare variables: <code class="language-plaintext highlighter-rouge">var</code>, <code class="language-plaintext highlighter-rouge">let</code>, and <code class="language-plaintext highlighter-rouge">const</code>.</p>

<ul>
  <li><strong>Var:</strong> Function-scoped or globally scoped if declared outside a function.</li>
  <li><strong>Let:</strong> Block-scoped, allowing you to restrict variables to the block where they are declared.</li>
  <li><strong>Const:</strong> Block-scoped and must be initialized during declaration; it cannot be reassigned.</li>
</ul>

<h3 id="example-1">Example:</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">John</span><span class="dl">"</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">name</span><span class="p">);</span> <span class="c1">// John</span>

<span class="kd">let</span> <span class="nx">age</span> <span class="o">=</span> <span class="mi">25</span><span class="p">;</span>
<span class="nx">age</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">age</span><span class="p">);</span> <span class="c1">// 30</span>

<span class="kd">const</span> <span class="nx">PI</span> <span class="o">=</span> <span class="mf">3.14</span><span class="p">;</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">PI</span><span class="p">);</span> <span class="c1">// 3.14</span>
</code></pre></div></div>

<h2 id="3-functions--scope">3. Functions &amp; Scope</h2>

<p>Functions in JavaScript are first-class citizens, meaning they can be assigned to variables, passed as arguments, and returned from other functions. The scope determines the accessibility of variables within a function or block.</p>

<h3 id="example-2">Example:</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span>
  <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">const</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">x</span> <span class="o">*</span> <span class="nx">y</span><span class="p">;</span>
  <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">}</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">));</span> <span class="c1">// 5</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">multiply</span><span class="p">(</span><span class="mi">4</span><span class="p">));</span> <span class="c1">// 20</span>
</code></pre></div></div>

<h2 id="4-hoisting">4. Hoisting</h2>

<p>Hoisting is JavaScript’s default behavior of moving declarations to the top of the current scope. It applies to both variable and function declarations.</p>

<h3 id="example-3">Example:</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span> <span class="c1">// undefined</span>
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>
</code></pre></div></div>

<p>In this example, the declaration <code class="language-plaintext highlighter-rouge">var x</code> is hoisted to the top, but the initialization (<code class="language-plaintext highlighter-rouge">x = 5</code>) is not, leading to <code class="language-plaintext highlighter-rouge">undefined</code>.</p>

<h2 id="5-closures">5. Closures</h2>

<p>Closures allow a function to access variables from its outer scope even after the outer function has executed. This is possible because functions retain access to the scope in which they were created.</p>

<h3 id="example-4">Example:</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">outerFunction</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">const</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
  <span class="kd">function</span> <span class="nx">innerFunction</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span>
  <span class="p">}</span>
  <span class="k">return</span> <span class="nx">innerFunction</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">const</span> <span class="nx">newFunction</span> <span class="o">=</span> <span class="nx">outerFunction</span><span class="p">();</span>
<span class="nx">newFunction</span><span class="p">();</span> <span class="c1">// 10</span>
</code></pre></div></div>

<h2 id="6-objects--methods">6. Objects &amp; Methods</h2>

<p>Objects in JavaScript are collections of key-value pairs. Methods are functions defined within an object that can access and manipulate the object’s properties.</p>

<h3 id="example-5">Example:</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
  <span class="na">firstName</span><span class="p">:</span> <span class="dl">"</span><span class="s2">John</span><span class="dl">"</span><span class="p">,</span>
  <span class="na">lastName</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Doe</span><span class="dl">"</span><span class="p">,</span>
  <span class="na">fullName</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">firstName</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">lastName</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">};</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">firstName</span><span class="p">);</span> <span class="c1">// John</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">fullName</span><span class="p">());</span> <span class="c1">// John Doe</span>
</code></pre></div></div>

<h2 id="7-this">7. ‘This’</h2>

<p>The <code class="language-plaintext highlighter-rouge">this</code> keyword refers to the object that is executing the current function. Its value depends on how the function is called.</p>

<h3 id="example-6">Example:</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span>
  <span class="na">firstName</span><span class="p">:</span> <span class="dl">"</span><span class="s2">John</span><span class="dl">"</span><span class="p">,</span>
  <span class="na">lastName</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Doe</span><span class="dl">"</span><span class="p">,</span>
  <span class="na">fullName</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">firstName</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">lastName</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">};</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">person</span><span class="p">.</span><span class="nx">fullName</span><span class="p">());</span> <span class="c1">// John Doe</span>
</code></pre></div></div>

<h2 id="8-arrays">8. Arrays</h2>

<p>Arrays are ordered collections of values. JavaScript provides various methods to manipulate arrays.</p>

<h3 id="example-7">Example:</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">numbers</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span> <span class="c1">// 1</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">numbers</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="c1">// 5</span>
</code></pre></div></div>

<h2 id="9-map-reduce--filter">9. Map, Reduce &amp; Filter</h2>

<p>These array methods are powerful tools for transforming and reducing arrays.</p>

<ul>
  <li><strong>Map:</strong> Creates a new array by applying a function to each element.</li>
  <li><strong>Reduce:</strong> Reduces the array to a single value by applying a function.</li>
  <li><strong>Filter:</strong> Creates a new array with elements that pass a test.</li>
</ul>

<h3 id="example-8">Example:</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">];</span>

<span class="kd">const</span> <span class="nx">squares</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">x</span> <span class="o">=&gt;</span> <span class="nx">x</span> <span class="o">*</span> <span class="nx">x</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">squares</span><span class="p">);</span> <span class="c1">// [1, 4, 9, 16, 25]</span>

<span class="kd">const</span> <span class="nx">sum</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">reduce</span><span class="p">((</span><span class="nx">total</span><span class="p">,</span> <span class="nx">current</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">total</span> <span class="o">+</span> <span class="nx">current</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">sum</span><span class="p">);</span> <span class="c1">// 15</span>

<span class="kd">const</span> <span class="nx">evenNumbers</span> <span class="o">=</span> <span class="nx">numbers</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="nx">x</span> <span class="o">=&gt;</span> <span class="nx">x</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">evenNumbers</span><span class="p">);</span> <span class="c1">// [2, 4]</span>
</code></pre></div></div>

<h2 id="10-async--await">10. Async &amp; Await</h2>

<p>Async and Await are syntactic sugar over Promises, making asynchronous code look and behave more like synchronous code.</p>

<h3 id="example-9">Example:</h3>
<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">function</span> <span class="nx">fetchData</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">return</span> <span class="k">new</span> <span class="nb">Promise</span><span class="p">((</span><span class="nx">resolve</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">setTimeout</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span>
      <span class="nx">resolve</span><span class="p">(</span><span class="dl">'</span><span class="s1">Data has been fetched</span><span class="dl">'</span><span class="p">);</span>
    <span class="p">},</span> <span class="mi">2000</span><span class="p">);</span>
  <span class="p">});</span>
<span class="p">}</span>

<span class="k">async</span> <span class="kd">function</span> <span class="nx">printData</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">const</span> <span class="nx">data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchData</span><span class="p">();</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
<span class="p">}</span>

<span class="nx">printData</span><span class="p">();</span>
</code></pre></div></div>

<p><strong>Output:</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Data has been fetched
</code></pre></div></div>

<p>By mastering these concepts, you can write efficient, clean, and maintainable JavaScript code. Each concept builds on the previous ones, creating a robust foundation for your development skills. Happy coding!</p>]]></content><author><name></name></author><category term="Software Engineering" /><category term="development" /><category term="software-engineering" /><category term="javascript" /><summary type="html"><![CDATA[JavaScript is a versatile and powerful programming language that’s essential for web development. Whether you’re building simple web pages or complex applications, understanding core JavaScript concepts can significantly improve your coding efficiency and effectiveness. This blog post will delve into some fundamental JavaScript concepts with detailed explanations and examples.]]></summary></entry><entry><title type="html">Umm Kulthum Encyclopedia - موسوعة أم كلثوم</title><link href="https://hmz.ie/umm-kulthum-encyclopedia/" rel="alternate" type="text/html" title="Umm Kulthum Encyclopedia - موسوعة أم كلثوم" /><published>2024-04-23T00:00:00+00:00</published><updated>2024-04-23T00:00:00+00:00</updated><id>https://hmz.ie/umm-kulthum-encyclopedia</id><content type="html" xml:base="https://hmz.ie/umm-kulthum-encyclopedia/"><![CDATA[<p><img src="https://www.hmz.ie/images/media/2024/umm-kulthum.png" alt="Umm Kulthum" width="600" /></p>

<div class="tabs">
  <input type="radio" name="tabs" id="tabone" checked="checked" />
  <label for="tabone">English</label>
	<div class="tab">
		<p>
			Ever heard of Umm Kulthum? If not, you're in for a treat! This legendary Egyptian singer had a powerful voice and left behind a huge collection of songs that people still love today, even though her career spanned way back from the 1920s to the 1970s.
		</p>
		<p>
			This website <a href="https://umm-kulthum.netlify.app">umm-kulthum.netlify.app</a> explores all the songs Umm Kulthum sang.  Most of her songs talked about love and longing, and the site lists all of them with their titles, who wrote them, and when they came out.
		</p>
  </div>
  
  <input type="radio" name="tabs" id="tabtwo" />
  <label for="tabtwo" class="arabic">عربي</label>
  <div class="tab arabic">
    <h3>موسوعة أم كلثوم</h3>
		<p>
		المطربة المصرية الأسطورية التي تمتعت بصوت قوي وتركت وراءها مجموعة ضخمة من الأغاني التي لا يزال الناس يحبونها حتى اليوم، على الرغم من أن مسيرتها امتدت من العشرينيات إلى السبعينيات.
		</p>
		<p>
		هذا الموقع <a href="https://umm-kulthum.netlify.app">umm-kulthum.netlify.app</a> يستكشف جميع الأغاني التي غنتها أم كلثوم. أغلب أغانيها تحدثت عن الحب والشوق، ويسرد الموقع جميع أغانيها مع الكلمات، والمؤلفين ومتى صدرت.</p>
  </div>
</div>]]></content><author><name></name></author><category term="Music" /><category term="music" /><category term="react" /><summary type="html"><![CDATA[]]></summary></entry><entry><title type="html">FAQ: Everything You Need to Know About Peace Commissioners in Ireland</title><link href="https://hmz.ie/peace-commissioner-faq/" rel="alternate" type="text/html" title="FAQ: Everything You Need to Know About Peace Commissioners in Ireland" /><published>2024-04-01T00:00:00+00:00</published><updated>2024-04-01T00:00:00+00:00</updated><id>https://hmz.ie/peace-commissioner-faq</id><content type="html" xml:base="https://hmz.ie/peace-commissioner-faq/"><![CDATA[<h1 id="faq-everything-you-need-to-know-about-peace-commissioners-in-ireland">FAQ: Everything You Need to Know About Peace Commissioners in Ireland</h1>

<p>I was appointed as a <strong>Peace Commissioner (<em>Coimisinéir Síochána</em>)</strong> for County Dublin and surrounding counties by the Minister for Justice in <strong>April 2024</strong>.</p>

<p>I frequently receive questions from members of the public about what the role actually involves, how to get documents witnessed, and how the appointment process works. Here are answers to the most common questions I receive.</p>

<hr />

<h3 id="what-is-a-peace-commissioner"><strong>What is a Peace Commissioner?</strong></h3>
<p>A Peace Commissioner is an honorary legal official appointed by the Minister for Justice under <a href="https://www.irishstatutebook.ie/eli/1924/act/10/section/88/enacted/en/html#sec88">Section 88 of the Courts of Justice Act 1924</a>. The role was created to provide communities across Ireland with local, trusted access to essential administrative legal services without needing to go before a court judge.</p>

<ul>
  <li><strong>Resource:</strong> <a href="https://www.citizensinformation.ie/en/justice/civil-law/peace-commissioners/">Citizens Information: Peace Commissioners</a></li>
</ul>

<hr />

<h3 id="what-does-the-name-mean-and-where-does-it-come-from"><strong>What does the name mean and where does it come from?</strong></h3>
<ul>
  <li><strong>The Irish Title:</strong> <em>Coimisinéir Síochána</em> translates directly to “Commissioner of the Peace.”</li>
  <li><strong>Historical Origins:</strong> Established shortly after the creation of the Irish Free State, the position replaced older British colonial legal roles (such as Justices of the Peace). The goal was to establish local, community-based signatories for routine official paperwork.</li>
</ul>

<hr />

<h3 id="what-can-a-peace-commissioner-do-for-you"><strong>What can a Peace Commissioner do for you?</strong></h3>
<p>A Peace Commissioner is authorized to:</p>
<ul>
  <li><strong>Administer Oaths &amp; Statutory Declarations:</strong> Verifying declarations for housing, citizenship applications, passport declarations, and state agency forms.</li>
  <li><strong>Witness Signatures:</strong> Verifying signatures on official documents, legal contracts, and property transactions.</li>
  <li><strong>Certify True Copies:</strong> Attesting true copies of original documents (such as passports, birth certificates, or utility bills) where required by Irish authorities.</li>
  <li><strong>Sign Garda Documents:</strong> Signing summonses or search warrants requested by An Garda Síochána.</li>
  <li><strong>Certify Certificates:</strong> Endorsing official forms, such as club registration certificates under the <a href="https://www.irishstatutebook.ie/eli/1904/act/9/enacted/en/html">Registration of Clubs (Ireland) Act 1904</a>.</li>
</ul>

<hr />

<h3 id="what-can-a-peace-commissioner-not-do"><strong>What can a Peace Commissioner NOT do?</strong></h3>
<p>To avoid confusion, please keep these legal limits in mind:</p>
<ul>
  <li><strong>No Legal Advice:</strong> Peace Commissioners are strictly signatories and witnesses. We cannot offer legal advice or draft legal documents.</li>
  <li><strong>No Affidavits / Court Documents:</strong> A Peace Commissioner is <strong>not</strong> a Commissioner for Oaths or a Solicitor. We cannot attest affidavits for court proceedings.</li>
  <li><strong>Documents for Use Outside Ireland Only:</strong> The title of Peace Commissioner is recognized <strong>only within Ireland</strong>. Documents intended for international use, foreign embassies, or foreign courts generally require a <strong>Notary Public</strong> or <strong>Commissioner for Oaths</strong>.</li>
</ul>

<hr />

<h3 id="how-much-do-you-charge-for-your-services"><strong>How much do you charge for your services?</strong></h3>
<p><strong>Nothing—it is 100% voluntary and free.</strong></p>

<p>Under Irish law, Peace Commissioners receive no salary, fee, or expenses, and we are strictly forbidden from charging for any service provided. It is entirely a voluntary community service.</p>

<ul>
  <li><strong>Resource:</strong> <a href="https://www.oireachtas.ie/en/debates/question/2024-01-24/158/">Houses of the Oireachtas: Peace Commissioners Powers &amp; Remuneration</a></li>
</ul>

<hr />

<h3 id="do-peace-commissioners-need-an-official-stamp"><strong>Do Peace Commissioners need an official stamp?</strong></h3>
<p>Under Section 88 of the Courts of Justice Act 1924, a Peace Commissioner’s signature alone is legally sufficient. However, in modern practice, many state agencies, financial institutions, and legal bodies require an official Peace Commissioner stamp alongside the signature. Active Commissioners generally use a personal official seal specifying their name and appointment title.</p>

<hr />

<h3 id="how-does-someone-become-a-peace-commissioner"><strong>How does someone become a Peace Commissioner?</strong></h3>
<ol>
  <li><strong>Nomination or Application:</strong> An individual can apply directly or be nominated by a public representative (such as a local TD or Councillor) or a local community group.</li>
  <li><strong>Eligibility:</strong> Candidates must be “fit and proper persons” of good character who are established members of their local community.</li>
  <li><strong>Garda Vetting:</strong> Candidates undergo background checks by An Garda Síochána.</li>
  <li><strong>Formal Appointment:</strong> The appointment is formally granted at the discretion of the Minister for Justice.</li>
</ol>

<ul>
  <li><strong>Resource:</strong> <a href="https://www.gov.ie/en/organisation/department-of-justice/">Department of Justice: Applying or Nominating a Peace Commissioner</a> <em>(Inquiries can be submitted directly via email to <code class="language-plaintext highlighter-rouge">peacecommissioner@justice.ie</code>)</em></li>
</ul>

<hr />

<h3 id="how-do-i-find-a-peace-commissioner-in-my-local-area"><strong>How do I find a Peace Commissioner in my local area?</strong></h3>
<p>Because the official Roll of Peace Commissioners is maintained internally by the Department of Justice, the quickest ways to find one are:</p>
<ol>
  <li>Contact your local <strong>Garda Station</strong>, as they maintain active contact rosters for Peace Commissioners in your sub-district.</li>
  <li>Contact the <strong>Department of Justice Peace Commissioner Unit</strong> directly at <code class="language-plaintext highlighter-rouge">01 859 2323</code> or email <code class="language-plaintext highlighter-rouge">peacecommissioner@justice.ie</code>.</li>
</ol>

<hr />

<h3 id="guidelines-for-booking-an-appointment"><strong>Guidelines for Booking an Appointment</strong></h3>
<p>If you need a document signed or witnessed:</p>
<ol>
  <li><strong>Bring Original Documents:</strong> Always bring your original identity documents (Passport or Driving Licence) along with high-quality printed copies if true-copy certification is required.</li>
  <li><strong>Do Not Sign in Advance:</strong> If a document requires a statutory declaration or witnessed signature, <strong>do not sign it beforehand</strong>. It must be signed in the physical presence of the Peace Commissioner.</li>
</ol>]]></content><author><name></name></author><summary type="html"><![CDATA[FAQ: Everything You Need to Know About Peace Commissioners in Ireland]]></summary></entry><entry><title type="html">Declarative vs Procedural Programming</title><link href="https://hmz.ie/declarative-procedural-programming/" rel="alternate" type="text/html" title="Declarative vs Procedural Programming" /><published>2023-02-16T00:00:00+00:00</published><updated>2023-02-16T00:00:00+00:00</updated><id>https://hmz.ie/declarative-procedural-programming</id><content type="html" xml:base="https://hmz.ie/declarative-procedural-programming/"><![CDATA[<p>When it comes to programming, there are two main paradigms: declarative and procedural. Both paradigms have their own unique approach to problem-solving, and it’s important to understand the differences between the two. In this blog post, we’ll explore what declarative and procedural programming are, their characteristics, and how they differ.</p>

<h2 id="what-is-procedural-programming">What is Procedural Programming?</h2>
<p>Procedural programming is a programming paradigm where a program is composed of a series of instructions that tell the computer what to do step-by-step. The focus of procedural programming is on how to accomplish a task or solve a problem using a specific sequence of instructions. The programmer must have a clear understanding of the program’s flow and how each instruction affects the program’s output.</p>

<p>Procedural programming is best suited for situations where the program must have a specific order of execution, such as when working with low-level hardware or optimizing performance. Examples of procedural programming languages include C, Pascal, and FORTRAN.</p>

<h2 id="what-is-declarative-programming">What is Declarative Programming?</h2>
<p>Declarative programming is a programming paradigm that focuses on describing the desired result or outcome rather than how to achieve it. Instead of specifying the sequence of steps to take, declarative programming involves declaring a set of constraints or rules that define what the program should do. The program then uses these rules to automatically generate the output.</p>

<p>Declarative programming is ideal for situations where the focus is on what needs to be done rather than how it should be done. It’s often used for high-level programming, such as artificial intelligence, machine learning, and web development. Examples of declarative programming languages include SQL, HTML, and CSS.</p>

<h2 id="what-are-the-differences-between-declarative-and-procedural-programming">What Are the Differences Between Declarative and Procedural Programming?</h2>
<p>One of the key differences between declarative and procedural programming is the level of abstraction. Procedural programming focuses on the specific steps required to accomplish a task, while declarative programming abstracts away the details of how the task is accomplished.</p>

<p>Another difference is in the order of execution. Procedural programming requires a specific order of execution, while declarative programming can generate the output in any order.</p>

<p>Additionally, declarative programming tends to be more concise and easier to read than procedural programming. Declarative programs are often shorter and more self-explanatory because they focus on the end result rather than the process.</p>

<p>Finally, declarative programming is often more modular and easier to maintain than procedural programming. Because declarative programs focus on what needs to be done rather than how to do it, they can be broken down into smaller, more manageable parts that are easier to maintain and update.</p>

<h2 id="examples">Examples</h2>
<h3 id="declarative-programming">Declarative Programming:</h3>
<ol>
  <li>
    <p>SQL - Structured Query Language is a declarative language used to interact with relational databases. In SQL, you describe the data that you want to retrieve using statements like “SELECT,” “FROM,” and “WHERE,” rather than specifying how the data should be retrieved.</p>
  </li>
  <li>
    <p>HTML - HyperText Markup Language is a declarative language used to create web pages. In HTML, you describe the structure and content of a page using tags, such as “h1” for headings, “p” for paragraphs, and “img” for images.</p>
  </li>
  <li>
    <p>CSS - Cascading Style Sheets is a declarative language used to define the presentation of HTML documents. In CSS, you describe the style and layout of a web page using properties like “font-size,” “background-color,” and “margin.”</p>
  </li>
</ol>

<h3 id="procedural-programming">Procedural Programming:</h3>
<ol>
  <li>
    <p>C - C is a procedural programming language commonly used for low-level programming and systems programming. In C, you write a series of instructions that are executed in a specific order to accomplish a task, such as “if” statements, “for” loops, and “while” loops.</p>
  </li>
  <li>
    <p>Pascal - Pascal is a procedural programming language that was originally designed for teaching programming concepts. In Pascal, you write a sequence of instructions to accomplish a task, using constructs like “if-then-else” statements, “while” loops, and “case” statements.</p>
  </li>
  <li>
    <p>FORTRAN - FORTRAN is a procedural programming language commonly used for scientific and engineering applications. In FORTRAN, you write a sequence of instructions to perform mathematical operations, using constructs like “do” loops and “if” statements.</p>
  </li>
</ol>

<h2 id="conclusion">Conclusion</h2>
<p>Declarative and procedural programming are two different paradigms with their own strengths and weaknesses. While procedural programming is ideal for low-level programming and optimizing performance, declarative programming is ideal for high-level programming and focusing on what needs to be done. Understanding the differences between the two can help you choose the right programming paradigm for your next project.</p>]]></content><author><name></name></author><category term="Software Engineering" /><category term="development" /><category term="software-engineering" /><summary type="html"><![CDATA[When it comes to programming, there are two main paradigms: declarative and procedural. Both paradigms have their own unique approach to problem-solving, and it’s important to understand the differences between the two. In this blog post, we’ll explore what declarative and procedural programming are, their characteristics, and how they differ.]]></summary></entry><entry><title type="html">Introduction to React Testing Library</title><link href="https://hmz.ie/intro-to-react-testing-library/" rel="alternate" type="text/html" title="Introduction to React Testing Library" /><published>2023-01-10T00:00:00+00:00</published><updated>2023-01-10T00:00:00+00:00</updated><id>https://hmz.ie/intro-to-react-testing-library</id><content type="html" xml:base="https://hmz.ie/intro-to-react-testing-library/"><![CDATA[<p>React is one of the most popular front-end libraries used for building web applications. It offers a lot of features, including virtual DOM, component-based architecture, and unidirectional data flow. However, testing React applications can be a bit challenging because of the dynamic nature of the library.</p>

<p>React Testing Library is a library that helps in testing React applications by focusing on what the user sees and does, instead of testing the implementation details of the application. In this blog post, we will explore the React Testing Library and how it can be used to test React applications.</p>

<h2 id="setting-up-react-testing-library">Setting up React Testing Library</h2>

<p>To use the React Testing Library, we need to install it first. We can do this by running the following command:</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install</span> <span class="nt">--save-dev</span> @testing-library/react
</code></pre></div></div>

<p>This will install the React Testing Library as a development dependency in our project. We can then import the library in our test files like this:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">render</span><span class="p">,</span> <span class="nx">screen</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@testing-library/react</span><span class="dl">"</span><span class="p">;</span>
</code></pre></div></div>

<p>The <code class="language-plaintext highlighter-rouge">render</code> function is used to render a React component and returns a container object that we can use to interact with the rendered component. The <code class="language-plaintext highlighter-rouge">screen</code> object provides various functions that allow us to find elements in the rendered component.</p>

<h2 id="writing-tests-using-react-testing-library">Writing tests using React Testing Library</h2>

<h3 id="testing-a-simple-react-component">Testing a simple React component</h3>

<p>Let’s say we have a simple React component that displays a button and a message. We want to test that clicking the button updates the message correctly. Here is the code for the component:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useState</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">MyComponent</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">const</span> <span class="p">[</span><span class="nx">message</span><span class="p">,</span> <span class="nx">setMessage</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="dl">"</span><span class="s2">Initial message</span><span class="dl">"</span><span class="p">);</span>

  <span class="kd">function</span> <span class="nx">handleClick</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">setMessage</span><span class="p">(</span><span class="dl">"</span><span class="s2">New message</span><span class="dl">"</span><span class="p">);</span>
  <span class="p">}</span>

  <span class="k">return</span> <span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">Click</span> <span class="nx">me</span><span class="o">&lt;</span><span class="sr">/button</span><span class="err">&gt;
</span>      <span class="o">&lt;</span><span class="nx">p</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">message</span><span class="p">}</span><span class="o">&lt;</span><span class="sr">/p</span><span class="err">&gt;
</span>    <span class="o">&lt;</span><span class="sr">/div</span><span class="err">&gt;
</span>  <span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>

<p>To test this component using React Testing Library, we can create a test file and write the following test:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">render</span><span class="p">,</span> <span class="nx">screen</span><span class="p">,</span> <span class="nx">fireEvent</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@testing-library/react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">MyComponent</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./MyComponent</span><span class="dl">"</span><span class="p">;</span>

<span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">updates message on button click</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
  <span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MyComponent</span> <span class="o">/&gt;</span><span class="p">);</span>
  <span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">getByText</span><span class="p">(</span><span class="dl">"</span><span class="s2">Click me</span><span class="dl">"</span><span class="p">);</span>
  <span class="nx">fireEvent</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="nx">button</span><span class="p">);</span>
  <span class="kd">const</span> <span class="nx">message</span> <span class="o">=</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">getByText</span><span class="p">(</span><span class="dl">"</span><span class="s2">New message</span><span class="dl">"</span><span class="p">);</span>
  <span class="nx">expect</span><span class="p">(</span><span class="nx">message</span><span class="p">).</span><span class="nx">toBeInTheDocument</span><span class="p">();</span>
<span class="p">});</span>
</code></pre></div></div>

<p>In this test, we use the <code class="language-plaintext highlighter-rouge">render</code> function to render the <code class="language-plaintext highlighter-rouge">MyComponent</code> component. We then use the <code class="language-plaintext highlighter-rouge">screen</code> object to find the button element by its text and simulate a click event using the <code class="language-plaintext highlighter-rouge">fireEvent</code> function. Finally, we use the <code class="language-plaintext highlighter-rouge">screen</code> object again to find the message element by its text and assert that it is in the document using the <code class="language-plaintext highlighter-rouge">toBeInTheDocument</code> function.</p>

<h3 id="testing-a-form-submission">Testing a Form Submission</h3>

<p>Let’s say we have a simple React component that displays a form with an input field and a submit button. We want to test that filling out the form and submitting it calls the appropriate function with the input value. Here is the code for the component:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">useState</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">MyForm</span><span class="p">({</span> <span class="nx">onSubmit</span> <span class="p">})</span> <span class="p">{</span>
  <span class="kd">const</span> <span class="p">[</span><span class="nx">inputValue</span><span class="p">,</span> <span class="nx">setInputValue</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="dl">""</span><span class="p">);</span>

  <span class="kd">function</span> <span class="nx">handleSubmit</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
    <span class="nx">onSubmit</span><span class="p">(</span><span class="nx">inputValue</span><span class="p">);</span>
  <span class="p">}</span>

  <span class="k">return</span> <span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">form</span> <span class="nx">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="nx">handleSubmit</span><span class="p">}</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">label</span><span class="o">&gt;</span>
        <span class="nx">Input</span> <span class="nx">value</span><span class="p">:</span>
        <span class="o">&lt;</span><span class="nx">input</span>
          <span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">inputValue</span><span class="p">}</span>
          <span class="nx">onChange</span><span class="o">=</span><span class="p">{(</span><span class="nx">event</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">setInputValue</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span>
        <span class="sr">/</span><span class="err">&gt;
</span>      <span class="o">&lt;</span><span class="sr">/label</span><span class="err">&gt;
</span>      <span class="o">&lt;</span><span class="nx">button</span> <span class="nx">type</span><span class="o">=</span><span class="dl">"</span><span class="s2">submit</span><span class="dl">"</span><span class="o">&gt;</span><span class="nx">Submit</span><span class="o">&lt;</span><span class="sr">/button</span><span class="err">&gt;
</span>    <span class="o">&lt;</span><span class="sr">/form</span><span class="err">&gt;
</span>  <span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>

<p>To test this component using React Testing Library, we can create a test file and write the following test:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">render</span><span class="p">,</span> <span class="nx">screen</span><span class="p">,</span> <span class="nx">fireEvent</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@testing-library/react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">MyForm</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./MyForm</span><span class="dl">"</span><span class="p">;</span>

<span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">calls onSubmit with input value on form submit</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
  <span class="kd">const</span> <span class="nx">mockSubmit</span> <span class="o">=</span> <span class="nx">jest</span><span class="p">.</span><span class="nx">fn</span><span class="p">();</span>
  <span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MyForm</span> <span class="nx">onSubmit</span><span class="o">=</span><span class="p">{</span><span class="nx">mockSubmit</span><span class="p">}</span> <span class="sr">/&gt;</span><span class="se">)</span><span class="err">;
</span>  <span class="kd">const</span> <span class="nx">input</span> <span class="o">=</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">getByLabelText</span><span class="p">(</span><span class="dl">"</span><span class="s2">Input value:</span><span class="dl">"</span><span class="p">);</span>
  <span class="kd">const</span> <span class="nx">submitButton</span> <span class="o">=</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">getByText</span><span class="p">(</span><span class="dl">"</span><span class="s2">Submit</span><span class="dl">"</span><span class="p">);</span>
  <span class="nx">fireEvent</span><span class="p">.</span><span class="nx">change</span><span class="p">(</span><span class="nx">input</span><span class="p">,</span> <span class="p">{</span> <span class="na">target</span><span class="p">:</span> <span class="p">{</span> <span class="na">value</span><span class="p">:</span> <span class="dl">"</span><span class="s2">test value</span><span class="dl">"</span> <span class="p">}</span> <span class="p">});</span>
  <span class="nx">fireEvent</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="nx">submitButton</span><span class="p">);</span>
  <span class="nx">expect</span><span class="p">(</span><span class="nx">mockSubmit</span><span class="p">).</span><span class="nx">toHaveBeenCalledWith</span><span class="p">(</span><span class="dl">"</span><span class="s2">test value</span><span class="dl">"</span><span class="p">);</span>
<span class="p">});</span>
</code></pre></div></div>

<p>In this test, we use the <code class="language-plaintext highlighter-rouge">render</code> function to render the <code class="language-plaintext highlighter-rouge">MyForm</code> component with a mock <code class="language-plaintext highlighter-rouge">onSubmit</code> function. We then use the <code class="language-plaintext highlighter-rouge">screen</code> object to find the input and submit button elements by their text and label. We simulate a change event on the input field to set its value to “test value”, and then we simulate a click event on the submit button. Finally, we use the <code class="language-plaintext highlighter-rouge">toHaveBeenCalledWith</code> function to assert that the <code class="language-plaintext highlighter-rouge">onSubmit</code> function was called with the input value.</p>

<h3 id="testing-a-component-that-uses-a-custom-hook">Testing a Component that Uses a Custom Hook</h3>

<p>Let’s say we have a React component that uses a custom hook to fetch some data from an API and display it. We want to test that the component displays the data correctly when the hook returns it. Here is the code for the component and the custom hook:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">useData</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./useData</span><span class="dl">"</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">MyComponent</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">const</span> <span class="p">{</span> <span class="nx">isLoading</span><span class="p">,</span> <span class="nx">data</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">useData</span><span class="p">();</span>

  <span class="k">if</span> <span class="p">(</span><span class="nx">isLoading</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="o">&lt;</span><span class="nx">p</span><span class="o">&gt;</span><span class="nx">Loading</span><span class="p">...</span><span class="o">&lt;</span><span class="sr">/p&gt;</span><span class="err">;
</span>  <span class="p">}</span>

  <span class="k">return</span> <span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
      <span class="p">{</span><span class="nx">data</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">item</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">(</span>
        <span class="o">&lt;</span><span class="nx">p</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">item</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="o">&lt;</span><span class="sr">/p</span><span class="err">&gt;
</span>      <span class="p">))}</span>
    <span class="o">&lt;</span><span class="sr">/div</span><span class="err">&gt;
</span>  <span class="p">);</span>
<span class="p">}</span>

<span class="k">export</span> <span class="k">default</span> <span class="nx">MyComponent</span><span class="p">;</span>
</code></pre></div></div>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">useState</span><span class="p">,</span> <span class="nx">useEffect</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">useData</span><span class="p">()</span> <span class="p">{</span>
  <span class="kd">const</span> <span class="p">[</span><span class="nx">isLoading</span><span class="p">,</span> <span class="nx">setIsLoading</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
  <span class="kd">const</span> <span class="p">[</span><span class="nx">data</span><span class="p">,</span> <span class="nx">setData</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useState</span><span class="p">([]);</span>

  <span class="nx">useEffect</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">fetch</span><span class="p">(</span><span class="dl">"</span><span class="s2">https://my-api.com/data</span><span class="dl">"</span><span class="p">)</span>
      <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">response</span><span class="p">.</span><span class="nx">json</span><span class="p">())</span>
      <span class="p">.</span><span class="nx">then</span><span class="p">((</span><span class="nx">data</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="nx">setData</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
        <span class="nx">setIsLoading</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
      <span class="p">});</span>
  <span class="p">},</span> <span class="p">[]);</span>

  <span class="k">return</span> <span class="p">{</span> <span class="nx">isLoading</span><span class="p">,</span> <span class="nx">data</span> <span class="p">};</span>
<span class="p">}</span>

<span class="k">export</span> <span class="k">default</span> <span class="nx">useData</span><span class="p">;</span>
</code></pre></div></div>

<p>To test this component using React Testing Library, we can create a test file and write the following test:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">render</span><span class="p">,</span> <span class="nx">screen</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@testing-library/react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">useData</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./useData</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">MyComponent</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./MyComponent</span><span class="dl">"</span><span class="p">;</span>

<span class="nx">jest</span><span class="p">.</span><span class="nx">mock</span><span class="p">(</span><span class="dl">"</span><span class="s2">./useData</span><span class="dl">"</span><span class="p">);</span>

<span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">displays data when loaded</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
  <span class="nx">useData</span><span class="p">.</span><span class="nx">mockReturnValue</span><span class="p">({</span>
    <span class="na">isLoading</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
    <span class="na">data</span><span class="p">:</span> <span class="p">[</span>
      <span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Item 1</span><span class="dl">"</span> <span class="p">},</span>
      <span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Item 2</span><span class="dl">"</span> <span class="p">},</span>
    <span class="p">],</span>
  <span class="p">});</span>
  <span class="nx">render</span><span class="p">(</span><span class="o">&lt;</span><span class="nx">MyComponent</span> <span class="o">/&gt;</span><span class="p">);</span>
  <span class="kd">const</span> <span class="nx">item1</span> <span class="o">=</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">getByText</span><span class="p">(</span><span class="dl">"</span><span class="s2">Item 1</span><span class="dl">"</span><span class="p">);</span>
  <span class="kd">const</span> <span class="nx">item2</span> <span class="o">=</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">getByText</span><span class="p">(</span><span class="dl">"</span><span class="s2">Item 2</span><span class="dl">"</span><span class="p">);</span>
  <span class="nx">expect</span><span class="p">(</span><span class="nx">item1</span><span class="p">).</span><span class="nx">toBeInTheDocument</span><span class="p">();</span>
  <span class="nx">expect</span><span class="p">(</span><span class="nx">item2</span><span class="p">).</span><span class="nx">toBeInTheDocument</span><span class="p">();</span>
<span class="p">});</span>
</code></pre></div></div>

<p>In this test, we use the <code class="language-plaintext highlighter-rouge">jest.mock</code> function to mock the <code class="language-plaintext highlighter-rouge">useData</code> hook and return some sample data. We then use the <code class="language-plaintext highlighter-rouge">render</code> function to render the <code class="language-plaintext highlighter-rouge">MyComponent</code> component, and we use the <code class="language-plaintext highlighter-rouge">screen</code> object to find the elements that should contain the data. Finally, we use the <code class="language-plaintext highlighter-rouge">toBeInTheDocument</code> function to assert that the elements are present in the document.</p>

<h3 id="testing-a-component-that-uses-react-router">Testing a Component that Uses React Router</h3>

<p>Let’s say we have a React component that uses React Router to display different content based on the URL. We want to test that the component renders the correct content for each URL. Here is the code for the component:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Switch</span><span class="p">,</span> <span class="nx">Route</span><span class="p">,</span> <span class="nx">Link</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react-router-dom</span><span class="dl">"</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">MyRouter</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">return</span> <span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">nav</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">ul</span><span class="o">&gt;</span>
          <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span>
            <span class="o">&lt;</span><span class="nx">Link</span> <span class="nx">to</span><span class="o">=</span><span class="dl">"</span><span class="s2">/</span><span class="dl">"</span><span class="o">&gt;</span><span class="nx">Home</span><span class="o">&lt;</span><span class="sr">/Link</span><span class="err">&gt;
</span>          <span class="o">&lt;</span><span class="sr">/li</span><span class="err">&gt;
</span>          <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;</span>
            <span class="o">&lt;</span><span class="nx">Link</span> <span class="nx">to</span><span class="o">=</span><span class="dl">"</span><span class="s2">/about</span><span class="dl">"</span><span class="o">&gt;</span><span class="nx">About</span><span class="o">&lt;</span><span class="sr">/Link</span><span class="err">&gt;
</span>          <span class="o">&lt;</span><span class="sr">/li</span><span class="err">&gt;
</span>        <span class="o">&lt;</span><span class="sr">/ul</span><span class="err">&gt;
</span>      <span class="o">&lt;</span><span class="sr">/nav</span><span class="err">&gt;
</span>      <span class="o">&lt;</span><span class="nx">Switch</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">Route</span> <span class="nx">path</span><span class="o">=</span><span class="dl">"</span><span class="s2">/about</span><span class="dl">"</span><span class="o">&gt;</span>
          <span class="o">&lt;</span><span class="nx">p</span><span class="o">&gt;</span><span class="nx">About</span> <span class="nx">content</span><span class="o">&lt;</span><span class="sr">/p</span><span class="err">&gt;
</span>        <span class="o">&lt;</span><span class="sr">/Route</span><span class="err">&gt;
</span>        <span class="o">&lt;</span><span class="nx">Route</span> <span class="nx">path</span><span class="o">=</span><span class="dl">"</span><span class="s2">/</span><span class="dl">"</span><span class="o">&gt;</span>
          <span class="o">&lt;</span><span class="nx">p</span><span class="o">&gt;</span><span class="nx">Home</span> <span class="nx">content</span><span class="o">&lt;</span><span class="sr">/p</span><span class="err">&gt;
</span>        <span class="o">&lt;</span><span class="sr">/Route</span><span class="err">&gt;
</span>      <span class="o">&lt;</span><span class="sr">/Switch</span><span class="err">&gt;
</span>    <span class="o">&lt;</span><span class="sr">/div</span><span class="err">&gt;
</span>  <span class="p">);</span>
<span class="p">}</span>

<span class="k">export</span> <span class="k">default</span> <span class="nx">MyRouter</span><span class="p">;</span>
</code></pre></div></div>

<p>To test this component using React Testing Library, we can create a test file and write the following test:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">render</span><span class="p">,</span> <span class="nx">screen</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@testing-library/react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">MemoryRouter</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react-router-dom</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">MyRouter</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./MyRouter</span><span class="dl">"</span><span class="p">;</span>

<span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">renders home content for the home URL</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
  <span class="nx">render</span><span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">MemoryRouter</span> <span class="nx">initialEntries</span><span class="o">=</span><span class="p">{[</span><span class="dl">"</span><span class="s2">/</span><span class="dl">"</span><span class="p">]}</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">MyRouter</span> <span class="o">/&gt;</span>
    <span class="o">&lt;</span><span class="sr">/MemoryRouter</span><span class="err">&gt;
</span>  <span class="p">);</span>
  <span class="kd">const</span> <span class="nx">homeContent</span> <span class="o">=</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">getByText</span><span class="p">(</span><span class="dl">"</span><span class="s2">Home content</span><span class="dl">"</span><span class="p">);</span>
  <span class="nx">expect</span><span class="p">(</span><span class="nx">homeContent</span><span class="p">).</span><span class="nx">toBeInTheDocument</span><span class="p">();</span>
<span class="p">});</span>

<span class="nx">test</span><span class="p">(</span><span class="dl">"</span><span class="s2">renders about content for the about URL</span><span class="dl">"</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
  <span class="nx">render</span><span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">MemoryRouter</span> <span class="nx">initialEntries</span><span class="o">=</span><span class="p">{[</span><span class="dl">"</span><span class="s2">/about</span><span class="dl">"</span><span class="p">]}</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">MyRouter</span> <span class="o">/&gt;</span>
    <span class="o">&lt;</span><span class="sr">/MemoryRouter</span><span class="err">&gt;
</span>  <span class="p">);</span>
  <span class="kd">const</span> <span class="nx">aboutContent</span> <span class="o">=</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">getByText</span><span class="p">(</span><span class="dl">"</span><span class="s2">About content</span><span class="dl">"</span><span class="p">);</span>
  <span class="nx">expect</span><span class="p">(</span><span class="nx">aboutContent</span><span class="p">).</span><span class="nx">toBeInTheDocument</span><span class="p">();</span>
<span class="p">});</span>
</code></pre></div></div>

<p>In these tests, we use the <code class="language-plaintext highlighter-rouge">MemoryRouter</code> component from React Router to simulate different URLs. We use the <code class="language-plaintext highlighter-rouge">initialEntries</code> prop to set the initial URL to either “/” or “/about”. We then use the <code class="language-plaintext highlighter-rouge">render</code> function to render the <code class="language-plaintext highlighter-rouge">MyRouter</code> component inside the <code class="language-plaintext highlighter-rouge">MemoryRouter</code>. Finally, we use the <code class="language-plaintext highlighter-rouge">screen</code> object to find the elements that should contain the content for each URL, and we use the <code class="language-plaintext highlighter-rouge">toBeInTheDocument</code> function to assert that the elements are present in the document.</p>

<h2 id="conclusion">Conclusion</h2>

<p>React Testing Library is a powerful tool that can help us test React applications more efficiently. By focusing on the user’s perspective, we can write tests that are more resilient to changes in the implementation details of our application. We can use the library to test various aspects of our application, including user interactions, state changes, and component rendering. With the examples above, you can get started with React Testing Library and start writing efficient tests for your React applications.</p>]]></content><author><name></name></author><category term="Development" /><category term="development" /><category term="react" /><category term="software-testing" /><summary type="html"><![CDATA[React is one of the most popular front-end libraries used for building web applications. It offers a lot of features, including virtual DOM, component-based architecture, and unidirectional data flow. However, testing React applications can be a bit challenging because of the dynamic nature of the library.]]></summary></entry><entry><title type="html">How To Add Multiple Pages in React (2023 Tutorial)</title><link href="https://hmz.ie/add-multiple-pages-react/" rel="alternate" type="text/html" title="How To Add Multiple Pages in React (2023 Tutorial)" /><published>2023-01-06T00:00:00+00:00</published><updated>2023-01-06T00:00:00+00:00</updated><id>https://hmz.ie/add-multiple-pages-react</id><content type="html" xml:base="https://hmz.ie/add-multiple-pages-react/"><![CDATA[<p>React is a popular JavaScript library used for building web applications. One of the essential features of a web application is the ability to navigate between different pages. In this tutorial, we will explore how to add multiple pages in a React application.</p>

<p>First, let’s create a new React application using the Create React App command-line tool. Open your terminal and run the following command:</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npx create-react-app my-app
</code></pre></div></div>

<p>This will create a new React application in the “my-app” directory.</p>

<p>Next, we need to install React Router, which is a popular library used for client-side routing. Open your terminal and run the following command:</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install </span>react-router-dom
</code></pre></div></div>

<p>Once the installation is complete, we can start creating multiple pages in our React application.</p>

<h2 id="create-a-new-component-for-each-page">Create a New Component for Each Page</h2>
<p>The first step is to create a new component for each page in your application. Each component will represent a different page that the user can navigate to. For example, if you’re building a blog, you might have a component for the homepage, a component for a single blog post, and a component for an about page.</p>

<p>Here’s an example of what a basic page component might look like:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">HomePage</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">return</span> <span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">Welcome</span> <span class="nx">to</span> <span class="nx">my</span> <span class="nx">website</span><span class="o">&lt;</span><span class="sr">/h1</span><span class="err">&gt;
</span>      <span class="o">&lt;</span><span class="nx">p</span><span class="o">&gt;</span><span class="nx">Here</span><span class="dl">'</span><span class="s1">s some content for the homepage&lt;/p&gt;
    &lt;/div&gt;
  );
}

export default HomePage;
</span></code></pre></div></div>

<p>This component represents the homepage of your application. You can create additional components for each page in the same way.</p>

<h2 id="set-up-routes">Set Up Routes</h2>
<p>Now that we have our page components, we need to set up routes so that the user can navigate to each page. Open the “App.js” file and import the necessary components:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">BrowserRouter</span> <span class="k">as</span> <span class="nx">Router</span><span class="p">,</span> <span class="nx">Switch</span><span class="p">,</span> <span class="nx">Route</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react-router-dom</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">HomePage</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./HomePage</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">AboutPage</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./AboutPage</span><span class="dl">"</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">BlogPostPage</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">./BlogPostPage</span><span class="dl">"</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">App</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">return</span> <span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">Router</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">Switch</span><span class="o">&gt;</span>
          <span class="o">&lt;</span><span class="nx">Route</span> <span class="nx">exact</span> <span class="nx">path</span><span class="o">=</span><span class="dl">"</span><span class="s2">/</span><span class="dl">"</span> <span class="nx">component</span><span class="o">=</span><span class="p">{</span><span class="nx">HomePage</span><span class="p">}</span> <span class="sr">/</span><span class="err">&gt;
</span>          <span class="o">&lt;</span><span class="nx">Route</span> <span class="nx">path</span><span class="o">=</span><span class="dl">"</span><span class="s2">/about</span><span class="dl">"</span> <span class="nx">component</span><span class="o">=</span><span class="p">{</span><span class="nx">AboutPage</span><span class="p">}</span> <span class="sr">/</span><span class="err">&gt;
</span>          <span class="o">&lt;</span><span class="nx">Route</span> <span class="nx">path</span><span class="o">=</span><span class="dl">"</span><span class="s2">/blog/:id</span><span class="dl">"</span> <span class="nx">component</span><span class="o">=</span><span class="p">{</span><span class="nx">BlogPostPage</span><span class="p">}</span> <span class="sr">/</span><span class="err">&gt;
</span>        <span class="o">&lt;</span><span class="sr">/Switch</span><span class="err">&gt;
</span>      <span class="o">&lt;</span><span class="sr">/div</span><span class="err">&gt;
</span>    <span class="o">&lt;</span><span class="sr">/Router</span><span class="err">&gt;
</span>  <span class="p">);</span>
<span class="p">}</span>

<span class="k">export</span> <span class="k">default</span> <span class="nx">App</span><span class="p">;</span>
</code></pre></div></div>

<p>In this example, we have set up routes for three different pages: the homepage, the about page, and a blog post page. The “exact” keyword is used to indicate that the path must match exactly for the homepage route.</p>

<p>We use the “Switch” component to ensure that only one route is matched at a time. The “Route” component is used to define each route and its corresponding component.</p>

<p>Add Navigation Links</p>

<p>Now that we have our routes set up, we need to add navigation links to our application. We can do this by using the “Link” component provided by React Router.</p>

<p>Here’s an example of what the navigation links might look like:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="nx">React</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Link</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-router-dom</span><span class="dl">'</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">Navigation</span><span class="p">()</span> <span class="p">{</span>
  <span class="k">return</span> <span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">nav</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">ul</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;&lt;</span><span class="nx">Link</span> <span class="nx">to</span><span class="o">=</span><span class="dl">"</span><span class="s2">/</span><span class="dl">"</span><span class="o">&gt;</span><span class="nx">Home</span><span class="o">&lt;</span><span class="sr">/Link&gt;&lt;/</span><span class="nx">li</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;&lt;</span><span class="nx">Link</span> <span class="nx">to</span><span class="o">=</span><span class="dl">"</span><span class="s2">/about</span><span class="dl">"</span><span class="o">&gt;</span><span class="nx">About</span><span class="o">&lt;</span><span class="sr">/Link&gt;&lt;/</span><span class="nx">li</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="sr">/ul</span><span class="err">&gt;
</span>    <span class="o">&lt;</span><span class="sr">/nav</span><span class="err">&gt;
</span>  <span class="p">);</span>
<span class="p">}</span>

<span class="k">export</span> <span class="k">default</span> <span class="nx">Navigation</span><span class="p">;</span>
</code></pre></div></div>

<p>This component creates a navigation bar with links to the homepage and about page.</p>

<h2 id="conclusion">Conclusion</h2>
<p>In this tutorial, we have learned how to add multiple pages in a React application using React Router. We created a new component for each page, set up routes using the “Route” component, and added navigation links using the “Link” component provided by React Router. Now that you have a basic understanding of how to add multiple pages in a React application, you can start building more complex web applications with multiple pages and routes.</p>

<p>There are many other features and options available in React Router, such as passing parameters in the URL, redirecting to a different page, and using nested routes. The React Router documentation provides a detailed guide on how to use these features.</p>

<p>In addition to React Router, there are other libraries and tools available for client-side routing in React applications, such as Reach Router and Next.js. Each library has its own set of features and benefits, so it’s important to research and choose the one that best fits your needs.</p>

<p>In conclusion, adding multiple pages in a React application is an essential part of building a web application. By following the steps outlined in this tutorial, you can start building web applications with multiple pages and routes. With the help of React Router and other libraries, you can create complex and interactive web applications that provide a seamless user experience.</p>]]></content><author><name></name></author><category term="Development" /><category term="development" /><category term="react" /><summary type="html"><![CDATA[React is a popular JavaScript library used for building web applications. One of the essential features of a web application is the ability to navigate between different pages. In this tutorial, we will explore how to add multiple pages in a React application.]]></summary></entry><entry><title type="html">Software Engineering Career Paths [Regulary Updated]</title><link href="https://hmz.ie/software-engineering-career/" rel="alternate" type="text/html" title="Software Engineering Career Paths [Regulary Updated]" /><published>2023-01-01T00:00:00+00:00</published><updated>2023-01-01T00:00:00+00:00</updated><id>https://hmz.ie/software-engineering-career</id><content type="html" xml:base="https://hmz.ie/software-engineering-career/"><![CDATA[<p>As a software engineer, there are a wide variety of career paths available to you. Whether you prefer to code all day, work on project management, or delve into emerging technologies, there is a job out there for you. In this blog post, we’ll explore some of the most popular career paths for software engineers.</p>

<h2 id="career-paths">Career Paths</h2>
<h3 id="software-developerprogrammer">Software Developer/Programmer</h3>
<p>Software development or programming is the most traditional and common career path for software engineers. As a software developer or programmer, you will design, write, test, and maintain code for software applications. Depending on your specialty, you may work on front-end or back-end development, web applications, mobile apps, desktop software, or other types of software.</p>

<p>Software development is a highly diverse field with many different specializations. Within the field, there are a variety of career paths for software engineers, each with its own unique set of skills and requirements. Let’s take a closer look at some of the most popular career paths in software development.</p>

<h4 id="front-end-development">Front-end Development</h4>
<p>Front-end developers are responsible for designing and implementing the user interface and user experience of web applications. They work with HTML, CSS, and JavaScript to create dynamic and responsive web pages. Front-end developers need to have a strong understanding of user experience design and a good eye for aesthetics. They also need to be proficient in various front-end frameworks and libraries like React, Angular, and Vue.js.</p>

<p>Career paths for front-end developers include UI/UX designers, front-end engineers, web developers, and user experience designers.</p>

<h4 id="back-end-development">Back-end Development</h4>
<p>Back-end developers work on the server-side of web applications, creating the infrastructure that supports the front-end. They are responsible for building and maintaining servers, databases, and APIs. Back-end developers work with programming languages like Java, Python, Ruby, and PHP. They also need to have a strong understanding of databases and server infrastructure.</p>

<p>Career paths for back-end developers include software developers, back-end engineers, database administrators, and DevOps engineers.</p>

<h4 id="web-applications">Web Applications</h4>
<p>Web application developers work on web-based software applications that run on the internet. They build both front-end and back-end components and are responsible for ensuring that the application is reliable, efficient, and secure. Web application developers work with a range of programming languages and frameworks, depending on the requirements of the project.</p>

<p>Career paths for web application developers include web developers, full-stack developers, front-end developers, and back-end developers.</p>

<h4 id="mobile-apps">Mobile Apps</h4>
<p>Mobile app developers create software applications that run on mobile devices like smartphones and tablets. They work with mobile operating systems like iOS and Android and are responsible for building both front-end and back-end components of the application. Mobile app developers need to be proficient in programming languages like Java, Swift, and Kotlin.</p>

<p>Career paths for mobile app developers include mobile developers, mobile software engineers, and mobile application architects.</p>

<h4 id="desktop-software">Desktop Software</h4>
<p>Desktop software developers create software applications that run on desktop computers. They work with operating systems like Windows, macOS, and Linux and are responsible for building both front-end and back-end components of the application. Desktop software developers need to be proficient in programming languages like Java, C++, and Python.</p>

<p>Career paths for desktop software developers include software developers, desktop software engineers, and desktop application architects.</p>

<h3 id="devops-engineer">DevOps Engineer</h3>
<p>DevOps engineers work to integrate and streamline the processes between software development and IT operations. They are responsible for automating processes and tools to improve efficiency, quality, and security. DevOps engineers need to be proficient in programming, scripting, and automation tools, as well as be familiar with system administration and deployment processes.</p>

<h3 id="data-scientist">Data Scientist</h3>
<p>Data science is a rapidly growing field, and software engineers are well-positioned to excel in it. Data scientists analyze and interpret large data sets to identify patterns and trends, and they use this information to help businesses make data-driven decisions. As a data scientist, you’ll need to be skilled in programming, data analysis, statistics, and machine learning.</p>

<h3 id="project-manager">Project Manager</h3>
<p>Project management is a leadership role that involves managing teams, budgets, timelines, and resources to ensure successful completion of projects. As a software engineer, you have a unique perspective on the technical aspects of software development, which can be incredibly valuable when managing software projects.</p>

<h3 id="cybersecurity-specialist">Cybersecurity Specialist</h3>
<p>In today’s digital age, cybersecurity is more important than ever. Cybersecurity specialists work to protect organizations from digital threats and vulnerabilities by implementing security measures and protocols, as well as identifying and mitigating security risks. As a cybersecurity specialist, you’ll need to be familiar with programming, network security, cryptography, and other security-related technologies.</p>

<h3 id="technical-writer">Technical Writer</h3>
<p>Technical writing is an excellent career path for software engineers who enjoy writing and communicating technical information to others. Technical writers create documentation, manuals, guides, and other materials that explain how to use software products, as well as the technical aspects of software development. This role requires strong writing skills, as well as knowledge of software development tools and processes.</p>

<h3 id="uxui-designer">UX/UI Designer</h3>
<p>User experience (UX) and user interface (UI) designers work to create intuitive, user-friendly interfaces for software products. As a software engineer, you have a unique understanding of the technical aspects of software development, which can be valuable when designing interfaces that are both visually appealing and functional. UX/UI designers need to be proficient in design tools, as well as have a strong understanding of user psychology and behavior.</p>

<h2 id="is-software-engineering-the-correct-career-for-you">Is Software Engineering the correct career for you?</h2>
<p>Choosing a career can be a challenging decision, and it’s important to make an informed decision. Here are some steps you can take to determine if software engineering is the correct career for you:</p>

<ol>
  <li>
    <p>Understand the role: Before committing to a career in software engineering, it’s essential to understand the role and the responsibilities involved. You can talk to software engineers or read online to understand what the job entails and what skills are required.</p>
  </li>
  <li>
    <p>Take a programming course: If you are new to software engineering, you can take a programming course to see if you enjoy programming. Online courses like Codecademy, Coursera, or Udacity offer free programming courses that can give you an idea of what software engineering is all about.</p>
  </li>
  <li>
    <p>Build a project: Building a simple software project can give you a good idea of what it’s like to work on a software development project. You can build a simple web application or mobile app and see if you enjoy the process of designing and developing software.</p>
  </li>
  <li>
    <p>Attend a software engineering event: Attending a software engineering event or conference can give you an opportunity to network with other software engineers and gain a deeper understanding of the field.</p>
  </li>
  <li>
    <p>Consider your interests and strengths: If you are considering a career in software engineering, it’s important to consider your interests and strengths. If you enjoy solving complex problems, have strong analytical skills, and enjoy working with technology, then software engineering may be a good fit for you.</p>
  </li>
  <li>
    <p>Research career prospects: Research the job market and career prospects in software engineering. Look at the job outlook, salary, and career growth opportunities to determine if it’s the right fit for you.</p>
  </li>
</ol>

<h2 id="skills-needed-for-a-software-engineer">Skills needed for a Software Engineer</h2>
<p>A software engineer is responsible for designing, developing, testing, and maintaining software applications. To be successful in this field, software engineers need to have a range of technical and soft skills. Here are some of the key skills needed for a software engineer:</p>

<ol>
  <li>
    <p>Programming languages: Software engineers need to be proficient in at least one programming language. Common programming languages include Java, Python, C++, JavaScript, and Ruby.</p>
  </li>
  <li>
    <p>Data structures and algorithms: Software engineers need to have a good understanding of data structures and algorithms. They need to be able to write efficient and optimized code.</p>
  </li>
  <li>
    <p>Web development: Software engineers working on web applications need to have a good understanding of web development technologies like HTML, CSS, and JavaScript. They should also be familiar with front-end frameworks like React, Angular, and Vue.js.</p>
  </li>
  <li>
    <p>Database management: Software engineers should be familiar with databases and data modeling. They should be able to design and manage databases efficiently.</p>
  </li>
  <li>
    <p>Testing and debugging: Software engineers need to be skilled in testing and debugging software applications. They should be able to write unit tests, integration tests, and end-to-end tests.</p>
  </li>
  <li>
    <p>Version control: Software engineers should be familiar with version control systems like Git. They should be able to work collaboratively with other developers and manage code changes efficiently.</p>
  </li>
  <li>
    <p>Problem-solving skills: Software engineers need to be excellent problem solvers. They should be able to identify problems and come up with creative and efficient solutions.</p>
  </li>
  <li>
    <p>Communication skills: Software engineers need to have good communication skills. They should be able to explain technical concepts to non-technical stakeholders and work collaboratively with other team members.</p>
  </li>
  <li>
    <p>Continuous learning: Software engineering is a fast-changing field. Software engineers need to be dedicated to continuous learning and staying up-to-date with the latest trends and technologies.</p>
  </li>
</ol>

<h2 id="starting-a-career-as-a-software-engineer">Starting a career as a Software Engineer</h2>
<p>Starting a career as a software engineer can be a rewarding and lucrative career choice. Here are some steps to help you get started:</p>

<ol>
  <li>
    <p>Learn programming fundamentals: Start by learning programming fundamentals like data types, variables, control structures, and algorithms. You can begin by learning a popular programming language like Python, Java, or JavaScript. You can take online courses, watch videos, or read books to learn programming.</p>
  </li>
  <li>
    <p>Build a strong foundation: Once you have learned the basics of programming, focus on building a strong foundation in computer science. You can learn about data structures, algorithms, computer organization, operating systems, and networking. A strong foundation in computer science will help you understand how software works at a deeper level.</p>
  </li>
  <li>
    <p>Practice coding: Practice coding regularly by working on projects or solving coding challenges. You can contribute to open source projects or build your own projects. Coding is a skill that requires practice, so the more you code, the better you will become.</p>
  </li>
  <li>
    <p>Get a degree or certification: You can choose to pursue a degree in computer science or a related field to get a formal education in software engineering. Alternatively, you can pursue a certification in a specific technology or programming language to demonstrate your expertise.</p>
  </li>
  <li>
    <p>Build a portfolio: Build a portfolio of your projects to showcase your skills and experience. Your portfolio can include projects you have worked on, open-source contributions, and any certifications or degrees you have earned.</p>
  </li>
  <li>
    <p>Find internships or entry-level jobs: Look for internships or entry-level jobs to gain experience and build your network. Internships or entry-level jobs can help you learn from experienced professionals and provide you with valuable industry experience.</p>
  </li>
  <li>
    <p>Keep learning and networking: Keep up with the latest trends and technologies in software engineering. Attend meetups, conferences, and events to network with other professionals in the field.</p>
  </li>
</ol>

<h2 id="interviews">Interviews</h2>
<p>The interview process for software engineering positions can vary depending on the company and the specific role, but here is a general overview of what you might expect:</p>

<ol>
  <li>
    <p>Phone or initial screening: Many companies start with a brief phone call or screening to discuss your background and experience and to determine if you are a good fit for the position.</p>
  </li>
  <li>
    <p>Technical assessment: After the initial screening, you may be asked to complete a technical assessment or coding challenge to demonstrate your technical skills and abilities.</p>
  </li>
  <li>
    <p>Technical interview: A technical interview will typically follow the assessment, and you may be asked to answer technical questions, solve problems, or write code on a whiteboard or in a code editor. The interviewer may also ask you to explain your thought process or approach to solving a problem.</p>
  </li>
  <li>
    <p>Behavioral or cultural fit interview: In addition to assessing your technical skills, companies may also evaluate your cultural fit and soft skills. You may be asked about your communication style, your approach to teamwork, your problem-solving process, and your approach to personal and professional development.</p>
  </li>
  <li>
    <p>Onsite or virtual interviews: If you have passed the initial interviews, you may be invited to an onsite or virtual interview with a team or groups of people you will be working with. During this interview, you may be asked to give a technical presentation, work on a collaborative coding exercise, or meet with different members of the team.</p>
  </li>
  <li>
    <p>Offer: If you successfully make it through the interview process, you may be presented with a job offer.</p>
  </li>
</ol>

<p>It’s important to remember that the interview process may differ from company to company and that some companies may have more or fewer steps than those outlined above. Additionally, some companies may conduct interviews over several days or weeks. Being prepared and having a good understanding of the company’s interview process can help you feel more confident and comfortable during the interview process.</p>

<h3 id="faq-in-interviews">FAQ in interviews</h3>
<p>As a software engineer, here are some frequently asked questions (FAQ) that you may encounter in interviews:</p>

<ol>
  <li>What programming languages are you proficient in?</li>
  <li>Have you worked on any projects similar to what we are looking for?</li>
  <li>Can you explain a complex technical concept in simple terms?</li>
  <li>How do you stay up-to-date with the latest technologies and trends?</li>
  <li>What is your experience with version control systems?</li>
  <li>Can you walk us through your development process?</li>
  <li>How do you approach problem-solving?</li>
  <li>How do you ensure code quality and maintainability?</li>
  <li>Can you give an example of a difficult bug you had to debug and how you went about solving it?</li>
  <li>How do you work in a team environment and collaborate with other developers, designers, and stakeholders?</li>
</ol>

<p>In conclusion, software engineering offers a wealth of career opportunities. From traditional software development roles to emerging fields like data science and cybersecurity, there is a job out there for every type of software engineer. Whether you prefer to code all day, manage projects, or design user interfaces, the world of software engineering is full of exciting and fulfilling career paths.<br />
Software engineering is a highly technical and challenging field that requires a range of technical and soft skills. Successful software engineers are skilled in programming languages, data structures, web development, database management, testing and debugging, version control, problem-solving, communication, and continuous learning.<br />
Starting a career as a software engineer requires dedication, hard work, and continuous learning. With the right skills and experience, you can find a rewarding career in software engineering.</p>]]></content><author><name></name></author><category term="Software Engineering" /><category term="development" /><category term="software-engineering" /><category term="career" /><summary type="html"><![CDATA[As a software engineer, there are a wide variety of career paths available to you. Whether you prefer to code all day, work on project management, or delve into emerging technologies, there is a job out there for you. In this blog post, we’ll explore some of the most popular career paths for software engineers.]]></summary></entry></feed>