ELearn World - Learn the Tutorials online

Every now and then, you will have to show an alert box to your users to let them know about an error or notification. The problem with the default alert boxes provided by browsers is that they are not very attractive. When you are creating a website with great color combinations and fancy animation to improve the browsing experience of your users, the unstyled alert boxes will seem out of place. In this tutorial, you will learn about a library called SweetAlert2  that allows us to create all kinds of alert messages which can be customized to match the look and feel of our own website. Display Simple Alert Messages Before you can show all those sweet alert messages to your users, you will have to install the library and include it in your project. If you are using npm or bower , you can install it by running the following commands: npm install sweetalert2 bower install sweetalert2 You can also get a CDN link  for the latest version of the library and include it in your w...

Up until now our CSS grid tutorials have focused largely on explicit values–track sizes which we’ve explicitly defined. We’ve used rows which are 200px high, or perhaps columns which are 1fr wide, and we’ve explicitly stated how many of them we want. But what if we don’t know (or don’t want to commit to) how many tracks we want? That’s where implicit values come into play–let’s take a look. Starter Grid Here’s a basic grid which you can fork to follow along. It gives us a grid container, with 9 grid items. No column widths or quantities have been defined yet, so each item fills the maximum width available: Defining Just One Column Let’s imagine that we want one column on the left, and that we know exactly how wide we want it: 300px. We can define that by adding grid-template-columns: 300px; to our grid container. But we won’t be given any other columns unless we explicitly define them: That is, unless we explicitly say we want one of the grid items to be placed into (for ex...

Gradients can instantly improve the look and feel of a website, if used carefully with the right color combination. CSS has also come a long way when it comes to applying a gradient on any element and animating it. In this tutorial, we will move away from CSS and create gradient animations using a JavaScript library called Granim.js . This library draws and animates gradients on a given canvas according to the parameters you set when creating a Granim instance. There are different methods which can be used to make your gradient respond to different user events like a button click. In this tutorial, we will learn about this library in detail and create some simple but nice gradient animation effects. Create Solid Color Gradient Animations Before we begin creating any gradient, you will have to include the library in your project. For this, you can either download Granim.js from GitHub or link directly to a CDN . The library version that I am using in this tutorial is 1.1. Some metho...

It's that time of year again, we're looking for some new designers to join our always developing team of awesome instructors.  What We're Looking For Envato Tuts+ has many areas of content, and while we love a variety of avenues, we're specifically looking for instructors to create written content. The topics we're specifically looking for are: Photo manipulation Product mockups Logo design  Adobe Photoshop Procreate Affinity Photo Sketchbook Vector Software Gurus:  Affinity Designer Sketch Inkscape Your area of expertise not listed? We never turn a good application down! You must also be comfortable with the English language. We can proof your content, but we can't rewrite everything for you.  We're looking for content from quick tips to in-depth tutorials. Most of all, we want instructors who can explain themselves clearly and accurately and produce quality end results. Whether you're an expert in Adobe Illustrator, Adobe InDesign, ...

Fabric is a Python library and command-line tool for streamlining the use of SSH for application deployment or systems administration tasks. Fabric is very simple and powerful and can help to automate repetitive command-line tasks. This approach can save time by automating your entire workflow.  This tutorial will cover how to use Fabric to integrate with SSH and automate tasks. Installation Fabric is best installed via pip: $ pip install fabric Getting Started With Fabric Usage Below is a simple function demonstrating how to use Fabric. def welcome(): print("Welcome to getting started with Fabric!") The program above is then saved as fabfile.py in your current working directory. The welcome function can be executed with the fab tool as follows: $ fab welcome Welcome to getting started with Fabric Fabric provides the fab command which reads its configuration from a file,  fabfile.py . The file should be in the directory from which the command is run. A sta...

Nothing on the web happens instantly. The only difference is in the time it takes for a process to complete. Some processes can happen in a few milliseconds, while others can take up to several seconds or minutes. For example, you might be editing a very large image uploaded by your users, and this process can take some time. In such cases, it is a good idea to let the visitors know that the website is not stuck somewhere but it is actually working on your image and making some progress. One of the most common ways to show readers how much a process has progressed is to use progress bars. In this tutorial, you will learn how to use the ProgressBar.js library to create different progress bars with simple and complex shapes. Creating a Basic Progress Bar Once you have included the library in your project, creating a progress bar using this library is easy. ProgressBar.js is supported in all major browsers, including IE9+, which means that you can use it in any website you are cre...

In the previous post on Android user data security, we looked at encrypting data via a user-supplied passcode. This tutorial will shift the focus to credential and key storage. I'll begin by introducing account credentials and end with an example of protecting data using the KeyStore. Security Storing Data Securely on Android Collin Stuart Android How to Secure an Android App Ashraff Hathibelagal Often when working with a third-party service there will be some form of authentication required. This may be as simple as a /login endpoint that accepts a username and password. It would seem at first that a simple solution is to build UI that asks the user to log in, then capture and store their login credentials. However, this isn't the best practice because our app shouldn't need to know the credentials for a 3rd party account. Instead, we can use the Account Manager, which delegates handling that sensitive information for us. Account Manager The Account Manager...

In this article, we're going to explore the Swift Mailer library that allows you to send emails from PHP applications. Starting with installation and configuration, we'll go through a real-world example that demonstrates various aspects of sending emails using the Swift Mailer library. What is Swift Mailer? When it comes to sending emails in PHP applications, there are plethora of options to choose from. You might even end up creating your own wrapper to setup email features quickly. However, you're always in luck if you're using a well maintained and a feature-rich library. The Swift Mailer is a popular library for sending emails from PHP applications, and is widely accepted by the PHP community. It's a feature-rich library in the sense that it covers almost every aspect of sending emails: from setting up different transports to customizing the message that's being sent. In fact, it's a pretty straightforward process to send emails using the Swift Maile...