ECMAScript 6 (ES6): What’s New In The Next Version Of JavaScript


  

You’ve probably heard about ECMAScript 6 (or ES6) already. It’s the next version of JavaScript, and it has some great new features. The features have varying degrees of complexity and are useful in both simple scripts and complex applications. In this article, we’ll discuss a hand-picked selection of ES6 features that you can use in your everyday JavaScript coding.

ES6: What's New In The Next Version Of JavaScript

Please note that support for these new ES6 features is well underway in modern browsers, although support varies. If you need to support old versions of browsers that lack many ES6 features, I’ll touch on solutions that might help you start using ES6 today.

The post ECMAScript 6 (ES6): What’s New In The Next Version Of JavaScript appeared first on Smashing Magazine.


Source: Smashing Magazine

Getting Started with Web Application Monitoring

This article was sponsored by Monitis. Thank you for supporting the sponsors who make SitePoint possible.

For better or for worse, our jobs as developers don’t end with that last line of code, the final commit or by hitting the “deploy” button.

Even the best-engineered web application isn’t bullet-proof, the most expensive hosting environments still aren’t one hundred percent reliable; and, ultimately, there’s always something that can go wrong.

We can plan for failure, have processes in place in the event of a problem arising and even contingencies for a genuine disaster, but in between we can monitor.

[author_more]

Monitoring allows us to be reactive; to take action in the event of a problem, as well as proactive; taking preventative action before an issue arises.

In this article we’re going to take a look at monitoring, in the context of a website or a web application. Along the way we’ll be taking a detailed look at Monitis, an all-in-one monitoring platform that is one of the leaders in its field, and how it can help make sure that once you’ve launched your app, it remains running and keeps performing.

What can go wrong?

In order to know how and what we should monitor, it helps to have an understanding of what could potentially go wrong. The short answer is probably “well, a lot” — and as such, it’s a really tough question to answer definitively. At the same time, though, there are a range of things that we can anticipate might go wrong.

Broadly speaking, we can divide these issues into a number of categories:

  • Hitting “hard” limits; for example a full disk, hitting a physical memory limit or reaching the maximum number of processes
  • Network issues; for example a site becoming unreachable, high packet losses, server connections going down or DNS failures
  • Component or service failures; perhaps your database server has gone down, for example.
  • Problems with third-party services; your S3 bucket is unreachable, your mail provider is experiencing issues, or your CDN has gone down
  • Problems with your applications; errors and exceptions, inconsistencies in your data or even bugs in your code
  • Keeping third-party code or operating system components up-to-date; in particular checking for security patches or service packs
  • There are even silly examples of human error which, alas, do still happen; such as forgetting to renew a SSL certificate.

Once you have an idea of what can go wrong, you start to get a feel for what to monitor.

Continue reading %Getting Started with Web Application Monitoring%


Source: Sitepoint

12 of the Scariest Developer Fears at Halloween

Warning: the following article will strike fear into the hearts of programmers everywhere. It may be Halloween, but it’s terrifying to realize these issues can crop up at any time of year. Turn back before it’s too late …

They're comin' to gitcha!

1. Estimation Aversion

Time estimation is hard. Even if you adequately divide a project into tiny constituent parts, it’s difficult to accurately predict how long a task will take if you’ve never done it before. Even if you’re confident, you’ll probably forget the impact of non-programming issues such as progress meetings, vacations, sick leave, documentation, etc.

Estimation is made worse by naive project managers who tie you down to those figures. Remind them that estimates are called “estimates” for a reason.

2. Suspicious Schedules

Projects must have clearly defined goals and time-lines or they can drift forever. Nothing can be ever considered “complete” but goals should be achievable and dates should be realistic. Even then, be prepared for slippage because things go wrong and it’s impossible to foresee all problems.

Programmers are often blamed for release delays. It’s not necessarily your fault: bad management and a failure to plan is the cause.

3. Scope Creeps

Those who overcome estimation and scheduling woes can be faced with the scope creep; a dastardly character who insists on new features or total overhauls every few days. Nothing is ever good enough and the project veers uncontrollably from one rewrite to another. Good project management will help. Or simply ask the creep for a fully-documented specification — they’ll go mysteriously quiet.

You are definitely going to die

4. Tool Tremors

There’s one thing worse than not having the right tools for the job: being forced to use tool you hate. Perhaps you’re a PHP developer being moved into Java. Or a Gulp expert compelled to use Grunt. Or an Atom user obliged to use Eclipse.

Be pragmatic and adopt the procedures and processes used by others in your team (unless you can convince them that migrating elsewhere is cost-effective). But having to use random tool or editor because “that’s what we use here” is soul-destroying. The solution? Don’t whine and use whatever you need. It’s easier to beg forgiveness than ask permission — and few will complain if you get the job done.

Continue reading %12 of the Scariest Developer Fears at Halloween%


Source: Sitepoint

A Microsoft Evangelist’s Favorite Chrome Extensions

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

Chrome extension Applications list

Update: Lots of discussion going on about this on Reddit

Yes I’m a Microsoft Evangelist and in my day-to-day browsing, I use Chrome Canary. I want to see the latest and greatest emerging standards and experimental features. It will occasionally have display / graphical issues, so I’ll have to revert to standard Chrome, but after a few weeks the issues seem to be resolved. My main development machine is a late-2013 MacBook Pro. I’m on the road (AKA flying) constantly, and I need a strong laptop with discrete graphics, and also allows me to work on every mobile platform, so this does the trick.

On my Windows 10 machine, I use Microsoft Edge. It’s lightweight and incredibly fast, but still missing some features for me to make it my day-to-day browser as a web developer, but for browsing content I haven’t run into many issues – in fact, the JavaScript rendering is wicked fast. I do test all my web apps for Edge because Windows 10 is growing rather fast, 110+ devices. I tried installing Win 10 on my Mac, but the SSD was failing. Oddly enough, Windows 8 and 10 both detected it, but OS X didn’t. It wasn’t until I brought it into the Apple store and they ran their in-store diagnostics that it was picked up. Even the diagnostics tool built into OS X couldn’t detect it. Odd.

Considering most of my day is spent in the browser, I need extensions to help me get the most of my work. For that, I use a number of extensions in Chrome. Microsoft Edge has also announced support for JS-based extensions while removing legacy features like Active-X and conditional comments. Bear in mind, extensions can not only pose a security hazard, but also occasionally offer a ton of overhead, both in terms of CPU but especially RAM, as they all run as each tab in Chrome runs as its own process, and brings a separate instance of each extension. That means if I have 10 tabs open, and 10 extensions, then I can have some serious overhead!

Continue reading %A Microsoft Evangelist’s Favorite Chrome Extensions%


Source: Sitepoint

The Best Free WordPress Membership Plugins

WordPress is an incredibly versatile CMS. You can use it to launch a blog, an online store, a photo gallery and more. While it’s probably not its typical use, you can also easily turn WordPress into a membership site, too.

In order to run a membership site with WordPress, you need one of the numerous, free or paid, WordPress membership site plugins. You can’t say one plugin is better than the rest – it simply depends what you need it for. Here’s a roundup of the best free WordPress membership site plugins.

1. WP-Members

WP-Members

WP-Members is probably the first WordPress membership site plugin that comes to mind. This isn’t strange because it’s a very popular plugin – it has 60,000+ active installs.

The list of its features is rather impressive. In a nutshell, it has all the features you will need to manage your members and the content they can access. Some of the features you won’t find in all other plugins are inline login/registration (i.e. from the page itself, not from the WP login page), custom registration and profile fields, automatic creation of post excerpts, and so on.

Additionally, you can find a Quick Start guide and plenty of extensions to further enrich the functionality of the plugin.

Continue reading %The Best Free WordPress Membership Plugins%


Source: Sitepoint

Streamline Android Java Code with Kotlin

Released as an alternative to iOS, the first public version of Android was in 2008. It was Java based and supported Java 6, which at the time was the latest version. Two years passed and Java 8 arrived which brought cool new features including the Stream API, interfaces and the ability to use lambdas instead of SAM (Single Abstract Method).

Java 9 is on the horizon and Android developers are stuck using older versions of Java, meaning a lot of new features will be unavailable to them.

For Android developers there is now an alternative, Kotlin, a JVM language developed by JetBrains (the company behind IntelliJ and Android Studio). Like other JVM languages including Scala or Groovy, Kotlin is not officially supported by Android, but we can use it as a plugin. Building an application with a different JVM language will let you use new and different features than those available in Java 6.

Continue reading %Streamline Android Java Code with Kotlin%


Source: Sitepoint

“This One Is Going To Be A Game Changer.” Meet SmashingConf San Francisco 2016


  

So, do you like challenges? Now, this one is going to smash you alright. Meet SmashingConf San Francisco 2016, packed with smart front-end and UX techniques — CSS/JavaScript architecture, SVG, Flexbox, pattern libraries, performance, UX, interface design, content strategy — to challenge everything about how you design and code — and how to touch someone’s heart with design.

SmashingConf San Francisco

So you know what’s going on in front-end. You’ve been working with pattern libraries and atomic design and Gulp and SMCSS and BEM and HTTP/2 and Flexbox and SVG. What you might not know though is what pitfalls and traps other web designers have encountered in practice — to prevent issues creeping out down the road.

The post “This One Is Going To Be A Game Changer.” Meet SmashingConf San Francisco 2016 appeared first on Smashing Magazine.


Source: Smashing Magazine

Can You Use Photoshop to Tell a Story?

A sculpture at work

We are ‘creative types’. We like to make stuff.

That usually means starting with nothing – an empty page, a blank notepad, a sheet of paper – and slowing adding stuff to it. Typically we might add elements like:

  • Words
  • Colors
  • Shapes
  • Photos
  • Code

[author_more]

[/author_more]

But that’s not the only way to create something new. You can create by removing items. If you think about it, a sculptor’s great talent is just knowing exactly which bits of rock to throw away.

This approach can work really well with visual imagery too. Here are two of my favorite examples where ‘taking away’ parts of an image tells a new story.

WWF (World Wildlife Fund)

WWF - Photo with shark fin - photo without fin

(See full size)

WWF took a brave approach by choosing to avoid the usual cute and endearing pandas, lion cubs and seals pups commonly used in their ads.

If you can’t quite work out the text – I had to scale it down for this email – the first image with the shark fin is labelled:

‘Horrifying.’

The second image simply removes the shark fin and adds the label:

‘More horrifying.’

It’s impressive that they are able can create a sense of sadness by removing a shark. WWF used this theme with other animals including a vulture.

Continue reading %Can You Use Photoshop to Tell a Story?%


Source: Sitepoint

Build a Real-Time Photo Update App with the Instagram API

Instagram is an online photo sharing network that enables its users to take pictures and videos, and share them on a variety of social networking platforms. Users can personalize each photo that they upload (for example by adding various effects) and categorize them with a hashtag.

In this tutorial we’ll be building a real-time photo update app. This will allow users to enter a hashtag to which they would like to subscribe. Then, every time a new photo with that hashtag is posted to Instagram, it will be sent to our app which will display it accordingly.

We’ll implement our app in Node.js using Express as the framework. The real-time part will be implemented using Instagram’s Real-time Photo Updates and Socket.io. As ever, the code for this tutorial is available on our Github repo.

How the Real-time Photo Updates Work

[author_more]

Instagram’s Real-time Photo Updates work by sending notifications to your server every time a new photo is posted to the subscription that you selected. Here’s a break down:

  1. First, your server sends a subscription request to Instagram.
  2. Instagram receives the request and verifies that you really want to subscribe by sending back a response which your server has to send back.
  3. Your server receives the data and sends it back to Instagram.
  4. If the data is the same, Instagram will start sending notifications to your server.

There are four types of subscriptions from which you receive real-time updates : users, tags, locations and geographies. You can read more about each of these in the documentation. In this tutorial, we’re only going to use the tags subscription. This allows you to receive notifications when a new photo is tagged with whichever tags you specify.

Register an App

The first thing that we need to do is to create an Instagram account then register as a developer.

Next, we need to register a new Instagram app. You can put any valid URL for the website and Redirect URL as they are not needed for our app to function properly.

Screenshot of registering a new client to use the Instagram API

Once the app is created, take note of the CLIENT ID and CLIENT SECRET as they will be needed later when making requests to the Instagram API.

The Server-side setup

The next thing to do is clone the repo and install the dependencies using npm.

git clone git@github.com:sitepoint-editors/express-instagramrealtime.git
cd express-instagramrealtime
npm install

This will pull in the following dependencies:

  • Express is the de facto standard web application server framework for Node.js. It is used for serving the public-facing side of the app as well as receiving photo notifications from Instagram.
  • Express Handlebars is used for implementing views in Express.js.
  • body-parser is used for parsing the form data submitted by the user. In this case, the data is the tag that the user wants to subscribe to.
  • instagram-node-lib is a Node.js library for working with the Instagram API. Once we have the tag provided by the user, this library is used to subscribe to the tag.
  • socket.io — after subscribing to a specific tag, Instagram sends notifications to the server every time a new photo is posted with the tag that we used. This is where socket.io comes in. It is used for sending the photo data to the front-end every time a new notification is received by the server.
  • moment is used for formatting the timestamp provided by the Instagram API.

Now we’re ready to look at the app. In app.js we first need to require the dependencies we installed.

var express = require('express');
var exphbs  = require('express-handlebars');
var moment = require('moment');
var bodyParser = require('body-parser');
var instagram = require('instagram-node-lib');
var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// set the file name of the default layout
app.engine('handlebars', exphbs({defaultLayout: 'main'}));

// set the expressJS view engine to handlebars
app.set('view engine', 'handlebars');

// set the path to the front-end assets
app.use(express.static('public'));

Now, that we have required the necessary dependencies, we need to set the Instagram CLIENT ID and CLIENT SECRET. You will replace these values, with the values generated when you registered your app.

var instagram_client_id = 'YOUR-INSTAGRAM-CLIENT-ID';
var instagram_client_secret = 'YOUR-INSTAGRAM-CLIENT-SECRET';

instagram.set('client_id', instagram_client_id);
instagram.set('client_secret', instagram_client_secret);

Once we have our ID and Secret configured, the next thing we are going to do is create a server instance that will run on port 4000. You can check if the server has started running by using console.log to output the host and port.

var server = app.listen(4000, function(){
  var host = server.address().address
  var port = server.address().port

  console.log('Example app listening at http://%s:%s', host, port)
});

Next, have socket.io listen to the Express server. This binds socket.io to the same port as your Express server, so that later on you can use port 4000 when you connect to this socket on the client side.

var io = require('socket.io').listen(server);

Now let’s move on to creating a new route for the home page of the app. All it does is render the home template.

app.get('/', function(req, res){
  res.render('home');
});

Creating the Views

According to the default handlebars configuration, all view files should be stored in the views directory. The file home.handlebars will render the form controls into which the user will enter the hashtag that will be used for the real-time photo updates:

<div id="form-wrapper">
  <div class="form-group">
    <label for="tag" class="control-label">Hashtag</label>
    <input type="text" class="form-control input-lg" id="tag" name="tag" autofocus>
  </div>

  <div class="form-group">
    <button id="start" class="btn btn-lg btn-block btn-primary">Start</button>
  </div>
</div>

<div id="results" class="hidden">
  <div class="row"></div>
</div>

Every time a new photo which has that hashtag is posted by any Instagram user, it will be immediately displayed by the app inside the div with the id of results.

Earlier on the app.js file, we set the file name for the default layout with the following code:

app.engine('handlebars', exphbs({defaultLayout: 'main'}));

In handlebars, layout files are stored in the views/layouts. In this directory the file main.handlebars serves as the main layout. The main content is rendered inside the div with the id of wrapper:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Real-time Photo Updates</title>

    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div id="wrapper">
    {{{body}}}
    </div>
    <script src="https//instagram.com/js/jquery.min.js"></script>
    <script src="https//instagram.com/js/jquery.backstretch.min.js"></script>
    <script src="https//instagram.com/js/jquery.imagepreload.min.js"></script>
    <script src="https//instagram.com/js/vague.min.js"></script>
    <script src="https//instagram.com/js/socket.io.min.js"></script>
    <script src="https//instagram.com/js/handlebars.min.js"></script>
    <script src="https//instagram.com/js/moment.min.js"></script>
    <script src="https//instagram.com/js/livestamp.min.js"></script>
    <script src="https//instagram.com/js/script.js"></script>
  </body>
</html>

As you can see, a few front-end dependencies are required. Here’s a brief description of each:

  • Bootstrap is a front-end framework. This is my personal choice for almost every web thing that I build. If you also want to use Bootstrap, you can find free themes at bootswatch.com.
  • jQuery is used for manipulating HTML and listening for click events on the page. It’s also the dependency of the 3 libraries below.
  • jQuery BackStretch is used for making the current photo into a full page background image.
  • The jQuery Image Preload plugin is used for preloading the image before showing it to the user.
  • Livestamp helps keep the timeago text current when no new photo is received from the server side for too long.
  • Vague.js applies a blur filter to the background image.
  • handlebars is used for generating the HTML to be used for displaying photos.
  • moment is used for displaying timeago text based on the timestamp.

These dependencies can be found in public/js and public/css. This is because we specified that this folder (public) should contain our front-end assets:

app.use(express.static('public'));

You could also use bower to download and manage these assets. If you so chose, be sure to update the .bowerrc file so that it uses the static directory that you specified.

With that out of the way, we’re now ready to create the script.js file.

Continue reading %Build a Real-Time Photo Update App with the Instagram API%


Source: Sitepoint

How to Use Pebble’s New Dictation API

Earlier this month, Pebble released version 3.6 of their SDK. My eyes widened when I discovered it included access to their Dictation API. This API gives all Pebble developers access to dictation from the Pebble Time microphone. I eagerly opened up the CloudPebble editor and began experimenting!

In this article, we’ll explore the Dictation API by putting together a watchapp that accepts a dictated message and sends it to a Slack channel via IFTTT.

What You’ll Need

In order to step through this guide, you’ll need the following:

[author_more]

The Code

There are developers out there who prefer to jump straight into the code. If you are that type of developer, all the code is available on GitHub.

Our watchapp will have two main files:

  • main.c – Our C code manages the dictation, the display of instructions and display of the entered message.
  • pebble-js-app.js – This manages our communication to IFTTT.

IFTTT

I’d recommend setting up your IFTTT Maker channel and Slack rule first, just so the code set up we’ll do after this makes more sense.

I’ve previously covered IFTTT in the articles Connecting LIFX Light Bulbs to the IoT Using IFTTT and Connecting the IoT and Node.js to IFTTT (this second one covers the Maker channel). So if you’d like a more in depth explanation of using IFTTT and the Maker channel, have a read through of those.

Here’s a very quick runthrough of what you’ll need to set up:

  • Create an IFTTT account if you haven’t already got one.
  • Connect the Maker Channel and Slack Channel to your account.
  • Create a new recipe with the Maker channel as the trigger.
  • Choose the “Receive a web request” trigger option and name the event “slack_message”.
  • Choose the Slack channel to be the action channel for this IFTTT rule and choose the “Post to channel” action.
  • Select the Slack channel you’d like the message to go to and set the message to only contain {{Value1}}.
  • You can remove the title, or choose something like “Pebble Message Received”. I left it blank. I also left the thumbnail URL blank too.
  • Create your action and you should be ready to go! IFTTT is ready to send any messages it receives from that event to the Slack channel you specified.

Our C Code

The main.c file looks like so:

[code language=”c”]
#include <pebble.h>

static Window *s_main_window;
static TextLayer *message_layer;

static DictationSession *s_dictation_session;
static char display_message[512];

static void handle_message(char *slack_message) {
DictionaryIterator *iter;
app_message_outbox_begin(&iter);

dict_write_cstring(iter, 0, slack_message);

app_message_outbox_send();
}

static void dictation_session_callback(DictationSession *session, DictationSessionStatus status, char *transcription, void *context) {
if(status == DictationSessionStatusSuccess) {
snprintf(display_message, sizeof(display_message), “Message sent!nn”%s””, transcription);
text_layer_set_text(message_layer, display_message);
handle_message(transcription);
} else {
static char error_message[128];
snprintf(error_message, sizeof(error_message), “Error code:n%d”, (int)status);
text_layer_set_text(message_layer, error_message);
}
}

static void select_click_handler(ClickRecognizerRef recognizer, void *context) {
dictation_session_start(s_dictation_session);
}

static void click_config_provider(void *context) {
window_single_click_subscribe(BUTTON_ID_SELECT, select_click_handler);
}

static void window_load(Window *window) {
Layer *window_layer = window_get_root_layer(window);
GRect bounds = layer_get_bounds(window_layer);

message_layer = text_layer_create(GRect(bounds.origin.x, (bounds.size.h – 72) / 2, bounds.size.w, bounds.size.h));
text_layer_set_text(message_layer, “Press select and tell me your Slack message :)”);
text_layer_set_text_alignment(message_layer, GTextAlignmentCenter);
text_layer_set_font(message_layer, fonts_get_system_font(FONT_KEY_GOTHIC_24_BOLD));
layer_add_child(window_layer, text_layer_get_layer(message_layer));
}

static void window_unload(Window *window) {
text_layer_destroy(message_layer);
}

static void init() {
s_main_window = window_create();
window_set_click_config_provider(s_main_window, click_config_provider);
window_set_window_handlers(s_main_window, (WindowHandlers) {
.load = window_load,
.unload = window_unload,
});
window_stack_push(s_main_window, true);

app_message_open(app_message_inbox_size_maximum(), app_message_outbox_size_maximum());

s_dictation_session = dictation_session_create(sizeof(display_message), dictation_session_callback, NULL);
}

static void deinit() {
dictation_session_destroy(s_dictation_session);

window_destroy(s_main_window);
}

int main() {
init();
app_event_loop();
deinit();
}
[/code]

Our Dictation Calls

The first bit of code Pebble developers will notice is new is the line which sets up a DictationSession. This is what we store our transcription data and other data related to the Dictation API within:

[code language=”c”]
static DictationSession *s_dictation_session;
[/code]

Next, we define a simple char array to store our latest successfully transcribed message:

[code language=”c”]
static char display_message[512];
[/code]

Within our init() function, we set up the actual dictation session so that it is ready and waiting for us to request it. It is set to provide space to store our dictated message that matches the length of display_message. It also sets the callback function once we’ve performed dictation to be dictation_session_callback().

[code language=”c”]
s_dictation_session = dictation_session_create(sizeof(display_message), dictation_session_callback, NULL);
[/code]

Running Dictation on Click

We want to set up our dictation to run when the user clicks the select button on their Pebble. We set click functionality via window_set_click_config_provider().

[code language=”c”]
window_set_click_config_provider(s_main_window, click_config_provider);
[/code]

That tells our Pebble that our click functions are defined within click_config_provider(). Within that, we initialize the process of dictation via a press of the select button (defined as BUTTON_ID_SELECT in Pebble’s SDK). This button action is set up via window_single_click_subscribe() function.

[code language=”c”]
static void click_config_provider(void *context) {
window_single_click_subscribe(BUTTON_ID_SELECT, select_click_handler);
}
[/code]

Continue reading %How to Use Pebble’s New Dictation API%


Source: Sitepoint