Welcome to Debbie's blog

Building and Testing a Counter Component

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?

January 12, 2022

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?

January 11, 2022

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.

January 10, 2022

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.

January 7, 2022

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.

December 31, 2021

Adding TailwindCSSS 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.

December 30, 2021

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?

December 23, 2021

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.

October 6, 2021

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.

September 16, 2021

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.

May 13, 2021

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.

April 26, 2021

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.

April 3, 2021

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.

March 21, 2021

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.

February 18, 2021

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.

February 16, 2021

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.

February 7, 2021

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.

February 5, 2021

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.

February 4, 2021

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.

February 2, 2021

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.

January 31, 2021

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?

January 30, 2021

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.

January 29, 2021

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

January 28, 2021

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.

December 30, 2020

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.

October 16, 2020

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

October 9, 2020

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.

September 12, 2020

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

August 9, 2020

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.

July 29, 2020

Using Apollo to Fetch Data

Using Apollo to Fetch Data from a GraphQL API

July 17, 2020

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.

July 17, 2020

Fetching graphQL queries

July 17, 2020

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.

July 17, 2020

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.

June 28, 2020

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

June 28, 2020

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.

April 24, 2020

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?

April 23, 2020

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.

April 21, 2020

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.

April 20, 2020

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?

April 17, 2020

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.

April 16, 2020

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.

April 13, 2020

Welcome to my blog

Building and Testing a Counter Component

TypeScript and Children

Building and Testing a Select Component

Testing a Button Component

2021 - climbing higher and higher

Adding TailwindCSSS to Bit

Building an ecommerce Product details component

Understanding TypeScript

Improve Performance with Nuxt Image

VS Code Tips

Amazing Things are Going to Happen

Discord as a Virtual Office

Learning React

Understanding Nuxt Middleware

Customizing the Nuxt Loading Component

Deploying your Nuxt app to Netlify

Why Live Streams Scare me

How Progressive Web Apps work

Adding Vue Plugins to your Nuxt APP

Creating Video Courses

Why I Love Nuxt

Lite YouTube Embeds

Adding analytics to your Nuxt site

2020 - my most successful year (career wise)

Vue Directives

Formatting a date in JavaScript

Being an Extrovert in a Virtual World

The JavaScript Array.Map() method

Adding a cookie consent banner

Using Apollo to Fetch Data

Migrating to Nuxt content

Fetching graphQL queries

Setting up cypress

Adding a PWA in Nuxt.js

Styling your active classes in Nuxt.js

ignoring your files with Nuxt.js

Creating an error page in Nuxt.js

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

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

The Nuxt Loading Progress Bar

Let's Analyze your webpack bundles with Nuxt

Page and Layout Transitions in Nuxt.js