Social Media 2.0: Real Life Augmentation

Social media platforms such as MySpace, Bebo, Facebook, Twitter, Snapchat, Instagram, LinkedIn and Google+ have been transformative technologies which shaped the early years of the twenty-first century. People can meet, interact and communicate in ways which would have been impossible a decade earlier.

Despite the ongoing success of social networks, most people’s real and online lives rarely connect in a cohesive manner:

  • you have a long list of online “friends” you’ve never met, know or speak with
  • your actual friends use different social networks to you
  • you disconnect from real-world conversations to join online virtual chats
  • you’ll reprimand people for talking nonsense yet believe identical online articles and alerts
  • you feel obliged to comment on online articles despite not reading the text or understanding the points raised
  • you’ll say things online which would never be said in person-to-person conversations.

Most people live separate online and offline lives. Some even adopt a different online image or persona.

Augmented Reality Social Experiment

Smartphone systems such as Siri and Cortana and screenless devices such as Amazon Echo and Google Home have already begun to revolutionize how we interact with devices. The next step is the Augmented Reality Social Experiment which will finally end the distinction between your real and online lives.

Continue reading %Social Media 2.0: Real Life Augmentation%


Source: Sitepoint

How to Synchronize WordPress Live and Development Databases

Developing WordPress themes is considerably easier with real content. Unexpected situations begin to arise when people add pages, posts, media and comments. Your beautiful template can break when:

  • editors use assets which are too big or small for your breakpoints to handle
  • managers introduce a new menu item which doesn’t fit at lower screen sizes
  • your theme implements a two-level menu hierarchy which fails to cater for the inevitable third-level page
  • long or deeply-nested comments become unreadable.

Ideally, your development server should have a snapshot of your live production server’s database. Your workflow can be improved further if content is automatically synchronized when changes occur.

Synchronization Snags

One-way WordPress database replication can be more challenging than you expect. There are good reasons why few coders live in this development dreamland…

Continue reading %How to Synchronize WordPress Live and Development Databases%


Source: Sitepoint

Top Resources to Get Started with Java 9

You can tell that Java 9 draws near because the number of posts and talks about it skyrocketed in the recent months. I want to recommend existing talks and articles where you can learn about Java 9 but also further resources, where new, high-quality content will pop up.

Talks

If you’re the kind of person who likes to watch talks, there are quite a few I can recommend. For a great high-level overview and conceptual intro to the module system, watch Java 9: Make Way for Modules! (Mark Reinhold; 40 min). Going deeper into the module system, the JDK team has an entire series of talks:

As a follow-up, there was an Ask the Architect session at JFokus where Mark Reinhold answers all kinds of questions, among them some about Java 9 (transitive dependencies, version conflicts, state of JavaFX, ahead-of-time compilation; 23 min).

With Java 9 coming closer, people started presenting on non-modularity features that Java 9 has to offer. This is me talking a little bit about the module system before going into the new language features, a few new APIs (collection factories, reactive streams aka Flow API, stack-walking, multi-release JARs) and performance (50 min). If you want to dive deeper, there is a talk by Aleksey Shipilëv on compact strings and indified string concatenation, which I highly recommend (60 min). Monica Beckwith explains about G1 but be warned, you better have your GC expertise down before giving this a try (55 min).

There are also a number of great talks that are much more practical. To learn about how Maven deals with with Java 9, watch Robert Scholte talk about Unicode encoding, version strings, cross compilation, multi-release JARS, and then of course Jigsaw with its impact on how Maven works but also what it has to offer (50 min). Don’t miss live-coding queen Trisha Gee working on a Java 9 project with IntelliJ, where she demonstrates various features of both the JVM and the IDE (30 min). If you’re interested to see what a migration to Java 9 modules might look like, watch Rabea Gransberger live-refactor a small demo project (15 min). Of course there is no way to talk about live-coding without mentioning Venkat Subramaniam, who shows off modules and JShell in a mammoth 150 minute live session.

For shorter bits there are a couple of interviews the Voxxed folks recorded:

Articles

Continue reading %Top Resources to Get Started with Java 9%


Source: Sitepoint

The Ultimate Guide to Choosing a Hosting Provider

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

You need a website. You have a clear idea of what you want, and have carefully considered the type of hosting you need. Now, with credit card in hand, it’s time to decide which company to sign up with.

Choosing a hosting provider is one of the most crucial decisions you’ll make. The future of your website depends on it.

If you were looking for a babysitting service for your children, you wouldn’t just pick the cheapest option that came along. “Leave your kids with us for just 50c a day. Pick them up whenever.” Your kids mean more to you than that. You’d want to make sure they were safe, and being looked after by people who know what they’re doing. Saving money isn’t your priority; investing in their well-being is.

Invest some time up front in the future well-being of your website. Who should you pay to host your website? What are the qualities you need in a hosting company?

Here are six key criteria to consider when weighing up the options.

1. Speed & Performance

Do you remember the last time you bought a new laptop? You immediately noticed the improvement in performance, and the old one suddenly felt surprisingly slow. Fast is good. You want a hosting company with the equivalent of a new laptop.

First impressions are everything. You don’t want new visitors to your site to leave before your home page loads. How committed is the hosting company to performance? It requires an ongoing investment in both hardware and software.

It’s not always easy to tell how often a company upgrades its hardware, or how much money they invest in it. Here are some ways you might find out:

Continue reading %The Ultimate Guide to Choosing a Hosting Provider%


Source: Sitepoint

Procedurally Generated Game Terrain with ReactJS, PHP, and Websockets

Last time, I began telling you the story of how I wanted to make a game. I described how I set up the async PHP server, the Laravel Mix build chain, the ReactJS front-end, and the Web Sockets connecting all this together. Now, let me tell you about what happened when I starting building the game mechanics with this mix of ReactJS, PHP, and Websockets…

The code for this part can be found at: github.com/assertchris-tutorials/sitepoint-making-games/tree/part-2. I’ve tested it with PHP 7.1 and in a recent version of Google Chrome.

Final image

Making A Farm

“Let’s start simple. We have a 10 by 10 grid of tiles, filled with randomly generated stuff.”

I decided to represent the farm as a Farm, and each tile as a Patch:

namespace AppModel;

class Farm
{
    private $width
    {
        get { return $this->width; }
    }

    private $height
    {
        get { return $this->height; }
    }

    public function __construct(int $width = 10,
        int $height = 10)
    {
        $this->width = $width;
        $this->height = $height;
    }
}

This is from app/Model/FarmModel.pre

I thought it would be a fun time to try out the class accessors macro by declaring private properties with public getters. For this I had to install pre/class-accessors (via composer require).

I then changed the socket code to allow for new farms to be created on request:

namespace AppSocket;

use AerysRequest;
use AerysResponse;
use AerysWebsocket;
use AerysWebsocketEndpoint;
use AerysWebsocketMessage;
use AppModelFarmModel;

class GameSocket implements Websocket
{
    private $farms = [];

    public function onData(int $clientId,
        Message $message)
    {
        $body = yield $message;

        if ($body === "new-farm") {
            $farm = new FarmModel();

            $payload = json_encode([
                "farm" => [
                    "width" => $farm->width,
                    "height" => $farm->height,
                ],
            ]);

            yield $this->endpoint->send(
                $payload, $clientId
            );

            $this->farms[$clientId] = $farm;
        }
    }

    public function onClose(int $clientId,
        int $code, string $reason)
    {
        unset($this->connections[$clientId]);
        unset($this->farms[$clientId]);
    }

    // ...
}

This is from app/Socket/GameSocket.pre

I noticed how similar this GameSocket was to the previous one I had; except instead of broadcasting an echo I was checking for new-farm and sending a message back only to the client that had asked.

“Perhaps it’s a good time to get less generic with the ReactJS code. I’m going to rename component.jsx to farm.jsx.”

import React from "react"

class Farm extends React.Component
{
    componentWillMount()
    {
        this.socket = new WebSocket(
            "ws://127.0.0.1:8080/ws"
        )

        this.socket.addEventListener(
            "message", this.onMessage
        )

        // DEBUG

        this.socket.addEventListener("open", () => {
            this.socket.send("new-farm")
        })
    }
}

export default Farm

This is from assets/js/farm.jsx

In fact, the only other thing I changed was sending new-farm instead of hello world. Everything else was the same. I did have to change the app.jsx code though:

import React from "react"
import ReactDOM from "react-dom"
import Farm from "./farm"

ReactDOM.render(
    <Farm />,
    document.querySelector(".app")
)

This is from assets/js/app.jsx

It was far from where I needed to be, but using these changes I could see the class accessors in action, as well as prototype a kind of request/response pattern for future Web Socket interactions. I opened the console, and saw {"farm":{"width":10,"height":10}}.

“Great!”

Then I created a Patch class to represent each tile. I figured this was where a lot of the game’s logic would happen:

namespace AppModel;

class PatchModel
{
    private $x
    {
        get { return $this->x; }
    }

    private $y
    {
        get { return $this->y; }
    }

    public function __construct(int $x, int $y)
    {
        $this->x = $x;
        $this->y = $y;
    }
}

This is from app/Model/PatchModel.pre

I’d need to create as many patches as there are spaces in a new Farm. I could do this as part of FarmModel construction:

namespace AppModel;

class FarmModel
{
    private $width
    {
        get { return $this->width; }
    }

    private $height
    {
        get { return $this->height; }
    }

    private $patches
    {
        get { return $this->patches; }
    }

    public function __construct($width = 10, $height = 10)
    {
        $this->width = $width;
        $this->height = $height;

        $this->createPatches();
    }

    private function createPatches()
    {
        for ($i = 0; $i < $this->width; $i++) {
            $this->patches[$i] = [];

            for ($j = 0; $j < $this->height; $j++) {
                $this->patches[$i][$j] =
                    new PatchModel($i, $j);
            }
        }
    }
}

This is from app/Model/FarmModel.pre

For each cell I created a new PatchModel object. These were pretty simple to begin with, but they needed an element of randomness. A way to grow trees, weeds, flowers; at least to begin with:

public function start(int $width, int $height,
    array $patches)
{
    if (!$this->started && random_int(0, 10) > 7) {
        $this->started = true;
        return true;
    }

    return false;
}

This is from app/Model/PatchModel.pre

I thought I’d begin just by randomly growing a patch. This didn’t change the external state of the patch, but it did give me a way to test how they were started by the farm:

namespace AppModel;

use Amp;
use AmpCoroutine;
use Closure;

class FarmModel
{
    private $onGrowth
    {
        get { return $this->onGrowth; }
    }

    private $patches
    {
        get { return $this->patches; }
    }

    public function __construct(int $width = 10,
        int $height = 10, Closure $onGrowth)
    {
        $this->width = $width;
        $this->height = $height;
        $this->onGrowth = $onGrowth;
    }

    public async function createPatches()
    {
        $patches = [];

        for ($i = 0; $i < $this->width; $i++) {
            $this->patches[$i] = [];

            for ($j = 0; $j < $this->height; $j++) {
                $this->patches[$i][$j] = $patches[] =
                    new PatchModel($i, $j);
            }
        }

        foreach ($patches as $patch) {
            $growth = $patch->start(
                $this->width,
                $this->height,
                $this->patches
            );

            if ($growth) {
                $closure = $this->onGrowth;
                $result = $closure($patch);

                if ($result instanceof Coroutine) {
                    yield $result;
                }
            }
        }
    }

    // ...
}

This is from app/Model/FarmModel.pre

There was a lot going on here. For starters, I introduced an async function keyword using a macro. You see, Amp handles the yield keyword by resolving Promises. More to the point: when Amp sees the yield keyword, it assumes what is being yielded is a Coroutine (in most cases).

Continue reading %Procedurally Generated Game Terrain with ReactJS, PHP, and Websockets%


Source: Sitepoint

Web Development Reading List #176: Safari 10.1, Prompt()-Deprecation, And Professional Pride




 


 

What a busy week! To stay on top of things, let’s review what happened in the web development world the last few days — from browser vendors pushing new updates and building new JavaScript guidelines and security standards to why we as web professionals need to review our professional pride. How can we properly revoke certificates in browsers, for example? And how can we build accessibility into a style guide? Let’s take a look.

Web Development Reading List 176

Safari 10.1 was announced a while ago already, and this week it finally came to Macs and iOS devices around the world. The new Safari version ships CSS Grid Layouts, fetch(), IndexedDB2.0, Custom Elements, Form Validation, Media Capture, and much more.

The post Web Development Reading List #176: Safari 10.1, Prompt()-Deprecation, And Professional Pride appeared first on Smashing Magazine.


Source: Smashing Magazine

Blooming Colors And A Bit Of Magic: Wallpapers To Get Your Ideas Springing (April 2017 Edition)




 


 

Time is running! The first quarter of the year lies already behind us and a new season is in full swing. But no matter if April means blooming colors and embracing the warmer weather in your part of the world or getting cozy for autumn, our new batch of desktop wallpapers is bound to cater for some fresh inspiration regardless of that.

Desktop Wallpaper Calendars April 2017

We’ve been on this mission to bring you unique wallpaper calendars each month anew for eight years already, and we are very thankful to all the designers and artists who keep it running by diligently contributing their artworks to it. This post features their works for April 2017. All wallpapers come in versions with and without a calendar and can be downloaded for free. Now could there be a better occasion for a little inspiration kick?

The post Blooming Colors And A Bit Of Magic: Wallpapers To Get Your Ideas Springing (April 2017 Edition) appeared first on Smashing Magazine.


Source: Smashing Magazine

Taking Steps towards Scrum

The following is an extract from our book, Scrum: Novice to Ninja, written by M. David Green. Copies are sold in stores worldwide, or you can buy it in ebook form here.

For most of this book, we’ve been talking about the practicalities of scrum. Although the core definition of scrum is very versatile—supporting a wide range of applications—we’ve gone into a fairly opinionated and detailed explanation of the mechanics of scrum as it can be applied in web and mobile teams. (Many of these principles and practices, however, apply just as well to other kinds of development work.)

Now that we have some shared vocabulary and concepts, in this chapter we’re going to discuss how to get a team started with scrum. We’ll go into more detail about the arguments for scrum when doing web and mobile development. We’ll discuss what scrum is best for, how it compares to the alternatives, and provide answers to some of the questions that come up when making the case for scrum and applying it in a company.

Continue reading %Taking Steps towards Scrum%


Source: Sitepoint

Writing Better JavaScript with Flow

How often have you found yourself tracking down a bug in some code, only to find the error was something simple that should have been avoidable? Maybe you passed the arguments to a function in the wrong order, or perhaps you tried to pass a string instead of a number? JavaScript’s weak typing system and willingness to try to coerce variables into different types can be a source of a whole class of bugs that just don’t exist in statically typed languages.

March 30th, 2017: The article was updated to reflect changes to the Flow library.

Flow is a static type checker for JavaScript first introduced by Facebook at the Scale Conference in 2014. It was conceived with a goal of finding type errors in JavaScript code, often without having to modify our actual code, hence consuming little effort from the programmer. At the same time, it also adds additional syntax to JavaScript that provides more control to the developers.

In this article, I’ll introduce you to Flow and it’s main features. We’ll look at how to set it up, how to add type annotations to your code, and how to automatically strip out those annotations when running the code.

Installation

Flow currently works on Mac OS X, Linux (64-bit) and Windows (64-bit). The easiest way to install it is via npm:

npm install --save-dev flow-bin

and add it to your project’s package.json file, under the scripts section:

"scripts": {
  "flow": "flow"
}

Once this is done, we’re ready to go ahead and explore its features.

Getting Started

A configuration file named .flowconfig must be present at the root of the project folder. We can create an empty config file by running the command:

npm run flow init

Once the config file is present, you can run ad-hoc checks on the code within your project folder and any subfolders by running the following command at the terminal:

npm run flow check

However, this is not the most efficient way to use Flow since it causes Flow itself to recheck the entire project’s file structure every time. We can use the Flow server, instead.

The Flow server checks the file incrementally which means that it only checks the part that has changed. The server can be started by running on the terminal the command npm run flow.

The first time you run this command, the server will start and show the initial test results. This allows for a much faster and incremental workflow. Every time you want to know the test results, run flow on the terminal. After you’re done with your coding session, you can stop the server using npm run flow stop.

Flow’s type checking is opt-in. This means that you don’t need to check all your code at once. You can select the files you want to check and Flow will do the job for you. This selection is done by adding @flow as a comment at the top of any JavaScript files you want to be checked by Flow:

/*@flow*/

This helps a lot when you’re trying to integrate Flow into an existing project as you can choose the files that you want to check one by one and resolve any errors.

Type Inference

Generally, type checking can be done in two ways:

  • Via annotations: We specify the types we expect as part of the code, and the type checker evaluates the code based on those expectations
  • Via code inference: The tool is smart enough to infer the expected types by looking at the context in which variables are used and checks the code based on that

With annotations, we have to write some extra code which is only useful during development and is stripped off from the final JavaScript build that will be loaded by the browser. This requires a bit of extra work upfront to make the code checkable by adding those extra type annotations.

In the second case, the code is already ready for being tested without any modification, hence minimizing the programmer’s effort. It doesn’t force you to change how you code as it automatically deduces the data type of the expressions. This is known as type inference and is one of the most important features of Flow.

To illustrate this feature, we can take the below code as an example:

/*@flow*/

function foo(x) {
  return x.split(' ');
}

foo(34);

This code will give an error on the terminal when you run the npm run flow command, as the function foo() expects a string while we have passed a number as an argument.

The error will look something like this:

index.js:4
  4:   return x.split(' ');
                ^^^^^ property `split`. Property not found in
  4:   return x.split(' ');
              ^ Number

It clearly states the location and the cause of the error. As soon as we change the argument from a number to any string, as shown in the following snippet, the error will disappear.

/*@flow*/

function foo(x) {
  return x.split(' ');
};

foo('Hello World!');

As I said, the above code won’t give any errors. What we can see here is that Flow understands that the split() method is only applicable to a string, so it expects x to be a string.

Nullable Types

Flow treats null in a different way compared to other type systems. It doesn’t ignore null, thus it prevents errors that may crash the application where null is passed instead of some other valid types.

Consider the following code:

/*@flow*/

function stringLength (str) {
  return str.length;
}

var length = stringLength(null);

In the above case, Flow will throw an error. To fix this, we’ll have to handle null separately as shown below:

Continue reading %Writing Better JavaScript with Flow%


Source: Sitepoint

CSS Viewport Units: A Quick Start

CSS Viewport Units

Thank you to Dave Maxwell and Ralph Masonfor having reviewed this article.

It has been a few years since viewport units were first introduced in CSS. They are truly responsive length units in the sense that their value changes every time the browser resizes. If you have heard about these units before but never learned about them in detail, this article can help you out.

The Units and Their Meaning

There are four viewport based units in CSS. These are vh, vw, vmin and vmax.

  • Viewport Height (vh) — This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.
  • Viewport Width (vw) — This unit is based on the width of the viewport. A value of 1vw is equal to 1% of the viewport width.
  • Viewport Minimum (vmin) — This unit is based on the smaller dimension of the viewport. If the viewport height is smaller than the width, the value of 1vmin will be equal to 1% of the viewport height. Similarly, if the viewport width is smaller than the height, the value of 1vmin will be equal to 1% of the viewport width.
  • Viewport Maximum (vmax) — This unit is based on the larger dimension of the viewport. If the viewport height is larger than the width, the value of 1vmax will be equal to 1% of viewport height. Similarly, if the viewport width is larger than the height, the value of 1vmax will be equal to 1% of hte viewport width.

Let’s see what the value of these units will be in different situations:

  • If the viewport is 1200px wide and 1000px high, the value of 10vw will be 120px and the value of 10vh will be 100px. Since the width of the viewport is greater than its height, the value of 10vmax will be 120px and the value of 10vmin will be 100px.
  • If the device is now rotated so that the viewport becomes 1000px wide and 1200px high, the value of 10vh will be 120px and the value of 10vw will be 100px. Interestingly, the value of 10vmax will still be 120px because it will now be determined based on the height of the viewport. Similarly, the value of 10vmin will still be 100px.
  • If you resize the browser window so that the viewport becomes 1000px wide and 800px high, the value of 10vh will become 80px and the value of 10vw will become 100px. Similarly, the value of 10vmax will become 100px and the value of 10vmin will become 80px.

At this point, viewport units may sound similar to percentages. However, they are very different. In the case of percentages, the width or height of the child element is determined with respect to its parent. Here is an example:

See the Pen Viewport Units and Percentage by SitePoint (@SitePoint) on CodePen.

As you can see, the width of the first child element is set to be equal to 80% of its parent’s width. However, the second child element has a width of 80vw, which makes it wider than its parent.

Applications of Viewport Units

Since these units are based on viewport dimensions, it is very convenient to use them in situations where the width, height or size of elements needs to be set relative to the viewport.

Continue reading %CSS Viewport Units: A Quick Start%


Source: Sitepoint