Oliver Pattison opattison

Floating Jellyfish

2014-01-31

CSS animation test, using an SVG jellyfish.

A Pen by Oliver Pattison on CodePen.

License.

Content-first responsive nav (footer anchor)

2013-08-02

A sample pattern for responsive "footer anchor" navigation.

A Pen by Oliver Pattison on CodePen.

License.

Clean MacBook-style keyboard shortcuts

Keyboard CSS design optimized for documentation project purposes, using the standard HTML kbd element. The idea is “keys” that look roughly proportional to the physical keyboard while being readable, not excessively skeuomorphic, and not obviously platform-specific.

A Pen by Oliver Pattison on CodePen.

License.

Trying out resolution and dppx media query support

A test of dppx support with CSS media queries. A user agent that has a resolution greater than 1.5dppx (a pixel density ratio of 1.5 or higher) will display a narrower font.

A Pen by Oliver Pattison on CodePen.

License.

title

image

example srcset implementation

src	alt
/images/example.jpg	Don’t forget alt text.

{% assign image = page.image[0] %} {% include srcset.html %}

Chatting with Michael Lee about my [previous post on what Jekyll is and why I use it]({% post_url 2016-03-16-consider-jekyll %}), I realized more should be said about how affordable static sites can be. From my own experience, here are some cost estimates for hosting a small site (in US dollars):

GitHub Pages: completely free (fewer Jekyll Ruby plugins allowed than a normal Jekyll deployment, but enables automatic deploying).
Amazon S3: starting at $0.03 to a few dollars per month for higher traffic (rate depends on usage). [^1]
S3 with Route53 for DNS routing: starting at $0.53 to a few dollars per month.
S3, Route53 and CloudFront: starting at $0.70 to a few dollars per month. My own site costs around $1.50 per month with this setup in early 2016.
[Shared hosting](https://en.wikipe

	{% for post in site.posts %}
	{% capture year %}{{ post.date \| date: '%Y' }}{% endcapture %}
	{% capture nyear %}{{ post.next.date \| date: '%Y' }}{% endcapture %}
	{% if year != nyear %}
	{% if forloop.index0 != 0 %}
	</ul>
	{% endif %}
	<h2>{{ post.date \| date: '%Y' }}</h2><ul>
	{% endif %}
	<li><a href="{{ post.url }}">{{ post.title }}</a><br><time datetime="{{ post.date \| date: "%Y-%m-%d" }}T{{ post.date \| date: "%H:%M" }}">{{ post.date \| date: "%B %d, %Y" }}</time></li>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Foo</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<style type='text/css'>
	body {
	font-family: 'Helvetica Neue';
	background:#000;

	photo_sizes: '(min-width: 120em) 75vw, (min-width: 100em) 78.75vw, (min-width: 80em) 84.375vw, (min-width: 60em) 93.75vw, 100vw'
	srcset:
	- 480
	- 640
	- 720
	- 900
	- 1080
	- 1260
	- 1440

	{% for image in page.image %}
	<img src="{{ site.image-url }}/{{ page.image[forloop.index0].src }}"
	sizes="{{ site.wide-sizes }}"
	srcset="{% assign parentloop = forloop %}
	{% for srcset1440 in site.srcset1440 %}
	{{ site.image-url }}/{{ site.srcset1440[forloop.index0] }}/{{ page.image[parentloop.index0].src }} {{ site.srcset1440[forloop.index0] }}w{% if forloop.last == false %},
	{% endif %}{% endfor %}"
	>
	{% endfor %}