Javascript on OP blog

React app with Express in production

Sat, 24 Jun 2017 20:46:01 +0300

Password randomizer app which was done with: REST API on Express.js, Client app on React.js, Build with npm, Deploy on Heroku.

Asynchronous Javascript with async/await

Tue, 09 May 2017 21:57:55 +0300

ES2017 async and await keywords to write asynchronous code that is more readable and easier to follow than equivalent code based on long promise chains or deeply nested callbacks.

Advanced NodeJS

Tue, 02 May 2017 20:16:35 +0300

This course will teach you the core Node.js concepts and API modules from simple utility modules all the way to streams and clusters.

Mastering Flux and Redux

Tue, 02 May 2017 19:38:57 +0300

At the core of any solid web application is an effective and well-managed data model. In this course, Mastering Flux and Redux, you’ll learn the skills and technologies necessary to manage your application’s data model in extremely efficient and standards-compliant ways. Topics First, you’ll learn all about the popular data-modeling libraries Flux and Redux; their differences and similarities, how they relate to one another, and which is appropriate for what kind of projects.

Kata: Salesman's Travel

Sat, 29 Apr 2017 23:56:58 +0300

A traveling salesman has to visit clients. He got each client’s address e.g. “432 Main Long Road St. Louisville OH 43071” as a list.

npm scrips as your build tool

Sat, 29 Apr 2017 12:14:14 +0300

The course introduces the topic of using npm scripts as a build tool. It starts simple and then continue to build a small website as we introduce new topics.

By the end of the course, you’ll know how to get started and what tools and techniques are needed for you to create your own set of build scripts.

Prettier as a formating tool for JS

Wed, 26 Apr 2017 22:23:01 +0300

Prettier is an opinionated JavaScript formatter with advanced support for language features from ES2017, JSX, and Flow. It removes all original styling and ensures that all outputted JavaScript conforms to a consistent style. This goes way beyond ESLint and other projects built on it. Unlike ESLint, there aren’t a million configuration options and rules. But more importantly: everything is fixable. This works because Prettier never “checks” anything; it takes JavaScript as input and delivers the formatted JavaScript as output.

Front End Handbook 2017

Sun, 23 Apr 2017 19:11:25 +0300

This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2017

A static site with a dynamic search function

Sun, 09 Apr 2017 12:09:08 +0300

A static site with a dynamic search function? Yes. Alternatively to embeddable scripts from Google or other search engines you can provide your visitors a custom search by indexing your content files directly.

JS 30

Tue, 04 Apr 2017 14:51:54 +0300

To fresh memory with 30 day vanilla js coding challenge. Build 30 things in 30 days with 30 tutorials. No Frameworks, No Compilers, No Libraries, No Boilerplate!

Building a JavaScript development environment

Sun, 02 Apr 2017 14:31:50 +0300

Starting a new JavaScript project from scratch is overwhelming. This course provides a playbook outlining the key decisions you need to make. Build a robust development environment that handles bundling, linting, transpiling, testing, and much more.

PatternCraft

Sun, 05 Mar 2017 01:35:33 +0200

An awesome explanation of GOF design patterns. The only way to learn pattern is to know what problem it solves.

RESTful Web Services with Node.js and Express

Sun, 18 Dec 2016 12:01:04 +0000

Node.js is a simple and powerful tool for backend development. When combined with express, you can create lightweight, fast, scalable APIs quickly and simply.

Book: 'Node.js design pattern'

Thu, 06 Oct 2016 00:00:00 +0000

“How could I organize my code?”, “What is the best way to design this?”, “How can I make my application more modular?”, “How do I handle a set of asynchronous call effectively?”, “How can I make sure that my application will not collapse while it grows?”.

If you have such questions without answers, that book is definitely for you!

The aim of this book is to guide you through this emerging world of patterns, techniques and practices, showing proven solution to the common problem.

Gulp screencast overview

Wed, 28 Sep 2016 20:43:36 +0000

Depth table of contents of one of the most popular screencast about utility for managing tasks.

NG6 starter for new Angular projects

Sun, 18 Sep 2016 19:03:17 +0000

The de-facto starter repo for building scalable apps with AngularJS ^1.5, ES6, Gulp and Webpack

Start new project on Angular ^1.5

Sun, 18 Sep 2016 18:42:49 +0000

Great series of recommendation how/why to start new “NG2 ready” Angular 1.5 app with architecture of component-oriented approach.

Lifecycle hooks in AngularJS 1.5

Sun, 04 Sep 2016 10:48:03 +0000

Lifecycle hooks are simple functions that are called at specific points of a component’s life in Angular apps. They landed in AngularJS 1.5 and are used with .component() method and they were inspired of Angular 2 hooks.

Moving from "ngModel.$parsers"/"ng-if" to "ngModel.$validators"/"ngMessages"

Sat, 03 Sep 2016 22:24:46 +0000

Implementation custom Model validation is typically done by extending the built-in $error object to ngForm models.

Prior to AngularJS 1.3 custom validation was done by injecting a function into the ngModel.$parsers array pipeline and manually setting validation states using $setValidity('visa', true) if the Model value matched a Visa credit card expression format, for example.

AngularJS 1.3+ has the $validators pipeline object, which requires no manual setting of validation states.

Let’s take a look of old school way then we can shift to ngModel.$validators technique.

Front End Interview Questions

Sun, 14 Aug 2016 11:39:13 +0000

To rock the interview to achieve what you deserve and to improve your concepts about front end technologies, I have consolidated a list of questions and answers. It’s a one stop solution for front end interview process.

Kangax ES2015 quiz, expained

Tue, 26 Jul 2016 23:01:02 +0000

@kangax’ve created a quiz, it’s very interesting, the solution explains a tricky moment of spec.

Exploring AngularJS 1.5 .component() method

Fri, 22 Jul 2016 22:20:03 +0000

AngularJS 1.5 introduce .component() helper method which is much simpler than the .directive() definitions and advocates best practices and common default behavior.

Using .component() will allow to write in Angular 2 style as well, which will turn transition to Angular 2 much easier.

Let’s compare the difference in syntax and the possibility of new abstraction.

5 principles that will make a more SOLID Javascript Engineer

Mon, 11 Jul 2016 00:00:00 +0000

Being a SOLID developer in JS isn’t so as straight forward as in other languages. Some developers consider functional approach. Others chose OOP style. Some stand in both line. And other think that having class is wrong and redundant and prefer factories. But still, SOLID principles are the basic pillars of object oriented programming.

But what are they?

How to copy object in Javascript

Fri, 08 Jul 2016 21:55:05 +0000

There are many ways to copy object in Javascript but most of the time such operation doesn’t do what we expected.

Are all properties copied by reference?
Are sub-properties merged or replaced?
Are accessor, like getter and setters, preserved?
And what about Sumbols and other non-enumerable properties?

Kata: Format a string of names like 'Bart, Lisa & Maggie'

Fri, 19 Feb 2016 00:05:14 +0000

Given: an array containing hashes of names

Return: a string formatted as a list of names separated by commas except for the last two names, which should be separated by an ampersand.

Kata: Filter through name/email

Mon, 15 Feb 2016 22:34:45 +0000

He has troubles with users ending or starting in a ., and his user-array is a flat array of user-email-pairs, like so:

Misconceptions About Inheritance in JS

Sun, 14 Feb 2016 22:54:55 +0000

What’s the Difference Between Class & Prototype Inheritance?

This can be a tricky question, and you’ll probably need to defend your answer with follow-up Q&A, so pay special attention to learning the differences, and how to apply the knowledge to write better code.

Kata: Function cache

Sun, 14 Feb 2016 21:17:45 +0000

If you are calculating complex things or execute time-consuming API calls, you sometimes want to cache the results. In this case we want you to create a function wrapper, which takes a function and caches its results depending on the arguments, that were applied to the function.

Kata: All, None & Any

Wed, 10 Feb 2016 20:58:59 +0000

As a part of this Kata, you need to create three functions that one needs to be able to call upon an array:

Development with Webpack

Sun, 07 Feb 2016 12:11:41 +0000

Webpack simplifies web development by solving a fundamental problem: bundling. It takes in various assets, such as JavaScript, CSS, and HTML, and then transforms these assets into a format that’s convenient to consume through a browser. Doing this well takes away a significant amount of pain from web development.

It’s not the easiest tool to learn due to its configuration-driven approach, but it’s incredibly powerful. The purpose of this guide is to help you get started with webpack and then to go beyond the basics.

Understanding components approach and thinking in React

Fri, 05 Feb 2016 00:00:00 +0000

The parts of a web user interface building blocks for both simple websites and modern front-end applications.

First reaction about React.js

Thu, 04 Feb 2016 17:20:14 +0000

Building a dead simple application with following component structure:

Practical design patterns in JavaScript

Wed, 03 Feb 2016 12:43:26 +0000

One of the most important aspects of writing maintainable code is being able to notice the repeating themes in that code and optimize them. This is an area where knowledge of design patterns can prove invaluable.

I take a look at a number of popular JavaScript design patterns and explore why certain patterns may be suitable for your projects.

сусle.js fundamentals

Tue, 02 Feb 2016 16:32:47 +0000

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

Cycle.js builds on RxJS and is as a reactive and functional JavaScript framework. What does that mean?

The difference between throttling and debouncing

Mon, 11 Jan 2016 13:14:13 +0000

One of the biggest mistakes I see when looking to optimize existing code is the absence of the debounce/throttle function. Both of them are ways to limit the amount of JavaScript you are executing based on DOM events for performance reasons. But they are, you guessed it, different.

Kata: Are they square?

Sat, 09 Jan 2016 23:54:01 +0000

Write a function that checks whether all elements in an array are square numbers. The function should be able to take any number of array elements.

TOP 10 mistakes when you develop on AngularJS

Wed, 23 Sep 2015 18:40:03 +0000

The top 10 mistakes when beginners start to develop on AngularJS.

Kata: Reverse words

Sun, 13 Sep 2015 11:50:12 +0000

Write a reverseWords function that accepts a string a parameter, and reverses each word in the string. Every space should stay, so you cannot use words from Prelude.

call & apply VS bind, the simplest explanation

Thu, 06 Aug 2015 12:03:54 +0000

Every one know that apply() and call() are similar function, which set this (change context of function).

But when should be used the bind() method?

Huston, do we have a problem with promises?

Mon, 02 Feb 2015 20:13:01 +0000

Many of us are using promises without really understanding them.

Full-screen scrolling page effects with fullPage.js

Sun, 21 Dec 2014 11:34:48 +0000

A simple and easy to use jQuery plugin to create full-screen effects.

Organizing an application using AMD with require.js

Sat, 20 Dec 2014 12:39:53 +0000

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments

Firebase and AngularJS

Wed, 10 Dec 2014 23:45:45 +0000

AngularFire is the officially supported AngularJS binding for Firebase. The combination of Angular and Firebase provides a three-way data binding between your HTML, your, JavaScript, and the Firebase database.

JSONP

Wed, 29 Oct 2014 21:44:50 +0000

JSONP is really simple trick to overcome XMLHttpRequest same origin domain policy - you can’t send AJAX (XMLHttpRequest) request (not a simple) to different domain.

OOP in prototype style

Mon, 15 Sep 2014 22:40:38 +0000

The main point is that one object can be prototype of another object. That means if property isn’t found in the object - than it takes from prototype object. In JavaScript this implementation is at the language level.

Canvas-off icon navigation with an animated border effect

Mon, 11 Aug 2014 21:11:48 +0000

Maybe, you don't need jQuery?

Sun, 10 Aug 2014 18:08:20 +0000

Do you really need to use jQuery methods instead of vanilla Javascript?

Performance: JavaScript loops

Wed, 06 Aug 2014 20:38:48 +0000

Is it faster to use the native forEach or just loop with for?

Reading files in JavaScript with File API

Sat, 02 Aug 2014 15:39:09 +0000

Reading files in Javascript with File API

NodeList vs Array in Javascript

Wed, 30 Jul 2014 22:39:40 +0000

Essentially, a NodeList is what you get when you call any method such as elem.getElemetsByTagName(), elem.querySelectorAll() and so on.

Operator typeof, [[Class]], instanceof, Duck Typing and Polymorphism

Tue, 29 Jul 2014 22:01:59 +0000

Funny to hear when developer says that JS does not have types =) Let’s see how to distinguish them right.

Performance: JavaScript adding text to a node

Fri, 25 Jul 2014 23:10:14 +0000

What is the most reasonable approach?

Deferred and promise in jQuery

Mon, 14 Jul 2014 21:17:26 +0000

How handle async code with jQuery via promises and creating own promise via deffered.

JavaScript Promises

Sun, 13 Jul 2014 13:43:08 +0000

Class manipulation in Javascript, jQuery and AngularJS

Wed, 02 Jul 2014 23:24:37 +0000

In this article, I would like to create short reference for how add/remove/toogle class in pure Javascript and with framework.

Function Invocation Patterns in JavaScript

Thu, 29 May 2014 05:47:57 +0000

Describe different approaches to define and call functions

Form pop-up with inputs navigation

Sun, 30 Mar 2014 21:41:30 +0000

Modal pop-up confirm with “correct” navigation through inputs.

Data URIs

Tue, 11 Feb 2014 12:48:12 +0000

Did you know that you don’t have to link to an external image file when using an <img> element in HTML, or declaring a background-image in CSS? You can embed the image data directly into the document with data URIs.

Web Services, WSDL, SOAP envelope with JavaScript

Sun, 02 Feb 2014 00:00:00 +0000

The main concept of Web Services is to exchange data between two devices using standardized protocols and messages.

What is event bubbling and capturing?

Sun, 02 Feb 2014 00:00:00 +0000

Event bubbling and capturing are two ways of event propagation in the HTML DOM API.