Instantly share code, notes, and snippets.


Headless WordPress

Since moving to a static-site generator, I occassionally need a server backend to handle logic for me.

In one case, I use it to handle user account creation for my learning platform. WordPress stores all of the usernames/passwords, and I can use JS to make calls to it, log users in, and surface "logged in only" user content.

More often, though, I'm using it as a middle-man for API calls that require the user of keys/secrets, or return data I don't want to fully expose publicly.

Here's how it works...

View faquery.html
<!DOCTYPE html>
<style type="text/css">
.bg-purple {
background-color: rebeccapurple;
View consolidate.html
<!DOCTYPE html>
<script type="text/javascript">
var data = [
"name": "Jeff",
View gulpfile.js
* Settings
var settings = {
scripts: true, // Turn on/off script tasks
polyfills: true, // Turn on/off polyfill tasks
styles: false, // Turn on/off style tasks
svgs: false, // Turn on/off SVG tasks
static: false, // Turn on/off static file copying
View robot-hands-without-jquery.js
// Old-school ES5 way
function toggle () {
for (var i = 0; i < element.length; i++) {
if (element[i].style.opacity === '0') {
element[i].style.opacity = '1';
} else {
element[i].style.opacity = '0';
View markdown-editor.html
<!DOCTYPE html>
<title>Marked Demo</title>
<style type="text/css">
body {
margin: 0 auto;
height: 100%;
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #333;
View updateLocalStorage.js
var addToLocalStorageArray = function (name, value) {
// Get the existing data
var existing = localStorage.getItem(name);
// If no existing data, create an array
// Otherwise, convert the localStorage string to an array
existing = existing ? existing.split(',') : [];
// Add new data to localStorage Array
View 0.

Code Challenge: Build a star-based rating system

This is part of a series in which you'll be building a star-based rating system using only vanilla JavaScript and some CSS.



Copyright (c) Go Make Things, LLC

Version 3, 29 June 2007

Copyright (C) 2007 Free Software Foundation, Inc.

Everyone is permitted to copy and distribute verbatim copies of this

View base-modal.js
// Listen for all clicks on the document
document.addEventListener('click', function (event) {
// is the clicked element
// If the link has the data-modal selector, we'll use it to toggle our modal
// Make sure to include a polyfill for matches():
if ('[data-modal]')) {
// We can embed the message directly in the modal link if you want using the data-modal attribute
// Your link would look like this: