And running ‘bundle install’ didn’t seem to solve it (even with sudo), it showed this error:
Running gem install eventmachine also returns an error, and the mkmf.log file showed an error with ruby:
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.
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
~/.rbenv/bin
to your $PATH for access to the rbenv command-line utility. see: https://github.com/rbenv/rbenv#basic-github-checkout
xcode-select --switch /Applications/Xcode-beta.app/Contents/Developer
bundle install
and it should install all missing dependencies.
Now ‘bundle exec jekyll serve’ should start your server.
I hope this helps someone ✌🏾
]]>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.
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.
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.
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.
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)
Nothing changed here. My website is still hosted on Github, and deployed using Netlify.
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.
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.
]]>Your profession is UX Designer? What is UX?
It's User Experience. (Then I go ahead to explain)
Then you should write "User Experience". Not everyone knows what UX means.
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 %}
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.
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.
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.