All Blog Posts

Here's a list of all my blog posts

• architecture
• dev rel
• jamstack
• javascript
• lifestyle
• mentoring
• motivation
• nuxt
• performance
• playwright
• react
• testing
• typescript
• vs code
• vue

• 

  Testing Menus on Desktop and Mobile

  We can write a simple test to make sure that when a user clicks on an item in the menu it takes them to the correct page. To test my website I use Playwright which I already have installed. Let's take a look at how to test the menu on desktop and mobile.

  • playwright
  • testing
• 

  2022 Recap - Achieving your dreams

  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.

  • lifestyle
• 

  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

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

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

  • lifestyle
  • 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?

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

  • lifestyle
• 

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

  • lifestyle
• 

  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.

  • lifestyle
• 

  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.

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

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

  • lifestyle
• 

  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.

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

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

  • lifestyle
  • 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.

  • lifestyle
  • 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.

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

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

  • 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?

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

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

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

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

  • lifestyle
  • 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.

  • 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?

  • 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?

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

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

  • react
  • testing
• 

  2021 - climbing higher and higher

  A look back at yet again another amazing year even though times were hard. From lockdowns to in person conferences, to changing jobs and learning a new library, as well as mentoring, teaching workshops, doing lots of sport and so much more.

  • lifestyle
• 

  Adding TailwindCSS to Bit

  Adding TailwindCSS to your Bit components by adding it to the env that is used by your components. This way the the component compositions will show the TailwindCSS classes.

  • react
• 

  Building an ecommerce Product details component

  Where do you start when building a product page for an e-commerce store? How do you think about naming the components and how much to break down the components? What do you start building first and why?

  • react
• 

  Understanding TypeScript

  TypeScript is a superset of JavaScript. Any types that are added are not part of the final bundle so really TypeScript is there to make your life easier as a developer.

  • typescript
  • react
• 

  Improve Performance with Nuxt Image

  Showing the benefits of Nuxt image by analyzing the performance of my website before and after adding the Nuxt Image module.

  • nuxt
  • performance
• 

  Publish Multiple Components to NPM with no package.jsons to Maintain

  Sharing components across multiple projects or with other developers seems to be the most complicated thing, yet it really shouldn’t be. With package registries such as npm or GitHub packages surely we should easily be able to share our components by publishing them as packages.

  • architecture
• 

  Sharing React Components across Multiple Applications

  We have almost all been in a situation where we need to share a component between one app and another. Often we just decide to copy and paste it because it really is the quickest option. And sometimes it’s even ok, especially when it comes to those smaller components. But what if you wanted to share a big and more complex component?

  • react
  • architecture
• 

  VS Code Tips

  Tips, shortcuts and extensions to make working with VS Code easier so you can developer faster and let the tools do the job for you.

  • vs code
• 

  Amazing Things are Going to Happen

  Believing in yourself is hard, especially when for so long people have put you down or not believed in you. Getting those voices out of your head is not easy but I think I have finally done it and now I can finally grow and just be a star.

  • lifestyle
  • motivation
• 

  Discord as a Virtual Office

  We use Discord as our virtual office at Bit and I have to tell you all about it as it really is a great way to work and collaborate with others especially when working in different time zones.

  • lifestyle
• 

  Learning React

  Recently I started learning React for my new job. I basically went from being a coding ninja to being a coding newbie. But hey everything can be learnt so here is what I have learnt so far.

  • react
• 

  GitHub Star Shares Tips on Developer Advocacy, Coding Without a Degree, and Imposter Syndrome

  For February’s Ask Engineers Anything event (aka office hours for our engineer community), I invited GitHub Star and community favorite, Debbie O’Brien, to share her experience as a woman in tech who is making a huge difference in the ecosystem.

  • dev rel
• 

  Understanding Nuxt Middleware

  Middleware lets you define custom functions that can be run before rendering either a page or a group of pages which we call layouts.

  • nuxt
• 

  Customizing the Nuxt Loading Component

  We can customize the Loading for our Client Side applications as well as the loading Progress bar for our server rendered applications and we can even customize this to create our own.

  • nuxt
• 

  Deploying your Nuxt app to Netlify

  If you are building a Nuxt static site and want to deploy it easily and for free then Netlify is a great choice. Let me show you how easy it is.

  • nuxt
• 

  Why Live Streams Scare me

  What its like to do a live stream, why it scares me and why I know the only way to get over fear is to keep doing it again and again.

  • lifestyle
• 

  How Progressive Web Apps work

  Progressive web apps will really help your performance and you can install them on your home screen or desktop and have that app like feel for your website. Let's have a look at how they work.

  • nuxt
  • performance
• 

  Adding Vue Plugins to your Nuxt APP

  In Nuxt we can add Vue plugins to our application by creating a Nuxt plugin and then registering that plugin in the Nuxt Config file.

  • nuxt
• 

  Creating Video Courses

  Creating video courses can be very time consuming and for sure there is no one way to go about it. In this post I share what I have learnt and how I now find it easier to create courses.

  • lifestyle
• 

  Why I Love Nuxt

  I have been using Nuxt in all of my recent tech jobs but why did I start using it? What problems did I have trying to convince the team and more important the clients. And why should you use Nuxt?

  • nuxt
  • lifestyle
• 

  Lite YouTube Embeds

  If you are adding YouTube videos to your site you might notice that they can load quite slowly especially when loading iframes. However this is a better way. With this library your YouTube videos will load super fast and your site will be more performant because of it.

  • nuxt
  • performance
• 

  Adding analytics to your Nuxt site

  When you build your own site sometimes it's important to add analytics to see what is doing well, what your audience is spending time and perhaps find ways of improving your site

  • nuxt
• 

  2020 - my most successful year (career wise)

  A look back at what we could say has been an interesting year, challenging in many ways yet somehow has been my most successful year to date.

  • lifestyle
• 

  Creating a Nuxt Module

  Modules are functions that are called sequentially when booting Nuxt. The framework waits for each module to finish before continuing. In this way, modules can customize almost any aspect of your project. Nuxt modules can be incorporated into npm packages. This makes them easy to reuse across projects and to share with the community.

  • nuxt
• 

  How we use Nuxt at The NuxtJS Company

  The first commit for Nuxt.js on Github was made on October 26th, 2016. Since then the Nuxt.js framework has grown from 2 creators in 2016 to having 10 full-time employees at the NuxtJS company, as well as the amazing Nuxt community with maintainers, ambassadors and contributors.

  • nuxt
• 

  Vue Directives

  Vue Directives are a great way of doing things like trimming your models or only showing something once. So many cool directives to make your life easier when coding in Vue.

  • vue
  • nuxt
• 

  Formatting a date in JavaScript

  How to format a date in JavaScript without using any libraries so you easily display dates in your Vue or Nuxt application

  • javascript
• 

  Advanced i18n in Nuxt using Interpolations

  That's where i18n interpolation comes into practice. With i18n, instead of using v-html we can instead use interpolation. How? i18n gives us an <i18n> component that we can use on any of our pages or inside our components.

  • nuxt
  • vue
• 

  Being an Extrovert in a Virtual World

  From being surrounded by amazing people to being locked up from the world. 2020 has been an interesting year and a very hard one for those who are extroverts and love being around people.

  • lifestyle
• 

  CityJSConf talks to…Debbie O’Brien

  “I guess you could say I love the buzz of the stage but also because my talks help people learn something new. Now the virtual world is not the same at all, but what can we do? I don’t dislike it — I would just prefer to see and talk to people. I am very much a people’s person.”

  • lifestyle
• 

  Why static sites are back

  When we first built websites many years ago they were very static. It was all we knew. Html with some CSS and a tiny bit of JavaScript. A typical website from 1996, SpaceJam which really shows how static sites are.

  • jamstack
• 

  The JavaScript Array.Map() method

  The .map() method in JavaScript lets you loop over every element in an array and modify or add to it and then return a different element to take that elements place

  • javascript
• 

  Adding a cookie consent banner

  When in Europe and using cookies we need to show a cookie consent banner so our users are aware that we are using cookies on the site.

  • nuxt
• 

  Setting up cypress

  Let's take a look at how you setup Cypress in your Nuxt.js project, setup a github action for continuous integration so that Netlify will run the tests every time your application is building.

  • nuxt
  • testing
• 

  Fetching graphQL queries

  Fetching graphQL queries

  • nuxt
• 

  Migrating to Nuxt content

  If you already have documentation set up and would like to migrate to Nuxt Content then this guide should help you make migrate easily and take advantage of what the docs theme gives you.

  • nuxt
• 

  Using Apollo to Fetch Data

  Using Apollo to Fetch Data from a GraphQL API

  • nuxt
• 

  Create a Blog with Nuxt Content

  The content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.

  • nuxt
• 

  Styling your active classes in Nuxt.js

  Nuxt.js, which uses `vue-router`, can easily tell what route you are on and therefore can add a class to that link when the user is on that page. By default this class is called `nuxt-link-active`.

  • nuxt
• 

  Adding a PWA in Nuxt.js

  Most people don't realise how easy it really is to add a PWA with Nuxt.js. Progressive Web Apps (PWA) deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase.

  • nuxt
  • performance
• 

  Advanced i18n in Nuxt using Interpolations

  With Nuxt components you can auto import your components really easily and even comes with support for dynamic imports otherwise known as lazy loading. That means you can just add your component in the template without having to add it to the script tag. This makes development much faster.

  • nuxt
• 

  Moving from @nuxtjs/dotenv to runtime config

  In our frontend applications, we often use APIs and third-party integrations which require us to use configuration data which is usually provided by environment variables. These variables should not be exposed to the frontend as the browser environment is accessible by all visitors.

  • nuxt
• 

  Going dark with Nuxt.js color mode

  The @nuxtjs/color-mode module is a cool way of adding dark mode to your site. But not only does it switch from dark to light but also any color theme (eg sepia mode). It even has auto detection so that it will choose the right mode depending on your system appearance.

  • nuxt
• 

  ignoring your files with Nuxt.js

  In Nuxt.js there are 3 different ways to ignore files during the build phase. This is great for static site generation which means you can still generate your site with a broken page as it will be ignored.

  • nuxt
• 

  Creating an error page in Nuxt.js

  An error page is the page you see when you arrive at a page that can't be found. These are typically called 404 pages. To create an error page all you need to do is create an `error.vue` file in your layouts folder. Layouts?

  • nuxt
• 

  Configure the Nuxt.js server to see your site on your mobile

  Sometimes you want to test out your site on your actual mobile device or tablet and not just in the dev tools. This is great when bug fixing or just to see how it looks in a real environment.

  • nuxt
• 

  Show a message when your user is offline with $nuxt.isOffline

  Did you know that `$nuxt.isOffline` can be used to show your users content based on if they are online or not.

  • nuxt
• 

  The Nuxt Loading Progress Bar

  Nuxt.js automatically gives you a loading progress bar component which is shown between routes. Did you know you can customise it, disable it or create your own component?

  • nuxt
• 

  Let's Analyze your webpack bundles with Nuxt

  As we add so many third party libraries to our site sometimes we forget that perhaps they are going to have an impact on our performance or sometimes we just don't read the install instructions and install the whole library instead of only what we need.

  • nuxt
  • performance
• 

  Page and Layout Transitions in Nuxt.js

  With Nuxt.js it is really easy to add transitions between your pages. You can create transitions for all your pages or layouts and you can even have different transitions for specific pages.

  • nuxt
• 

  Build a Counter, Dropdown and Accordion in Vue Components!

  Let’s dive into building some core main components that you might be tasked with when writing applications in Vue. Or, if you’re new to Vue, then these are definitely some great ways to get started understanding the more ‘common’ components that we might work with on a day-to-day basis. With that in mind, let’s get started right away with building a Counter, Dropdown and finally an Accordion with Vue!

  • vue
• 

  Finding your way around the Vue UI

  Vue CLI is the fastest way to get your Vue project off the ground and it also comes with a really cool graphical user interface that allows you to easily modify your project’s configuration, run linters, search for and install plugins, analyse your bundle with webpack and more.

  • vue
• 

  JavaScript Workshop with Kyle Simpson

  It has been a couple of months since Kyle, author of the “You Don’t Know JS” series, visited our trivago headquarters and gave us a wonderful JavaScript workshop. It was such an enjoyable week, being able to meet Kyle in person and walk through his thinking behind the materials.

  • lifestyle
• 

  How learning to code changed my life

  A year ago, I was in a very different place. I had come to the end of a very long journey and I just didn’t know what to do next. I didn’t really have the interest or the strength to continue and I believed that I didn’t have a purpose anymore. I was in a deep, dark hole and I didn’t know how to get out of it.

  • lifestyle
• 

  Meet Debbie, It Took Her Only 8 Months to Become a Front-End Architect

  Each day we look forward to seeing our students around the world succeed as they grow and navigate within their chosen career path. We’re even more thrilled when our students become graduates and get a job in their dream role!

  • lifestyle
• 

  What It’s Like To Work After Studying Online

  I was one of the first graduates from the Front-End Web Development course. I had played around with different online courses in coding before, but really found what I was looking for with OpenClassrooms. Fast forward 8 months, I had completed all projects and managed to get myself a job at Logitravel, a holiday booking site based in Palma, Mallorca.

  • lifestyle