Adding Search to Jekyll

November 16, 2018

I wanted to add a simple search functionality to my blog that didn’t require a lot of time or work. There are a lot of options (paid and free) out there, but I decided to go with a simple DuckDuckGo integration. I like their search engine and what they stand for as a company.

DuckDuckGo does offer a simple way to add a search box to your site using an iframe, but I wanted something even more basic. So I threw this together.

<div class="search">
 	<form class="ddg" name="x" action="//duckduckgo.com/">
		<input type="hidden" value="https://www.mattlangford.net" name="sites">
		<input type="hidden" value="1" name="kh">
  		<input type="hidden" value="1" name="kn">
		<input type="hidden" value="1" name="kac">
		<input type="text" class="search" name="q" placeholder="search term">
		<button type="submit">Search</button>
  	</form>
</div>

Feel free to use on your site as you wish, just make sure to change my domain name to yours. Of course, you’ll need to style it up as well.

Dark Mode Your Website

November 12, 2018

With MacOS Mojave, Apple introduced a system wide dark theme. While it is a nice feature, it has some drawbacks. One of the biggest negatives is that you can be blinded by an unexpected (and common) bright website in Safari. There really isn’t an easy way for Safari/Apple to completely remedy this on their end, but they did recently introduce/propose a way for website owners to take matters into their own hands. Currently this solution only works in Safari Technology Preview (free to download), but it should be coming to Safari soon. Hopefully other browsers will adopt it as well.

By using a simple media query in your CSS, you can create a style for your site that only shows when the system is in Dark Mode:

@media (prefers-color-scheme: dark) {style: here;}

Change your background color to something like #323232 and adjust your fonts and other styles accordingly. I didn’t do anything over-the-top with my site, but here’s a quick side-by-side.

Dark mode and light mode side by side

Fast Charging iPhones and iPads

November 09, 2018

Apple makes a lot of different chargers and cables for a lot of different devices. Most of them can be used for any of their products. Since I recently got a new iPad Pro 3rd Gen, I dove into the numbers to see what is best to get.

First, these are what comes with the various devices devices:

  • iPhones (all): 5W
  • iPad (not Pro): 12W
  • iPad Pro: 18W (USB-C)1

And the other products they offer:

The latest generation iPhones can take advantage of all chargers up to 30 watts. While they can use the higher wattage chargers, there is no added benefit to them. You will also need a USB-C to Lightning cable to use the USB-C chargers.

The latest generation iPad Pros can use the same chargers from the above list as the iPhone, but they have a maximum wattage of 45 watts. Apple doesn’t currently sell a 45 watt charger, so you would either need the 61 watt from Apple or a 45 watt from a third party. Since the new iPad Pros are USB-C, you can use the included cable with these chargers.

This information is not documented very well by Apple, so it required some research to figure all of this out. Thanks to ATP for providing some of the details.

  1. As of November 2018, this item is not available for purchase individually. I’m sure this will change soon. 

Using the Shortcuts App to Post to My Blog

November 09, 2018

After a lot of work in the Shortcuts app attempting to create an easy way to post to my blog, I finally settled on what works best for me. Here’s an overview of how it works:

  1. I write and format the post in Drafts. If I need to insert an image, I simply write the word IMAGE on its own line as a placeholder.
  2. I run the Shortcut using the Share Sheet from within Drafts. The Shortcut asks me for the Title, Category, and any Images. When I choose images, it replaces the word IMAGE with the selected image (after resizing and converting it). If it requires more than 1 image, it cycles through and puts them in the correct places and order. It also adds the correct Front Matter and gives me the final draft.
  3. Using Working Copy’s URL Scheme, it places the post and the images in the correct places.
  4. I manually open Working Copy and commit/push what’s needed. I know I could also automate this step to some degree, but I prefer doing it manually at this point.

To this point, I am able to write full posts, microposts, and posts with and without images flawlessly with this Shortcut.

I would share the shortcut, but it uses a lot of information that only pertains to this blog. If you’d like to create something similar and are having issues, I am glad to try to help out.

Jekyll and Micropub

November 06, 2018

One of my initial goals when setting up this blog was to enable microblogging, ideally through micro.blog. I started out having no idea whatsoever how to do this, but slowly navigated my way through the labyrinth and mostly have it set up. Giving credit where credit is due, I stared out with this post by Jordan Merrick which lead me to Fiona Voss’ guide. Fiona referenced a great tool by Pelle Wessman for accomplishing this with Jekyll.

Using Wessman’s webpage-micropub-to-github creation, I easily deployed to Heroku and customized some settings. After a little bit of troubleshooting, I had it working pretty flawlessly with tools like Quill. Currently, it only kind of works with micro.blog. I’m having trouble getting it to use categories in the front matter and it’s not seeing the media-endpoints for posting images.

As a side project, I also created a Shortcut on iOS that enables me to create microposts easily (including uploading any number of images) and sends the files to Working Copy where I can push them to the site where Netlify quickly builds everything.

In Development Shortcut

I’m happy with my progress so far, but I know there are still a lot of things left to do before this project is complete.

Migrating to Jekyll

November 02, 2018

As a web designer, I have learned that there is no real way to becoming an expert at all things web or design related. The internet is evolving at a rate that is impossible to track. When I first began down the path of web design, I was forced to use Microsoft Frontpage in class (yes, this was a long time ago). Eventually we moved to Macromedia Dreamweaver then to actually writing our own code and drawing our own designs.

Over the years, I’ve used so many tools that I couldn’t possible name them all. I’ve learned and lost different languages over and over. I’ve designed from scratch, on top of many different CMSes, and even with customer-facing tools such as Squarespace. All have their merits, but I was getting bored. Through all those years, I’d never really done much with Jekyll.

jekyll serve

So as a playground of sorts, I decided to migrate my blog to Jekyll using GitHub Pages and Netlify. There was a bit of a learning curve at the beginning, and initiation of sorts, but slowly things started to make sense. I had a bunch of lofty goals. I wanted to build from scratch (no themes), be able to post instantly from iOS, use micropub/microblog features throughout, and import my entire history of Instagram posts. So far, so good.

I still need to clean some things up before considering it a complete project. Things with RSS feeds, JSON feeds, image handling, etc. However, I’m well on my way and it’s only been a few days at this point.

I will continue to write about the process, including lessons learned and tutorials as I go.