We searched high and low for some of the coolest React components out there to help you create a top-notch interface. Here are some of our favorites:

UI-Router for React

UI-Router for React provides state-based routing for apps. For example, rather than creating a traditional website, this component makes it easy to navigate through various states of a React application with each “page” having its own content. As the user navigates, the app changes the browser’s URL – allowing users to bookmark specific pages. The result is an application that is easy to navigate and ultra-quick.

React-Bootstrap

React-Bootstrap combines two powerful frameworks to create a library of reusable front-end components. You’ll get the look of a Bootstrap site without all the repetitive code. That’s because this library allows JavaScript to take over page rendering, rather than HTML and CSS. Note that this package isn’t at version 1.0 as of this writing, but you can see the incredible potential for advanced development.

Material-UI

Looking to use Google’s Material Design in conjunction with React? Material-UI is a set of React components that will do just that. You’ll find a wide array of useful components like App Bars, Auto Complete, Badges, Buttons, Cards, Dialog Boxes, Icons, Menus, Sliders and more that are written in React – but using Material Design principles.

Gatsby.js

With Gatsby.js, you’ll be able to build static websites using React. The library allows you to pull in data from various sources like your favorite CMS, API, database or even a file system. Sites can be generated through the command line or other “starter” packages to help speed along the process.

styled-components

styled-components allows you to style React components using real CSS code. It removes the mapping between components and styling, which makes the entire process much more straightforward.

React Sketch.app

Using React Sketch.app enables the creation of reusable documents that use React components within Sketch. It was built by Airbnb to help manage their design system and allows for the use of real React components in your designs. This is a really powerful tool that helps you build better prototypes.

React Virtualized

React Virtualized helps render long-scrolling lists and tables in an attractive and highly-customizable fashion. Set a fixed or dynamic row height, allow users to scroll to specific rows and display placeholders as scrolling takes place.

Blueprint

Blueprint is a UI kit that includes a collection of React components covering common interface elements. These are the basic elements that every application needs – like buttons, icons, and various navigation systems. Styling is done through Sass, so you’ll be able to customize elements as desired. The components have also been created with accessibility in mind and will work with keyboard navigation.

Recharts

Recharts is a charting library that allows you to quickly build charts with reusable React components. It’s built using SVG elements, so it scales beautifully on any device. Virtually any type of chart is possible, including various forms of line, bar, pie and scatter charts.

React DnD

With React DnD, you can create complex drag-and-drop interfaces using React components. Data can be transferred based on drag-and-drop events and components can change their look based upon their state. You can highlight specific targets for events to help make a friendlier UI.

The Future of UI?

React, and other similar libraries are indeed looking like the future of both web and native app UI. In fact, it’s been heavily talked about with regards to its use in WordPress (like the Calypso app). The ability to create single-page apps that, ahem, react instantly to user interaction may someday soon become the standard.

We encourage you to take a look at React and the tools highlighted above. Experiment with them and see how they might fit into your own design future.

The post 10 Useful Components, Libraries & Tools for React.js appeared first on Speckyboy Design Magazine.

With the assistance of some outstanding frameworks and libraries, you can achieve several exciting typography effects. Below is a collection of our favorites.

baffle.js

baffle.js adds an interesting “obfuscate and reveal” effect to the desired text. At first glance, the text appears scrambled. An animated sequence then systematically reveals the text string. There are a number of decorative uses, but it seems like an awesome basis for a word-scramble game.

Fitty

One trend we see in web typography is enabling text to automatically resize to fit into its parent container. Fitty is a tiny script that adds this functionality to your website. It supports web fonts and multiline text. The script will also automatically adjust as the user’s viewport changes.

Textillate.js

Textillate.js combines two popular text animation libraries (animate.css and lettering.js) to create one super-powerful collection of text effects. Virtually any type of animation you’re after is possible in one easy-to-use jQuery plugin.

React Text Gradient

Add beautiful text gradients to your site with React Text Gradient. This React component will check to see if background-clip is available. If so, a gradient is applied with CSS. Otherwise, an SVG gradient is used as a fallback.

jQuery.auto-text-rotating

jQuery.auto-text-rotating isn’t the smoothest name – but this jQuery plugin is pretty darn cool. You can replace text in a string with multiple animation effects available. You’ll also be able to change multiple words within the same line if desired.

ShareSelectedText.js

Using ShareSelectedText.js brings Medium-style text quote sharing to any website. All a user needs to do is select some text, and an icon menu appears – allowing for sharing on whichever supported services (Facebook, Twitter, Reddit, Linked In, Tumblr, and more) you like. It’s very handy for letting users share parts of your content that are most important to them.

React Reveal Text

React Reveal Text is a small library that reveals text with animation. It uses CSS transitions, which means it’s rather simple to configure. And it can be styled just like any other element on your website. This could be a very useful effect for a hero banner or landing page intro.

Lettering.js

Lettering.js is a jQuery plugin that allows for control on a per-letter basis. It’s pretty simple. Call the script and define a CSS class or ID that corresponds with the text you want to alter. Each letter within that defined class becomes a HTML span with a class of its own. Use CSS to style each letter to the max!

text-balancer

Text-balancer was developed by the New York Times, and the aim of this simple script is to remove typographic widows from your content. You can run the script just on specific CSS selectors or by using the .balance-text class.

Typed.js

Typed.js takes text strings and “types” them in the browser, deletes them, and moves on to the next string. It’s quite simple to use and is a great way to tell a story. You can set up any number of text strings (in the script itself or through the use of CSS selectors) and the speed at which they’re typed, along with several handy options.

It’s Your Type

Through the power of scripts like the ones featured above, web typography can go well beyond the typical. We can now exercise complete control over how the text looks and functions. Regarding looks, special effects that used to be the realm of print graphics are now fairly simple to replicate on the web. Functionality is boosted by tools that enable designers to create a better, friendlier UX.

For your next project, please take a moment to imagine how you can better implement typography to enhance it. Then, please take advantage of one of these amazing tools to make it happen.

The post 10 Popular Web Typography Frameworks & Libraries appeared first on Speckyboy Design Magazine.

In this article, we’ve curated a selection of powerful, reliable, and easy-to-use form validation plugins that can make your life much easier. Whether you’re building a simple contact form or a complex multi-step checkout process, these plugins offer a range of features and customization options to fit your specific needs.

So, if you’re tired of struggling with form validation, check out these plugins and libraries and see how they can streamline your workflow and improve the user experience on your website or application.

Parsley.js

Parsley.js is a lightweight and feature-rich form validation library that offers a unique approach to form validation. Instead of validating forms with JavaScript, it uses data attributes embedded in the DOM to achieve the same function.

This makes it easy to configure and highly customizable, with the ability to override almost every default behavior to fit your specific form requirements.

quickValidation.js

QuickValidation.js is a form validation library that operates similarly to Parsley.js above. It uses a data-validate attribute in the input tag to assign validation rules, rather than defining them in the JavaScript code.

For example, you can string together rules like required,number, or range=0-99, and then add the .quickValidate class and a data-name attribute to name your field for errors.

jQuery Ketchup Plugin

Ketchup is a lightweight form validation plugin that comes bundled with 18 basic validations and allows you to quickly write your own validations and override default behaviors. With a minified size of only 3.4KB, it’s a lightweight plugin for validating your forms.

The plugin checks a form field’s data-validate attribute by default to find matching validations. Validations are separated by commas and can be grouped together within a single validate() indicator. Additionally, validations can have arguments, which are also separated by commas.

jQuery Validation Plugin

jQuery Validation is a user-friendly plugin that simplifies client-side form validation. With a “drop-in” installation process, it’s easy to use the plugin on your website or application. The plugin comes bundled with a useful set of validation methods and provides an API to allow for custom validations.

To use the plugin, you simply need to add a single line of jQuery to select the form and apply the plugin, along with annotations on each element to specify the validation rules. This makes it quick and easy to implement form validation and ensure that user input is accurate and complete.

IV.js – Javascript Input Validation

IV.js is a jQuery library that simplifies the process of validating user input and working with validation filters. To use IV.js, simply add the IValidate class to your form, and you’re ready to start validating user input.

FormValidation

The FormValidation library offers extensive support for various input types and validation rules, such as required fields, email validation, phone number validation, credit card validation, and more. The library also provides real-time feedback to users while they are filling out the form, indicating whether their input is valid or not.

It also provides seamless integrations with popular front-end frameworks such as Bootstrap, Foundation, Materialize, and Semantic UI. This integration feature ensures consistency in user interfaces and makes it easy for developers to add the form validation library to their existing codebase.

Guardian

Guardian is a versatile jQuery plugin designed to provide robust and customizable form validation. It offers flexibility and extensibility, allowing developers to tailor the validation rules to meet specific project needs.

Validatr

Validatr is a powerful JavaScript library that leverages HTML5 input attributes to provide comprehensive form validation. It supports various input types, including color, date, email, number, and range, and provides flexible validation rules for the input types text, checkbox, and radio.

The library uses native validation wherever possible, using Modernizr to test for browser support. When a specific input type is not natively supported, Validatr uses its own ruleset to supplement the validation process. Regardless of the input type, the validation message is displayed to the user, providing clear feedback on any validation errors.

Formance.js

Formance.js a powerful library that provides formatting and validation for form fields, inspired by the popular jQuery.payment library from Stripe. The library is designed to offer comprehensive support for various input types and validation rules, ensuring a smooth and reliable user experience.

While client-side validation can be bypassed, it still plays an essential role in enhancing the user experience. With this library, you can take advantage of client-side validation to improve the quality of user inputs and reduce the number of errors submitted.

jQuery Validate

jQuery Validate is a versatile jQuery plugin designed to make form validation easy and efficient using data attributes. With this plugin, developers can easily set up validation rules for various form inputs, including required fields, email addresses, phone numbers, and more.

jQuery Form Validate

jQuery Form Validate is a powerful jQuery plugin designed to simplify and streamline the form validation process. With this plugin, developers can quickly and easily validate HTML forms by utilizing HTML5 data attributes applied to each input.

One-Validation

One-Validation is a comprehensive library of regular expressions designed for general validation purposes. With this library, developers can easily validate various input types, including email addresses, phone numbers, URLs, and more, using the power of regular expressions.

Validarium

Validarium is a simple and easy-to-use jQuery validation plugin that builds on the powerful jQuery Validate library. With Validarium, developers can quickly and efficiently validate form inputs using various validation rules, including required fields, email addresses, phone numbers, and more.

Validate Barebones Validation

Validate Barebones Validation is a powerful and versatile jQuery validation plugin designed to provide a customizable and extendable solution for form validation. As the name suggests, this plugin offers a barebones framework for developers to build upon, allowing for maximum flexibility and customization.

The post 15 Form Validation jQuery Plugins & Libraries appeared first on Speckyboy Design Magazine.

The venerable JavaScript library first debuted in 2006 and (as of this writing) is used by over three-quarters of all websites. Both its success and longevity are something to behold.

Yet, it’s also the target of a lot of online vitriol. In some circles, developers are loathed to give jQuery its due – instead focusing on the latest buzzworthy libraries.

This is understandable, as junior competitors like Vue and React have a lot of exciting features – if nowhere near the number of users. People naturally want to talk about what’s new. Established products that just keep chugging along don’t generate the same level of fanaticism.

But that doesn’t mean we should ignore jQuery altogether. It’s made a massive impact on the web and is still useful today. Join me as I take a look back at the library’s past and what the future may hold.

Bringing Cross-Browser DOM Manipulation and Effects to the Masses

Before jQuery came along, the ability to implement JavaScript with cross-browser support was difficult. In addition, the concept of using CSS for advanced effects like animation wasn’t fully realized yet. Thus, part of the library’s aim was to ensure that tasks like event handling and DOM (Document Object Model) manipulation would work on a variety of system configurations.

And you didn’t need to be a JavaScript expert to use it. Even a little bit of background knowledge would empower a developer to, say, add or remove CSS classes from an element based on user interaction. The documentation offered up many useful code examples that could be modified to fit a particular need.

It also allowed for the implementation of advanced UI elements, with the help of jQuery UI. Features such as accordions, date pickers, and tabbed interfaces were built right into the project. They could also be styled via CSS or a custom theme. And its architecture also allowed for custom plugins to be built as well.

In other words, it brought consistency to an otherwise inconsistent area of development and was fairly easy to use. This made jQuery an attractive option for developers looking to add JavaScript to their projects.

The library has been used by all manner of different products. For example, it has been bundled with WordPress for several years now. And, with WordPress powering over 40% of all websites, that has undoubtedly boosted the usage numbers for jQuery as well.

In all, the ability to work with the sheer variety of browsers and devices out there made jQuery a safe, reliable choice for developers.

The Criticisms

There’s no such thing as a perfect tool. Everything web designers use has its flaws and shortcomings. jQuery is no different.

Over the years, the library has endured a lot of criticism. And plenty of fair points have been raised. Here are a few that stand out:

jQuery Is No Longer Necessary

As we mentioned, jQuery initially provided cover to developers who wanted to bring advanced features to their projects without having to worry about compatibility. Well, there are now more options for doing so.

CSS, in particular, can replace jQuery in many instances. Elements like animation, for example, can be crafted without the need for a third-party dependency. It’s a native solution that can take advantage of hardware acceleration. The result is lightning-quick performance without the overhead.

In addition, vanilla JavaScript has also come a long way since the early days of jQuery. With wide browser support, developers can be more confident in what they build with it.

jQuery Is Inefficient/Antiquated

When a project has been around for 15+ years, there are bound to be some inefficiencies. However, it’s worth noting that the version of jQuery your project utilizes can make a significant difference.

Consider the case of WordPress. Through several versions of the content management system (CMS), jQuery 1.1.x was bundled. These legacy releases were kept in part to maintain backward compatibility with themes and plugins.

The last of these, jQuery 1.12.4, was released in 2016. Not until WordPress 5.6 (released in 2020) did the more modern jQuery 3.5.1 make its way into core.

If you’re still stuck with those older versions, performance can definitely suffer. But, in my own testing, sites running later jQuery releases seem to perform significantly better in Google PageSpeed Insights. Of course, your experience may vary.

That’s not to say jQuery is always going to be the most efficient solution. Still, progress has been made in this area.

A Look at the Future

For all the criticism, it doesn’t look like jQuery is going away anytime soon. Part of that is due to the massive number of products that depend on it.

For instance, separating it from WordPress core would be a monumental task. And that’s not even counting the number of themes and plugins that also use the library. Even a highly coordinated effort to sever ties would likely take years.

The other thing to note is that jQuery is still in active development. There’s been an effort to bring it up to speed with the modern web. Recent releases have improved performance and fixed bugs.

In addition, the project has placed its focus squarely on jQuery core. Both the jQuery UI and jQuery Mobile projects are winding down, freeing up resources for the core revamp. The content delivery network (CDN) that hosts the project’s code is also being fortified.

The upshot is that jQuery is still improving and therefore continues to be an option for web designers.

Should You Still Use jQuery?

Admittedly, I’m not a hardcore JavaScript developer. I can’t tell you the best library for your project, or whether you should use a library at all. These are very much personal decisions, based on preference and need.

If you’re comfortable using jQuery, you can be confident that the library will still work and receive updates. Frankly, that should be enough of a reason to carry on using it.

As far as what other developers may think – haters are gonna hate. But don’t let that stop you from using the tools you enjoy and trust. For more than a decade, jQuery has earned it.

The post Despite Its Critics, jQuery Forges Ahead appeared first on Speckyboy Design Magazine.

Now in existence for over 10 years, the self-described “front-end open source toolkit” is used on over 22% of all websites. And we see it included everywhere from customized UI kits to WordPress themes.

Why has Bootstrap been able to reach such heights? For one, it comes packed with virtually everything designers need to craft a clean, responsive UI. Plus, the fact that it continues to be actively developed and evolve means that web professionals can reliably come back to it again and again.

With a decade under its belt, this is a good time to look at the overall impact Bootstrap has had on the web. Has it been a blessing, curse, or somewhere in-between?

A Tool for Rapidly Implementing an Established Look and Feel

The biggest advantage Bootstrap provides is the ability to implement an established look and feel. Right out of the box, you have a set of UI elements and components that cover just about every use case. It doesn’t matter if you’re selling t-shirts or blogging about your favorite video games – the framework gives you a massive head start on the design.

In addition, Bootstrap is extensible. It’s built with customization in mind, making it a fairly straightforward process to change various components to meet your needs. Creating your own components is also possible.

That goes beyond individuals performing one-off tweaks for a specific project. It also extends to theme developers. They can leverage the framework to bring a familiar front-end UI to content management systems (CMS).

Yet, customization is still optional. If your goal is to design and deploy a project quickly, just installing Bootstrap (or an offshoot UI kit) and familiarizing yourself with its contents is all you need.

This level of convenience and flexibility has undoubtedly played a large role in Bootstrap’s enduring popularity.

The Bootstrapping of the Web

Bootstrap does its intended job quite well. Perhaps a little too well.

As we mentioned, the usage statistics point to nearly a quarter of all websites utilizing the framework. When a UI is so widespread, it’s bound to lead to some sameness when it comes to design.

Much like the early days of the CMS, it’s often easy for the trained eye to pick out elements of Bootstrap within a website. You start to notice the same buttons, navigation styles, and pricing tables. Even sites that don’t use it may well attempt to duplicate certain aspects of the look.

To be sure, it’s generally clean, accessible, and easy to read. While that can be considered a good thing, there’s also a bit of a downside. And it isn’t necessarily an issue with Bootstrap itself.

Rather, it’s about designers either accepting its default styles or changing them only minimally. The result is a web that is becoming increasingly homogeneous.

Inspiring a New Category of Frameworks

Perhaps it’s a testament to how well put together Bootstrap is. There aren’t a bunch of shortcomings that need fixed. Everything works as intended right from the start.

With that, some designers may not feel the need to radically change anything. One could even argue that it goes against the very point of the framework in the first place.

Unlike a lot of tools aimed at the web design community, Bootstrap has a universal appeal. There is no particular niche that it can’t fit into. That’s a key to its massive adoption rate. And it has inspired an entire category of CSS and JavaScript frameworks.

Other worthy competitors have popped up in recent years, such as Tailwind CSS. It has a similar appeal. However, it differs in that it’s more “utility” based. The various elements are all there, but depend on the designer to customize them to fit a need.

Bootstrap is unabashedly opinionated in its design. Tailwind CSS goes in the opposite direction. If anything, this provides designers with two great options, depending on their own preferences.

Design from the ground up or implement a completely polished UI – the choice is yours.

A Behind-the-Scenes Powerhouse

Maybe the most impressive aspect of Bootstrap’s 10-year rise is that it’s a completely developer-focused tool. That is, you interact with its code and view the results on the front end. That’s opposed to, say, WordPress, where users create content and install custom functionality via a back-end dashboard.

The framework is generally of interest to professionals. Thus, it relies on web designers for growth. It doesn’t have the same public-facing profile of a CMS.

That says a lot about what Bootstrap has done right over the past decade. To win over a sizeable portion of this industry is no small task. To maintain it and continue to grow for this long is even more telling.

What will the future bring? We don’t have all the answers. But, whatever happens, it’s likely Bootstrap will still play a significant role in web design for years to come.

The post Bootstrap Turns 10: A Look at Its Impact on the Web appeared first on Speckyboy Design Magazine.

As you would expect, there are plugins below for creating sliders, image galleries, responsive menus, modal windows, and many other common components. But you will also find plugins that offer truly unique functionality, like sidebar margin notes, GIF previews, animated favicons, and much, much more.

You might also like to take a look at our collection of free jQuery plugins, or our collections of JavaScript Cheatsheets.

Textblock

Textblock – A JavaScript tool for displaying continuously responsive typography.

Uppy

Uppy – A sleek, modular file uploader that integrates with any website or app.

Tone.js

Tone.js – A framework for creating interactive music in the browser.

Editor.js

Editor.js – A free, next generation block editor app.

lax.js

lax.js – A small, vanilla JavaScript plugin for creating smooth scrolling animations.

TypeIt

TypeIt – A JavaScript typing library that is billed as the “world’s most versatile”.

iro.js

iro.js – A modern HSV color picker widget for JavaScript that uses SVG.

Cleave.js

Cleave.js – A library for adding real-time formatting to form inputs.

Freezeframe.js

Freezeframe.js – A library that pauses animated .gifs and enables them on hover, click or touch.

darkmode.js

darkmode.js – Add a dark mode to your website with minimal effort.

Scene.js

Scene.js – A CSS and JavaScript timeline-based animation library.

Bun.js

Bun.js – Generate custom checkboxes and radio buttons with CSS.

Overlay Scrollbars

Overlay Scrollbars – A JavaScript plugin that hides native scroll bars and replaces them with custom-styled versions.

MailtoUI

MailtoUI – A script that adds a helpful UI component to standard email links.

FullScreen Slider

FullScreen Slider – Control page sections and enable navigation via mouse wheel and touch events.

pagemap

pagemap – Add a small “mini map” to your website that will provide users with navigational context.

Chart.xkcd

Chart.xkcd – A library for creating charts with a hand-drawn look.

GPickr

GPickr – An implementation of the Pickr color picker library that generates beautiful gradients.

Moveable

Moveable – A JavaScript library that lets you move, resize, drag, rotate and more.

Cube.js

Cube.js – A complete open source analytics solution: visualization agnostic frontend SDKs and API backed by analytical server infrastructure.

simpleParallax

simpleParallax – A tiny JavaScript library that adds parallax animation to any image.

Bounds.js

Bounds.js – A script for asynchronous boundary detection that can be used for effects such as lazy loading.

Creepyface

Creepyface – A JavaScript library that makes your face “look” at the cursor, based on position.

LegraJS

LegraJS – A library that enables you to draw with LEGO-like bricks. What will you build?

Paged.js

Paged.js – is an open-source library for paginating content in the browser. Based on the W3C specifications, it’s a sort of polyfill for Paged Media and Generated Content for Paged Media CSS modules.

Focus Overlay

Focus Overlay – A library for creating overlays on focused elements. Beautiful design and better accessibility.

Flowy

Flowy – A minimal JavaScript library you can use to create flowcharts.

Choreographer-js

Choreographer-js is a simple library to take care of complicated animations.

Leaflet.js

Leaflet.js is a JavaScript library for interactive maps.

Lory

Lory is a touch enabled minimalistic slider written in vanilla JavaScript.

CurrencyFormatter.js

CurrencyFormatter.js is a super simple currency formatting library (155 currencies & 7KB gzipped).

ARc

ARc (Atomic React) is a React app boilerplate with Atomic Design approach.

Shave.js

Shave.js is a modern JavaScript plugin for truncating text within an html element.

Next.js

Next.js is a minimalistic framework for server-rendered React applications.

Blueprint

Blueprint is a collection of React UI components, covering common interface elements, patterns and interactions on the web.

baguetteBox.js

baguetteBox.js is a simple and easy to use responsive image lightbox script with swipe gesture support on mobile devices. it has been written in pure JavaScript.

ScrollReveal

The ScrollReveal plugin makes it super-easy to create web page scroll animations for both desktop and mobile browsers.

Loud Links

Loud Links is a lightweight JavaScript library for adding interaction sounds to your website. It does this by creating an HTML5 audio element and using it to play MP3 or OGG audio files.

Bricks.js

Bricks.js is a ‘blazing fast’ masonry layout generator for fixed width elements.

MediumEditor

Written using vanilla JavaScript, MediumEditor is a lightweight (28kb) Medium.com WYSIWYG inline editor toolbar clone. There are also a selection of Mediumditor extensions and themes available.

Substance

Substance is a JavaScript library for web-based content editing. It gives you all of the tools you need for creating custom text editors and web-based publishing systems.

List.js

List.js is a lightweight and fast vanilla JavaScript script that adds search, sort, filters and flexibility to lists, tables, or anything HTML.

Popper.js

Popper.js is a lightweight (4kb minified) library for managing poppers, tooltips and popovers. You can quickly and easily position tooltips with just a single line code.

InlineTweet.js

InlineTweet.js allows you to easily create tweetable links out of any text on a webpage. All you have to do is wrap the tweetable text in a container with data-inline-tweet.

SweetAlert2

SweetAlert2 is a beautiful and customizable replacement for JavaScript's popup boxes.

Force.js

Force.js is a JavaScript library that makes it simple to animate HTML elements and navigate around a web page.

Push.js

Push.js is a cross-browser solution for getting up and running with Javascript desktop notifications.

Bideo.js

Bideo.js is a JavaScript library that makes it very easy to add fullscreen background videos to web pages.

Microlight.js

Microlight.js is a lightweight code highlighting library, for any programming language, that greatly improves readability.

Algolia Places

Algolia Places is an easy way to use an address search autocomplete JavaScript library on your website.

flatpickr

Written in vanilla JavaScript, flatpickr is lightweight datetimepicker and calendar solution.

anime.js

anime.js is a flexible and lightweight JavaScript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.

Cleave.js

Cleave.js is a plugin that formats your <input/> content while you type.

Lightgallery.js

Lightgallery.js is a fully featured JavaScript lightbox gallery with no dependencies.

The post Top 50 Free JavaScript Plugins & Libraries 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.

You can implement Vue incrementally and it has the ability to work in conjunction with other libraries. There’s a high level of flexibility here that opens up a world of possibilities.

In order to show you what this open source framework is capable of, we looked far and wide into the archives of CodePen. Here are some of the more powerful and interesting uses we found.

Drag and Draw

This snippet shows Vue’s ability to create an interactive UI that goes beyond just your normal button-clicking. Simply drag your cursor around the screen and see your drawings appear – then fade into nothing. You have tons of color choices, or go all-out with the “Psycho” mode.

See the Pen Vue Water Drawing Pad by Daniel Ormeno.

Chart a Path

Charts and graphs are a terrific place to leverage a JavaScript framework. Here, Vue provides the opportunity to interact with the data – not to mention a slick animation to grab a user’s attention.

See the Pen vue-highcharts demo – Access `chart` instance via refs by Zhenye Wei.

A Vue of the Past

When you have a tool that will help you build just about any type of UI, why not go retro? This Windows 98-like screen is pretty faithful to the original. Click the “Start” button and a small menu appears. Click on “Settings” and you can change features such as the background and even the clock display. Now, if it could just recreate the vaunted BSoD…

See the Pen Vindue 98 by Miles Manners).

Time for a Quick Chat?

While the examples above were fairly narrow in their scope, here we have a full-blown chat application. To try it out, create an “account” (please, no passwords that you use elsewhere) and you’ll be taken to a page where, yes, you can really chat and see a list of online users. It goes to show that you can build something as in-depth as you like.

See the Pen Vue + Firebase Message App V2 by Mike Weaver.

A Better Way to Search

Perhaps the best reason to use a tool like Vue is to improve the user experience. All the fancy animations and transitions in the world mean nothing if your interface is too difficult to use. That’s what makes this Wikipedia search UI so great. It not only looks awesome, but it brings a sophisticated search capability that is also easy to navigate.

See the Pen Wikipedia Morphing Search by Rian Pauzi.

Virtual Trading Cards

Odds are, you probably purchased a pack of trading cards at some point during your childhood. Whether it was for your favorite sport (such as the fictional baseball cards in this pen) or game, these little bits of cardboard brought you closer to what you love. Here, we have a set of Vue-powered virtual cards that can be flipped over so that you can check out some interactive stats. There is also a neat search feature included.

See the Pen Digital baseball cards for fictional players by Kyle.

Mail Call

Here’s an example of how Vue is able to work with other frameworks and libraries. This slick mail app leverages the magic of GSAP to provide some outstanding special effects. You can click around to view messages, write a message of your own or hit the settings icon and change the theme.

See the Pen Mail app w/ Vue + GSAP ✉️😎 #CodePenChallenge by Jhey.

You’ll Sort It Out

When you have a large amount of tabular data, it can be difficult for users to pick out the information they need. One way to simplify the process is to allow the data to be sorted and filtered in various ways. That’s exactly what this table of top-grossing films does. You can sort the listing by column and a search feature lets you instantly find a specific item. This is how code can help to solve problems.

See the Pen Top grossing films Vue table by Andrea Goodson.

Building a Better UI (and Beyond)

Frameworks like Vue, or its counterpart React, allow us to implement some powerful form and function into our projects. The idea is to combine a fast, user-friendly interface with the ability for users to easily interact with it. In other words, it’s about providing a more app-like experience.

And it seems like we’re only starting to scratch the surface of what’s possible. It’s easy to see why many consider these interfaces as the future of the web.

The post Snippets That Demonstrate the Power of Vue.js appeared first on Speckyboy Design Magazine.

This article recommends that you take a stepped approach and makes some suggestions on how to do that. So let’s get started!

1. Learn an MVC Framework for your own language

Learning the MVC pattern is quite a daunting task, never mind learning a new language and a framework at the same time. Learning a framework that applies to the language you currently program in can ease this learning curve.

For instance, if you’re a PHP developer, why not try learning CakePHP first or if you’re a Python developer, you could try learning Django. Once you get use to how the MVC pattern works it makes moving to another MVC-based framework much easier.

2. Learn Ruby Language

Invest some time in learning, at least the basics of, the Ruby language. Ruby is a really nice language, and you’ll be a better developer for learning it.
Ruby is a fully capable object-oriented language with some superb advanced features.

3. Buy a book

There’s something about having a new book that makes you just want to read it. Maybe it’s because you spent a lot of money on it, and you feel obligated!

Reading small articles on the internet can give a fragmented view of how Ruby on Rails is tied together. And yes, I know this is a bit ironic, considering this is an internet article.

However, I’m not saying internet articles are wrong, just that they should be used in conjunction with some sort of consolidated reference material, like a book.

4. Install Rails and play with it

I can’t recommend this enough. Reading all the books in the world is nothing compared to actually making use of Rails.

Practical work seems to embed concepts, more deeply, into your brain. Using books and practical work in conjunction with each other is much more productive for learning than either alone. Install Rails and get started!

5. Get Motivated

There are plenty of things to get excited about with Rails. Database agnosticism, separation of business logic from view logic, convention over configuration, a built-in web server… I could go on. Finding out about these exciting things will motivate you to learn Rails.

6. Suggest that your workplace uses Rails

This might be a hard one… but it’s worth a go. If you make your boss aware of the advantages of Rails then she, at least, might consider it. Some companies are scared of open source technology because they think it is risky.

This, of course, is absurd, but you will have to be prepared for any doubts they have. Have an answer ready for anything they throw at you. If you don’t get anywhere, forget it – let them waste their money on an inferior framework.

7. Give yourself a Task

Creating a website like a blog is extremely useful for learning the concepts of Rails and the Ruby language.

I did exactly this, and it has been great for speeding up the learning process. Plus at the end of it, you will have a fully working blog which you can make good use of, blogging about what you’ve learned.

The post Seven Practical Tips to Getting Started With Ruby on Rails appeared first on Speckyboy Design Magazine.