About The Author

Bryan is a designer, developer, and educator with a passion for CSS and static sites. He actively works to mentor and teach developers and designers the value …
More about

In this article, we’ll create a personal bookmarking site using FaunaDB, Netlify Functions and 11ty data files.

The JAMstack (JavaScript, APIs and Markup) revolution is in full swing. Static sites are secure, fast, reliable and fun to work on. At the heart of the JAMstack are static site generators (SSGs) that store your data as flat files: Markdown, YAML, JSON, HTML, and so on. Sometimes, managing data this way can be overly complicated. Sometimes, we still need a database.

With that in mind, Netlify — a static site host and FaunaDB — a serverless cloud database — collaborated to make combining both systems easier. 

Why A Bookmarking Site?

The JAMstack is great for many professional uses, but one of my favorite aspects of this set of technology is its low barrier to entry for personal tools and projects.

There are plenty of good products on the market for most applications I could come up with, but none would be exactly set up for me. None would give me full control over my content. None would come without a cost (monetary or informational).

With that in mind, we can create our own mini-services using JAMstack methods. In this case, we’ll be creating a site to store and publish any interesting articles I come across in my daily technology reading.

I spend a lot of time reading articles that have been shared on Twitter. When I like one, I hit the “heart” icon. Then, within a few days, it’s nearly impossible to find with the influx of new favorites. I want to build something as close to the ease of the “heart,” but that I own and control.

How are we going to do that? I’m glad you asked.

Interested in getting the code? You can grab it on Github or just deploy straight to Netlify from that repository! Take a look at the finished product here.

Our Technologies

Hosting And Serverless Functions: Netlify

For hosting and serverless functions, we’ll be utilizing Netlify. As an added bonus, with the new collaboration mentioned above, Netlify’s CLI — “Netlify Dev” — will automatically connect to FaunaDB and store our API keys as environment variables.

Database: FaunaDB

FaunaDB is a “serverless” NoSQL database. We’ll be using it to store our bookmarks data.

Static Site Generator: 11ty

I’m a big believer in HTML. Because of this, the tutorial won’t be using front-end JavaScript to render our bookmarks. Instead, we’ll utilize 11ty as a static site generator. 11ty has built-in data functionality that makes fetching data from an API as easy as writing a couple of short JavaScript functions.

iOS Shortcuts

We’ll need an easy way to post data to our database. In this case, we’ll use iOS’s Shortcuts app. This could be converted to an Android or desktop JavaScript bookmarklet, as well.

Setting Up FaunaDB Via Netlify Dev

Whether you have already signed up for FaunaDB or you need to create a new account, the easiest way to set up a link between FaunaDB and Netlify is via Netlify’s CLI: Netlify Dev. You can find full instructions from FaunaDB here or follow along below.

Netlify Dev running in the final project with our environment variable names showing
Netlify Dev running in the final project with our environment variable names showing (Large preview)

If you don’t already have this installed, you can run the following command in Terminal:

npm install netlify-cli -g

From within your project directory, run through the following commands:

netlify init // This will connect your project to a Netlify project

netlify addons:create fauna // This will install the FaunaDB "addon"

netlify addons:auth fauna // This command will run you through connecting your account or setting up an account

Once this is all connected, you can run netlify dev in your project. This will run any build scripts we set up, but also connect to the Netlify and FaunaDB services and grab any necessary environment variables. Handy!

Creating Our First Data

From here, we’ll log into FaunaDB and create our first data set. We’ll start by creating a new Database called “bookmarks.” Inside a Database, we have Collections, Documents and Indexes.

A screenshot of the FaunaDB console with data
A screenshot of the FaunaDB console with data (Large preview)

A Collection is a categorized group of data. Each piece of data takes the form of a Document. A Document is a “single, changeable record within a FaunaDB database,” according to Fauna’s documentation. You can think of Collections as a traditional database table and a Document as a row.

For our application, we need one Collection, which we’ll call “links.” Each document within the “links” Collection will be a simple JSON object with three properties. To start, we’ll add a new Document that we’ll use to build our first data fetch.

  "url": "https://css-irl.info/debugging-css-grid-part-2-what-the-fraction/",
  "pageTitle": "CSS { In Real Life } | Debugging CSS Grid – Part 2: What the Fr(action)?",
  "description": "CSS In Real Life is a blog covering CSS topics and useful snippets on the web’s most beautiful language. Published by Michelle Barker, front end developer at Ordoo and CSS superfan."

This creates the basis for the information we’ll need to pull from our bookmarks as well as provides us with our first set of data to pull into our template.

If you’re like me, you want to see the fruits of your labor right away. Let’s get something on the page!

Installing 11ty And Pulling Data Into A Template

Since we want the bookmarks to be rendered in HTML and not fetched by the browser, we’ll need something to do the rendering. There are many great ways of doing it, but for ease and power, I love using the 11ty static site generator.

Since 11ty is a JavaScript static site generator, we can install it via NPM.

npm install --save @11ty/eleventy

From that installation, we can run eleventy or eleventy --serve in our project to get up and running.

Netlify Dev will often detect 11ty as a requirement and run the command for us. To have this work – and make sure we’re ready to deploy, we can also create “serve” and “build” commands in our package.json.

"scripts": {
    "build": "npx eleventy",
    "serve": "npx eleventy --serve"

11ty’s Data Files

Most static site generators have an idea of a “data file” built-in. Usually, these files will be JSON or YAML files that allow you to add extra information to your site.

In 11ty, you can use JSON data files or JavaScript data files. By utilizing a JavaScript file, we can actually make our API calls and return the data directly into a template.

The file will be a JavaScript module. So in order to have anything work, we need to export either our data or a function. In our case, we’ll export a function.

module.exports = async function() {  
    const data = mapBookmarks(await getBookmarks());  

    return data.reverse()  

Let’s break that down. We have two functions doing our main work here: mapBookmarks() and getBookmarks()

The getBookmarks() function will go fetch our data from our FaunaDB database and mapBookmarks() will take an array of bookmarks and restructure it to work better for our template.

Let’s dig deeper into getBookmarks().


First, we’ll need to install and initialize an instance of the FaunaDB JavaScript driver.

npm install --save faunadb

Now that we’ve installed it, let’s add it to the top of our data file. This code is straight from Fauna’s docs.

// Requires the Fauna module and sets up the query module, which we can use to create custom queries.
const faunadb = require('faunadb'),  
      q = faunadb.query;

// Once required, we need a new instance with our secret
var adminClient = new faunadb.Client({  
   secret: process.env.FAUNADB_SERVER_SECRET  

After that, we can create our function. We’ll start by building our first query using built-in methods on the driver. This first bit of code will return the database references we can use to get full data for all of our bookmarked links. We use the Paginate method, as a helper to manage cursor state should we decide to paginate the data before handing it to 11ty. In our case, we’ll just return all the references.

In this example, I’m assuming you installed and connected FaunaDB via the Netlify Dev CLI. Using this process, you get local environment variables of the FaunaDB secrets. If you didn’t install it this way or aren’t running netlify dev in your project, you’ll need a package like dotenv to create the environment variables. You’ll also need to add your environment variables to your Netlify site configuration to make deploys work later.

       q.Match( // Match the reference below
           q.Ref("indexes/all_links") // Reference to match, in this case, our all_links index  
   .then( response => { ... })

This code will return an array of all of our links in reference form. We can now build a query list to send to our database.

    .then((response) => {  
        const linkRefs = response.data; // Get just the references for the links from the response 
        const getAllLinksDataQuery = linkRefs.map((ref) => {  
        return q.Get(ref) // Return a Get query based on the reference passed in  

return adminClient.query(getAllLinksDataQuery).then(ret => {  
    return ret // Return an array of all the links with full data  

From here, we just need to clean up the data returned. That’s where mapBookmarks() comes in!


In this function, we deal with two aspects of the data.

First, we get a free dateTime in FaunaDB. For any data created, there’s a timestamp (ts) property. It’s not formatted in a way that makes Liquid’s default date filter happy, so let’s fix that.

function mapBookmarks(data) {
    return data.map(bookmark => {
        const dateTime = new Date(bookmark.ts / 1000);

With that out of the way, we can build a new object for our data. In this case, it will have a time property, and we’ll use the Spread operator to destructure our data object to make them all live at one level.

function mapBookmarks(data) {
    return data.map(bookmark => {
        const dateTime = new Date(bookmark.ts / 1000);

        return { time: dateTime, ...bookmark.data }

Here’s our data before our function:

  ref: Ref(Collection("links"), "244778237839802888"),
  ts: 1569697568650000,
  data: { 
    url: 'https://sample.com',
    pageTitle: 'Sample title',
    description: 'An escaped description goes here' 

Here’s our data after our function:

    time: 1569697568650,
    url: 'https://sample.com',
    pageTitle: 'Sample title'
    description: 'An escaped description goes here'

Now, we’ve got well-formatted data that’s ready for our template!

Let’s write a simple template. We’ll loop through our bookmarks and validate that each has a pageTitle and a url so we don’t look silly.

{% for link in bookmarks %} {% if link.url and link.pageTitle %} // confirms there’s both title AND url for safety

{{ link.pageTitle }}

Saved on {{ link.time | date: "%b %d, %Y" }}

{% if link.description != "" %}

{{ link.description }}

{% endif %}
{% endif %} {% endfor %}

We’re now ingesting and displaying data from FaunaDB. Let’s take a moment and think about how nice it is that this renders out pure HTML and there’s no need to fetch data on the client side!

But that’s not really enough to make this a useful app for us. Let’s figure out a better way than adding a bookmark in the FaunaDB console.

Enter Netlify Functions

Netlify’s Functions add-on is one of the easier ways to deploy AWS lambda functions. Since there’s no configuration step, it’s perfect for DIY projects where you just want to write the code.

This function will live at a URL in your project that looks like this: https://myproject.com/.netlify/functions/bookmarks assuming the file we create in our functions folder is bookmarks.js.

Basic Flow

  1. Pass a URL as a query parameter to our function URL.
  2. Use the function to load the URL and scrape the page’s title and description if available.
  3. Format the details for FaunaDB.
  4. Push the details to our FaunaDB Collection.
  5. Rebuild the site.


We’ve got a few packages we’ll need as we build this out. We’ll use the netlify-lambda CLI to build our functions locally. request-promise is the package we’ll use for making requests. Cheerio.js is the package we’ll use to scrape specific items from our requested page (think jQuery for Node). And finally, we’ll need FaunaDb (which should already be installed.

npm install --save netlify-lambda request-promise cheerio

Once that’s installed, let’s configure our project to build and serve the functions locally.

We’ll modify our “build” and “serve” scripts in our package.json to look like this:

"scripts": {
    "build": "npx netlify-lambda build lambda --config ./webpack.functions.js && npx eleventy",
    "serve": "npx netlify-lambda build lambda --config ./webpack.functions.js && npx eleventy --serve"

Warning: There’s an error with Fauna’s NodeJS driver when compiling with Webpack, which Netlify’s Functions use to build. To get around this, we need to define a configuration file for Webpack. You can save the following code to a newor existingwebpack.config.js.

const webpack = require('webpack');

module.exports = {
  plugins: [ new webpack.DefinePlugin({ "global.GENTLY": false }) ]

Once this file exists, when we use the netlify-lambda command, we’ll need to tell it to run from this configuration. This is why our “serve” and “build scripts use the --config value for that command.

Function Housekeeping

In order to keep our main Function file as clean as possible, we’ll create our functions in a separate bookmarks directory and import them into our main Function file.

import { getDetails, saveBookmark } from "./bookmarks/create";


The getDetails() function will take a URL, passed in from our exported handler. From there, we’ll reach out to the site at that URL and grab relevant parts of the page to store as data for our bookmark.

We start by requiring the NPM packages we need:

const rp = require('request-promise');  
const cheerio = require('cheerio');

Then, we’ll use the request-promise module to return an HTML string for the requested page and pass that into cheerio to give us a very jQuery-esque interface.

const getDetails = async function(url) {  
    const data = rp(url).then(function(htmlString) {  
        const $ = cheerio.load(htmlString);  

From here, we need to get the page title and a meta description. To do that, we’ll use selectors like you would in jQuery. 

Note: In this code, we use 'head > title' as the selector to get the title of the page. If you don’t specify this, you may end up getting </code> <em>tags inside of all SVGs on the page, which is less than ideal.</em></p> <div> <pre><code>const getDetails = async function(url) { const data = rp(url).then(function(htmlString) { const $ = cheerio.load(htmlString); const title = $('head > title').text(); // Get the text inside the tag const description = $('meta[name="description"]').attr('content'); // Get the text of the content attribute // Return out the data in the structure we expect return { pageTitle: title, description: description }; }); return data //return to our main function }</code></pre> </div> <p>With data in hand, it’s time to send our bookmark off to our Collection in FaunaDB!</p> <h4 id="savebookmark-details"><code>saveBookmark(details)</code></h4> <p>For our save function, we’ll want to pass the details we acquired from <code>getDetails</code> as well as the URL as a singular object. The Spread operator strikes again!</p> <pre><code>const savedResponse = await saveBookmark({url, ...details});</code></pre> <p>In our <code>create.js</code> file, we also need to require and setup our FaunaDB driver. This should look very familiar from our 11ty data file.</p> <pre><code>const faunadb = require('faunadb'), q = faunadb.query; const adminClient = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET }); </code></pre> <p>Once we’ve got that out of the way, we can code.</p> <p>First, we need to format our details into a data structure that Fauna is expecting for our query. Fauna expects an object with a data property containing the data we wish to store.</p> <pre><code>const saveBookmark = async function(details) { const data = {    data: details }; ... }</code></pre> <p>Then we’ll open a new query to add to our Collection. In this case, we’ll use our query helper and use the Create method. Create() takes two arguments. First is the Collection in which we want to store our data and the second is the data itself.</p> <p>After we save, we return either success or failure to our handler.</p> <div> <pre><code>const saveBookmark = async function(details) { const data = { data: details }; return adminClient.query(q.Create(q.Collection("links"), data)) .then((response) => { /* Success! return the response with statusCode 200 */ return { statusCode: 200, body: JSON.stringify(response) } }).catch((error) => { /* Error! return the error with statusCode 400 */ return { statusCode: 400, body: JSON.stringify(error) } }) }</code></pre> </div> <p>Let’s take a look at the full Function file.</p> <div> <pre><code>import { getDetails, saveBookmark } from "./bookmarks/create"; import { rebuildSite } from "./utilities/rebuild"; // For rebuilding the site (more on that in a minute) exports.handler = async function(event, context) { try { const url = event.queryStringParameters.url; // Grab the URL const details = await getDetails(url); // Get the details of the page const savedResponse = await saveBookmark({url, ...details}); //Save the URL and the details to Fauna if (savedResponse.statusCode === 200) { // If successful, return success and trigger a Netlify build await rebuildSite(); return { statusCode: 200, body: savedResponse.body } } else { return savedResponse //or else return the error } } catch (err) { return { statusCode: 500, body: `Error: ${err}` }; } }; </code></pre> </div> <h4 id="rebuildsite"><code>rebuildSite()</code></h4> <p>The discerning eye will notice that we have one more function imported into our handler: <code>rebuildSite()</code>. This function will use Netlify’s Deploy Hook functionality to rebuild our site from the new data every time we submit a new — successful — bookmark save.</p> <p>In your site’s settings in Netlify, you can access your Build & Deploy settings and create a new “Build Hook.” Hooks have a name that appears in the Deploy section and an option for a non-master branch to deploy if you so wish. In our case, we’ll name it “new_link” and deploy our master branch.</p> <figure><a href="https://brayve.net/wp-content/uploads/2019/10/echo/bookmarking-application-faunadb-netlify-11ty-netlify-build-hook.png"><img alt="A visual reference for the Netlify Admin’s build hook setup" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://brayve.net/wp-content/uploads/2019/10/echo/bookmarking-application-faunadb-netlify-11ty-netlify-build-hook.png" ></img></a><figcaption>A visual reference for the Netlify Admin’s build hook setup (<a href="https://brayve.net/wp-content/uploads/2019/10/echo/bookmarking-application-faunadb-netlify-11ty-netlify-build-hook.png">Large preview</a>)</figcaption></figure> <p>From there, we just need to send a POST request to the URL provided.</p> <p>We need a way of making requests and since we’ve already installed <code>request-promise</code>, we’ll continue to use that package by requiring it at the top of our file.</p> <div> <pre><code>const rp = require('request-promise'); const rebuildSite = async function() { var options = { method: 'POST', uri: 'https://api.netlify.com/build_hooks/5d7fa6175504dfd43377688c', body: {}, json: true }; const returned = await rp(options).then(function(res) { console.log('Successfully hit webhook', res); }).catch(function(err) { console.log('Error:', err); }); return returned } </code></pre> </div> <figure><iframe allowfullscreen="" data-src="https://player.vimeo.com/video/368119408" frameborder="0" height="480" mozallowfullscreen="" webkitallowfullscreen="" width="600"></iframe><figcaption>A demo of the Netlify Function setup and the iOS Shortcut setup combined</figcaption></figure> <h3 id="setting-up-an-ios-shortcut">Setting Up An iOS Shortcut</h3> <p>So, we have a database, a way to display data and a function to add data, but we’re still not very user-friendly.</p> <p>Netlify provides URLs for our Lambda functions, but they’re not fun to type into a mobile device. We’d also have to pass a URL as a query parameter into it. That’s a LOT of effort. How can we make this as little effort as possible?</p> <figure><a href="https://brayve.net/wp-content/uploads/2019/10/echo/bookmarking-application-faunadb-netlify-11ty-ios-shortcuts-image.png"><img alt="A visual reference for the setup for our Shortcut functionality" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://brayve.net/wp-content/uploads/2019/10/echo/bookmarking-application-faunadb-netlify-11ty-ios-shortcuts-image.png" ></img></a><figcaption>A visual reference for the setup for our Shortcut functionality (<a href="https://brayve.net/wp-content/uploads/2019/10/echo/bookmarking-application-faunadb-netlify-11ty-ios-shortcuts-image.png">Large preview</a>)</figcaption></figure> <p>Apple’s Shortcuts app allows the building of custom items to go into your share sheet. Inside these shortcuts, we can send various types of requests of data collected in the share process.</p> <p>Here’s the step-by-step Shortcut:</p> <ol> <li>Accept any items and store that item in a “text” block.</li> <li>Pass that text into a “Scripting” block to URL encode (just in case).</li> <li>Pass that string into a URL block with our Netlify Function’s URL and a query parameter of <code>url</code>.</li> <li>From “Network” use a “Get contents” block to POST to JSON to our URL.</li> <li>Optional: From “Scripting” “Show” the contents of the last step (to confirm the data we’re sending).</li> </ol> <p>To access this from the sharing menu, we open up the settings for this Shortcut and toggle on the “Show in Share Sheet” option.</p> <p>As of iOS13, these share “Actions” are able to be favorited and moved to a high position in the dialog.</p> <p>We now have a working “app” for sharing bookmarks across multiple platforms!</p> <p>If you’re inspired to try this yourself, there are a lot of other possibilities to add functionality. The joy of the DIY web is that you can make these sorts of applications work for you. Here are a few ideas:</p> <ol> <li>Use a faux “API key” for quick authentication, so other users don’t post to your site (mine uses an API key, so don’t try to post to it!).</li> <li>Add tag functionality to organize bookmarks.</li> <li>Add an RSS feed for your site so that others can subscribe.</li> <li>Send out a weekly roundup email programmatically for links that you’ve added.</li> </ol> <p>Really, the sky is the limit, so start experimenting!</p> <p><img alt="Smashing Editorial" src="https://brayve.net/wp-content/uploads/2019/10/echo/logo--red.png5db1ab6e22edb.jpg"></img><span>(dm, yk)</span></p> </div> </div> </div> </div> </article> </div> </div> </div> <nav class="navigation post-navigation" aria-label="Posts"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="https://brayve.net/blog/2019/10/24/tiktok-continues-to-lead-social-app-download-rankings-in-september/" rel="prev"><i class="font-icon-post fa fa-angle-double-left"></i><span class="meta-nav" aria-hidden="true">Previous:</span> <span class="screen-reader-text">Previous post:</span> <span class="post-title">TikTok Continues to Lead Social App Download Rankings in September</span></a></div><div class="nav-next"><a href="https://brayve.net/blog/2019/10/24/barry-schwartz-on-covering-seo-news-productivity-how-to-grow-a-business-podcast/" rel="next"><span class="meta-nav" aria-hidden="true">Next:</span> <span class="screen-reader-text">Next post:</span> <span class="post-title">Barry Schwartz on Covering SEO News, Productivity & How to Grow a Business [PODCAST]</span><i class="font-icon-post fa fa-angle-double-right"></i></a></div></div> </nav> </div> </div> </div> <div class="sidebar col-sm-4 col-md-3"> <div class="sidebar-row"> <div id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://brayve.net/"> <label> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search …" value="" name="s"/> </label> </form> </div> <div id="recent-posts-2" class="widget widget_recent_entries"> <h5 class="widgettitle">Recent Posts</h5> <ul> <li> <a href="https://brayve.net/blog/2019/12/23/the-best-stock-art-websites/">The best stock art websites</a> </li> <li> <a href="https://brayve.net/blog/2019/12/23/the-guide-to-successful-silent-videos-for-facebook-video-ads-examples/">The Guide to Successful Silent Videos for Facebook Video Ads (+ Examples)</a> </li> <li> <a href="https://brayve.net/blog/2019/12/23/icann-requests-answers-about-sale-of-dot-org-registry-via-martinibuster/">ICANN Requests Answers About Sale of Dot Org Registry via @martinibuster</a> </li> <li> <a href="https://brayve.net/blog/2019/12/23/19-best-portfolios-of-2019/">19 Best Portfolios of 2019</a> </li> <li> <a href="https://brayve.net/blog/2019/12/23/web-design-basics-10-tips-for-effective-visual-communication-infographic/">Web Design Basics: 10 Tips for Effective Visual Communication [Infographic]</a> </li> </ul> </div><div id="categories-2" class="widget widget_categories"><h5 class="widgettitle">Categories</h5> <ul> <li class="cat-item cat-item-67"><a href="https://brayve.net/blog/category/affiliate-marketing/" title="Affiliate marketing is not just for the digital Gurus. It is one of the best ways for a new start up to monetise their site. With a few tweaks to keep bringing the visitors back, those clicks add up. And clicks equal cash. Particularly for businesses that are remote, such as the businesses in Wales. The web design and marketing team in Brecon know how to boost your visibility and SEO using an affiliate strategy. Carefully woven together with a content development strategy and web design our South Wales web designer in Brecon and Cardiff will help to implement a marketing approach that works for you Affiliate marketing works two ways. You can also implement the methods involved to boost your own sales and build your business using influencers. Using content as an opportunity to integrate other strategies is a well known method to increase visibility and online income. Adding links to your content will make it richer, more attractive to the search engines and monetise your business.">Affiliate Marketing</a> </li> <li class="cat-item cat-item-101"><a href="https://brayve.net/blog/category/blogging/">Blogging</a> </li> <li class="cat-item cat-item-63"><a href="https://brayve.net/blog/category/brecon-web-design/" title="In Our Brecon Web design Office we offer all the agency services you would expect in the city. Brecon Web Design Local Web design is in demand and their are several small businesses serving the area. However none of the other services are part of a greater partnership that can offer a complete agency service. Our service extends to SEO, Copywriting, Content development and more. Content Content for web development is more than simply colour, fonts and shape. It includes video and image content as well as SEO optimised written content. This content has to be properly optimised to improve searchability and quality values. E-commerce is a core part of modern online presence for retailers and we have the experts, the capacity and the resources to provide a world class development project, whether you are based at your kitchen table or your corporate headquarters.">Brecon</a> </li> <li class="cat-item cat-item-73"><a href="https://brayve.net/blog/category/brecon-web-design-2/">Brecon Web Design</a> </li> <li class="cat-item cat-item-2"><a href="https://brayve.net/blog/category/business/">Business</a> </li> <li class="cat-item cat-item-33"><a href="https://brayve.net/blog/category/cardiff-web-development/">Cardiff Web development</a> </li> <li class="cat-item cat-item-76"><a href="https://brayve.net/blog/category/content-development/">Content Development</a> </li> <li class="cat-item cat-item-96"><a href="https://brayve.net/blog/category/content-marketing/">Content marketing</a> </li> <li class="cat-item cat-item-95"><a href="https://brayve.net/blog/category/digital-marketing/">Digital Marketing</a> </li> <li class="cat-item cat-item-159"><a href="https://brayve.net/blog/category/ecommerce/">Ecommerce</a> </li> <li class="cat-item cat-item-110"><a href="https://brayve.net/blog/category/facebook/">Facebook</a> </li> <li class="cat-item cat-item-416"><a href="https://brayve.net/blog/category/mid-wales-web-design/">Mid Wales Web Design</a> </li> <li class="cat-item cat-item-4"><a href="https://brayve.net/blog/category/news/">News</a> </li> <li class="cat-item cat-item-147"><a href="https://brayve.net/blog/category/wordpress/plugins/">Plugins</a> </li> <li class="cat-item cat-item-150"><a href="https://brayve.net/blog/category/plugins-2/">Plugins</a> </li> <li class="cat-item cat-item-64"><a href="https://brayve.net/blog/category/seo/">SEO</a> </li> <li class="cat-item cat-item-92"><a href="https://brayve.net/blog/category/social-media-marketing/">Social Media Marketing</a> </li> <li class="cat-item cat-item-140"><a href="https://brayve.net/blog/category/tutorials/">Tutorials</a> </li> <li class="cat-item cat-item-1"><a href="https://brayve.net/blog/category/uncategorized/">Uncategorized</a> </li> <li class="cat-item cat-item-83"><a href="https://brayve.net/blog/category/wales-web-design/">Wales Web design</a> </li> <li class="cat-item cat-item-141"><a href="https://brayve.net/blog/category/web-design/">Web Design</a> </li> <li class="cat-item cat-item-89"><a href="https://brayve.net/blog/category/wordpress/">WordPress</a> </li> <li class="cat-item cat-item-132"><a href="https://brayve.net/blog/category/wordpress-news/">WordPress News</a> </li> </ul> </div> </div> </div> </div> </div> </div> <div class='footer footer-contact-boxes'> <div class='footer-content'> <div class="gridContainer"> <div class="row text-center"> <div class="col-sm-3"> <div data-type="group" data-dynamic-mod="true"> <i class="big-icon fa fa-map-marker"></i> <p> <p>Brayve Digital Development :</p> <p>Registration: 12704706 </p> Unit 23 Ffwrdgrech Industrial Estate Brecon LD3 8LA <p>Post: 21 Llys Meillion, Llyswen, Brecon, LD3 0US</p> </p> </div> </div> <div class="col-sm-3"> <div data-type="group" data-dynamic-mod="true"> <i class="big-icon fa fa-envelope-o"></i> <p> <p>info@brayve.net</p> <a href="https://brayve.net/blog/wpautoterms/terms-and-conditions/">Terms and Conditions</a> <p> <a href="https://brayve.net/blog/wpautoterms/privacy-policy/">Privacy Policy</a></p> </p> </div> </div> <div class="col-sm-3"> <div data-type="group" data-dynamic-mod="true"> <i class="big-icon fa fa-phone"></i> <p> +44 (1874) 202 110 </p> </div> </div> <div class="col-sm-3 footer-bg-accent"> <div> <div data-type="group" data-dynamic-mod="true" class="footer-social-icons"> </div> </div> <p class="copyright">©  2022 Brayve Digital. Built using WordPress and the <a rel="nofollow" target="_blank" href="https://extendthemes.com/go/built-with-mesmerize/" class="mesmerize-theme-link">Mesmerize theme</a></p> </div> </div> </div> </div> </div> </div> <!-- Start Subscriber Embed Code --> <script type="text/javascript"> var subscribersSiteId = '3e5d1739-04e6-409a-8dd8-d29ab6c4e79d'; var subscribersServiceWorkerPath = '/?firebase-messaging-sw'; </script> <script type="text/javascript" src="https://cdn.subscribers.com/assets/subscribers.js"></script> <!-- End Subscriber Embed Code --><!--googleoff: all--><div id="cookie-law-info-bar" data-nosnippet="true"><h5 class="cli_messagebar_head">EU and UK GDPR Notice</h5><span><div class="cli-bar-container cli-style-v2"><div class="cli-bar-message">We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.</br><div class="wt-cli-ccpa-element"> <a style="color:#333333" class="wt-cli-ccpa-opt-out">Do not sell my personal information</a>.</div></div><div class="cli-bar-btn_container"><a role='button' class="medium cli-plugin-button cli-plugin-main-button cli_settings_button" style="margin:0px 10px 0px 5px">Settings</a><a role='button' data-cli_action="accept" id="cookie_action_close_header" class="small cli-plugin-button cli-plugin-main-button cookie_action_close_header cli_action_button">Accept</a></div></div></span></div><div id="cookie-law-info-again" data-nosnippet="true"><span id="cookie_hdr_showagain">Privacy & Cookies Policy</span></div><div class="cli-modal" data-nosnippet="true" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true"> <div class="cli-modal-dialog" role="document"> <div class="cli-modal-content cli-bar-popup"> <button type="button" class="cli-modal-close" id="cliModalClose"> <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg> <span class="wt-cli-sr-only">Close</span> </button> <div class="cli-modal-body"> <div class="cli-container-fluid cli-tab-container"> <div class="cli-row"> <div class="cli-col-12 cli-align-items-stretch cli-px-0"> <div class="cli-privacy-overview"> <h4>Privacy Overview</h4> <div class="cli-privacy-content"> <div class="cli-privacy-content-text">This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.</div> </div> <a class="cli-privacy-readmore" aria-label="Show more" role="button" data-readmore-text="Show more" data-readless-text="Show less"></a> </div> </div> <div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container"> <div class="cli-tab-section"> <div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab"> Necessary </a> <div class="wt-cli-necessary-checkbox"> <input type="checkbox" class="cli-user-preference-checkbox" id="wt-cli-checkbox-necessary" data-id="checkbox-necessary" checked="checked" /> <label class="form-check-label" for="wt-cli-checkbox-necessary">Necessary</label> </div> <span class="cli-necessary-caption">Always Enabled</span> </div> <div class="cli-tab-content"> <div class="cli-tab-pane cli-fade" data-id="necessary"> <div class="wt-cli-cookie-description"> Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information. </div> </div> </div> </div> <div class="cli-tab-section"> <div class="cli-tab-header"> <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="non-necessary" data-toggle="cli-toggle-tab"> Non-necessary </a> <div class="cli-switch"> <input type="checkbox" id="wt-cli-checkbox-non-necessary" class="cli-user-preference-checkbox" data-id="checkbox-non-necessary" checked='checked' /> <label for="wt-cli-checkbox-non-necessary" class="cli-slider" data-cli-enable="Enabled" data-cli-disable="Disabled"><span class="wt-cli-sr-only">Non-necessary</span></label> </div> </div> <div class="cli-tab-content"> <div class="cli-tab-pane cli-fade" data-id="non-necessary"> <div class="wt-cli-cookie-description"> Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website. </div> </div> </div> </div> </div> </div> </div> </div> <div class="cli-modal-footer"> <div class="wt-cli-element cli-container-fluid cli-tab-container"> <div class="cli-row"> <div class="cli-col-12 cli-align-items-stretch cli-px-0"> <div class="cli-tab-footer wt-cli-privacy-overview-actions"> <a id="wt-cli-privacy-save-btn" role="button" tabindex="0" data-cli-action="accept" class="wt-cli-privacy-btn cli_setting_save_button wt-cli-privacy-accept-btn cli-btn">SAVE & ACCEPT</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div> <div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div> <!--googleon: all--> <div id="wpcp-error-message" class="msgmsg-box-wpcp hideme"><span>error: </span>Content is protected !!</div> <script> var timeout_result; function show_wpcp_message(smessage) { if (smessage !== "") { var smessage_text = '<span>Alert: </span>'+smessage; document.getElementById("wpcp-error-message").innerHTML = smessage_text; document.getElementById("wpcp-error-message").className = "msgmsg-box-wpcp warning-wpcp showme"; clearTimeout(timeout_result); timeout_result = setTimeout(hide_message, 3000); } } function hide_message() { document.getElementById("wpcp-error-message").className = "msgmsg-box-wpcp warning-wpcp hideme"; } </script> <style> @media print { body * {display: none !important;} body:after { content: "You are not allowed to print preview this page, Thank you"; } } </style> <style type="text/css"> #wpcp-error-message { direction: ltr; text-align: center; transition: opacity 900ms ease 0s; z-index: 99999999; } .hideme { opacity:0; visibility: hidden; } .showme { opacity:1; visibility: visible; } .msgmsg-box-wpcp { border:1px solid #f5aca6; border-radius: 10px; color: #555; font-family: Tahoma; font-size: 11px; margin: 10px; padding: 10px 36px; position: fixed; width: 255px; top: 50%; left: 50%; margin-top: -10px; margin-left: -130px; -webkit-box-shadow: 0px 0px 34px 2px rgba(242,191,191,1); -moz-box-shadow: 0px 0px 34px 2px rgba(242,191,191,1); box-shadow: 0px 0px 34px 2px rgba(242,191,191,1); } .msgmsg-box-wpcp span { font-weight:bold; text-transform:uppercase; } .warning-wpcp { background:#ffecec url('https://brayve.net/wp-content/plugins/wp-content-copy-protector/images/warning.png') no-repeat 10px 50%; } </style> <div class="wppopups-whole" style="display: none"><div class="spu-bg " id="spu-bg-31358"></div><div class="spu-box spu-animation-fade spu-position-centered" id="spu-31358" data-id="31358" data-parent="0" data-settings="{"position":{"position":"centered"},"animation":{"animation":"fade"},"colors":{"show_overlay":"yes-color","overlay_color":"rgba(0,0,0,0.5)","overlay_blur":"2","bg_color":"rgb(25, 156, 172)","bg_img":"","bg_img_repeat":"no-repeat","bg_img_size":"auto"},"close":{"close_color":"rgb(2, 2, 2)","close_hover_color":"#000","close_shadow_color":"#000","close_size":"30","close_position":"top_left"},"popup_box":{"width":"650px","padding":"50","radius":"0","auto_height":"yes","height":"350px"},"border":{"border_type":"none","border_color":"#000","border_width":"3","border_radius":"0","border_margin":"0"},"shadow":{"shadow_color":"#ccc","shadow_type":"outset","shadow_x_offset":"0","shadow_y_offset":"0","shadow_blur":"0","shadow_spread":"0"},"css":{"custom_css":""},"id":"31358","field_id":1,"rules":{"group_0":{"rule_0":{"rule":"page_type","operator":"==","value":"all_pages"}}},"settings":{"popup_title":"Covid Popup","popup_desc":"","test_mode":"0","powered_link":"0","popup_class":"","popup_hidden_class":"","close_on_conversion":"1","conversion_cookie_name":"spu_conversion_31358","conversion_cookie_duration":"0","conversion_cookie_type":"d","closing_cookie_name":"spu_closing_31358","closing_cookie_duration":"0","closing_cookie_type":"d"},"triggers":{"trigger_0":{"trigger":"seconds","value":"3"}}}" data-need_ajax="0"><div class="spu-container "><div class="spu-content"><p><span style="font-size: 14pt; color: #ff0000;"><strong>Closure and Reopening Notice</strong></span></p> <p><span style="color: #000000; font-size: 12pt;"><strong>Unfortunately in the lead up to the January launch of our new projects, most of our team have fallen ill due to Covid. Some are significantly ill.</strong></span></p> <p><span style="color: #000000; font-size: 12pt;"><strong>Because of this, we are running on a skeleton crew and answering your calls and emails has become difficult. </strong></span></p> <p><span style="color: #000000; font-size: 12pt;"><strong>We are going to reopen with graduated hours from Monday 7th March and will get in touch with you as soon as we can.</strong></span></p> <p><span style="color: #000000; font-size: 12pt;"><strong>Until then , Please be patient, its been a tough time for us all.</strong></span></p> <p><span style="color: #000000; font-size: 12pt;"><strong>You can contact us by email using admin@brayve.net</strong></span></p> <p><span style="font-size: 12pt; color: #000000;"><strong>Response may be slow as we catch up with almost six weeks loss of business.</strong></span></p> <p><span style="color: #000000;"><strong>We apologise for any inconvenience.</strong></span></p> </div><a href="#" class="spu-close spu-close-popup spu-close-top_left">×</a><span class="spu-timer"></span></div></div><!--spu-box--></div> <script type="text/javascript"> (function () { var c = document.body.className; c = c.replace(/woocommerce-no-js/, 'woocommerce-js'); document.body.className = c; })(); </script> <script type='text/javascript' src='https://brayve.net/wp-includes/js/dist/hooks.min.js' id='wp-hooks-js'></script> <script type='text/javascript' id='wppopups-js-extra'> /* <![CDATA[ */ var wppopups_vars = {"is_admin":"","ajax_url":"https:\/\/brayve.net\/wp-admin\/admin-ajax.php","pid":"9518","is_front_page":"","is_blog_page":"","is_category":"","site_url":"https:\/\/brayve.net","is_archive":"","is_search":"","is_singular":"1","is_preview":"","facebook":"","twitter":"","val_required":"This field is required.","val_url":"Please enter a valid URL.","val_email":"Please enter a valid email address.","val_number":"Please enter a valid number.","val_checklimit":"You have exceeded the number of allowed selections: {#}.","val_limit_characters":"{count} of {limit} max characters.","val_limit_words":"{count} of {limit} max words.","woo_is_shop":"","woo_is_order_received":"","woo_is_product_category":"","woo_is_product_tag":"","woo_is_product":"","woo_is_cart":"","woo_is_checkout":"","woo_is_account_page":""}; /* ]]> */ </script> <script type='text/javascript' src='https://brayve.net/wp-content/plugins/wp-popups-lite/src/assets/js/wppopups.js' id='wppopups-js'></script> <script type='text/javascript' src='https://brayve.net/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js' id='jquery-blockui-js'></script> <script type='text/javascript' id='wc-add-to-cart-js-extra'> /* <![CDATA[ */ var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","i18n_view_cart":"View basket","cart_url":"https:\/\/brayve.net\/cart\/","is_cart":"","cart_redirect_after_add":"no"}; /* ]]> */ </script> <script type='text/javascript' src='https://brayve.net/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js' id='wc-add-to-cart-js'></script> <script type='text/javascript' src='https://brayve.net/wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js' id='js-cookie-js'></script> <script type='text/javascript' id='woocommerce-js-extra'> /* <![CDATA[ */ var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%"}; /* ]]> */ </script> <script type='text/javascript' src='https://brayve.net/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js' id='woocommerce-js'></script> <script type='text/javascript' id='wc-cart-fragments-js-extra'> /* <![CDATA[ */ var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","cart_hash_key":"wc_cart_hash_3756ffca311585e205874398fe7ec3e3","fragment_name":"wc_fragments_3756ffca311585e205874398fe7ec3e3","request_timeout":"5000"}; /* ]]> */ </script> <script type='text/javascript' src='https://brayve.net/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js' id='wc-cart-fragments-js'></script> <script type='text/javascript' id='68ea3b301-js-extra'> /* <![CDATA[ */ var localize = {"ajaxurl":"https:\/\/brayve.net\/wp-admin\/admin-ajax.php","nonce":"83edae2030","i18n":{"added":"Added ","compare":"Compare","loading":"Loading..."},"page_permalink":"https:\/\/brayve.net\/blog\/2019\/10\/24\/create-a-bookmarking-application-with-faunadb-netlify-and-11ty\/"}; /* ]]> */ </script> <script type='text/javascript' src='https://brayve.net/wp-content/uploads/essential-addons-elementor/734e5f942.min.js' id='68ea3b301-js'></script> <script type='text/javascript' defer="defer" src='https://brayve.net/wp-includes/js/imagesloaded.min.js' id='imagesloaded-js'></script> <script type='text/javascript' defer="defer" src='https://brayve.net/wp-includes/js/masonry.min.js' id='masonry-js'></script> <script type='text/javascript' defer="defer" src='https://brayve.net/wp-content/themes/mesmerize/assets/js/theme.bundle.min.js' id='mesmerize-theme-js'></script> <script type='text/javascript' src='https://brayve.net/wp-content/plugins/visual-footer-credit-remover/script.js' id='jabvfcr_script-js'></script> <script> /(trident|msie)/i.test(navigator.userAgent) && document.getElementById && window.addEventListener && window.addEventListener("hashchange", function () { var t, e = location.hash.substring(1); /^[A-z0-9_-]+$/.test(e) && (t = document.getElementById(e)) && (/^(?:a|select|input|button|textarea)$/i.test(t.tagName) || (t.tabIndex = -1), t.focus()) }, !1); </script> <div class="wpautoterms-footer"><p> <a href="https://brayve.net/blog/wpautoterms/privacy-policy/">Privacy Policy</a><span class="separator"> - </span><a href="https://brayve.net/blog/wpautoterms/terms-and-conditions/">Terms and Conditions</a></p> </div></body> </html>