Mourning online

Me and Ngin Ngin
  1. A minimal page that included a place for her obituary and memorial video
  2. A self-moderated guestbook that anybody could sign without social media
  3. Inexpensive or free to use

Setup

Guestbooks and Netlify Forms

<form name="Guestbook" method="POST" data-netlify="true">
<ul>
<li class="guest-name">
<fieldset class="line">
<input required id="name" type="text" name="name" placeholder=" "/>
<label for="name">Name*</label>
<hr/>
</fieldset>
</li>
<li class="guest-email">
<fieldset class="line">
<input required id="email" type="email" name="email" placeholder=" "/>
<label for="email">Email*</label>
<hr/>
</fieldset>
</li>
<li class="guest-message">
<fieldset>
<textarea required id="message" name="message" rows="5" placeholder=" "></textarea>
<label for="message">Message*</label>
</fieldset>
</li>
<li class="guest-photo">
<fieldset>
<label for="photo">Add photo (optional)</label>
<input id="photo" name="file" type="file" accept="image/*" placeholder=" "/>
</fieldset>
</li>
<li hidden>
<fieldset class="line">
<input id="bots" name="bot-field"/>
<label for="bots">Leave blank</label>
<hr/>
</fieldset>
</li>
<li class="guest-captcha">
<div data-netlify-recaptcha="true"></div>
</li>
<li class="guest-submit">
<button type="submit">Send</button>
</li>
</ul>
</form>
  1. You can find your Netlify site ID by going to Site Settings > General > Site Details > Site Information > API ID.
  2. You can find your Netlify form ID by going to Forms > Active forms > (your form) and copying the long string at the end of the URL.
  3. You can create a personal access token in your Applications settings.
const Cache = require('@11ty/eleventy-fetch');

/**
* Grabs the remote data and returns back an array of objects
*
* @returns {Array} Empty or array of objects
*/

module.exports = async () => {
try {
let url = "https://api.netlify.com/api/v1/sites/{SITE_ID}/forms/{FORM_ID}/submissions";

/* This returns a promise */
return Cache(url, {
duration: '1d', // 1 day
type: 'json',
fetchOptions: {
headers: {
'Authorization': "Bearer {ACCESS_TOKEN}"
}
}
});
} catch(e) {
return [];
}
};
{% for guest in guests %}
<section>
<time datetime="{{guest.created_at|htmlDateString}}">{{guest.created_at|readableDataDate}}</time>
<figure>
<figcaption><cite><h3>{{guest.data.name}}</h3></cite></figcaption>
<blockquote>{{guest.data.message}}</blockquote>
</figure>
<picture>
<img src="{{guest.data.file.url}}" alt="">
</picture>
</section>
{% endfor %}

Video

ffmpeg -y -i video.mov -c:v libx264 -crf 30 -profile:v high -movflags +faststart -s 1280:720 video.mp4
<video width="1280" height="720" controls preload="metadata" poster="poster.jpg"> <source src="video.mp4" type="video/mp4"> </video>

Conclusion

--

--

--

I’m a front-end developer working at Apple.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Baby Switching Can Happen!

THE BIBLE AND ITS RECIPES

It was a holiday breakfast, much better than in the kindergarten.

Engagement Ring Saved Woman From Death

nasi goreng buatan bapak

Family Fights or Maybe It’s War

An Open Letter to Robert Quackenbush

Birthdays are Magical 🎆

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gabrielle Wee

Gabrielle Wee

I’m a front-end developer working at Apple.

More from Medium

MetaWear Token

Welcome to 1000 Stories

excerpts from my notes app