Fortunately, there are many free date picker plugins available that can enhance the user experience and make it easier to pick dates. Adding a date picker to your form is a straightforward process, and once you learn how to do it, you’ll never go back. That’s why we’ve scoured the web to find the best date picker plugins and compiled them all in one post for your convenience.

In this collection, you’ll find a variety of plugins, including vanilla JS plugins, jQuery plugins, and extensions for popular frameworks like The 40 Best Free Bootstrap 5 Templates & Themes for 2023Bootstrap. No matter your needs, we’re confident you’ll find a plugin that works for you. With these plugins, you can improve your users’ experience and make it easier for them to select dates on your website or application.

1. Flatpickr

The lightweight Flatpickr plugin is easy to use and even easier to setup. It’s designed with simplicity, so the default UI should blend into any layout. If you take a peek at the examples page, you’ll notice this date picker isn’t very complex. But that’s often what users want: a simple interface to input data and move on.

With Flatpickr, you can customize the initial date, month, and year along with restrictions on which date(s) can be picked. Plus, you can add an optional time parameter using the 12H or 24H clock. This is undoubtedly one of the better date picker plugins for its design, UX, and features.

2. Pickadate.js

Another choice I really like is the Pickadate.js plugin. This is designed to be mobile-friendly and fully responsive, so it’s a great solution for all devices.

Pickadate runs on jQuery, so you need that library as a dependency. However, this file is pretty lightweight, and it doesn’t take much to get it working, so even with jQuery, you shouldn’t notice any page lags. This offers a date and a time selection menu, so it’s a fully-featured option no matter what data you’re collecting.

3. Date Range Picker

Input range pickers are extremely common with scheduling programs and visual data applications. For example, Google Analytics uses its own date range picker for visitor data over a specific website.

To recreate this effect try the Date Range Picker. It’s designed to fit into Bootstrap’s CSS stylesheet but can also be used solo. Plus, it supports multi-month pickers, single-month pickers, and pre-defined values for common date ranges(past week, past month, etc.).

4. Datepair.js

To use something a little simpler for range selection, try Datepair.js. This relies on dual input fields for selecting the starting date & ending date of a range. It can also include time ranges based on your settings and how you configure the plugin.

Is this better than a single date picker UI? That’s up to you(or your client) to decide. But this is a simple plugin to set up, and your visitors may prefer the single field inputs.

5. DateTimePicker

Here’s one of the more unique plugins with quite an abnormal interface. The DateTimePicker plugin has its own responsive dropdown menu that lets the user select their date/time using plus & minus icons.

On the one hand, this is easier to jump around and quickly change the month/year with a few taps. But it’s also not the typical calendar UI, so it may take some adjusting from users who aren’t familiar with this interface.

There are pros & cons to everything, so I say take a peek at the plugin and see what you think. This does support separate date & time inputs, but you can also combine them, making datetime selection just one click away.

6. glDatePicker

For a detailed design and tons of optional features, check out the glDatePicker plugin. Considering how much you get, it’s fairly lightweight and measures about 7KB when minified. This runs on top of jQuery, so you must also consider that. But it’s one of the few plugins that offer gorgeous theming for calendar date selection screens.

It has a few pre-designed templates but also has CSS properties that you can restyle yourself. Not to mention all the JS functions have callbacks, so if you’re comfortable with coding, you can add your own features into the mix.

7. Wickedpicker

While this isn’t technically a date picker, it is one of the better time pickers out there. Wickedpicker is a jQuery-powered time selection plugin that works on any input field. It supports user input for hours/minutes and the AM/PM setting. You can also run it on a 24h clock with a simple JS option.

Some date picker plugins have time selection, but it comes as an extra feature. This plugin is designed solely for time inputs, so it’s a nice choice if that’s all you need.

8. Bootstrap Datepicker

Anyone familiar with Bootstrap knows just how useful it is for new projects. If you’re frequently designing sites on Bootstrap, then you should keep this Bootstrap Datepicker saved.

The design includes a section for changing the month & year along with a time selector for altering minutes/hours in your date picker. It blends perfectly into the BS GUI, so it’s undoubtedly a staple for anyone using Bootstrap.

9. Foundation Datepicker

Another popular frontend framework is Foundation, and if you’re more into that library, you should check out this Foundation datepicker also 100% free. It also comes with a time picker and options to include the time inside the date selection screen. You can even define dates based on fixed settings(i.e., only certain dates are available) and limit those dates to certain times.

You can even restyle the time input with fixed choices like 15-minute intervals. You can do a lot with this plugin, so it’s a great addition to any Foundation website.

10. FoxRunSoftware DatePicker

This is one of the top plugins on GitHub for jQuery date pickers. It’s simply titled “DatePicker” but to distinguish it from the rest, it’s the plugin designed by FoxRunSoftware.

It comes with a clean interface, and by default, it uses a 3-month GUI window for date selection. This feels just like the Google Analytics picker, except it’s a bit smaller. The callbacks are pretty simple to code, and you have a lot of control over how to manage the UX. Certainly a date picker worth saving if you want to replicate the Analytics GUI.

11. jQ Datepicker

Here’s one more date picker plugin with the simple title of Datepicker. Again it runs on jQuery, but this one’s designed by a Chinese developer Fengyuan Chen. This Datepicker plugin is phenomenal, and it has a ton of documentation for newer JS developers.

The main demo page is great for toying around, but check out the GitHub repo if you want to get this plugin setup & running on your website.

And if you’re ever looking for more date-picker plugins, try searching GitHub. Web developers release new plugins all the time, so you never know what you’ll find.

The post 10 Free Open-Source Date Picker JavaScript Plugins appeared first on Speckyboy Design Magazine.

Aside from Sublime’s many optional themes, keyboard shortcuts, and lightning-fast workflow, it also has a vast community of developers that create extensions that make the software even better and easier to use.

If you search around, you’ll find hundreds of extensions to pick from. And for this post, I’ve curated some of the best Sublime extensions that’ll save time and effort in any web dev workflow.

If you’re looking for Sublime Text extensions for WordPress, take a look at this collection.

1. Emmet Extension

Sublime Text and Emmet are practically one and the same. The Emmet extension doesn’t serve just one function or purpose.

It’s a massive toolkit for web developers with a bunch of handy coding features, extra keyboard shortcuts, and features for automating your workflow. This can help you manage your code snippets or add extra features like auto-image attributes.

If you look through Emmet’s massive documentation, you’re sure to find a bunch of handy things you can adopt. It’ll take some adjusting to make this a normal part of your workflow, but in the end, it’s worth learning.

There’s no better extension for Sublime Text than Emmet. Especially for anyone frequently coding websites from scratch.

2. Autoprefixer

Many of the newer CSS3 properties have prefixes to handle different rendering engines. These are mostly used for the WebKit, Gecko, and Microsoft engines which are grouped together as vendor prefixes.

Not every property requires these prefixes anymore. Browsers have come a long way in a few short years, and most CSS3 properties can run without prefixed code.

But if you want to support the largest possible audience, then you’ll want Autoprefixer. This can be installed via the Sublime package manager with just a few clicks, and it’s even easier to add to your codebase.

3. Themr

Sublime comes with a couple default themes with certain syntax highlighting styles. But you may want to add more into your arsenal and that’s where Themr can help.

This small add-on lets you sort through available UI themes and organize them according to your favorites, even assigning keyboard shortcuts if needed.

Plus, you can add new themes as you find them and organize them all together. Your “favorite” themes can even be saved as presets based on whatever file types you’re using(ex: HTML, JS, and PHP files).

4. JSHint Extension

Debugging JavaScript is a pain. If you practice debugging you’ll naturally get better at the process, but it’s still not easy to do.

With Sublime’s JSHint extension, you can bring JavaScript debugging right to your IDE. This simple add-on lets you test your JavaScript code from any JS file.

A new console window appears on the IDE where you can sift through errors, find what they mean, and quickly correct them.

You can even run this from the terminal window if you want to check a file outside of Sublime. An excellent tool for developers who continuously find themselves working in JavaScript.

5. Auto Filename

Almost every webpage references other files somewhere in the code. These files could be images, JS scripts, stylesheets, or even other dynamic pages like .php files.

With Auto Filename, you’ll save loads of time manually entering these files. Just start typing the name, and this extension handles the rest with an autocomplete field. It works for all elements inside your HTML, so you can quickly add directory paths for images, CSS files, JavaScript plugins, you name it.

6. Sidebar Enhancements

Sublime Text comes with an optional sidebar view that works like a directory. This is handy when you’re working on a larger project with multiple files and includes.

Sidebar Enhancements takes the default Sublime sidebar and enhances it! This gives you multiple folder views, more options in the right-click context menu, easy copying of path URIs, and other handy options like “open with” for graphics.

Not every developer uses the sidebar feature. I even turn it off when I’m just editing single files. But if you continuously use Sublime’s sidebar, this extension will prove invaluable to your workflow.

7. ColorPicker

Most of us are familiar with color picker tools in programs like Photoshop. They work great and often they’re all we need for a solid UI process.

Sublime’s ColorPicker extension lets you bring the color selection process right into your IDE. Of course, there are plenty of free color webapps you could rely on instead. But this plugin is superb since it works right inside the code window.

8. Git

If you’ve never used Git version control then it can be a long road to learn. The right resources will help, and once you fully understand Git, you’ll never want to go back.

One of the best resources you can use is the Git extension for Sublime. This automates the Git version control workflow and makes it super easy for you to manage packages from your IDE.

It’s a super simple plugin to work with, and it’s compatible with all operating systems. Many developers prefer to use the command line for Git management, but Sublime is another viable choice.

9. Bracket Highlighter

Here’s a sought-after feature that’s useful when coding big pages. The Bracket Highlighter extension automatically highlights the opening and closing brackets inside your code. All you need to do is place your cursor inside the starting(or ending) bracket, then sift through the file to find the matching tag.

It’ll help you visualize HTML containers in your page and see which elements are contained inside other elements. Sublime does have a small bracket highlighting feature with Emmet, but I prefer this extension since the highlighting is much clearer.

The post Must-Have Sublime Text Extensions For Web Developers appeared first on Speckyboy Design Magazine.

However, you might want to consider taking it a step further and restyling them to better match your website’s design.

Thankfully, there are many free JavaScript plugins available that allow you to customize the look and feel of your progress bars. These plugins offer a variety of extra features, such as animations and more advanced design options, to help make your progress bars more engaging and visually appealing.

With the plugins below, you can easily create progress bars that seamlessly integrate into your website’s design and add extra polish to your user interface.

1. LineProgressbar

The jQuery LineProgressbar is a free plugin that’s super thin and lightweight. It works with any modern progress bar elements and takes basic options for total fill length, bar color, and height/width(among other features).

Check out the demo page for some examples and code snippets you can use on your website. This is probably the best progress bar plugin for anyone willing to use jQuery. It’s easy to work with, and it’ll run in all major browsers.

2. MProgress.js

Another simple option I really like is MProgress.js. This is built around Google’s material design style, so you may notice it closely resembles some of Google’s loading bars.

It comes with four different loading bars and four different animation styles. They’re all visible on the main page, so you can see which might fit your website. Super easy and super lightweight. What more could you ask for?

3. ProgressBar.js

We’ve all seen the progress bars that run across the top of a webpage. These are getting much more common, and they’re typically used for dynamically-loaded pages.

ProgressBar.js is a free plugin that replicates this feature. But it doesn’t just rely on bars at the top of the page. You can use this plugin for any custom shape, from circles to triangles and custom parallelograms.

4. goalProgress

The goalProgress plugin is definitely the simplest of the bunch. It’s primarily meant for use in tracking numbers on an input field, but it can be used for any similar progress bar. You won’t find much on the homepage besides a basic demo featuring a charity donation bar.

There’s far more info on the GitHub repo showing what this does and how to get it setup. I’d recommend this as a simple starting point for basic progress animations. For anything else, check out some of the other plugins here.

5. μProgress

I had never heard of μProgress before researching for this article. Yet it’s one of the best progress bar plugins on the web. This was developed as a performant progress bar with a focus on custom animations. They all run on the computer’s GPU, which frees up tasks for other page elements to render faster.

You can read a lot more about this process and find setup details in the documentation. It’s a cool project with a full plugin API for adding custom features too.

6. nanobar.js

If you’re looking for a pure vanilla JavaScript progress plugin, look no further. With nanobar.js, you get a super small JS library built around progress bar animations. The whole thing measures under 700 bytes when gzipped, so it’s very small.

Check out the homepage for some examples with bars embedded in the page along with a top loading bar fixed to the full browser width. It can run on just a single function call which makes this perfect for non-JS coders as well as devs who staunchly oppose using jQuery.

7. progressStep

The majority of progress bars fill up a percentage or a number counter. But progressStep is different. This jQuery plugin lets you develop a breadcrumb progress bar where the user works through different steps in a pre-defined process.

This process might be signing up for a new account on a website or following e-commerce checkout flow. Either way, this is an excellent plugin for adding that kind of functionality to your site. It’s free to use and has some great documentation on the GitHub repo.

8. jQuery Circle Progress

Here’s a very similar plugin also built on the jQuery library. But with the jQuery Circle Progress plugin you get more variety to pick through. There are more custom themes and more options to work with.

The downside? It can weigh a bit more, so it’s not the best solution for every project.

And no matter what you need, I’d guarantee one of these plugins can help save you time and frustration to avoid coding a progress bar from scratch.

The post 9 Free Progress Bar JavaScript Plugins For Web Designers appeared first on Speckyboy Design Magazine.

If you’re building a tabbed widget, you could always start from scratch, or you could rework someone else’s code and style the element to fit your project.

That’s why I’ve created this collection of the best-tabbed widget snippets. Each is unique, easy to work with, and offers bountiful code you can copy & edit into your own work.

1. Glowing Tabs

Looking at these very unique glowing tabs you might be surprised to learn they run primarily in CSS. There is a jQuery function to create the sliding effect but the entire design is built on CSS code.

Developer Simon Goellner created this as an interesting project for tabbed widgets. The container stays at a fixed height which is really important for some pages.

Also, the downward-pointing carets let you know which element is currently active along with the element you’re hovering. It’s a pretty sleek tabbed widget and would certainly fit inside any typical website.

But I think it would fit especially well in a minimalist layout where the tab styles could really shine.

2. Tabbed Widget

Want something a little smaller and easier to handle? Take a look at this simple tabbed widget created by CSSFlow.

It’s a pretty simple idea, but the functionality is most surprising. The entire tabbed widget runs on CSS, so it should work in most modern browsers without a hitch. The highlighting effect on the selected tab is a welcome attribute for grabbing attention and focusing on the page.

Plus, you could easily expand this widget to be a lot wider and thicker, housing more content while keeping all tabs the same size.

3. Aria Tabs

These custom Aria Tabs were built for simplicity and the widest range of usability. It does run on jQuery but it’s also meant to support ARIA attributes for screen readers and other accessibility concerns.

That’s why the tabs are so simple. Each one does include a custom CSS animation, but the actual behaviors are fully compliant with basically all browsers.

You may need to spend a bit of time in this code if you want to get these working in your own project. But it’s also a simple process once you understand the jQuery.

4. Scheduling

How often do you see these kinds of tabbed schedule widgets on conference sites? They’re practically a cornerstone of every conference to help sell the event and the speakers.

With this scheduling widget, you can quickly recreate a similar element for any page style. This lets you define custom widgets and switch between them using a bit of jQuery.

Although I’d say the JavaScript code is a bit hectic and arbitrary based on the classes used in this pen. So if you did port this over to a project you could clean up the HTML & JavaScript a tad.

5. Variable Heights

Looking for variable height tabs that adjust based on content? This may seem like a difficult task without causing massive page jumps.

But developer Joseph Fusco accomplished a beautiful transitioning tabbed widget that relies solely on CSS. Pretty impressive considering the transitions are crazy smooth!

The content has its own fading effect, and the container is variable width too. So you can run two tabs or 10 and still fit all the content you need.

6. Pure CSS Tabs

Here’s another example of pure CSS tabs with these created for a SitePoint article detailing CSS alternatives to JavaScript widgets.

Tabs were powered by JavaScript for years, and you’ll still find most tabs are JavaScript-based to this day. But it is possible to create CSS-only tabs, and this pen is one great example.

I’ll admit the colors are a bit simple, and there’s plenty of room to customize this thing with a totally new look. But from a user experience perspective, these tabs are fantastic, and they feel genuine for a CSS-only solution.

7. Simple Tab Designs

Speaking of really simple tabs you might like this set running on a mix of CSS and JavaScript. They use far more unique animations and the CSS styles blend easier into any page.

Actually the animation is pretty darn cool since it’s not something you typically see. The individual tab contents slide down & out of view, almost like notecards.

This whole widget feels incredibly light, and it’s definitely one of the coolest tabbed features with universal appeal.

8. Rounded Tabs

Back when rounded corners required CSS hacks it would’ve taken hours to create tab styles like this. But now with CSS3 you can easily build a rounded tab widget with just a few dozen lines of CSS.

Granted, this specific pen runs on 170+ lines of code, but it’s also a more detailed design. It relies on jQuery for content switching, and you’ll notice this only needs about 20 lines of JavaScript to get it running.

A nice little widget if you’re looking for simple tabs that span the entirety of the container(or the page!)

9. Adaptive Tabs

There’s a lot to say about these adaptive tabs by Lewi Hussey.

The hover effects are fantastic and feel unique to this widget. But the animation effects and the transitions are what really take the cake.

It feels incredibly smooth, and there’s no risk of a huge page jump when moving from a content-heavy tab to a smaller one. This has to be one of the simplest tab widgets offering the most value, and it could make a great template for web dev projects.

The post 9 Simple CSS & JS Snippets for Creating Beautiful Tabs appeared first on Speckyboy Design Magazine.

Granted, not everyone writes about code or has code snippets in their blog posts. But if you do write a lot of coding articles or need to add code snippets onto your landing page, then you’ll enjoy these CSS and JavaScript code highlighting solutions.

If you’re looking for syntax highlighter plugins for WordPress, take a look at this post.

1. Angular Source Code Boxes

Here’s a pretty cool snippet created by Andrew Archibald built entirely on Angular.js.

All of these sample code boxes have tabs much as you would find with CodePen’s embeds. But you can add this type of code into your page without any embeds, all handled through CSS for styling.

This would reduce HTTP requests over embedding, and this gives you far more control over the type of syntax you’re using.

I’ll admit the tabs are pretty darn cool and this uses the angular-highlight library for syntax support across dozens of languages.

2. <pre> Tag Style

Here’s a much more detailed example for developers writing lengthy tutorials and sharing massive code snippets.

This code styling project works with two features: a left-hand vertical bar with line numbers or a full-page dark background for the sample code.

You can restyle the color choices however you want with just a little bit of jQuery. Not to mention there’s a bunch of variety here to match any website layout.

3. Textarea Tabs

So here’s a really unique project developed by Ashley Ktorou showing what you can do with a simple textarea.

Coders on the web need to enter the code somewhere. A textarea is the perfect element to handle that.

Yet, with this snippet, you’ll find a custom textarea with highlighting along with custom tabs and a fullscreen feature. Not to mention this all works with basic CSS & JS code.

Pretty crazy that we can build code editors right in the browser nowadays.

4. CSS-Only Line Numbers

This dynamic syntax element is actually very simple. But it’s because of this simplicity that it really deserves a spot in this list.

With this code, you can add dynamic line numbers automatically into your snippet blocks. You don’t need to hard-code the numbers, and they’ll adjust regardless of how many lines of code you add.

I think this can work well for a blog with many code snippets in-between the writing.

And it’s one of the few examples here that uses a lighter background with darker text.

5. Bootstrap Syntax Highlighting w/ Tabs

Looking to add a syntax highlighting feature alongside Bootstrap? Then you’ve stumbled onto the perfect pen by developer Kijan Maharjan.

This lets you add a tabbed widget to your page that contains many different styles for syntax highlighting.

You pick the colors with the code-prettify library and setup the entire design with small edits in CSS.

6. Syntax Highlighting Demo

Here’s a very cool highlighting demo supporting a wide array of languages to pick from.

Each language has its own design style and color scheme, but you can also edit these on your own with a bit of CSS.

You’ll find some homogenous options inside more basic snippets like the JSON example embedded above. Yet, this still offers variety, and the design is simple enough to match any layout.

7. Prism.js Demo

The free Prism.js script is one of the best open source solutions for syntax highlighting. It’s used by massive design blogs like Smashing Magazine and it’s freely available for any use case.

But if you want to dive into Prism without much code, you can study this snippet created by Bram de Haan.

From that code, you’ll find a very lightweight setup that you can copy and re-style to match your site. It uses zebra striping and a custom scrollbar to really stand out from other elements on the page.

8. Pure CSS Code Editor

Okay so the name on this is a tad misleading. It’s not technically a code editor you can use that just runs on CSS.

But this snippet is still wildly impressive.

It’s a static code IDE interface re-created using just HTML and CSS.

You probably won’t find much use for something like this on your website. But the code styles might inspire you to clone a similar design for your own snippets.

9. Syntax Coloring

Super simple and super basic describes this snippet created by Michaël Germini.

If you want to avoid creating your own syntax highlighting from scratch, this pen is for you. It uses a clean white background with bright text, and it’s a nice starting template.

Keep in mind this is super basic so you’ll need to spend a bit of time editing the style to match your site.

10. Code Guide

In this free code guide by Jo Dahl you can see how these syntax highlighting blocks get used in a real-world scenario.

The guide takes you through HTML & CSS with a very clean grid-style layout. The snippets look phenomenal, and they have a color scheme to grab your attention without being obtrusive to the reading experience.

Keep this design in mind if you’re creating a blog or website that features code snippets.

The post 10 CSS & JavaScript Snippets for Beautiful Syntax Highlighting appeared first on Speckyboy Design Magazine.

And with these free CSS and JavaScript onboarding UIs, you’ll have plenty of ideas that offer both inspiration and code snippets to help you get started.

1. Carousel Slides

Rotating carousel onboarding is hugely popular on mobile where screen space is limited. But this effect can work just as well on websites where you need to get information across quickly.

Check out this carousel slide demo created by Nick Wanninger to see what I mean.

It’s a totally free onboarding example created using Flickity and some basic CSS code. This works for both mobile and desktop so it’s an excellent choice if you need a responsive solution.

2. React Daily UI

As a simple practice design Jack Oliver created this React Daily UI pen from scratch. And it’s one of the sleekest onboarding experiences I’ve seen.

The interface features dummy text since it’s not meant for practical, real-world use, but it is very clean and should leave enough room to fit pretty much anything into the page.

One thing to note is that I couldn’t get this working on mobile with swipes, and it seems only to recognize taps at the moment. But for a click-only solution, it’s really nice.

3. Onboarding Screens

Not only does this pen feature an incredible interface for onboarding, it also has custom animations to boot.

Developer Jeff Ham knows his way around an interface and created this immaculate onboarding screen. It relies on JavaScript to create the “next screen” animations and the toggle events for user clicks/taps.

One nice addition to this interface is the blue next button at the bottom. This lets the user advance screen-by-screen with a big CTA in plain view. I’d bet this would increase the total number of people who convert and improves the quality of the experience overall.

4. Boardal

This Boardal snippet is rather unique since it’s not something you often see.

It uses a modal window with onboarding content to help users get through the site faster. It’s a custom design created solely for testing, and it’s one of the coolest ways to improve the onboarding process.

Note this works best on a desktop because it relies on the modal effect(not ideal for smaller screens).

So if you like the design and want an easy way to improve onboarding for your site, then give Boardal a shot.

5. Guided Tour

Typically onboarding is considered a step-by-step process introducing new pages and features to the user. But I personally find guided tours a lot more useful.

If you want a simple snippet to get started, then this guided tour is perfect. It relies on Bootstrap components and uses small tooltips with “next” buttons to advance the tour.

The user can close the tour at any time should they get annoyed or not care anymore. This makes it an optional tour, so fewer people will be annoyed by the process.

Overall, this is my preferred onboarding method, although it takes a little more effort to set it up. But this demo at least gives you a template to start with.

6. Material Tour

One alternative tour method is the auto-advancing tour that highlights specific features.

The best example I found is this pen created by Gregor Adams. It’s based on the material guidelines and uses highlighted circles to showcase parts of the page. This technique is perfect if you have very complex interfaces with a lot of features.

By darkening the entire page, you bring focus to one area at a time. This grabs the user’s attention immediately, which is exactly what you need to do for good onboarding.

I know this won’t fit well on all websites, but if you like the interface, I highly recommend trying it.

7. Android App Onboarding

Mobile apps typically need the onboarding process more than websites. It’s common for mobile UI designers to cram features into the smaller screen, which can overwhelm users without a guided intro.

This onboarding guide by Mat Swainson is a small yet eloquent example of what can be done for smartphone apps.

It’s based on an Android model, but it’s certainly not the only style you can use. I like how it supports native swiping, which works even in mobile web browsers.

Plus, the small progress indicator at the top is a nice touch. Definitely a simple onboarding page but worth saving if you’re looking for inspiration.

8. Ionic Intro

There’s a lot you can do with Ionic and this pen is one great example.

Developer Clifford Fajardo created an Ionic intro onboard running solely on the JavaScript framework. It supports all mobile interactions like taps, swipes, and even supports options for double-taps if you want that feature.

Ionic is primarily used for mobile development, and it works really well for mobile websites too. I can’t say this onboarding screen would fit every website, but it’s a solid choice if more than 50% of your audience comes from mobile.

9. Vertical Form

With a slight jelly UI animation and a real simple design, this vertical form is a unique treat.

It uses the CSS flex properties into full effect along with some custom JavaScript and CSS animations. Granted, I do find the content a little thin, so it doesn’t offer a lot in the way of detailed onboarding.

However, you could take this interface and really make it your own without much effort, so it does leave a lot to the imagination.

10. Guided Tour Tooltip

Here’s one more guided tour example, but this one uses a full tooltip box fixed on the page.

If you check out the snippet you’ll see it’s not built into any specific interface. Rather it’s just a floating tooltip with advice and progress steps for the user.

Combining this UI with some fixed tooltip positioning script would let you easily move this thing around your interface with tooltips pointing towards all of your major features. This template will take some real customization to get it working, but for a simple UI, it’s beautiful.

The post 10 Free CSS & JavaScript Onboarding User Interfaces appeared first on Speckyboy Design Magazine.

Thanks to the rapidly advancing JavaScript techniques we have today, plus the massive open source community, you can set up clean modal windows in a snap.

For this post, I’ve shared my top picks of the best free modal window plugins, all with a variety of features and styles to choose from.

1. jQuery Modal

Looking for something super clean and simple to use? Then jQuery Modal should be your go-to resource.

This accessible plugin works with keyboard shortcuts(ESC to close) and even supports touch actions. The total library weighs about 1KB which is super-duper tiny.

Not to mention the actual design is clean enough to work on any website. Definitely one of my favorites for a super clean UX.

2. leanModal

The leanModal jQuery plugin comes with a very similar “clean” design just like the jQuery Modal plugin.

They both look similar and offer a similar experience. But leanModal stands out because it supports API callbacks for custom animation effects and more technical content.

Both libraries are lightweight, and they both run on jQuery. In my opinion, you can’t go wrong either way.

3. iziModal.js

Getting into the more complex side of modal design we have iziModal.js.

This is definitely a larger plugin and comes with a lot more in the way of aesthetics. It supports dozens of animations with slide-down effects, fading effects, and even tabbed modals to switch between login/signup forms.

iziModal is a personal favorite due to its clean design and fantastic UI/UX effects.

However, it is a bit more technical to set up, and it comes with a more substantial file size. If you can look past that stuff, you’ll adore the experience.

4. ARIA Modal

The W3’s WAI-ARIA acronym is long and confusing. It really just defines how you should handle rich experiences for a more accessible web.

Very few modal windows are designed with accessibility in mind. However the ARIA Modal jQuery plugin is the best I’ve found.

It gets frequent updates and should work on all devices, all browsers, for all inputs(click and touch).

Only trouble is that the accessibility-focused plugins are typically a bit “uglier” on the face.

This’ll be perfect if you’re more concerned with accessibility over aesthetics.

5. Remodal

The Remodal script was designed for speed. It runs on top of CSS animations and it works on a super small jQuery script.

However, there is one minor issue with Remodal: it’s no longer supported by the developer.

You can read more on the GitHub repo but this plugin will forever remain in v1.0 unless someone forks the code. Still I consider it a usable plugin that’s unlikely to pose any security risk.

6. FancyBox

While technically not a full “modal” script, I really want to include FancyBox because it mimics modal behavior.

The FancyBox plugin runs on jQuery and creates a modal slideshow gallery from a list of thumbnails. It doesn’t let you create the modal alert boxes like you typically find, so it’s not a direct modal window plugin.

However, it’ll blend nicely on a page with another modal script because the image slideshow lightbox feels like a true modal window.

7. animatedModal.js

animatedModal.js is unique because it takes over the entire screen rather than just a small space on the page.

This may not be what you’re looking for, and that’s perfectly OK! I like this stylized modal because it’s got an easy-going design and a massive library of animation effects(plus an API for customizing them).

But there’s no getting around the sizeable fullscreen effect, so this will only work for devs who like that style.

8. SimpleModal

With the SimpleModal script you’ll find a nice balance of aesthetics and usability. The modal windows feel very natural but it doesn’t rely on crazy animations or lengthy JS.

On the main page, you’ll find examples with everything from embedded videos to images, custom content, confirm/cancel modals, login fields, and so much more.

Definitely a versatile modal script with plenty of room for customization.

9. Avgrund Modal

The scripts that really stand out to me are the ones that do something different. Avgrund Modal is one of those scripts.

Once you activate this modal the animation moves the entire page into the background. This isn’t something that’ll work on every website. But it is super unique and pretty interesting to watch.

It runs on jQuery, supports all modern browsers, and offers natural fallbacks for older browsers dating back to IE6 +.

10. popModal

One look at the popModal page and you’ll see why this thing is so popular. With popModal you can design custom windows that support lengthy scrolling text, confirm/cancel buttons, and even simple notification messages.

All of the CSS codes are super easy to edit, giving you full control over the design.

I don’t love the animation style, but it’s definitely not horrible. I think popModal works best on sites that blend naturally with the animations.

11. SweetAlert2

Here’s one of my absolute favorite alert scripts on the web: SweetAlert2.

It’s a vanilla JS library with zero dependencies, and it’s fully accessible based on WAI-ARIA standards. If you check out the main page, you can actually compare a traditional alert box against the SweetAlert modal.

The difference is like night and day.

12. rmodal.js

Most of the libraries I’ve covered rely on jQuery. But there are some modal scripts you can use that are totally free of all dependencies(the above SweetAlert2 being one).

rmodal.js offers a natural modal window design that can fit any site. It doesn’t rely on any JS libraries and it’s pretty small totaling 1.2KB minified.

It can also play nice with Bootstrap if you’re thinking of combining this with a BS3/BS4 layout.

But take a peek at the sample preview to see how rmodal works in the browser. It won’t please everyone but it’s a nice choice for a dependency-free script.

The post 12 Modal Window Libraries & Plugins For Your Site appeared first on Speckyboy Design Magazine.

Granted, UX is just one part of design, so you should study many areas.

But if you’re getting more into the UX side of things, you’ll love these YouTube channels. They feature free content that goes beyond just typical UX work into all sorts of topics relevant to freelance and in-house designers.

The Futur

When it comes to user experience design on YouTube there is no better channel than The Futur.

It is jam packed with advice, design reviews, and guidance for aspiring designers. Not to mention plenty of videos to get your creative juices flowing.

There’s actually a lot of practical videos on this channel with advice on how to keep your business relationships strong, how to land your first job, and the process of developing soft skills for a team environment.

The future is UX and The Futur is your classroom.

Mike Locke

UX designer Mike Locke runs his own YouTube channel with real success.

As of this writing, he has about 70k subscribers, and the channel is growing larger every month. Content mostly relates to UX in the real world with practical ideas for aspiring designers.

You’ll find plenty of informational videos on overcoming creative blocks and how to keep learning while on the job. But there are sporadic tutorial videos on software like Sketch that should prove invaluable too.

No matter where you are in your design journey, this is a channel worth checking out.

Flux

With fresh new videos Monday-Friday every single week of every month, there’s no denying Flux is a brilliant channel for UX design.

It features a new video every weekday, so you’re guaranteed lots of new content per month. It acts like a vlog for UX designer Ran Segall as he shares tips and advice on the design world.

He also posts some personal videos about his work and career, which can be valuable to watch if you’re just getting started.

In the end, you may get attached to Ran’s videos and find yourself refreshing YouTube daily, waiting for the next release.

UX Mastery

Among dozens of UI/UX channels on YouTube, very few compare to UX Mastery.

Unfortunately, this channel does not often update anymore, so you may not feel that subscribing is worth the effort.

But I absolutely recommend browsing their videos page and bookmarking that link for future reference. There are bundles of tutorials and guided videos from UX pros who share pragmatic advice you can apply to your design career.

Granted, the library is small, and there aren’t many updates, but the content quality more than makes up for that.

Dansky

This is perhaps the single best YouTube channel with UI/UX tutorials on the web.

Simply titled Dansky, this channel covers all the major UX software from Sketch to Adobe After Effects and Principle. There’s also a bunch of Adobe XD tutorials if you’re an early adopter there.

Videos range from 5 minute quick tips up to 60-90 minutes for multipart tutorials.

This channel deserves a sub if you’re actively practicing to improve your UX skills. There’s new content weekly, and you’ll never be disappointed by the quality.

Sketch Together

I’ve used Sketch a handful of times and it really is a nice choice for MacOS users.

It’s also one of the best programs for UX designers since you can wireframe, mockup, and prototype all in the same software.

If you wanna learn Sketch then I absolutely recommend the Sketch Together YouTube channel.

This is technically a channel covering all things user experience, but there is a lot of Sketch content as well. If you run Sketch in your daily routine, you better slap that red “subscribe” button before you forget.

Neuron UX

So Neuron UX is a really small channel. It has less than 1000 subscribers and only 25 videos in total.

But the videos are practical and cover a lot of interesting topics on UX design. They’re also pretty short, making it super easy to consume videos without dedicating a bunch of time out of your day.

There’s even content here for pro designers with lots of topics on heuristics, freelancing, and even a guided tutorial on how to architect a simple UX from scratch.

I wouldn’t subscribe here unless the channel starts updating with new content soon.

But I would bookmark the page and check out some of these videos as you study UX elsewhere.

Tutvid

Tutvid is pretty massive and it has a ton of great tutorials. Only problem is that this channel doesn’t focus exclusively on user experience content.

Still, I really think it belongs in this list for the many high-quality tutorials you can find.

There’s a lot of lengthy tuts from 30-60+ minutes on all the major Adobe software. UX designers often rely on Photoshop for design, After Effects for animation, and XD for wireframing. All three get plenty of coverage along with a few other programs, too.

This channel is bound to have some tutorials that’ll teach you a lot of practical techniques for UX work. It’s definitely worth a quick look to see what you think.

Caler Edwards

So the Caler Edwards channel is another example of solid free design tutorials catering towards user experience.

Easily accessible and totally free, these videos are the perfect resource for newer UX designers.

Most tutorials span two videos, and they total around 30-60 minutes total. There’s plenty here to go through with a focus on Adobe XD, ProtoPie, Principle, and lots of Photoshop.

This is strictly a UI/UX channel, so each tutorial covers something related to web or mobile design.

Absolutely worth a sub in my book.

Laith Wallace

I just recently found Laith Wallace’s channel and it seems pretty new. He’s got around 10k subscribers and just over 25 total videos.

Some of those date back over a year, and others were published within the last month(as of this writing). Uploads are sporadic, so there isn’t any clear schedule for content.

But Laith is an excellent speaker and teacher, not to mention very motivational.

These videos are one part educational and one-part inspiring to keep you forging ahead with UX design, even when you’re feeling confused or just downright lost.

Granted, all of the channels in this list are worth checking out, but they each offer a different perspective on user experience design.

The post The 10 Best YouTube Channels For Learning UX Design appeared first on Speckyboy Design Magazine.

Many of these charts have added CSS animations and gradient effects that give them an extra punch. However, you’ll also find a few that take things a step further, by repositioning, resizing, and restyling the data.

This makes this collection perfect for frontend developers looking to add a sleek, stylish bar graph UI to their projects.

This collection of CSS bar graphs is a fantastic resource for any frontend developer looking to create visually appealing, data-driven designs. With so many options, finding a chart that will fit seamlessly into your project’s aesthetic is easy.

1. Data Charts

In this set you’ll find a few charts that are beautifully designed and very well executed. Developer Kris Olszewski focused mostly on the UX for these bar graphs along with the top of each bar sharing raw data(placeholder numbers in this case).

Naturally, the whole thing runs on CSS, which is certainly impressive. It features templates for vertical and horizontal bars and tiered bars where you can change the background color based on certain values.

Easily one of my favorite sets out there because it offers so much variety for developers to pick up and customize.

2. Pokemon Bar Graph

Can’t say this design would be particularly useful in a real-world layout but it sure is impressive.

These Pokemon-styled bars offer a creative graph design for the web. Each bar relies on a certain color scheme along with vector elements for the eyes of individual Pokemon.

Each one features a hover animation effect, so you can even restyle this to fit whatever transitions you want. And if you want to change these creatures into other animals, you can follow this same template with altered colors.

3. Animated Graph

Bar graphs are used to display visual data for easy consumption. This means both visual items and raw data should be included.

That’s one thing I really like about this graph using percentage labels along the top of each bar. It doesn’t feature a legend or any X/Y labels, but these wouldn’t be tough to add.

I think the most impressive part is how the entire thing runs through CSS. The animations and the percentage text both appear because of CSS properties. Crazy stuff!

4. Minimalist Chart

Simple and easy to use best describes the minimalist craze sweeping the web. Minimalism is often the best choice for responsive websites or simpler layouts that don’t require heavy color schemes.

And with this bar chart, you can restyle data to fit any light color you want.

It uses arbitrary background rows to indicate measurements, and you can even add labels on the Y-axis to clarify the data.

5. Pure CSS Color Bars

CSS gradients add a lot to the web and this bar graph is just one more example of gradients in action.

Each bar uses classic web 2.0 gradients which can feel a bit old-school yet they look fantastic. The entire design works on Sass code and uses variables to set the animation delay, bar sizes, and total graph height.

To edit the colors, you’ll need to work through the Sass/SCSS or use CodePen to compile into raw CSS. But it’s not an overly complex graph, so this shouldn’t be much trouble.

6. Staggered Horizontal Bars

Linear animations are some of my favorites because they grab attention fast. In this pen you’ll see an example of linear animation with each bar loading into view one after another.

It’s designed horizontally, so the bars load across the screen and include labels inside the bar graphic. This way, the total “skill level” measurement follows the X-axis and leaves room to add more skills vertically.

One of the cleaner bar graphs I’ve seen and it can work splendidly on any skill-based portfolio website.

7. Responsive Bar Graph

Every modern website really should be responsive to accommodate all devices. But some elements are tougher to responsi-fy than others.

Tabs, large tables, and graphs are all complex examples. This responsive graph does an excellent job handling smaller screens. It doesn’t rearrange much beyond the total size and space between the bars.

On smaller screens, the bar items can feel cramped and almost impossible to read. But for the most part, this responsive style is fantastic and the perfect substitute for static graphs.

8. Daily CSS Graph

Developers like to test their skills with challenges like Daily CSS. This pulls images of UI designs each day and asks developers to recreate them in HTML/CSS.

You’ll find a lot of these on CodePen, and this graph is one pristine example.

It’s designed with simplicity and clean animation effects attached to each bar. Not to mention it follows a monochrome color scheme that can easily adapt to any website.

9. Vinventory Chart

Another cool Daily CSS example is this vineyard inventory chart created using CSS and some crafty HTML skills.

It’s a pretty unique idea and even more impressive that it runs solely through CSS. I’m most impressed by the actual design of the graph and how it renders perfectly in the browser.

Granted, this also wouldn’t work on most websites, but it’s a testament to what’s possible in modern CSS.

10. CSS-Only Horizontal Skills

You’ll find plenty of skill-measuring bar graphs online but this one by Jed Trow is a real treat.

It’s designed to be fully responsive, and it works flawlessly on any screen. You can resize this bar graph down to 320px for smartphones, and it’ll still hold its consistency.

Plus, this pen includes a small tutorial section below the demo where you can see all the source code and how it works. Of course, you can also just copy/paste from CodePen’s IDE, but it’s nice to see a developer break down their process.

All of these graphs offer something unique but they also share one thing in common: an amazing use of pure CSS code.

You might also like: 10 Open-Source JavaScript Data Chart Libraries Worth Considering.

The post 10 CSS Snippets for Creating Simple Bar Graphs appeared first on Speckyboy Design Magazine.

If you want to grab attention fast, then a custom animated header is one way to do it.

And these examples are sure to grab anyone’s attention after they land on your site for the first time.

1. Animated Colorful Header

This is one awesome background design that mimics a Twitter-style header.

But the background color changes over time, moving through colors in a pure CSS gradient. And yes, this really does work on just CSS.

I have to say that this is the most impressive use of gradient motion on the web that I’ve ever seen. And it adds a really nice subtle BG effect so it’s noticeable but not distracting.

2. Responsive YT BG

So you want a custom YouTube video in your header. Sounds fun!

But it’s not all that easy to setup and it’s tough to get this fully responsive too.

However this snippet can save you loads of time and stress getting a video header onto your site.

It does run with a lot of JavaScript to embed the video dynamically and resize the background. Although most Internet users enable JavaScript, so it’s a safe choice for any website.

3. Header Banner Graphics

Now this is a super cool effect for your header. The pen was developed using JavaScript and a free library called Particles.js.

With just a few lines of code, you can add custom spinning circles, animated particles, and even text in motion.

This header is just a simple example of the many possibilities at your disposal with the Particles library.

4. Fullscreen BG GIF

I mentioned the fullscreen YouTube video background technique above which is a solid choice.

But if you want to use a custom animated GIF instead you take a look at this sweet example.

This pen runs entirely in CSS3, and with a bit of coding magic, you can scale any GIF to fit naturally into a header background.

This design specifically uses transparent colors to overlay the GIF, so it blends nicely into the layout’s color scheme, too.

5. Fancy Animated Particles

What I like most about this header design is the large combo of features.

The design sports three different design styles all mixed together:

• A background photo
• An overlay gradient
• Animated fizzy particles

Together, this creates a brilliant effect that’s sure to grab attention right on page load. The only trouble is actually editing the code to get this all set up and working properly.

6. Hero Panel w/ Video Background

From large hero headers to smaller heading styles, both can utilize this video background made with pure CSS3.

Actually, the video files are added directly into HTML, but they’re attached to HTML5 data attributes. This info can be pulled via CSS and used to embed custom animated backgrounds dynamically.

And there’s even more good news. Most browsers already support all of these features, so you’re not alienating a large chunk of your audience with this technique.

7. Responsive HTML5 Video Background

If you want to use jQuery for your embedded video header why not check out this pen created by developer Angus Russell.

It’s a brilliant example of the jQuery video BG plugin which you can get for free on GitHub.

But with this code at your fingertips, you’ll be able to copy/paste right into your layout and edit the design to suit your needs.

8. CSS Animated Header

I’ll be the first to say this animation is subtle. You really have to be looking for it to see it.

But with this pen you can design a very simple animated header with just a flat image file.

The image will automatically zoom in & out at a very slow pace. This feels reminiscent of classic parallax scrolling but with the bonus of not being tied to the user’s scroll behavior.

This means you’ll get the BG animation regardless of where you are in the heading section.

All of the codes are easy to set up, making this a simple choice for designers who want a mild animation effect.

9. Space In Motion

So this is one of the coolest background animations in this list, yet it’s also super specific in its design.

If your site could use a space-themed header then check out this animated background created by Jordan LaChance.

It uses a static background photo of space with a fractal-style webbing animation that follows your cursor around the page.

Note you would need quite a few JS dependencies(3 to be exact), but if you’re okay with adding some JS, then you’ll really enjoy using this header design on your own site.

10. Parallax Star BG

In a similar style as the spacey theme above you might also like this parallax star design put on CodePen by Saransh Sinha.

Again, this is free to mess with and add into your own page header if you wish.

Best of all, this runs on pure CSS so that you won’t be messing with JS dependencies.

All of these backgrounds offer totally different styles and match with different page headers. But if you know what you’re looking for, there’s a snippet in this list that you’ll love.

The post 10 Code Snippets For Creating Animated Headers & Video Backgrounds appeared first on Speckyboy Design Magazine.