4th October 2024
Bulk create populated Google Docs from a Google Spreadsheet
How to create Google Docs from a single Google Spreadsheet with variables for mail-merge style creation.
JavaScript
JavaScript tutorials, snippets and techniques - from vanilla JS and fetch to Vue and Node.
There are 20 posts in the JavaScript category.
-
Bulk create populated Google Docs from a Google Spreadsheet -
Return a Zip file in Node with a Netlify function 25th September 2022
Return a Zip file in Node with a Netlify function
Use a Netlify function to return a Zip file using jszip
-
Making an 11ty collection from a remote XML file 26th July 2021
Making an 11ty collection from a remote XML file
RSS is XML with a specification, however not all RSS feeds follow the spec. In this post, we process the feed as an XML document meaning we can access the extra attributes and values
-
Create an 11ty collection from any RSS feed 12th July 2021
Create an 11ty collection from any RSS feed
Using 11ty global data files, we create an 11ty collection from an RSS feed. As an example, we show the latest YouTube videos on our website
-
Accessing 11ty filters within data files to keep your code DRY 17th May 2021
Accessing 11ty filters within data files to keep your code DRY
11ty filters can exist as JS functions inside the declared filters directory - these can be accessed by other files not processed by 11ty
-
11ty Utils - an NPM Package 15th April 2021
11ty Utils - an NPM Package
I published an NPN package the other day which contains some everyday 11ty utils
-
Build an 11ty calendar to list all your posts 12th April 2021
Build an 11ty calendar to list all your posts
List all of your posts (or other collection items) in a calendar/diary format to give a timeline of your past
-
Using Cloudflare workers to publish your scheduled 11ty posts 5th April 2021
Using Cloudflare workers to publish your scheduled 11ty posts
Learn how to schedule blog posts and other items to go live with your static site generator without having to rebuild the whole site. Get all the benefits of a dynamic CSS with static files
-
Getting a Slack helper running with Netlify: Part 2 22nd July 2020
Getting a Slack helper running with Netlify: Part 2
Part 2 of the Slack status updater with Netlify. This walks through using dotenv and locking the function down to "local" use. There is also a crude UI that has been made
-
Getting a Slack helper running with Netlify: Part 1 20th July 2020
Getting a Slack helper running with Netlify: Part 1
So I'm a bit of a dinosaur when it comes to web stacks - I'm all about LAMP (Linux, Apache, MySQL, PHP). I had an idea for a small little web app and thought it would be the perfect opportunity to give Netlify a go.
-
Build your own "share this" component 3rd May 2019
Build your own "share this" component
Using a Share This plugin (or similar) or the native sharing widgets from social networks can really bloat your page and look ugly. This code is how we, at Liquid Light, implement social sharing widgets
-
How to use fetch in JavaScript to GET or POST data 20th April 2019
How to use fetch in JavaScript to GET or POST data
Fetch is a fantastic JavaScript function which allows you to natively get and post data from the browser. This post includes some examples of how to use it.
-
How to filter an array of objects based on a secondary array in JavaScript 7th August 2018
How to filter an array of objects based on a secondary array in JavaScript
Sounds confusing, but there is a use-case, honest! Imagine you have an array with a set number of items in and you wanted to filter another array of objects based on that in your JavaScript. The post explains more!
-
Filters in Vue.js: What are they, how do you use them, and how do you make them? (video) 8th November 2017
Filters in Vue.js: What are they, how do you use them, and how do you make them? (video)
There are many ways to manipulate a value to make it user-friendly using Vue.js. In this tutorial, I show you how you can use Vue filters to alter the appearance of a variable without affecting its data.
-
Using props for accessing URL parameters within components with Vue Router (video) 21st October 2017
Using props for accessing URL parameters within components with Vue Router (video)
This quick video walkthrough shows how you can replace any URL parameters in your components with props and how to pass them through from vue router to access them within your component
-
Vue: Using localStorage with Vuex store 13th October 2017
Vue: Using localStorage with Vuex store
Using the browser's localStorage we can create a Vue app which has its Vuex store cached. This allows the user to navigate away from the app and not lose their preferences.
-
Building a Vue v2 JS app using Vue-router 3rd November 2016
Building a Vue v2 JS app using Vue-router
Vue JS is a javascript framework which has recently released version 2. Allowing you to display, manipulate and navigate data, Vue is a React, Knockout and Angular competitor. This blog post walks through building a web app with Vue Router.
-
Making Craft CMS work with Prism JS using pre and code blocks 20th April 2016
Making Craft CMS work with Prism JS using pre and code blocks
You may (or may not) have noticed that my site had a massive overhaul. With that overhaul, I changed CMS from Anchor to Craft.
-
Get background image information if element has a one in jQuery 4th March 2016
Get background image information if element has a one in jQuery
Recently I need to loop through elements on a page and, if the element had a background image apply a jQuery plugin. The plugin required the background image path & dimensions to function
-
Filtering Tables with jQuery 12th February 2015
Filtering Tables with jQuery
I was recently asked by a friend how you would make a table filterable by using a select box & jQuery - for example "show me films made just in 2014.