HTML Canvas Tutorial

Skilled.co put together this HTML Canvas Tutorial, which covers the HTML 5 <canvas> functionality, that allows web developers to draw all sorts of graphics on the fly, using JavaScript.  The tutorial is available for download in PNG and PDF formats, as well as on the webpage, and it covers the following:

  • Shapes
  • Styles and color
  • Text
  • Images
  • Transformations
  • Compositing and clipping
  • Animation
  • Pixel manipulation
  • Hit regions and accessibility

It also provides a few useful tips, inspiration, and links to other resources.

WordPress Theme Developer Handbook

WordPress Theme Developer Handbook:

The Theme Developer Handbook is a repository for all things WordPress themes. Whether you’re new to WordPress themes, or you’re an experienced theme developer, you should be able to find the answer to many of your theme-related questions right here.

Finally, there is a more organized resources that WordPress Codex!

CakePHP 3 and the need for breadcrumbs

I’ve been catching up with the CakePHP roadmap.  One of the tickets for the next release (CakePHP 3.3.10, scheduled for tomorrow), is this ticket, relating to the breadcrumbs navigation.

When building applications with CakePHP, you have a couple of easy ways to generate breadcrumbs for the easier user navigation.  One, is to use HTML Helper, which provides a quick and simple way.  The other, is to use a feature rich Breadcrumbs Helper, available since CakePHP version 3.3.6 (but not mentioned in the release notes).

Digging further down into templates, and best practices for user navigation, and different ways of styling breadcrumbs (Smashing Magazine, Hongkiat, UI Patterns), I thought – wouldn’t it be nice to have breadcrumbs navigation built into a human brain?

I mean, how many times did you catch yourself in some dark corner of the Internet, trying to figure out how did you get there?  If only humans had breadcrumbs navigation built into our brains, that would be so easy to trace back the steps.  Browser history can, of course, help, but with so many open tabs and several things happening in parallel, a flat list of tabs is not much help.

Top 29 books on Amazon from Hacker News comments

hacker-news-books

I came across this nice visualization of “Top 29 books ranked by unique users linking to Amazon in Hacker News comments“.

Amazon product links were extracted and counted from 8.3M comments posted on Hacker News from Oct 2006 to Oct 2015.

Most of these are, not surprisingly, on programming and design.  A few are on startups and business.  Some are on how to have a good life.  Which is a bit weird.

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.