A self-hosted saga of Docker networking, Astro binding issues, and GitHub Actions runner drama. How to self-host n8n on Linode with Docker, Caddy, and Cloudflare Tunnel. A complete guide from setup to troubleshooting. Recently, I've been looking at hosting the sites I manage on my own server again. It's been a few years since I've done this. I've mostly used Netlify and Vercel for their speed and ease of use. However, I'd like to have more control over hosting, so I'm heading out on the adventure once again to self host (sort of) through Linode as well as a monitoring service that I can manage. React has revolutionized the way we think about UI development, turning it into a more component-centric approach. One of the hooks that stands out in making this approach seamless is the `useEffect` hook. The optional chaining operator is a powerful tool in a developer's arsenal. It streamlines code, improves readability, and prevents potential errors. As with all tools, understanding its purpose and proper usage is key. So you've learned the basics, coded a few personal projects, and now you're wondering: 'What's next?' How about diving into the vast ocean of open source projects? Trust me, the water's warm! 🏊♂️ I've been writing a ton of unit tests and snapshot tests lately. While doing so, I have had to mock out a few things. This includes the `ActivatedRoute`. So let's say we have the following component. Sometimes you need to reference a DOM element inside an angular template. We can do this with JavaScript using the `document.getElementById('title');`, however this is considered bad practice. The Angular CLI ships with Jasmine and Karma to run unit tests. However, out of the box, the unit tests are a bit slow for my tastes. Using Jest for our unit tests speeds things up and only runs the tests when the component has been changed. Pre-rendering a Single Page Application does not only give the user performance benefits but also allows search engines to successfully crawl your site. This is pretty important for clients who take SEO seriously! Currently, Angular Universal gives you two options, pre-rendering and re-rendering. It has been my experience that using anything but CSS causes issues with Angular Universal. So I've had to come up with other solutions. One such solution is to eject the Angular CLI and add a pre-render plugin to your webpack config. I thought it would be fun to write an app that uses the Punk API with the Angular CLI and Angular Material. My plan is to build this app over the span of a few blog posts. Part I will focus on the set up of Angular, Angular Material. I have decided to move my blog from Ghost to Hugo. I have enjoyed using Ghost, but I wanted to play around with some static site generators and host it with GitHub Pages. I have been using a Ghost, Docker and Digital Ocean setup and have enjoyed it, but it was time to break something. Recently, I was asked by a friend of mine how he would go about getting started in web development. So, I figured I would write a blog post on it and help him out, along with anyone else who might stumble across this. I was recently tasked with building out an email newsletter. Honestly, I was dreading the task. Luckily, I did a bit of research before I started out on this adventure and found Foundation for Emails. Since I have had this blog up and running, I've been using ghost with a Digital Ocean virtual machine. If you're looking to go that route, I have written a quick tutorial on that here. I have not had any issues, but since I have been using Docker more and more, I decided it was finally time to throw my blog into a container. I have been looking for a straight forward way to use email templates in a contact form. I have searched and searched with no real success. So, I thought I would write a tutorial on how to build a (very!) simple contact page that uses an email template. This uses Express, Nodemailer and node-email-templates. In part II of this tutorial, we will get this random quote generator working with some jQuery. If you haven't read part I, I would suggest doing so now as I won't be covering any styling in this part of the tutorial. I decided to revisit a project I completed a while ago that displays a random quote from Forismatic. This project is also part of the Free Code Camp curriculum that I have been completing in my spare time. I originally used Bootstrap to help with the layout of the page. I figured I would rewrite it without the help of a CSS framework to lean against, using flexbox. I have made a codepen for anyone who wants to look at the finished product. I decided to continue with the small flexbox tutorials. So here is another one. In this tutorial, we will make a navigation header using flexbox. If you haven't read my first post on flexbox, you should check it out here. I have made a codepen of what we will be building. Let's get started with the HTML. So, now that I work with a team of web developers, I am constantly learning new things. One of the many new things I've learned about, is flexbox. I have to admit, I found it very intimidating at first. I figured I'd make a small tutorial about flexbox using a very simple navigation menu. So I've decided to start a blog and write about my journey of starting a new career. I just landed a job as a Junior Web Developer and I really wish I would have done this sooner! My goal for this blog is to gain a better understanding of the topics that I post about and hopefully help other new developers find their way through the maze of learning to code. I know there are numerous tutorials on how to setup Ghost with Digital Ocean, but I figured I'd throw mine into the hat. This will be a quick and to the point tutorial of how to get your start a Ghost blog with Digital Ocean.