10k Apart – Inspiring the Web with Just 10k

10k apart

From this article, I’ve learned about an excellent (for our times) 10k Apart competition:

With so much of an emphasis on front-end frameworks and JavaScript runtimes, it’s time to get back to basics—back to optimizing every little byte like your life depends on it and ensuring your site can work, no matter what. The Challenge? Build a compelling web experience that can be delivered in 10kB and works without JavaScript.

Think you’ve got what it takes? You have until September 30th.

I can’t wait to see the submissions and all the ways to squeeze the awesomeness of the modern web into just 10 kilobytes.  This reminds me of the Perl Golf posts over at PerlMonks and Assembly PC 64K Intro from my childhood early days (here are some examples).

FotoJet – online photo editor

FotoJet

FotoJet is yet another online photo editor.  Like many others it provides a simplified user interface for manipulating images.  Two things in particular that I liked about this service are collages and social media banners.

Collage editing makes it really simple to combine multiple images into one (see the screenshot above).  Social media banners greatly simplifies the creation of images that can be used for Facebook, Twitter, Tumblr, and YouTube channel headers.  No more searching for the appropriate dimensions, image sizes, and the like!

Wikiwand – Wikipedia Modernized

I came across an interesting take on WikipediaWikiwand.  It’s basically an upgraded and modernized design of the Wikipedia.  You can either search and browse it like you do with the regular Wikipedia, or, better even, install a browser extension (here’s one for Google Chrome), which will redirect all your Wikipedia page clicks through to Wikiwand.  You get exactly the same content, but now it’s actually quite pleasant to explore.  Have a look at Cyprus page, for example:

wikiwand

I’m not a frequent Wikipedia reader, but in the last couple of days, I have to say, I’ve found myself spending much more time than usual reading Wikipedia pages on the Wikiwand website.  Maybe, it is time for the Wikipedia face lift after all.

But it’s not just about forcing a different web design upon thee.  There’s more.  You get options (upper-right corner).  You can switch between light and dark designs, sans and serif fonts, adjust font size and text justification, and more. If you create account and login (Facebook is supported), you can bookmark pages too.

options

Even if you are not a fan of fancy websites, I suggest you give it a try for a couple of days.  You might find yourself quite surprised.

CySEC copy-paste logo design continues

A while back I blogged about Cyprus Securities and Exchange Commission website using a copy-paste design of the logo from the United States Department of Health and Human Services.  Since then, CySEC website got a new look and feel, as well as a new logo.  Well, it looks like they haven’t really solved the problem of the copy-paste.  Have a look yourself.  Here’s the updated CySEC logo from their current website:

CySec logo

And here is the logo from the Money Project:

Money Project logo

Arguably, not exactly a copy-paste like before, but way too similar not to fall into the plagiarism, which is just a fancy word for the copy-paste.

Adobe Color CC – Color Schemes Tool

adobe color cc

If you are not a graphics or web designer by trade, but do have an occasional need for a color scheme that just works, Adobe Color CC is the tool just for you.  It’s web-based – so there is no need to install anything, it’s free, and it’s super easy to use.  It supports a variety of color rules – analogous, monochromatic, triad, complimentary, compound, and shades – just pick one, and drag the markers around the color circle, until you are happy.

I’ve seen and used a bunch of similar tools, but I think this one works the best of them all.

WordPress Plugin : Typecase Web Fonts

Disclaimer: I’m not much of a fonts guy, but once in a while I just want to be.

I was reading the “Best Practices for Designing a Pragmatic RESTful API” article, when I realized I liked the font it was written in very much.  I liked it so much that I immediately wanted to have it on my blog too.  Chromium Inspector tool helped identify it as Ubuntu font family.

I have no problem editing WordPress themes’ CSS files, but I prefer to avoid it whenever possible.  So a quick Google search later I found this blog post, which describes how to customize fonts in the Twenty Fifteen theme, which is coincidentally what I’m using currently.

The blog post recommended Typecase Web Fonts plugin.  I installed it and started playing around with it, and I have to say it’s pretty amazing.  Basically, it provides a font search tool in the WordPress admin.  Once you find the font, it shows you the preview text and some font details.  You then add CSS selectors on which you want this font to apply.  It took me literally 3 minutes to figure it all out.  You can even add multiple fonts.  For example,  since now I had sans-serif font for the blog content, I wanted to use a serif font for the headings – boom! – and I have Roboto Slab font to compliment Ubuntu.

The plugin is so easy to use and is so handy that I think we’ll be using it at work now too.  Check it out.