Forem: Roseanna Mcfarlane

This One Weird Trick to Create a Website in Minutes

Roseanna Mcfarlane — Wed, 17 Jun 2020 07:07:14 +0000

Okay, so I have been intending to write this blog for a while now. I was lucky enough to be invited to the beta of Stackbit a while ago and I was absolutely blown away! This is a small write up discussing why I think the JAM Stack is the future of web development and how Stackbit is using it to empower web engineers to their full potential.

So let's get to the basics, what is the JAMStack? Unlike other applications stacks such as LAMP or MEAN, JAMStack is not about specific technologies as it is about how an application is built.

Modern web development continues to get more and more powerful. By simply using Javascript, API's and Markup you can leverage a number of third party resources to create powerful, full stack applications in minutes, without worrying about the overhead. Stackbit allows users to abstract away much of the setup required to create a JAMStack website and helps you to choose from a number of different Stack combinations.

It's 👏 so 👏 easy 👏!

Step 1:

Choose a theme. Stackbit makes it really easy by providing a selection of pre designed themes

Step 2:

Select your site generator

Choose from a wide selection of well known static site generators such as Gatsby and Jekyll.

Step 3:

Select the content management system / cms you want to use, or none. I choose Netlify's CMS because it's lightweight and simple to use.

That's it! No you can upload your content and style it however you please.

See live page here!

Deploy and Host in 30 Seconds with Netlify Drop

Roseanna Mcfarlane — Fri, 08 Mar 2019 12:37:25 +0000

"I had a website, but hosting was too expensive...other options look difficult to use"

This was something I heard recently from a family member. I immediately suggested they look into Netlify, specifically Netlify Drop.

Netlify has been around for a while now and they have built a really powerful platform with a huge number of tools and features. The best part? It's free and super easy to use!

Let's look at how easy it is for a non technical person to deploy and host a static web site with Netlify and their product Netlify Drop

Step 1: Setup your website folder correctly:

Ensure all the files are named correctly. Html should be in a file named index, CSS should be in a file named styles and Javascript should be in a file named scripts.

Step 2: Drag and Drop

Drag the folder from your pc into the browser and watch the magic happen.

And that's it!

Now you can go ahead and set up your own custom domain, hook the website up with Netlify's cms to manage blog posts or even add and manage forms!

Power to the people baby!

Check out the finished product which is now a bookmark for my newest prized possession Roseanna.dev

Using LaunchDarkly's Feature Flags with React to Display Real Time Information

Roseanna Mcfarlane — Thu, 17 Jan 2019 08:18:59 +0000

Have you ever needed to update information on a web page on short notice but found the whole process complicated, slow and error prone? Editing the code, re deploying...wouldn't it be great if you could do that in a simple admin console without changing any code?
Well you can with LaunchDarkly!

LaunchDarkly is a service that allows users to easily implement feature flags in their projects. Feature flags can be used to modify user defined features in a running app through the LaunchDarkly admin console.

This is incredibly powerful in cases where you would like to add a feature to a product but want to control it after deployment, avoiding the need for a re-deploy if you discover things don't go as planned.

Feature flags can also be used to roll out features to a specified percentage of users or users that meet certain requirements, allowing for super simple canary launches.

Aside from devops and feature rollouts there are many other real world use cases for LaunchDarkly.
In this post we’ll cover how you could use LaunchDarkly to display the results of a certain well-known sporting event (who shall not be explicitly named, but it's related to something Super 🏈) where there is no available API and the information needs to be manually updated.

LaunchDarkly helps you decouple deployment from release and also provides a mechanism for non-technical people to manage the behaviour of your running service.

So grab a drink and sit down with me as we explore the power of feature flags.
This example uses Create React App to spin up an empty project and Netlify for hosting. ❤️

Let's start with the quickstart tutorial. This takes you through the first steps of creating a feature flag.

First create a feature flag and choose a name. Then choose which application language you plan to use and select the environment it will be used for.

As this example is using React, I chose to use an integration which supports the use of LaunchDarkly with React LD-React.
It follows idiomatic React patterns and uses the websocket LaunchDarkly API so feature flag changes will be pushed to client without the need for a page refresh.

Note

Something to note with the use of the client side SDK is that you MUST manually enable feature flags for use client-side by checking a box in the settings section within the LaunchDarkly admin console. see below Otherwise you may find yourself scratching your head for a while asking yourself 'but whyyyyy?. Well, that's why.

The code snippet below shows a flag that is a simple boolean variable called showCountDown. It toggles a countdown React component on and off.

{
  this.props.flags.showCountDown ? (
    <H1Title>
      <Countdown date={"Sun, 03 Feb 2019"} />
    </H1Title>
  ) : (
    <div />
  );
}

This second flag is called a multivariate flag. It allows a user to define a number of variations which return a string value rather than a bool.
It has eight variations to represent all the teams competing in the sports event this example was based on. Go the Gliders!

Something you may notice when you have your first flag working is the page information is updated without reloading the page. This is great in the event of someone waiting for a page to update without refreshing it regularly. It ensures they will have the correct information immediately.

Aside from feature flags, LaunchDarkly also provides support for A/B testing and tracking goals.
Being able to display certain info/features for specific groups and then getting analytics on user interactions is very useful.

So go ahead and implement those flags! I would love to hear about how you're using feature flags in your applications.

For a closer look at the project check out the repo here or visit the live version.

Happy hacking.