all posts

My Current Web Stack

article

11 days ago

When working as a freelance developer, it is essential to have a workflow based on the right tools for the right situations. In this article, I breakdown what I use to build websites for my clients and why I use them.

While I’m not a web designer or a web developer, working as a freelancer has seen me adopting the roles of both at times. In this post I will be talking about the technologies I use to fulfil client orders and why I use them. 

Planning

For drawing up wireframes, playing around with content and creating prototypes for my websites, I use Figma. 

In addition to being free, Figma has a components feature that I get a lot of use out of. Essentially, you can design reusable components (like buttons, cards and even typography) and make changes at the component level that will affect the whole design. 

Figma also allows you to collaborate with other designers and even your clients in an easy process.

It also allows me to create illustrations and import and edit SVG’s. All of these features come together to allow me to create designs and prototypes much quicker.

Jamstack

One of the best ways to explain why I’ve picked certain technologies, is to look at the overall methodology I use to approach web design.

Jamstack, while I won’t go into too much detail here, is the “tech stack” that I use. But rather than being a collection of certain languages and frameworks, it’s an acronym for an approach used to create websites for the modern web. 

To break it down:

  • J - using JavaScript frameworks to create a frontend.
  • A - consuming microservices through APIs in order to give an app functionality.
  • M - populating the content of your website using markdown.

These principles make for an approach that allows you to build lightning fast websites that look and feel great.

Frontend

To create the frontend of my websites, I primarily make use of GatsbyJS and a popular CSS framework, SASS. 

I mainly work with GatsbyJs because:

  • Being a static site generator, it provides the performance and SEO benefits of static sites, but has the functionality of dynamic, content driven sites.
  • It also allows you to leverage React, allowing you to make use of React Components, Redux forms etc. This provides the user with an improved user experience. 
  • Gatsby has an extensive plugin library, that allows you to integrate services (such as a CMS, E Commerce and even Google Sheets) seamlessly. 

I then use SASS to style my websites. It makes the process of writing CSS easier, allows for better organisation and makes things like browser support and responsive design less of a hassle. 

Content Management System

To manage any content on the website, I’ve chosen NetlifyCMS. While it’s not headless, it is modular and has a lot of cool features that makes it my choice. 

These features are:

  • It’s free - It is an open source, self hosted CMS, meaning that it’s hosted with your website so you don’t have to pay for any licensing or additional hosting. 
  • It sources content from a Git host - such as GitHub, allowing you to integrate your version control with your hosting.
  • Seamless integration with Netlify - While the two are mutually exclusive, NetlifyCMS is essentially a plug and play when hosting your site on Netlify. Things like Identities and triggering automated builds are all taken care of. 
  • Live Previews - You can preview changes you’ve made to the website in real time. This helps the client when they wish to make small changes to the website like adding a service or altering contact details on the landing page.
  • Use frontmatter to store data - You can use the frontmatter of your markdown files as a type of NoSQL database to store data, such as products, blogs or even an entire landing page.

Backend

To handle all the hosting, form admissions and even AB testing, I use Netlify. Even though Netlify can get pricey, it makes the process of getting your website out there as simple as can be. 

Things Netlify makes easy:

  • Allowing you to host your website through a CDN, to cut down loading times no matter where in the world you are. 
  • Host from your GitHub, to allow for version control and AB testing.
  • Free SSL certificates.
  • Allows you to create web hooks to do things like trigger builds to update your website.
  • Deploy websites faster and makes scaling effortless. 

Conclusion

What I hope you get out of this is to know that it doesn’t matter which technologies you use, as long as you use the technologies that are suited for your needs.

Thank you for reading and good luck on your journey.