Instantly share code, notes, and snippets.

@cferdinandi Chris Ferdinandi cferdinandi

@cferdinandi cferdinandi / headless-wp.md
Created Nov 30, 2018
A little exploration of how to run a headless WordPress install behind a static site generator for some server-side magic.
View headless-wp.md

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...

@cferdinandi cferdinandi / faquery.html
Created Oct 16, 2018
View faquery.html
<!DOCTYPE html>
<html>
<head>
<title>ConsolidateJS</title>
<style type="text/css">
.bg-purple {
background-color: rebeccapurple;
}
@cferdinandi cferdinandi / consolidate.html
Created Oct 16, 2018
View consolidate.html
<!DOCTYPE html>
<html>
<head>
<title>ConsolidateJS</title>
</head>
<body>
<script type="text/javascript">
var data = [
{
"name": "Jeff",
@cferdinandi cferdinandi / gulpfile.js
Last active Oct 17, 2018
My gulp setup. https://gomakethings.com/how-i-setup-my-vanilla-javascript-projects/
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
@cferdinandi cferdinandi / robot-hands-without-jquery.js
Created Jun 26, 2018
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';
}
}
}
@cferdinandi cferdinandi / markdown-editor.html
Last active Jun 1, 2018
A vanilla JS version of the example markdown editor app for Vue.js. https://vuejs.org/v2/examples/
View markdown-editor.html
<!DOCTYPE html>
<html>
<head>
<title>Marked Demo</title>
<style type="text/css">
body {
margin: 0 auto;
height: 100%;
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #333;
@cferdinandi cferdinandi / updateLocalStorage.js
Created May 21, 2018
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
@cferdinandi cferdinandi / 0. README.md
Created Mar 29, 2018
View 0. README.md

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.

@cferdinandi cferdinandi / LICENSE.md
Created Mar 27, 2018
Display country-specific discounts to visitors of your WordPress site.
View LICENSE.md

GNU GENERAL PUBLIC LICENSE

Copyright (c) Go Make Things, LLC

Version 3, 29 June 2007

Copyright (C) 2007 Free Software Foundation, Inc. http://fsf.org/

Everyone is permitted to copy and distribute verbatim copies of this

@cferdinandi cferdinandi / base-modal.js
Last active Jan 30, 2018
View base-modal.js
// Listen for all clicks on the document
document.addEventListener('click', function (event) {
// event.target 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(): https://vanillajstoolkit.com/polyfills/matches/
if (event.target.matches('[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: