25 DEC 2019

react redis redily

What is NPX?

npx is a Node.js command-line tool which became available with npm@5.2.0. It enables npm to eXecute command-line Node.js tools without having them to be installed globally.

Command-line tools like mocha, gulp, react-native etc., are commonly installed globally using the -g flag with npm.

However, a globally installed package has two major problems:

Different projects may depend on different versions of the same package
Users may be reluctant to install a global utility just for your project

When using npx, all you have to do is install the “global” command-line tool under your dependencies or devDependencies, it can then be executed within the context of the project directory using npx, without them actually being installed globally.

… full article

Create React App

Create React apps with no build configuration.

Quick overview:

npx create-react-app my-app
cd my-app
npm start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

… full article

Nested Components

Nested Components are exactly what the name implies. They are children nested inside parent components. They simply help us create more complex UI structures. For example, an alert component probably has another sub-component nested within it to indicate the actual number of alerts. A message box has an inner input element and a send button.

Nested components simplify complex applications. In this coding challenge, let’s build a truck wheel manager application. I followed this modular approach to nest wheels inside axles, and nest axles within the truck frame (see image to the right.) Both wheels and axles could then be dynamically added or deleted from the UI, offering flexibility in defining different types of vehicles (trailer, semi, bus, etc.)

… full article

Props

In React props is short for properties. They are single values or objects containing a set of values that are passed to React Components on creation using a naming convention similar to HTML-tag attributes.

The primary purpose of props in React is to provide following component functionality:

Pass custom data to your React component.
Trigger “state” changes (more on this later).
Use via this.props.reactProp inside component’s render() method

… full article

What is Cache memory?

In computing, a cache is a hardware or software component that stores data so that future requests for that data can be served faster; the data stored in a cache might be the result of an earlier computation or a copy of data stored elsewhere. A cache hit occurs when the requested data can be found in a cache, while a cache miss occurs when it cannot. Cache hits are served by reading data from the cache, which is faster than recomputing a result or reading from a slower data store; thus, the more requests that can be served from the cache, the faster the system performs.

To be cost-effective and to enable efficient use of data, caches must be relatively small. Nevertheless, caches have proven themselves in many areas of computing, because typical computer applications access data with a high degree of locality of reference. Such access patterns exhibit temporal locality, where data is requested that has been recently requested already, and spatial locality, where data is requested that is stored physically close to data that has already been requested.

… full article

redis

Redis Cache is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperloglogs, geospatial indexes with radius queries and streams. Redis has built-in replication, Lua scripting, LRU eviction, transactions and different levels of on-disk persistence, and provides high availability via Redis Sentinel and automatic partitioning with Redis Cluster

redis.io home page – link

redis.io for windows – download page

redily2

Redily is a modern Redis GUI Client built to improve developer productivity

redily – home page download

More topics covered:

overcome create-react-app issue
this.props can with different parameter
cache memory for data-base
Why use cache memory?
servicestack.redis nugget
redis-cli.exe
redis-server.exe

Links:

Project Assignment – AngularJS

angular-assignment

Final project web Angular JS – click here to download!

18 DEC 2019

react node-js-express

Welcome to React!

React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.React can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded. However, fetching data is only the beginning of what happens on a web page, which is why complex React applications usually require the use of additional libraries for state management, routing, and interaction with an API; Redux, React Router and axios are respective examples of such libraries.

React home page – link

Who is the most popular framework ? – link

script src crossorigin

The crossorigin attribute should only be used if we care about getting error information for the script being loaded. Since accessing this information requires a CORS check, the Access-Control-Allow-Origin header must be present on the resource for it to be loaded.

script src crossorigin – MDN

Node JS – export, require

The exports keyword gives you the chance to “export” your objects and methods. Let’s do an example:

node_ex

In the code below, we are exporting the area and circumference functions. We defined the PI constant, but this is only accessible within the module. Only the elements associated with exports are available outside the module.

So, we can consume it using require in another file like follows:Noticed that this time we prefix the module name with ./. That indicates that the module is a local file.

node_im

… full article

Node JS – Express

Express.js, or simply Express, is a web application framework for Node.js, It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js. express provides a robust set of features for web and mobile applications.

Express home page – link

More topics covered:

React- modify state property
React developer tools for chrome
React- place html in js field
React- data-binding to input
React- handle submit
using vs code extensions
Live server

Links:

15 DEC 2019

nodejs angularjs directives

Node JS

Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user’s web browser. Consequently, Node.js represents a “JavaScript everywhere” paradigm, unifying web-application development around a single programming language, rather than different languages for server- and client-side scripts.
Node.js has an event-driven architecture capable of asynchronous I/O. These design choices aim to optimize throughput and scalability in web applications with many input/output operations, as well as for real-time Web applications (e.g., real-time communication programs and browser games).

Nodejs home page – click here!

Node Package Manager (NPM) – modules download page

AngularJS Directives

Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using “directive” function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive. AngularJS provides support to create custom directives for following type of elements.

Element directives − Directive activates when a matching element is encountered.
Attribute − Directive activates when a matching attribute is encountered.
CSS − Directive activates when a matching css style is encountered.
Comment − Directive activates when a matching comment is encountered.

… full article

More topics covered:

NodeJS vs .NET
IIS vs NodeJS http
node_module

Links:

11 DEC 2019

web-project

Web project solution

We discussed the three pages of the web project:

Landing page: will present landing flights. once the page is loaded an AJAX call will be executed to the server in order to fetch the flights which landed in the past 4 hours and about to land in the next 12 hours
Departure page: will present the flights about to departure in the next 12 hours. once the page is loaded an AJAX call will be executed to the server in oreder to fetch the flights
Search page: will provide a page where the user can search for flights. after the user fills up the searching fields and clicks “Search” an AJAX call will be executed in order to fetch the desired flights

After the AJAX call result has been resolved, we will iterate over the response array and add each flight result into the display table

Server-side: in order to support the AJAX call we need to add a web API endpoint for the landing-flights, departure-flights and the flights search. we can add those methods into the Anonymous facade (+api-Controller) or create a new facade, i.e. LandDepartueFacade (+api-controller) which will expose the requested functionality. the facade will call an ADO method which will execute an SQL query into the data-base in order to fetch the data. the SQL query should include all of the search parameters (i.e. landing time, searching filters etc.) instead of fetching the entire data and filtering out the results using LINQ

Javascript Implementation recommendations:

Create a Flight class ( flights.js )
Create a Flight instance for each result item of the AJAX response
Calculate the flight status in the Flight ctor
Bonus feature: present only 30 flights in each table and add navigation buttons

Links:

Class code: solution demo

08 DEC 2019

angularjs services form-validation

AngularJS Services

Angular services are singleton objects that carry out some sort of task. We also use AngularJS services to organize and share code across the application.Angular Services follow Single Responsibility Principle (SRP) and are wired together using dependency injection (DI). The Single Responsibility principle ensures that each object will have only a single responsibility. AngularJS includes services for different purposes. For example, $http service can be used to send an AJAX request to the remote server. AngularJS also allows you to create custom service for your application.

There are 5 different ways to create services in Angular:
1. Value
2. Factory
3. Service
4. Provider
5. Constant

… full article

Form Validation

An Angular form is a regular HTML form with few additional features. For each field (input, radio, select, etc.) in the form, we need an object of the FormControl class. The FormControl object gives information about that field. Its value, if the value is valid, and if it is not valid what are the validation errors, etc.

It also provides the state of the field such as touched, untouched, dirty, pristine, etc.

Similarly, a FormGroup is the collection of the FormControl objects. Every Angular form has at least one FormGroup. You may decide to have multiple FormGroups in use-cases like separating the handling of personal details and professional details sections of a user registration form.

All the properties of a FormGroup (valid, error, etc.) is also available to the FormControl. For instance, the valid property of a FormControl will return true if all FormControl instances are valid.

Example:

… full article

ng-submit

Enables binding AngularJS expressions to onsubmit events.
Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.

… full article

More topics covered:

ref types in service
service inside service
$ prefix only for angular services
$http.post instead of submit

Links:

04 DEC 2019

angularjs webapi

Ref type vs. Value type

Types in javascript are either treated by Value Type or by Reference Type. A Value Type holds the data within its own memory allocation and a Reference Type contains a pointer to another memory location that holds the real data. Reference Type variables are stored in the heap while Value Type variables are stored in the stack.

Explaining Value vs. Reference in Javascript

What is Routing in AngularJS?

If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the UI-Router module. The UI-Router module routes your application to different pages without reloading the entire application.

ui router home page link

$http

The $http service is a core AngularJS service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP.
The $http API is based on the deferred/promise APIs exposed by the $q service.
The $http service is a function which takes a single argument — a configuration object — that is used to generate an HTTP request and returns a promise that is resolved (request success) or rejected (request failure) with a response object.

… full article

More topics covered:

using angular with web api
mvc controller + templateUrl
$state – home-page link
adding bootstrap to angular

Links:

01 DEC 2019

angularjs

$ Scope Commands

$rootScope – angularjs docs

$scope.$watch – angularjs docs

$scope.$broadcast – angularjs docs

$scope.$on – angularjs docs

this vs $scope – chevtek.io

ng-repeat

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

Special properties are exposed on the local scope of each template instance, including:

Variable	Type	Details
`$index`	number	iterator offset of the repeated element (0..length-1)
`$first`	boolean	true if the repeated element is first in the iterator.
`$middle`	boolean	true if the repeated element is between the first and last in the iterator.
`$last`	boolean	true if the repeated element is last in the iterator.
`$even`	boolean	true if the iterator position `$index` is even (otherwise false).
`$odd`	boolean	true if the iterator position `$index` is odd (otherwise false).

… full article

Filters

AngularJS provides filters to transform data:

currency Format a number to a currency format.
date Format a date to a specified format.
filter Select a subset of items from an array.
json Format an object to a JSON string.
limitTo Limits an array/string, into a specified number of elements/characters.
lowercase Format a string to lower case.
number Format a number to a string.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.

… full article

More topics covered:

storing commands in Map
ng-model for <select … >
as keyword
parent + child scope
ng-repeat sortBy, filter

Links:

27 NOV 2019

angularjs more-js

JavaScript – more features

Promise – MDN link
JQuery promise deferrd – MDN link
Promise – es6-features.org
Promise.all – es6-features.org
function* – MDN link

ng-class

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

The directive operates in three different ways, depending on which of three types the expression evaluates to:

If the expression evaluates to a string, the string should be one or more space-delimited class names.
If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.
If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this.

The directive won’t add duplicate classes if a particular class was already set.

When the expression changes, the previously added classes are removed and only then are the new classes added … full article

ng-model

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

ngModel is responsible for:

Binding the view into the model, which other directives such as input, textarea or select require.
Providing validation behavior (i.e. required, number, email, url).
Keeping the state of the control (valid/invalid, dirty/pristine, touched/untouched, validation errors).
Setting related css classes on the element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty) including animations.
Registering the control with its parent form.

Note: ngModel will try to bind to the property given by evaluating the expression on the current scope. If the property doesn’t already exist on this scope, it will be created implicitly and added to the scope … full article

More topics covered:

IEnumerable
iterators and generators
JQuery – fail vs catch
promise – resolve and reject
promise return –> then
creating our own promises
angular drop-down ng-model
angular checkbox ng-model

Links:

24 NOV 2019

angularjs more-js

JavaScript – more features

Arrow functions – MDN link
Lexical this – tutorials point
array: map, filter, find, every, some – poka
array reduce – MDN link
set – MDN link
map – key, value – MDN link
class, inheritance, getter setter – MDN link

Angular features

angular.module – bootstrap
controllers- angular docs
$scope – angular docs
ng-controller in HTML

Dependency Injection

Dependency Injection is a software design in which components are given their dependencies instead of hard coding them within the component. It relieves a component from locating the dependency and makes dependencies configurable. It also helps in making components reusable, maintainable and testable.
AngularJS provides a supreme Dependency Injection mechanism. It provides following core components which can be injected into each other as dependencies: Value, Factory, Service, Provider, Constant … full article

More topics covered:

angular bootstrap file
angular controller instances
$scope data + functions

Links: