Ernest Ojeh

Factory reset Logitech MX Keys Keyboard

Wed, 11 May 2022 24:00:00 GMT

I recently needed to remove some devices from Logitech's easy-switch feature, and realised there wasn't an easy way to do this. I did a search online and luckily found a keyboard shortcut that does just this.

How to reset Logitech MX keys

Unpair your keyboard from Bluetooth settings.
Press the following keys in this order:
esc O esc O esc B
The lights on the keyboard should flash multiple times.
Turn off and on the keyboard, and all devices in easy-switch should be removed.

Source

How to fix Jekyll after upgrading to macOS 11 Big Sur

Sun, 08 Nov 2020 24:00:00 GMT

I recently upgraded from MacOS Catalina to Big Sur beta and the first thing I noticed was that my dev environment was broken. My website was setup locally using Jekyll and when I tried to run 'bundle exec jekyll serve', I got this error:

Could not find eventmachine-1.2.7 in any of the sources
Run `bundle install` to install missing gems.

And running 'bundle install' didn't seem to solve it (even with sudo), it showed this error:

An error occurred while installing eventmachine (1.2.7), and Bundler cannot continue.
Make sure that `gem install eventmachine -v '1.2.7' --source 'https://rubygems.org/'` succeeds
before bundling.

Running gem install eventmachine also returns an error, and the mkmf.log file showed an error with ruby:

"xcrun clang -o conftest -I/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/universal-darwin20 -I/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby/backward -I/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0 -I. -D_XOPEN_SOURCE -D_DARWIN_C_SOURCE -D_DARWIN_UNLIMITED_SELECT -D_REENTRANT    -g -Os -pipe -DHAVE_GCC_ATOMIC_BUILTINS -DUSE_FFI_CLOSURE_ALLOC conftest.c  -L. -L/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib -L. -L/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX11.0.Internal.sdk/usr/local/lib     -lruby.2.6   "
In file included from conftest.c:1:
In file included from /Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby.h:33:
/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby/ruby.h:24:10: fatal error: 'ruby/config.h' file not found
#include "ruby/config.h"
         ^~~~~~~~~~~~~~~
/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby/ruby.h:24:10: note: did not find header 'config.h' in framework 'ruby' (loaded from '/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks')
1 error generated.
checked program was:
/* begin */
1: #include "ruby.h"
2: 
3: int main(int argc, char **argv)
4: {
5:   return 0;
6: }
/* end */

package configuration for openssl is not found

And at the time of writing this post, Homebrew doesn't support MacOS 11 Big Sur, so "brew install rbenv ruby-build" doesn't work.

How to fix command line tools (CLT) in MacOS Big Sur:

I did some search online, and found this answer on stack overflow (Which involves installing Xcode 12 beta);

So follow these steps to install rbenv. You need xcode installed for step 4. Also, I updated the steps to match my use case;

git clone https://github.com/rbenv/rbenv.git ~/.rbenv
cd ~/.rbenv && src/configure && make -C src
Add ~/.rbenv/bin to your $PATH for access to the rbenv command-line utility. see: https://github.com/rbenv/rbenv#basic-github-checkout
Make sure export PATH="$HOME/.rbenv/shims:${PATH}" was added to your $PATH
xcode-select --switch /Applications/Xcode-beta.app/Contents/Developer
Now in your Jekyll project's root, you should be able to run bundle install and it should install all missing dependencies.

Now running bundle exec jekyll serve should start your server.

I hope this helps someone ✌🏾

Site redesign: Considerations and overview

Fri, 29 May 2020 24:00:00 GMT

I recently started redesigning my website and for the first time, I didn't start by opening my code editor. All the previous versions of this site had mainly been designed in the browser and I wanted to approach this differently and put some more thought into the overall structure of the page and type of content I wanted to showcase.

This is more important to me now because moving forward I intend to treat this as my continuously evolving little corner of the internet, where I'll share things that inspire me, what I'm learning, creating etc, so it should be easily scalable.

Note: All this is still a work-in-progress and I'm figuring stuff out as I go, so if you have any tips, suggestions, or questions, please share them with me on Twitter.

Designing in Figma:

I created a lot of explorations before I choose the current design, one major role designing first played was to help in figuring out the grid I wanted to use, and what parts would be reusable (turned into components) when coding.

I had some idea of what I wanted the design and layout for the site to be, but I also got some inspiration from sites like httpster, hoverstates, and portfolio sites of designers I admire like Frank Chimero and Paul Stamatiou.

Typography:

I initially picked Roc grotesk for headings and Neue Haas Unica for the body font, but decided to use a single font for header and body, so I went with Monument Grotesk.

Sticking with Jekyll:

Jekyll is a static static site generator written in Ruby that transforms plain text files into websites or blogs. I love it because it doesn't come with the complexity of setting up a CMS, or databases and I love the idea of being able to create pages or blog posts on my site by pushing a markdown or html file to Github.

Switching from Skeleton to Tailwind:

For the previous version of my site, I used Skeleton which is a simple responsive CSS boilerplate - I basically used the grid and utility classes, it was light (only 11kb), and worked great but for this redesign I needed more modern and detailed framework that had things like CSS grid, flexbox, colors etc. So that's where Tailwind CSS comes in.

Before I decided on Tailwind, I was considering Tachyons or Bulma but I chose Tailwind because it seemed to fit my needs more and even though it may not be the lightest but I love how extendable it is, and also there are ways to purge unused styles.

To make setting up my new site easier, I used a Jekyll tailwind starter template (by @mhanberg)

Hosting:

Nothing changed here. My website is still hosted on Github, and deployed using Netlify.

Photo blog:

I used to use Netlify large media + GitLFS to store my photos and manually create new pages for photos (similar to blog posts), but I wanted something with less friction so I decided to move the photo part of this site to a separate repo and switched to using photostream (by @maxvoltar) - It's an opensource photo blog with cool features like lazy loading, managing image resolution depending on bandwidth, and it's easy to add a new photo - Just drop into a folder and it's file name becomes the url.

Next Steps:

I'm still working on it, but so far I'm happy with the base structure I have for now. Next I'm considering adding some interaction animations in a few places, optimizing images for mobile devices, and sharing some more posts that explains my process in detail.

What is UX?

Tue, 11 Jul 2017 24:00:00 GMT

A short exchange I had with an Immigration official at the airport in Accra yesterday;

Immigration Lady:

Your profession is UX Designer? What is UX?

Me:

It's User Experience. (Then I go ahead to explain)

Immigration Lady:

Then you should write "User Experience". Not everyone knows what UX means.

Jekyll snippets

Thu, 08 Jun 2017 24:00:00 GMT

This is just a quick post listing a few of the jekyll snippets I'm using on this site. I've been running this site on github pages for a few years now, and I love how simple it is to setup and how lightweight it is.

Show reading time

This shows how much time in minutes it would take to complete reading a post, in the format "3 min read".

{% assign words = content | number_of_words %}
  {% if words < 270 %}
    1 min
  {% else %}
    {{ words | divided_by:135 }} mins
{% endif %}

Auto-load minified sass files inline

So, I came across this snippet when I was trying to find a way to dynamically detect critical above-the-fold css in order to optimize page speed. It doesn't exactly do that, but close. I don't have so much css on this site, so I basically load a combined version of my minified sass files inline.

{% capture include_to_scssify %}
    {% include critical.scss %}
{% endcapture %}
{{ include_to_scssify | scssify }}

Also, it was one of the things I did to get a perfect score on Google Pagespeed Insights.

Show latest post on home page

Yesterday, I added a section on the homepage that shows the latest post published on this site. I wasn't sure this was going to be possible but a quick search got me this;

{% assign post = site.posts.first %}
  {% assign content = post.content %}
{% include post-home.html %}

And then in your "_includes/post-home.html", you add this;

{% if post.title %}
  {{ post.title }}
  {{ post.date | date_to_string }}
{% endif %}
{{ post.excerpt | strip_html | truncatewords:18 }}

Note, I added a "truncatewords:18" to limit the text excerpt. Take it out if you don't need it.

Show recent posts on post page

This basically shows the recently published posts on your site. You can change the limit to modify the number of posts shown.

  {% for post in site.posts limit:3 %}
    {{ post.title }}
    Published on {{ post.date | date_to_string }}
  {% endfor %}

And.. that's it. Thanks for reading.