Tag Archives: private

Thumbnail

Building A PWA Using Angular 6




Building A PWA Using Angular 6

Ahmed Bouchefra



In this tutorial, we’ll be using the latest Angular 6 to build a PWA by implementing the core tenets that make a PWA. We’ll start by creating a front-end web application that consumes a JSON API. For this matter, we’ll be using the Angular HttpClient module to send HTTP requests to a statically JSON API generated from the Simplified JavaScript Jargon GitHub repository. We’ll also use Material Design for building the UI via the Angular Material package.

Next, we’ll use the “Audits” panel (Lighthouse) from Chrome DevTools to analyze our web application against the core tenets of PWAs. Finally, we’ll explain and add the PWA features to our web application according to the “Progressive Web App” section in the Lighthouse report.

Before we start implementing our PWA, let’s first introduce PWAs and Lighthouse.

Recommended reading: Native And PWA: Choices, Not Challengers!

What’s A PWA?

A Progressive Web App or PWA is a web application that has a set of capabilities (similar to native apps) which provide an app-like experience to users. PWAs need to meet a set of essential requirements that we’ll see next. PWAs are similar to native apps but are deployed and accessible from web servers via URLs, so we don’t need to go through app stores.

A PWA needs to be:

  • Progressive
    Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.
  • Responsive
    Fit any form factor, desktop, mobile, tablet, or whatever is next.
  • Connectivity independent
    Enhanced with service workers to work offline or on low-quality networks.
  • App-like
    Use the app-shell model to provide app-style navigation and interactions.
  • Fresh
    Always up-to-date thanks to the service worker update process.
  • Safe
    Served via HTTPS to prevent snooping and ensure content has not been tampered with.
  • Discoverable
    Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  • Re-engageable
    Make re-engagement easy through features like push notifications.
  • Installable
    Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  • Linkable
    Easily share via URL and not require complex installation.

Introducing Lighthouse

Lighthouse is an open-source auditing tool created by Google which can be used to audit websites and applications for accessibility performance, SEO, best practices and PWA features.

You can access Lighthouse from the Audit tab in Chrome DevTools as a module in Node.js or as a CLI tool. You can use Lighthouse by providing an URL and then running the audits which will provide you with a report containing the auditing results which are basically suggestions on how you can improve your web application.

Installing Angular CLI v6 And Generating A Project

In this section, we’ll install the latest version of Angular CLI then we’ll use it to create a new Angular 6 project.

Angular CLI requires Node.js >= 8.9+ so first make sure you have the required version installed by running the following command:

$ node -v

Node.js version


Checking Node version. (Large preview)

In case you don’t have Node.js installed, you can simply head on to the official Node download page and grab the Node binaries for your system.

Now, you can go ahead and install the latest version of Angular CLI by running:

$ npm install -g @angular/cli 

Note: Depending on your npm configuration, you may need to add _sudo_ to install packages globally.

You can generate your Angular 6 project by running the following command in your terminal:

$ ng new pwademo

This will create a project with a structure that looks like:


Angular project structure


Angular project structure. (Large preview)

Most work that’s done will be inside the src/ folder that contains the source code of the application.

Creating The Angular Application

After generating a project, we’ll build a web application that consumes a JSON API and displays the items on the home page. We’ll use the HttpClient service for sending HTTP requests and Angular Material for building the UI.

Adding Angular Material

Thanks to Angular CLI v6 and the new ng add command, adding Angular Material to your project is only one command away. You just need to run the following command from your terminal:

$ cd pwademo
$ ng add @angular/material

Adding Angular Material


Adding Angular Material. (Large preview)

You can see from the screenshot that the command installs the required package from npm and update a bunch of files for setting up Angular Material in your project which previously needed manual updates.

Setting Up HttpClient And Consuming The JSON API

Now, let’s setup the Angular project to use HttpClient for sending HTTP requests. First, you need to import the HttpClientModule module in the main application module in the src/app/app.module.ts file:

/*...*/
import  HttpClientModule  from  '@angular/common/http';
@NgModule(
declarations: [
AppComponent
],
imports: [
/*...*/
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
)
export  class  AppModule  

That’s it. We can now inject and use HttpClient in any component or service that belongs to the main module.

For demo purposes, we’ll consume a statically generated JSON API from the Simplified JavaScript Jargon GitHub repository. If you are consuming any other resource, make sure you have CORS enabled so the browser doesn’t disallow reading the remote resource due to the Same Origin Policy.

Let’s create a service that interfaces with the API. Inside your project folder, run:

$ ng g service api

This will create a service called ApiService in the src/app/api.service.ts file.

Now open the src/app/api.service.ts file and update it to reflect the following changes:

import  Injectable  from  '@angular/core';
import  HttpClient  from  '@angular/common/http';
import  Observable  from  'rxjs';

export  interface  Item
name:  string;
description:  string;
url:  string;
html:  string;
markdown:  string;


@Injectable(
providedIn:  'root'
)

export  class  ApiService 
private  dataURL:  string  =  "https://www.techiediaries.com/api/data.json";
constructor(private  httpClient:  HttpClient) 
fetch():  Observable<Item[]>
return <Observable<Item[]>this.httpClient.get(this.dataURL);

}

We first imported the HttpClient and Observable classes then injected the HttpClient in the constructor as httpClient and added a fetch() method which calls the get() method of HttpClient (for sending an HTTP GET request to our JSON endpoint) and returns an Observable that we can subscribe to later.

We also declared an Item interface which represents a single item of the returned JSON data.

Next import this service from the application component. Open the src/app/app.component.ts file and add:

import  Component, OnInit  from  '@angular/core';
import  ApiService  from  './api.service';
import  Item  from  './api.service';

@Component(
selector:  'app-root',
templateUrl:  './app.component.html',
styleUrls: ['./app.component.css']
)
export  class  AppComponent  implements  OnInit
title  =  'pwademo';
items:  Array<Item>;
constructor(private  apiService:  ApiService)

ngOnInit()
this.fetchData();

fetchData()
this.apiService.fetch().subscribe((data:  Array<Item>)=>
console.log(data);
this.items  =  data;
, (err)=>
console.log(err);
);
}
}

We import the ApiService that we created before and we inject it as apiService, we also import the Item class which represents a single item of our JSON data and we declare the items variable of type Array<Item> which will hold the fetched items.

Next, we add a fetchData() method which calls our fetch() method that we defined in the ApiService which returns an Observable. We simply subscribe to this observable in order to send a GET request to our JSON endpoint and get the response data that we finally assign to the items array.

We call the fetchData() method in the ngOnInit() life-cycle event so it will be called once the AppComponent component is initialized.

Adding The Application UI

Our application UI will consist of a navigation bar and the skeleton of the page which will be created with Angular Material.

Before using an Angular Material component, you’ll need to import its module. Each Material component belongs to its own module.

Open the src/app/app.module.ts file and add the following imports:

/*...*/
import  MatToolbarModule  from  '@angular/material/toolbar';
import  MatCardModule  from  '@angular/material/card';
import  MatButtonModule  from  '@angular/material/button';

@NgModule(
declarations: [
AppComponent
],
imports: [
/*...*/
MatToolbarModule,
MatCardModule,
MatButtonModule
],
providers: [],
bootstrap: [AppComponent]
)
export  class  AppModule  

We import modules for toolbar, card and button components and we add them to the imports array of the AppModule.

Next, open the src/app/app.component.html file, delete what’s in there and add:

<mat-toolbar  color="primary">
<mat-toolbar-row>
<span>JS-jargon</span>
</mat-toolbar-row>
</mat-toolbar>
<main>
<mat-card *ngFor="let item of items">
<mat-card-header>
<mat-card-title>item.name}</mat-card-title>
</mat-card-header>
<mat-card-content>
item.description}
</mat-card-content>
<mat-card-actions>
<a  mat-raised-button  href="item.url}"  color="primary">More</a>
</mat-card-actions>
</mat-card>
</main>

We use Material components to create the UI. The <mat-toolbar> component is used to create a Material toolbar and the <mat-card> component is used to create a Material card etc.

We iterate over the items array which gets populated by the fetchData() method when the component is initialized, and display items as Material cards. Each card contains the name, description and a link for more information (The link is styled as a Material button using the mat-raised-button directive).

This is a screenshot of the application:


Demo Application


Demo Application. (Large preview)

Building The Application For Production

Typically, when checking your application for PWA features you should first build it for production because most PWA features are not added in development. For example, you don’t want to have service workers and caching enabled in development since you will periodically need to update the files.

Let’s build the application for production using the following command:

$ ng build --prod

The production build will be available from the dist/pwademo folder. We can use a tool like http-server to serve it.

First, install http-server using the following command:

$ npm i -g http-server

You can then run it using the following command:

$ cd dist/pwademo
$ http-server -o

The -o option will automatically open the default browser in your system and navigate to the http://127.0.0.1:8080/ address where our web application is available.

Analyzing The Application Using Lighthouse

Let’s now analyze our application using Lighthouse. First, launch Chrome and visit our application address http://127.0.0.1:8080/.

Next, open Developer Tools or press Ctrl + Shift + I and click on the Audit panel.


Perform an audit


Perform an audit. (Large preview)

You preferably need to set the Emulation to Mobile instead of Desktop to emulate a mobile environment. Next, click on Perform an audit… blue button. You’ll have a dialog opened in which you need to choose the types of the audits you want to perform against your web application. Un-check all types but Progressive Web App and click the Run audit button.


Progressive Web App Audits


Progressive Web App Audits. (Large preview)

Wait for the Lighthouse to generate the report. This is a screenshot of the result at this stage:


Initial PWA Report


Initial Report. (Large preview)

Lighthouse performs a series of checks which validate the aspects of a Progressive Web App specified by the PWA Checklist.
We get an initial score of 36100 that’s because we have some audits passed.

Our application has 7 failed audits mainly related to Service Workers, Progressive Enhancement, HTTPS and Web App Manifest which are the core aspects of a PWA.

Registering A Service Worker

The first two failed audits (“Does not register a service worker” and “Does not respond with a 200 when offline”) are related to Service Workers and caching. So what’s a service worker?

A service worker is a feature that’s available on modern browsers which can be used as a network proxy that lets your application intercept network requests to cache assets and data. This could be used for implementing PWA features such as offline support and Push notifications etc.

To pass these audits we simply need to register a service worker and use it to cache files locally. When offline, the SW should return the locally cached version of the file. We’ll see a bit later how to add that with one CLI command.

Recommended reading: Making A Service Worker: A Case Study

Progressive Enhancement

The third failed audit (“Does not provide fallback content when JavaScript is not available”) is related to Progressive Enhancement which is an essential aspect of a PWA and It simply refers to the capability of PWAs to run on different browsers but provide advanced features if they’re available. One simple example of PE is the use of the <noscript> HTML tag that informs users of the need to enable JavaScript to run the application in case It’s not enabled:

<noscript>
Please enable JavaScript to run this application.
</noscript>

HTTPS

The fourth failed audit (“Does not redirect HTTP traffic to HTTPS”) is related to HTTPS which is also a core aspect of PWAs (service workers can be only served from secure origins, except for localhost). The “Uses HTTPS” audit itself is considered as passed by Lighthouse since we’re auditing localhost but once you use an actual host you need a SSL certificate. You can get a free SSL certificate from different services such as Let’s Encrypt, Cloudflare, Firebase or Netlify etc.

The Web App Manifest

The three failed audits (“User will not be prompted to Install the Web App”, “Is not configured for a custom Splash Screen” and “Address bar does not match brand colors”) are related to a missing Web App Manifest which is a file in JSON format that provides the name, description, icons and other information required by a PWA. It lets users install the web app on the home screen just like native apps without going through an app store.

You need to provide a web app manifest and reference it from the index.html file using a <link> tag with rel property set to manifest. We’ll see next how we can do that automatically with one CLI command.

Implementing PWA Features

Angular CLI v6 allows you to quickly add PWA features to an existing Angular application. You can turn your application into a PWA by simply running the following command in your terminal from the root of the project:

$ ng add @angular/pwa

The command automatically adds PWA features to our Angular application, such as:

  • A manifest.json file,
  • Different sizes of icons in the src/assets/icons folder,
  • The ngsw-worker.js service worker.

Open the dist/ folder which contains the production build. You’ll find various files but let’s concentrate on the files related to PWA features that we mentioned above:

A manifest.json file was added with the following content:


    "name": "pwademo",
    "short_name": "pwademo",
    "theme_color": "#1976d2",
    "background_color": "#fafafa",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [
        
        "src": "assets/icons/icon-72x72.png",
        "sizes": "72x72",
        "type": "image/png"
    ,
    
        "src": "assets/icons/icon-96x96.png",
        "sizes": "96x96",
        "type": "image/png"
    ,
    
        "src": "assets/icons/icon-128x128.png",
        "sizes": "128x128",
        "type": "image/png"
    ,
    
        "src": "assets/icons/icon-144x144.png",
        "sizes": "144x144",
        "type": "image/png"
    ,
    
        "src": "assets/icons/icon-152x152.png",
        "sizes": "152x152",
        "type": "image/png"
    ,
    
        "src": "assets/icons/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    ,
    
        "src": "assets/icons/icon-384x384.png",
        "sizes": "384x384",
        "type": "image/png"
    ,
    
        "src": "assets/icons/icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    
    ]
}

As you can see, the added manifest.json file has all the information required by a PWA such as the name, description and start_url etc.


Angular project structure


Angular project structure. (Large preview)

The manifest.json file, links to icons with different sizes, that were also added automatically in the assets/icons folder. You will, of course, need to change those icons with your own once you are ready to build the final version of your PWA.


Angular project structure


Angular project structure. (Large preview)

In the index.html file, the manifest.json file is referenced using:

<link  rel="manifest"  href="manifest.json">

The ngsw-worker.js file, was also automatically added, which contains the service worker. The code to install this service worker is automatically inserted in the src/app/app.module.ts file:

...
import  ServiceWorkerModule  from  '@angular/service-worker';

@NgModule(
declarations: [
AppComponent
],

imports: [
...
ServiceWorkerModule.register('/ngsw-worker.js',  enabled:  environment.production )
],

The @angular/service-worker is installed by the ng add command and added as a dependency to pwademo/package.json:

"dependencies": 
...
"@angular/service-worker": "^6.1.0"

The service worker build support is also enabled in the CLI. In the angular.json file a "serviceWorker": true configuration option is added.

In the index.html file a meta tag for theme-color with a value of #1976d2 is added (It also corresponds to the theme_color value in the manifest.json file):

<meta  name="theme-color"  content="#1976d2">

The theme color tells the browser what color to tint UI elements such as the address bar.

Adding the theme color to both the index.html and manifest.json files fixes the Address Bar Matches Brand Colors audit.

The Service Worker Configuration File

Another file src/ngsw-config.json is added to the project but It’s not a required file for PWAs. It’s a configuration file which allows you to specify which files and data URLs the Angular service worker should cache and how it should update the cached files and data. You can find all details about this file from the official docs.

Note: As of this writing, with the latest 6.1.3 previous ng add @angular/pwa command will fail with this error: Path “/ngsw-config.json” already exists so for now the solution is to downgrade @angular/cli and @angular/pwa to version 6.0.8.

Simply run the following commands in your project:

$ npm i @angular/cli@6.0.8
$ ng i @angular/pwa@6.0.8
$ ng add @angular/pwa

Now let’s re-run the audits against our local PWA hosted locally. This is the new PWA score:


Initial PWA Report


PWA Report. (Large preview)

The Angular CLI doesn’t automatically add the JavaScript fallback code we mentioned in the Progressive Enhancement section so open the src/index.html file and add it:

<noscript>
Please enable JavaScript to run this application.
</noscript>

Next, rebuild your application and re-run the audits. This is the result now:


Initial PWA Report


PWA Report. (Large preview)

We have only one failed audit which is related to HTTPS redirect. We need to host the application and configure HTTP to HTTPS redirect.

Let’s now run the audits against a hosted and secured version of our PWA.


PWA Final Report


PWA Final Report. (Large preview)

We get a score of 100100 which means we’ve successfully implemented all core tenets of PWAs.

You can get the final code of this demo PWA from this GitHub repository.

Conclusion

In this tutorial, we’ve built a simple Angular application and have turned it into a PWA using Angular CLI. We used Google’s Lighthouse to audit our application for PWA features and explained various core tenets of PWAs such as Service Workers for adding offline support and push notifications. The Web Manifest file for enabling add-to-home-screen and splash screen features, Progressive Enhancement as well as HTTPS .

You may also need to manually check for other items highlighted (under the “Additional items to manually check” section) but not automatically checked by Lighthouse. These checks are required by the baseline PWA Checklist by Google. They do not affect the PWA score but it’s important that you verify them manually. For example, you need to make sure your site works cross-browser and that each page has a URL which is important for the purpose of shareability on social media.

Since PWAs are also about other aspects such as better perceived performance and accessibility, you can also use Lighthouse for auditing your PWA (or any general website) for these aspects and improve it as needed.

Smashing Editorial
(rb, ra, yk, il)


View this article:  

Building A PWA Using Angular 6

Thumbnail

Website Speed Optimization: Guide to the Best Techniques (2018)

website-speed-optimization-guide

We live in a fast-paced world. People want things as quickly as possible — and they’re unhappy when something takes too long. Website speed optimization takes away one barrier between you and your audience. Think about the last time you encountered a slow-loading website. You might have closed out the browser tab entirely or felt less inclined to patronize the site once it finally loaded. Google understands that consumers want fast access to information, products, and services. Consequently, it rewards websites that load quickly. Let’s take a look at a few ways in which you can use website speed optimization…

The post Website Speed Optimization: Guide to the Best Techniques (2018) appeared first on The Daily Egg.

Link to article – 

Website Speed Optimization: Guide to the Best Techniques (2018)

Thumbnail

19 Call-to-Action Phrases That Will Convert Your Users

call-to-action-phrases

What happens when nobody clicks on your call-to-action phrases and buttons? You don’t get any leads. Nor do you generate any revenue. That’s the opposite of the point, right? Which is why I tell business owners and marketers to take the time to refine their CTAs. A poorly-written CTA negates all the hard work you do for the rest of your marketing campaign. Someone who visits your website might be with you up until that point, then decide to bail on the conversion. So, how do you write call-to-action phrases that convert? What is the Psychology Behind CTA Phrases? From…

The post 19 Call-to-Action Phrases That Will Convert Your Users appeared first on The Daily Egg.

See the original article here:  

19 Call-to-Action Phrases That Will Convert Your Users

Thumbnail

Increase Clicks with these 12 Call-to-Action Phrases

call-to-action-phrases

What happens when nobody clicks on your call-to-action phrases and buttons? You don’t get any leads. Nor do you generate any revenue. That’s the opposite of the point, right? Which is why I tell business owners and marketers to take the time to refine their CTAs. A poorly-written CTA negates all the hard work you do for the rest of your marketing campaign. Someone who visits your website might be with you up until that point, then decide to bail on the conversion. So, how do you write call-to-action phrases that convert? What is the Psychology Behind CTA Phrases? From…

The post Increase Clicks with these 12 Call-to-Action Phrases appeared first on The Daily Egg.

This article is from – 

Increase Clicks with these 12 Call-to-Action Phrases

Thumbnail

What Do You Need To Know When Converting A Flash Game Into HTML5?




What Do You Need To Know When Converting A Flash Game Into HTML5?

Tomasz Grajewski



With the rise of HTML5 usage, many companies start redoing their most popular titles to get rid of outdated Flash and match their products to the latest industry standards. This change is especially visible in the Gambling/Casino & Entertainment industries and has been happening for several years now, so a decent selection of titles has already been converted.

Unfortunately, when browsing the Internet, you can quite often stumble upon examples of a seemingly hasty job, which results in the lover quality of the final product. That’s why it’s a good idea for game developers to dedicate some of their time for getting familiar with the subject of Flash to HTML5 conversion and learning which mistakes to avoid before getting down to work.

Among the reasons for choosing JavaScript instead of Flash, apart from the obvious technical issues, is also the fact that changing your game design from SWF to JavaScript can yield a better user experience, which in turn give it a modern look. But how to do it? Do you need a dedicated JavaScript game converter to get rid of this outdated technology? Well, Flash to HTML5 conversion can be a piece of cake — here’s how to take care of it.

How To Improve HTML5 Game Experience

Converting a game to another platform is an excellent opportunity to improve it, fix its issues, and increase the audience. Below are few things that can be easily done and are worth considering:

  • Supporting mobile devices
    Converting from Flash to JavaScript allows reaching a broader audience (users of mobile devices); support for touchscreen controls usually needs to be implemented into the game, too. Luckily, both Android and iOS devices now also support WebGL, so 30 or 60 FPS rendering usually can be easily achieved. In many cases, 60 FPS won’t cause any problems, which will only improve with time, as mobile devices become more and more performant.

  • Improving performance
    When it comes to comparing ActionScript and JavaScript, the latter is faster than the first one. Other than that, converting a game is a good occasion to revisit algorithms used in game code. With JavaScript game development you can optimize them or completely strip unused code that’s left by original developers.
  • Fixing bugs and making improvements to the gameplay
    Having new developers looking into game’s source code can help to fix known bugs or discover new and very rare ones. This would make playing the game less irritating for the players, which would make them spend more time on your site and encourage to try your other games.
  • Adding web analytics
    In addition to tracking the traffic, web analytics can also be used to gather knowledge on how players behave in a game and where they get stuck during gameplay.
  • Adding localization
    This would increase the audience and is important for kids from other countries playing your game. Or maybe your game is not in English and you want to support that language?

Why Skipping HTML And CSS For In-Game UI Will Improve Game Performance

When it comes to JavaScript game development, it may be tempting to leverage HTML and CSS for in-game buttons, widgets, and other GUI elements. My advice is to be careful here. It’s counterintuitive, but actually leveraging DOM elements is less performant on complex games and this gains more significance on mobile. If you want to achieve constant 60 FPS on all platforms, then resigning from HTML and CSS may be required.

Non-interactive GUI elements, such as health bars, ammo bars, or score counters can be easily implemented in Phaser by using regular images (the Phaser.Image class), leveraging the .crop property for trimming and the Phaser.Text class for simple text labels.

Such interactive elements as buttons and checkboxes can be implemented by using the built-in Phaser.Button class. Other, more complex elements can be composed of different simple types, like groups, images, buttons and text labels.

Note: Each time you instantiate a Phaser.Text or PIXI.Text object, a new texture is created to render text onto. This additional texture breaks vertex batching, so be careful not to have too many of them.

How To Ensure That Custom Fonts Have Loaded

If you want to render text with a custom vector font (e.g. TTF or OTF), then you need to ensure that the font has already been loaded by the browser before rendering any text. Phaser v2 doesn’t provide a solution for this purpose, but another library can be used: Web Font Loader.

Assuming that you have a font file and include the Web Font Loader in your page, then below is a simple example of how to load a font:

Make a simple CSS file that will be loaded by Web Font Loader (you don’t need to include it in your HTML):

@font-face 
    // This name you will use in JS
    font-family: 'Gunplay';
    // URL to the font file, can be relative or absolute
    src: url('../fonts/gunplay.ttf') format('truetype');
    font-weight: 400;

Now define a global variable named WebFontConfig. Something as simple as this will usually suffice:

var WebFontConfig = 
   'classes': false,
   'timeout': 0,
   'active': function() 
       // The font has successfully loaded...
   ,
   'custom': 
       'families': ['Gunplay'],
       // URL to the previously mentioned CSS
       'urls': ['styles/fonts.css']
   
};

It the end, remember to put your code in the ‘active’ callback shown above. And that’s it!

How To Make It Easier For Users To Save The Game

To persistently store local data in ActionScript you would use the SharedObject class. In JavaScript, the simple replacement is localStorage API, which allows storing strings for later retrieval, surviving page reloads.

Saving data is very simple:

var progress = 15;
localStorage.setItem('myGame.progress', progress);

Note that in the above example the progress variable, which is a number, will be converted to a string.

Loading is simple too, but remember that retrieved values will be strings or null if they don’t exists.

var progress = parseInt(localStorage.getItem('myGame.progress')) || 0;

Here we’re ensuring that the return value is a number. If it doesn’t exist, then 0 will be assigned to the progress variable.

You can also store and retrieve more complex structures, for example, JSON:

var stats = 'goals': 13, 'wins': 7, 'losses': 3, 'draws': 1;
localStorage.setItem('myGame.stats', JSON.stringify(stats));
…
var stats = JSON.parse(localStorage.getItem('myGame.stats')) || {};

There are some cases when the localStorage object won’t be available. For example, when using the file:// protocol or when a page is loaded in a private window. You can use the try and catch statement to ensure your code will both continue working and use default values, what is shown in the example below:

try 
    var progress = localStorage.getItem('myGame.progress');
 catch (exception) 
    // localStorage not available, use default values

Another thing to remember is that the stored data is saved per domain, not per URL. So if there is a risk that many games are hosted on a single domain, then it’s better to use a prefix (namespace) when saving. In the example above 'myGame.' is such a prefix and you usually want to replace it with the name of the game.

Note: If your game is embedded in an iframe, then localStorage won’t persist on iOS. In this case, you would need to store data in the parent iframe instead.

How To Leverage Replacing Default Fragment Shader

When Phaser and PixiJS render your sprites, they use a simple internal fragment shader. It doesn’t have many features because it’s tailored for a speed. However, you can replace that shader for your purposes. For example, you can leverage it to inspect overdraw or support more features for rendering.

Below is an example of how to supply your own default fragment shader to Phaser v2:

function preload() 
    this.load.shader('filename.frag', 'shaders/filename.frag');


function create() 
    var renderer = this.renderer;
    var batch = renderer.spriteBatch;
    batch.defaultShader = 
        new PIXI.AbstractFilter(this.cache.getShader('filename.frag'));
    batch.setContext(renderer.gl);

Note: It’s important to remember that the default shader is used for ALL sprites as well as when rendering to a texture. Also, keep in mind that using complex shaders for all in-game sprites will greatly reduce rendering performance.

How To Change Tinting Method With A Default Shader

Custom default shader can be used to replace default tinting method in Phaser and PixiJS.

Tinting in Phaser and PixiJS works by multiplying texture pixels by a given color. Multiplication always darkens colors, which obviously is not a problem; it’s simply different from the Flash tinting. For one of our games, we needed to implement tinting similar to Flash and decided that a custom default shader could be used. Below is an example of such fragment shader:

// Specific tint variant, similar to the Flash tinting that adds
// to the color and does not multiply. A negative of a color
// must be supplied for this shader to work properly, i.e. set
// sprite.tint to 0 to turn whole sprite to white.
precision lowp float;

varying vec2 vTextureCoord;
varying vec4 vColor;

uniform sampler2D uSampler;

void main(void) 
    vec4 f = texture2D(uSampler, vTextureCoord);
    float a = clamp(vColor.a, 0.00001, 1.0);
    gl_FragColor.rgb = f.rgb * vColor.a + clamp(1.0 - vColor.rgb/a, 0.0, 1.0) * vColor.a * f.a;
    gl_FragColor.a = f.a * vColor.a;

This shader lightens pixels by adding a base color to the tint one. For this to work, you need to supply negative of the color you want. Therefore, in order to get white, you need to set:

sprite.tint = 0x000000;  // This colors the sprite to white
Sprite.tint = 0x00ffff;  // This gives red

The result in our game looks like this (notice how tanks flash white when hit):

Example of the custom default shader in game development
Custom default shader (tanks flashing white).

How To Inspect Overdraw To Detect Fill Rate Issues

Replacing default shader can also be leveraged to help with debugging. Below I’ve explained how overdraw can be detected with such a shader.

Overdrawing happens when many or all pixels on the screen are rendered multiple times. For example, many objects taking the same place and being rendered one over another. How many pixels a GPU can render per second is described as fill rate. Modern desktop GPUs have excessive fill rate for usual 2D purposes, but mobile ones are a lot slower.

There is a simple method of finding out how many times each pixel on the screen is written by replacing the default global fragment shader in PixiJS and Phaser with this one:

void main(void) 
    gl_FragColor.rgb += 1.0 / 7.0;

This shader lightens pixels that are being processed. The number 7.0 indicates how many writes are needed to turn pixel white; you can tune this number to your liking. In other words, lighter pixels on screen were written several times, and white pixels were written at least 7 times.

This shader also helps to find both “invisible” objects that for some reason are still rendered and sprites that have excessive transparent areas around that need to be stripped (GPU still needs to process transparent pixels in your textures).


Example of the Overdraw shader in action in game development


Overdraw shader in action. (Large preview)

The picture on the left shows how a player sees the game, while the one on the right displays the effect of applying the overdraw shader to the same scene.

Why Physics Engines Are Your Friends

A physics engine is a middleware that’s responsible for simulating physics bodies (usually rigid body dynamics) and their collisions. Physics engines simulate 2D or 3D spaces, but not both. A typical physics engine will provide:

  • object movement by setting velocities, accelerations, joints, and motors;
  • detecting collisions between various shape types;
  • calculating collision responses, i.e. how two objects should react when they collide.

At Merixstudio, we’re big fans of the Box2D physics engine and used it on a few occasions. There is a Phaser plugin that works well for this purpose. Box2D is also used in the Unity game engine and GameMaker Studio 2.

While a physics engine will speed-up your development, there is a price you’ll have to pay: reduced runtime performance. Detecting collisions and calculating responses is a CPU-intensive task. You may be limited to several dozen dynamic objects in a scene on mobile phones or face degraded performance, as well as reduced frame rate deep below 60 FPS.


Example of the difference in the scene of a game with and withour Phaser physics debug overlay displayed on top


Phaser’s physics debug overlay. (Large preview)

The left part of the image is a scene from a game, while the right side shows the same scene with Phaser physics debug overlay displayed on top.

How To Export Sounds From A .fla File

If you have a Flash game sound effects inside of a .fla file, then exporting them from GUI is not possible (at least not in Adobe Animate CC 2017) due to the lack of menu option serving this purpose. But there is another solution — a dedicated script that does just that:

function normalizeFilename(name) 
   // Converts a camelCase name to snake_case name
   return name.replace(/([A-Z])/g, '_$1').replace(/^_/, '').toLowerCase();


function displayPath(path) 
   // Makes the file path more readable
   return unescape(path).replace('file:///', '').replace('


fl.outputPanel.clear();

if (fl.getDocumentDOM().library.getSelectedItems().length > 0)
   // Get only selected items
   var library = fl.getDocumentDOM().library.getSelectedItems();
else
   // Get all items
   var library = fl.getDocumentDOM().library.items;

// Ask user for the export destination directory
var root = fl.browseForFolderURL('Select a folder.');
var errors = 0;

for (var i = 0; i < library.length; i++) 
   var item = library[i];
   if (item.itemType !== 'sound')
       continue;

   var path = root + '/';

   if (item.originalCompressionType === 'RAW')
       path += normalizeFilename(item.name.split('.')[0]) + '.wav';
   else
       path += normalizeFilename(item.name);

   var success = item.exportToFile(path);
   if (!success)
       errors += 1;
   fl.trace(displayPath(path) + ': ' + (success ? 'OK' : 'Error'));


fl.trace(errors + ' error(s)');

How to use the script to export sound files:

  1. Save the code above as a .jsfl file on your computer;
  2. Open a .fla file with Adobe Animate;
  3. Select ‘Commands’ → ‘Run Command’ from the top menu and select the script in the dialogue that opens;
  4. Now another dialogue file pops up for selecting export destination directory.

And done! You should now have WAV files in the specified directory. What’s left to do is convert them to, for example, MP3’s, OGG, or AAC.

How To Use MP3s In Flash To HTML5 Convertions

The good old MP3 format is back, as some patents have expired and now every browser can decode and play MP3’s. This makes development a bit easier since finally there's no need to prepare two separate audio formats. Previously you needed, for instance, OGG and AAC files, while now MP3 will suffice.

Nonetheless, there are two important things you need to remember about MP3:

  • MP3’s need to decode after loading, what can be time-consuming, especially on mobile devices. If you see a pause after all your assets have loaded, then it probably means that MP3’s being decoded;
  • gaplessly playing looped MP3’s is a little problematic. The solution is to use mp3loop, about which you can read in the article posted by Compu Phase.

So, Why Should You Convert Flash To JavaScript?

As you can see, Flash to JavaScript conversion is not impossible if you know what to do. With knowledge and skill, you can stop struggling with Flash and enjoy the smooth, entertaining games created in JavaScript. Don't try to fix Flash — get rid of it before everyone is forced to do so!

Want To Learn More?

In this article, I was focused mainly on Phaser v2. However, a newer version of Phaser is now available, and I strongly encourage you to check it out, as it introduced a plethora of fresh, cool features, such as multiple cameras, scenes, tilemaps, or Matter.js physics engine.

If you are brave enough and want to create truly remarkable things in browsers, then WebGL is the right thing to learn from the ground up. It’s a lower level of abstraction than various game-building frameworks or tools but allows to achieve greater performance and quality even if you work on 2D games or demos. Among many websites which you may find useful when learning the basics of WebGL would be WebGL Fundamentals (uses interactive demos). In addition to that, to find out more about WebGL feature adoption rates, check WebGL Stats.

Always remember that there's no such thing as too much knowledge — especially when it comes to game development!

Smashing Editorial
(rb, ra, yk, il)


Continue at source: 

What Do You Need To Know When Converting A Flash Game Into HTML5?

Thumbnail

Linkbuilding: The Citizen’s Field Guide




Linkbuilding: The Citizen’s Field Guide

Myriam Jessier & Stéphanie Walter



Before buying followers on Instagram was a common practice, before Russian trolls made fake news an Olympic sport, we had linkbuilding. Today, we still have linkbuilding, its just that you haven’t noticed it — or have you?

Welcome, to the Twilight Zone, dear folks. You are about to go through a linkbuilding crash course. This will help you preserve your website, detect potential problems in content or consider why you keep receiving strange emails from strangers wanting to get their links all over your content.

Rod Sterling in the Twilight Zone TV series.
Rod Sterling in the Twilight Zone TV series.

Note: If you are a website owner, a marketer, a blogger, a social media specialist or a regular user of the internet (and everything else in between)…you should take the time to read this!

What Is Linkbuilding?

Links are basically a popularity contest. Linkbuilding is the process of gaining links to your online content in order to boost your visibility in search engines.

Through links, search engines can analyze popularity but also other vital metrics such as authority, spam, trust. Google uses links to establish which websites are popular with users, are trusted by users or are seen as spam by users.

Key Signals That Influence The Value Of a Link

You have the stock exchange, and then you have the link exchange. All links are not created equal. Some of you may get flooded with spammy requests while others are reading this article wondering why they’ve never heard of linkbuilding. Some websites are more valuable and thus more targeted than others by linkbuilding attempts. Here are some key metrics that help establish the value of a link:

Global Popularity

The more popular a website is, the more a link from that site will have value. Wikipedia or Huffington Post have a lot of websites pointing to them which is a signal for search engines that these websites are probably important or at least very popular. Here is an example of linkbuilders trying to sell links on well-known publications that may not be aware their platform is used to peddle paid links.


Large preview

Topical Or Local Popularity

Links that are topic-specific and highly related to your subject matter are worth more than links from general or off-topic sites. A link from a dog training business pointing to an SEO training website (like the one I run) will have less value than if Smashing Magazine (a website recognized for its topical authority on the web) will. Which means that placing a link on “SEO training website” would have been an amazing opportunity for me.

Placement In The Page

If a link is “editorially placed”, meaning that it looks like something the author placed in the content naturally, then Google will give it more credibility. If the link is something someone with a shady profile shared in the comments, the impact won’t be the same. The position of a link within a page is important. Most linkbuilders will always negotiate for a link at the beginning or in the middle of your main content. Links in footers and sidebars do not have the same value.1

1The Skinny On Black Hat Link Building,” Link Building For SEO: The Definitive Guide (2018 Update), Backlinko

Types Of Links Matter

A text link tends to have more weight than an image link. Furthermore, most people forget to provide an ALT attribute for their images, which means that Google will have a hard time getting context regarding the link placed on the image. Links can also be placed in iframes.

Anchor Text

You know what would be an even better anchor than “SEO training website” for me? I would love to also push a local signal on top of a topical one with “SEO training in Montreal” Why is that better than placing a link on a random word like “platypus”? Well, because one of the strongest signals used by search engines is anchor text. What is anchor text? Anchor Text is the visible, clickable text in a hyperlink. For most of us, it’s the blue text that’s underlined, like the ones you see below. As you can see, Smashing Magazine has made it a mission to explain why links should never say “Click Here”.


Large preview

Trust Score

The internet is made up of a lot of spam. In order to stay relevant to users, search engines use systems that analyze link profiles and provide a trust score. Earning links from websites with a high Trust metric can boost your own scoring metric and impact your organic visibility. That’s why most SEO experts will favor non-profit organizations, universities or government websites. Those websites benefit from great Trust Score normally. I call the trust factor a trust score because each SEO tool has its own nomenclature (TrustRank, TrustFlow, etc.). This is the Trust Score of Smashing Magazine:


Large preview

So of course, you can imagine that this makes Smashing Magazine a very desirable website to have a link on. This leads to hilarious situations like this comical email by a link builder trying to buy a link from me:


Large preview

Link Neighborhood

The notion of a “link neighborhood” means that if a website is spammy and links to another website, Google will be suspicious that the other website is spammy as well. This is important because sometimes, websites are targeted by negative SEO attacks. One of the quickest ways to sabotage a competitor’s organic visibility is to have a lot of spammy websites pointing to its website. This is where the notion of link neighborhood becomes incredibly important.

Freshness And Pertinence

Link signals tend to decay over time. That’s why it’s important to keep earning new links over time. This helps establish the pertinence of a website. But you have to be careful: If you keep earning links from hype websites that aren’t necessarily trustworthy, your website could be seen as pertinent but not trustworthy. It’s a fine balance between authority and pertinence.

Social Sharing

Search engines treat socially shared links differently than any other type of link. The SEO community is still debating how strong of a signal social links are.

The Importance Of A Link

Getting a link from a website that is considered a reputable and expert source of information is a highly valuable asset. Let’s use this article to do some good and give a link to someone in Web that deserves it. Meet Nicolas Steenhout, a great accessibility consultant in Montreal doing great work. Bonjour Monsieur! I hope this link helps give your work more visibility!

Common Linkbuilding Tactics

Here is a quick recap of what happens to some of us on a daily basis:

  • We receive some type of communication trying to get us to put things on our websites for strange reasons we don’t understand.
  • Someone requests or demands, depending on how combative their writing style is, that we guest blog for free on platforms that we do not know, trust or like.
  • We get folks peddling SEO services. They use scare tactics to push you to pay them for their services.
  • Websites get hacked for links…or worse.

Here are some of common linkbuilding tactics you should be aware of:

  • Broken linkbuilding
    If you notice a broken link in a quality website, you can email the owner and say what page the link is on and what could be a solid resource to replace the current webpage that’s no longer available. Of course, the replacement you offer just so happens to be from your own website that you want to rank in search engines.
  • Comment spam linkbuilding
    There is a reason why strange spammy comments keep trying to peddle certain products or websites – it’s called linkbuilding.
  • Negative SEO
    If you can’t be first because you are the best, then buy a bunch of links to make your competitors go down in Google. That’s basically what negative SEO is. Here is a real life case of negative SEO if you want to see how this can happen to any type of website owner, not just big startups or famous people.
  • Sponsored content linkbuilding
    I have had many bloggers complain to me because they had been duped by agencies “buying” a sponsored article for a year on their blog. They discovered later on that what the company actually bought was a link that they could control.
  • Hacking websites
    Oftentimes, websites will get hacked for SEO purposes. Because if you can’t rank honestly, then parasite good websites to rank no matter what! That’s the philosophy of some ruthless search engine optimization specialists. If you gain access to a website, you can place any link where you want, for as long as you want. As a website owner, it’s important that you secure your website and make sure nothing strange is going on in your content. Want to see what a hacked website can look like? I recently had a case where a very legitimate website in the IT sector was hacked to host and promote a discount NBA jersey store. This is the what the website looks like:


    Large preview

    However, what they were not aware of was that the website had been hacked. Upon analyzing their incoming links, it was clear that this IT focused website was known for “cheap NBA jerseys” and “wholesale NBA jerseys” than anything else. I wondered why, and found a lot of pages were receiving links:


    Large preview

    The wonderful developer team cleaned up the damage and made sure to patch any security breach they found. However, this specific hacker thrives in websites that have been hacked and are full of malware such as this one:


    Large preview

  • Link outreach
    If you get bombarded with emails asking you to review a product or add a link in your blog article, chances are that you have been targeted during a link outreach campaign. You can always decline or simply not answer this unsolicited email. On the flipside of the coin, if you get offers to place your links in some highly regarded publications, know that this is an offer the person is making you to place your links on certain website.
  • Guest blogging
    If someone asks you to create an article on their platform, the often want free quality content with your notoriety to promote it in order to garner links. If on the other hand, someone offers you free content for your website, chances are that it is for linkbuilding purposes.
  • PBN
    A Private Blog Network is a network of websites with great SEO metrics used to build links to a main website in order to help it rank higher in search engines. It means that someone usually ranks multiple websites high in Google in order to use them to place links that will boost the visibility of a chosen site. Google does not appreciate PBN efforts or link exchange efforts and routinely penalizes networks of websites.
  • Creating awesome content
    There are many linkbuilding tactics that push for the creation of tools, content or other types of media that is so good, so useful and so relevant that they will naturally garner links from other website owners. We won’t detail them here but they usually work well because they provide something useful that deserves to be shared with others!

The Hidden Survival Guide To Linkbuilding

Read this part if you are a website owner, a UX, a customer, a visitor, a blogger, my friend Igor (hi Igor, please read this!) or anyone else using search engines regularly to find information. Let’s get started by giving you access to the official Google guidelines on the matter. Website guidelines vary from search engine to search engine. You can check each search engine’s guidelines but oftentimes, the broader concepts of what qualifies as a good website in terms of SEO are the same.

The Ugly Truth: Not All Linkbuilding Is Bad

Google clearly disagrees with paying for links or selling links. However, keep this in mind: not all linkbuilding efforts are bad. Earlier in this article, I gave a shout out to a friend of mine because I know that it will help give his website some visibility in search engines. Offering a link is a way to show your support for a product, an article, a tool, a website, a person. It is a vote of confidence in their favor. If you go out of your way to do it, technically, that counts as linkbuilding. Linkbuilding is also a way to make money. Some website owners may leverage linkbuilding to earn money despite legal regulations and Google’s guidelines.

If You See Something, Say Something!

You can signal bad links and anything strange going on that may be related to a hack, malware or even paid links to Google. You can report bad links very easily. If you want to review the entire list of what constitutes a bad practices in Google’s eyes, you can head on over to this official documentation.

Make It Clear If You Accept Or Refuse Linkbuilding Offers

If you are a blogger, make sure you are aware of your rights and responsibilities when it comes to linkbuilding efforts. Make sure to update your key pages to reflect your linkbuilding policy. This could be done in the about page, the services page if you offer services or the contact page.

Take the time to specify if you accept of refuse commercial or affiliate links in the content of a guest blog post for example. This will also help avoid nasty linkbuilding surprises in the future.

Nofollow: You Can Have Sponsored Content And Still Respect The Guidelines!

So what do you do if you realize that someone is using your website to place a link? Well, if this is something that was done legally, you can fix the situation by placing an attribute on your link that will signal to search engine bots not to follow the link. A nofollow link is a way to make sure that links from sponsored posts are not going against Google’s guidelines. This type of link cancels the linkbuilding benefits as Google gives them no love because the nofollow tag in the code signals “do not take this link into account.” Website owners and administrators should know how to make a link into a nofollow link as it can be done quickly and easily.

This is what a nofollow link looks like in the code:




Large preview

So, what do you do if you are asked for a link in exchange for a review?

This is the most common way most bloggers are approached in order to get links placed on their websites. Here are some guidelines for bloggers that receive free products in exchange for reviews.

If you think your website is hacked for links, you must first secure your website and do a security audit. The second step would entail cleaning up the links and the third step includes submitting a disavow file to Google that signals any shady domains that may be pointing to you because of hacker activity.

Red Flag #1 : You Start Seeing Your Organic Traffic Go Down

If you haven’t changed anything and you see your organic traffic go down, make sure it’s not a link issue. You could have suffered an attack. We recommend you use the Google Search Console tool available to all website owners and administrators. You must validate that you own the website and then, you will be able to receive an alert if Google detects something is very wrong with your website. Careful, if something is wrong with your website, it could mean a penalty and cause a substantial organic traffic drop. To know more about the types of penalties and alerts Google Search Console provides, you can read an article on this topic or check the official documentation.

Red Flag #2: Downloading A Premium Theme Or Plugin For Free

This is a very underhanded technique to obtain links. Some individuals will pay for a premium theme or plugin or software and offer it for free on torrent websites or forums where free or hacked versions of premium products are made available. When someone downloads the theme and uses it on a website, the doctored version of theme is used to place links in the website. Oftentimes, the owners never notice that their website is hosting parasite links.

Red Flag #3: You Start Getting Strange Feedback About Your Website Or See Strange Content Appear

If your readers, customers, visitors or even Google Search Console start telling you about strange content or links showing up on your website, this means that it’s time for an SEO audit and a security audit to assess the damage done to your website. Something tells me that Schneiters Gold did not plan on ever offering the BEST Online Viagra OFFERS…




Large preview

Red Flag #4: You Get A Google Search Console Warning

If you get an email from the Google Search Console team telling you about some spam issues or other problems that cause you to break their guidelines, you should investigate immediately the source of the problem and fix the issue fast or you could risk a penalty.

Red Flag #5: The Link Looks Like It Could Be A Hidden Affiliate Link Or A Redirect

Always check the links before placing them. Click the links and see where they lead. You could be provided a link that looks like a high-quality content but instead, it points to a spammy page.

Make sure to ask if a link is an affiliate link. Affiliate links are links that contain information that helps track a sale back to the person who promoted the product. These affiliate partners get a cut each sale that is attributed to them. Companies like Amazon and Forever21 among others have affiliate programs. You do not want someone promoting a product purely for money and you do not want to lose the trust of search engines and human visitors.

Advice For Linkbuilders, Growth Hackers And Anyone Looking to Gain More Visibility In Search Engines

Vet a website before getting in touch

Go ahead, click on the link and check out the website before you do anything else. Otherwise, you will end up contacting your competitors, unrelated blogs, spammy websites, etc.

Read the advertising page

Most websites have a page, it can be the contact, advertise or about page, that lists the specs and guidelines to collaborate with the websites. Respect what’s written on there! Do not bother folks that clearly said they do not want to be contacted for links. No, you are not the one that will make them change their minds. Yes, we’re sure.

Avoid metric blindness

My very good friend Igor, proud owner of Igor.io, gets contacted all the time by linkbuilding companies. Why? Because their website was once upon a time (before they removed their incredible archive of technical articles) had incredible metrics. For reference, Igor has a fully responsive, accessible website and it looks like this:


igor.io


Large preview

But Igor’s weblog’s metrics look like this (and they looked even more enticing to SEOs the last time I checked):




Large preview

This meant that a lot of companies wanted to contact the owner of a website that had more than 1000 high-quality websites referring to it. But if they had bothered to check out Igor’s website, they would have seen that nothing was on there. Back in the days, this website just read: igor’s weblog and the archive was hidden in the code. You had to know where to look for it… or you would find it very easily if you happened to be a bot. That’s why the metrics were the so high: only a bot and those in the know would discover and share Igor’s content.

Know who you are talking to

I get emails telling me to ask my boss if the company can place a link on my website. Now, quick reminder, if you go on myriamjessier.com and contact me, the person with an email that contains the words myriam + jessier, chances are that you are talking to the owner herself, right? Which leads me to another point: write my name correctly please and do not address me as sir, or dear, or dear sir. This is a common issue that Stéphanie Walter has as half of the Internet doesn’t seem to know how to spell her name.




Large preview

Not knowing or ignoring legal guidelines and Google’s guidelines

If you do not disclose why you are asking for a link and that there could be a risk to a website selling you a link, then you are not being transparent.

Bonus Tip

Don’t reach out to experts who do what you do for a living. I receive linkbuilding offers (buying and selling) from other search engine optimization “specialists” all the time. If you found me on the web and are offering to sell me links because my website isn’t visible enough, then maybe, just maybe, my SEO efforts are working no?

Conclusion

We hope that you learned a few things about linkbuilding. Here is a quick recap:

  • There’s money in the banana stand and in linkbuilding.
  • Not all links are equal, key metrics are : authority, freshness, placement, relevancy.
  • People will go to extremes to get links so if a “great deal” is offered to you, look for the hidden link in there!
  • Secure your website to avoid SEO problems. If you make it hard work for hackers, they will often give up and move on to an easier prey.
  • If you want to help someone out, make sure you give them a link with a good anchor! It really helps!
Smashing Editorial
(ra, yk, il)


Read original article:

Linkbuilding: The Citizen’s Field Guide

Copyright Law Basics For UK Software Developers

Software developers all over the world can benefit from an increased understanding of intellectual property (IP) laws and how those laws may affect their work. Software programs are often complex works that include both functional and artistic elements and may be covered by a variety of different types of IP laws. This can be very confusing for those who haven’t been taught about IP and can cause them to miss out on opportunities to protect their own work or to accidentally infringe on the work of another.

The purpose of this article is to provide information about one type of IP law, copyright law, for software developers who live or work in the United Kingdom. Below we will discuss the definition of copyright law, the source of UK copyright law, and how it applies to technological works. I’ll also elaborate on what is not covered by copyright law, as well as the UK concepts of fair dealing and moral rights as they are related to copyright law.

Copyright Law Essentials

You can learn more about copyright law in general and about how it applies to software in my previous article. Go to article →

What Is Copyright Law?

Copyright law is a type of intellectual property law that protects creative works, which can include things like plays, movies, drawings, songs, and many other things. Around the world, copyright laws give the authors or creators of literary, dramatic, musical, or artistic works the right to control the ways in which their material may be used. With regard to software, copyright law generally covers the artistic elements of a software program as opposed to the functional elements.

What Is The Source Of Copyright Law In The UK?

Copyright law originated in the United Kingdom from a concept of common law; the Statute of Anne 1709. It became statutory with the passing of the Copyright Act 1911. The current act is the Copyright, Designs and Patents Act of 1988. Those interested can read the full text here.

The relevant government office for copyright inquiries is the UK Intellectual Property Office. The UK is also a signatory to the Berne Convention, an international agreement concerning copyright law that has been adopted by 172 countries worldwide.

How Does UK Copyright Law Apply Specifically To Technological Works?

Copyright law can apply to all kinds of technological works that are used with computers, tablets, smartphones, or video game systems. This includes apps, computer programs, databases, spreadsheets, screen displays, and even virtual reality environments. Copyright also applies to works that are used or distributed on the internet like websites, blogs, and other online content. In the UK, computer programs are specifically protected as literary works.

Throughout the European Union, the Computer Programs Directive provides guidance regarding the legal protection of computer programs. The Copyright (Computer Programs) Regulations of 1992 extended the rules covering literary works to include computer programs in other European countries as well.

What Is Not Covered By UK Copyright Law?

Copyright law in the UK, as elsewhere, does not protect ideas, procedures, methods of operations, or mathematical concepts (though other types of IP may protect them under certain circumstances). In other words, copyright law is about protecting a particular expression of an idea, not the idea itself, and not functional elements of a work. Additionally, names, titles, short phrases, and colors are not generally considered unique or substantial enough to be covered by copyright law. However, a work that combines some of the elements, such as a logo or design, could possibly be eligible for copyright (and perhaps trademark) protection.

How Long Does Copyright Protection In The UK Last?

Because the UK is a signatory to the Berne Convention which covered this issue, a copyright in the UK will typically be protected for either the life of the author plus 70 years from the death of the author or, for published works, for 70 years from the date of first publication. However, there are many exceptions to this rule, and each work should be treated on a case-by-case basis if there are any doubts.

One notable UK-specific exception has to do with the boy who never grew up, Peter Pan. Author J.M. Barrie gifted all of the rights to his creation to a children’s hospital in London. When the original copyright expired in 1987, an extension was added to the Copyright, Designs and Patents Act of 1988 mentioned above so that the hospital could continue to collect royalties based on uses of the work (though the hospital has no creative control over how the work is used). Ultimately, this is only an unusual — and perhaps endearingly British — exception to the normal copyright term.


Photo by Christian Battaglia on Unsplash. (Large preview)

What Is Fair Dealing?

The copyright laws of almost all countries allow exceptions for certain permitted uses of copyrighted works such as news reporting, educational uses, or where the use of the work is de minimus. In the United States, one can assert a “fair use” defense if accused of infringing a copyright if the use was due to one of these permitted activities. In the UK, these permitted activities fall under the legal concept known as “fair dealing.” According to the University of Nottingham, eligible activities which can be conducted without infringing a copyrighted work include:

  • Private and research study purposes;
  • Performance, copies or lending for educational purposes;
  • Criticism and news reporting;
  • Incidental inclusion;
  • Copies and lending by librarians;
  • Format shifting or back up of a work you own for personal use;
  • Caricature, parody or pastiche;
  • Acts for the purposes of royal commissions, statutory enquiries, judicial proceedings and parliamentary purposes;
  • Recording of broadcasts for the purposes of listening to or viewing at a more convenient time;
  • Producing a back-up copy for personal use of a computer program.

How Does “Fair Dealing” Affect Technology Copyrights In The UK?

The “fair dealing” exceptions mentioned above may specifically impact copyrights for technology-related works such as software programs or databases. For example, producing a backup copy of a software program for personal use only would not be considered copyright infringement under a fair dealing exception. Though fair dealing explicitly excludes decompilation or copying a software program during decompilation, the European Software Directive allows software licensees to use their copy of the software “to observe study or test the functioning of the program” in order to “determine the ideas and principles which underlie any element of the program.”

Therefore, users may freely observe a program as it operates to determine their functions and its underlying ideas, even if the goal is to create a competing program (see the UK case SAS Institute v. World Programming for more information on this concept). However, actual copying, for example in the case of source code copying, is not tolerated since this is explicitly protected by copyright.

For practical reasons, database copyrights would not be infringed if a person with the legal right to use part or all of a database performs steps necessary to use or access the contents of the database. Also, accessing a database for the purposes of private study or non-commercial research does not infringe copyright in a database.


Photo by rawpixel.com on Unsplash. (Large preview)

Moral Rights In The UK

Another difference between the UK and other parts of the world with regard to copyright law is the UK’s emphasis on the importance of moral rights. Though this issue may not often arise in technology-related copyright disputes, moral rights are additional rights over and above the economic rights typically protected by copyright law.

In the UK, moral rights are: the right to attribution, or the right to be known or recognized as the author of a work; the right to object to derogatory treatment of a work, which includes any addition, deletion, or adaptation of a work that would distort or “mutilate” the work or injure the honor or reputation of the author; the right to object to false attribution, which basically means that you would not be named as the author of something you didn’t create; and the right to privacy of certain photographs and recordings, such as those commissioned for a private occasion.

One reason moral rights might be important for developers is that the moral right to attribution gives the developer the right to be named as the author of the software program, even though it is not common industry practice to do so. By the same token, if a developer doesn’t get their name associated with projects they didn’t work on, the right to object to false attribution protects them also. Find more information about moral rights here.

It is our hope that this information has been helpful for UK software designers and developers. Though this is only introductory information, and should not be substituted for legal counsel in the event of specific questions or disputes, education about copyright law issues and other IP issues helps to empower software designers and developers to make sure their works are fully protected.

Smashing Editorial
(da, ra, yk, il)

Read article here – 

Copyright Law Basics For UK Software Developers

Thumbnail

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.

News

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)

General

  • 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.

UI/UX

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)

Security

  • 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.

Privacy

  • 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)

HTML & SVG

JavaScript

CSS

Accessibility

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.

Excerpt from – 

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

An Introduction To Automated Testing Of WordPress Plugins With PHPUnit

WordPress is a popular content management system for building websites because it is easy to get started with and a ton of themes and plugins are available to extend its feature set. The main reason WordPress has a lot of plugins and themes is because it’s easy for developers of any level to start building one. Most of its developers are not experienced, and they do not write tests for their work, perhaps because of the following reasons:

Link: 

An Introduction To Automated Testing Of WordPress Plugins With PHPUnit

How Do I Know If Venture Capital Fits My Business?

There is a popular image in the world of software which many young and inexperienced entrepreneurs are becoming infatuated with. It’s the idea that when you come up with an awesome idea, the highest peak to strive for — the ultimate goal — is getting in front of a venture capitalist and receiving a huge lump sum to propel your business to unimaginable heights and bring tremendous personal wealth. Well then, let’s explore what it really means to fund your business with equity capital.

Link – 

How Do I Know If Venture Capital Fits My Business?