L
ADING

Uppy – Free ES5/ES6 JavaScript File Upload Plugin

One of the trickiest form inputs to design is the file upload. It has a default HTML style, but it’s not the prettiest thing in the world.

Uppy takes file uploads to a whole new level with a custom interface and a dynamic Ajax-style loading process.

It runs on ES5/ES6 code, so you can build your web apps with the latest JavaScript standards. And, it even supports file uploads from cloud storage sites such as Dropbox or Google Drive, so it’s a multifaceted file uploading script for the web.

Uppy.js upload script

Uppy is completely free and open-source, with a repo on GitHub. However, the easiest way to install this plugin is through npm or Yarn, so you can run it like a real package.

Once you get the files added to your website, you just include the Uppy.js file and the CSS code. Then, you target whatever input field you want and Uppy takes care of the rest.

It has a unique interface that looks like one large square placement to drag & drop files. You can also select items from your hard drive or even upload files remotely from external URLs. Pretty crazy!

You can find the entire setup process on the documentation page, but it does require at least some understanding of ECMAScript 6. This library looks towards the future of scripting and isn’t the easiest thing to use with pure vanilla JavaScript.

But, if you’re serious about web development it’s worth learning ES6 anyways. You can find tons of resources online for self-teaching and you can even use Uppy as your first “real” project to dive in & start learning.

Demo Uppy uploading files

Check out the Dashboard Example to see Uppy in action. For this page, the upload is hidden behind a trigger button, where you click the button to display a modal upload field.

From there, you can select whether you want to upload a picture from your computer, from the web, or even from your webcam!

The Examples page offers a bunch to look through, including a drag & drop example, along with an internationalized demo page.

But, to really learn how this works, I recommend skimming the docs and browsing through the main GitHub repo. You can also share your thoughts with the creators on Twitter @transloadit.

Generate Documentation with Markdown Files Using Docsify

If you’re creating a free plugin, framework, or open-source script you’ll need documentation. It’s crucial to document your work, both for your sanity and to help others who want to learn your awesome resource.

However, creating online documentation can be a real pain. Thankfully, Docsify makes it easier by providing a free documentation generator running on Markdown.

This is not a typical static site generator and it does not require static HTML/CSS pages. Instead, it loads Markdown files dynamically and displays them as web pages. Pretty neat!

Docsify homepage

Check out the Docsify homepage for a preview of the layout, along with further setup details.

It does require that you create the index.html file yourself, which can then be uploaded to GitHub Pages or hosted on your own server. From there, you just write Markdown files for each page and use those as your primary docs.

The entire process is outlined in detail in the quick start guide, so that’s probably the best place to start. This can all run through npm, so it really helps to know your command prompt or at least be willing to learn.

It is possible to create a raw HTML file yourself and just copy/paste the template from Docsify’s setup guide. But, I recommend doing it dynamically, since it saves a ton of time—and isn’t that really the point?

As you learn the Docsify system, you can add features using Markdown or raw HTML. These features include a custom navigation bar and even your own cover page with your project’s logo.

Docsify even comes packaged with a bunch of free themes if you want pre-designed layouts to work with. Or, you can browse through their showcase gallery to see which projects use Docsify for their documentation.

Docsify example documentation

All the basic setup info & file downloads can be found on GitHub, so head over there if you want to give this a shot.

You can also see a live demo on the main Docsify documentation page which, sure enough, runs on Docsify. So, if you like that web page layout you can use that same template and run it all through Docsify, 100% free and open-source.

Flexdatalist – Autocomplete Plugin with <datalist> Support

The HTML5 <datalist> element is quite useful in modern frontend development. Yet, it’s one of those elements that not many developers know about.

It works on an input field where you can autosuggest certain values for the input. The default setup looks okay and we’ve covered some coding tips on building cool effects with autosuggest datalists.

However, it’s much easier to work with a plugin such as Flexdatalist. It supports a wider array of browsers and allows you to fully customize the design of your datalist.

Flexdatalist jQuery plugin

Not everyone has a need for autocomplete features and with native HTML5 datalists, you might not bother with a plugin. However, Flexdatalist is perhaps the best one out there because it builds upon native datalist behaviors to add:

  • Mobile responsive support
  • Extra descriptions for each item
  • Options for multiple selections at once
  • Custom event handlers

It’s all powered by jQuery, so you will need a copy of the latest version to get this running. It also comes with its own CSS stylesheet which you might want to combine into a single CSS file to reduce HTTP requests.

You can find full setup instructions on the main demo page which includes download links to the Flexdatalist files.

It’s really simple to set up, with just a single line of JavaScript. By default, the plugin targets all inputs with the class .flexdatalist, so just adding that to your code should be enough to see results.

You just add the <datalist> element inside your input field and Flexdatalist handles the rest. It’ll auto-style the list, including optional descriptive text.

The simplest way to add extra text is through a JSON file which you can attach to your input through a data attribute.

For example, if you check out the Flexdatalist demo page you’ll find a “Countries” input field with the attribute data-data='countries.json'. This references a remote file that stores all the raw input data externally.

Flexdatalist example demo

Too many of these fields you can slow down the page a bit. However, I can’t imagine many sites would run more than a few of these datalist forms on one page, not to mention even with this jQuery plugin, they’re still pretty fast.

To get started, just visit the GitHub repo and download a copy. This includes a link to the main demo page which also has full documentation for setup, JavaScript options, and plenty of sample code snippets to go around.

Best Color Tools For Web Designers

Setting a basic color theme for your web design project might be an easy task, however, deciding upon the right combinations or coming up with a color scheme may get tricky, especially when you don’t know which color tool would work best for you.

So to help determine the best color schemes for your projects, here are some of the best color tools for webs designers. Let’s check out the list.

Adobe Color CC

You may know this tool by its previous name Adobe Kuler. It’s one of the most popular features by Adobe allowing you to combine colors.

Adobe Color CC

ColourLovers

ColourLovers is an online community of color lovers. It contains images and their color palettes, so you can use them for your own work.

ColourLovers

Coolors

Coolors is a quick color scheme generator. It allows users to create and share color palettes in no time. It chooses the main color of the images and finds perfect color combinations.

Coolors

Color Snapper 2

Color Snapper 2 is a tool created for OS X Yosemite. It was made for graphic designers so they can play, modify, adjust, organize, save, and export colors on the screen.

Color Snapper 2

Colordot

Colordot is a great website and iOS app allowing you to create and share color schemes. You can choose color with a finger or a camera.

Colordot

Adobe Capture CC

Adobe Capture CC allows you to take a picture of anything you like and turn it into a color palette, create a brush, and pattern. It’s available on desktop and mobile.

Adobe Capture CC

LOL Colors

LOL Colors is one of the services created by Mackenzie Child. It’s a website with curated color palettes. Every colorful teardrop is clickable with ready-to-copy hex codes.

LOL Colors

Gradients.io

Gradients.io lets visitors use gradient fills for their images. The website contains a page full of squares in different color palettes with their hex codes for easier usage.

Gradients.io

Color Sphere

Color Sphere allows you to build a palette in one color shade. It provides all hex numbers, so you can easily use a certain color.

Color Sphere

CheckMyColours

CheckMyColours helps you combine foreground and background colors of all DOM elements. It’s created to check if the colors pairing create a proper contrast for people with color deficits.

CheckMyColours

Color Hunter

Color Hunter is a useful tool for designers. Just find an image you like and upload it (or enter image URL) to the website. The service will create a color palette from your chosen image.

Color Hunter

TinEye

TinEye allows you to extract color from over 20 million Creative Common images from Flickr. Just select a color, slide dividers to adjust the color and add tags to your search.

TinEye

Pictaculous

Pictaculous is a handy tool designed by MailChimp which can help you create a color scheme from an image. Then you can download Adobe Swatch file.

Pictaculous

Paletton

Paletton is made to help graphic designers create websites with proper color combinations. You can also use pre-made color palettes in a chosen color.

Paletton

Colorspire

Colorspire is a 3-steps color palette builder. You can choose a base color, then create a color scheme, and see huge colors preview.

Colorspire

Hexu.al

Hexu.al is a service aimed to add colors to users’ words. It can also add colors to images or designs.

Hexu.al

Color Explorer

Color Explorer is one of the most in-depth color tools available out there. With its help, you can create, analyze, and customize your color schemes. It’s absolutely free.

Color Explorer

0to255

0to255 will help you to find darker and lighter shades of one color. It can be used to find a range of shades for one particular color.

0to255

ColorRotate

ColorRotate is a helpful color editing app for tablets. WIth 3D color scope, you can take a full control of colors of a subject.

ColorRotate

SpyColor.com

SpyColor.com is a free app that provides information about any color, including conversions to many color models, such as RGB, CMYK, HSL, HSV, and much more. You can create various color schemes, for example, complementary, split-complementary, triadic, tetradic, five-tone, clash and more.

SpyColor.com

Designspiration

On this site, you can select up to five hues from a full-page palette. Then, it will generate a display of all the images in its database with this color combination.

Designspiration

Color Blender

Color Blender is easy to use tool which allows you to create a six-color palette based on just one color.

Color Blender

Colors on the Web

Colors on the Web will help you to explore color theory and how it’s used in web design. Using 3 main tools: Color Wizard, Color Wheel, and Color Contrast Analyzer you will learn to match colors.

Colors on the Web

ColorMunki

ColorMunki lets you create your own colors. You can create color palettes, find similar colors, and properly match them.

ColorMunki

Pantone

This service created for Apple users will help you to explore the world of colors and find new shades. You can discover color harmonies, values, and cross-references.

Pantone

ColorZilla

ColorZilla is Firefox and Google Chrome plugin extension that includes a color picker, eye-dropper, CSS gradient generator and palette browser.

ColorZilla

Color Hunt

Color Hunt is a new social media channel for color lovers. You can discover carefully picked color palettes, and choose some Hot, Popular or Random color schemes to use in your future designs.

Color Hunt

Material UI Colors

Material UI Colors is an amazing service to choose contrasting colors for material design.

Material UI Colors

ColorDrop

ColorDrop showcases hundreds of amazing color palettes you can use. For easier navigation, use sections “Favourites” and “Flat Colors”.

ColorDrop

BrandColors

BrandColors is an official color source of most popular brand sites of the world. It features a list of brands and their official colors.

BrandColors

UXmas – A Christmas Advent Calendar of UX Design Content

The holiday season is always full with family, new gadgets, and mobile apps for extra fun.

And now, UX designers have something more to celebrate with the UXmas advent calendar. It counts down the days leading to December 25th with a massive calendar of new user experience articles.

The site updates every year with new content and features a large cast of writers.

Surprisingly, most of this content is all unique, so it’s written solely for the website. UX designers come together to share their thoughts on the industry, new tips for the future, awesome videos, guides, infographics, whatever.

Everything from mobile apps to web forms is covered in great detail. There’s even an authors page where you can learn more about the people who write for the website.

And of course, there’s a big mailing list if you wanna join and get immediate updates every December. The site has grown surprisingly well, considering its limited content schedule, so I think it’ll be around for quite a while.

Sample UXmas page

Note the site runs on Australian time, so articles follow a certain schedule depending on your time zone. One good reason to sign up for the email list if you can!

Also, check out their Twitter account @merryuxmas if you’d like to keep up-to-date via social media. And, if you have ideas for the site reach out to the team @thirststudios with your suggestions. It’s a work in progress and always open to improvements from the UX community.

5 Web Apps to Improve Your Design Process

It would be ideal if you could devote 100% of your workday doing what you do best – web design/development. Unfortunately, it doesn’t always work out that way.

There are project management tasks and some business activities in the pipeline. In addition, there are some software installs and updates to be taken care of.

Doing any of these things manually can be tedious, time-consuming, and error-prone. It’s not much fun having to do the same repetitive tasks day after day, simply to keep a project on track.

Making certain that software tools have been properly installed, and are up to date might be a burden. Moreover, you need to make sure that they are compatible with your other software tools.

A web app or two can be the solution to all the above. They are effective and efficient. In addition, you don’t have installation or maintenance issues to worry about.

Apptivo

This web app helps businesses manage their sales and marketing tasks, and ensures the information needed to maintain excellent customer relations is always up to date.

Apptivo is an online CRM system that forms the core of an integrated suite of G Suite- and Office365-compatible business apps.

Webflow

If you’ve been looking for a tool that enables you to design and develop websites, without having to write code — and to create a bespoke CMS for every website you produce — look no further than this web app.

Webflow speeds up website production by eliminating the waterfall process and simplifying collaboration between designers, developers, and content specialists.

Paymo

The Paymo web app helps you manage projects easily by bundling a set of advanced task management and reporting functions, a tool that assists you from start to finish. Its flexible, affordable pricing scheme can easily be tailored to fit your exact needs.

Nutcache

If you’re an advocate of Agile principles and practices, you’ll love Nutcache. This web app will help you manage your Agile and Scrum projects more effectively and efficiently, throughout their lifecycle, by supporting everything from initial budgeting, and time and expense tracking, down to final billing.

pCloud

The creators of pCloud made it their goal to give its users the ability to access, work on, and share information, no matter where they are, where those they are sharing information with are, and irrespective of which devices are used. Your information is safely and securely stored in the cloud.

Keeping Abreast of the Times and the Trends

We live in the world of lightning product development. So, sometimes web professionals find it difficult to keep up with the latest trends.

Yet, you might be lucky to get their hands on the latest and greatest tools. However, you also might find it difficult to keep them updated.

Some designers will claim that tools are secondary to experience, talent, and results. In fact, these designers may be right. Yet, having the right tools is essential if your goal is to work faster and more efficiently. This will also enable you to produce the best results.

It’s important to be aware of the latest trends, as well as of the new tools that could make your work even easier. Seeing what others say will make your decision-making that much easier.

Conclusion

No two projects are ever apt to be completely alike. However, we normally tend to rely on the same set of tools. These tools are perfect for some projects, but lacking in some respects for others.

By choosing your tools wisely, you’ll be able to communicate your ideas with greater clarity. This will also allow you to avoid technical obstacles, and simplify your workflow.

Create Responsive and Beautiful Full-page Lightbox with BaguetteBox.js

There are dozens of lightbox plugins and they’re all great for different reasons. Some work better on portfolio sites while others are best for responsive layouts.

But, one of my favorite new plugins to use is baguetteBox.js, created by JavaScript developer Marek Grzybek.

Of course, this plugin is totally free to use and open-sourced on GitHub if you wanna dig into the code manually.

The library does not have any dependencies, so you can run it without jQuery, Zepto, or anything else. It’s a pure JavaScript library with a really simple setup.

It’s meant to work perfectly on mobile devices, so it can support swipes and taps, along with the default behavior on desktops & laptops. It’s one of the few full-screen galleries that support mobile interactions, along with a full modal effect.

Check out the demo page to see it live in action. It has a fully featured gallery, along with the one line of code required to get it working:

baguetteBox.run('.baguetteBoxOne');

So, this targets a container element with the class .baguetteBoxOne and the entire gallery works off that.

You could set custom options if you wish for things like captions, button styles, preload features, and callback methods for onclick/onchange events. All of these options are well-documented on GitHub if you wanna dive in.

baguetteBox.js slideshow preview

But, it really doesn’t take much to get this going beyond a container element and some basic image elements.

You have full control over the animations, image sizes, swipe effects, and gallery content such as titles/captions. This does require JavaScript, so it doesn’t have a pure CSS alternative to the modal. But, since most browsers support JavaScript it shouldn’t be a problem.

To learn more, visit the baguetteBox.js main page and you can also share your thoughts with the creator on Twitter @feimosi.

Add Web-based Content Editing With Substance

Many web applications support user input and it’s great to let users edit their text with formatting. Bold text, headings, links, underlines, all of these features typically require raw HTML to set up.

With the Substance framework, you can support a wide array of editing features, all with one script.

Substance isn’t just a plugin or a simple text editing GUI for the web. It’s an entire framework built to support a web-based editor.

This is also possible using basic CSS libraries but it’s never been this easy. Substance is quick to install and comes with a ton of features you can choose to run (or not run) based on your site’s needs.

Substance.io editor

Take a peek at the Examples page if you want to see this in action. It supports pretty much everything from image uploads to custom emojis and even inline forms for web content.

Substance.io animated preview

Currently in beta 6, this framework is absolutely massive. I think it’s ready for production sites and it’s already used on a number of big web apps such as Stencila. But somehow, this framework has slipped through the cracks in major developer communities.

It has a full GitHub repo with a table of browser support and custom options you can toy with.

All files are loaded directly through npm, so it helps if you have some Node experience. The biggest way to get going is diving into the code and learning how to customize the Substance framework for your own web project.

For this, I recommend the online documentation which is full of mini-tutorials for all skill levels.

To learn more, visit the main website or check out this quick two-minute intro video.