Monthly Archives: September 2016

ES proposal: global

By Axel Rauschmayer

The ECMAScript proposal “global” by Jordan Harband is currently at stage 3. It provides a new standard way of accessing the global object.

Referring to the global object

The following are a few popular ways of referring to the global object:

  • Global variables:
    • Global variable window: is the classic way of referring to the global object. But it doesn’t work in Node.js and in Web Workers.
    • Global variable self: is available in Web Workers and browsers in general. But it isn’t supported by Node.js. Some people use self to mark code that works in both Web Workers and normal browser contexts.
    • Global variable global: is only available in Node.js. Until now!
  • this:
    • this in global scope: refers to the global object. The only problem is that Node.js modules and ES6 modules have their own scopes, which means that this approach doesn’t work there.
    • this during a function call in sloppy mode: If you call a function via a function call (and not a method call), its this refers to the global object in non-strict mode. In strict mode, it is undefined.
    • new Function('return this')(): works in both strict mode and sloppy mode, because the parameters of new Function() are always evaluated in sloppy mode. There is one important caveat: eval, new Function(), etc. are not available if you use CSP (Content Security Policy). That makes this approach unsuited in many cases.

The proposal

The ECMAScript proposal standardizes the global variable global for accessing the global object. It also standardizes that the global object must have Object.prototype in its prototype chain. The following is already true in web browsers today:

    > Object.prototype.isPrototypeOf(window)
    true

Best practices

The global object is now considered a mistake that JavaScript can’t get rid of, due to backward compatibility. It affects performance negatively and is generally a confusing feature.

ECMAScript 6 moves away from the global object by providing three new ways for declaring variables that don’t create global properties in global scope (as var declarations and function declarations do):

  • let declarations
  • const declarations
  • Class declarations

In other words: all properties of the global object are global variables, but not all global variables are properties of the global object. For example (executed in global scope):

    > var foo;
    > 'foo' in window
    true
    
    > let bar;
    > 'bar' in window
    false

It is normally preferable to refer to global variables as variables and not as properties of, e.g., window. That has always worked on all JavaScript platforms.

Furthermore, starting with ES6 (and even before), most JavaScript code lives in modules and will thus never be in global scope.

Therefore, global will mostly be relevant for polyfills.

A polyfill

The proposal’s author, Jordan Harband, has written a polyfill for it.

Using it with CommonJS syntax:

    var global = require('system.global')();

Using it with ES6 module syntax:

    import getGlobal from 'system.global';
    const global = getGlobal();

The package always uses the “most native” approach available (global on Node.js etc., window in normal browser contexts, etc.).

More information on the global object

Source:: 2ality

Everything You Should Know About Progressive Web Apps

By Danny Markov

progressive-web-apps_1

A Progressive Web Apps is a web application which takes advantage of modern browser features and can be added to your homescreen, behaving just like a native application.

In this tutorial we’re going to show you everything you need to know about PWAs, step by step, with practical examples and a demo app. To not start from scratch, we are going to use the selfie app we made recently, and make it progressive.


What is a Progressive Web App

In its core a progressive web app isn’t any different from a normal website – it’s made of HTML, CSS and JavaScript, and lives in the browser. What separates PWAs from regular websites is a list of 10 key concepts that need to be fulfilled. Here they are, taken directly from the Google Developers website.

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

Following these guidelines will ensure that your app works well not only when viewed in the browser, but also when started separately via a home screen shortcut. You may find the wording Google has chosen rather confusing, but don’t worry, we will explain the rules one by one later in the tutorial.


What a Progressive Web App is NOT

The concept of PWAs shouldn’t be confused with:

All of the aforementioned technologies wrap HTML apps and package them into executable files, be it an .apk, .exe or anything else, which then have to be downloaded from the respective app store and installed on the user’s device.

PWAs don’t require installation and aren’t available (yet) in Google Play or the iTunes App store. To download a PWA you need to simply visit it’s website and then save it to the home screen as a shortcut. Developing and maintaining separate iOS and Android versions is no longer an issue, but browser support needs to be taken into consideration.


1. Safe

Most progressive web apps work with native APIs and service workers, technologies that deal with sensitive data and need to be handled with caution. That’s why every PWA has to be served through a HTTPS connection.

If you don’t have access to a server with a SSL certificate, the easiest way run projects in a secure environment is via GitHub Pages or a similar service. Any GitHub repository can be hosted directly over HTTPS, and both GitHub and GitHub Pages are free for public repos.

This is where we’ve chosen to host our demo: https://tutorialzine.github.io/pwa-photobooth/.

For simple testing on a local server, you can also try Ngrok. Its a tiny tool that allows you to tunnel any currently running localhost to a secure public URL. Ngrok is free and available for Windows, Mac, and Linux.


2_progressive

2. Progressive

Essentially, what this means is that PWAs should use web technologies that are widely supported and work equally well on as many browsers as possible. As we all know, in the world of web development this is close to impossible, but still there are things we can do to cover a larger user base.

For example, in our PhotoBooth app we use the getUserMedia() API for accessing the hardware camera on a device. Its support in different browsers is quite inconsistent – Safari doesn’t support it at all, the browsers that do support it need prefixes and differ in usage.

To ensure more people can actually use our app, we cover all the prefixes:

navigator.getMedia = ( 
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia
);

We also show an error if none of the prefixes work:

if (!navigator.getMedia) {
    displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else {
    // Use Camera API
}

Fallbacks and polyfills should be provided where possible. The same principles go for the CSS and HTML code.


3_responsive

3. Responsive

The app should look nice on all devices, no matter their screen size. Our app has a fairly simple UI so we’ve used only a couple of media queries to control font-size, paddings, margins, etc.

Don’t be afraid to use CSS libraries and frameworks such as Bootstrap, as they make it really easy to form grids, and deal with typography and general responsiveness.


4_offline

4. Connectivity independent

This is an important one. Using service workers allows your app to work even when there is no internet connection available.

Some apps can be cached only partially: UI is cached and available offline, dynamic content still needs access to a server.

Others, like our PhotoBooth demo, can be cached in their entirety. All of the source code and resources will be saved locally and the app will work offline and online exactly the same way. Here is the code that makes the magic happen:

This is an oversimplified usage of Service Workers, use with caution in commercial projects.

First we need to make a service worker JavaScript file, and define the logic behind it.

sw.js

// Install the service worker.
this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1').then(function(cache) {
            // The cache will fail if any of these resources can't be saved.
            return cache.addAll([
                // Path is relative to the origin, not the app directory.
                '/pwa-photobooth/',
                '/pwa-photobooth/index.html',
                '/pwa-photobooth/assets/css/styles.css',
                '/pwa-photobooth/assets/fonts/MaterialIcons-Regular.woff2',
                '/pwa-photobooth/assets/js/script.js',
                '/pwa-photobooth/assets/icons/ic-face.png',
                '/pwa-photobooth/assets/icons/ic-face-large.png',
                '/pwa-photobooth/manifest.json'
            ])
            .then(function() {
                console.log('Success! App is available offline!');
            })
        })
    );
});


// Define what happens when a resource is requested.
// For our app we do a Cache-first approach.
self.addEventListener('fetch', function(event) {
    event.respondWith(
        // Try the cache.
        caches.match(event.request)
        .then(function(response) {
            // Fallback to network if resource not stored in cache.
            return response || fetch(event.request);
        })
    );
});

Then we need to link that service worker to our HTML.

index.html

<script>
// Register Service Worker.

if ('serviceWorker' in navigator) {
    // Path is relative to the origin, not project root.
    navigator.serviceWorker.register('/pwa-photobooth/sw.js')
    .then(function(reg) {
        console.log('Registration succeeded. Scope is ' + reg.scope);
    })
    .catch(function(error) {
        console.error('Registration failed with ' + error);
    });
}
</script>

Now all of the files in our project will be saved in the user’s browser. Any JavaScript variables and object should also be saved in the localStorage or IndexDB where possible.

Right now Service Workers are supported in Chrome, Firefox and Opera. Safari and Edge are also working towards adopting them, and we hope that in the future they will be available in every browser.


5_applike

5. App-like

When building PWAs, it’s recommended to follow a design concept called app-shell architecture. It sounds very complicated but essentially boils down to this: the app is separated into two major components: the shell and the content.

The shell contains all the static UI elements such as a header, menus, drawers, etc. When we cache an app, the shell should always be saved on the device, because we want it to be available at all times. That way when a user with no internet connection opens the app, they won’t see an empty screen or a running dinosaur – they will see the cached app interface and an appropriate error message.

Image Courtesy To developers.google.com

The content resides within the shell. It can also be cached but it isn’t necessary to do so as content is usually dynamic, changes frequently and can be different on every single page load.


6_fresh_

6. Fresh

Once cached, our PWA will always load from the local storage. However, if we change the service worker sw.js in any way, on the next page load the new version will be downloaded and installed.

this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1.0.1').then(function(cache) {
            // ...
        })
    );
});

Using service worker updates we can re-download resources, delete old cache, or completely change the service worker logic. You can learn more about the SW Update process from this Google Developers article – here.


7_discoverable_

7. Discoverable

By adding a Web Manifest to our app we can provide various information about it and change the way it is displayed on people’s devices. It allows apps to be saved to the home screen with a custom icon, to be started in a separate browser window, and a lot of other cool stuff.

The Web Manifest takes the form of a simple JSON file:

manifest.json

{
  "name": "Progressive Web App: PhotoBooth",
  "short_name": "PhotoBooth",
  "description": "Simple Progressive Web App for taking selfies.",
  "icons": [{
      "src": "assets/icons/ic-face.png",
      "type": "image/png",
      "sizes": "72x72"
    }, {
      "src": "assets/icons/ic-face-large.png",
      "type": "image/png",
      "sizes": "144x144 256x256" 
    }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#fff",
  "orientation": "portrait"
}

Most of the properties are self explanatory so we will cover only the more important ones. To see the full Web manifest format and all the available fields go here.

  • Shortname – This is the name our app will have when saved to the home screen.
  • Icons – Array of icons with different resolutions.
  • Display – Defines how the app will be opened. We’ve chosen standalone so when started our photo booth will appear in a full-screen window without any browser navigation or menus. It will also be seen as a separate app in multitasking.

To register the manifest we have to link it to our HTML:

<!-- Web Manifest -->
<link rel="manifest" href="manifest.json">

Safari doesn’t support the Web Manifest standard yet but we can define app-like behavior with this Apple-specific meta tag:

<!-- Meta tag for app-like behaviour in iOS -->
<meta name=”apple-mobile-web-app-capable” content=”yes”>

8_notifications

8. Re-engageable

Push notifications aren’t limited to native apps any more. Thanks to service workers and the Push API, web applications can also send messages to the Android notification bar. Not all apps will benefit from having this feature, but when used properly notifications can really help engage users.

This topic goes beyond the scope of our tutorial, as Push Notifications are quite complicated and deserve a full lesson on their own. If you still want to implement notifications to your web app, here are some of the best learning resources available:

  • Google Developers, Push Notifications: Timely, Relevant, and Precise – here.
  • Google Developers, Push Notifications on the Open Web – here.
  • MDN, Using the Push API – here.
  • Push.js, Library that provides a cleaner API for handling push notifications – here.

9_installable_

9. Installable

By default any website can be manually saved to the home screen using the Add to Home Screen button from the Chrome browser menu. However, it might be rather difficult to make users “install” our app this way, since most people don’t know about that feature at all.

Thankfully, there is a way for your app to prompt users to save it with a simple installation pop-up. To prevent developers from abusing these pop ups, there isn’t any way to programmatically show them. Instead, they will appear on their own when an app fulfills a series of requirements:

  1. There is a valid Web Manifest.
  2. There is a valid Service Worker installed.
  3. The app is served over HTTPS.

We have all of the above covered, so when a user visits our app’s website a couple of times, they will get this prompt:

Add To Homescreen Prompt

Add To Homescreen Prompt

The entire installation process of our app is in this simple prompt. The install happens instantly, and once saved the PhotoBooth will be available to launch from a home screen icon, behaving exactly like a native app.


10_linkable_

10. Linkable

Anyone with a web browser has access to PWA apps and they can be shared simply via their URL. No third party tools are required for finding or installing them.

If an app runs in standalone mode, it’s also advisable to add in-app share buttons, since the browser address bar and menus aren’t visible.


Conclusion

Our PWA is now complete. We can test how well it follows the PWA rules with an official Google-made tool called Lighthouse. It recreates possible scenarios and tests the app thoroughly. Here is what it tells us about the PhotoBooth:

Lighthouse Report

Lighthouse Report

We passed!

If you want to find more PWAs to play with, go to pwa.rocks. They offer a nice collection of games and useful tools, showcasing the great power of Progressive Web Apps.

Source:: Tutorialzine.com

Three useful Babel presets

By Axel Rauschmayer

As of version 6, Babel supports presets, sets of features that can be enabled together. Two new presets are useful complements to babel-preset-es2015 (for ES6):

  • babel-preset-es2016 gives you the two features of ECMAScript 2016: the exponentiation operator and Array.prototype.includes().
  • babel-preset-es2017 gives you:
    • babel-plugin-syntax-trailing-function-commas: optional trailing commas in parameter lists and function/method calls.
    • babel-plugin-transform-async-to-generator: async functions. This is the one feature after ES6 that I’m most looking forward to.

The following preset is a replacement for babel-preset-es2015 on Node.js:

  • babel-preset-es2015-node only adds those ES6 plugins and transforms whose functionality is missing from Node.js (very few in the latest versions).

More information:

Source:: 2ality

30 Learning Resources For Mastering Angular 2

By Danny Markov

30-angular-resources

Angular 2 is a vast and complex framework with a never ending learning curve. To help you grasp more of its many features, we’ve curated a list of 30 free learning resources that cover it all – from the quickstart guide to specific details and best practices.


Let’s first quickly go over the available guides and tutorials on the official Angular website. There are a bunch of different resources there and we decided it’s a good idea to explain them.

QuickStart (TypeScript version)

Angular2 apps can be written in TypeScript, Dart, or good ol’ vanilla JavaScript. There are separate versions of the official docs for each language, but the TypeScript one is by far most detailed, as this is the recommended technology to use.

This will be the starting point for most beginners to Angular2. It includes setting up a work environment and running a basic Hello World app. Don’t be fooled by its name, you will need a good hour or two to finish this QuickStart.

QuickStart (Vanilla JavaScript version)

A much simpler version of the TypeScript QuickStart. Since it is written for vanilla JavaScript this tutorial doesn’t require a complex work environment and setup, so it goes straight to the framework itself and some of it’s main concepts.

Tour of Heroes

Tour of heroes is a much more detailed tutorial than the QuickStart. It goes through the process of building a Single Page App, step by step, covering many of the must-know Angular2 features. There are TypeScript and Dart versions, but no vanilla JS.

Advanced Documentation

Here the Angular team offers over 15 standalone tutorials, each doing a very in-depth look into an important topic. You can learn about Angular animations, the lifecycle of components, the navigation router, and many other core features.

Cookbook

A collection of code snippets and quick solutions to common challenges. Here you can find a chart of the differences between Angular 1 and 2, a FAQ section on NgModules, and solutions for form validation among other helpful tips and guides.


2_tutorials

Now let’s look at some tutorials and articles written by the community. We’ve tried to include only publications that are fairly new, making them compatible with the changes in recent versions.

Upgrading Apps To Angular 2 Using ngUpgrade

A well-written article that covers everything you need to know about upgrading old Angular 1 apps to the new framework. In it you can see what Angular2 does better, which aspects of an app need the most radical changes, as well as practical code snippets to get the job done.

Router Introduction: Child Routes, Auxiliary Routes, Common Pitfalls

This tutorial focuses on the new 3.0 router component, and explains the whole process needed for configuring it correctly. The author has done a great job explaining what Single Page Apps are, how they work, and how to route them in a robust and secure way.

Ahead-of-Time Compilation

The new Angular2 compiler improves the performance of applications dramatically by taking full advantage of JavaScript Virtual Machines. In this blog post you can learn about Just-in-Time and Ahead-of-Time compilation, their pros and cons, and how to implement them.

Styling Angular 2 Components

A more beginner-oriented lesson looking at different techniques for adding CSS styles to components. It shows you how to use component inline styles, style urls, and template inline styles, and explains the advantages behind each one.

Web Workers In Angular 2

Web workers are great for doing asynchronous tasks that don’t block the UI JavaScript, something very important for Single Page Apps. Here you can learn how to run Angular apps or components as web workers, allowing them to function in the background, independent from the main app thread.

Angular Router: Declarative Lazy Loading

Angular apps tend to get really big, and at some point the source files become too large to be loaded at once. Lazy loading allows us to speed up application load time by splitting it into multiple bundles, and loading them on demand.

Dependency Injection In Angular 2

A deep dive into the greatly improved Angular2 dependency injection system and the different approaches behind the old and new DI. This article also has a second part, that further explains the host-child relationship and the visibility of dependencies.

How does Angular 2 Change Detection Really Work ?

The Angular2 change detection mechanism is much more transparent and easier to reason about than its equivalent in Angular 1. However, there are still situations where you need to know exactly whats going on under hood.

Building an Angular 2 Application for Production

Angular is a very powerful and complex framework, and it’s not surprising that it’s footprint is also quite large. In this blog post you can learn various techniques, such as Tree-shaking and minification, that will drastically reduce the size of your final app.

Taking Advantage Of Observables In Angular 2

Observables in Angular 2 can be used for handling asynch code as an alternative to Promises. They are a vast and complex topic, but this two-part tutorial does a great job of introducing them and showcasing their many use cases.

Communication Between Components & Components Design

An interesting take on design patterns for building Angular components. The article goes through the components of a YouTube music player app and the relationships between them, with lots of code examples and explanations.

Optimizing NgUpgrade Bundle Sizes

NgUpgrade is meant to bridge the gap between Angular 1 and 2 by allowing code from both frameworks to co-exist in the same app. This can greatly increase the size as both versions need to be included. You can learn how to reduce that extra footprint in this quick tip.

Three Ways to Test Angular 2 Components

In this article you will learn three different techniques that you can use to thoroughly test Angular 2 components. They are isolated testing, shallow testing, and integration testing. All three have their strengths and weaknesses and are best applied in certain scenarios.

Protecting Routes Using Guards

Protecting routes is a very common task when building applications, as we want to prevent our users from accessing areas that they’re not allowed to access. Angular 2’s router provides a feature called Guards that tries to solve exactly that problem.

Debugging Angular 2 Applications

This guide gives a comprehensive overview of the various ways you can debug an Angular 2 applications using tools such as the Chrome DevTools, Angular Augury, simple JSON pipe filters, and the console itself.


3_videos

Since we know many developers prefer interactive lessons, here are a couple of places where you can find excellent code walkthroughs and general Angular talks.

Egghead.io

Egghead.io is one of the most popular and recommended sources for learning Angular. Although many of the lessons are for pro members only, there are still lots and lots of awesome free lessons you can watch.

Adventures in Angular

Adventures in Angular is a weekly podcast dedicated to the Angular framework. The panel cover a wide array of topics and it’s probably the best place to get Angular news. The archive contains over 110 episodes, each at least 30 minutes long.

Angular 2 from Scratch

Awesome one-hour-long course covering most of the basics. Although its beginner-oriented there are lots of things everyone can learn from this video in therms of project management and workflow.

Ajden Towfeek

A YouTube channel with lots of screencasts on web development and programming, with a focus on Angular 2 and its ecosystem of related technologies, tools, and languages.

Angular University

Another YouTube channel with a large collection of Angular tutorials, courses, code examples, and quick-tips.


Last but not least, here are some resources that didn’t fit any of the above categories, but can still be essential learning tools for any Angular developer.

Rangle’s Angular 2 Training Book

The only completely free book on Angular 2 that we could find. It covers the most important Angular 2 topics, from getting started with the basic toolchain, to writing applications in a scalable and maintainable manner. You can read it in the web browser or download it as an eBook (PDF, Mobi, ePub).

TypeScript in 30 Minutes

Although you can technically write Angular 2 in vanilla JavaScript or Dart, TypeScript provides by far the best experience with the framework. Using this tutorial you can get started with the language and learn most of it’s important features.

Style Guide

The offical style guide for the framework. Contains a ton of syntax and formatting recommendations, as well as general best practices. It’s very detailed and long, but knowing Angular’s enterprise nature, you’ll probably need to go through it at some point.

Built With Angular 2

Learn from other people’s experiences with the framework by checking out this large collection of open-source applications and experiments, all developed in Angular 2.

Angular 2 Final Q&A

An interview and Q&A with the creators of the framework, right after the release of Angular 2 Final. A great place to hear more about the project and its upcoming features straight from the horses mouth.

Source:: Tutorialzine.com

Freebie: 5 Beautiful Bootstrap Headers

By Georgi Georgiev

5-freebie-beautiful-headers

In this post we present to you a collection of five templates for headers and navigation bars. We’ve created them using Bootstrap 3, following all the best practices for working with the framework. The templates are ready to use and easy to incorporate in any existing design.

The Headers

To help you save time, we’ve created five different designs, that you can choose from. They are simple, fully responsive and work great on mobile devices.

Blue Header

Our headers can be used as part of an existing design, or can be customized easily if you have experience with Bootstrap. For some of the templates, we’ve used fonts from Google Fonts, the built-in Glyphicons set, and images from Pexels.com.

Header Nightsky

Header Nightsky

How to use

To use any of the templates from the demo, follow these simple steps:

  1. Grab the zip archive from the Download button near the top of the page and extract it.
  2. Open the .html file for the template you want, copy the code inside and paste it in your project.
  3. The styles are located in separate CSS files for each design. You can find them in the /assets/css/ folder.

Free for Commercial Use

You have all rights to customize and use these templates. They are 100% free and can be implemented in both personal and commercial projects, no attribution required (our license page). Enjoy!

Source:: Tutorialzine.com

Improving the syntax of EJS templates

By Axel Rauschmayer

I really like the way EJS templates work, because the meta-language (loops, if-then-else, etc.) is just JavaScript. This blog post describes ideas for improving their syntax.

EJS templates

This is an example of an EJS template:

    <ul>
    <% for(var i=0; i<supplies.length; i++) { %>
       <li><%= supplies[i] %></li>
    <% } %>
    </ul>

I see two problems with this template:

  1. It outputs empty lines for line 2 and 4.
  2. The delimiters <% and %> make the template look cluttered.

Suppressing whitespace

The first problem can be fixed by using the delimiters <%_ and _%> which suppress any whitespace generated by that line:

    <ul>
    <%_ for(var i=0; i<supplies.length; i++) { _%>
       <li><%= supplies[i] %></li>
    <%_ } _%>
    </ul>

Better control flow syntax

If control flow syntax is enabled by a single character at the beginning of a line then the template looks much nicer:

    <ul>
    # for(var i=0; i<supplies.length; i++) {
       <li><%= supplies[i] %></li>
    # }
    </ul>

The way to get this syntax is via a work-around – use a regular expression to convert:

    # foo

to:

    <%_ foo_%>

For example:

    template = template.replace(/^#(.*)$/mg, '<%_$1_%>');

One more improvement

Additionally, there is an issue for letting people change the delimiter <% to something different. Then the template could look like this:

    <ul>
    # for(var i=0; i<supplies.length; i++) {
       <li>{{= supplies[i] }}</li>
    # }
    </ul>

I find that easier to read, given that the delimiters are surrounded by HTML with lots of angle brackets.

Source:: 2ality

15 Interesting JavaScript and CSS Libraries for September 2016

By Danny Markov

interesting-libraries-august-2016

Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.

The list for September 2016 contains a wide variety of different libraries including an excellent drag-and-drop file uploader, a CSS reset, a CSS minifier, background animations, and much more!


Dropzone

Very polished JavaScript library that can turn any HTML element into a drag and drop zone for file uploads. Features include thumbnail previews for image uploads, multiple files at once, a progress tracker, support for large files, and many others. Highly customizable, no dependencies.


ReactMdl

React-MDL

Google’s Material Design Lite (MDL) is one of the most beautiful CSS frameworks available. Combine that with Facebooks’s hugely successful React JavaScript library and the result is React-MDL, a library that offers a huge collection of React components styled in material design fashion.


Postmate

Postmate

Postmate is a wrapper of the Window.postMessage() method, allowing pages to speak to iFrames inside them. The library provides a simple promise-based API with which developers can securely access various data about the iFrame and emit events to it from the parent page.


Particles

Particles

A very lightweight and easy to use library for creating animated backgrounds. It consists of a single 2kb .js file and only one method – Particles.init({options});, taking an object with a fair amount of customizations. There are two animations available: single particles, or connected particles forming beautiful constellations.


Recharts

Recharts

Charts library built on top of React and D3. Graphs can be created via a simple XML-like syntax, with many of the important options set directly as attributes. The library also offers a rich examples catalog with more than 50 ready-to-use components, including various Line, Bar, Pie and other types of charts.


Shephard

Shepherd

Shepherd let’s you take users on a tour of your website or app. With a simple step-based API, you can move the focus successively from one section to another. The HTML element you want to emphasize on is highlight and a text bubble pops up with a title, description and dialog buttons.


Waud

Waud

Did you know that apart from the HTML interface there is also a complex JavaScript Web Audio API, offering a ton of advanced sound manipulations. Waud works as a 2-in-1 solution, allowing you to access the JavaScrtip API where it’s available, and the HTML API as a fallback.


Grade

Grade

Grade.js takes the two most dominant colors in an image and uses them to create elegant gradients. This effect can be used to make cool image frames or set a matching background to your entire page. The library is very small and has no dependencies whatsoever.


Rainyday

Rainyday

Add calming rain animations to your web pages using this small JavaScript library. Under the hood, Rainyday uses a HTML element and it’s API to draw a realistic glass-like surface with random raindrops trickling down.


CSSnano

Instead of simply removing whitespace when minifying style sheets, CSSnano also does several other optimizations such as merging properties into their shorthand equivalents, removing comments, shortening color values, and many many more. CSSnano is compatible with a number of platforms, including Node.js, grunt, gulp, webpack, and the Atom text editor.


Multirange

Multirange

JavaScript and CSS library for creating input sliders with two handles, allowing users to pick intervals ranging between two numbers (e.g price between 100$ and 500$). On browsers where this behavior cannot be achieved, the library automatically goes back to using two separate sliders.


Minireset

Minireset

Minireset is a very simple CSS reset library that normalizes only the most important CSS properties without any extra sugar. It resets font-sizes, margins and paddings, sets box-sizing to border-box on all elements, and a few other useful defaults. Since it’s so small, you can easily modify this library if you need to change some of the values.


Cesium

Cesium

WebGL based JavaScript library for creating high-resolution 3D globes and 2D maps. It supports different map providers, weather simulations, and a ton of other complex features. Their Demos page has a big collection of community projects showcasing what Cesium is capable of, including a 3D map of all the building in New York and projects by NASA.


In view

In-view

Library that tracks elements on the page and reacts when they are about to leave or enter the viewport. The library has no external dependencies and is really easy to use with a simple callback syntax:

inView('.someSelector')
    .on('enter', doSomething)
    .on('exit', el => {
        el.style.opacity = 0.5;
    });

Papa Parse

Papa Parse

Papa Parse is a powerful client-side CSV parser. It is full of awesome features like conversion to JSON, support for strings, local files or URls, an asynchronous mode, a quick mode, and much more. This library has no dependencies and can work equally well with vanilla JavaScript or jQuery.

Source:: Tutorialzine.com

Apple Keynote: combining mirroring and Presenter Display

By Axel Rauschmayer

This blog post describes a new setup for presenting with Apple’s Keynote app that I’ve experimented with. It involves:

  • A Mac running Keynote
  • An iOS device (iPhone or iMac)

The wish

For presentations, mirroring the laptop’s display with the projector’s is perfect, because:

  • It is easy to do interactive demos (e.g. switch to a REPL, run some JavaScript code).
  • You can use the cursor as a virtual laser pointer (there is a preference under “Slideshow” to show the cursor in that mode).

But there are several pieces of information that would be nice to have while presenting:

  • The next slide, for smoother segues
  • Remaining time (countdown)
  • Presenter notes (I don’t use them, but many people do)

Therefore, many people don’t mirror displays and Keynote’s Presenter Display. But then you lose the previously mentioned advantages.

The best of both worlds

It’d be cool to have mirroring plus extra information displayed somewhere, but I don’t even know how exactly that would work.

Non-solution: Keynote Remote

Keynote Remote displays presenter information on an iOS device. The information stays in sync with the currently displayed slide. However, there are several problems:

  • You need Wi-Fi, laptop and iOS device need to be on the same network. Some sources on the internet say, Bluetooth works, too, but I couldn’t get it to work. You can turn your laptop into a hotspot, but then you can’t access the internet and everyone can access the hotspot (it’s public)!
  • Needs to be restarted if you take Keynote out of full screen. The work-around is simple:: restart the slide mode from the iOS device. But it’s one more thing to remember.
  • Limited configurability: you can’t configure the presenter information much.

Solution: turn your iOS device into an external display

Duet Display lets you turn an iPhone or an iPad into an external display. It does so via a wire, so there is no finicky Wi-Fi or Bluetooth involved.

Now you have three displays:

  • Your laptop
  • Your iOS device
  • The projector

And now the kicker: in your Mac’s Display preferences, you can alt-drag one display on top of another one so that only two of the three displays are mirrored. Thus, the projector mirrors your laptop, while your iOS device can show the presenter information.

Tips:

  • On the presenter display, you can rearrange the location and size of everything (especially useful for clock and timer).
  • You can tap on the iOS device to click.

Further tools

  • Attach your iOS device to your laptop’s display via Ten One’s Mountie.
  • Simulate a projector via an iMac:
    • Turn your Mac or PC into an AirPlay receiver via AirServer Universal. Alas, I couldn’t get this solution to work with partial mirroring (all-display mirroring worked).
    • Use your iMac as an external display via Target Display Mode.

Source:: 2ality

ES proposal: Template Literal Revision

By Axel Rauschmayer

The ECMAScript proposal “Template Literal Revision” by Tim Disney is currently at stage 3. It proposes to give the innards of tagged template literals more syntactic freedom.

Tag functions and escape sequences

With tagged template literals, you can make a function call by mentioning a function before a template literal:

    > String.raw`u{4B}`
    'u{4B}'

String.raw is a so-called tag function. Tag functions receive two versions of the fixed string pieces (template strings) in a template literal:

  • Cooked: escape sequences are interpreted. `u{4B}` becomes 'K'.
  • Raw: escape sequences are normal text. `u{4B}` becomes 'u{4B}'.

The following tag function illustrates how that works:

    function tagFunc(tmplObj, substs) {
        return {
            Cooked: tmplObj,
            Raw: tmplObj.raw,
        };
    }

Using the tag function:

    > tagFunc`u{4B}`;
    { Cooked: [ 'K' ], Raw: [ 'u{4B}' ] }

For more information on tag functions, consult Sect. “Implementing tag functions” in “Exploring ES6”.

Problem: some text is illegal after backslashes

The problem is that even with the raw version, you don’t have total freedom within template literals in ES2016. After a backslash, some sequences of characters are not legal anymore:

  • u starts Unicode escapes and must look like u{1F4A4} or u004B.
  • x starts hex escapes and must look like x4B.
  • plus digit starts octal escapes (such as 141). Those are forbidden in template literals and in strict mode string literals.

That prevents tagged template literals such as:

    latex`unicode`
    windowsPath`C:uuuxxx111`

Solution

The solution is drop all syntactic restrictions related to escape sequences. Then illegal escape sequences simply show up verbatim in the raw representation. But what about the cooked representation? Every template string with an illegal escape sequence is an undefined element in the cooked Array:

    > tagFunc`unicode`;
    { Cooked: [ undefined ], Raw: [ 'unicode' ] }

Source:: 2ality