{"feed":"Envato-Tuts-Code","feedTitle":"Envato Tuts+ Code","feedLink":"/feed/Envato-Tuts-Code","catTitle":"Design","catLink":"/cat/design"}

We started this series by learning how to animate HTML elements using mojs. In the second tutorial, we moved on to animation of built-in SVG shapes using the Shape module. The third tutorial covered more ways of animating SVG shapes using the ShapeSwirl and stagger modules.

Now, we will learn how to animate different SVG shapes in a burst formation using the Burst module. This tutorial will depend on concepts we covered in the previous three tutorials. If you have not already read them, I would suggest that you go through them first.

Creating Basic Burst Animations

The first thing that we need to do before we can create any burst animations is instantiate a Burst object. After that, we can just specify the values of different properties to control how the animation plays out. The names of a lot of properties in the Burst module are the same as the properties in the Shape module. However, these properties perform very different tasks in this case.

The left and right properties determine the initial position of the burst instead of particles inside it. Similarly, the x and y properties determine the shift of the whole burst instead of individual particles.

The radius of the circle formed by all the burst particles is controlled by the radius property. This is very different from the radius property of individual shapes, which determines the...

This tutorial will give an introduction to JSON Web Tokens (JWT) and how to implement JWT authentication in Django.

What Is JWT?

JWT is an encoded JSON string that is passed in headers to authenticate requests. It is usually obtained by hashing JSON data with a secret key. This means that the server doesn't need to query the database every time to retrieve the user associated with a given token.

How JSON Web Tokens Work

When a user successfully logs in using their credentials, a JSON Web Token is obtained and saved in local storage. Whenever the user wants to access a protected URL, the token is sent in the header of the request. The server then checks for a valid JWT in the Authorization header, and if found, the user will be allowed access.

A typical content header will look like this:

Authorization: Bearer eyJhbGciOiJIUzI1NiIsI

Below is a diagram showing this process:

The Concept of Authentication and Authorization

Authentication is the process of identifying a logged-in user, while authorization is the process of identifying if a certain user has the right to access a web resource.

API Example

In this tutorial, we are going to build a simple user authentication system in Django using JWT as the authentication mechanism.

  • Django
  • Python

Let's get started.

Create a directory where you will keep your project and also a virtual environment to install the project dependencies.

Activate the virtual environment:

Create a Django project.

In this post, you'll learn what ExpoKit is and how it is used for adding native functionality to Expo apps. You'll also learn some of its pros and cons. 

In my Easier React Native Development With Expo post, you learned about how Expo makes it easier for beginners to begin creating apps with React Native. You also learned that Expo allows developers to get up and running with developing React Native apps faster because there's no longer a need to set up Android Studio, Xcode, or other development tools.

But as you have also seen, Expo doesn't support all of the native features that an app might need. Though the Expo team is always working to support more native functionality, it's a good idea to learn how to convert an existing Expo project to a standard native project so you can easily transition if the need arises. So, in this two-part series, we'll take a look at how to do that. 

In this post, you'll learn what ExpoKit is and when you're going to need it, as well as which of the Expo platform features are retained and lost once you detach to ExpoKit. 


This tutorial assumes that you've already set up your computer for Expo and React Native development. This means you will need either Android Studio or Xcode or both, depending on where you want to deploy. Be...


A lot of articles, our site included, have focused on helping readers create amazing iOS apps by designing a great mobile user experience (UX). 

However, with the emergence of the Apple Watch a few years ago, alongside CarKit, and more recently the HomePod this year, we are starting to see a lot more apps and IoT appliances that use voice commands instead of visual interfaces. The prevalence of IoT devices such as the HomePod and other voice assistants, as well as the explosion in voice-assistant enabled third-party apps, has given rise to a whole new category of user experience design methodologies, focusing on Voice User Experiences (VUX), or Conversational Design UX.

This has led to Apple focusing on the development of SiriKit a few years ago and providing third-party developers the ability to extend their apps to allow users to converse with their apps more naturally. As SiriKit opens up more to third-party developers, we are starting to see more apps becoming part of SiriKit, such as prominent messaging apps WhatsApp and Skype, as well as payment apps like Venmo and Apple Pay. 

SiriKit’s aim is to blur the boundaries between apps through a consistent conversational user experience that enables apps to remain intuitive, functional and engaging through pre-defined intents and domains. This tutorial will help you apply best practices to create intuitive conversational design user experiences without visual cues. 

Objectives of This Tutorial

This tutorial will teach you to design audibly engaging SiriKit-enabled...

If you're ready to take your WordPress skills to the next level and get your feet wet with PHP, you'll love our newly expanded course, Learn PHP for WordPress.

What You’ll Learn

In this course, Envato Tuts+ instructor Rachel McCollin will give you an overview of what PHP is and how it's used for WordPress themes and plugins, with examples. 

You'll go on to learn how to create a PHP file and use it to output HTML. Then you'll learn to use functions, loops and if statements for coding custom WordPress themes and plugins.

This course has recently been updated with seven new lessons to help you understand the details of PHP and how you can use PHP with WordPress. So dive right in, or watch the introduction below if you want to find out more about it first.

Watch the Introduction
Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 460,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

Application widgets provide your users with easy access to your application’s most frequently used features, while giving your app a presence on the user’s homescreen. By adding a widget to your project, you can provide a better user experience, while encouraging users to remain engaged with your application, as every single time they glance at their homescreen they’ll see your widget, displaying some of your app’s most useful and interesting content.

In this three-part series, we’re building an application widget that has all the functionality you’ll find in pretty much every Android application widget. 

In the first post, we created a widget that retrieves and displays data and performs a unique action in response to onClick events. Then in the second post, we expanded our widget to retrieve and display new data automatically based on a schedule, and in response to user interaction.

We’re picking up right where we left off, so if you don’t have a copy of the widget we created in part one, you can download it from GitHub.

Enhancing Your Widget With a Configuration Activity 

Although our widget functions out of the box, some widgets require initial setup—for example, a widget that displays the user’s messages will require their email address and password. You might also want to give your users the ability to customize the widget, such as changing its colour or even modifying its functionality, like how often the widget updates. 

If your widget is customisable or requires some setup, then you should include a configuration Activity,...

It wasn't very many years ago when everyone was trying to make a quick buck on a blog. Fast-forward just a few years, and the entire scene has changed radically.

Selling advertising on a website isn't as easy as it once was. The "Golden Age of Blogging" has certainly passed, but that doesn't mean monetization has come to an end. It simply requires more effort on behalf of publishers and content creators.

Whether you're selling ads to a third party or you're using your platform to promote your own content, a solid advert plugin can make all of the difference. To get you started, here are the 10 best ad manager WordPress plugins from Envato Market:

1. Ads Pro Plugin - Multi-Purpose WordPress Advertising Manager

Ads Pro Plugin - Multi-Purpose WordPress Advertising Manager is one of the best ad manager WordPress plugins you're going to find.

It's a full-featured tool that provides plenty of advertising options on the front-end with a robust toolset to manage ads. 

With over 20 ways to display ads, you'll also find:

  • 3 billing models
  • 4 payment methods
  • WooCommerce integration
  • language and currency translation
  • random ads, capping option, fully customizable
  • and much, much more!

With helpful support and video guides, your ads will be up and running quickly and easily.

From full online statistics to a useful front-end user panel, the Ads Pro Plugin - Multi-Purpose WordPress Advertising Manager is the ultimate in ad manager WordPress plugins.

2. WP PRO Advertising...

This is part two out of two in a series on cleaning up data using Go. In part one, we covered the basic text facilities of Go and working with CSV files. In this tutorial, we'll dive into actual data cleaning. 

We'll start by understanding the problem of messy data and coming up with a strategy, and then we'll look into verifying individual fields, fixing the data where possible, and deciding what to do about missing values.

Data Cleaning Strategy

A strategy for cleaning up data should dictate what to do when encountering invalid, messy, partial, or missing data. It should also determine what level of reporting is needed about the cleanup process. 

The data we're focusing on here is tabular data, where each row is independent. There are no nested hierarchies or connections between different rows of data. A lot of real-world datasets have this nice property. 


The simplest approach for dealing with invalid data is to remove it. If any field is missing or contains invalid data, just get rid of the whole row. This is very easy, and sometimes it is the right thing to do. If the problematic field is critical and you have no way to recover it then all you can do is drop the entire record.


The best solution is fixing the bad field. In some cases, it's easy to detect the problem and fix it. In the UFO sightings dataset, the state field can be one of the 52 states of the US. 

If the value must be...


One of the most important aspects of any application is validating its input. The most basic approach is just failing if the input doesn't satisfy the requirements. However, in many cases this is not enough. In many systems the data collection is separate from data analysis. It could be a survey or an old dataset. 

In these cases, it is necessary to go over the entire dataset before analysis, detect invalid or missing data, fix what can be fixed, and flag or remove data that can't be salvaged. It is also useful to provide statistics about the quality of the data and what kinds of errors were encountered. 

In this two-part series you'll learn how to use Go's text facilities, slice and dice CSV files, and ensure your data is spotlessly clean. In part one, we'll focus on the foundation of text processing in Go—bytes, runes, and strings—as well as working with CSV files.

Text in Go

Before we dive into data cleaning, let's start with the foundation of text in Go. The building blocks are bytes, runes, and strings. Let's see what each one represents and what the relationships are between them. 


Bytes are 8-bit numbers. Each byte can represent one of a possible 256 values (2 to the power of 8). Each character in the ASCII character set can be represented by a single byte. But bytes are not characters. The reason is that Go as a modern language supports Unicode, where there are way more than 256 separate characters. Enter runes. 



While there is no shortage of books, seminars, articles, etc. created to help women succeed in male-dominated workplaces, there is precious little information designed to help men modify their attitude and behaviour in order to promote gender equality at work. 

This is a problem because, let’s face it, women will never achieve equity in the workplace or in life if they’re the only gender working towards it. Men need to be part of the solution. It's a solution worth fighting for when you consider that, according to a study by the National Center for Women & Information Technology, gender-balanced companies demonstrate superior team dynamics and productivity, perform better financially, and produce teams that stay on schedule and under budget. A win-win scenario for everyone!

So how can men be part of the solution? How can they be allies to women in male-dominated industries like tech, where female numbers are small and where they’re bound to feel outnumbered and isolated? In honour of International Women’s Day, with its theme of #PressforProgress, I offer you 10 things men can do to support women in the tech workplace.

1. Understand What Privilege Is and Accept That You Have It

Before men can think of being allies to women in our quest for gender parity, you first have to acknowledge your privileged position in the workplace and in society as a whole. 

Now I know this is a hard one for many people to...

Most complex tasks in Python can be broken down into simpler subtasks. Recursion helps to achieve this, hence making the code clean and neat. This tutorial will introduce recursion, the benefits of recursion, and how to use it in Python programming.

What Is Recursion?

Recursion is a method of solving a problem with the solutions to smaller instances of the same problem. This approach can be applied to many types of challenges in programming.

The Benefits of Using Recursion

Some of the benefits of using recursion are:

  • Recursion adds simplicity when writing code, hence making it easier to debug.
  • Recursion reduces the amount of time taken by an algorithm to run as a function of the length of the input.
  • Recursion is also preferred when solving very complex problems, especially problems on tree-based structures, because it performs better.
Introduction to the Python Recursive Function

Although recursion seems like a complicated procedure, it's not all that complicated. In layman's terms, assume you have two rectangles A and B. If you add them together, they form a rectangle C. This is in itself a recursive procedure. We have used smaller instances of a rectangle to define itself, and if we were to write a Python function, it would be as follows:

Since a recursive function calls itself, there needs to be a rule or a breakpoint at which the process or loop would terminate. Such a condition is known as a base condition. A base condition...

Have you ever wanted to build a simple website quickly and easily, without a lot of fuss? Did you know that, with a little bit of help from our friends at GitHub, you can begin creating static, content-based websites quickly, easily, and for free? Our new course, Create a Free Website With GitHub Pages, shows you how it's done.

What You’ll Learn

In this course, Derek Jensen will show you how quick and easy it is to use GitHub to create and host your own website, for free, through the magic of GitHub Pages. If you can write it in HTML, CSS, and JavaScript, then GitHub Pages can serve it up for you. 

This is a short course of less than an hour, so you can easily fit it in among your other commitments. By the end, you'll be ready to use GitHub pages for your next site. The short video below gives you an idea of what you can expect.

Watch the Introduction
Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 460,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver...

As you know, it's best practice to always use source control management (SCM) for your projects—even personal projects. Do you know that Android Studio has an amazing integration with Git for source control management? If you didn't know or don't have experience using it, then continue reading this post. Even if you have already used Android Studio's Git integration, you might still pick up some useful tricks in this post.

I'll show you the many features of Git support in Android Studio and also how easy it is to do the different Git operations (commit, push, pull, branch, etc.) from inside Android Studio. 

In this tutorial, I'll walk you through the list of SCM features that are available in Android Studio. We'll look at the following areas:

  • integrating a new Android Studio project with Git
  • working with GitHub or Bitbucket
  • exploring the Version Control window
  • commits
  • branches 
  • pushing and pulling from a remote repository

To be able to follow this tutorial, you'll need:

1. Create an Android Studio Project

Fire up Android Studio and create a new project (you can name it GitApplicationDemo) with an empty activity called MainActivity

2. Integrating Git 

After your Android Studio project has been set up, click the VCS menu, hover on the Import into Version Control menu, and select Create Git Repository...

Then select the top parent folder of your Android Studio Project.


I write a lot of tutorials for Envato Tuts+. These tutorials have headings that need to follow certain rules of capitalization. Tuts+ provides us authors a web-based tool that takes the text of a heading and returns a properly capitalized heading. When I write my tutorials I'm trying to get into the flow, and switching to the capitalization tool breaks my flow. I used to just wing it and do the capitalization myself. 

It turns out that I often made mistakes, which caused extra work to the Tuts+ editors who had to correct them. Being a programmer, I decided to program my way out of the problem. I still write my own headings, but when I'm done, I run a little Python program that parses my article, detects all the headers, and then runs them the through Tuts+ capitalization tool and properly capitalizes all the headings. 

Since the capitalization tool is a web-based application and not an API, I had to automate the browser in order to invoke it and extract the capitalized headings. In this tutorial, you'll learn how to control the browser in Python via Selenium and make it do your bidding. 

How to Capitalize Headings

Capitalizing headings is not rocket science, but it's not trivial either. There are several styles, with some overlap and some variations. This is more or less the consensus:

  • Capitalize all words with four or more letters.
  • Always capitalize the first and last words.
  • Don't capitalize articles: a, an, the.
  • Don't capitalize short conjunctions: and, or, nor, for, but, so, yet.

Then there...


Python is one of the friendliest yet most powerful languages out there. It is easy for beginners to pick up, yet packs a strong punch and is used extensively in diverse domains such as scientific programming, web application programming, and DevOps. But one of the weakest points of Python has been its support for packaging complex applications and their dependencies. 

Over the years, there have been many efforts to improve the situation. In August 2017, I wrote a tutorial on the state of the art in Python packaging: How to Write, Package and Distribute a Library in Python

It's been only four months, and there is a new player in town. Pipenv is now the officially recommended tool for packaging by PyPA (Python Packaging Authority). In this tutorial you'll learn why Pipenv significantly improves the state of packaging and overall development workflow for Python developers and how to use it effectively.

Python Dev Workflow for Humans

The goal of Pipenv is to improve the development workflow of Python developers when it comes to managing dependencies and virtual environments. It is another fine library from the industrious Kenneth Reitz, who is known mostly for the requests package (HTTP for humans), but wrote a few other excellent packages. 

Do We Need Yet Another Packaging Tool?

Yes, we do! Pipenv takes a page from modern package management practices and imports them into the Python world. 

Installing Pipenv

You can install Pipenv with pip install pipenv. You'll get a nice output with emojis:



Have you ever needed to loop through a list, but the operation took a significant amount of time to complete? Have you ever had a program crash because an operation used too much memory? This happened to me when I tried to implement a function that generates prime numbers. 

Generating prime numbers up to a million took far more time than I would have liked. But generating numbers up to 10 million was impossible. My program would crash or just hang. I was already using the sieve of Eratosthenes, which is supposed to be more efficient at generating primes than the brute force approach.

If you find yourself in a similar situation, you can try using a different algorithm. There are searching and sorting algorithms that work better on larger inputs. The downside is those algorithms may be more difficult to grasp right away. Another option is to use a different programming language. 

A compiled language may be able to process the code significantly quicker. But using another language may not be practical. You may also try using multiple threads. Once again, it may not be practical because your programming language would have to support this.

Fortunately, with JavaScript, there is another option. If you have a computationally intensive task, you can use iterators and generators to gain some efficiency. Iterators are a property of certain JavaScript collections. 

Iterators improve efficiency by letting you consume the items in a list one at a time as if they were a stream. Generators...

This is the third part of the series on Higher-Order Components. In the first tutorial, we started from ground zero. We learned the basics of ES6 syntax, higher-order functions, and higher-order components. 

The higher-order component pattern is useful for creating abstract components—you can use them to share data (state and behavior) with your existing components. In the second part of the series, I demonstrated practical examples of code using this pattern. This includes protected routes, creating a configurable generic container, attaching a loading indicator to a component, etc. 

In this tutorial, we will have a look at some best practices and dos and don'ts that you should look into while writing HOCs. 


React previously had something called Mixins, which worked great with the React.createClass method. Mixins allowed developers to share code between components. However, they had some drawbacks, and the idea was dropped eventually. Mixins were not upgraded to support ES6 classes, and Dan Abramov even wrote an in-depth post on why Mixins are considered harmful.

Higher-order components emerged as an alternative to Mixins, and they supported ES6 classes. Moreover, HOCs don't have to do anything with the React API and are a generic pattern that works well with React. However, HOCs have flaws too. Although the downsides of higher-order components might not be evident in smaller projects, you could have multiple higher-order components chained to a single component, just like below.

You shouldn't let the chaining...

The best way to learn a new skill is by putting it into practice. So here's a challenge for you.

In this video from my course, Modern Web Apps With React and Redux, you'll be challenged to create a React Component for displaying a Twitter avatar. You can try solving it on your own (with a hint), or you can let me walk you through the solution.

Challenge: Build a React Component
The Challenge

In this challenge, you need to build a React component for displaying a Twitter avatar. As you can see from the CodePen below, it just takes props.handle and prints out a little URL in an image tag. Very simple. 

What we need to do is write a profile component that uses a Twitter avatar component to show the image and the name. You can see the ReactDOM.render call for some hints.

If you'd like to try this challenge on your own, go ahead! Otherwise, read on as I walk you through the solution.

The Solution

Start by forking the pen so that you can build our own component, and then rename it by adding "MY SOLUTION". 

In our ReactDOM call, we have a Profile component that we're calling, and we give it a name and a handle.

So this should be pretty straightforward. Let's go ahead and create a profile. I'm going to do this as a stateless component, just using a JavaScript function. If...

An app's credibility today highly depends on how the user's private data is managed. The Android stack has many powerful APIs surrounding credential and key storage, with specific features only available in certain versions. This short series will start off with a simple approach to get up and running by looking at the storage system and how to encrypt and store sensitive data via a user-supplied passcode. In the second tutorial, we will look at more complex ways of protecting keys and credentials.

The Basics

The first question to think about is how much data you actually need to acquire. A good approach is to avoid storing private data if you don't really have to.

For data that you must store, the Android architecture is ready to help. Since 6.0 Marshmellow, full-disk encryption is enabled by default, for devices with the capability. Files and SharedPreferences that are saved by the app are automatically set with the MODE_PRIVATE constant. This means the data can be accessed only by your own app. 

It's a good idea to stick to this default. You can set it explicitly when saving a shared preference.

Or when saving a file.

Avoid storing data on external storage, as the data is then visible by other apps and users. In fact, to prevent make it harder for people to copy your app binary and data, you can disallow users from being able to install the app on external storage. Adding android:installLocation with a value of internalOnly to the manifest file will accomplish that.

You can also prevent the app and its data from being backed...

Bitcoin is booming.

In February of 2018, someone bought $400 million worth of Bitcoin. But this isn't just an isolated instance. While $400 million is certainly newsworthy, the truth of the matter is that Bitcoin and other cryptocurrencies are becoming more mainstream. It feels as if we are at a tipping point of cryptocurrency becoming a legitimate currency recognized internationally or failing miserably. Will millions be made? Or millions be lost?

If you're keeping up with cryptocurrency, here are the 10 best Bitcoin and cryptocurrency WordPress plugins from Envato Market:

1. CryptoWP - Realtime Cryptocurrency Market Prices on WordPress (PRO)

CryptoWP - Realtime Cryptocurrency Market Prices on WordPress (PRO) is not only one of the best-looking Bitcoin and cryptocurrency WordPress plugins, it's also one of the most robust. It offers a wide variety of ways to display cryptocurrency market prices. 

"You can convert all coins to supported currencies: USD ($), EUR (€), GBP (£), AUD (A$), CAD (C$), JPY (¥), INR (₹), TRY (₺), ZAR, IDR, KRW."

Features include:

  • comes with three themes—and supports custom CSS
  • real-time notifications and conversions
  • real-time cryptocurrency updates
  • historical value charts
  • fully customizable
  • and much more!

Line charts, table views, and forms for buy/sell alarms—CryptoWP - Realtime Cryptocurrency Market Prices on WordPress (PRO) is one of the best.

2. Cryptocurrency Charts for WordPress

Another great option for displaying Bitcoin and cryptocurrency charts in WordPress is the Cryptocurrency Charts for WordPress plugin. It boasts more than 2,000 different cryptocurrencies, so you'll...