1
0
Fork 0
forked from wezm/wezm.net

Move drafts out of content

To stop them showing up in the articles list.
This commit is contained in:
Wesley Moore 2016-09-29 21:46:50 +10:00
parent ebf6668f70
commit 902521db9b
12 changed files with 302 additions and 0 deletions

View file

@ -0,0 +1,139 @@
Building Linked List -- an experiment in web design/architecture/application
An Experiment in Performant Web Application Design
I noticed that many of my collegues have a collection of snippets of knowledge that they store
in software like Evernote, nvAlt, Simplenote or just a collection of text files. I referred to
my own such collection to help a collegue out one day and it dawned on me that there was no
reason I couldn't publish many of my notes for others to refer to.
I have a blog (you're reading it now!) that I've published these type of notes
to before but there's a certain barrier to entry to writing a full blog post.
There's an implied need to include more explanation and sometimes that's enough
to put me off posting, especially for small snippets. Additionally blogs tend
to feel time based, the posts existing in a snapshot of time in which they
were posted.
Wikis are another alternative but to me they of often feel messy and ugly. Additionally
there's that barrier to entry for writing posts: Login, create link to new page, write
page, publish. All of which is generally done in a dinky text area and not a proper text
editor.
What I wanted was a system that made publishing a snippet as simple as editing a file
and had a clean design. The end result was pkb and [linkedlist.org][Linked List].
I built the core of the app in a weekend and refied it over the following weeks.
The result is something of an experiment and playground for me. It has:
* No database
* Zero JavaScript (and by extension no analytics)
* No images
* No media queries
* 5.9Kb of CSS (uncompressed)
* Uses a CDN to deliver assets
* Varnish caching
* HTTPS everywhere
* Freely available code
It works as follows:
I have a folder full of Markdown files on my computer. Each file is a page on
Linked List, the filename minus the `.md` being its URL. New and updated files
are syncronised to the server using Syncthing.
### Syncing
Origianlly I was going to use
Dropbox but headless installations are not well supported and using the API
felt like overkill. Syncthing works great on the server and is more flexible
than Dropbox to boot (multiple synced folders the can sync from arbirary
locations on the source and destingation machines).
### Design
Using ideas from http://bettermotherfuckingwebsite.com and its ispiration http://bettermotherfuckingwebsite.com I used just enough CSS to make the site clean and easy to read. There's not grid, no Bootstrap or similar as a result it's fluid and responsive by default.
Fonts proved a chanllenged. Originally I used a font stack that preferred Hoefler Text but after
upgading to OS X 10.11 "El Capitan", that [broke in Safari][hoefler-tweet]. I really didn't want
to use web fonts as they bloat the page and cause undesired behaviour (flash of unstlyed content
or invisible text) but with Hoefler text out of picture I decided to use [ET Book], self hosted.
### NoJS
Up until the need to consider web fonts there had been no need for JavaScript. Since...blah blah
try to stick with no JS.
### NoDB
Wanted to use flat files as much as possible. Each file has YAML front-matter with metadata in
it: E.g. [linkedlist.org/bulk-delete-from-s3](https://linkedlist.org/bulk-delete-from-s3):
---
title: Delete in Bulk from S3
tags: [aws, s3, ruby]
---
Given a list of objects to delete the following [Ruby](https://linkedlist.org/tags/ruby)
snippet will delete them in batches of 100:
# ruby
require 'shellwords'
ARGF.lines.each_slice(100) do |slice|
system "aws --profile bellroy s3 rm #{slice.map { |l| l.strip.shellescape }.join(' ')}"
end
---
Input file looks like:
s3://files.bellroy.com/E1HJ4ISXVG05CA.2015-02-23-15.c074f93f.gz
s3://files.bellroy.com/E1HJ4ISXVG05CA.2015-02-23-15.d3d2a169.gz
s3://files.bellroy.com/E1HJ4ISXVG05CA.2015-02-23-21.02ed8e8d.gz
## Blah
Implemented the Rails app naievely: the page is rendered each time it's requested.
The index page and tags pages itereate over all the files. Varnish takes care of
making that efficient
### Challenges
DDG index
### What's Next
Automatic invalidation
### TODO
Goals: quick to build, easy to post to, clean design, good performance.
With discussion about mobile web performance, content blockers,
http://www.quirksmode.org/blog/archives/2015/05/tools_dont_solv.html
http://www.theverge.com/2015/7/20/9002721/the-mobile-web-sucks
https://brooksreview.net/2015/09/content-blocker-test/
https://instantarticles.fb.com/
It's easy to reach for Bootstrap, Typekit, throw Google Analytics on a page and call it done
but how large is the page? How much of Bootstrap are you using? Do you really those analytics
and allow Google to track all your visitors?
With a bunch of the reading I'd don't over the last few months in mind I decided to build Linked List
in a way that followed these ideas and best practices.
* Minimal CSS
* No JS
* Varnish
* CDN
* No framework, minimal, semantic markup
* Clean readable design
* No analytics
* The debate about fonts
* No or few images
[Linked List]: https://linkedlist.org/
[vim]: http://www.vim.org/
[hoefler-tweet]: https://twitter.com/wezm/status/649716551956828160
[ET Book]: https://github.com/edwardtufte/et-book

View file

@ -0,0 +1,12 @@
---
title: Building Linked List
extra: SomthingjJ
kind: article
section: technical
created_at: 2015-10-26 15:30:00.000000000 +11:00
keywords:
- minimal
- rails
- syncthing
- varnish
short_url:

View file

@ -0,0 +1,136 @@
### Preface
Keyboard shortcuts are referred to how they are shown in the menus:
* <kbd>⌃</kbd> -- Control
* <kbd>⌥</kbd> -- Option (Alt on PC keyboards)
* <kbd>⌘</kbd> -- Command
* <kbd>⇧</kbd> -- Shift
### Text
All standard text fields offer a number of features
#### Text Transformations
Text transformations such as making the selected text lowercase, uppercase or capitilised.
#### Define word
Look up the defintion of a word:
* Right click: Lookup "word"
* <kbd>⌃⌘D</kbd>
* Three finger tap on word (with trackpad)
#### Insert Special Characters
<kbd>⌃⌘Space</kbd> to search for and insert special characters.
(Character pallet and keyboard viewer)
### Keyboard Shortcuts & Modifers
(Safari: trikeapps.com)
1. Open a menu and press a modifier to discover alternate menu commands.
2. Command click to perform actions on background windows without changing focus.
3. Shift scroll to scroll horizontally.
4. Double Click Menu bar to Zoom Since They Broke the Zoom Button (Since: 10.10 (Yosemite))
4. Hold Shift-Option when pressing the volume controls or brightness controls to adjust in finer increments.
5. Open URLs in Terminal/iTerm (gem --help)
* Terminal: Command double-click
* iTerm: Commmand click
#### Emacs keys
Standard OS X text fields support a number of shortcuts that will be familiar to emacs users:
* <kbd>⌃a</kbd> -- Start of line
* <kbd>⌃e</kbd> -- End of line
* <kbd>⌃h</kbd> -- Backspace
* <kbd>⌃d</kbd> -- Forward delete
* <kbd>⌃k</kbd> -- Kill (cut from cursor forward)
* <kbd>⌃y</kbd> -- Paste kill buffer (separate from system clipboard, pastes last <kbd>⌃k</kbd>)
* More
#### Customisation
* Any menu item can have a keyboard shortcut added or changed in the Keyboard preferences.
* List of all system/global shortcuts are in the same place.
* Change modifier Keys -- handy for PC keyboards to swap <kbd>⌘</kbd> and <kbd>⌥</kbd>.
### Services & Automator
Services are automations supplied by apps or yourself. They can be given keyboard shortcuts using the Keyboard preferences.
Automator can do some interesting things like processing images, renaming files and extracting URLs from webpages. It can also be used to build services.
(Get image URLs from webpage)
Perhaps slightly redundant when something like Alfred is used.
### Screen Shots
#### Without Shadow
To take screenshot of a window without the drop shadow:
1. <kbd>⌘⇧4</kbd>
2. <kbd>Space</kbd>
3. Click window while holding <kbd>⌥</kbd>
#### Copy to Clipboard
Add <kbd>⌃</kbd> when doing the normal shortcut. E.g. <kbd>⌃⌘⇧4</kbd>
### Preview
You can do basic and not so basic edits and annotations in Preview.
* Photo adjustments
* Magic alpha
* Annotations
#### Sign Documents
Preview allows you to scan a picture of your signature with the camera built-in to your Mac and then use that to add your signaure to PDFs.
### Finder & Files
1. Put items into a folder, Right-click, "New Folder With Selection"
1. Batch rename in Finder: Select multiple files and select, "Rename _n_ Items…"
2. Proxy Icons for well bahaved "document" based applications:
* Click, pause, drag the icon on window to open that file in other applications, reveal in Finder or write path to terminal
* <kbd>⌘</kbd> click for path, select to open in Finder
1. Drag file or proxy icon to open or save panel to go there
1. Shortcuts for save panels (Cmd-Delete)
1. Shortcuts for dialogs, first letter of button
1. Navigate to directory in open/save panel (~ or /)
1. Navigate to folder in Finder: <kbd>⌘⇧G</kbd>
#### Spotlight Search & Smart Folders
(Images larger than 1Mb)
### Screen Recordings in QuickTime
QuickTime Player can do screen recordings.
### Command Line Tools
There are a number of command line tools that are are unique to OS X:
* **open**
* open a file
* Using the default application or the named application if `-a` is specified.
* **jsc** -- JaveScript runtime
* **mdfind** -- finds files matching a given query
* The mdfind command consults the central metadata store [Spotlight] and returns a list of files that match the given metadata query. The query can be a string or a query expression.
* **say** -- Convert text to audible speech
* This tool uses the Speech Synthesis manager to convert input text to audible speech and either play it through the sound output device chosen in System Preferences or save it to an AIFF file.
* **sips** -- scriptable image processing system
* From the [man page][sips], "This tool is used to query or modify raster image files and ColorSync ICC profiles."
* **textutil** --
* textutil can be used to manipulate text files of various formats, using the mechanisms provided by the Cocoa text system.

View file

@ -0,0 +1,15 @@
---
title: Custom Slack Shortcuts With Karabiner
extra: Making Slack more keyboard friendly.
kind: article
section: technical
created_at: 2015-06-21 14:37:00.000000000 +10:00
keywords:
- slack
- software
- customisation
- karabiner
- keyboard
- shortcuts
- productivity
short_url: http://j.mp/1Gs4FfK