Blog Posts from 2022

Browse all blog posts from 2022

Posts from 2022

29 posts published in 2022

2022 Recap - Achieving your dreams Debbie
And there it is, another year gone but when you look back at all you have achieved then really there is no more to say than; what a year. From Google interviews to being hired by Microsoft, speaking at conferences and traveling to so many conferences and lots of sport, 2022 was a great year.
1 min read
- personal
How To Locate Elements in Playwright
In order to write end to end tests we need to first find elements on the webpage and then perform user actions on them. For example, find a link and click on it. But before we dive into how to use the test generator, first let's understand what a link element is and what exactly locators are.
1 min read
- playwright
- testing
How to locate elements in Playwright
How can we locate a link click on it in our e2e tests. In this article we will learn how to locate elements in Playwright using the test generator to generate your tets based on user actions or pick a locator by clicking on an element
1 min read
- testing
- playwright
Migrating from Nuxt 2 to Nuxt 3
My personal website was built many years ago and had collected quite a large amount of code as I used my site to play around and experiment new features of Nuxt. It took me ages to finally decide to migrate cause lets face it, we all hate migrations. But I finally did it and I'm so glad I did. I'm going to share with you the steps I took to migrate my site from Nuxt 2 to Nuxt 3.
1 min read
- nuxt
Challenging Yourself
Cycle all around the island of Mallorca for a total of 235km with an expected cycling time of 9.5 hours at a speed of 25km per hour. Just the thoughts of that is scary enough. Was I able for it? Had I trained enough for it? Probably not. But I was determined to give it a go.
1 min read
- personal
- motivation
Testing a Sites Color Mode with Playwright
My site has a color mode option to change from light theme to dark theme or sepia theme or use the system preference. So how can we write a test to make sure this all works?
1 min read
- testing
- playwright
Interviewing with the Big Tech Companies
When a recruiter from Meta, from America, had called me, it just opened my eyes to the possibility that maybe just maybe I was actually good enough to work for the big tech companies.
1 min read
- personal
Why Microsoft and How I achieved my Goal
I just really liked the idea that Microsoft were willing to send people out to help others, to help them build better software with their products and I said to the two Microsoft guys, "One day I will work for Microsoft".
1 min read
- personal
Fixing Diversity in Tech
When you step back from the nationality, the color, the religion the sex etc you just get a bunch of people who become a great bunch of friends. This is tech. This is what tech should be like always, for everyone.
1 min read
- personal
The JavaScript Array.at() method
Often we want to return a single item from an array. There are a few methods of doing this including the `at(index)` method which returns the item at a given index.
1 min read
- javascript
The JavaScript Array.filter() method
The .filter() method in JavaScript creates a new array with all elements that pass the test implemented by the provided function.
1 min read
- javascript
Finding the Right Work Life Balance
To many people it might look like I have it all worked out and to be honest I do think I have a pretty good work life balance. But it wasn't always that way. I am probably older than most people who will read this and therefore I have had more time to make mistakes and learn from them.
1 min read
- personal
Finding courage and inspiration in the developer community
How do we empower women in tech and equip them with the skills to help them become true leaders? One way is learning from others' successes and failures. Web GDEs—Debbie O'Brien, Julia Miocene, and Glafira Zhur—discuss the value of one to one mentoring and the impact it has made on their own professional and personal development.
1 min read
- mentoring
Minimizing SVGs
When working with SVG's sometimes we just put the svg into our code and think nothing more of it. But do we always need all that code that the SVG gives us? Perhaps not. SVGO is a tool that can take an SVG and compress it down to a smaller size ensuring your site is more performant.
1 min read
- performance
Finding Motivation as a Developer
Many people keep asking me where I get my motivation from, how do I find so much time and energy to do so much? I certainly don't have all the answers but I do think it is something you teach yourself.
1 min read
- personal
- motivation
Being an Imposter
If you ever look at the home page of my site or the intro slide of my talks you will probably think I am the biggest show off in the world. However, really I am an imposter. I doubt my abilities and find it difficult to accept my accomplishments and wonder if I deserve them.
1 min read
- personal
- motivation
Pagination in Nuxt Content
My blog was getting bigger and bigger and so time to add pagination. I am using Nuxt Content to manage my blog posts. So how do I add pagination to my blog? Let me show you how I did it.
1 min read
- nuxt
Debugging Tests in Playwright
Let's take a look at some of the ways you can debug your tests in Playwright should they fail. Playwright scripts work with existing debugging tools, like Node.js debuggers and browser developer tools. Playwright also introduces new debugging features for browser automation.
1 min read
- testing
- playwright
Playwright Reports and Traces
Playwright will serve up a HTML report on your local server so you can easily walk through the steps of your test. You can also open a trace file which gives you even more powerful options of viewing, reporting, interacting and even debugging your tests.
1 min read
- testing
- playwright
Design Tokens and Theming
As frontend developers we are normally given a design from Figma or similar tools that we then need to turn into code. So where do we start? What are the first steps we should take when converting our design into code?
1 min read
- react
Getting Started with Playwright Testing
How can we get more developers to write tests? We can create better tools that makes testing easier. Let's take a look at Playwright and it's amazing features including codegen which writes your tests for you.
1 min read
- testing
- playwright
Testing iframes with Playwright
Have you ever had to test something in an iframe on your page with end to end testing? Even testing the play button of an embedded video used to be difficult but then along came Playwright. Let's take a look at how Playwright can help you test iframes.
1 min read
- testing
- playwright
Theming in React
Theming is a fascinating topic and a really important one these days as more and more people add light and dark mode to their sites and companies change the theme of their site or part of their site on specific dates to celebrate occasions such as christmas, pride week etc.
1 min read
- react
Learning about Developer Advocates
Being a Developer Advocate is by far the best job in the world, at least in my opinion and for me. It isn't for everyone and that's ok too. In this post I am going to share a bit about what I do as a Developer Advocate and what I love about it.
1 min read
- personal
- dev rel
Building a Cart Context Component
Creating a generic cart component that can add and remove a product from the cart using React Context. This component can then be used in any other component or app to create more specific cart components.
1 min read
- react
Building and Testing a Counter Component
We want to build and test a counter component built with React and TypeScript. So where do we start? Which components do we need to build to create this component and what do we test?
1 min read
- react
- testing
TypeScript and Children
What happens when we pass in children in React? Children is a special prop that allows us to pass in any type of element. It could be a number, a string, a boolean, an array of elements or even another component. So how can we check the types?
1 min read
- typescript
- react
Building and Testing a Select Component
Building a Select component with a Composition to see the component render in isolation as well as Tests using React Testing Library to test the select works on change and shows a new value.
1 min read
- react
- testing
Testing a Button Component
Testing a button component with React Testing Library. What to test and how to test your button component when building multiple compositions of the button.
1 min read
- react
- testing

Browse by Topic

Browse by Year

Explore posts from different years

Click any year to browse posts from that period