Boletin 04

Lisbon’s Coast.

Yellow! It has been some weeks since my last entry. However, good things come to those who wait. There is two things this week that are very exciting in the Javascript world:

1 – Angular is back on the table with Typescript

2 – Ladies and Gentlemen: NativeScript!

Angular & Typescript

That’s right, Angular 2 was trying to reinvent the wheel and create their own Typescript version. They were plaining a huge change that was not going to be compatible with Angular 1. This was not falling down quite well with the community. People just weren’t happy! Google heard’ya! Typescript grabbed the opportunity and collaborated with the Angular team to incorporate some of their ideas into TS also . Plus, they have been busy telling people that a convertion tools from 1 to 2 will be there when the time comes.

http://www.infoq.com/news/2015/03/angular-2-concerns-addressed?utm_source=javascriptweekly&utm_medium=email

http://dailyjs.com/2015/03/06/typekit-angular/

http://blogs.msdn.com/b/typescript/archive/2015/03/05/angular-2-0-built-on-typescript.aspx?utm_source=javascriptweekly&utm_medium=email

Resuming, Angular with Typescript are the future for browser MVC frameworks. I was quite disappointed with Angular and Google before – now ANGULAR IS BACK ON THE TABLE. This means two giants supporting Angular direct or indirectly. May be Microsoft just saw Atscript as a potential stake to its Typescript’s heart and one step closer to Dart (?). Since Microsoft has become lately more pragmatic and wants to be dev friendly, they must have decided collaboration was in order.

Sure, other libraries can be even cooler and better for this or that purpose. However, to a great extend, if you are not a behemoth company, what matters is “critical mass” and Angular won and with the latest decision is cementing this victory.

https://www.airpair.com/js/javascript-framework-comparison

Nativescript (library)

For some time now, I have been pointing this out – Javascrip will be used to build native app. My clairvoyance abilities, though normally I’m a several years a ahead of time, tend to come true. Nativescript is just another step to this prediction of mine. Like the other step made by google with Chrome Apps, which run everywhere chrome runs. Chrome Apps already offer access to native and on top of that they are developing the platfom to run without needing chrome or the their own app stor. In other words, google is building a Chrome Runtime Enviroment that will offer Javas’s promise ‘code once run everywhere”. Anyway, back to Nativescript library.

https://developer.chrome.com/apps/about_apps

NativeScript enables developers to build native apps for iOS, Android and Windows Universal while sharing the application code across the platforms. When building the application UI, developers use our libraries, which abstract the differences between the native platforms. Watch the video to learn more.

It’s Open

NativeScript is free of charge as an open source project
It is available to anyone on Github

It’s Easy

Code with JavaScript. Style with CSS
Create a true native user experience

It’s Powerful

Cross-platform UI abstractions
Shared business logic and data models
Third-party native libraries

https://www.nativescript.org/?utm_source=javascriptweekly&utm_medium=email

CMSs Proprietary Vs Open Source

https://flic.kr/p/qHCGQM

CMSs Proprietary Vs Open Source

There are benefits to having your own unique CMS, but to the costs and disadvantages really outweigth the costs? This is a complex topic and as such deserves a post just for it loaded with arguments and counter arguments and some of the best Open Source CMS solutions out there.

2015 Web & Design Trends

10 web design trends that will change everything in 2015

http://www.creativebloq.com/web-design/hottest-trends-2015-11513980

and another

http://www.zingdesign.com/top-10-web-development-trends-and-predictions-for-2015/#motion-ui

Carnival Piece: if the world was about to end, what would you do?

Jest – Javascript Testing

FAMILIAR APPROACH

Built on top of the Jasmine test framework, using familiar expect(value).toBe(other) assertions

MOCK BY DEFAULT

Automatically mocks CommonJS modules returned by require(), making most existing code testable

SHORT FEEDBACK LOOP

DOM APIs are mocked and tests run in parallel via a small node.js command line utility

Why not just use vanilla Jasmine?

Jest provides you with multiple layers on top of Jasmine:

Automatically finds tests to execute in your repo
Automatically mocks dependencies for you when running your tests
Allows you to test asynchronous code synchronously
Runs your tests with a fake DOM implementation (via jsdom) so that your tests can run on the command line
Runs tests in parallel processes so that they finish sooner

http://facebook.github.io/jest/?utm_source=javascriptweekly&utm_medium=email

App Manifest for the Web

http://www.w3.org/TR/appmanifest/#usage-examples

“This specification defines a JSON-based manifest that provides developers with a centralized place to put metadata associated with a web application. This includes, but is not limited to, the web application’s name, links to icons, as well as the preferred URL to open when a user launches the web application. The manifest also allows developers to declare a default orientation for their web application, as well as providing the ability to set the display mode for the application (e.g., in fullscreen). Additionally, the manifest allows a developer to “scope” a web application to a URL. This restricts the URLs to which the application can be navigated and provides a means to “deep link” into a web application from other applications.”

SCALA > C# > Java

My design for Scala rebranding and Mascot. Scala – like a power armor. Did it very quickly, just for fun. Sent it to Marting Odersky (creator of Scala and its steward), he never responded, mostly likely, he realy didn’t like it. Silly me, LOL

Functional + Object Oriented Programing is AWESOME!

It is time to promote my favourite JVM language – SCALA. As you can see by the title I’m obviously being provocative. Again, while I was learning Java at Uni, I had to also play with groovy another JVM language that, like Scala, interops with Java. Though, at the time and still ongoing, there was/is a boom of JVM supported languages. Which to choose? Well, after shopping around, I decided for Scala. The functional-oop language that the finance industry was/is adopting fast. If a “critical mass” of guys that code for the money guys are using it, certainly is going to gain traction – I thought, and I wasn’t wrong:

The RedMonk Programming Language Rankings: January 2015

14. Scala

The RedMonk Programming Language Rankings: January 2015

Scala Named a top 10 Technology for Modern Developers

http://typesafe.com/company/news/scala-named-a-top-10-technology-for-modern-developers

Scala versus Java myths and facts

http://www.infoq.com/articles/scala-java-myths-facts

Rise and Fall of Java: resuming old guys use more Java.

The Rise and Fall and Rise of Java (2013) from sogrady

http://vschart.com/compare/dart-programming-language/vs/scala

Interop Between Java and Scala

http://www.codecommit.com/blog/java/interop-between-java-and-scala

Hello World

Java

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World");
    }
}

Scala

object HelloWorld {
    def main(args: Array[String]) {
      println("Hello, world!")
    }
  }

Twitter Engineer Talks About the Company’s Migration from Ruby to Scala and Java

http://readwrite.com/2011/07/06/twitter-java-scala

Who is Using Scala

http://alvinalexander.com/scala/whos-using-scala-akka-play-framework

Then Again : Java 8 / Scala competitors BFFs

http://readwrite.com/2014/02/20/java-8-scala-competitors-bffs-martin-odersky

Psychology

Have a sense of purpose in life? It may protect your heart

“Having a high sense of purpose in life may lower your risk of heart disease and stroke, according to a new study led by researchers at Mount Sinai St. Luke’s and Mount Sinai Roosevelt and presented on March 6 at the American Heart Association’s EPI/Lifestyle 2015 Scientific Sessions in Baltimore.”

visit: http://www.sciencedaily.com/releases/2015/03/150306132538.htm

How New Payment Technology Can Manipulate You

“My taxi pulled up to the hotel. I got out my credit card and prepared to pay for the ride. The journey had been pleasant enough, but little did I know I was about to encounter a bit of psychological trickery designed to get me to pay more for the lift. …”

visit: https://www.psychologytoday.com/blog/automatic-you/201502/how-new-payment-technology-can-manipulate-you

Multitasking hunger neurons also control compulsive behaviors

“In the absence of food, neurons that normally control appetite initiate complex, repetitive behaviors seen in obsessive-compulsive disorder (OCD), and anorexia nervosa, according to a new study by Yale School of Medicine researchers.”

visit: http://www.sciencedaily.com/releases/2015/03/150306112013.htm

Why Many Rich People Are Frugal

“I have a client I’ll call Linda Loaded. When making coffee, she is so frugal that she puts less coffee into the coffeemaker than she should and compensates by, when the coffee is ready, squeezing the filter with the hot grounds in her hand to get the concentrated coffee into her cup, incurring a bit of pain. To save a few pennies.”

visit: https://www.psychologytoday.com/blog/how-do-life/201503/why-many-rich-people-are-frugal

Brain treats real and imaginary objects in the same way

“The human brain can select relevant objects from a flood of information and edit out what is irrelevant. It also knows which parts belong to a whole. If, for example, we direct our attention to the doors of a house, the brain will preferentially process its windows, but not the neighbouring houses. Psychologists have now discovered that this also happens when parts of the objects are merely maintained in our memory.”

visit: http://www.sciencedaily.com/releases/2015/03/150306073732.htm

Oxytocin nasal spray causes men to eat fewer calories

“A synthetic nasal formulation of the hormone oxytocin reduced caloric intake in healthy men, particularly consumption of fatty foods, after a single treatment, a new study finds. The results confirm those of animal studies showing oxytocin reduces food intake.”

visit: http://www.sciencedaily.com/releases/2015/03/150305133027.htm

Human brains age less than previously thought

“Older brains may be more similar to younger brains than previously thought. In a new paper, researchers demonstrate that previously reported changes in the aging brain using functional magnetic resonance imaging may be due to vascular (or blood vessels) changes, rather than changes in neuronal activity itself.”

visit: http://www.sciencedaily.com/releases/2015/03/150305110445.htm

Time management: Why we feel busier when close to reaching a goal

“Is there any worse time to be interrupted than right now? Regardless of what we’re doing or the nature of the interruption, we often feel as if we have no time to spare at the moment. According to a new study, consumers feel busier when they are close to finishing a task or reaching a goal.”

visit: http://www.sciencedaily.com/releases/2015/03/150304130919.htm

Why We are all More Rational than Mr. Spock

” It was so sad to learn that Leonard Nimoy, the legendary actor of “Mr. Spock” has passed away. The idea behind Mr. Spock was to create a character for Star Trek whom we can all understand but at the same time regard as a superior to us – a super-rational figure that acts solely based on a cold and calculated analysis – never based on emotions and intuition. “

visit: https://www.psychologytoday.com/blog/feeling-smart/201502/why-we-are-all-more-rational-mr-spock

Boletin 02

Welcome to the second listing of interesting articles on the web. The focus is javascript but now I decided to introduce links to other interesting articles related to tech. Also, from now on, I will be first and foremost promoting Ecma 6, the future of javascript. We h’ve got to be ready!!

This WeeK menu:

Hololens (The Verge – video)
Count Down to JS6
Wheel Menus
Negating Predicate Functions
Debugging Javascript
Read, Flux and Friends
HTML 5
1. Fetch APi
2. Polymer State of the Union (Video)
Libreboard Opens Source JS Kanban board
Psychology

Hololens

This week “bombastic” revelation was microsoft’s hololens.

JS6 – Countdown

Template Strings » visit

Template Strings can contain placeholders for string substitution using the ${ } syntax, as demonstrated below:

// Simple string substitution
var name = "Brendan";
console.log(`Yo, ${name}!`);

JS6 Module Gotcha » visit

Now that ES6 has a finalized module definition (Right now still in draft phase), I’ve gone through and found some of the things that stick out to me as ‘need to knows’. It’s helpful to keep these few things in mind when working with the new module syntax

import something from ‘somewhere/else’;
// … code
var mysomething = something;
export mysomething;

JS6 Less Weird Parts » visit

Keep in mind that ES6 is backwards compatible. That means that old weirdness will still be around, most likely for a very long time so it is definitely a good thing to be aware of it. We do however get some great new language constructs that help to avoid some of those pitfalls…

Wheel Menus » visit

Wheel the Force be with you

wheelnav.js brings spinning into your web pages

example of one site using it:

http://www.orpan.com.bo/en/offers

Negating Predicate Function in Javascript » visit

While you may not have heard the term, chances are you’ve used predicate functions before. A predicate is essentially a function that determines whether something is true or false based on its arguments. It is common (though not necessary) for predicates to be named “isX”, such as isEven or isNumber…

Debugging Javascript

A Journey client-side Testing Javascript

Over the last few years, developers have begun to put a lot of application logic in the browser. We started writing more and more JavaScript. And because the language became so popular, developers started creating tools designed to make the experience of JavaScript development better. In this article, we will cover some of those tools specifically designed for testing client-side JavaScript code…

Fix Javascript Errors

JavaScript can be a nightmare to debug: Some errors it gives can be very difficult to understand at first, and the line numbers given aren’t always helpful either. Wouldn’t it be useful to have a list where you could look to find out what they mean and how to fix them? Here you go! …

JS Debugging Beyond the Console

But as much as I love console.log, sometimes it just does not do. Sure, if you have a proper test suite console.log is always enough. But you don’t always have a proper test suite…

React, Flux & Friends

Facebook: React and Flux

Tuxedo Js » visit

React and Flux are two novel and exciting approaches to front-end development. Lots of people use React as the V in MVC, since it makes no assumptions about the rest of your technology stack and it uses a virtual DOM diff implementation for ultra-high performance.

Flux is an application architecture for React that remedies the problems associated with predicting changes in applications that use two-way directional data flows, instead utilizing a unidirectional data flow which makes it easier to understand and modify an application as it becomes more complicated. In Flux, the Dispatcher is a singleton that directs the flow of data and ensures that updates do not cascade. As an application grows, the Dispatcher becomes more vital, as it can also manage dependencies between stores by invoking the registered callbacks in a specific order.

TuxedoJS capitalizes on the performance benefits of React and the simplified application architecture of Flux. It abstracts away unnecessary complexity and implements a more accessible and semantic interface for working with Flux and augmented React components in various aspects of the view logic.

Marty Js » visit

Marty is an implementation of the Flux architecture. It defines a set of rules about how to manage your applications state. Facebook invented Flux to help them build client-side web applications.

HTLM5

Fetch In Action » visit

Fetch

First, we fetch a resource:

var url = ‘https://api.github.com/users/malyw’;
fetch(url);

Fetching resource returns promise with response data (in case of any is fetched/response gotten) or error (otherwise).

Processing status

Promise will be resolved successufully in case of any server responce, even 404 etc.
So (as in case with XHR) we need to handle it:

var processStatus = function (response) {
// status “0” to handle local files fetching (e.g. Cordova/Phonegap etc.)
if (response.status === 200 || response.status === 0) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
};

fetch(url)
.then(processStatus)
// the following code added for example only
.then()
.catch();

If there is response with status “200” or “0”- will be returned resolved promise,
which means, we can use .then().then() promise syntax.
In other case .catch() will be invoked.

Polymer State of the Union

Open Source Kaban Borad in Javascript » visit

LibreBoard is an open-source kanban board that let you organize things in cards, and cards in lists. You can use it alone, or with your team and family thanks to our real-time synchronisation feature. Libreboard is a land of liberty and you can implement all sort of workflows on it using tags, comments, member assignation, and many more.

Psychology

Boletin 01

HELLO WORLD! Hi, guys so here it is the very first Boletin with the cool stuff I found this week. I added more links than I would normaly mail you because I decide to use the boletin to also store links of articles that I haven’t yet the change to read.

How to Use npm as a Build Tool

Last month I noted my opinions on why we should stop using Grunt, Gulp et al. I suggested we should start using npm instead. npm’s scripts directive can do everything that these build tools can, more succinctly, more elegantly, with less package dependencies and less maintainence overhead. …

Using files from web applications

Using the File API, which was added to the DOM in HTML5, it’s now possible for web content to ask the user to select local files, then read the contents of those files. This selection can be done by either using an HTML <input> element, or by drag and drop.

<input type="file" id=“input">

var selected_file = document.getElementById(‘input’).files[0];

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user’s computer, using File or Blob objects to specify the file or data to read.

Using fullscreen mode

The fullscreen API provides an easy way for web content to be presented using the user’s entire screen. This article provides information about using this API.

DOM Access Control Using Cross-Origin Resource Sharing

What is CORS?

CORS is a system of headers and rules that allow browsers and servers to communicate whether or not a given origin is allowed access to a resource stored on another.

…

Same-origin policies are a central security concept of modern browsers. In a web context, they prevent a script hosted at one origin — meaning the same protocol, domain name, and port — from reading from or writing to the DOM of another.

…

Sometimes, however, a same-origin policy can be burdensome. Making requests across subdomains, for example, is prohibited by a same-origin policy. You also can’t use XMLHttpRequest to pull in JSON data from a third-party API. To make matters worse, workarounds such as JSONP or document.domain can leave us vulnerable to XSS attacks

…

Using the Page Visibility API

The Page Visibility API lets you know when a webpage is visible or in focus. With tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user. When the user minimizes the webpage or moves to another tab, the API sends a visibilitychange event regarding the visibility of the page. You can detect the event and perform some actions or behave differently.

Using web workers

Web Workers provide a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface. In addition, they can perform I/O using XMLHttpRequest (although the responseXML and channel attributes are always null). Once created, a worker can send messages to the spawning task by posting messages to an event handler specified by the creator. This article provides a simple introduction to both dedicated and shared workers.

Creating a Polymer Chat App with Material Design

Writing a CSS Parser in JavaScript

Hard lessons learned while building a lightweight, battle-tested, CSS parser in JavaScript.

NativeScript

Develop Truly Native Apps
with JavaScript and CSS

Build native iOS, Android and Windows Phone apps from a single code base

Stream.js

An Object Streaming Pipeline for JavaScript – inspired by the Java 8 Streams API

Stream([5, 9, 2, 4, 8, 1])
   .filter(function (num) {
      return num % 2 === 1;
   })
   .sorted()
   .map(function (num) {
      return "odd" + num;
   })
   .toArray();

Flexible, interactive charts
for the web.

Because Plottable handles layout, sizing, and positioning, Plottable charts are easier to create and more reusable than charts built only with D3. And, since Plottable Components are powered by D3, the flexibility of D3 is still available. All Plottable components are usable on their own, so you can take small pieces to add to existing charts, or create charts entirely with Plottable.

+Essential JavaScript Links

Reactive MVC and the Virtual DOM

React is one of those currently hottest frontend technologies. The new great idea in React is Virtual DOM Rendering. The gist is to frequently re-render a complete and lightweight representation of the DOM, then apply a difference filter to detect the minimum changes that need to be made to the DOM. A similar technique has existed in game development long before React: re-render the game screen in every game loop, but only update the minimum portion of the screen which changed compared to the previously rendered screen. …

MENU:

Angular & Typescript

Nativescript (library)

It’s Open

It’s Easy

It’s Powerful

2015 Web & Design Trends

Jest – Javascript Testing

FAMILIAR APPROACH

MOCK BY DEFAULT

SHORT FEEDBACK LOOP

Why not just use vanilla Jasmine?

App Manifest for the Web

Twitter Engineer Talks About the Company’s Migration from Ruby to Scala and Java

Who is Using Scala

Psychology

Hololens

JS6 – Countdown

Debugging Javascript

React, Flux & Friends

Facebook: React and Flux

HTLM5

Polymer State of the Union

Psychology

How to Use npm as a Build Tool

Using files from web applications

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user’s computer, using File or Blob objects to specify the file or data to read.

Using the Page Visibility API

Using web workers

Creating a Polymer Chat App with Material Design

Writing a CSS Parser in JavaScript

Hard lessons learned while building a lightweight, battle-tested, CSS parser in JavaScript.

NativeScript

Develop Truly Native Apps with JavaScript and CSS

Stream.js

PLOTTABLE

+Essential JavaScript Links

Reactive MVC and the Virtual DOM

More Articles:

Develop Truly Native Apps
with JavaScript and CSS