Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.
A jQuery plugin for creating autocomplete input fields. The library utilizes HTML5’s <datalist>, allowing devs to easily organize all the possible select values and their properties. It works well with multiple selections, has a clear UI, and is really easy to implement.
Siema is a 1kb JavaScript carousel plugin with no dependencies and no styling. This makes it extremely easy to set up and customize, since there is almost nothing to get in your way. The carousel effect itself is very smooth and the widget has support for touch gestures.
LoadJS is a tiny library for loading CSS and JavaScript dependencies asynchronously. It allows you to fetch multiple resources in parallel and provides a simple callback syntax for executing code once everything has finished loading. Only 710 bytes when minified and gzipped.
Modern CSS framework that provides tons of features, while managing to stay lightweight thanks to it’s modular architecture. The core of Consise has only basic styles for the native HTML elements, while various utilities and components can be included in the form of add-ons.
Lightweight plugin for Vue.js that enables developers to easily validate all the data in the model. It provides a number of built-in validations such as required and minLength, and also supports custom validators. The library is compatible with Vue.js 2.0 and has no other external dependencies.
Inferno is probably the fastest JavaScript UI library right now. It borrows heavily from React’s syntax and coding style, but is packed in a much slimmer and more performant package. Even if you don’t plan on using Inferno, go and check out it’s description and source code on GitHub – lot’s of JavaScript wisdom can be found there.
CSS driven, highly customizable JavaScript library for doing animation on scroll effects. The library is very tiny, easy to use (install via CDN), and most importantly performs well, which can be an issue with other animate on scroll libraries.
This cool library takes the position and direction velocity of the cursor, and tries to predict which DOM element the user is going to interact with next. Although not very precise, Premonsih is really fun to play around with, thanks to it’s straightforward API that let’s you set it up in no time.
Date-fns is the most advanced JavaScript library for working with dates and time. It provides over 140 useful functions, all accessible through a simple API, and organized in a modular fashion, allowing you to pick only what you need.
Tiny JavaScript library for adding smooth pull-to-refresh effects to your mobile web apps. It doesn’t require any external dependencies and doesn’t add any extra HTML markup, you just need to use the simple JavaScript API and set it up the way you like.
Node.js library that lets you monitor the size of your projects and find out exactly which modules add the most weight. The GitHub homepage of the project also has some great tips on how to minimize unnecessary bloat and bring down the size of your npm packages.
A collection of utility functions for working with strings in JavaScript. Like many of the libraries in this list, Voca follows the trend of modularity, allowing developers to pick and choose which parts they need, and what can be left out.
UI framework for Vue.js 2 that makes building applications with Vue even easier, with the help of clean, semantic and reusable components. Style-wise Vuetify follows Google’s popular Material Design language for the components, and provides a standard 12-column responsive grid for doing layouts.
CSS library for creating beautiful buttons with fancy on-hover animations. Right now the project offers 13 different designs (probably more in the future), all available in four sizes, six predefined color schemes, and block/inline block variants.
MenuSpy allows you to monitor which section of a webpage is visible and reflect that in the navigation menu. It doesn’t come with any styling options, just a JavaScript API for adding/removing classes. There are, however, a couple of cool demos you can copy.
Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.
Data visualization library that can handle large-scale 2D and 3D visualizations with ease. Deck.gl is made by Uber and powered by WebGL and React, which results in a project with great performance, as can be seen in the beautiful examples, rendering datasets with close to a million entries.
Svelte is a brand new project that provides a fresh, more-lightweight approach to the existing solutions offered by large frameworks like React and Angular. Instead of shipping huge piles of code, Svelte compiles your app to optimized vanilla JavaScript which can be executed much faster by the browser.
Turbo.js allows you to access the GPU and improve the performance of your apps. By executing processes directly in the graphics processor, it is possible to run multiple complex calculations in parallel, drastically cutting down JavaScript waiting times. In works in all popular web browsers and is supported by most desktop and mobile chipsets.
CSSPIN is a collection of colorful indicators and spinners, all featuring smooth pure-CSS animations and consisting of just a single div: <div class="cp-spinner cp-bubble"></div>. Each spinner in the library has it’s own CSS file, allowing you to quickly take only what you need and minimize bloat.
Blueprint is a React toolkit optimized for building complex user interfaces such as web-based desktop applications and admin panels. It offers a rich component library, lots of customization options with Sass or Less, and a detailed, easy to follow documentation.
Card is a tiny vanilla JS project (with a jQuery version) that will make your credit card forms much more fun and interactive. After a quick installation, the library will take your form and transform it into an animated CSS-only credit card that gets filled as users input their data.
Similar to Card, this library removes traditional web forms and replaces them with a more engaging alternative. Conversational Form takes all of the input fields and uses them to start a pseudo-chatbot conversation where the bot asks questions and step by step receives the needed information from the user .
Since JavaScript doesn’t have static typing, at times there can be some confusion on the specific type of variables, especially Arrays which are considered Objects in JS. This super simple library can be used to solve this problem and easily find the real type of a variable.
A CSS framework that strives to stay as slim as possible and provide the most minimal setup while still making your project pretty. Unlike other UI frameworks such as Bootstrap, Milligram doesn’t offer any components, only basic HTML styles, typography, and a layout grid. Just 2kb in size when gzipped.
A React library built on top of Facebook’s text editor framework draft-js. It allows you to create rich markup editors in the style of Medium with lots of helpful key shortcuts and a friendly user interface for writing and editing content.
A collection of handy JavaScript and jQuery components for UI interactions, effects, and various other utilities. The package includes an infinite grid builder, animations, landscape/portrait detection, device and browser info, and other great mini-libraries.
Superdom is a lightweight alternative to jQuery that allows you to manipulate the HTML DOM. It provides a global dom object with a simple chaining interface, which can be used to select and modify all the existing elements on the page and their attributes.
This Node.js package is capable of mocking WebSockets, making it easier to automate the testing of socket connections in your apps. The library has a simple API that allows you to register different kind of events and send them once or at a certain interval. Chaos Socket also comes with Faker.js built-in for quickly generating dummy data.
JavaScript library and Node.js CLI that generate modern markdown-based documentation hubs for your projects. There are two themes available as well as some customization options such as displaying a GitHub Corner widget.
A tiny jQuery plugin that automatically improves the appearance of checkboxes and radio buttons, while also adding the option to change their label text depending on whether they are truthful or not. It works in all modern browsers and is really easy to use.
The software development industry continues its relentless march forward. In 2016 we saw new releases of popular languages, frameworks and tools that give us more power and change the way we work. It is difficult to keep track of everything that is new, so at the end of every year we give you our take on what is important and what you should learn during the next twelve months.
In 2016 we saw the rise of the Progressive Web App concept. It represents web applications that work offline and offer a native, app-like experience. They can be added to your smart device’s homescreen and can even send you push notifications, bridging the gap with native mobile apps. We think that in 2017 PWA are going to become even more important and are well worth investigating. See our overview here.
Everybody is talking about bots right now. From platforms for running them, to frameworks for building them, the community is buzzing with activity (read our intro here). Bots are the new mobile apps, and if you hurry up you can catch the wave while everyone is excited. Once the novelty wears off, bots will probably be relegated to some boring role such as automated customer support. But hey, we can dream!
In the JavaScript community we have an incredible churn of frameworks and tools, with new ones being born almost every week. Until recently, the expectation was that the old tools would just be replaced by the new, but this is not what we saw in 2016. Instead, we saw the popular frameworks exchanging ideas and incorporating the innovations put forth by newcomers. So in 2017 it won’t matter much which of the major JS frameworks you choose, their features are mostly comparable.
Companies and developers everywhere are embracing “the cloud”. This is virtualized computer infrastructure that is available on demand and fully configurable from a control panel. The big three cloud providers are AWS, Google Cloud and Azure. Thanks to their ongoing competition prices have been falling, bringing it within the budgets of smaller companies and individual developers. Familiarizing yourself with the cloud workflow would be a good investment for 2017.
Machine Learning (ML) has exploded in popularity during the last twelve months. And with the historic AlphaGo vs Lee Sedol match in March, it entered the mainstream. Smart computer systems that learn from raw data are revolutionizing the way we interact with our mobile devices. By the looks of it, ML will be an even bigger factor in 2017.
JavaScript continues its incredible pace of innovation. Catalyzed by the quick release schedules of web browsers, the JS standard is updated every year. The next edition, ES2017, is expected to be finalized in mid 2017. It will bring the dream feature of many JS developers – аsync/аwait for working with asynchronous functions. And thanks to Babel, you can write ES2017 in every browser even today.
TypeScript 2.1 was released in late 2016, bringing async/await for old browsers and improved type inference. TypeScript is a statically typed language which compiles to JavaScript. It adds powerful features like a classic OOP model and optional static typing to make large codebases easier to maintain. It is the preferred language for writing Angular 2 apps, and we recommend giving it a try. Here is our quick start guide about it.
C# 7.0 is expected in 2017 and will enhance an already excellent language. Microsoft surprised everyone when they introduced the open source Visual Studio Code editor and .Net Core. Both of these run on Linux, Windows and macOS and allow you to write fast and performant applications in C# (read more here). A vibrant community is forming around both of these tools, and we are confident there is an exciting year ahead of them.
Python 3.6 was released in December. It is solidifying its place as the scripting language of choice for devs, IT pros and scientists. It is suitable for automation, web development, machine learning and scientific computing. The Python 2/3 split has been an years-long struggle for the community, but these days you can confidently choose 3 and enjoy full library support. For those in need of extra performance, they can take a look at PyPy, an alternative JIT enabled Python runtime.
Ruby 2.3 was released earlier this year with a number of performance improvements. Ruby is also a good choice as a general purpose scripting language, but it shines when paired with Rails. The Ruby 3×3 initiative was announced, which will attempt to make the upcoming Ruby 3 release 3 times faster that the current version, opening the doors to using Ruby in more contexts.
PHP 7.1 was released in December, and brings minor enhancements to the language. This builds upon the major performance improvements that were had in version 7.0 last year, turning PHP into a fast platform for building web applications. We recommend PHP The Right Way for good practices and a modern take on building web apps in the language.
Java 9 is expected in 2017 and will come with welcome new features like a repl for evaluating code, HTTP 2.0 support and new APIs. There is a strong demand for talented Java developers and a breadth of exciting projects that use the language. If Java is not your thing, there are a number of JVM based languages like Kotlin and Scala that you can check out.
Swift 3 was released earlier this year. This is Apple’s vision for a modern programming language that eases the development of apps on iOS and macOS. Swift is open source and has attracted a large community. Version 4 is planned for 2017, which will improve the language and introduce server APIs, making it a good choice for writing web apps and backends.
If you are looking for something more exciting, you can try out Crystal and Elixir, which both combine a friendly ruby-like syntax with superior performance. Or you can look into a functional language like Haskell or Clojure. Two other fast languages are Rust and Go which we recommend.
Learn one or more of these: JS (ES2017), TypeScript, C#, Python, Ruby, PHP7, Java/Kotlin/Scala.
The web platform made two major advancements recently – Web Assembly and Service Workers. They open the gates for fast and performant web applications that bridge the gap with native compiled applications. Service Workers in particular are the enabling technology for Progressive Web Apps and bring support for Notifications to the web platform, with more APIs to follow in the future.
Angular.js 2 was released this year. The framework is backed by Google and is very popular with enterprises and large companies. It has a vast number of features that make writing everything from web to desktop and mobile apps possible. The framework is written in TypeScript, which is also the recommended language to write applications in. There is a lot to read about, but we think learning Angular 2 in 2017 would be a good investment.
Vue.js also saw its 2.0 release this year. It borrows the good ideas from Angular, React and Ember, and puts them into an easy to use package. It is also quite a bit leaner and faster than the first two. We suggest that you give it a try this year, by starting with one of our Vue.js tutorials.
Ember is another solid choice for a JavaScript framework. It supports data bindings, auto-updating templates, components and server-side rendering. One benefit that it has over its competitors, is that it is more mature and stable. Breaking changes are much less frequent and the community values backwards compatibility. This makes the framework a good choice for long-lived applications.
Two other frameworks that are worth a look are Aurelia and React. The ecosystem around React has grown considerably more complicated in the last year, making it difficult to recommend for beginners. But experienced devs can combine the library with GraphQL, Relay, Flux and Immutable.js into a comprehensive full stack solution.
No frontend compilation would be complete without mentioning Bootstrap. Version 4 is currently in Alpha and a release is expected in 2017. Notable changes are the new versatile card component and the flexbox grid (see our comparison with the regular grid here), which modernize the framework and make it a joy to work with.
SASS and LESS remain the two most popular CSS preprocessors today. Although vanilla CSS is finally getting support for variables, SASS and LESS are still superior with their support for mixins, functions and code organization. If you haven’t already, take a look at our SASS and LESS quick start guides.
Learn one or more of these: Angular 2, Vue.js, Ember, Bootstrap, LESS/SASS.
There is plenty of choice for the backend, all coming down to your preference of a programming language or specific performance needs. An ongoing trend in web development is business logic to move away from the backend, turning that layer into an API which is consumed by the frontend and mobile apps. But a full stack framework is often simpler and faster to develop in, and is still a valid choice for a lot of web apps.
Node.js is the primary way for running JS outside the browser. It saw many new releases this year, which increased performance and added coverage for the entire ES6 spec. Node has frameworks for building fast APIs, servers, desktop apps and even robots, and a vast community creating every kind of module imaginable. Some frameworks that you may like to look into: Express, Koa, Next, Nodal.
PHP is a web language first and foremost, and has a large number of web frameworks to choose from. Thanks to its excellent documentation and features, Laravel has formed an active community. Zend Framework released version 3, which marks a great upgrade for this business oriented framework. Symfony also saw a lot of new releases this year, making it an even better choice as a full stack solution.
For Ruby, the Rails framework is the premier choice. Version 5.0 was released in 2016, bringing support for Web Sockets, API mode and more. Sinatra is also a good choice for small apps, with version 2.0 expected sometime in 2017.
Python has its own full stack/minimal framework combo in the form of Django and Flask. Django 1.10 was released in August introducing full text search for Postgres and an overhauled middleware layer.
The Java ecosystem also has popular web frameworks to choose from. Play and Spark are two solid choices, and as a bonus they can be used with Scala as well.
For the enthusiasts there is also Phoenix, which is written in Elixir and attempts to be a feature complete alternative to Rails with superior performance. If Elixir is one of the languages you would like to learn in 2017, give Phoenix a try.
Learn one of these: A full stack backend framework, a micro framework.
PostgreSQL saw two whole releases this year – 9.5 and 9.6. They brought the long awaited UPSERT functionality that we know from MySQL (aka ON DUPLICATE KEY UPDATE), better full text search and speed improvements thanks to parallel queries, more efficient replication, aggregation, indexing and sorting. Postgres is used for massive, terabyte scale datasets, as well as for busy web apps, and these optimizations are welcome.
MySQL 8.0 is going to be the next major release of the database. It is expected sometime in 2017 and it will bring a lot of improvements to the system. MySQL is still the most popular database management system and the entire industry benefits from these new releases.
For NoSQL fans, we can recommend CouchDB. It is a fast and scalable JSON storage system which exposes a REST-ful HTTP API. The database is easy to use and offers great performance. PouchDB is a spiritual counterpart to CouchDB that works entirely in the browser and can sync with Couch. This allows you to use Pouch in an offline ready web app, and get automatic syncing once internet connectivity is available.
Redis is our favorite key value store. It is small, fast and versatile. You can use it as a smart memcache alternative, as a NoSQL data store or a process messaging and synchronization channel. It offers a large number of data structures to choose from, and the upcoming 4.0 release will have a module system and improved replication.
Learn one of these: Postgres, MySQL, CouchDB, Redis.
Yarn is an alternative package manager for Node.js which is developed by Facebook. It is an upgrade over the npm command line tool and provides faster installs, better security and deterministic builds. It still uses the npm package registry as its backend, so you have access to the same incredible ecosystem of JavaScript modules. Yarn is compatible with the package.json format that npm uses, and is just a quick install away.
The two most popular open source code editors – Visual Studio Code and Atom have seen an incredible amount of innovation in the past 12 months. Both of these projects are built using web technologies and have attracted huge communities of fans. The editors have plugins available which bring syntax checking, linting and refactoring tools for a large number of languages.
Git is the most popular source code version control system out there. It is serverless and you can turn any folder on your computer into a repository. If you wish to share code, you have many options like GitLab, Bitbucket and Github, to name a few. For 2017 we suggest that you familiarize yourself with the git command line, as it will come in handy more times than you think.
Desktop applications are not dead yet. Even though web apps are becoming more and more capable, sometimes you need powerful capabilities and APIs that are simply not available to the web platform. With tools like Electron and NW.js you can write desktop applications by using web technologies. You get full access to the operating system and the breadth of modules available to npm. To learn more about these tools, read our tutorials about Electron and NW.js.
A recent trend in software team organization is to have developers who are in charge of their own software deployment. Also called DevOps, this leads to quicker releases and faster fixes of issues in production. Developers with operations experience are highly valued by companies, so familiarity with the technologies that enable it is going to be a huge plus from now on. Some of the tools that we recommend are Ansible and Docker. Experience with the Linux command line and basic system administration skills will also serve you well.
Try out one or more of these: Yarn, Git, Visual Studio Code, Electron, Ansible, Docker.
The cloud has won over the entire software industry, with large companies closing down their datacenters and moving their entire infrastructure there. The three main platforms are AWS, Google Cloud and Azure. All three have powerful, ever expanding feature sets, including virtual machines, hosted databases, machine learning services and more. Prices are going down rapidly, and the cloud is within reach of small companies and individual developers. For 2017, it would be a good learning experience to deploy a side project to one of these providers.
Artificial Intelligence was the buzzword of 2016. Speech recognition and image classification are only two of the user facing applications of the technology, with machines reaching and even surpassing human level performance. There are a lot of startups that apply AI and Machine Learning to new domains. And a lot of open source projects were released like Google’s Tensor Flow and Microsoft’s Cognitive Toolkit. Machine Learning is a very math-heavy topic, and for those just starting out there are comprehensive online courses available.
Virtual Reality (VR) and Augmented Reality (AR) have been around for a while, but finally the technology is mature enough to offer a compelling experience. Facebook (Oculus Rift), Google (Daydream) and Microsoft (Windows Holographic) all have virtual reality platforms that welcome third party developers. VR headsets still face challenges like eliminating nausea and offering compelling use cases outside of gaming, but they are getting there.
Learn one of these: Cloud deployment, a Machine Learning library, VR Development.
Chatbots have been a trending topic for quite some time now and have got a lot of people excited about them. Some believe that bots are the next big thing and will soon replace apps, while others think they are just a fad, bound to fail.
In this article we will restrain ourselves from giving opinion on the future of chatbots. Instead, we will try to shine some light on how they work, what they can be used for, and how to get one up and running.
A chatbot is a service or tool that you can communicate with via text messages. The chatbot understands what you are trying to say and replies with a coherent, relevant message or directly completes the desired task for you.
You chat with people.
If you remember CleverBot, you know that the concept of chatbots isn’t that new. What makes them so relevant right now is:
Modern chatbots do not rely solely on text, and will often show useful cards, images, links, and forms, providing an app-like experience.
Facebook bots have nice non-text UI (Skyskanner)
This allows them to be used for many different purposes such as shopping, customer service, news, games, and anything else you can think of. A good chatbot doesn’t have to perform a huge variety of tasks – a bot that shows you the latest news doesn’t need to be able to order Chinese food. It does one thing and does it well.
Most people won’t build their chatbots from scratch as there are plenty frameworks and services that can help. However, in order to grasp how bots work, we have to go over some developer talk.
Backend: Chatbots can be built in basically any programming language that allows you to make a web API. For most people this will be either Node.js or PHP, but there are many bot libraries written for Java and Python as well. The backend receives messages, thinks of a response, and returns it to the user.
Frontend: This can be one of the popular messengers apps (Facebook Messenger, Slack, Telegram), or a simple chat interface like the Realtime Chat With Node.js we built some time ago. You are not limited to a single platform – the same bot can be implemented in more than one place.
Connecting the two: Your web server will then have to setup webhooks – URL-based connections between your bot and the chat platform. Webhooks will allow you to securely send and receive messages via simple HTTP requests. All of the mainstream messengers provide detailed guides on how to connect your bot to them.
Oversimplified model of a chatbot
The bot is now connected and can listen and respond to users. The only thing left to do is give it a brain.
Depending on the way bots are programmed, we can separate them in two major categories: command-based (dumb bots) and learning (smart bots).
Command-based bots are structured around specific keywords that the bot recognizes. Each command has to be manually programmed by the developer using regular expressions or other forms of string analysis. If the user says something beyond the programmed scenarios, the bot cannot answer in any helpful way.
Although the capabilities of these “dumb” bots are limited, they are sufficient for the majority of bot designs, especially when combined with other types of UI like multiple choice questions.
Simple, linear conversation with the Weps bot
Learning bots rely on some sort of artificial intelligence to converse with users. Instead of looking for a predefined answer, smart bots come up with adequate replies right on the spot. They also keep track of the context of the conversation and remember what has been previously said, just like a human would!
Working with natural language processing and machine learning is no easy task, especially for beginner developers. Thankfully, you don’t have to all of the work on your own. There are a number of excellent libraries (ConvNetJS, nlp_compromise, TextBlob) and services (wit.ai, api.ai) that can help you with teaching your bot some conversational skills.
Free-flowing conversations with Abe, a financial adviser bot
If we’ve managed to pump you up and you want to start building your first chatbot, here are some tips that will get you going. Depending on how much of the work you want to do on your own, you can go full DYI and build your bot from scratch, or you can just use a framework that will save you lots of time.
Once you’ve completed your bot, most of these frameworks allow you to easily connect it to the popular messaging platforms, which is a huge timesaver as all the major platforms have different setup processes.
If you want to skip the development process as a whole, you can trust one of the many available bot-building services:
Although chatbots seem very futuristic, they are already here and are freely available to the public. Below is a list of just a few interesting bots we’ve stumbled upon. Some of them don’t even have to be installed, just find them in Facebook Messenger and say Hi!
If you check out Botlist or the Telegram Bot Store you will see that developers have been working on bots for a while now and there is already an inventory of thousands of bots.
The idea of chatbots has got developers, businesses and messenger apps all working together, building a totally new ecosystem. We will have to wait and see how well bots will be adopted by the general public, but whether they fail or become the next big thing, we will have some fun playing with AI in the meantime.
We hope this article has been helpful and we’ve introduced you properly to the world of chatbots. If you have any questions or opinions, feel free to leave a comment below :)
The newest edition to our ever growing collection of freebies! This time we’ve prepared for you 3 awesome Bootstrap forms that you can directly copy and paste into your projects. Like all of our freebie templates, these forms are fully responsive, easy to implement, and 100% free to use.
To make these forms we’ve used the Bootstrap 3 framework which helps with responsiveness and gives a solid styling base. No other libraries have been used – everything is done via simple HTML and CSS. We’ve also taken into consideration CSS scope so that our styles are self-contained and won’t break anything on the rest of your page.
Registration Form
To use any of the templates from the demo, follow these simple steps:
Advanced Search Form
You have all rights to customize and use these templates in both personal and commercial projects. All our freebies are 100% royalty free, no attribution required (our license page). Enjoy!
Bootstrap 4 introduced some changes to the grid system we are all so familiar with from version 3. These include a new XL grid tier, alteration to some of the modifier classes, and a brand new flexbox version of the said grid system.
The regular and flexbox grid modes are not compatible, and everyone will have to choose which one to use in their projects. To help you with the decision, in this article we will look at all the differences between the two systems. For easier comparison, we’ve also prepared several grid examples implemented in both modes.
The most common way to include Bootstrap in a project is via CDN or a local source file. There are separate precompiled versions for flex and non-flex:
<!-- Original Bootstrap --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" > <!-- Bootsrap With Flexbox Grid --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css" rel="stylesheet" >
For those of you who compile their own Bootstrap, you will need to turn on $enable-flex in the main Sass customization file.
$enable-flex = true;
When it comes to file size, the flexbox version is slightly bigger due to the extra rules and vendor prefixes that are required. However, the margin is quite thin (119 KB compared to 105 KB) and shouldn’t matter in most use cases.
By now everyone knows how the Bootstrap grid works. We’ve got rows separated into 12 equal pieces, and columns that go inside the rows. Each column can take anywhere from 1 to 12 spaces:
<div class="row"> <div class="col-xs-2">.col-xs-2</div> <div class="col-xs-4">.col-xs-4</div> <div class="col-xs-6">.col-xs-6</div> </div>
The new flexbox mode provides us with an auto-layout option where columns can be left without a specified size.
<div class="row">
<div class="col-xs">.col-xs</div>
<div class="col-xs">.col-xs</div>
<div class="col-xs">.col-xs</div>
</div>
Sizeless columns in the flexbox grid will share the available space equally, always taking up the entire row. If we want a column to be bigger or smaller, we can still do that with a .col-xs-size class.
To help you better visualize the two systems, we’ve prepared live demos of both flex and non-flex grids. You can check them out below:
Basic Flex Grid
When the sum of all columns in a row is over 12, the first extra column will move to the next line. This is knows as column wrapping and works the same way in both regular and flex-bootstrap.
<div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-3">.col-xs-3, This column will move to the next line.</div> </div>
The only thing to note here is that when using flex auto-layout, a sizeless column that took up only a couple of spaces, can take up the entire row once it wraps.
Regular Column Wrapping
As we mentioned in the intro, Bootstrap 4 has a new XL grid tier on top of the old ones. Now the grid media queries look like this:
Beside the XL tier, there aren’t any other major changes to responsiveness. The regular and flex systems work the same way.
Responsive Flex Grid
The old grid system was built on floated elements and because of that every column has a different height, depending on the content it holds.
Column Height In Regular Grid
In flexbox layouts all cells in a row are aligned to be as tall as the column with most content.
Column Height In Flex Grid
In non-flex Bootstrap positioning columns horizontally is done via an offset system. Offsets work like empty columns and allow us to move elements to the right (e.g an .offset-xs-3 moves the column 3 spaces to the right). This can be a little annoying as we need to manually adjust the amount of spaces needed.
<div class="row">
<div class="col-xs-6 offset-xs-3">This column is now centered.</div>
</div>
Thanks to the justify-content property, horizontal positioning in flex-strap is as easy as adding the correct class.
<div class="row flex-items-xs-center">
<div class="col-xs-6">All columns in that row will be automatically centered.</div>
</div>
Also, if you want to use offsets you can do that too!
Horizontal Alignment In Flex Grid
There are no options for vertical alignment in the regular Bootstrap grid. The only way to do any sort of vertical positioning is using custom CSS and it is often messy.
Flexbox, on the other hand, is great at layout alignment and gives us not one, but two ways to vertically position columns:
Vertically align the whole row:
<div class="row flex-items-xs-middle"> <div class="col-xs"> Middle </div> </div> <div class="row flex-items-xs-bottom"> <div class="col-xs"> Bottom </div> </div> <div class="row flex-items-xs-top"> <div class="col-xs"> Top </div> </div>
Align individual columns within the row:
<div class="row">
<div class="col-xs flex-xs-middle"> Middle </div>
<div class="col-xs flex-xs-bottom"> Bottom </div>
<div class="col-xs flex-xs-top"> Top </div>
</div>
Vertical Alignment In Flex Grid
With the regular grid system, if we want to swap around the order of columns we need to use push and pull. Although it’s not the best designed solution, it gets the job done.
<div class="row">
<div class="col-xs-4 push-md-8"> On MD screens this column will move 8 spaces to the right. </div>
<div class="col-xs-8 pull-md-4"> On MD screens this column will move 4 spaces to the left.</div>
</div>
Anyone who has used flexbox before knows that it has a built-in order property. The way Bootstrap devs have implemented it is via three ordering classes:
.flex-xs-first – Displayed first..flex-xs-last – Displayed last..flex-xs-unordered – Displayed between first and last.No manual calculations are required. If you need to order more than 3 columns (which rarely happens) you can use push&pull or the order property via CSS.
Reordering Flex Columns
Looking back at the points covered in the article, its pretty clear that the flexbox mode is the more advanced and versatile grid system. After all, it includes everything from the regular grid with some new flex-only features on top. The only real drawback of going full bootstrap-flex is the lack of support for IE9.
This wraps up our comparison of the new Bootstrap 4 grid systems. Feel free to bookmark the demo page for quick future reference. We hope we’ve been helpful! Happy coding :)
Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.
November’s list is here and it is packed with some amazing GitHub projects. It includes new CSS frameworks, a node.js package manager from Facebook, and a couple of awesome CSS-only solutions for icons, loading spinners, and tooltips.
Wing is a minimalistic CSS framework that can be used for setting a solid base to your websites. Like all CSS frameworks these days, Wing has a 12-column responsive grid and a collection of styled components. The cool thing about this particular project is that most HTML elements are automatically styled and don’t need any extra classes.
JavaScript library that truncates multi-line text, so that it can fit within the boundaries of a HTML element. The original string is stored in a hidden <span>, so that your text remains in the page in its entirety. Following a trend seen in many modern libraries, Shave has no dependencies and instead offers a separate version for plugging it in with jQuery.
A JavaScript MVC app state manager that comes with its own debugger. In Cerebral, the state of your application is stored in a single tree model that manages all server- and client-side states. The debugger has authority over the model, controller, and view, and can be used to manage them in real time.
Wenk is a tiny library that provides CSS-only text tooltips. The whole thing is only 700 bytes, but still manages to provide a handful of customization options such as different tooltip sizes, placements, and text alignment. Probably the quickest way possible to get tooltips up and running.
CSS Loader is a very helpful library that allows developers to quickly create loading indicators out of pure CSS. There are many different spinner designs included and they can all be created using only a single <div> element.
Yarn is a fancy new node.js package manager by Facebook. Its main selling points are a powerful caching system, fast install times, and a reliable file organization that keeps every instance of your project installed the same way. Although they are quite different under the hood, using Yarn is almost identical to using npm, and developers can get familiar with it quickly.
JavaScript library for creating speedometers, compasses, thermometers, and all other kinds of measuring devices. The gauges are displayed in a HTML canvas and are fully customizable, as can be seen in the examples section of their website.
A growing collection of over 500 icons made entirely out of CSS. Using icons from this font is extremely simple, and there is even an option to animate from one icon to another. We also have to give +10 points to this project for its awesome website, that lets you see exactly what part of the CSS represents what element of the icon.
As you can tell by the title, this is a library for formatting numbers and strings to various currency standards. It supports 155 currency formats and over 700 locale definitions for country specific formatting. Also, if for some reason the format you are looking for isn’t included, you are free to define your own.
Native JavaScript animation engine featuring a fully modular architecture. The core library provides all the basic animation methods, and numerous plugins can be added to enrich KUTE’s functionality. There are separate extension for working with jQuery, SVGs, CSS properties, and others.
A lightweight Vue.js framework following closely the Material Design Guidelines. It offers a collection of high-quality components, many of which are designed toward mobile devices and provide native-like interactions and animations. The library is easy to implement, and doesn’t have any dependencies apart from Vue.js.
Test Cafe is a platform for running tests on your web apps. It is node.js based and doesn’t require you to install anything other than the npm package – no browser plugins, no compilators. Once you’ve written your tests, running Test Cafe will do everything else for you, including starting browsers for testing, gathering results, and creating a report.
A super lightweight CSS reset and grid system in only 1.3 kb. Core.css can be used as the base for any small web projects where you don’t need all the features of a full blown framework such as Bootstrap or Foundation.
With this awesome library you can enable the standard HTML5 video player to support FLV files. The library works with a simple JavaScript API and there is absolutely no Flash involved. Just grab an existing video element on the page and call the flvjs.createPlayer() function to turn on FLV playback.
Next.js is an interesting experimental project. It is a Node.js framework that can server-render JavaScript web apps built with React. This allows developers to work on their websites in Node, and do all the back-end routing and front-end logic in one place.
In this quick tutorial we will show you how to create a simple credit card form. We’ll build the whole thing from scratch, with a little help from Bootstrap 3 for the interface, and Payform.js for client-side form validation.
Keep in mind that storing credit card data on your servers is serious business. You need to be PCI compliant and fulfill a vast number of requirements.
Unless you know what you’re doing, it is best to use the services of a third party payment processor like Stripe or PayPal that stores all payment information for you.
Here is a sneak-peak of what we will be building in this tutorial:
Credit Card Form Demo
You can get the full code for this project from the Download button near the top of the article. An overview of the files can be seen below:
There are two .css files and two .js files which we will need to include in our HTML. All other resources such as the Bootstrap framework, jQuery, and web fonts will be included externally via CDN.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Credit Card Validation Demo</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
</head>
<body>
<!-- The HTML for our form will go here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/jquery.payform.min.js" charset="utf-8"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
Now that everything is set up, we can start building our credit card form. Let’s start with the HTML layout!
A credit card dialog needs to be simple, short, and straightforward. Here are the four input fields that every credit card form needs to have:
All we need to do is create a <form> and add all the required input fields. For the owner, card number, and CVV we will use simple text fields. For the expiration date we’ll put a combination of two selects with predefined options.
Besides that our form will have a heading, a submit button, and images for popular credit card vendors. Since we are working with Bootstrap there is a little extra markup, but it helps keep the code organized and the layout responsive.
<div class="creditCardForm">
<div class="heading">
<h1>Confirm Purchase</h1>
</div>
<div class="payment">
<form>
<div class="form-group owner">
<label for="owner">Owner</label>
<input type="text" class="form-control" id="owner">
</div>
<div class="form-group CVV">
<label for="cvv">CVV</label>
<input type="text" class="form-control" id="cvv">
</div>
<div class="form-group" id="card-number-field">
<label for="cardNumber">Card Number</label>
<input type="text" class="form-control" id="cardNumber">
</div>
<div class="form-group" id="expiration-date">
<label>Expiration Date</label>
<select>
<option value="01">January</option>
<option value="02">February </option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select>
<option value="16"> 2016</option>
<option value="17"> 2017</option>
<option value="18"> 2018</option>
<option value="19"> 2019</option>
<option value="20"> 2020</option>
<option value="21"> 2021</option>
</select>
</div>
<div class="form-group" id="credit_cards">
<img src="assets/images/visa.jpg" id="visa">
<img src="assets/images/mastercard.jpg" id="mastercard">
<img src="assets/images/amex.jpg" id="amex">
</div>
<div class="form-group" id="pay-now">
<button type="submit" class="btn btn-default" id="confirm-purchase">Confirm</button>
</div>
</form>
</div>
</div>
Now that we have the needed input fields, we can setup the validation rules.
All of the validation we will show here is client side and done exclusively in the JavaScript. If it is HTML validation that you are interested in, check out this article.
To kick things off we will define all the jQuery selectors we will need:
var owner = $('#owner'),
cardNumber = $('#cardNumber'),
cardNumberField = $('#card-number-field'),
CVV = $("#cvv"),
mastercard = $("#mastercard"),
confirmButton = $('#confirm-purchase'),
visa = $("#visa"),
amex = $("#amex");
Then, using Payform.js, we will turn our basic input fields into specialized input for credit card data. We simply need to call the right function and the library will automatically handle text formatting and maximum string length for us:
cardNumber.payform('formatCardNumber');
CVV.payform('formatCardCVC');
Next, we want to be able to give real-time feedback to users while they are typing in their card number. To do so we will write a simple function that does two things:
payform.parseCardType() method.Since we want to execute the above actions every time a new character is typed in, we will use the jQuery keyup() event listener.
cardNumber.keyup(function() {
amex.removeClass('transparent');
visa.removeClass('transparent');
mastercard.removeClass('transparent');
if ($.payform.validateCardNumber(cardNumber.val()) == false) {
cardNumberField.removeClass('has-success');
cardNumberField.addClass('has-error');
} else {
cardNumberField.removeClass('has-error');
cardNumberField.addClass('has-success');
}
if ($.payform.parseCardType(cardNumber.val()) == 'visa') {
mastercard.addClass('transparent');
amex.addClass('transparent');
} else if ($.payform.parseCardType(cardNumber.val()) == 'amex') {
mastercard.addClass('transparent');
visa.addClass('transparent');
} else if ($.payform.parseCardType(cardNumber.val()) == 'mastercard') {
amex.addClass('transparent');
visa.addClass('transparent');
}
});
There is one more thing we have to do and that is is check if all the field are holding valid data when the user tries to submit the form.
Name validation can be quite tricky. To keep this tutorial light, we won’t be going into that subject, and we will only check if the input name is at least 5 characters long. Payform provides us with the needed methods for validating the rest of the form.
confirmButton.click(function(e) {
e.preventDefault();
var isCardValid = $.payform.validateCardNumber(cardNumber.val());
var isCvvValid = $.payform.validateCardCVC(CVV.val());
if(owner.val().length < 5){
alert("Wrong owner name");
} else if (!isCardValid) {
alert("Wrong card number");
} else if (!isCvvValid) {
alert("Wrong CVV");
} else {
// Everything is correct. Add your form submission code here.
alert("Everything is correct");
}
});
The above validation is for educational purposes only and shouldn’t be used on commercial projects. Always include both client-side and server-side validation to your forms, especially when working with credit card data.
We are using Bootstrap, so most of the styling is done by the framework. Our CSS mostly covers the size of the input fields and various padding, margin and font tweaks.
.creditCardForm {
max-width: 700px;
background-color: #fff;
margin: 100px auto;
overflow: hidden;
padding: 25px;
color: #4c4e56;
}
.creditCardForm label {
width: 100%;
margin-bottom: 10px;
}
.creditCardForm .heading h1 {
text-align: center;
font-family: 'Open Sans', sans-serif;
color: #4c4e56;
}
.creditCardForm .payment {
float: left;
font-size: 18px;
padding: 10px 25px;
margin-top: 20px;
position: relative;
}
.creditCardForm .payment .form-group {
float: left;
margin-bottom: 15px;
}
.creditCardForm .payment .form-control {
line-height: 40px;
height: auto;
padding: 0 16px;
}
.creditCardForm .owner {
width: 63%;
margin-right: 10px;
}
.creditCardForm .CVV {
width: 35%;
}
.creditCardForm #card-number-field {
width: 100%;
}
.creditCardForm #expiration-date {
width: 49%;
}
.creditCardForm #credit_cards {
width: 50%;
margin-top: 25px;
text-align: right;
}
.creditCardForm #pay-now {
width: 100%;
margin-top: 25px;
}
.creditCardForm .payment .btn {
width: 100%;
margin-top: 3px;
font-size: 24px;
background-color: #2ec4a5;
color: white;
}
.creditCardForm .payment select {
padding: 10px;
margin-right: 15px;
}
.transparent {
opacity: 0.2;
}
@media(max-width: 650px) {
.creditCardForm .owner,
.creditCardForm .CVV,
.creditCardForm #expiration-date,
.creditCardForm #credit_cards {
width: 100%;
}
.creditCardForm #credit_cards {
text-align: left;
}
}
With this our Credit Card Validation Form is complete!