Jekyll2023-01-21T15:49:19+00:00https://www.ianoxley.com/feed.xmlIan OxleyNotes on software development and other miscellany.
Ian OxleyBlocking FLoC2021-04-28T00:00:00+00:002021-04-28T00:00:00+00:00https://www.ianoxley.com/blog/2021/04/28/blocking-floc<p>Google’s new Federated Learning of Cohorts (FLoC) venture <a href="https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea">hasn’t exactly been warmly received</a>.</p>
<p>There are several ways to <a href="https://paramdeo.com/blog/opting-your-website-out-of-googles-floc-network">prevent your site from becoming part of the FLoC network</a>, you just need to pick the one most appropriate for your setup. As I host this site on GitHub Pages, all I needed to do was add a <code class="language-plaintext highlighter-rouge"><meta></code> tag to the head of my page like so:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"Permissions-Policy"</span> <span class="na">content=</span><span class="s">"interest-cohort()"</span><span class="nt">></span>
</code></pre></div></div>
<p><span lang="fr">Et voilà!</span> FLoC off.</p>Ian OxleyGoogle’s new Federated Learning of Cohorts (FLoC) venture hasn’t exactly been warmly received.Displaying the Numbers Only Keypad for HTML2020-10-29T00:00:00+00:002020-10-29T00:00:00+00:00https://www.ianoxley.com/blog/2020/10/29/input-type-number-numeric-keypad<p>It turns out that <code class="language-plaintext highlighter-rouge"><input type="number"></code> isn’t enough on its own to get
a mobile / touchscreen device to display a numbers only keypad. By default
you’ll get the punctuation symbols too:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><label</span> <span class="na">for=</span><span class="s">"numbers-and-special-chars"</span><span class="nt">></span>Enter numeric code<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">id=</span><span class="s">"numbers-and-special-chars"</span> <span class="na">type=</span><span class="s">"number"</span><span class="nt">></span>
</code></pre></div></div>
<p>To get the number only keypad you also need to add the <code class="language-plaintext highlighter-rouge">pattern</code> attribute, and
set its value to <code class="language-plaintext highlighter-rouge">[0-9]*</code> like this:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><label</span> <span class="na">for=</span><span class="s">"numbers-only"</span><span class="nt">></span>Enter numeric code<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">id=</span><span class="s">"numbers-only"</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">pattern=</span><span class="s">"[0-9]*"</span><span class="nt">></span>
</code></pre></div></div>Ian OxleyIt turns out that <input type="number"> isn’t enough on its own to get a mobile / touchscreen device to display a numbers only keypad. By default you’ll get the punctuation symbols too:Up and Running with LocalStack and Docker Compose2019-09-10T00:00:00+00:002019-09-10T00:00:00+00:00https://www.ianoxley.com/blog/2019/09/10/up-and-running-with-localstack<p><a href="https://github.com/localstack/localstack">LocalStack</a> is a “fully functional local AWS cloud stack” which lets you write
and test AWS code locally.</p>
<p>It’s relatively easy to add it to an existing <code class="language-plaintext highlighter-rouge">docker-compose.yml</code> file. You
add <code class="language-plaintext highlighter-rouge">localstack</code> as a <code class="language-plaintext highlighter-rouge">service</code>, and tell it to use one of the localstack
images:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>services:
localstack:
container_name: localstack
image: localstack/localstack
</code></pre></div></div>
<p>You can specify which services you need using the <code class="language-plaintext highlighter-rouge">SERVICES</code> environment
variable e.g. if you’re only using SNS and SQS you might do something like
this:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>services:
localstack:
container_name: localstack
image: localstack/localstack
environment:
- SERVICES=sns:4575,sqs:4576
</code></pre></div></div>
<p>This runs sns on port 4575, and sqs on port 4576. You can expose those ports in
the usual way, and set an <code class="language-plaintext highlighter-rouge">HOSTNAME_EXTERNAL</code> environment variable if you need
to:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>services:
localstack:
container_name: localstack
image: localstack/localstack
environment:
- HOSTNAME_EXTERNAL=localstack
- SERVICES=sns:4575,sqs:4576
ports:
- "4575:4575"
- "4576:4576"
</code></pre></div></div>
<p>The LocalStack container comes with <a href="https://github.com/localstack/awscli-local">awslocal</a> installed by default, which is
handy to use in a healthcheck to make sure your queues, etc. are available
before your application code tries to use them:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>services:
localstack:
container_name: localstack
image: localstack/localstack
healthcheck:
test: awslocal sns list-topics && awslocal sqs list-queues
interval: 3s
timeout: 10s
environment:
- HOSTNAME_EXTERNAL=localstack
- SERVICES=sns:4575,sqs:4576
ports:
- "4575:4575"
- "4576:4576"
</code></pre></div></div>
<p>Note that when using <code class="language-plaintext highlighter-rouge">awslocal</code> it will default to the <code class="language-plaintext highlighter-rouge">us-east-1</code> region
unless you set the <code class="language-plaintext highlighter-rouge">AWS_DEFAULT_REGION</code> environment
variable to your region of choice:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>services:
localstack:
container_name: localstack
image: localstack/localstack
healthcheck:
test: awslocal sns list-topics && awslocal sqs list-queues
interval: 3s
timeout: 10s
environment:
- AWS_DEFAULT_REGION=eu-west-1
- HOSTNAME_EXTERNAL=localstack
- SERVICES=sns:4575,sqs:4576
ports:
- "4575:4575"
- "4576:4576"
</code></pre></div></div>
<p>Comprehensive details of what LocalStack provides, and on how you can configure it, are
available on the LocalStack GitHub repo: <a href="https://github.com/localstack/localstack">https://github.com/localstack/localstack</a></p>
<p>Hopefully the above is enough to get you up and running.</p>Ian OxleyLocalStack is a “fully functional local AWS cloud stack” which lets you write and test AWS code locally.Getting the solarized8 theme working in Vim in tmux2019-09-10T00:00:00+00:002019-09-10T00:00:00+00:00https://www.ianoxley.com/blog/2019/09/10/solarized8-theme-in-vim-in-tmux<p>My current theme of choice in Vim is
<a href="https://github.com/lifepillar/vim-solarized8">solarized8</a>, which requires true
colors support in your terminal. It works perfectly when running Vim inside of
iTerm, but it wasn’t working quite as well in Vim <a href="https://camo.githubusercontent.com/09751398c97d1a3907c45d45072c9a40010d3a8c/68747470733a2f2f7261772e6769746875622e636f6d2f6c69666570696c6c61722f5265736f75726365732f6d61737465722f736f6c6172697a6564382f736f6c6172697a6564385f6461726b5f3235362e706e67">inside
tmux</a>.</p>
<p>Lots of advice online suggests either making sure you launch tmux using <code class="language-plaintext highlighter-rouge">tmux
-2</code>, or adding <code class="language-plaintext highlighter-rouge">set -g default-terminal "screen-256color"</code> to your
<code class="language-plaintext highlighter-rouge">~/.tmux.conf</code> file. Neither of these fixes worked for me, although YMMV.</p>
<p>What <em>did</em> fix things for me was adding terminal overrides to <code class="language-plaintext highlighter-rouge">~/.tmux.conf</code>
like so:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>set -ga terminal-overrides ",*256col*:Tc"
</code></pre></div></div>
<p>Huge thanks to <a href="https://github.com/rinetd">rineth</a> for their <a href="https://github.com/tmux/tmux/issues/1246">helpful
post</a>.</p>Ian OxleyMy current theme of choice in Vim is solarized8, which requires true colors support in your terminal. It works perfectly when running Vim inside of iTerm, but it wasn’t working quite as well in Vim inside tmux.More adventures in Spacemacs2018-05-14T00:00:00+00:002018-05-14T00:00:00+00:00https://www.ianoxley.com/blog/2018/05/14/more_adventures_in_spacemacs<p>Following on from <a href="http://www.ianoxley.com/blog/2018/05/10/adventures-in-spacemacs">last week’s post</a> here’s a couple of Spacemacs related things I’ve come across since then.</p>
<h2 id="jekyll-layer">Jekyll layer</h2>
<p>I write this blog using <a href="https://jekyllrb.com/">Jekyll</a>, so I’ve added a <a href="https://allysonjulian.com/posts/blogging_with_spacemacs_and_jekyll/">Jekyll layer</a> to make managing posts a bit easier. You need to add it as a private layer, and it acts as a wrapper around <a href="https://github.com/nibrahim/Hyde">Hyde</a> with some Spacemacs key bindings.</p>
<h2 id="dotspacemacs-major-mode-leader-key">dotspacemacs-major-mode-leader-key</h2>
<p>Spacemacs comes with a <code class="language-plaintext highlighter-rouge">dotspacemacs-major-mode-leader-key</code> variable, which defaults to <code class="language-plaintext highlighter-rouge">,</code>. This acts as a shortcut to access the major mode <code class="language-plaintext highlighter-rouge">SPC m</code> commands. However, I didn’t know about this when I setup Spacemacs and remapped my leader key to <code class="language-plaintext highlighter-rouge">,</code>. Consequently, when I tried to schedule an item in org mode I couldn’t work out why it didn’t schedule the item but opened a new email with my whole org file in it as HTML :thinking:</p>
<p>To get around this I’ve updated my <code class="language-plaintext highlighter-rouge">.spacemacs</code> file and set <code class="language-plaintext highlighter-rouge">dotspacemacs-major-mode-leader-key nil</code> in <code class="language-plaintext highlighter-rouge">dotspacemacs/init</code>.</p>Ian OxleyFollowing on from last week’s post here’s a couple of Spacemacs related things I’ve come across since then.Adventures in Spacemacs2018-05-10T00:00:00+00:002018-05-10T00:00:00+00:00https://www.ianoxley.com/blog/2018/05/10/adventures-in-spacemacs<p>Recently I decided to give <a href="http://spacemacs.org/">Spacemacs</a> a try. If you’ve not heard of Spacemacs, it’s a combination of Emacs and Vim with tons of ergonomical key bindings.</p>
<p>Things I really like about it so far include:</p>
<ol>
<li>That any Git repo automatically becomes a project</li>
<li>The recent projects list / project switcher</li>
<li>Fuzzy finding logic when opening a file in a project (I’m used to using fzf with Vim, so this has so far been a seemless replacement)</li>
<li>The ease with which it kind of sets itself up for you when you open a file of a particular type (I opened a HTML file for the first time it offered to install the HTML layer which comes with <a href="https://github.com/syl20bnr/spacemacs/tree/master/layers/%2Blang/html">emmet-mode and loads of useful key bindings</a>)</li>
<li>Org mode</li>
<li>Key binding discovery :heart:
<img src="/assets/img/spacemacs_key_binding_discovery.png" alt="Spacemacs key binding discovery" /></li>
</ol>
<p>I’ve come across a few snags though:</p>
<ol>
<li>Org mode wouldn’t quite work out of the box. I had to exclude the <a href="https://github.com/syl20bnr/spacemacs/issues/9374#issuecomment-336688513">org-projectile</a> package, and ensure I was <a href="https://github.com/syl20bnr/spacemacs/issues/8074#issuecomment-280253777"><em>not</em> using the built-in org mode</a>.</li>
<li>Keyboard shortcuts when using the shell layer are all kinds of messed up. I suspect it’s some sort of conflict between the Emacs shell commands and the Evil layer / commands and need to spend some time figuring out what’s what.</li>
</ol>
<p>Time will tell whether I stick with Spacemacs, or revert back to Vim. So far though, so good.</p>Ian OxleyRecently I decided to give Spacemacs a try. If you’ve not heard of Spacemacs, it’s a combination of Emacs and Vim with tons of ergonomical key bindings.Managing Node.js Versions With Homebrew2018-02-02T00:00:00+00:002018-02-02T00:00:00+00:00https://www.ianoxley.com/blog/2018/02/02/managing-node-versions-with-homebrew<p><strong>TL;DR</strong> Manage <a href="https://nodejs.org">Node.js</a> versions with <a href="https://brew.sh/">Homebrew</a> by using <code class="language-plaintext highlighter-rouge">brew link</code> and <code class="language-plaintext highlighter-rouge">brew unlink</code>:</p>
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$></span> node <span class="nt">-v</span>
v9.5.0
<span class="nv">$></span> brew <span class="nb">unlink </span>node
<span class="nv">$></span> brew <span class="nb">link</span> <span class="nt">--force</span> node@8
<span class="nv">$></span> node <span class="nt">-v</span>
v8.9.4
</code></pre></div></div>
<hr />
<p>Although you can use <a href="https://github.com/creationix/nvm">dedicated tools</a> to manage your Node.js versions, I’ve got
by just fine using Homebrew’s <code class="language-plaintext highlighter-rouge">link</code> and <code class="language-plaintext highlighter-rouge">unlink</code> commands:</p>
<ol>
<li>
<p>Homebrew’s <code class="language-plaintext highlighter-rouge">node</code> package points at the latest version of Node.js. You can find out exactly which version by running <code class="language-plaintext highlighter-rouge">brew info node</code>:</p>
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$></span> brew info node
node: stable 9.5.0 <span class="o">(</span>bottled<span class="o">)</span>, HEAD
...
</code></pre></div> </div>
</li>
<li>Install <code class="language-plaintext highlighter-rouge">node</code> using <code class="language-plaintext highlighter-rouge">brew install node</code></li>
<li>
<p>Homebrew formulae are available for prior versions of Node.js and follow the <code class="language-plaintext highlighter-rouge">node@<version></code>
naming convention. You can see exactly which version of Node.js a formula points to by
using the <code class="language-plaintext highlighter-rouge">info</code> command:</p>
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$></span> brew info node@8
node@8: stable 8.9.4 <span class="o">(</span>bottled<span class="o">)</span>, HEAD <span class="o">[</span>keg-only]
...
</code></pre></div> </div>
</li>
<li>Install <code class="language-plaintext highlighter-rouge">node@8</code> using <code class="language-plaintext highlighter-rouge">brew install node@8</code></li>
<li>
<p>With <code class="language-plaintext highlighter-rouge">node</code> and <code class="language-plaintext highlighter-rouge">node@8</code> installed we can switch between them like so:</p>
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$></span> node <span class="nt">-v</span>
v9.5.0 <span class="c"># <- node is pointing at the node formula</span>
<span class="nv">$></span> brew <span class="nb">unlink </span>node
<span class="nv">$></span> brew <span class="nb">link</span> <span class="nt">--force</span> node@8 <span class="c"># --force required as node@8 is a keg-only formula</span>
<span class="nv">$></span> node <span class="nt">-v</span>
v8.9.4 <span class="c"># <- node now points at the node@8 formula</span>
</code></pre></div> </div>
</li>
<li>
<p>To change back to the latest Node.js, just do the opposite to what we’ve
just done:</p>
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$></span> brew <span class="nb">unlink </span>node@8
<span class="nv">$></span> brew <span class="nb">link </span>node
<span class="nv">$></span> node <span class="nt">-v</span>
v9.5.0
</code></pre></div> </div>
</li>
</ol>Ian OxleyTL;DR Manage Node.js versions with Homebrew by using brew link and brew unlink:Switching from Bash to Zsh2017-12-04T00:00:00+00:002017-12-04T00:00:00+00:00https://www.ianoxley.com/blog/2017/12/04/switching-from-bash-to-zsh<p>After years of using Bash without ever really having chosen Bash, I recently
switched my shell to Zsh. Why? Partly out of curiosity, and partly because
I was fed up with my bash history not always being available in multiple
terminals simultaneously.</p>
<p>Here’s how I made the switch:</p>
<ol>
<li>Installed the latest <code class="language-plaintext highlighter-rouge">zsh</code> and <code class="language-plaintext highlighter-rouge">zsh-completions</code> packages via Homebrew:
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>brew update
brew <span class="nb">install </span>zsh
brew <span class="nb">install </span>zsh-completions
</code></pre></div> </div>
</li>
<li>Installed <a href="http://ohmyz.sh/">Oh-My-Zsh</a></li>
<li>Chose my preferred theme - I went with <a href="https://github.com/robbyrussell/oh-my-zsh/wiki/Themes#avit">avit</a></li>
<li>Added the <code class="language-plaintext highlighter-rouge">rbenv</code> setup code from my <code class="language-plaintext highlighter-rouge">.bash_profile</code> to my <code class="language-plaintext highlighter-rouge">.zshrc</code> file:
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">export </span><span class="nv">PATH</span><span class="o">=</span><span class="s2">"</span><span class="nv">$HOME</span><span class="s2">/.rbenv/bin:</span><span class="nv">$PATH</span><span class="s2">"</span>
<span class="nb">eval</span> <span class="s2">"</span><span class="si">$(</span>rbenv init -<span class="si">)</span><span class="s2">"</span>
</code></pre></div> </div>
</li>
<li>Added aliases, ENV variables, and functions e.g. <code class="language-plaintext highlighter-rouge">docker_start</code> from my <code class="language-plaintext highlighter-rouge">.bash_profile</code> to my <code class="language-plaintext highlighter-rouge">.zshrc</code> file</li>
<li>Copied my bash history over to my zsh history using Ankit Goyal’s fantastic <a href="https://gist.github.com/goyalankit/a1c88bfc69107f93cda1">import bash history to
zsh history</a>
script.</li>
<li>Set my shell to <code class="language-plaintext highlighter-rouge">zsh</code> in my <code class="language-plaintext highlighter-rouge">.vimrc</code> file:
<pre><code class="language-vimrc">set shell=/usr/local/bin/zsh
</code></pre>
</li>
<li>Enabled any relevant plugins for my workflow e.g. git, gitfast, docker.</li>
</ol>
<p>It’s now about two weeks since I made the switch and I’ve not looked back.
Granted, zsh won’t be for everyone. But you’ve got to at least give these
things a try.</p>Ian OxleyAfter years of using Bash without ever really having chosen Bash, I recently switched my shell to Zsh. Why? Partly out of curiosity, and partly because I was fed up with my bash history not always being available in multiple terminals simultaneously.Setting the font in terminal Vim2017-02-27T00:00:00+00:002017-02-27T00:00:00+00:00https://www.ianoxley.com/blog/2017/02/27/vim-terminal-font<p>After years running Vim on both OS X and Windows, I’d got used to setting fonts
and colour schemes via <code class="language-plaintext highlighter-rouge">gvimrc</code>. But today, as I setup my new machine in my <a href="http://www.sageone.com">new
job</a>, I couldn’t remember how on earth you change the font in Vim when running
it in Terminal.</p>
<p>As it turns out, you can’t.</p>
<p>When run via the console / terminal, Vim uses the same font that the terminal*
uses.</p>
<p>No wonder I couldn’t remember how to set it :)</p>
<p><em>* Changing the font in your terminal in OS X is done via Terminal ->
Preferences</em></p>Ian OxleyAfter years running Vim on both OS X and Windows, I’d got used to setting fonts and colour schemes via gvimrc. But today, as I setup my new machine in my new job, I couldn’t remember how on earth you change the font in Vim when running it in Terminal.Migrating from Octopress to Jekyll2017-01-11T00:00:00+00:002017-01-11T00:00:00+00:00https://www.ianoxley.com/blog/2017/01/11/migrating-from-octopress-to-jekyll<p>I’ve been running my blog on Octopress for the past 3 years. It has served me
well. But I couldn’t shake the feeling that my site was running on
someone else’s Jekyll blog, as that - somewhat harshly - is what Octopress
essentially is.</p>
<p>So I decided to migrate my site to Jekyll itself. This turned out to be
reasonably straight forwards:</p>
<ol>
<li>I installed Jekyll as per the instructions on
<a href="https://jekyllrb.com/">https://jekyllrb.com/</a>
<ul>
<li><code class="language-plaintext highlighter-rouge">gem install jekyll</code></li>
<li><code class="language-plaintext highlighter-rouge">jekyll new my-site && cd $_</code></li>
</ul>
</li>
<li>
<p>Copied my Octopress <code class="language-plaintext highlighter-rouge">source/_posts</code> directory to Jekyll’s
<code class="language-plaintext highlighter-rouge">_posts</code> directory</p>
</li>
<li>Copied my static resources to the Jekyll root folder e.g. favicons and my
<code class="language-plaintext highlighter-rouge">CNAME</code> file.</li>
</ol>
<p>And that was it!</p>Ian OxleyI’ve been running my blog on Octopress for the past 3 years. It has served me well. But I couldn’t shake the feeling that my site was running on someone else’s Jekyll blog, as that - somewhat harshly - is what Octopress essentially is.