Learn All about Blockchain with This $19 Training Bundle

Contrary to popular belief, you don’t have to be a cryptocurrency guru to understand Bitcoin and its potential for profit. Powered by blockchain technology, Bitcoin and other cryptocurrencies like it are booming as a solution for exchanging value on a decentralized platform. And, with Bitcoin’s value surpassing the $10,000 mark, time may be running out to get in while it’s still profitable. With a lifetime subscription to OneMonth’s Bitcoin & Blockchain Bundle, you can catch up and learn how to buy, send, and invest in Bitcoin for 85% off.

Divided up into two courses, this collection will show you how to think intelligently about the technology of Bitcoin, as well as the skills needed to buy, trade, and store your digital currencies. Honing in on blockchain technology, you’ll come to understand why this platform’s decentralized and public nature gives Bitcoin an edge over regular currencies and why the market is just now recognizing its potential.

Now, a lifetime subscription to OneMonth’s Bitcoin & Blockchain Bundle typically retails for $128, but you can get it on sale for $19, saving a whopping 85 percent off the normal price.

Continue reading %Learn All about Blockchain with This $19 Training Bundle%

Source: Sitepoint

Check Out the #1 WordPress Page Builder

This article was created in partnership with BAWMedia. Thank you for supporting the partners who make SitePoint possible.

Finding just the right WordPress website builder takes time – lots of it — and you also need to know what to look for, which can require a research skillset that would make Sherlock Holmes proud.

What you all too often run into, however, are these tradeoffs:

  • A website builder may have the features you need, but the quality of its overall design leaves something to be desired.
  • Or you find yourself having to clean up messy code, even though “no coding skills needed” was advertised.
  • Or you spend hours working out the details of a special feature your client insists on.

Your search will be much easier and quicker if you simply settle for #1.

How do you know Elementor is #1? It’s more than 600,000 users will tell you so. Elementor’s many special features were created with professional web designers and developers in mind.

Do yourself a big favor, and check out Elementor.

Why Elementor?

Elementor was created with the intent of making WordPress website building a painless and effortless task, without ever being constrained by a theme’s design. Its authors also wanted to ensure that you’d never have to write code to get a design to look precisely as you want it. That translates into providing you with all the design flexibility you are ever going to need.

As a result, all your design work is done on the front-end. You have total customization control over your layouts and full access to whatever design features or elements you require.

Plus, you’ll be creating and viewing the results in real time.

And it’s just going to get better. The 2.0 version of this WordPress page builder will gradually be released over the course of this year, and you can expect the already large customer base to increase by leaps and bounds as new and improved features surface.

Some clients don’t really know what they want, and you need to lend them a helping hand. Others are quite creative and may present you with some real challenges. With this #1 website builder at your fingertips, you can easily take on either type with ease.

What Makes Elementor #1?

Elementor has only been on the market a little more than 2 years. It can be tough to achieve #1 status in that short a time, but that is exactly what this WordPress website builder has accomplished.

Where does this WordPress page builder excel? Home pages, landing pages, online shops, portfolios – you name it. There are no limits. You can switch themes at will to produce whatever you want. You can save your designs for future use, and access them whenever you need to.

You might be saying to yourself “That’s good, but what are some of the features that made Elementor #1 on the market?”

Total Layout Customization

Total layout customization beats out “some” customization and “high” customization every time.

Instead of customizing to the point where you hit a brick wall, Elementor gives you extended control over section features like height, width, column size and position, padding, margins, and gaps. The result is an attractive cleanly structured design.

An Impressive Template Library

This WordPress page builder’s beautiful design templates cover a wide variety of industries, niches, and special needs. You can work with one or several of these pre-designed templates.

You can also start from scratch and design a page yourself. When you do so, you can save it and add it to your library for later use. Your templates can also be imported or exported to share with other designers or used on other websites.

40 Cool Elements Come with the Package

This Elements package includes advanced widgets such as Google Maps and Carousel. The large selection of customizable widgets is guaranteed to add both flexibility and fun to your design work.

It is these widgets that enable you to create layouts down to the minutest of details without having to resort to code. How else could you adjust the spacing inside a progress bar without writing the code yourself?

Elementor also allows you to automatically include your preferred widgets and plugins, another area that allows you to avoid code.

A 110% Responsive Design?

That’s not quite true, but this WordPress site builder’s design team did put in a 110% effort to ensure 100% responsiveness. Since anything less than 100% was unacceptable, your pages will render flawlessly on any device.

Device preview screens, percentage-based element widths, and device visibility control make sure this happens, and you can see it for yourself.

The Perfect Platform for Web Designers and Web Developers

The great thing about Elementor is that it’s praised by both web designers and web developers. Very few WordPress web builders can make that statement, and most of them ignore developers altogether.

Web designers like the freedom of being able to create pixel-perfect layouts without using CSS or coding. This WordPress site builder’s collection of 800+ Google fonts, 400+ icons, and exquisite color palettes are also designer’s favorites.

What web developers like is the freedom Elementor offers when customizing or extending a theme without constraints is required. If you’re a web developer you’ll certainly appreciate Elementor’s first-rate code, custom CSS, SEO optimization features, and the ability to incorporate third party widgets.

Elementor 2.0: The Best Keeps Getting Better

One piece of very good news: Elementor 2.0 is completely compatible with Gutenberg. Although the Gutenberg editor is currently still in beta, it will make design efforts much easier for WordPress users than the present visual editor WordPress users have long complained about.

Elementor 2.0’s features will be released gradually throughout the remainder of 2018. This will give users plenty of time to get acquainted with these new features as they are released, while resolving the WordPress issue.

The upcoming release schedule looks something like this:

  • Blocks: pre-designed layouts that will enable you to mix and match Section designs more quickly.
  • Header & Footer: a much awaited feature that will help you design a page in Elementor that includes the header and footer area.
  • The ability to create single posts and archive pages.
  • The ability to create customized search and 404 pages.
  • Vastly improved design control for WooCommerce shops, product pages and other eCommerce pages.
  • Role Manager: restrict client access to only change content, while preserving your website layout and design.
  • Wide-ranging developer support including many new options for plugin and theme developers who create Elementor extensions, and an extensive resource and tutorial center.
  • A brand-new process igniting dynamic content creation that includes an extensive integration of Advanced Custom Fields & Toolsets. It will blow your mind.

Why You Should Try The Best WordPress Website Builder Now

Elementor is not just another WordPress builder. It’s not even just another premium WordPress builder. Elementor stands alone, and you can tell it is so by the effort the team has expended on solving many of the perplexing issues users have had to face with most theme builders.

Although it’s the first completely free, open source page builder, and has garnered the #1 standing among WordPress website builders, the best is yet to come.

Check it out now, and you’ll soon be building pages faster and easier with the aid of new and improved features, super customizability, and your favorite widgets right at your fingertips. And, did we remember to mention that you’ll never have to write a line of code?

It’s free, so you’ve got nothing to lose and a whole lot to gain. Start saving your designs, reuse and share them, and have fun in the process. Check out the best WordPress page builder!

Continue reading %Check Out the #1 WordPress Page Builder%

Source: Sitepoint

Getting Started With The Web MIDI API

As the web continues to evolve and new browser technologies continue to emerge, the line between native and web development becomes more and more blurred. New APIs are unlocking the ability to code entirely new categories of software in the browser.

Until recently, the ability to interact with digital musical instruments has been limited to native, desktop applications. The Web MIDI API is here to change that.

In this article, we’ll cover the basics of MIDI and the Web MIDI API to see how simple it can be to create a web app that responds to musical input using JavaScript.

What Is MIDI?

MIDI has been around for a long time but has only recently made its debut in the browser. MIDI (Musical Instrument Digital Interface) is a technical standard that was first published in 1983 and created the means for digital instruments, synthesizers, computers, and various audio devices to communicate with each other. MIDI messages relay musical and time-based information back and forth between devices.

A typical MIDI setup might consist of a digital piano keyboard which can send messages relaying information such as pitch, velocity (how loudly or softly a note is played), vibrato, volume, panning, modulation, and more to a sound synthesizer which converts that into audible sound. The keyboard could also send its signals to desktop music scoring software or a digital audio workstation (DAW) which could then convert the signals into written notation, save them as a sound file, and more.

MIDI is a fairly versatile protocol, too. In addition to playing and recording music, it has become a standard protocol in stage and theater applications, as well, where it is often used to relay cue information or control lighting equipment.

A performer plays a digital piano onstage
MIDI lets digital instruments, synthesizers, and software talk to each other and is frequently used in live shows and theatrical productions. Photo by Puk Khantho on Unsplash.

MIDI In The Browser

The WebMIDI API brings all the utility of MIDI to the browser with some pretty simple JavaScript. We only need to learn about a few new methods and objects.


First, there’s the navigator.requestMIDIAccess() method. It does exactly what it sounds like—it will request access to any MIDI devices (inputs or outputs) connected to your computer. You can confirm the browser supports the API by checking for the existence of this method.

if (navigator.requestMIDIAccess) {
    console.log('This browser supports WebMIDI!');
} else {
    console.log('WebMIDI is not supported in this browser.');

Second, there’s the MIDIAccess object which contains references to all available inputs (such as piano keyboards) and outputs (such as synthesizers). The requestMIDIAccess() method returns a promise, so we need to establish success and failure callbacks. And if the browser is successful in connecting to your MIDI devices, it will return a MIDIAccess object as an argument to the success callback.

    .then(onMIDISuccess, onMIDIFailure);

function onMIDISuccess(midiAccess) {

    var inputs = midi.inputs;
    var outputs = midi.outputs;

function onMIDIFailure() {
    console.log('Could not access your MIDI devices.');

Third, MIDI messages are conveyed back and forth between inputs and outputs with a MIDIMessageEvent object. These messages contain information about the MIDI event such as pitch, velocity (how softly or loudly a note is played), timing, and more. We can start collecting these messages by adding simple callback functions (listeners) to our inputs and outputs.

Going Deeper

Let’s dig in. To send MIDI messages from our MIDI devices to the browser, we’ll start by adding an onmidimessage listener to each input. This callback will be triggered whenever a message is sent by the input device, such as the press of a key on the piano.

We can loop through our inputs and assign the listener like this:

function onMIDISuccess(midiAccess) {
    for (var input of midiAccess.inputs.values())
        input.onmidimessage = getMIDIMessage;

function getMIDIMessage(midiMessage) {

The MIDIMessageEvent object we get back contains a lot of information, but what we’re most interested in is the data array. This array typically contains three values (e.g. [144, 72, 64]). The first value tells us what type of command was sent, the second is the note value, and the third is velocity. The command type could be either “note on,” “note off,” controller (such as pitch bend or piano pedal), or some other kind of system exclusive (“sysex”) event unique to that device/manufacturer.

For the purposes of this article, we’ll just focus on properly identifying “note on” and “note off” messages. Here are the basics:

  • A command value of 144 signifies a “note on” event, and 128 typically signifies a “note off” event.
  • Note values are on a range from 0–127, lowest to highest. For example, the lowest note on an 88-key piano has a value of 21, and the highest note is 108. A “middle C” is 60.
  • Velocity values are also given on a range from 0–127 (softest to loudest). The softest possible “note on” velocity is 1.
  • A velocity of 0 is sometimes used in conjunction with a command value of 144 (which typically represents “note on”) to indicate a “note off” message, so it’s helpful to check if the given velocity is 0 as an alternate way of interpreting a “note off” message.

Given this knowledge, we can expand our getMIDIMessage handler example above by intelligently parsing our MIDI messages coming from our inputs and passing them along to additional handler functions.

function getMIDIMessage(message) {
    var command = message.data[0];
    var note = message.data[1];
    var velocity = (message.data.length > 2) ? message.data[2] : 0; // a velocity value might not be included with a noteOff command

    switch (command) {
        case 144: // noteOn
            if (velocity > 0) {
                noteOn(note, velocity);
            } else {
        case 128: // noteOff
        // we could easily expand this switch statement to cover other types of commands such as controllers or sysex

Browser Compatibility And Polyfill

As of the writing of this article, the Web MIDI API is only available natively in Chrome, Opera, and Android WebView.

Browser support for Web MIDI API from caniuse.com
The Web MIDI API is only available natively in Chrome, Opera, and Android WebView.

For all other browsers that don’t support it natively, Chris Wilson’s WebMIDIAPIShim library is a polyfill for the Web MIDI API, of which Chris is a co-author. Simply including the shim script on your page will enable everything we’ve covered so far.

<script src="WebMIDIAPI.min.js"></script>    
if (navigator.requestMIDIAccess) { //... returns true

This shim also requires Jazz-Soft.net’s Jazz-Plugin to work, unfortunately, which means it’s an OK option for developers who want the flexibility to work in multiple browsers, but an extra barrier to mainstream adoption. Hopefully, within time, other browsers will adopt the Web MIDI API natively.

Making Our Job Easier With WebMIDI.js

We’ve only really scratched the surface of what’s possible with the WebMIDI API. Adding support for additional functionality besides basic “note on” and “note off” messages starts to get much more complex.

If you’re looking for a great JavaScript library to radically simplify your code, check out WebMidi.js by Jean-Philippe Côté on Github. This library does a great job of abstracting all the parsing of MIDIAccess and MIDIMessageEvent objects and lets you listen for specific events and add or remove listeners in a much simpler way.

WebMidi.enable(function () {

    // Viewing available inputs and outputs

    // Retrieve an input by name, id or index
    var input = WebMidi.getInputByName("My Awesome Keyboard");
    // OR...
    // input = WebMidi.getInputById("1809568182");
    // input = WebMidi.inputs[0];

    // Listen for a 'note on' message on all channels
    input.addListener('noteon', 'all',
        function (e) {
            console.log("Received 'noteon' message (" + e.note.name + e.note.octave + ").");

    // Listen to pitch bend message on channel 3
    input.addListener('pitchbend', 3,
        function (e) {
            console.log("Received 'pitchbend' message.", e);

    // Listen to control change message on all channels
    input.addListener('controlchange', "all",
        function (e) {
            console.log("Received 'controlchange' message.", e);

    // Remove all listeners for 'noteoff' on all channels

    // Remove all listeners on the input


Real-World Scenario: Building A Breakout Room Controlled By A Piano Keyboard

A few months ago, my wife and I decided to build a “breakout room” experience in our house to entertain our friends and family. We wanted the game to include some kind of special effect to help elevate the experience. Unfortunately, neither of us have mad engineering skills, so building complex locks or special effects with magnets, lasers, or electrical wiring was outside the realm of our expertise. I do, however, know my way around the browser pretty well. And we have a digital piano.

Thus, an idea was born. We decided that the centerpiece of the game would be a series of passcode locks on a computer that players would have to “unlock” by playing certain note sequences on our piano, a la Willy Wonka.

This is a musical lock
This is a musical lock

Sound cool? Here’s how I did it.


We’ll begin by requesting WebMIDI access, identifying our keyboard, attaching the appropriate event listeners, and creating a few variables and functions to help us step through the various stages of the game.

// Variable which tell us what step of the game we're on. 
// We'll use this later when we parse noteOn/Off messages
var currentStep = 0;

// Request MIDI access
if (navigator.requestMIDIAccess) {
    console.log('This browser supports WebMIDI!');

    navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);

} else {
    console.log('WebMIDI is not supported in this browser.');

// Function to run when requestMIDIAccess is successful
function onMIDISuccess(midiAccess) {
    var inputs = midiAccess.inputs;
    var outputs = midiAccess.outputs;

    // Attach MIDI event "listeners" to each input
    for (var input of midiAccess.inputs.values()) {
        input.onmidimessage = getMIDIMessage;

// Function to run when requestMIDIAccess fails
function onMIDIFailure() {
    console.log('Error: Could not access MIDI devices.');

// Function to parse the MIDI messages we receive
// For this app, we're only concerned with the actual note value,
// but we can parse for other information, as well
function getMIDIMessage(message) {
    var command = message.data[0];
    var note = message.data[1];
    var velocity = (message.data.length > 2) ? message.data[2] : 0; // a velocity value might not be included with a noteOff command

    switch (command) {
        case 144: // note on
            if (velocity > 0) {
            } else {
        case 128: // note off
        // we could easily expand this switch statement to cover other types of commands such as controllers or sysex

// Function to handle noteOn messages (ie. key is pressed)
// Think of this like an 'onkeydown' event
function noteOn(note) {

// Function to handle noteOff messages (ie. key is released)
// Think of this like an 'onkeyup' event
function noteOff(note) {

// This function will trigger certain animations and advance gameplay 
// when certain criterion are identified by the noteOn/noteOff listeners
// For instance, a lock is unlocked, the timer expires, etc.
function runSequence(sequence) {

Step 1: Press Any Key To Begin

To kick off the game, let’s have the players press any key to begin. This is an easy first step which will clue them into how the game works and also start a countdown timer.

function noteOn(note) {
    switch(currentStep) {
        // If the game hasn't started yet.
        // The first noteOn message we get will run the first sequence
        case 0: 
            // Run our start up sequence

            // Increment the currentStep so this is only triggered once

function runSequence(sequence) {
    switch(sequence) {
        case 'gamestart':            
            // Now we'll start a countdown timer...
            // code to trigger animations, give a clue for the first lock

Step 2: Play The Correct Note Sequence

For the first lock, the players must play a particular sequence of notes in the right order. I’ve actually seen this done in a real breakout room, only it was with an acoustic upright piano rigged to a lock box. Let’s re-create the effect with MIDI.

For every “note on” message received, we’ll append the numeric note value to an array and then check to see if that array matches a predefined array of note values.

We’ll assume some clues in the breakout room have told the players which notes to play. For this example, it will be the beginning of the tune to “Amazing Grace” in the key of F major. That note sequence would look like this.

A visual representation of the first nine notes of “Amazing Grace” on a piano
This is the correct sequence of notes that we’ll be listening for as the solution to the first lock.

The MIDI note values in array form would be: [60, 65, 69, 65, 69, 67, 65, 62, 60].

var correctNoteSequence = [60, 65, 69, 65, 69, 67, 65, 62, 60]; // Amazing Grace in F
var activeNoteSequence = [];

function noteOn(note) {
    switch(currentStep) {
        // ... (case 0)

        // The first lock - playing a correct sequence
        case 1:

            // when the array is the same length as the correct sequence, compare the two
            if (activeNoteSequence.length == correctNoteSequence.length) {
                var match = true;
                for (var index = 0; index < activeNoteSequence.length; index++) {
                    if (activeNoteSequence[index] != correctNoteSequence[index]) {
                        match = false;

                if (match) {
                    // Run the next sequence and increment the current step
                } else {
                    // Clear the array and start over
                    activeNoteSequence = [];

function runSequence(sequence) {
    switch(sequence) {
        // ...

        case 'lock1':
            // code to trigger animations and give clue for the next lock

Step 3: Play The Correct Chord

The next lock requires the players to play a combination of notes at the same time. This is where our “note off” listener comes in. For every “note on” message received, we’ll add that note value to an array; for every “note off” message received, we’ll remove that note value from the array. Therefore, this array will reflect which notes are currently being pressed at any time. Then, it’s a matter of checking that array every time a note value is added to see if it matches a master array with the correct values.

For this clue, we’ll make the correct answer a C7 chord in root position starting on middle C. That looks like this.

A visual representation of a C7 chord on a piano
These are the four notes that we’ll be listening for as the solution to the second lock.

The correct MIDI note values for this chord are: [60, 64, 67, 70].

var correctChord = [60, 64, 67, 70]; // C7 chord starting on middle C
var activeChord = [];

function noteOn(note) {
    switch(currentStep) {
        // ... (case 0, 1)

        case 2:
            // add the note to the active chord array

            // If the array is the same length as the correct chord, compare
            if (activeChord.length == correctChord.length) {
                var match = true;
                for (var index = 0; index < activeChord.length; index++) {
                    if (correctChord.indexOf(activeChord[index]) < 0) {
                        match = false;

                if (match) {

function noteOff(note) {
    switch(currentStep) {
        case 2:
            // Remove the note value from the active chord array
            activeChord.splice(activeChord.indexOf(note), 1);

function runSequence(sequence) {
    switch(sequence) {
        // ...

        case 'lock2':
            // code to trigger animations, stop clock, end game


Now all that’s left to do is to add some additional UI elements and animations and we have ourselves a working game!

Here’s a video of the entire gameplay sequence from start to finish. This is running in Google Chrome. Also shown is a virtual MIDI keyboard to help visualize which notes are currently being played. For a normal breakout room scenario, this can run in full-screen mode and with no other inputs in the room (such as a mouse or computer keyboard) to prevent users from closing the window.

WebMIDI Breakout Game Demo (watch in Youtube)

If you don’t have a physical MIDI device laying around and you still want to try it out, there are a number of virtual MIDI keyboard apps out there that will let you use your computer keyboard as a musical input, such as VMPK. Also, if you’d like to further dissect everything that’s going on here, check out the complete prototype on CodePen.

See the Pen WebMIDI Breakout Room Demo by Peter Anglea (@peteranglea) on CodePen.


MIDI.org says that “Web MIDI has the potential to be one of the most disruptive music [technologies] in a long time, maybe as disruptive as MIDI was originally back in 1983.” That’s a tall order and some seriously high praise.

I hope this article and sample app has gotten you excited about the potential that this API has to spur the development of new and exciting kinds of browser-based music applications. In the coming years, hopefully, we’ll start to see more online music notation software, digital audio workstations, audio visualizers, instrument tutorials, and more.

If you want to read more about Web MIDI and its capabilities, I recommend the following:

And for further inspiration, here are some other examples of the Web MIDI API in action:

Smashing Editorial(rb, ra, hj, il)

Deploy PHP Web Applications Using Laravel Forge

Developers love to automate things—for every process between development and production, they are keen to have a script that makes their workflow easier. This is also the case with deployment.

The process of pushing the final build and deploying the app should be as easy as pressing a Deploy now button, but that is not what happens most of the time. We end up investing our time and resources in configuring the server, setting up the environment, moving files that we thought were not relevant for production builds, and so on. 

Some of us prefer to send files to the server manually using FTP or have the code pushed into a GitHub repo, whereas others prefer a deployment tool to make the process easier. One such tool that makes PHP deployment a breeze is Laravel Forge. 

Don’t let the Laravel brand name mislead you. Apart from Laravel, you can use the service to host WordPress, Symphony, Statamic, or any other web project as long as it’s PHP. Personally, I like Laravel Forge for its simplicity and ease of getting used to. 

In this tutorial, I am going to take you through the steps to hook Laravel Forge with AWS and explore what it has to offer.


Laravel Forge lets you spin up cloud servers and handle deployment processes using Git and some of the popular server providers available. The process is explained below:

First, you will need to connect AWS or any other cloud provider to your Forge account. Next, link your source control such as GitHub to Forge. You will now be able to create servers. Install your source control repository on the server. Finally, press the deploy button. Easy enough, right?

Servers provisioned with Laravel Forge come shipped with the following stack:

  • Ubuntu 16.06 
  • Nginx
  • PHP 7.2/7.1/7.0/5.6
  • MySQL/MariaDB/Postgres
  • Redis
  • Memcached

Once the server has been created, you can further configure things. 

When you sign up, you can choose between the different plans that they offer. I opted for the $12/month basic plan; however, you will get a free trial with access to everything on the list for five days. 

Once you’ve logged in, you will see something like this below. 

Screenshot of Laravel Forge main screen once youre logged in

You can choose between Digital Ocean, AWS, Linode, and Vultr for the service provider. Alternatively, you can use Forge with a custom VPC too. As for the source control, Forge supports GitHub, GitLab, and Bitbucket. In this tutorial, I am going to discuss the basics of configuring AWS to work with Forge and GitHub for source control. Once you are done, you will be able to create and provision any number of servers.

If you’re using another service provider on the list, you can skip this step and catch up with us later, after we’ve configured AWS and Laravel Forge.

Setting Up Laravel Forge and AWS

To set up Forge and AWS, here are the steps that you need to follow.

1. Log in to Laravel Forge

Log in to Laravel Forge and choose AWS as the service provider. You’ll be asked for an Access Key ID (key) and a Secret Access Key (secret). You will need to create a specific IAM user with a policy that provides sufficient access to Laravel Forge. IAM is Amazon’s way of mapping permissions on each user so that you can revoke access if anything goes wrong.

2. Create a New IAM User

Sign in to AWS Console and create a new IAM user.

Create an IAM user on AWS with programmatic access

Give the user a meaningful name and check the box that says Programmatic Access.

3. Choose the Right Policy

Set the right permission for the laravel-forge IAM user. Create a new user group because user groups are ideal for managing permissions. Now the natural question is, “What policies should the forge user have access to?” Although you could provide it with AdministratorAccess, you shouldn’t. 

Create a user group with the right permissions

If you need Forge to create and provision servers on your behalf, you will need to add two policies:

  1. AmazonEC2FullAccess
  2. AmazonVPCFullAccess

4. Save the Credentials and Confirm

Confirm the IAM account and, on the next page, you’ll find the Access Key and the Secret Code. 

Newly generated Access key and secret

Head over to the Laravel Forge page and paste them there. That’s it.

5. Link Your GitHub Account to Forge

Connect your GitHub/Bitbucket account to Forge if you haven’t done that already. Forge will add a public key to your account when you create a server. If you need to add a new service provider and/or update the source control, you have those options inside your profile.

Creating a New Server

Go to Create Server page to add a new server. 

Laravel Forges interface for adding a new server

Choose t2.micro with 1GB RAM if you’re on AWS free tier. As for the other settings, I am going to go with the defaults. This includes MySQL for the database and PHP version 7.2.  You can customize the database name later on. To keep things simple, I’ve decided not to use a load balancer. If you’re wondering about the post-production recipe, I have covered that towards the end of this tutorial.

It might take up to five minutes for the server to be created. You will be given the credentials for the sudo access. Store them in a secure place so that you can use them in the future. To see that things are working as expected, go to the server’s IP address and you should see the output of phpinfo() on your screen.

Server Management Interface

The interface that you see after creating a server is the server management dashboard. 

Server management dashboard

You can do a whole lot of things here, such as:

  • site management
  • adding SSH keys
  • database configuration
  • updating PHP settings
  • scheduling a task
  • starting a daemon
  • managing network and configure firewall
  • monitoring application using Blackfire or Papertail
  • configuring meta settings

That’s a lot of features bundled in there. I’ve covered the important ones in this tutorial. Let’s start with the site management. As per the Forge docs:

Sites represent each “domain” on your server. The “default” site is included with each freshly provisioned server; however, you should delete it and create a new site with a valid domain name when you are ready to launch your production site. 

As you can see, Forge has already set up a default site for us. You can create any number of sites and route them to your subdomains. For the purpose of this tutorial, I will stick to the default site. The web directory is set to /public by default. This is how it should be configured for Laravel and most other web applications. 

If you click on a specific site, you will see the site management interface. You can manage, deploy, and configure individual sites from here. 

Site Management Interface

Here is what the interface initially looks like. 

You can add the Git repo from this screen

You can either install from a Git repository or install WordPress. For the purpose of this tutorial, I’ve created a sample Contact us application that you can fork into your account. You can specify the name of the project and the branch. Once you’re done, you should have the controls for deploying your application. 

Site management dashboard with deployment controls

I will give you a quick tour of the options available.

Deploy Now and Quick Deploy

To deploy, you can manually deploy using the Deploy now button. Alternatively, you can enable the Quick Deploy option, which automatically deploys the project when you push code into the master branch of the chosen GitHub repo. 

Deployment Script

The default deploy script pulls code from the repository, installs dependencies, starts the server, and runs migrations every time the app is deployed. Here’s the actual deployment script.

If you need to tweak it and add something extra, you can.

Deployment Trigger URL

You can use this to integrate your app into a third-party service or create a custom deployment script. When the URL receives a request, the deployment script is triggered. 

Update the Repo and the Branch

If you need to update the branch or install a newer version of the same project on a different repository, you can use these options. If you are updating the branch, you might have to update the branch name in the deployment script too.


Forge automatically generates an environment file for the application. Some of the details such as database credentials are automatically added to the environment. However, if the app uses an API, you can place the API key safely in the environment. Even if you’re running a generic PHP web app, you can access the ENV variables using the getenv() method.

Queue Worker

Starting a queue worker in Forge is the same as running the queue:work Artisan command. Forge manages queue workers using a process monitor called Supervisor so that the process keeps on running permanently. You can create multiple queues based on queue priority or any other classification that you find useful.


Securing SSL for a website was anything but easy and free in the past. Forge lets you install an existing certificate or you can obtain a free certificate from LetsEncrypt. It’s fast and easy. If you need SSL for wildcard subdomains, you can add the free Cloudflare certificates to Forge.

Back to the Server Management interface, we have SSH keys.

Adding SSH Keys

Although most of the configurable options are available on the dashboard, if you need to connect to the server, you should do that using SSH. SSH is the more secure way of logging into a VPS and provides more protection than passwords. 

To access the server via SSH, you will need to generate a key pair if you haven’t already. The public key will be made accessible to the server, and the private key will reside in your host. You can then use the setup to connect to the server instance. 

Adding SSH keys to Forge server

Note: The SSH key added from the server management dashboard will be specific to that server. If you need to automatically add keys to all the servers from here on, you can add them from your Profile settings.

To generate a key pair, run the following command.

You will be asked a couple of questions such as the file where you would like to store the key and the passphrase for additional security. Next, add the SSH key to the ssh-agent.

Copy the public key and add it to Forge’s list of SSH keys.

Configuring PHP and MySQL

You can use the interface to configure PHP and MySQL. For the database, the available options include:

  • Create new databases.
  • Add new users.
  • Update users’ access to a database.
  • Update Forge’s knowledge about the password.

Make sure that you fill in the updated data in your .env file. 

You can configure the following PHP settings:

  • Upgrade to the latest version of PHP.
  • Change the upload file size.
  • Optimize OPCache for production so that the compiled PHP code will be stored in memory.

Other Important Settings

Here I’ve listed some of the other settings available.

Scheduling a Task

You can use Forge’s scheduler to schedule recurring tasks or run cron jobs. If you need to send out email periodically, clean up something, or run a script, you can use the task scheduler. A task is created by default that runs composer self-update on a nightly basis. You can try scheduling a new one with a frequency of your choice.

Starting a Daemon

A daemon is a computer program that runs in a background process. Laravel Forge lets you start a daemon and uses Supervisor to ensure that the daemon stays running. If the daemon crashes for some reason, Supervisor will restart the script automatically. 

Monitoring the Application

Laravel Forge has built-in support for tools that monitor your application for performance measures by gathering data about the resources such as memory, CPU time, and I/O operations. The tools available are Blackfire.io and Papertrail. To start profiling your application, you just need to retrieve the right credentials from the third-party website and that’s it.

Configuring the Server Network and Firewall

If you need to update the firewall settings, you don’t have to go to the AWS console to make that happen. You can create new firewall rules from the dashboard. If you have other servers provisioned using the same provider and region, you can set up a server network so that they can communicate painlessly. 


Laravel Forge is an incredible tool that makes deployment a piece of cake. It has tons of features and an easy-to-use UI that lets you create and provision servers and deploy applications without any hassle. Once you’ve configured the service provider, chances are high that you won’t need to access the AWS console for managing the server again. 

In this tutorial, I’ve covered the basics for configuring AWS with Laravel Forge and the steps for provisioning a server and deploying an application. I’ve also discussed almost all the features available in the Forge interface.

For those of you who are either just getting started with Laravel or looking to expand your knowledge, site, or application with extensions, we have a variety of things you can study in Envato Market.

Do you have any experience to share with deploying PHP applications using Laravel Forge or any other popular deployment tool? Let us know in the comments. 

Source: Nettuts Web Development

Understanding Component Architecture: Refactoring an Angular App

In part one or this series, we learned how to get our Todo application up and running and deploy it to GitHub pages. This worked just fine, but unfortunately the whole app was crammed into a single component. In this article, we’ll examine a more modular component architecture. We’ll look at how to break this single component into a structured tree of smaller components that are easier to understand, re-use and maintain.

This article is part 2 of the SitePoint Angular 2+ Tutorial on how to create a CRUD App with the Angular CLI.

  1. Part 0— The Ultimate Angular CLI Reference Guide
  2. Part 1— Getting our first version of the Todo application up and running
  3. Part 2— Creating separate components to display a list of todos and a single todo
  4. Part 3— Update the Todo service to communicate with a REST API
  5. Part 4— Use Angular router to resolve data.

You don’t need to have followed part one of this tutorial, for part two to make sense. You can simply grab a copy of our repo, checkout the code from part one, and use that as a starting point. This is explained in more detail below.

Angular Component Architecture

A Quick Recap

So let’s look at what we covered in part one in slightly more detail. We learned how to:

  • initialize our Todo application using the Angular CLI
  • create a Todo class to represent individual todos
  • create a TodoDataService service to create, update and remove todos
  • use the AppComponent component to display the user interface
  • deploy our application to GitHub pages.

The application architecture of part 1 looked like this:

Application Architecture

The components we discussed are marked with a red border.

In this second article, we’ll delegate some of the work that AppComponent is doing to smaller components that are easier to understand, re-use and maintain.

We’ll create:

  • a TodoListComponent to display a list of todos
  • a TodoListItemComponent to display a single todo
  • a TodoListHeaderComponent to create a new todo
  • a TodoListFooterComponent to show how many todos are left.

Application Architecture

By the end of this article, you’ll understand:

  • the basics of Angular component architecture
  • how you can pass data into a component using property bindings
  • how you can listen for events emitted by a component using event listeners
  • why it is a good practice to split components into smaller reusable components
  • the difference between smart and dumb components and why keeping components dumb is a good practice.

So let’s get started!

Up and Running

The first thing you’ll need to follow along with this article is the latest version of the Angular CLI. You can install this with the following command:

npm install -g @angular/cli@latest

If you need to remove a previous version of of the Angular CLI, here’s how:

npm uninstall -g @angular/cli angular-cli
npm cache clean
npm install -g @angular/cli@latest

After that you’ll need a copy of the code from part one. This is available at https://github.com/sitepoint-editors/angular-todo-app. Each article in this series has a corresponding tag in the repository so you can switch back and forth between the different states of the application.

The code that we ended with in part one and that we start with in this article is tagged as part-1. The code that we end this article with is tagged as part-2.

You can think of tags like an alias to a specific commit id. You can switch between them using git checkout. You can read more on that here.

So, to get up and running (the the latest version of the Angular CLI installed) we would do:

git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
npm install
git checkout part-1
ng serve

Then visit http://localhost:4200/. If all’s well, you should see the working Todo app.

The Original AppComponent

Let’s open src/app/app.component.html and have a look at the AppComponent that we finished with in part one:

<section class="todoapp">
  <header class="header">
    <input class="new-todo" placeholder="What needs to be done?" autofocus="" [(ngModel)]="newTodo.title" (keyup.enter)="addTodo()">
  <section class="main" *ngIf="todos.length > 0">
    <ul class="todo-list">
      <li *ngFor="let todo of todos" [class.completed]="todo.complete">
        <div class="view">
          <input class="toggle" type="checkbox" (click)="toggleTodoComplete(todo)" [checked]="todo.complete">
          <button class="destroy" (click)="removeTodo(todo)"></button>
  <footer class="footer" *ngIf="todos.length > 0">
    <span class="todo-count"><strong>{{todos.length}}</strong> {{todos.length == 1 ? 'item' : 'items'}} left</span>

Here’s its corresponding class in src/app/app.component.ts:

import {Component} from '@angular/core';
import {Todo} from './todo';
import {TodoDataService} from './todo-data.service';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [TodoDataService]
export class AppComponent {

  newTodo: Todo = new Todo();

  constructor(private todoDataService: TodoDataService) {

  addTodo() {
    this.newTodo = new Todo();

  toggleTodoComplete(todo: Todo) {

  removeTodo(todo: Todo) {

  get todos() {
    return this.todoDataService.getAllTodos();


Although our AppComponent works fine technically, keeping all code in one big component does not scale well and is not recommended.

Adding more features to our Todo application would make the AppComponent larger and more complex, making it harder to understand and maintain.

Therefore, it’s recommended to delegate functionality to smaller components. Ideally the smaller components should be configurable so that we don’t have to rewrite their code when the business logic changes.

For example, in part three of this series we’ll update the TodoDataService to communicate with a REST API, and we want to make sure that we won’t have to change any of the smaller components when we refactor the TodoDataService.

If we look at the AppComponent template, we can extract its underlying structure as:

<!-- header that lets us create new todo -->

<!-- list that displays todos -->
<ul class="todo-list">

    <!-- list item that displays single todo -->
    <li>Todo 1</li>

    <!-- list item that displays single todo -->
    <li>Todo 2</li>

<!-- footer that displays statistics -->

If we translate this structure to Angular component names, we get:

<!-- TodoListHeaderComponent that lets us create new todo -->

<!-- TodoListComponent that displays todos -->

    <!-- TodoListItemComponent that displays single todo -->

    <!-- TodoListItemComponent that displays single todo -->

<!-- TodoListFooterComponent that displays statistics -->

Let’s see how we can use the power of Angular’s component-driven development to make this happen.

A More Modular Component Architecture — Creating the TodoListHeaderComponent

Let’s start by creating the TodoListHeader component.

From the root of our project, we use Angular CLI to generate the component for us:

$ ng generate component todo-list-header

This generates the following files for us:

create src/app/todo-list-header/todo-list-header.component.css
create src/app/todo-list-header/todo-list-header.component.html
create src/app/todo-list-header/todo-list-header.component.spec.ts
create src/app/todo-list-header/todo-list-header.component.ts

It automatically adds TodoListHeaderComponent to the AppModule declarations:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

// Automatically imported by Angular CLI
import { TodoListHeaderComponent } from './todo-list-header/todo-list-header.component';

  declarations: [

    // Automatically added by Angular CLI
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Adding a component to the module declarations is required to make sure that all view templates in the module can use it the component. Angular CLI conveniently added TodoListHeaderComponent for us so we don’t have to add it manually.

If TodoListHeaderComponent was not in the declarations and we used it in a view template, Angular would throw the following error:

Error: Uncaught (in promise): Error: Template parse errors:
'app-todo-list-header' is not a known element:
1. If 'app-todo-list-header' is an Angular component, then verify that it is part of this module.
2. If 'app-todo-list-header' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

To learn more about module declarations, make sure to check out the Angular Module FAQ.

Now that we have all files generated for our new TodoListHeaderComponent, we can move the <header> element from src/app/app.component.html to src/app/todo-list-header/todo-list-header.component.html:

<header class="header">
  <input class="new-todo" placeholder="What needs to be done?" autofocus="" [(ngModel)]="newTodo.title"

Also add the corresponding logic to src/app/todo-list-header/todo-list-header.component.ts:

import { Component, Output, EventEmitter } from '@angular/core';
import { Todo } from '../todo';

  selector: 'app-todo-list-header',
  templateUrl: './todo-list-header.component.html',
  styleUrls: ['./todo-list-header.component.css']
export class TodoListHeaderComponent {

  newTodo: Todo = new Todo();

  add: EventEmitter<Todo> = new EventEmitter();

  constructor() {

  addTodo() {
    this.newTodo = new Todo();


Instead of injecting the TodoDataService in our new TodoListHeaderComponent to save the new todo, we emit an add event and pass the new todo as an argument.

We already learned that the Angular template syntax allows us to attach a handler to an event. For example, consider the following code:

<input (keyup.enter)="addTodo()">

This tells Angular to run the addTodo() method when the enter key was pressed inside the input. This works because the keyup.enter event is an event that is defined by the Angular framework.

However, we can also let a component emit its own custom events, by creating an EventEmitter and decorating it with the @Output() decorator:

import { Component, Output, EventEmitter } from '@angular/core';
import { Todo } from '../todo';

  // ...
export class TodoListHeaderComponent {

  // ...

  add: EventEmitter<Todo> = new EventEmitter();

  addTodo() {
    this.newTodo = new Todo();


So we can now assign an event handler in the view template using Angular’s event binding syntax:

<app-todo-list-header (add)="onAddTodo($event)"></app-todo-list-header>

Every time we call add.emit(value) in TodoListHeaderComponent, the onAddTodo($event) handler will be called and $event will be equal to value.

This decouples our TodoListHeaderComponent from the TodoDataService and allows the parent component to decide what needs to happen when a new todo is created.

When we update the TodoDataService to communicate with a REST API in part three, we won’t have to worry about the TodoListHeaderComponent because it’s not even aware that the TodoDataService exists.

Continue reading %Understanding Component Architecture: Refactoring an Angular App%

Source: Sitepoint

Monthly Web Development Update 3/2018: Service Workers, Building A CDN, And Cheating At Design

Service Worker is probably one of the most misrepresented technologies we currently have. When I hear people talking about it, the topic almost always revolves around serving an app when a user is offline. However, Service Worker can do so much more than that, and every week I come across new articles that show how powerful the technology really is.

This month, for example, we can learn how to use Service Worker for cross-tab messaging and to load off requests into the background with the Background Sync API. I think the toolset we now have in our browsers already allows us to build great experiences regardless of the network state. Now it’s up to us to make the experiences so great that users truly love them. And that’s probably the hardest part.


Sketch 49
Sketch 49 has arrived, and with it comes the new Prototyping in Sketch feature which lets you see the entire flow in action. (Image credit)


  • Ed Ellson examined Chrome’s Background Sync API and the retry strategy it uses to perform a request. By allowing synchronization in the background after a first attempt has failed, the API helps us improve the browsing experience for users who go offline or are on unstable connections.


Cheating At Design
Use color and weight to create visual hierarchy instead of size is only one of the seven practical tips for cheating at design that Adam Wathan and Steve Schoger share. (Image credit)


  • With GraphQL you can query exactly what you want whenever you want. This is amazing for working with an API but also has complex security implications. Instead of asking for legitimate, useful data, a malicious actor could submit an expensive, nested query to overload your server, database, network, or all of these. To prevent this from happening, Max Stoiber shows us how we can secure the GraphQL API in our projects.


  • WebKit is introducing the Storage Access API. The new API targets one of the major issues with Safari’s Intelligent Tracking Protection (ITP): Identifying users who are logged in to a first-party service but view content of it embedded on a third party (YouTube videos on a blog, for example). The Storage Access API allows third-party embeds to request access to their first-party cookies when the user interacts with them. A good solution to protect user privacy by default and allow exceptions on request.

Web Performance

  • Janos Pasztor built his own Content Delivery Network because he thinks it can be a better solution than using existing third parties. The code for the CDN of his personal website is now available on Github. A nice web performance article that looks at common solutions from a different angle.
  • A year after Facebook’s announcement to broadly use Cache-Control: Immutable, Paul Calvano examined how widespread its usage is on the web — apart from the few big players. Interesting research and it’s still sad to see that this useful performance tool is used so little. At Colloq, we use it quite a lot, which saves us a lot of traffic and load on our servers and enables us to serve a lot of pages nearly instantly to recurring users.
Global stats of a self-built CDN
Global stats for the custom CDN that Janos Pasztor built. (Image credit)





Accessibility Checklist
The Accessibility Checklist helps build accessibility into your process no matter your role or stage in a project. (Image credit)

Work & Life

  • This week I read an article by Alex Duloz, and his words still stick with me: “When we develop a new application, when we post content on the Internet, whatever we do that people will have access to, we should consider just for a minute if our contribution adds up to the level of dumbness kids/teenagers are exposed to. If it does, we should refrain from going live.” The truth is, most of us, including me, don’t consider this before posting on the Internet. We create funny things, share funny pictures and try to get fame with silly posts. But in reality, we shape society with this. Let’s try to provide more useful resources and make the consumption of this more enjoyable so young people can profit from our knowledge and not only view things we think are funny. “We should always consider how teenagers will use what we release.”
  • The MIT OpenCourseWare released a lot of free audio and video lectures. This is amazing news and makes great content available to broader masses.
  • Jake Knapp says great work requires idealism and cynicism and has strong arguments to back up this theory. An article worth reading.
  • There’s an important article on how unhappiness has grown in America’s population since around the year 2000. It reveals that while income inequality might play a role, the more important aspect is that young people who use a lot of digital media are unhappier than those who use it only up to an hour a day. Interestingly, people who don’t use digital media at all, are unhappy, too, so the outcome of this could be that we should try to use digital media only moderately — at least in our private lives. I bet it’ll make a big difference.
  • Following the theory of Michael Bradley, projects don’t necessarily need a roadmap for success. Instead, he suggests to create a moral compass that points out why the project exists and what its purpose is.

Going Beyond…

We hope you enjoyed this Web Development Update. The next one is scheduled for April 13th. Stay tuned.

Source: Smashing Magazine

Getting Started With the Mojs Animation Library: The Burst Module

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 size of those shapes. In the case of a burst, the radius determines how much further apart the individual shapes in it are going to be.

The number of shapes or particles in a single burst can be specified using the count property. By default, there will be five particles in each burst that you create. All these particles are evenly spaced over the circumference of the burst. For example, if there are four particles, they will be placed at 90 degrees to each other. If there are three particles, they will be placed at 120 degrees.

If you don’t want the burst particles to cover the whole 360 degrees, you can specify the portion that should be covered using the degree property. Any value above 0 is valid for this property. The specified number of degrees will be evenly distributed between all the particles. If the degree value is over 360, the shapes might overlap.

The angle specified using the angle property determines the angle of the whole burst. In this case, individual particles are not rotated around their own center but around the center of the burst. This is similar to how the earth revolves around the sun, which is different from the rotation of the earth on its own axis.

The scale property scales the value of all physical properties of the burst and in turn individual shapes. Just like other burst properties, all shapes in it would be scaled at once. Setting the burst scale to 3 will increase the radius of the whole burst as well as the size of individual shapes by 3.

In the following code snippet, we are creating five different bursts using the properties we just discussed.

You can see that burstA and burstE only differ in the number of degrees that they have to cover. Since the particles in burstA have to cover 360 degrees (the default value), they are placed 360/20 = 18 degrees apart. On the other hand, the particles in burstE are placed 3600/20 = 180 degrees apart. Starting from zero, the first particle is placed at 0 degrees, and the next is placed at 180 degrees. 

The third particle is then placed at 360 degrees, which is basically equal to 0 degrees. The fourth particle is then placed at 540 degrees, but that is basically equal to 180 degrees. In other words, all the odd numbered particles are placed at 0 degrees, and all the even number particles are placed at 180 degrees. In the end, you only see two particles because all others overlap with the first two.

It is important to remember that you cannot directly control the duration, delay or easing function of the burst animations. The module determines all these values automatically based on the values of different children being animated.

Manipulating Individual Burst Particles

So far in this tutorial, all the particles in a burst had the same animation applied to them. Their angle, scale, radius, and position all changed by the same value. Moreover, we were not able to control the duration and delay of either the individual particles or the burst as a whole. The mojs Burst module does not have a set of properties which can directly change all these values. However, we can specify the animation value for individual particles, which in turn affects the burst animation.

All the particles in a burst animation are considered to be children of the original Burst object. Therefore, mojs allows us to control the animation of individual burst particles using a children property, which accepts an object as its value. You can use all the ShapeSwirl properties except x and y inside the children object. This makes sense because the individual particles in a burst animation have to appear at certain positions, and allowing us to randomly change the position of individual particles will change the configuration.

Any children property values that you don’t specify will be set to the default provided by the ShapeSwirl module. In the following example, we are animating 20 different lines of our burst animation. This time, the angle property has been set on individual particles instead of the Burst object so that only the lines rotate around their center instead of the whole object. As we learned in the previous tutorial, all the ShapeSwirl objects scale down from 1 to 0 by default. That’s why the lengths of the lines change from 40 to 0 in the animation.

As I mentioned earlier, we can animate all the ShapeSwirl properties inside the burst animations. Each child in the animation can have its own set of properties. If only one value is provided, it will be applied on all the child particles. If the values are provided as an array, they will be applied sequentially, one particle at a time.

Here is the JavaScript code to create five different burst animations using all the concepts we have learned so far.

In the first burst animation, the angle applied directly on the Burst object rotates the whole group around the center of the burst object. However, the angle applied inside the children property rotates all the triangles around their own centers. We also slowed down the burst animation by changing the animation duration for all the children to 4000ms.

In the second burst animation, the color of all the triangles is taken from the array passed to the fill property. We have specified only three fill colors, but the total number of triangles is 20. In such cases, mojs keeps cycling through the array elements and fills the triangles with the same three colors again and again.

In the fourth animation, we use rand strings, which we learned about in the previous tutorial, to randomly choose a scale value for all the child particles. We also set the value of isShowEnd property to false in order to hide the particles at the end of the animation.

In the fifth animation, we use the then() method from the Shape module tutorial to play another animation sequence after the first one finishes.

Final Thoughts

The aim of this series was to get you acquainted with the basics of the mojs animation library. Each tutorial focused on a single module and how you can use the properties in that module to create basic animations. 

This last tutorial used the concepts from the previous tutorials to create slightly more complicated animations. Mojs is a very powerful animation library, and the final results you get depend on how creative you can get with all the properties, so keep experimenting.

If there is anything that you would like me to clarify in this tutorial, please let me know in the comments.

Source: Nettuts Web Development

Ethical Design: The Practical Getting-Started Guide

By now, most people working in tech know and feel the deep concerns related to surveillance capitalism fostered and upheld by the tech giants. We understand that the root of the problem lies within the business model of capitalising and monetising user data. Stories of how people are being exploited surface on a daily basis, like the recent story about how Instagram withholds like notifications to certain users, with the purpose of increasing the rate of which they open the app. In the same story, The Globe and Mail describe how former high level employees of Facebook are growing a conscience and tell horrifying stories about how features are meticulously being built to exploit human behavior and make us addicts of social media.

As designers and developers we have an obligation to build experiences that are better than that. This article explains how unethical design happens, and how to do ethical design through a set of best practices. It also helps you understand how you can plant the seed to change the meaning within the company you work for and in the design community, even if you are not part of the management layer. Change starts with a movement!

Ethical Design

Let’s start with the core terminology: According to Merriam Webster, ethics is “the discipline dealing with what is good and bad and with moral duty and obligation.” For the purpose of this article, ethics will be defined as a system of moral principles that defines what is perceived as good and evil. Ethical design is, therefore, design made with the intent to do good, and unethical design is its black hat counterpart.

Ind.ie is a social enterprise striving for justice in the digital age. It is founded by Aral Balkan and Laura Kalbag who defined an “Ethical Hierarchy of Needs” that describe the core of ethical design very well.

Ethical Hierarchy of Needs
The ‘Ethical Hierarchy of Needs’ (licensed under CC BY 4.0) (Source: ind.ie)

As with any pyramid-shaped structure, the layers in the Ethical Hierarchy of Needs rest on the layer below it. If any layer is broken, the layers resting on top of it will collapse. If a design does not support human rights, it is unethical. If it supports human rights but does not respect human effort by being functional, convenient and reliable (and usable!), then it is unethical. If it respects human effort but does not respect human experience by making a better life for the people using it, then it is still unethical.

From a practical viewpoint, this means that products and services which exploit user data, use dark patterns and generally are only out to make money, disregarding its human purpose, are unethical. Let’s look at how unethical design manifests itself in business models and design decisions.

Unethical Design: The Black Hat Of The Business 

Surveillance Capitalism

Data-driven design can be used to do good. But more often than not it is used with monetary intent also known as surveillance capitalism.

As Aral Balkan, ethical designer and founder of ind.ie puts it:

“When a company like Facebook improves the experience of its products, it’s like the massages we give to Kobe beef: they’re not for the benefit of the cow but to make the cow a better product. In this analogy, you are the cow.”

Surveillance capitalism is unethical by nature because at its core, it takes advantage of rich data to profile people and understand their behavior with the sole purpose of making money. The most chilling thought of all is how data is being used not just to predict and manipulate current behavior, but how it is used to profile our future selves through machine learning, ultimately giving companies the power to impact our future decisions and behavioral patterns.

As Cracked Labs, independent research institute and creative laboratory, states in their report about Data Against People:

“Systems that make decisions about people based on their data produce substantial adverse effects that can massively limit their choices, opportunities, and life-chances”.

This happens on a daily basis to everyone who use Facebook, where the individualized feed is carefully filtered to show the posts most likely to trigger engagement and activity. Pricing is also becoming increasingly individualized because companies are able to use rich data to assess the long-term value of customers, also known as data-driven persuasion.

Data trade and data tracking is big business. According to the report “Corporate Surveillance in Everyday Life”, Oracle provides access to 5 billion (yes, billion!) unique user ID’s (this is confirmed on Oracle’s website). The word “scared” does not cover the emotional state which we should all be in over that fact.

Table view that shows the enormous amount of data held by large online platforms, credit card agencies and consumer data brokers.
An overview of the amount of profiles held by online platforms, credit reporting agencies and consumer data brokers as of June 2017. (Source: Corporate Surveillance in Everyday Life, CC BY-SA 4.0, Cracked Labs)

One can only imagine how companies will be able to utilize data to profile which of us are more likely to develop mental health or physical issues, thus putting us in the “no thanks” pile of applications for our future jobs. With this in mind, I fear for the future of my children.

To some the above sounds like something out of a science fiction movie, but it is not far-fetched at all. Unethical companies are exposed daily, from the VPN app who claimed to protect the data of their 24 million users, but sold it to Facebook to the software called Alphonso which, according to an article in The New York Times, is used in more than 250 game apps (some of which are designed for children) to monitor what tv ads people watch, even if the app is not in active use. The list of companies who harvest and use data with deeply unethical purposes goes on and on and on.

Black Hat Design

Nevertheless, data tracking is not the only way that unethical design plays out. Dark patterns fall under unethical design too, as they are black hat design patterns specifically designed to trick us into doing something we don’t necessarily want to do. It may not be considered unethical when a company makes use of the dark pattern called Roach Motel to make it nearly impossible to delete your account (looking at you, Skype). But looking at the motivation of the business side, it is not hard to see the unethical nature of the design, naming the Chinese shoe company who tricked people to swipe by adding a fake strand of hair on their Instagram ad as just one example.

Source: Smashing Magazine

Number().toFixed() Rounding Errors: Broken But Fixable

This article was originally published on David Kaye.

I found a rounding bug in Number().toFixed() in every JavaScript environment I’ve tried (Chrome, Firefox, Internet Explorer, Brave, and Node.js). The fix is surprisingly simple. Read on…

Warm Up

I found this version of the rounding bug in toFixed() while revising a number-formatting function that performs the same kind of thing as Intl.NumberFormat#format().

(1.015).toFixed(2) // returns "1.01" instead of "1.02"

The failing test is on line 42 here. I had missed it until December 2017, and that spurred me to check for other problems.

See my tweets about it:

Bug Reports

There is a long history of bug reports with respect to rounding errors using toFixed().

Here is a short sample of StackOverflow questions about this problem:

In general, these point out a bug for a value, but none reports a range or pattern of values returning erroneous results (at least none that I have found, I may have missed something). That leaves the programmers to focus on the small without seeing a larger pattern. I don’t blame them for that.

Finding the Pattern

Unexpected results based on input must arise from a shared pattern in the input. So, rather than review the specification for Number().toFixed(), I focused on testing with a series of values to determine where the bug shows up in each series.

Test Function

I created the following test function to exercise toFixed() over a series of integers ranging from 1 to a maxValue, adding the fraction such as .005 to each integer. The fixed (number of digits) argument to toFixed() is calculated from the length of the fraction value.

Continue reading %Number().toFixed() Rounding Errors: Broken But Fixable%

Source: Sitepoint

How BBC Interactive Content Works Across AMP, Apps, And The Web

In the Visual Journalism team at the BBC, we produce exciting visual, engaging and interactive content, ranging from calculators to visualizations new storytelling formats.

Each application is a unique challenge to produce in its own right, but even more so when you consider that we have to deploy most projects in many different languages. Our content has to work not only on the BBC News and Sports websites but on their equivalent apps on iOS and Android, as well as on third-party sites which consume BBC content.

Now consider that there is an increasing array of new platforms such as AMP, Facebook Instant Articles, and Apple News. Each platform has its own limitations and proprietary publishing mechanism. Creating interactive content that works across all of these environments is a real challenge. I’m going to describe how we’ve approached the problem at the BBC.

Example: Canonical vs. AMP

This is all a bit theoretical until you see it in action, so let’s delve straight into an example.

Here is a BBC article containing Visual Journalism content:

Screenshot of BBC News page containing Visual Journalism content
Our Visual Journalism content begins with the Donald Trump illustration, and is inside an iframe

This is the canonical version of the article, i.e., the default version, which you’ll get if you navigate to the article from the homepage.

Now let’s look at the AMP version of the article:

Screenshot of BBC News AMP page containing same content as before, but content is clipped and has a Show More button
This looks like the same content as the normal article, but is pulling in a different iframe designed specifically for AMP

While the canonical and AMP versions look the same, they are actually two different endpoints with different behavior:

  • The canonical version scrolls you to your chosen country when you submit the form.
  • The AMP version doesn’t scroll you, as you cannot scroll the parent page from within an AMP iframe.
  • The AMP version shows a cropped iframe with a ‘Show More’ button, depending on viewport size and scroll position. This is a feature of AMP.

Source: Smashing Magazine