Tag Archiv: php
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.
The Trends
Progressive Web Apps
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.
The Bot Hype
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!
Consolidation of Frontend Frameworks
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.
The Cloud
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
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.
Languages
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.
Frontend
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.
Backend
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.
Databases
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.
Tools
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.
Tech
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.
A new program has been added to the
Free PHP Encoders, Accelerators and Obfuscators
page. This one is a PHP obfuscator that takes your PHP source code and changes it so that it is hard to understand
and modify. Since PHP code is distributed in its source form, such software is useful if you don't want others to be
able to easily read and change it.
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.
What Is A Chatbot?
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:
- The huge amount of time people spend texting in their messaging apps (Facebook Messenger, Slack, etc.), making messengers a fast-growing market where businesses can engage potential customers.
- The advancements in artificial intelligence, machine learning and natural language processing, allowing bots to converse more and more like real people.
Modern chatbots do not rely solely on text, and will often show useful cards, images, links, and forms, providing an app-like experience.
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.
How Do Chatbots Work?
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.
Dumb Bots and Smart Bots
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
Getting Started With Chatbots
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.
- BotKit – The most popular toolkit for building bots. Its open-source and very well documented.
- Claudia – Chatbot builder designed for deploying directly to AWS Lambda.
- Bottr – Super simple Node.js framework with built in app for testing. Awesome if you just want to play around for 10 minutes.
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:
- wit.ai – Service that receives raw text or voice data and uses NLP to help you manage responses.
- Chatfuel – A tool for Facebook Messenger or Telegram bots. No programming involved.
- motion.ai – Full bot building service with support for many texting platforms.
- api.ai – Natural language processing that allows you to make bots and define conversation scenarios.
Some Examples
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.
Conclusion
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.
The Forms
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
How to use
To use any of the templates from the demo, follow these simple steps:
- Grab the zip archive from the Download button near the top of the page and extract it.
- There are 3 folders, one for each form. Decide which template you want and grab it’s HTML from the index.html file.
- The styles are located in separate CSS files for each design. You can find them in the respective directories.
- We’ve used a couple of images from pexels.com. You can use the same images or you can replace them with your own.
Advanced Search Form
Free for Commercial Use
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.
1. Installation
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.
_variables.scss
$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.
2. Basic Grid
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
3. Column Wrapping
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
4. Responsive Grid
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:
- Extra small (xs) – below 576px
- Small (sm) – between 576px and 768px
- Medium (md) – between 768px and 992px
- Large (lg) – between 992px and 1200px
- Extra Large (xl) – over 1200px
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
5. Column Height
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
6. Horizontal Alignment
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
7. Vertical Alignment
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
8. Reordering Columns
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
Conclusion
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.
Project Overview
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.
index.html
<!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!
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:
- Credit card owner name
- Card number
- Secret code (also known as CVV/CVC/CID)
- Expiration Date
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.
Validation
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:
- Check if the current text in the field is а valid card number or not. Add appropriate coloring to the text field.
- Depending on the present input characters, see if the card is either Visa, MasterCard, or American Express. This is done using the
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.
Styles
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.
styles.css
.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!
Last time we shared with you a collection of 5 Free Bootstrap 3 Headers that can be used to kick-start any new project. Today we’ve got for you more awesome freebies and this time they are 5 ready-to-use footers templates. Just like all of our freebies, these footer designs are fully responsive, easy to implement, and 100% free to use.
The Footers
All of the footers are created using the Bootstrap 3 library. They are responsive and should look nice on any device and resolution. Each example has its own CSS file, making it very easy to customize and use. The CSS is self-contained and won’t be breaking the styles for the rest of your page.
Footer With Button
How to use
To use any of the templates from the demo, follow these simple steps:
- Grab the zip archive from the Download button near the top of the page and extract it.
- Open the .html file for the template you want, copy the code inside and paste it in your project.
- The styles are located in separate CSS files for each design. You can find them in the /assets/css/ folder. (In the beginning of each file there are styles needed for positioning the demos, you can remove those if you want.)
The only external libraries we’ve used (apart from Bootstrap) are Font Awesome for icons, and on one of the examples an embedded map from Google Maps.
Footer With Map
If you want to use the Footer With Map template you will need to generate your unique Google API key. To do so, go to the Google API console and grab a Google Maps Embed key. The whole process shouldn’t take more that a couple of minutes.
Free for Commercial Use
You have all rights to customize and use these templates. They are 100% free and can be implemented in both personal and commercial projects, no attribution required (our license page). Enjoy!
Sublime Text is one of the most popular code editors available right now. It is adored by many programmers for it’s speed, simplicity, and rich plugin ecosystem.
To help developers get the most our of Sublime, we decided to make a list containing some of the extensions that we use and love. If we haven’t included some of your favorites, feel free to share them with us in the comment section :)
We cannot start off our list without mentioning Package Control. It’s the plugin manager for Sublime, and without it installing and removing packages would be a huge pain. If you do not have Package Control installed, make sure you do that first, as it will allow you to quickly try out the other plugins in this article.
A collection of shorthand snippets for writing common JavaScript expressions much faster. Why write document.querySelector('selector'); when you can simply type qs, press tab, and let Sublime do the rest of the work.
Like the previous plugin in the list, this one let’s you use snippets to write code faster. The difference here is that instead of JS expresions, Emmet works for HTML and CSS, letting you write long tags, nested elements, or whole page templates in one go.
Emmet is a bit complex, so if want a simpler alternative you could try a similar plugin called HTML Snippets. It has less features, but is way easier to use, and has a great straightforward documentation.
This awesome package makes it possible to create new files blazingly fast. Instead of browsing folders, and using the menus, you simply open a prompt with super+alt+n and write the path to your new file. The plugin will also add any non-existing directories from the path, and even supports auto completion for folder names.
A Git integration that works directly from the Sublime Text command palette. The package provides quick access to a number of commonly used Git commands, allowing developers to add files, make commits, or open the Git logs, without ever leaving Sublime.
Very useful extension that marks each line in your source code, telling you its Git status and giving you an overview of the changes that have occurred. GitGutter can be used to compare your files to the git HEAD, origin, a branch of your choice, or even certain commits.
In Sublime Text the project you are working on is overviewed in the left side panel. Although it gives you some options for working with your files, the available default actions are quite limited. This plugin changes that by adding over 20 options to the right-click menu, including Open in browser, duplicate, and lots of other useful stuff.
A tiny, useful color picker that is very simple to use and great for quickly grabbing color hex values. The plugin opens in a separate window and allows you to choose a color from a palette or use an eye dropper to extract color from anywhere on your screen.
Sublime Text 3 has a built-in Lorem Ipsum generator that you can use for creating dummy text. The Placeholders plugin extends that functionality and allows ST to quickly generate for you placeholder images, forms, lists, and tables.
This is an extension for those of you who like to add detailed comments to function definitions. DocBlockr allows you to effortlessly generate descriptions for your functions including the parameters they take, the returned value, and variable types.
Code intelligence plugin that indexes your source files and enables you to find function definitions and jump to them. This extension works for a plethora of popular and not-so-popular programming languages.
A code minifer and beautifier in one. Minify takes your current opened file, and creates a new .min or .pretty version of it in the same directory. Works with CSS, HTML, JavaScript, JSONs, and SVGs.
This package relies on external node.js libraries for minifying and beautifying, so you will need to install them separately:
npm install -g clean-css uglifycss js-beautify html-minifier uglify-js minjson svgo
This package enables the code editor to check for syntax errors, bad practices, or other mistakes that the developer may have made. SublimeLinter itself just acts as a base framework for linting, so you also need to install separate plugins for each language you code in.
A feature you can see in many other IDEs and text editors, but is missing from Sublime, is color previews. Using the Color Highlighter extension you can enable it in ST, allowing you to see how all hex and RGBA values are translated to color, directly in your style sheets.
Sublime Text has code highlighting for over 50 languages but there are some frameworks or niche web dev languages that are not supported yet. Thanks to the plugin nature of the editor, the community can create and distribute packs for any imaginable programming language:
Bonus: Themes
Installing a beautiful theme to your text editor definitely makes writing code more enjoyable. There are tons of great themes and color palletes available for Sublime text, here are a few of our favorites:
In this article we’re going to show you how to use simple vanilla JavaScript snippets to:
- Add text to the clipboard on user action, such as the press of a button.
- Modify the content of the clipboard when a user copies something.
The APIs we will be using don’t require any external libraries, and have almost perfect browser compatibility!
Copy On Click
An awesome accessibility feature you can add to your website is the ability to copy strings directly via button press. This interaction can be applied to quickly grab URLs, long strings such as SSH keys, terminal commands, hex colors, or any other data that is frequently copy & pasted.
To make this happen we will need to use a cool JavaScript method called execCommand(). It allows us to invoke a number of different events that manipulate editable content such as making text bold/italic, doing undo/redo, and also copy/cut/paste.
document.execCommand('copy');
This works exactly like pressing CTRL/Cmd+C on your keyboard, so in order to copy any text we first need to have it selected. This is possible in JavaScript thanks to the Selection API, which allows us to programatically make a text selection from any HTML element on the page.
var button = document.getElementById("copy-button"),
contentHolder = document.getElementById("content-holder");
button.addEventListener("click", function() {
// We will need a range object and a selection.
var range = document.createRange(),
selection = window.getSelection();
// Clear selection from any previous data.
selection.removeAllRanges();
// Make the range select the entire content of the contentHolder paragraph.
range.selectNodeContents(contentHolder);
// Add that range to the selection.
selection.addRange(range);
// Copy the selection to clipboard.
document.execCommand('copy');
// Clear selection if you want to.
selection.removeAllRanges();
}, false);
To see the example in action check out the editor below:
(Play with our code editor on Tutorialzine.com)
In the example above the content we want to copy is simply stored in a paragraph. If the text you need is not on the page, you will need to first write it in an element hidden off-screen.
Modify Copied Text
Here we will show you how to manipulate content in the clipboard after it’s been copied. This can be very useful for escaping code, formatting numbers and dates, or for other text transformations such as uppercase, lowercase, etc.
JavaScript provides us with copy() and paste() events, but they are designed in such a way that the content stored in the clipboard is secure:
- In the copy event handler we cannot read what’s stored in clipboard, as there may be personal info which we shouldn’t have access to. We can, however, overwrite the clipboard data.
- In the paste event it’s the opposite: we can read the data, but we cannot change it.
Since we want to read and write at the same time, we will need to use the Selection API once more. Here is the solution:
document.addEventListener('copy', function(e){
// We need to prevent the default copy functionality,
// otherwise it would just copy the selection as usual.
e.preventDefault();
// The copy event doesn't give us access to the clipboard data,
// so we need to get the user selection via the Selection API.
var selection = window.getSelection().toString();
// Transform the selection in any way we want.
// In this example we will escape HTML code.
var escaped = escapeHTML(selection);
// Place the transformed text in the clipboard.
e.clipboardData.setData('text/plain', escaped);
});
You can try the code in the editor below:
(Play with our code editor on Tutorialzine.com)
Further Reading
In this quick tip we presented you two useful snippets for working with the clipboard in pure vanilla JavaScript. We used a bunch of hip native APIs, so here they are again if you want to read more about them:
- execCommand – Execute actions such as copy, paste, cut, bold, italic, underline, delete, and many others. – MDN, Can I Use
- Selection API – Allows developers to make a range selection from any text on the page. – MDN, Can I Use
- JavaScript Copy Event – An event fired when users press CTRL/Cmd+C or choose “copy” from the right-click menu. – MDN, Can I Use
Also, if you need more control over copy/paste/cut events, you can use a library such as clipobard.js. It has lots of features and provides a nice clean API for managing the clipboard.
We hope you enjoyed this article! Feel free to ask question or leave suggestions in the comment section below :)
