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.

If you’re not a full-on expert just yet, you’re not alone. And there’s no reason to worry. There are plenty of great opportunities to learn. Some are completely free – perfect for the budget-conscious developer.

We took a trip around the internet to find some top resources for learning React. There’s something here for everyone, from beginners to those looking to dive even deeper into the library.

Intro to React

This official tutorial is aimed at absolute beginners (though they do recommend that you have at least some HTML and JS background). In it, you’ll go through the process of creating an interactive tic-tac-toe game. The guide is fairly quick to complete and provides plenty of help along the way. It’s a perfect introduction to the concepts of building a React app.

Learn React.js in 5 minutes

Need to learn the basics in a hurry? Per Harald Borgen’s guide will take you through the very basics in short order. These are the building blocks you’ll need to take things further. And, once you’re ready to move on, check out Per’s free “Building a chat app with React” course.

Learn ReactJS: Part I

Codeacademy’s React course offers a look at JSX, components and how to interact with them. You’ll find that both some basic and advanced concepts are covered. Note that the actual lessons here are free (you just need to sign up for an account). However, there are some “Pro” portions that take you through real-world projects and quizzes.

React for Beginners

Instructor Wes Bos offers two levels of premium React video courses. There is a total of 29 videos available, depending on which package you purchase. Either way, students receive free lifetime updates that will cover new techniques as they become available.

React 101

This free course is meant for intermediate learners who have at least some knowledge of how React works. During the course, you’ll build three unique components from scratch. Plus, there are lessons regarding data retrieval and localStorage.

Learn React By Itself

One of the more confusing aspects of React is that there are so many companion libraries. When starting out, trying to absorb it all can really lead to frustration. So, this free course includes nothing but React. And it’s entirely browser-based, meaning there are no further tools to install.

Learn React

KIRUPA offers a versatile free course that includes both video and text-based tutorials. So, no matter how you prefer to learn, you have a method for doing so. It covers all the basics, along with some more advanced use cases.

Learn React Track

This compilation of 8 React courses from Treehouse will take you through pretty much every aspect of the library. Start off with the React Basics course and work your way through to Building Applications with React and Redux. In all, it’s 10 hours of course material. These courses do require a paid Treehouse membership, however.

A Variety of Learning Avenues

React is a vast library, but the resources above provide you with plenty of choices. You can learn as much as you want and do so in a manner that is the most comfortable.

If you just need to know enough to get by, choose one of the super-fast tutorials. However, if you want to become an expert developer, there are more in-depth offerings as well. Choose the path that makes the most sense for you and your goals.

Either way, congratulations on furthering your education and best of luck!

The post 8 Fantastic Resources for Learning React.js appeared first on Speckyboy Design Magazine.

Its main purpose is to simplify the process of writing complex JavaScript functions by bundling them into methods that can be called with just one line of code. This makes it lightweight and easy to extend with free plugins for almost any functionality you can think of.

However, using jQuery also comes with some potential downsides, such as performance issues, added overhead, a learning curve, specific version dependencies, and compatibility with newer technologies.

Despite these drawbacks, jQuery can still be incredibly useful for legacy systems or specific projects, and it remains a popular choice for many developers. In fact, there are a vast number of jQuery plugins available that can help improve the functionality of your website or application.

In this collection, we share some of our favorite jQuery plugins that we believe can help take your web development projects to the next level.

The post The 50 Most Useful jQuery Plugins for Frontend Development appeared first on Speckyboy Design Magazine.

The hallmark of React is its ability to create highly-interactive, data-driven UIs that are also incredibly quick. They appear natural and seamless to the end-user, picking up where AJAX left off.

Developers are putting these capabilities to good use. They’re routinely taking everyday elements like shopping carts, forms and multimedia and propelling them to another level.

Want to see the impact React can have on a UI? Here are some prime examples that demonstrate what this library is capable of.

Squeaky-Clean Product Layout by Dilum

eCommerce can really benefit from what React has to offer. Just take a look at this fictional shoe store. Instead of using traditional form elements, it offers a modern and colorful UI. The result is that shoppers can customize their orders in style.

See the Pen React Shopping Layout by Dilum

Not Your Average Checkboxes by myleneb

Here, React is used to bring enhanced looks and a higher level of context to standard checkboxes. These elements stand out, while helping to guide users.

See the Pen ReactJS Checkbox component with custom CSS by myleneb

Git Your Profile Card by Simon Vrachliotis

We previously mentioned React’s ability to efficiently deal with data, and this is a perfect example. Type in your GitHub username and this snippet will quickly load in your profile. Likewise, this type of functionality could be used to vastly improve a website’s search feature.

See the Pen ReactJS:GitHub User Cards by Simon Vrachliotis

Form Conditions by Sasha

User registration forms can be a pain. How can you ensure that users are following the security guidelines you’ve set? This form is designed to help make those expectations crystal-clear. As guidelines are met, they are immediately crossed off the list displayed below the form.

See the Pen UI + React by Sasha

Easy Date Range by Rob Vermeer

Online calendars and date pickers tend to be a bit tedious. They’re often bogged down by a clumsy UI that makes it harder for users to interact with them. This date range picker, however, is a breath of fresh air. Click the first date within your desired range, then click the last. It’s that simple.

See the Pen React date range picker by Rob Vermeer

Goal Progress Charts by Kelly H

Visualizing data is one of the true strengths of React. To demonstrate, check out this incredibly slick savings goal progress chart snippet. It provides a clear visual representation of how close you are to your target. Not only that, it’s completely interactive. You can add to your total or even tweak the goals. The progress indicators automatically change along the way.

See the Pen Savings Goals – ReactJS by Kelly H

High-End Audio Player by Olga

This snippet goes above and beyond. Sure, it’s possible to throw a list of file links on your page. But why settle for that when you can go all-out with a gorgeous React audio player? Its intuitive UI is the perfect way to get your visitors to tune in.

See the Pen Music player ReactJS by Olga

Interactive Service Price List by Olga

Here’s a great way to simplify an interface. This service listing allows users to add/remove items with a click and watch their total update immediately. The experience just seems so natural.

See the Pen React Price List by Olga

Adding Speed and Interactivity with React

The common thread among these snippets is how they take everyday web UIs and turn them into something better. Even if the visual elements were already in place, React makes the experience more pleasant for users.

The result is a snappy interface that just works. And by increasing the intuitiveness of an element, you might also increase conversions. That’s a pretty powerful thing.

If you’d like to see more examples of React in action, check out our CodePen collection.

The post 8 React JavaScript Snippets That Enhance Everyday UI Elements 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.

And since designers know the web better than anyone, we tend to build blogs and write about our experiences, hopes, fears, and even biases more than other professions. Virtually every subject can be promoted, explained, or outright dismissed.

But as a designer, how does one even begin to digest all of the tools, libraries, and opinions out there? Sometimes it feels like there are so many things we need to learn to keep moving forward. You may not know where to begin. Frankly, it’s overwhelming.

To that end, here are some tips for filtering out the noise and focusing on the good stuff.

You Don’t Have to Know It All

When you see the headlines about some great new tool or JavaScript library, you might start to feel like you’re falling behind your peers. After all, you just found out that there’s this amazing thing being used to reinvent the web. Meanwhile, you’re still poking around with “outdated” techniques.

The irony of it all is that many of these tried-and-true techniques have been around for quite some time. That new flavor of the month might disappear before you’ve even had a chance to learn it. Of course, there’s always a chance that it will become a huge success. But the point is that it’s okay to wait things out and see how it all develops.

For instance, have you ever worked with some must-have tool and implemented it into a project, only to find some fatal flaw that makes it unusable? I’ve had it happen more than a few times. I can even recall an instance where I pointed out such an issue to its developer, who said, “Wow, thanks!” – only to leave the problem unfixed.

As always, you have to be careful when choosing what to use and what to leave behind. Just because a tool is generating buzz doesn’t mean you’re obligated to try it.

Realize That Opinions Aren’t Always Based on Fact

I don’t think I’m alone in saying that I love to share my opinions. If you’ve ever seen my Twitter feed, you probably get that message loud and clear. And a well-written opinion can serve as a valuable resource when making decisions on anything from which car you should buy to which WordPress plugin is worth installing.

But they should also be taken with that proverbial grain of salt. While I’d like to think that most people are pretty honest when sharing their thoughts, there are a variety of reasons why someone may love or hate a particular thing. The hard part for those of us who read these opinions is that the author’s reasoning may not always be so clear.

Did they love a product because it works or because they’re friends with the developer? Did they hate something because they had a bad experience or just didn’t know what they were doing? So often it’s difficult to tell.

Opinions can be both insightful and fun to read. But we probably shouldn’t take them as the final word. If we’re interested in finding out more, we should research or even try the item in question for ourselves.

Look for What’s Relevant and Useful

As a designer, your social media feeds and inbox can be inundated with tools, tutorials, and product announcements. Keeping track of it all certainly isn’t for the faint of heart. And even if something looks cool, you may not have the time to sit there and read through each item.

This is where being picky can help. The truth is that you probably aren’t going to use most of whatever fills up your feed. Instead, look for items that you think are useful for your specific workflow.

That means if you’re a WordPress developer, you can probably filter out most of the Drupal or Joomla stuff (unless you want to learn about them). If you’re exclusively a front-end designer, then code frameworks may not be very relevant.

You only have so much time in a day. As such, dedicate it to the things that will help you improve your skills and efficiency.

Tune Out When You Can

Like so many people in our world, designers tend to keep their phones with them at all times. And our jobs often require constant vigilance. Websites break, clients have questions, and so on.

Just having that smartphone in hand is a great temptation to start scrolling through feeds and checking email. It’s yet another opportunity for information overload.

It’s healthy to take breaks from it whenever possible. Even shutting yourself off from the online world for an hour or two before bed can make a positive impact.

Otherwise, you risk becoming burned out on technology. That would be a shame because there’s always something new to learn – if you know how to filter through the junk.

The post Sifting Through Design Information Overload 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.

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.