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.
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!
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.
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.
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!
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
But, it really doesn’t take much to get this going beyond a container element and some basic image elements.
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.
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.
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.