Stunning dataviz project maps the world's population

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/mGqoPeJ-Tw0/stunning-dataviz-project-maps-the-worlds-population

At its worst, data visualisation can just be an exercise in dressing up dull statistics in fancy clobber to try to make them look more interesting, and usually failing.

At its best it can be a fantastic way of communicating otherwise impenetrable facts and figures in a way that makes them instantly accessible, and this dataviz project from The Pudding is definitely in the latter category.

Population Mountains: New York

Areas of dense population show up as virtual mountains on the map

It can be hard to grasp just how populations are spread out around the world, but The Pudding's Population Mountains project presents this data in a way that enables you to immediately identify the world's population hotspots. Using data from the Global Human Settlement Layer – which uses a mix of satellite imagery, census data and geographic information to create population density maps – the project creates a detailed 3D height map, where the most heavily populated areas appear as virtual mountains.

Looking at a zoomed-out map of the the world in this view, you can instantly identify the major cities as vivid spikes on an otherwise flat plane; zoom in closer and you can see how some cities feature a lot of people crammed into a relatively small space that looks like a thick needle, while other cities with sprawling suburban areas appear as more gentle inclines.

Population Mountains: Bengaluru

Here a big city is surrounded by lots of smaller, densely populated areas

In The Pudding's post about the project you'll find some fascinating studies of how population density can vary across the world; in some places, you'll find a huge proportion of the population packed into major cities, with the surrounding areas appearing as almost flat spaces by comparison, while in others, such as Bengalaru in India, you can see that the vast city is surrounded by loads of amazingly dense urban settlements. 

Population Mountains: Paris

See the difference between the north of France and the south of England

Another interesting comparison is between London and Paris; London is a chunky peak among a load of the sizeable population hills that make up the Home Counties, while Paris is a vast spike, with nothing but the occasional foothill making up the rest of the north of France.

Population Mountains: Interactive map

It’s easy to explore the data for yourself

You can read the Population Mountains post over at The Pudding for some great curated views and accompanying insight; alternatively you can head straight for the interactive map and see the data for yourself. There are two datasets to play with; the most recent population data from 2015, and an older set from 1990, and there's even an option to compare the two datasets to see how populations have shifted over the last quarter of a century.

Related articles:

The 62 best infographicsHow to create amazing infographicsThe data trend set to revolutionise app design

The 16 best free blogging platforms

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/SUZSZfShch4/best-blogging-platforms-121413634

It used to be said that everyone has a book in them, but these days, it might be more appropriate to argue that everyone has a viral blog post in them. Plenty of people retain a thirst for more thoughtful writing than a tweet can afford.

Also read: How to start a blog

There's something about having a space that's properly yours, that's potentially free from the distractions of a billion adverts and countless competing status updates. Blogging is also still a great, organic method of self-promotion online, and the best thing is, there are a load of free blogging platforms out there to get you started. 

What is a blogging platform?

A blogging platform is a service or application that facilitates the creation of web pages for publishing your content. These content management systems come in the form of website builders like Wix, blogging applications like WordPress, or simplified blogging software like Tumblr.

In this round-up, we explore the best blogging platforms for newcomers who want to get a free blog up and running.

01. Wix

Best blogging platforms: Wix

Wix’s drag-and-drop system is made with HTML5 in mind

If HTML5 matters to you then Wix is well worth a look; it claims to be the only drag-and-drop site-building platform with HTML5 capabilities. On top of that you'll find over 500 designer-made templates as well as plenty of additional features and apps, along with top-grade hosting so you can rest assured your site will be there when you need it.

You get 500MB storage and 1GB bandwidth with a free Wix account; if you need more – plus other features like your own domain, and online store and Google Analytics – then take a look at its premium plans.

02. Joomla

Screenshot of Joomla homepage

Joomla is a popular tool among the blogging community

Open source software content management system Joomla is a popular choice among the blogging community. Powerful and flexible, Joomla can be used to build any kind of website or blog, with design features including the ability to create your own template and render HTML for objects/arrays of data. It also uses Bootstrap for perfect responsive designs. 

Similar to WordPress.org, Joomla is a self-hosted solution, which means you will need a domain name and web hosting to use it (although there is an option to create a site on launch.joomla.org) The Joomla community is much smaller than WordPress community, so there are fewer themes and add-ons than for WordPress. But there are still hundreds of templates to choose from, and extensions to add more features, to fully customise your blog's design.

03. Yola

Best blogging platforms: Yola

Yola boasts flexible layouts and no third-party ads

Yola limits you a bit if you have grand plans for your blog – you can only have two sites and three web pages with its free plan – but the upside is a healthy 1GB of storage and bandwidth, and your site won't be littered with unsightly third-party ads.

Getting started is easy, with dozens of customisable templates to choose from, a straightforward site builder for putting everything together, flexible layouts and drag-and-drop widgets. And if you have the skills, then you can edit your CSS in order to fine-tune your site's look.

04. Hubpages

Best blogging platforms: Hubpages

Join a buzzing community of Hubbers with Hubpages

Hubpages is a network of sites that enable bloggers (or Hubbers) to share their story with a vast open community. It has an Arts and Design section, which will be a happy home for creative bloggers, and Hubpages majors on its ability to connect its users with a wide audience and earn revenue from ads and affiliates.

05. Contentful

Contentful website screenshot

Call your content into any design with the Contentful API

Nobody knows how they're going to want to display their articles a few years down the line, so Contentful provides a way to separate your content from your design. It calls this an "API-first" approach, so your content is stored on its servers and you can call it into any design or platform as you like. So if you want to build a completely different site in a few years time, it's easy to bring everything in as it's set up to be portable from the start.

06. Jekyll

Jekyll website screenshot

Make static sites with Jekyll

Jekyll takes your raw text files, which may be written in Markdown, if you like, and turns them into a robust static site to host wherever you want. It’s the engine behind GitHub Pages, which means you can host your blog on there for free. 

Making your blog with Jekyll avoids the need to work with technicalities such as databases, upgrades and so on, so there are fewer things to go wrong, and you can build something completely from scratch. 

07. WordPress

Wordpress

WordPress is the most popular free blogging platform

If the folks over at WordPress are to be believed (and they seem suitably trustworthy sorts), the platform now 'powers' almost a third of the internet. 

It's easy to see why: on WordPress.com, you can rapidly create a new blog entirely for free, with a reasonable amount of customisation. Alternatively, most web hosts provide WordPress as a free single-click install, and more information on what's possible there can be found at WordPress.org.

Newcomers might find WordPress a touch bewildering initially, but it's the best free option for anyone wanting a great mix of power, customisation and usability. To help you out, we've rounded up the best WordPress tutorials and the best free WordPress themes to get you started.

08. Tumblr

Screenshot of Tumblr website

Tumblr is one of the easiest free blogging platforms to use

To some extent, Tumblr feels a bit like a halfway house between WordPress and Twitter. It offers more scope than the latter, but tends to favour rather more succinct output than the former.

Decent mobile apps make it easy to submit content to a Tumblr blog from anywhere, though, and it's reasonably easy to customise your theme to make it your own.

Tumblr also has a strong social undercurrent, via a following model combined with notes and favourites. Tumblr has also recently announced a controversial ban on adult content, which means that the porn bots that used to be lumbering around on the site should no longer be a problem.

09. Blogger

Blogger site screenshot

Blogger is one of the longest running free blogging platforms on the web

You'd hope with a name like 'Blogger' that Blogger would be a decent free service for blogging. Fortunately, it is. Sign in with your Google ID, and you can have a blog up and running in seconds, which can then be customised with new themes. 

It is, however, a Google service, so be a touch wary, given how abruptly that company sometimes shuts things down that millions of people were happily using.

10. Medium

Screenshot of the Medium website

Medium is a free blogging platform set up by Twitter’s founders

Medium is the brainchild of Twitter's founders, and appears to be their attempt to do for 'longreads' what they once did for microblogging. The result is a socially-oriented place that emphasises writing, although within an extremely locked-down set-up. 

It's a place to blog if you want your words to be taken seriously, and if you favour a polished, streamlined experience. But if you're big on customisation and control, look elsewhere.

11. Svbtle

Screenshot of the Svbtle site says 'A blogging platform designed to help you think'

Svbtle is a stripped-back free blogging platform for longform writing

Describing itself as a "blogging platform designed to help you think", Svbtle is fairly similar to Medium in approach. Like Medium, it strips everything right back, resulting in a bold, stylish experience that pushes words to the fore. 

It could easily become your favourite blogging platform for the act of writing, but it again relies on you also wanting something extremely simple and not caring a jot about customisation.

12. LiveJournal

Screenshot of the LiveJournal site

LiveJournal combines blog and social networking

One of the veterans of this list, LiveJournal (like Blogger) started life in 1999. Perhaps because of its age, it rather blurs the lines (the site says "wilfully") between blogging and social networking.

The result is more of a community that affords you your own space, but that also very much encourages communal interaction. It is possible to fashion something more private, but to get the most out of LiveJournal, you need to be prepared to delve into discussion as much as writing.

13. Weebly

Screenshot of the Weebly website says 'A beautiful website starts here'

Weebly is a website creation tool that includes free blogging templates

Weebly bills itself more as a website-creation system than something for solely creating a blog. It’s based around drag-and-drop components, which enable you to quickly create new pages.

However, blogging is also part of the system, and you get access to customisable layouts, a bunch of free themes, and the usual sharing features you’d expect, to spread your words far and wide.

14. Postach.io

Screenshot of the Postach.io site says 'The easiest way to blog'

Postach.io is a free blogging platform from the creators of Evernote

Postach.io claims it's the "easiest way to blog". It's from the people behind Evernote, and, naturally, is deeply integrated into their system.

Essentially, you just connect a notebook to Postach.io and then tag notes as 'published' to make them public.

However, you get some customisation, too, including a bunch of themes, the means to embed content from other sites, Disqus commenting, and the option to instead use Dropbox for storing content.

15. Pen.io

Pen.io screenshot says 'Publish a beautiful page in seconds and share it with the world'

Pen.io is one of the only free blogging platforms you don’t need a login for

Pen.io's approach is also rather different from its contemporaries. Unusually, it doesn't require a login – instead, you define a URL for a post and set a password.

Images can be dragged into place, and you can create multi-page posts using a tag. And that's about it.

Really, it's a stretch to call Pen.io a blog in the traditional sense, but it's a decent option for banging out the odd sporadic post, especially if you don't want any personal info stored.

16. Ghost

Ghost website screenshot says 'The professional publishing platform'

Open source platform Ghost is free if you install it on your own system

Here's something slightly different for our final entry. Unlike the others on this list, how much you pay for Ghost depends on how much traffic you get, although a free 14-day trial is available. 

However, this system differentiates itself in other important ways: it's entirely open source, and while writing you get a live preview of how your post will end up.

You need to be technically minded for this one, then, but it's a worthy alternative to WordPress if you're happy to get your hands dirty and have your own web space that's awaiting a blog.

Related articles:

21 top-quality WordPress portfolio themesThe 40 best free web fonts38 brilliantly designed 404 error pages

Pantone Announces Color of the Year: Living Coral

Original Source: https://www.webdesignerdepot.com/2018/12/pantone-announces-color-of-the-year-living-coral/

Pantone’s annual quest to dominate the “and finally…” portion of the pre-festive news has kicked off, with the announcement of its Color of the Year for 2019.

The official selection for the coming year is Living Coral, or specifically 16-1546 (that’s #FF6F61 to you and me).

Pantone’s announcement always sets the color agenda for the following 12 months. After all, in 2018 we’ve seen nothing but Ultra Violet color schemes; in 2017 everything was Green; and way back in 2016 everything was Rose Quartz and the Other One. Not true, you say? You’re probably right.

In reality, the designers most affected by Pantone’s announcement are those who were already using Living Coral, or something close, and will now redo their work for fear of appearing to slavishly follow fashion.

The irony from a designer’s point of view is that colors don’t operate in isolation, it’s their combinations that are beautiful, impactful, or communicative.

From a business point of view, what matters is not the substance of your choice, but the choice itself—and of course the way that choice is publicized. Pantone, with its annual press release and its PR friendly choice of color, is (re)establishing itself as the definitive authority on color. It’s a very, very smart strategy. How long before Adobe announces its font of the year, or WordPress announces its plugin of the year.

So what is the significance of Pantone’s selection? Certainly the name is significant; with record levels of coral dying out, the probable loss of the Great Barrier Reef, and whole islands of trash appearing in the Pacific, it’s high time we showed our oceans some love.

On the positive side, its quite a pretty color.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

WordPress 5.0 Is Here (and Yes, So Is Gutenberg)

Original Source: https://www.webdesignerdepot.com/2018/12/wordpress-5-0-is-here-and-yes-so-is-gutenberg/

WordPess 5.0 (codenamed “Bebo”) is officially out and prowling among the servers.

This, then, is when we find out how well Gutenberg works out. And make no mistake, whatever they’ve done under the hood, this release is about Gutenberg, both technically and in the public perception. It’s almost the only thing they talk about in their own blog post about this release.



Gutenberg

Automattic has set out to redefine the content editing experience in the CMS that powers at least a third of the Internet, and that is exactly what they’ve done. I think it’s for the better; others…not so much; still others think it’s a good idea that needs more development time.

Personally, I think a lot of that negative perception comes from earlier development builds. Those were builds that I didn’t use much because, well, they weren’t finished. I’d be surprised, honestly, if it was bug-free even now. That’s just not how software development seems to work these days. I’ve got my fingers crossed that it’s finished enough.

I’ve got my fingers crossed that it’s finished enough

I mean hey, I might be used to wrangling with unruly software, but someone who just wants to post on their blog already might not be as forgiving. The point is, whether any of us are ready or not, it’s here, and I personally quite like it.

One of the features that I find quite useful is the collection of default embedding blocks that allow you to easily embed content from a wide variety of sources. The classic editor had a bit of this functionality, but the current system gives you a proper idea of what you can and can’t embed by default, and I’m pretty sure some of the options were previously only available through third-party plugins. [Figure 1]

It might be a bit late for that Tumblr Embed Block, though. Ahem.

Another feature I like are contextual icons that appear on the upper-right of any new block, allowing you to select recently-used blocks quickly. That could come in handy when editing a longer document. [Figure 2]

For those of you who want to wait for Automattic to develop Gutenberg a little further, they have a Classic Editor plugin, as promised. The word is they’ll be supporting this plugin until 2021. Incidentally, it has a rating of 4.9 according to wordpress.org’s own rating system, and over 600,000 active installations at the time of this writing.

All plugins that previously made changes and additions to the classic editor should still work with this plugin, so it’s a viable option for those who want to play it safe.

Themes and Such

Twenty-Nineteen made it into the final release. Since that wasn’t always guaranteed, I’m glad it got finished up in time. They needed a way to properly showcase Gutenberg’s capabilities with this release, and now they have one. For a preview of said theme, as well as my thoughts on it, see Previewing the WordPress Twenty-Nineteen Theme. (Side note: all themes from Twenty-Ten to Twenty-Seventeen have been updated to support Gutenberg.)

For designers and developers, theme creation just got a bit easier and a bit more complicated at the same time. On the one hand, it is now possible to handle a lot of content-related layout within the CMS itself, which will save time when developing custom theme options. It gives users more control over the general flow of content, giving them more creative opportunities, and takes some work off your plate.

On the other hand, you need to make sure you have styles ready for all of the default content blocks available in every theme you make. This is not terribly difficult, and it shouldn’t take too long to develop a library of custom styles that can be adjusted to every theme, but it’s something to consider.

Additionally, most of the third-party block plugins I’ve seen are not style-agnostic, though most have multiple style options to choose from. I can see third-party blocks being something of a double-edged sword.

WordPress Support Changes

One last tidbit that was actually announced on December 3rd is a new support platform for WordPress. It’s called “HelpHub”, and it’s located at wordpress.org/support. They’re still migrating content from the old WordPress Codex, so that’s still there for now, but this is the new official help center.

It seems to be pretty heavily integrated with the support forums, so it seems like the general plan was to make help easier to find by putting it all (more or less) in one place. I’d call this an overall improvement.

My Opinion

On my own personal projects, the update installed flawlessly. I can’t report much on potential bugs, as yet, because this release just happened, but so far I like it quite a bit. I honestly like the new editor, and the new direction WordPress is heading in. There’s a lot of potential here. Whether or not you think Gutenberg is ready for release, as I do, the thing to realize is that Gutenberg is only the next step in a long journey.

Automattic has been working long and hard to transform WordPress from a pure-blog CMS into something like a framework or data platform, all without sacrificing usability, or too much in the way of backwards compatibility. The blog you could install in five minutes has more or less become the ecosystem you can install in five minutes, and then build any site you want.

It’s not perfect, and it’s not done yet, but this release is a giant step toward something we’ve never seen before. I’m genuinely excited to find out what it’ll be.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Common Christmas Packaging Mistakes And How to Avoid Them

Original Source: https://www.hongkiat.com/blog/christmas-packaging-tips/

p>Going to be away from family for the holidays? Have you started your Christmas shopping already? It will soon be time to send them off (you need a head start to beat the postal delays) and to…

Visit hongkiat.com for full content.

20 Chilling WordPress Vulnerabilities and Exploits

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/Y0o9UNniUcE/20-chilling-wordpress-vulnerabilities-and-exploits

The post 20 Chilling WordPress Vulnerabilities and Exploits appeared first on designrfix.com.

What Can Be Learned From The Gutenberg Accessibility Situation?

Original Source: https://www.smashingmagazine.com/2018/12/gutenberg-accessibility-situation/

What Can Be Learned From The Gutenberg Accessibility Situation?

What Can Be Learned From The Gutenberg Accessibility Situation?

Andy Bell

2018-12-07T11:30:08+01:00
2018-12-11T08:59:38+00:00

So far, Gutenberg has had a very mixed reception from the WordPress community and that reception has become increasingly negative since a hard deadline was set for the 5.0 release, even though many considered it to be incomplete. A hard release deadline in software is usually fine, but there is a glaring issue with this particular one: what will be the main editor for a platform that powers about 32% of the web isn’t fully accessible. This issue has been raised many times by the community, and it’s been effectively brushed under the carpet by Automattic’s leadership — at least it comes across that way.

Sounds like a messy situation, right? I’m going to dive into what’s happened and how this sort of situation might be avoided by others in the future.

Further Context

For those amongst us who haven’t been following along or don’t know much about WordPress, I’ll give you a bit of context. For those that know what’s gone on, you can skip straight to the main part of the article.

WordPress powers around 32% of the web with both the open-source, self-hosted CMS and the wordpress.com hosted blogs. Although WordPress, the CMS software is open-source, it is heavily contributed to by Automattic, who run wordpress.com, amongst other products. Automattic’s CEO, Matt Mullenweg is also the co-founder of the WordPress open source project.

It’s important to understand that WordPress, the CMS is not a commercial Automattic project — it is open source. Automattic do however make lots of decisions about the future of WordPress, including the brand new editor, Gutenberg. The editor has been available as a plugin while it’s been in development, so WordPress users can use it as their main editor and provide feedback — a lot of which has been negative. Gutenberg is shipping as the default editor in the 5.0 major release of WordPress, and it will be the forced default editor, with only the download of the Classic Editor preventing it. This forced change has had a mixed response from the community, to say the least.

I’ve personally been very positive about Gutenberg with my writing, teaching and speaking, as I genuinely think it’ll be a positive step for WordPress in the long run. As the launch of WordPress 5.0 has come ever closer, though, my concerns about accessibility have been growing. The accessibility issues are being “fixed” as I write this, but the handling of the situation has been incredibly poor, from Automattic.

I invite you to read this excellent, ever-updating Twitter thread by Adrian Roselli. He’s done a very good job of collecting information and providing expert commentary. He’s covered all of the events in a very straightforward manner.

Right, you’re up to speed, so let’s crack on.

Web forms are such an important part of the web, but we design them poorly all the time. The brand-new “Form Design Patterns” book is our new practical guide for people who design, prototype and build all sorts of forms for digital services, products and websites. The eBook is free for Smashing Members.

Check the table of contents ↬

Form Design Patterns — a practical guide for anyone who needs to design and code web forms

What Happened?

For as long as the Gutenberg plugin has been available to install, there have been accessibility issues. Even when I very excitedly installed it and started hacking away at custom blocks back in March, I could see there was a tonne of issues with the basics, such as focus management. I kept telling myself, “This editor is very early doors, so it’ll all get fixed before WordPress 5.” The problem is: it didn’t. (Well, mostly, anyway.)

This situation was bad as it is, but two key things happened that made it worse. The accessibility lead, Rian Rietveld, resigned in October, citing political and codebase issues. The second thing is that Automattic set a hard deadline for WordPress 5’s release, regardless of whether accessibility issues were fixed or not.

Let me just illustrate how bad this is. As cited in Rian’s article: after an accessibility test round in March, the results indicated so many accessibility issues, most testers refused to look at Gutenberg again. We know that the situation has gotten a lot better since then, but there are still a tonne of open issues, even now.

I’ve got to say it how I see it, too. There’s clearly a cultural issue at Automattic in terms of their attitude towards accessibility and how they apparently compensate people who are willing to fix them, with a strange culture of free work, even from “outsiders”. Frankly, the company’s CEO, Matt Mullenweg’s attitude absolutely stinks — especially when he appears to be holding a potential professional engagement hostage over someone’s personal blog decision:

That's too bad was about to reach out to work with Deque on the audits.

— Matt Mullenweg (@photomatt) November 13, 2018

Allow me to double-down on the attitude towards accessibility for a moment. When a big company like Automattic decides to prioritize a deadline they pluck out of thin air over enabling people with impairments to use the editor that they will be forced to use it is absolutely shocking. Even more shocking is the message that it sends out that accessibility compliance is not as important as flashy new features. Ironically, there’s clearly commercial undertones to this decision for a hard deadline, but as always, free work is expected to sort it out. You’d expect a company like Automattic to fix the situation that they created with their own resource, right?

You’ll probably find it shocking that a crowd funding campaign has been put together to get an accessibility audit done on Gutenberg. I know I certainly do. You heard me correctly, too. The Gutenberg editor, which is a product of Automattic’s influence on WordPress who (as a company) were valued at over $1 Billion in 2014 are not paying for a much-needed accessibility audit. They are instead sitting back and waiting for everyone else to pay for it. Well, at least they were, until Matt Mullenweg finally committed to funding an audit on 29 November.

How Could This Mess Be Avoided?

Enough dragging people over coals (for now) and let us instead think about how this could have been avoided. Apart from the cultural issues that seem to de-prioritize accessibility at Automattic, I think the design process is mostly at fault in the context of the Gutenberg editor.

A lot of the issues are based around complexity and cognitive load. Creating blocks, editing the content, and maneuvering between blocks is a nightmare for visually impaired and/or keyboard users. Perhaps if accessibility was considered at the very start of the project, the process of creating, editing and moving blocks would be a lot simpler and thus, not a cognitive overload. The problem now is that accessibility is a fix rather than a core feature. The cognitive issues will continue to exist, albeit improved.

Another very obvious thing that could have been done differently would be to provide help and training on the JS-heavy codebase that was introduced. A lot of the accessibility fixing work seems to have been very difficult because the accessibility team had no React developers within it. There was clearly a big decision to utilize modern JavaScript because Mullenweg told everyone to “Learn JavaScript Deeply”. At that point, it would have made a lot of sense to help people who contribute a lot to WordPress for free to also learn JavaScript deeply so that they could have been involved way earlier in the process. I even saw this as an issue and made learning modern JavaScript and React a core focus in a tutorial series I co-authored with Lara Schenck.

I’m convinced that some foresight and investment in processes, planning, and people would have prevented a tonne of the accessibility issues from existing at all. Again, this points at issues with attitude from Automattic’s leader, in my opinion. He’s had the attitude that ignoring accessibility is fine because Gutenberg is a fantastic, empowering new editor. While this is true, it can’t be labeled as truly empowering if it prevents a huge number of users from managing content — in some cases, even doing their jobs. A responsible CEO in this position would probably write an incredibly apologetic statement that addressed the massive oversights. They would probably also postpone the hard deadline set until every accessibility issue was fixed. At the very least, they wouldn’t force the new editor on every single WordPress user.

Wrapping Up

I’ve got to add to this article that I am a massive WordPress fan and can see some unbelievably good opportunities for managing content that Gutenberg provides. It’s not just a new editor — it is a movement. It’s going to shape WordPress for years to come, and it should allow more designers and front-end developers into the ecosystem. This should be welcomed with open arms. Well, if and when it is fully accessible, anyway.

There are also a lot of incredible people working at Automattic and on the WordPress core team, who I have heaps of respect and love for. I know these people will help this situation come good in the end and will and do welcome this sort of critique. I also know that lessons will be learned and I have faith that a mess like this won’t happen again.

Use this situation as a warning, though. You simply can’t ignore accessibility, and you should study up and integrate it into the entire process of your projects as a priority.

Smashing Editorial
(dm, ra, il)

10 Free Invoice Templates for Creatives

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/pBTGASFSVcc/

Invoicing is a necessary task for independent and freelance creatives. While default invoices can often be underwhelming in terms of design, there are a number of ways to improve them and bring them up to the high standards we creatives set for ourselves.

One of these is to use a beautiful free invoice template, tailored toward individuals in the creative industry. From there, it’s quick and easy to customize them to fit your personal brand and desired design language. In turn, it should help to further impress upon clients and improve your overall personal brand.

In this article we are going to bring together ten of the most beautiful free invoice templates available for creatives.

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets


DOWNLOAD NOW

Invoice Free Sketch Source

Invoice Free Sketch Source Beautiful Free Invoice Templates for Creatives

This free invoice template for Sketch uses a spacious layout with bold titles and a single primary color. The backside uses an impressive repeating pattern which could easily be customised to fit your personal brand.

Invoice Template

Beautiful Free Invoice Templates for Creatives

This invoice template is one of the more simplistic and minimal template designs. Swapping the logo and brand colors for your own would only take minutes and present you with a wonderfully polished design.

Invoice Template Free Sketch

Free Sketch Beautiful Free Invoice Templates for Creatives

This beautiful free invoice template is another minimal example which uses an abundance of white space and well-chosen typography alongside a splash of color.

Modern Invoice Template

Modern Beautiful Free Invoice Templates for Creatives

This perfectly presented invoice template makes use of the full page width and houses a well-structured and orderly design. The logo and colors are easily editable and allow you to have the invoice customised in minutes.

Invoice Free Template

Beautiful Free Invoice Templates for Creatives

This invoice template is one of the most visually impressive with beautiful header gradients and a bold green highlight color. It wouldn’t make for the most printer-friendly option, but in today’s climate the printing of invoices is fast becoming a rare occurrence.

Free Branding Identity

Free Branding Identity Beautiful Free Invoice Templates for Creatives

Another visually impressive option is formed as part of this branding identity set. It uses well spaced content alongside a single primary color and monochrome footer image.

Diamond Yellow Invoice

Beautiful Free Diamond Yellow Invoice Templates for Creatives

This simple grid-based invoice design is very printer-friendly and may suit best those creatives who need to offer paper copies of their invoices to clients.

Invoice Free Template

Beautiful Free Invoice Templates for Creatives

As one of the finest and most polished examples of an invoice design, this template is all but guaranteed to impress any client.It’s wonderfully presented and uses a unique two-tone design to separate the total due and due by date from the description list.

Free PSD Invoice Template

PSD Beautiful Free Invoice Templates for Creatives

Another simple design with a lot of merit. This free invoice template would be particularly good for printing and may also present the opportunity to code the template into an editable HTML-based invoice.

Elegant Invoice for Sketch

Elegant Sketch Beautiful Free Invoice Templates for Creatives

This free invoice template casts significant focus on the typography. It’s been executed elegantly and is ready to start using from the moment you download. There is great scope for customisation with this template design.


How To Build A Real-Time App With GraphQL Subscriptions On Postgres

Original Source: https://www.smashingmagazine.com/2018/12/real-time-app-graphql-subscriptions-postgres/

How To Build A Real-Time App With GraphQL Subscriptions On Postgres

How To Build A Real-Time App With GraphQL Subscriptions On Postgres

Sandip Devarkonda

2018-12-10T14:00:23+01:00
2018-12-10T20:10:46+00:00

In this article, we’ll take a look at the challenges involved in building real-time applications and how emerging tooling is addressing them with elegant solutions that are easy to reason about. To do this, we’ll build a real-time polling app (like a Twitter poll with real-time overall stats) just by using Postgres, GraphQL, React and no backend code!

The primary focus will be on setting up the backend (deploying the ready-to-use tools, schema modeling), and aspects of frontend integration with GraphQL and less on UI/UX of the frontend (some knowledge of ReactJS will help). The tutorial section will take a paint-by-numbers approach, so we’ll just clone a GitHub repo for the schema modeling, and the UI and tweak it, instead of building the entire app from scratch.

All Things GraphQL

Do you know everything you need to know about GraphQL? If you have your doubts, Eric Baer has you covered with a detailed guide on its origins, its drawbacks and the basics of how to work with it. Read article →

Before you continue reading this article, I’d like to mention that a working knowledge of the following technologies (or substitutes) are beneficial:

ReactJS
This can be replaced with any frontend framework, Android or IOS by following the client library documentation.
Postgres
You can work with other databases but with different tools, the principles outlined in this post will still apply.

You can also adapt this tutorial context for other real-time apps very easily.

A demonstration of the features in the polling app that is built in this tutorialA demonstration of the features in the polling app that we’ll be building. (Large preview)

As illustrated by the accompanying GraphQL payload at the bottom, there are three major features that we need to implement:

Fetch the poll question and a list of options (top left).
Allow a user to vote for a given poll question (the “Vote” button).
Fetch results of the poll in real-time and display them in a bar graph (top right; we can gloss over the feature to fetch a list of currently online users as it’s an exact replica of this use case).

Front-end is messy and complicated these days. That’s why we publish articles, printed books and webinars with useful techniques to improve your work. Even better: Smashing Membership with a growing selection of front-end & UX goodies. So you get your work done, better and faster.

Explore Smashing Membership ↬

Smashing Cat, just preparing to do some magic stuff.

Challenges With Building Real-Time Apps

Building real-time apps (especially as a frontend developer or someone who’s recently made a transition to becoming a fullstack developer), is a hard engineering problem to solve.

This is generally how contemporary real-time apps work (in the context of our example app):

The frontend updates a database with some information; A user’s vote is sent to the backend, i.e. poll/option and user information (user_id, option_id).
The first update triggers another service that aggregates the poll data to render an output that is relayed back to the app in real-time (every time a new vote is cast by anyone; if this done efficiently, only the updated poll’s data is processed and only those clients that have subscribed to this poll are updated):

Vote data is first processed by an register_vote service (assume that some validation happens here) that triggers a poll_results service.
Real-time aggregated poll data is relayed by the poll_results service to the frontend for displaying overall statistics.

Traditional design for a real-time poll app

A poll app designed traditionally

This model is derived from a traditional API-building approach, and consequently has similar problems:

Any of the sequential steps could go wrong, leaving the UX hanging and affecting other independent operations.
Requires a lot of effort on the API layer as it’s a single point of contact for the frontend app, that interacts with multiple services. It also needs to implement a websockets-based real-time API — there is no universal standard for this and therefore sees limited support for automation in tools.
The frontend app is required to add the necessary plumbing to consume the real-time API and may also have to solve the data consistency problem typically seen in real-time apps (less important in our chosen example, but critical in ordering messages in a real-time chat app).
Many implementations resort to using additional non-relational databases on the server-side (Firebase, etc.) for easy real-time API support.

Let’s take a look at how GraphQL and associated tooling address these challenges.

What Is GraphQL?

GraphQL is a specification for a query language for APIs, and a server-side runtime for executing queries. This specification was developed by Facebook to accelerate app development and provide a standardized, database-agnostic data access format. Any specification-compliant GraphQL server must support the following:

Queries for reads
A request type for requesting nested data from a data source (which can be either one or a combination of a database, a REST API or another GraphQL schema/server).
Mutations for writes
A request type for writing/relaying data into the aforementioned data sources.
Subscriptions for live-queries
A request type for clients to subscribe to real-time updates.

GraphQL also uses a typed schema. The ecosystem has plenty of tools that help you identify errors at dev/compile time which results in fewer runtime bugs.

Here’s why GraphQL is great for real-time apps:

Live-queries (subscriptions) are an implicit part of the GraphQL specification. Any GraphQL system has to have native real-time API capabilities.
A standard spec for real-time queries has consolidated community efforts around client-side tooling, resulting in a very intuitive way of integrating with GraphQL APIs.

GraphQL and a combination of open-source tooling for database events and serverless/cloud functions offer a great substrate for building cloud-native applications with asynchronous business logic and real-time features that are easy to build and manage. This new paradigm also results in great user and developer experience.

In the rest of this article, I will use open-source tools to build an app based on this architecture diagram:

GraphQL-based design for a real-time poll app

A poll app designed with GraphQL

Building A Real-Time Poll/Voting App

With that introduction to GraphQL, let’s get back to building the polling app as described in the first section.

The three features (or stories highlighted) have been chosen to demonstrate the different GraphQL requests types that our app will make:

Query
Fetch the poll question and its options.
Mutation
Let a user cast a vote.
Subscription
Display a real-time dashboard for poll results.

GraphQL elements in the poll app

GraphQL request types in the poll app (Large preview)

Prerequisites

A Heroku account (use the free tier, no credit card required)
To deploy a GraphQL backend (see next point below) and a Postgres instance.
Hasura GraphQL Engine (free, open-source)
A ready-to-use GraphQL server on Postgres.
Apollo Client (free, open-source SDK)
For easily integrating clients apps with a GraphQL server.
npm (free, open-source package manager)
To run our React app.

Deploying The Database And A GraphQL Backend

We will deploy an instance each of Postgres and GraphQL Engine on Heroku’s free tier. We can use a nifty Heroku button to do this with a single click.

Heroku buttonHeroku button

Note: You can also follow this link or search for documentation Hasura GraphQL deployment for Heroku (or other platforms).

Deploying app backend to Heroku’s free tier

Deploying Postgres and GraphQL Engine to Heroku’s free tier (Large preview)

You will not need any additional configuration, and you can just click on the “Deploy app” button. Once the deployment is complete, make a note of the app URL:

<app-name>.herokuapp.com

For example, in the screenshot above, it would be:

hge-realtime-app-tutorial.herokuapp.com

What we’ve done so far is deploy an instance of Postgres (as an add-on in Heroku parlance) and an instance of GraphQL Engine that is configured to use this Postgres instance. As a result of doing so, we now have a ready-to-use GraphQL API but, since we don’t have any tables or data in our database, this is not useful yet. So, let’s address this immediately.

Modeling the database schema

The following schema diagram captures a simple relational database schema for our poll app:

Schema design for the poll app

Schema design for the poll app. (Large preview)

As you can see, the schema is a simple, normalized one that leverages foreign-key constraints. It is these constraints that are interpreted by the GraphQL Engine as 1:1 or 1:many relationships (e.g. poll:options is a 1: many relationship since each poll will have more than 1 option that are linked by the foreign key constraint between the id column of the poll table and the poll_id column in the option table). Related data can be modelled as a graph and can thus power a GraphQL API. This is precisely what the GraphQL Engine does.

Based on the above, we’ll have to create the following tables and constraints to model our schema:

Poll
A table to capture the poll question.
Option
Options for each poll.
Vote
To record a user’s vote.
Foreign-key constraint between the following fields (table : column):

option : poll_id → poll : id
vote : poll_id → poll : id
vote : created_by_user_id → user : id

Now that we have our schema design, let’s implement it in our Postgres database. To instantly bring this schema up, here’s what we’ll do:

Download the GraphQL Engine CLI.
Clone this repo:
$ git clone clone https://github.com/hasura/graphql-engine

$ cd graphql-engine/community/examples/realtime-poll

Go to hasura/ and edit config.yaml:
endpoint: https://<app-name>.herokuapp.com

Apply the migrations using the CLI, from inside the project directory (that you just downloaded by cloning):
$ hasura migrate apply

That’s it for the backend. You can now open the GraphQL Engine console and check that all the tables are present (the console is available at https://<app-name>.herokuapp.com/console).

Note: You could also have used the console to implement the schema by creating individual tables and then adding constraints using a UI. Using the built-in support for migrations in GraphQL Engine is just a convenient option that was available because our sample repo has migrations for bringing up the required tables and configuring relationships/constraints (this is also highly recommended regardless of whether you are building a hobby project or a production-ready app).

Integrating The Frontend React App With The GraphQL Backend

The frontend in this tutorial is a simple app that shows poll question, the option to vote and the aggregated poll results in one place. As I mentioned earlier, we’ll first focus on running this app so you get the instant gratification of using our recently deployed GraphQL API , see how the GraphQL concepts we looked at earlier in this article power the different use-cases of such an app, and then explore how the GraphQL integration works under the hood.

NOTE: If you are new to ReactJS, you may want to check out some of these articles. We won’t be getting into the details of the React part of the app, and instead, will focus more on the GraphQL aspects of the app. You can refer to the source code in the repo for any details of how the React app has been built.

Configuring The Frontend App

In the repo cloned in the previous section, edit HASURA_GRAPHQL_ENGINE_HOSTNAME in the src/apollo.js file (inside the /community/examples/realtime-poll folder) and set it to the Heroku app URL from above:
export const HASURA_GRAPHQL_ENGINE_HOSTNAME = ‘random-string-123.herokuapp.com’;

Go to the root of the repository/app-folder (/realtime-poll/) and use npm to install the prequisite modules and then run the app:
$ npm install

$ npm start

Screenshot of the live poll app

Screenshot of the live poll app (Large preview)

You should be able to play around with the app now. Go ahead and vote as many times as you want, you’ll notice the results changing in real time. In fact, if you set up another instance of this UI and point it to the same backend, you’ll be able to see results aggregated across all the instances.

So, how does this app use GraphQL? Read on.

Behind The Scenes: GraphQL

In this section, we’ll explore the GraphQL features powering the app, followed by a demonstration of the ease of integration in the next one.

The Poll Component And The Aggregated Results Graph

The poll component on the top left that fetches a poll with all of its options and captures a user’s vote in the database. Both of these operations are done using the GraphQL API. For fetching a poll’s details, we make a query (remember this from the GraphQL introduction?):

query {
poll {
id
question
options {
id
text
}
}
}

Using the Mutation component from react-apollo, we can wire up the mutation to a HTML form such that the mutation is executed using variables optionId and userId when the form is submitted:

mutation vote($optionId: uuid!, $userId: uuid!) {
insert_vote(objects: [{option_id: $optionId, created_by_user_id: $userId}]) {
returning {
id
}
}
}

To show the poll results, we need to derive the count of votes per option from the data in vote table. We can create a Postgres View and track it using GraphQL Engine to make this derived data available over GraphQL.

CREATE VIEW poll_results AS
SELECT poll.id AS poll_id, o.option_id, count(*) AS votes
FROM (( SELECT vote.option_id, option.poll_id, option.text
FROM ( vote
LEFT JOIN
public.option ON ((option.id = vote.option_id)))) o

LEFT JOIN poll ON ((poll.id = o.poll_id)))
GROUP BY poll.question, o.option_id, poll.id;

The poll_results view joins data from vote and poll tables to provide an aggregate count of number of votes per each option.

Using GraphQL Subscriptions over this view, react-google-charts and the subscription component from react-apollo, we can wire up a reactive chart which updates in realtime when a new vote happens from any client.

subscription getResult($pollId: uuid!) {
poll_results(where: {poll_id: {_eq: $pollId}}) {
option {
id
text
}
votes
}
}

GraphQL API Integration

As I mentioned earlier, I used Apollo Client, an open-source SDK to integrate a ReactJS app with the GraphQL backend. Apollo Client is analogous to any HTTP client library like requests for python, the standard http module for JavaScript, and so on. It encapsulates the details of making an HTTP request (in this case POST requests). It uses the configuration (specified in src/apollo.js) to make query/mutation/subscription requests (specified in src/GraphQL.jsx with the option to use variables that can be dynamically substituted in the JavaScript code of your REACT app) to a GraphQL endpoint. It also leverages the typed schema behind the GraphQL endpoint to provide compile/dev time validation for the aforementioned requests. Let’s see just how easy it is for a client app to make a live-query (subscription) request to the GraphQL API.

Configuring The SDK

The Apollo Client SDK needs to be pointed at a GraphQL server, so it can automatically handle the boilerplate code typically needed for such an integration. So, this is exactly what we did when we modified src/apollo.js when setting up the frontend app.

Making A GraphQL Subscription Request (Live-Query)

Define the subscription we looked at in the previous section in the src/GraphQL.jsx file:

const SUBSCRIPTION_RESULT = `
subscription getResult($pollId: uuid!) {
poll_results (
order_by: option_id_desc,
where: { poll_id: {_eq: $pollId} }
) {
option_id
option { id text }
votes
}
}`;

We’ll use this definition to wire up our React component:

export const Result = (pollId) => (
<Subscription subscription={gql`${SUBSCRIPTION_RESULT}`} variables={pollId}>
{({ loading, error, data }) => {
if (loading) return

Loading…</p>;
if (error) return

Error :</p>;
return (
<div>
<div>
{renderChart(data)}
</div>
</div>
);
}}
</Subscription>
)

One thing to note here is that the above subscription could also have been a query. Merely replacing one keyword for another gives us a “live-query”, and that’s all it takes for the Apollo Client SDK to hook this real-time API with your app. Every time there’s a new dataset from our live-query, the SDK triggers a re-render of our chart with this updated data (using the renderChart(data) call). That’s it. It really is that simple!

Final Thoughts

In three simple steps (creating a GraphQL backend, modeling the app schema, and integrating the frontend with the GraphQL API), you can quickly wire-up a fully-functional real-time app, without getting mired in unnecessary details such as setting up a websocket connection. That right there is the power of community tooling backing an abstraction like GraphQL.

If you’ve found this interesting and want to explore GraphQL further for your next side project or production app, here are some factors you may want to use for building your GraphQL toolchain:

Performance & Scalability
GraphQL is meant to be consumed directly by frontend apps (it’s no better than an ORM in the backend; real productivity benefits come from doing this). So your tooling needs to be smart about efficiently using database connections and should be able scale effortlessly.
Security
It follows from above that a mature role-based access-control system is needed to authorize access to data.
Automation
If you are new to the GraphQL ecosystem, handwriting a GraphQL schema and implementing a GraphQL server may seem like daunting tasks. Maximize the automation from your tooling so you can focus on the important stuff like building user-centric frontend features.
Architecture
As trivial as the above efforts seem like, a production-grade app’s backend architecture may involve advanced GraphQL concepts like schema-stitching, etc. Moreover, the ability to easily generate/consume real-time APIs opens up the possibility of building asynchronous, reactive apps that are resilient and inherently scalable. Therefore, it’s critical to evaluate how GraphQL tooling can streamline your architecture.

Related Resources

You can check out a live version of the app over here.
The complete source code is available on GitHub.
If you’d like to explore the database schema and run test GraphQL queries, you can do so over here.

Smashing Editorial
(rb, ra, yk, il)

The best mouse of 2018: 6 top computer mice for designers

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/ZnD_lObYNNQ/mice-4132486

So, you've got your laptop and monitor sorted, and but that's not all you need for the perfect computer setup. You'll also need the best mouse you can afford to keep your workflow smooth and efficient. It's one of the most important tools you use each day, so it's essential to find a model that's both responsive and comfortable. 

So how do you find the right mouse for you? After all, there are thousands of variations of computer mouse out there – including trackpads. Here we list six of the best mouse options out there to help you find the ideal device for your creative work. 

Logitech MX Master

Logitech produces some of the most responsive computer mice on the market, which is pretty handy when you need a tool with precision. Its cordless MX Master model is designed to fit comfortably in your hand over a long period of time, and includes a super-responsive scroll wheel that lets you browse web pages or documents at your own speed, depending on how fast you flick the wheel.

Buttons located on the side of the mouse also let you flit between windows without having to use the usual alt+Tab, and can easily program your shortcuts. The only downside to the MX Master is the pretty hefty RRP price tag of around £80 – but you there are deals to be had, so don't despair (above you'll find the best prices currently available).

Prefer a new model? The Logitech MX Master 2S Wireless Bluetooth Mouse works with Mac and Windows. It boasts high-precision tracking, a rechargeable battery (that lasts a long time between charges) and customisable buttons. 

Apple Magic Mouse 2

Apple was late to join the innovative mouse party then it created the Magic Mouse. Its replacement, the imaginatively titled Magic Mouse 2, has a super-light design and laser-tracking capabilities that make it easy to flick between InDesign CC pages and make even the smallest changes on practically any surface.

However, the downside is that it’s perhaps a little over-sensitive at times. The multi-touch area on the top of the mouse, which lets you scroll in any direction, can sometimes become frustrating when you want to keep your finger in the same place for a long period of time. But for Magic Mouse evangelists, there is nothing that comes close to this mouse.

Alternatively, a lot of designers prefer the Apple Magic Trackpad 2, which brings Force Touch pressure-sensitive technology (as seen in the screen of the Apple Watch) and the trackpad of the 2015 12-inch MacBook. Or for a cheaper option, try the older Apple Magic Trackpad. 

03. Anker Vertical Ergonomic Optical Mouse

Anker Vertical Ergonomic Optical Mouse

Sure, the Anker Vertical Ergonomic Optical Mouse looks weird. It’s vertically aligned to encourage healthy, neutral 'handshake' wrist and arm. But once you get used to it, it’s a cheap and very comfortable way to avoid RSI. If you're a digital creative that spends a lot of time using a mouse for work, then having one that is comfortable to use is essential. After all, if you injure yourself and cannot work, it could mean you lose money. That makes this odd-looking mouse a very wise investment, which is why we think it's the best ergonomic mouse for digital creatives.

Logitech MX Ergo Wireless

The MX Ergo Wireless is a distinctly retro-looking mouse thanks to its trackball. While many mice-makers have ditched trackballs in favour of optical laser mice, Logitech has continued to release trackball mice, and for that we're thankful. For many people, the tactile trackball makes working on creative projects much more intuitive and comfortable, and the MX Ergo Wireless can be used flat or at a 20-degree angle.

Razer DeathAdder Chroma

Just like designers, gamers need a mouse that is sensitive and accurate, so it stands to reason that gaming mice are a good option for designers too. And the Razer range of gaming mice is one of the most responsive out there.

Razer mice have three types of sensors – dual, laser and optical – and an ergonomic shape designed to support the flow of your hand. The Razer Deathadder mouse is the bestseller (as well as the cheapest), and features an optical sensor and rubber side grips. It also syncs with all of your mouse settings stored in the Cloud.

Microsoft Bluetooth Mobile Mouse 3600

Microsoft's Bluetooth Mobile Mouse 3600 is, in our view, the best budget mouse money can buy these days. Although it has a rock-bottom price, it has impressive build quality and is very reliable. This is because Microsoft isn't just a software company – it also makes some very good peripherals, such as this mouse. It's small enough to easily carry around with you as well, which is handy if you do a lot of work on the road.

Related articles:

The best drawing tabletThe best keyboards for designersThe best monitor calibrators for designers