diff --git a/content/drafts/adding-caffeine-porting-cocoa-to-cappuccino.html b/drafts/adding-caffeine-porting-cocoa-to-cappuccino.html similarity index 100% rename from content/drafts/adding-caffeine-porting-cocoa-to-cappuccino.html rename to drafts/adding-caffeine-porting-cocoa-to-cappuccino.html diff --git a/content/drafts/adding-caffeine-porting-cocoa-to-cappuccino.yaml b/drafts/adding-caffeine-porting-cocoa-to-cappuccino.yaml similarity index 100% rename from content/drafts/adding-caffeine-porting-cocoa-to-cappuccino.yaml rename to drafts/adding-caffeine-porting-cocoa-to-cappuccino.yaml diff --git a/drafts/building-linked-list.html b/drafts/building-linked-list.html new file mode 100644 index 0000000..8ac5110 --- /dev/null +++ b/drafts/building-linked-list.html @@ -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 diff --git a/drafts/building-linked-list.yaml b/drafts/building-linked-list.yaml new file mode 100644 index 0000000..e9b2b85 --- /dev/null +++ b/drafts/building-linked-list.yaml @@ -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: diff --git a/drafts/making-the-most-of-mac-os-x.mkdn b/drafts/making-the-most-of-mac-os-x.mkdn new file mode 100644 index 0000000..bfc9600 --- /dev/null +++ b/drafts/making-the-most-of-mac-os-x.mkdn @@ -0,0 +1,136 @@ +### Preface + +Keyboard shortcuts are referred to how they are shown in the menus: + +* ⌃ -- Control +* ⌥ -- Option (Alt on PC keyboards) +* ⌘ -- Command +* ⇧ -- 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" +* ⌃⌘D +* Three finger tap on word (with trackpad) + +#### Insert Special Characters + +⌃⌘Space 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: + +* ⌃a -- Start of line +* ⌃e -- End of line +* ⌃h -- Backspace +* ⌃d -- Forward delete +* ⌃k -- Kill (cut from cursor forward) +* ⌃y -- Paste kill buffer (separate from system clipboard, pastes last ⌃k) +* 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 ⌘ and ⌥. + +### 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. ⌘⇧4 +2. Space +3. Click window while holding ⌥ + +#### Copy to Clipboard + +Add ⌃ when doing the normal shortcut. E.g. ⌃⌘⇧4 + +### 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 + * ⌘ 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: ⌘⇧G + +#### 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. + diff --git a/drafts/making-the-most-of-mac-os-x.yaml b/drafts/making-the-most-of-mac-os-x.yaml new file mode 100644 index 0000000..d8b34b8 --- /dev/null +++ b/drafts/making-the-most-of-mac-os-x.yaml @@ -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 diff --git a/content/drafts/need-a-windows-box-use-amazon-ec2.html b/drafts/need-a-windows-box-use-amazon-ec2.html similarity index 100% rename from content/drafts/need-a-windows-box-use-amazon-ec2.html rename to drafts/need-a-windows-box-use-amazon-ec2.html diff --git a/content/drafts/need-a-windows-box-use-amazon-ec2.yaml b/drafts/need-a-windows-box-use-amazon-ec2.yaml similarity index 100% rename from content/drafts/need-a-windows-box-use-amazon-ec2.yaml rename to drafts/need-a-windows-box-use-amazon-ec2.yaml diff --git a/content/drafts/perl-worst-practices.html b/drafts/perl-worst-practices.html similarity index 100% rename from content/drafts/perl-worst-practices.html rename to drafts/perl-worst-practices.html diff --git a/content/drafts/perl-worst-practices.yaml b/drafts/perl-worst-practices.yaml similarity index 100% rename from content/drafts/perl-worst-practices.yaml rename to drafts/perl-worst-practices.yaml diff --git a/content/drafts/region-testing-on-amazon-ec2.html b/drafts/region-testing-on-amazon-ec2.html similarity index 100% rename from content/drafts/region-testing-on-amazon-ec2.html rename to drafts/region-testing-on-amazon-ec2.html diff --git a/content/drafts/region-testing-on-amazon-ec2.yaml b/drafts/region-testing-on-amazon-ec2.yaml similarity index 100% rename from content/drafts/region-testing-on-amazon-ec2.yaml rename to drafts/region-testing-on-amazon-ec2.yaml