Writing media queries for Retina devices with include-media
Devices with Retina displays have been with us for a while, and now Retina 3x is a thing. So how to write media queries to target devices with those pixel densities?
A cautious and calculated venture into Flexbox
So, let's talk Flexbox. When you think for a second about what it offers and how easier it would make your life as a front-end dev, you realise that the plain old CSS you've been using (and learned to cherish) is pretty much crippled. How hard should it be to vertically center something, or to evenly distribute elements across the width of a container?
Experimenting with Sass and grids
CSS grid systems are very popular nowadays and a preprocessor is a good friend to have if you're looking to use them. Systems like Gridle, Neat or Susy are very powerful (and considerably complex) tools, and in case you're already using any of them let me warn you straight away: this post won't bring anything new or add anything to what they do.
If you're like me, however, you'll most likely want to create your own solution at some point, something small and with code that you fully understand, giving you full control over things. If that's the case, read along.
Write simple, elegant and maintainable media queries with Sass
I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my own: meet include-media.
Approaches to media queries in Sass
Using media queries in CSS as part of responsive websites is bread and butter stuff to todays front-end developer. Using preprocessors to make them more comfortable to write and easier to maintain has become common practice as well.
I spent a few months experimenting with a dozen different approaches to media queries in Sass and actually used a few in production. All of them eventually failed to cater for everything I needed to do in an elegant way. So I took what I liked about each of them and created a solution that covered all scenarios I came across.
Building a bespoke commenting system for a static site
I've been using Jekyll to run my professional website and my blog for about 2 months and I never look back. It can do pretty much everything a dynamic website does, but better and faster. The one thing that my blog was missing was a way to get feedback from the readers and to allow me to interact with them and learn from their experiences. It's not very smart (and a bit arrogant, actually) to publish an article with a solution to a certain problem and not allow readers to comment on it, pointing possible weaknesses or even posting other solutions that (most likely) turn out to be better than mine.
Including and managing images in Jekyll
One thing that I instantly loved about Jekyll is that it encourages you to keep a strict and tidy folder structure in your project: you have your posts, layouts, styles, includes, collections and pages, and each one of these will go in a different folder to keep concerns separate. But what about the assets, namely images, that you want to include with your posts? Will you keep piling them in your assets folder? I have a better idea.
Is LinkedIn ignoring your open graph meta tags?
So you're trying to share your website on LinkedIn because you're a professional and all, but it decides to completely ignore your open graph meta tags? Just read along.
Collapsing code snippets on mobile devices
If you have a blog about coding — GOSH, aren't you geeky — you probably find yourself showing your readers portions of code to guide them through specific problems and to outline the solutions. Taking the time to change how you display these code snippets can be the difference between a good and a terrible user experience for your readers.
Thoughts on serving and monitoring a feed
Creating an alternative version of a website or a blog has become common practice, allowing authors to syndicate their content to other sites and offering readers the ability to use third-party applications to read and merge articles with other sources of content. RSS and Atom are some of the most used formats and most popular blog platforms are capable of creating these feeds.
Jekyll is no exception as it ships with a
feed.xml file that automatically generates a feed every time the site is built, so you could start pointing your readers to your feed at http://yourblog.url/feed.xml right away. But is that the best strategy? What if, at some point, you decide to move your blog to a different platform with a different URL? And most importantly, how do you keep track of how many people actually read and subscribe to your content?
Creating a tags page in Jekyll
Jekyll supports post tagging by default, but you have to do some work to get something out of it. It reads tags directly from the front matter on posts, but then what? Does it allow users to search posts by tag? Does it create a tags aggregation page? No sir. You'd probably need plugins to achieve that level of functionality, but there are still some things you can achieve without them.
Adding Ajax pagination to Jekyll
Jekyll has a built-in pagination system that allows you to break your blog posts into pages with a given number of posts, automatically creating all the files and folders necessary and making it really easy to generate and include the page navigation interface for your pages.
By adding
paginate: 5 to the config file (_config.yml) and doing a couple of minor tweaks to the code that loads site posts, Jekyll will automatically create pages with a maximum of 5 posts with the default URL pattern of yourblog.url/page2, yourblog.url/page3 and so on. But this wasn't exactly what I was after.
How I write media queries in Sass
Once you Sass, you never go... ah, damn it. I can't make the pun work, but you get the idea. Sass is a really powerful tool for front-end developers that I would really struggle to live without. CSS pre-processors, like any kind of power, come with great responsibility. They enable poor, lazy and inefficient designs, but they also allow you to write some really cool stuff with little to no effort.
How I used Jekyll on my Backbone.js website
Several months after creating my website, I decided that I needed some form of content management system, especially since I was planning on throwing my blog into the mix. Content was mixed with layout and the mobile version wasn't great (it was a "m.dot" solution with different templates and content duplication — YIKES!).
The story behind my website
It was the beginning of 2013 and I needed a website. I wanted to apply for a job in London as a creative developer and I knew I needed a portfolio that would stand out. At that time, websites with full-screen background videos were starting to be a trend. The first one I saw that I really liked was Beyoncé's website, which included a looping background video that would change depending on the section. That was cool, but I wanted something more.