Taking my babies to a conferenceBut this time it was different. I brought my babies to the conference. I was really worried about doing this as what would people think? And the voices start going off in my head. But why should I care. Cause you know, I just do.personal
Testing Staging and Production environments in PlaywrightWhen working with third party API's it is better to mock the API call rather than hit the API especially when they are API's that you do not control. Mocking the API allows you to finish developing your component or app and write the tests and then when the API is ready you can just swap out the mock for the real API call.playwrighttesting
Delivering a TalkHow can we walk on that stage with more confidence, deliver a great talk and not only own the stage but also connect with the audience. It’s not easy, but like everything it does get easier with practice. Let’s go over a few ways you can improve your public speaking skills, either for the big stage or for remote talks, and let’s discuss what is holding you back from becoming an amazing tech speaker.personalmentoringmotivation
Getting Started with Python and PlaywrightFor those new to Python here is a quick beginners guide on how to setup Python and Pytest and install Playwright. We then create an example test and run it in both headed and headless mode meaning with and without a browser window.playwrighttesting
Not One but TwoOn our 9th attempt at fertility treatment, we were super excited when the doctor called us 10 days after the transfer to tell us that we were pregnant. It had worked. I asked him if he was sure and he said "yes, very sure. But then when we had the first scan, we got a big surprise.personal
API Mocking for your Playwright testsWhen working with third party API's it is better to mock the API call rather than hit the API especially when they are API's that you do not control. Mocking the API allows you to finish developing your component or app and write the tests and then when the API is ready you can just swap out the mock for the real API call.playwrighttesting
Playwright's UI Mode - watch mode and time travel debuggingAre you looking for a more efficient way to execute and debug your end to end tests? Look no further than Playwright's UI Mode. In this guide, we'll explore the features of Playwright's UI Mode and show you how to take advantage of them for your test automation needs.playwrighttesting
A better global setup in Playwright reusing login with project dependenciesWhen you use global setup, you don't see a trace for the setup part of your tests and the setup doesn't appear in the HTML report. This can make debugging difficult. It's also not possible to use fixtures in global setup. In order to fix this issue, project dependencies were created.playwrighttesting
Setup a local dev server for your Playwright testsPlaywright comes with a webserver option in the config file which gives you the ability to launch a local dev server before running your tests. This is ideal for when writing your tests during development and when you don't have a staging or production url to test against.playwrighttesting
Testing Menus on Desktop and MobileWe 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.playwrighttesting
2022 Recap - Achieving your dreams DebbieAnd 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.personal
How To Locate Elements in PlaywrightIn 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.playwrighttesting
How to locate elements in PlaywrightHow 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 elementtestingplaywright
Migrating from Nuxt 2 to Nuxt 3My 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 YourselfCycle 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.personalmotivation
Testing a Sites Color Mode with PlaywrightMy 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?testingplaywright
Interviewing with the Big Tech CompaniesWhen 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.personal
Why Microsoft and How I achieved my GoalI 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".personal
Fixing Diversity in TechWhen 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.personal
The JavaScript Array.at() methodOften 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() methodThe .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 BalanceTo 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.personal
Finding courage and inspiration in the developer communityHow 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 SVGsWhen 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 DeveloperMany 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.personalmotivation
Being an ImposterIf 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.personalmotivation
Pagination in Nuxt ContentMy 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 PlaywrightLet'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.testingplaywright
Playwright Reports and TracesPlaywright 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.testingplaywright
Design Tokens and ThemingAs 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 TestingHow 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.testingplaywright
Testing iframes with PlaywrightHave 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.testingplaywright
Theming in ReactTheming 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 AdvocatesBeing 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.personaldev rel
Building a Cart Context ComponentCreating 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 ComponentWe 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?reacttesting
TypeScript and ChildrenWhat 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?typescriptreact
Building and Testing a Select ComponentBuilding 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.reacttesting
Testing a Button ComponentTesting a button component with React Testing Library. What to test and how to test your button component when building multiple compositions of the button.reacttesting
2021 - climbing higher and higherA 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.personal
Adding TailwindCSS to BitAdding 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 componentWhere 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 TypeScriptTypeScript 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.typescriptreact
Improve Performance with Nuxt ImageShowing the benefits of Nuxt image by analyzing the performance of my website before and after adding the Nuxt Image module.nuxtperformance
Publish Multiple Components to NPM with no package.jsons to MaintainSharing 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 ApplicationsWe 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?reactarchitecture
VS Code TipsTips, 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 HappenBelieving 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.personalmotivation
Discord as a Virtual OfficeWe 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.personal
Learning ReactRecently 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 SyndromeFor 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 MiddlewareMiddleware 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 ComponentWe 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 NetlifyIf 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 meWhat 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.personal
How Progressive Web Apps workProgressive 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.nuxtperformance
Adding Vue Plugins to your Nuxt APPIn 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 CoursesCreating 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.personal
Why I Love NuxtI 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?nuxtpersonal
Lite YouTube EmbedsIf 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.nuxtperformance
Adding analytics to your Nuxt siteWhen 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 sitenuxt
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.personal
Creating a Nuxt ModuleModules 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 CompanyThe 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 DirectivesVue 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.vuenuxt
Formatting a date in JavaScriptHow to format a date in JavaScript without using any libraries so you easily display dates in your Vue or Nuxt applicationjavascript
Advanced i18n in Nuxt using InterpolationsThat'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.nuxtvue
Being an Extrovert in a Virtual WorldFrom 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.personal
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.”personal
Why static sites are backWhen 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() methodThe .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 placejavascript
Adding a cookie consent bannerWhen 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 cypressLet'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.nuxttesting
Migrating to Nuxt contentIf 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
Create a Blog with Nuxt ContentThe 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.jsNuxt.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.jsMost 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.nuxtperformance
Advanced i18n in Nuxt using InterpolationsWith 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 configIn 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 modeThe @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.jsIn 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.jsAn 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 mobileSometimes 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.isOfflineDid 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 BarNuxt.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 NuxtAs 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.nuxtperformance
Page and Layout Transitions in Nuxt.jsWith 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 UIVue 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 SimpsonIt 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.personal
How learning to code changed my lifeA 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.personal
Meet Debbie, It Took Her Only 8 Months to Become a Front-End ArchitectEach 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!personal
What It’s Like To Work After Studying OnlineI 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.personal
