Web Apps Tag

What’s new in Vue 3

Vue 3 – The Progressive Javascript Framework’s progress over the years is nothing short of impressive.

If you’re someone migrating your apps to Vue 3 (or) experimenting Vue 3 for your next project this draft should help you kickstart with confidence.

First of all, why does this update matter?

If we look at the journey of Vue so far, it greatly traversed being a library to a framework trend making it much more powerful yet sticking to its lightweight nature.

With the core releasing a new major version, all the other parts of the framework needed to move forward together. Having said that, there were quite a lot of new members we would have in our party during migration. Let’s get introduced!

Why Vue 3?

In short, Vue 3 would be the new default.

Vue 2 would remain in LTS (long-term support) version for 18 months, which means that it will still get security updates and is absolutely safe to stick with it for a while. But, isn’t it a great time for us to migrate our existing projects if any?

Vue 3 is faster, smaller, more maintainable and it’s easier to target native - Evan Vue

Smaller Vue core – Size improvement reached by the combination of greater code modularity, a smaller core runtime, and a tree-shaking-friendly compiler. Thus the new core would thus be reduced from about 20KB to 10KB gzipped.

The compiler will generate tree-shaking-friendly code. If you use a feature that requires a function in your template, the compiler will automatically generate code that imports it. But if you don’t use a feature, then we generate code that does not import it, which means the feature will be tree-shaken.

Better rendering performance – The Vue 3 renderer improves the performance of the rendering process by using optimizations such as the hoisting and inlining of static parts and implementing Vue 3’s reactivity with ES6 proxies.

Below is an infographic proofing the metrics between v-2.5 and v.3.0 proto

Pic courtesy: medium.com

Vite – the next generation frontend tooling

Well, despite being one of our favorite topics to speak We’ll try to wrap it short.

Vite is a lightweight and fast build toolchain with first-class Vue SFC support. It is created by Evan You, the author of Vue himself!

Vue 3 official build setup is now powered by Vite. So this would be one of our newest members to welcome!

Composition API

This topic deserves a separate article on its own, yet will try to pin those dancing in my mind post my experimentations.

Vue 3 introduced the Composition API as an alternative method to the Options API for writing component states and logic. It’s simply a set of APIs that allows us to author Vue components using imported functions instead of declaring options.

It is an umbrella term that covers the following APIs:

Reactivity API, e.g. ref() and reactive(), allows us to directly create reactive state, computed state, and watchers.

Lifecycle Hooks, e.g. onMounted() and onUnmounted(), allows us to programmatically hook into the component lifecycle.

Dependency Injection, i.e. provide() and inject(), allows us to leverage Vue’s dependency injection system while using Reactivity APIs.

Vue clearly pointed out that they don’t have any plans to deprecate options API. Here’s the exact statement from the document FAQ

No, we do not have any plan to do so. Options API is an integral part of Vue and the reason many developers love it. We also realize that many of the benefits of Composition API only manifest in larger-scale projects, and Options API remains a solid choice for many low-to-medium-complexity scenarios.

Pros of using Composition APIs

We can create standalone reactive states and/or properties

In Vue 2 we’re kind of bound to the component scope for the reactive state. With Vue 3 you don’t need a component anymore to create a reactive state.

We can abstract reactive state

Sometimes setup in Vue components can get really bloated with creating many reactive properties. That’s why it could be nice to have them abstracted in standalone javascript files. This is preferably termed composable.

Better Logic Reuse

The primary advantage of Composition API is that it enables clean, efficient logic reuse in the form of Composable functions. It solves all the drawbacks of mixins, the primary logic reuse mechanism for Options API

Better Type Inference

Code written in Composition API can enjoy full type inference with little need for manual type hints.

Smaller Production Bundle and Less Overhead

Code written in Composition API and <script setup> is more efficient and minification-friendly than Options API equivalent. This is because the template in a <script setup> component is compiled as a function inlined in the same scope of the <script setup> code. Unlike property access from this, the compiled template code can directly access variables declared inside <script setup>, without an instance proxy in between. This also leads to better minification because all the variable names can be safely shortened.

Better code sharing

Inside the setup hook, we can group parts of our code by logical concern.

More Flexible Code Organization

The Options API uses options like data, methods, and mounted. With the Composition API, we have a single setup hook in which we write our reactive code.

This results in better code organization. Let’s see how with a simple code example. We’ll see how we write in Vue2, rewrite in composition API then further fine-tune with the new script setup syntax.

Pic courtesy: medium.com

Pic courtesy: medium.com

Pic courtesy: medium.com

Common problems with Options API

Having said Vue doesn’t have plans to deprecate options API anytime soon. Why should we care about composition API?

Vue 2 supports a few ways to reuse code between components;

• Mixins
• Renderless components
• Higher-order components

These methods of reuse each come with their own drawbacks, namely:

• Unclear where component options are coming from (mixins)
• Namespace clashes (higher-order components, mixins)
• Performance costs (higher-order components, renderless components)

Scattered logics – In Vue2, component options such as data, computed, methods, watch are used to organize the logic. This approach makes it hard to read and understand as the component grows.

Note on <script setup>

<script setup> is a compile-time syntactic sugar for using Composition API inside Single File Components (SFCs). It is the recommended syntax if we are using both SFCs and Composition API. It provides a number of advantages over the normal <script> syntax:

More succinct code with less boilerplate

Ability to declare props and emitted events using pure TypeScript

Better runtime performance (the template is compiled into a render function in the same scope, without an intermediate proxy)

Better IDE type-inference performance (less work for the language server to extract types from code)

Unlike normal <script>, which only executes once when the component is first imported, code inside <script setup> will execute every time an instance of the component is created.

<script setup> can be used alongside normal <script>

Simpler state management with Pinia

Pinia, a lightweight state management library for Vue.js, allows us to share a state across components/pages & gained a lot of traction recently. It uses the new reactivity system in Vue 3 to build an intuitive and fully typed state management library. It’s now the new default state management library for Vue 3. It is maintained by the Vue core team and works with both Vue 2 and Vue 3.

For more information and to develop a website using Vue.js, Hire Vue.js Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop a Website using Vue.js, please visit our technology page.

Content Source:

1. medium.com

Laravel 9: a deep dive into the latest major release

This transition is intended to ease the maintenance burden on the community and challenge our development team to ship amazing, powerful new features without introducing breaking changes. Therefore, we have shipped a variety of robust features to Laravel 8 without breaking backwards compatibility, such as parallel testing support, improved Breeze starter kits, HTTP client improvements, and even new Eloquent relationship types such as “has one of many”.

Therefore, this commitment to ship great new features during the current release will likely lead to future “major” releases being primarily used for “maintenance” tasks such as upgrading upstream dependencies, which can be seen in these release notes.

Laravel 9 continues the improvements made in Laravel 8.x by introducing support for Symfony 6.0 components, Symfony Mailer, Flysystem 3.0, improved route:list output, a Laravel Scout database driver, new Eloquent accessor / mutator syntax, implicit route bindings via Enums, and a variety of other bug fixes and usability improvements.

PHP 8.0

Laravel 9.x requires a minimum PHP version of 8.0.

Flysystem 3.x

Laravel 9.x upgrades our upstream Flysystem dependency to Flysystem 3.x. Flysystem powers all of filesystem interactions offered by the Storage facade.

Please review the upgrade guide to learn more about ensuring your application is compatible with Flysystem 3.x.

Improved Eloquent Accessors / Mutators

Laravel 9.x offers a new way to define Eloquent accessors and mutators. In previous releases of Laravel, the only way to define accessors and mutators was by defining prefixed methods on your model like so:

 public function getNameAttribute($value)
{
    return strtoupper($value);
}
 
public function setNameAttribute($value)
{
    $this->attributes['name'] = $value;
}

However, in Laravel 9.x you may define an accessor and mutator using a single, non-prefixed method by type-hinting a return type of Illuminate\Database\Eloquent\Casts\Attribute:

 use Illuminate\Database\Eloquent\Casts\Attribute;
 
public function name(): Attribute
{
    return new Attribute(
        get: fn ($value) => strtoupper($value),
        set: fn ($value) => $value,
    );
}

In addition, this new approach to defining accessors will cache object values that are returned by the attribute, just like custom cast classes:

 use App\Support\Address;
use Illuminate\Database\Eloquent\Casts\Attribute;
 
public function address(): Attribute
{
    return new Attribute(
        get: fn ($value, $attributes) => new Address(
            $attributes['address_line_one'],
            $attributes['address_line_two'],
        ),
        set: fn (Address $value) => [
            'address_line_one' => $value->lineOne,
            'address_line_two' => $value->lineTwo,
        ],
    );
}

Enum Eloquent Attribute Casting

Enum casting is only available for PHP 8.1+.

Eloquent now allows you to cast your attribute values to PHP “backed” enums. To accomplish this, you may specify the attribute and enum you wish to cast in your model’s $casts property array:

 use App\Enums\ServerStatus;
 
/**
 * The attributes that should be cast.
 *
 * @var array
 */
protected $casts = [
    'status' => ServerStatus::class,
];

Once you have defined the cast on your model, the specified attribute will be automatically cast to and from an enum when you interact with the attribute:

 if ($server->status == ServerStatus::provisioned) {
    $server->status = ServerStatus::ready;
 
    $server->save();
}

Implicit Route Bindings With Enums

PHP 8.1 introduces support for Enums. Laravel 9.x introduces the ability to type-hint an Enum on your route definition and Laravel will only invoke the route if that route segment is a valid Enum value in the URI. Otherwise, an HTTP 404 response will be returned automatically. For example, given the following Enum:

 enum Category: string
{
    case Fruits = 'fruits';
    case People = 'people';
}

You may define a route that will only be invoked if the {category} route segment is fruits or people. Otherwise, an HTTP 404 response will be returned:

 Route::get('/categories/{category}', function (Category $category) {
    return $category->value;
});

Forced Scoping Of Route Bindings

In previous releases of Laravel, you may wish to scope the second Eloquent model in a route definition such that it must be a child of the previous Eloquent model. For example, consider this route definition that retrieves a blog post by slug for a specific user:

 use App\Models\Post;
use App\Models\User;
 
Route::get('/users/{user}/posts/{post:slug}', function (User $user, Post $post) {
    return $post;
});

When using a custom keyed implicit binding as a nested route parameter, Laravel will automatically scope the query to retrieve the nested model by its parent using conventions to guess the relationship name on the parent. However, this behavior was only previously supported by Laravel when a custom key was used for the child route binding.

However, in Laravel 9.x, you may now instruct Laravel to scope “child” bindings even when a custom key is not provided. To do so, you may invoke the scopeBindings method when defining your route:

 use App\Models\Post;
use App\Models\User;
 
Route::get('/users/{user}/posts/{post}', function (User $user, Post $post) {
    return $post;
})->scopeBindings();

Or, you may instruct an entire group of route definitions to use scoped bindings:

 Route::scopeBindings()->group(function () {
    Route::get('/users/{user}/posts/{post}', function (User $user, Post $post) {
        return $post;
    });
});

Controller Route Groups

You may now use the controller method to define the common controller for all of the routes within the group. Then, when defining the routes, you only need to provide the controller method that they invoke:

 use App\Http\Controllers\OrderController;
 
Route::controller(OrderController::class)->group(function () {
    Route::get('/orders/{id}', 'show');
    Route::post('/orders', 'store');
});

Full Text Indexes / Where Clauses

When using MySQL or PostgreSQL, the fullText method may now be added to column definitions to generate full text indexes:

 $table->text('bio')->fullText(); 

In addition, the whereFullText and orWhereFullText methods may be used to add full text “where” clauses to a query for columns that have full text indexes. These methods will be transformed into the appropriate SQL for the underlying database system by Laravel. For example, a MATCH AGAINST clause will be generated for applications utilizing MySQL:

 $users = DB::table('users')
           ->whereFullText('bio', 'web developer')
           ->get();

Laravel Scout Database Engine

If your application interacts with small to medium sized databases or has a light workload, you may now use Scout’s “database” engine instead of a dedicated search service such as Algolia or MeiliSearch. The database engine will use “where like” clauses and full text indexes when filtering results from your existing database to determine the applicable search results for your query.

Rendering Inline Blade Templates

Sometimes you may need to transform a raw Blade template string into valid HTML. You may accomplish this using the render method provided by the Blade facade. The render method accepts the Blade template string and an optional array of data to provide to the template:

 use Illuminate\Support\Facades\Blade;
 
return Blade::render('Hello, {{ $name }}', ['name' => 'Julian Bashir']);

Similarly, the renderComponent method may be used to render a given class component by passing the component instance to the method:

 use App\View\Components\HelloComponent;
 
return Blade::renderComponent(new HelloComponent('Julian Bashir'));

Slot Name Shortcut

In previous releases of Laravel, slot names were provided using a name attribute on the x-slot tag:

 <x-alert>
    <x-slot name="title">
        Server Error
    </x-slot>
 
    <strong>Whoops!</strong> Something went wrong!
</x-alert>

However, beginning in Laravel 9.x, you may specify the slot’s name using a convenient, shorter syntax:

 <x-slot:title>
    Server Error
</x-slot>

Checked / Selected Blade Directives

For convenience, you may now use the @checked directive to easily indicate if a given HTML checkbox input is “checked”. This directive will echo checked if the provided condition evaluates to true:

 <input type="checkbox"
        name="active"
        value="active"
        @checked(old('active', $user->active)) />

Likewise, the @selected directive may be used to indicate if a given select option should be “selected”:

 <select name="version">
    @foreach ($product->versions as $version)
        <option value="{{ $version }}" @selected(old('version') == $version)>
            {{ $version }}
        </option>
    @endforeach
</select>

Bootstrap 5 Pagination Views

Laravel now includes pagination views built using Bootstrap 5. To use these views instead of the default Tailwind views, you may call the paginator’s useBootstrapFive method within the boot method of your App\Providers\AppServiceProvider class:

 use Illuminate\Pagination\Paginator;
 
/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    Paginator::useBootstrapFive();
}

For more information and to develop web applications using Laravel, Hire Laravel Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop custom web apps using Laravel, please visit our technology page.

Content Source:

1. laravel.com

How to build a plugin system with Node.js

If you’re building a minimalist product, but want to add an extra level of customisation or expansion, then plugins are a great way to enable that. They allow each instance to be customised with additional code that anyone can create.

In this tutorial, we will extend a minimal web server with a plugin system, create a plugin, and use that plugin with the server. We’ve already created a very basic web server. We’ll use this as our starter code.

What Is A Plugin

But before we start, what is a plugin? A plugin is an extra piece of code that expands what a program can normally do. Web extensions are a good example of this. They leverage existing APIs, and build new functionality upon them. In certain circumstances, they can also be used to patch bugs and flaws that the main software provider has not yet addressed.

In this tutorial, we’ll be building a request counting plugin, and the system to load and unload that plugin.

Getting Started

Let’s start by creating a fresh Node.js project. I’ll be using NPM in this tutorial, but I’ll add the Yarn commands too.

1. mkdir my-plugin-app
2. cd my-plugin-app
3. npm init -y (yarn init -y)
4. npm i express (yarn add express)

We won’t go through the process of creating an app for our plugins system. Instead, we’ll use this starter code. A simple server with one endpoint. Create an index.js file and add this starter code.

const express = require('express');
const EventEmitter = require('events');

class App extends EventEmitter {
  constructor() {
    super();

    this.server = express();
    this.server.use(express.json());
  }

  start() {
    this.server.get('/', (req, res) => {
      res.send('Hello World!');
    });

    this.server.listen(8080, () => {
      console.log('Server started on port 3000')
      this.emit('start');
    });
  }

  stop() {
    if (this.stopped) return;
    console.log('Server stopped');
    this.emit('stop');
    this.stopped = true;
    process.exit();
  }
}

const app = new App();
app.start();

["exit", "SIGINT", "SIGUSR1", "SIGUSR2", "SIGTERM", "uncaughtException"].forEach(event => {
  process.on(event, () => app.stop());
});

Our First Plugin

To get a sense as to what our plugin system will do, let’s create a little plugin containing everything a plugin will need. The type of plugin system we’ll be implementing has two events. load and unload are the two times we will directly call any code in the plugin. load sets up any extra routes, middleware or anything else that is part of the plugin, and unload tells us to safely stop whatever we’re doing and save any persistent data.

This plugin will set up a middleware to count the number of requests we get. In addition, it will add an API route so we can query the number of requests that have been made so far. The plugin will export two different functions, one for each event.

const fs = require('fs');

let count = 0;

function load(app) {
  try {
    count = +fs.readFileSync('./counter.txt');
  } catch (e) {
    console.log('counter.txt not found. Starting from 0');
  }

  app.server.use((req, res, next) => {
    count++;
    next();
  });

  app.server.get('/count', (req, res) => {
    res.send({ count });
  })
}

// Save request count for next time
function unload(app) {
  fs.writeFileSync('./counter.txt', count);
}

module.exports = {
  load,
  unload
};

Loading Plugins

Our plugin system will all be kept in a separate class from the main app, we’ll put this in a new file plugins.js. The point of this class is to load and unload plugins.

The load function takes a path to a plugin file, and uses the require method to load it during runtime. The loadFromConfig method allows us to load plugins defined in a config file.

const fs = require("fs");

class Plugins {
  constructor(app) {
    super();
    this.app = app;
    this.plugins = {};
  }

  async loadFromConfig(path='./plugins.json') {
    const plugins = JSON.parse(fs.readFileSync(path)).plugins;
    for (let plugin in plugins) {
      if (plugins[plugin].enabled) {
        this.load(plugin);
      }
    }
  }

  async load(plugin) {
    const path = plugins[plugin];
    try {
      const module = require(path);
      this.plugins[plugin] = module;
      await this.plugins[plugin].load(this.app);
      console.log(`Loaded plugin: '${plugin}'`);
    } catch (e) {
      console.log(`Failed to load '${plugin}'`)
      this.app.stop();
    }
  }
}

module.exports = Plugins;

We’ll use a plugins.json file to store the paths to all the plugins we wish to load, then call the loadFromConfig method to load them all at once. Put the plugins.json file in the same directory as your code.

{
  "counter": "./counter.js"
}

Finally, we’ll create an instance of the plugin in our app. Import the Plugins class, create an instance in the constructor, and call loadFromConfig leaving the path blank (the default is ./plugins.json).

const express = require('express');
const Plugins = require('./plugins');

class App {
  constructor() {
    super();

    this.plugins = new Plugins(this);

    this.server = express();
    this.server.use(express.json());
  }

  async start() {
    await this.plugins.load();

    this.server.get('/', (req, res) => {
      res.send('Hello World!');
    });

    this.server.listen(8080, () => {
      console.log('Server started on port 3000')
    });
  }

  stop() {
    if (this.stopped) return;
    console.log('Server stopped');
    this.stopped = true;
    process.exit();
  }
}

const app = new App();
app.start();

["exit", "SIGINT", "SIGUSR1", "SIGUSR2", "SIGTERM", "uncaughtException"].forEach(event => {
  process.on(event, () => app.stop());
});

Unloading Plugins

We now need to handle the unload method exported from our plugin. And once we do, we need to remove it from the plugins collection. We’ll also include a stop method which will unload all plugins. We’ll use this method later to enable safe shutdowns.

const fs = require("fs");

class Plugins {
  constructor(app) {
    super();
    this.app = app;
    this.plugins = {};
  }

  async loadFromConfig(path='./plugins.json') {
    const plugins = JSON.parse(fs.readFileSync(path)).plugins;
    for (let plugin in plugins) {
      if (plugins[plugin].enabled) {
        this.load(plugin);
      }
    }
  }

  async load(plugin) {
    const path = plugins[plugin];
    try {
      const module = require(path);
      this.plugins[plugin] = module;
      await this.plugins[plugin].load(this.app);
      console.log(`Loaded plugin: '${plugin}'`);
    } catch (e) {
      console.log(`Failed to load '${plugin}'`)
      this.app.stop();
    }
  }

  unload(plugin) {
    if (this.plugins[plugin]) {
      this.plugins[plugin].unload();
      delete this.plugins[plugin];
      console.log(`Unloaded plugin: '${plugin}'`);
    }
  }

  stop() {
    for (let plugin in this.plugins) {
      this.unload(plugin);
    }
  }
}

module.exports = Plugins;

Safe Shutdown

To make sure that plugins get a chance to unload when the app closes, we need to call Plugins.stop. In the index.js code, we included a stop method that gets called when the app is killed, and we’ve just added a stop method to the Plugins class. So let’s call the Plugins.stop method when our app stop method is called.

Add the following to the App.stop method.

 stop() {
    if (this.stopped) return;
+   this.plugins.stop();
    console.log('Server stopped');
    this.stopped = true;
    process.exit();
  }

For more information and to develop web applications using Node JS, Hire Node Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop your custom web app using Node JS, please visit our technology page.

Content Source:

1. javascript.plainenglish.io

What’s new in Angular 13

The new release of Google’s popular TypeScript-based web framework is available now.

This post will bring you closer to the most important new features and breaking changes in Angular 13 and help you decide whether an update for your project is worthwhile.

Goodbye View Engine – 100% Ivy

Angular has introduced its next-generation compilation and rendering pipeline Ivy since its version 8. Angular 9 has used Ivy by default while maintaining support for the predecessor compiler and runtime View Engine.

The new version of the framework is now 100 percent Ivy.

To streamline and modernize the Angular Package Format (APF), View Engine specific metadata and older output formats are now removed, which will reduce maintenance costs and the complexity of the codebase in Angular 13. All internal tools are converted to Ivy beforehand so that the change should work smoothly.

Ivy compiles individual components more independently of one another, which improves development times. The use of ngcc (Angular compatibility compiler) is no more required for libraries built with the latest version of the APF. This will offer a faster execution for libraries developers.

Ergonomic APIs

The load time is reduced in Angular 13 with the help of ergonomic code-splitting APIs and granular code breakdown at a component level.

A performance improvement was also achieved with the introduction of ESBuild, an extremely fast JavaScript bundler. ESBuild works now with terser to optimize global scripts and supports CSS sourcemaps, which enables optimized global CSS.

The time to do a production bundle of 10 copies of the three.js library from scratch using default settings, including minification and source maps.
Pic courtesy: betterprogramming.pub

No More Support for IE11

To benefit from native web APIs and modern browser features such as web animations and CSS variables, the Angular team has removed the Internet Explorer 11 support.

This offers a smaller bundle size and faster load for apps and an improved user experience because of the absence of IE-specific polyfills and the no need for differential loading.

This breaking change will certainly affect authorities or institutions that still use IE 11 and have not yet switched to Microsoft Edge or other modern browsers.

Update of Component API

You can now create dynamic components with less boilerplate code thanks to an improvement of ViewContainerRef.createComponent API.

Here is the old way of creating a dynamic component:

export class InquiryDialog implements OnInit {

  componentRef: ComponentRef;
  @ViewChild('inquiryPage', {static: true, read: ViewContainerRef}) container: ViewContainerRef;

  constructor(@Inject(MAT_DIALOG_DATA) public data: InquiryDialogData, private componentFactoryResolver: ComponentFactoryResolver) {}
              
  ngOnInit(): void {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.data.inquiryPageComponent);

    this.componentRef = this.container.createComponent(componentFactory);   
  }
}

And with Angular 13, there is no need to use ComponentFactoryResolver:

export class InquiryDialog implements OnInit {

  componentRef: ComponentRef;
  @ViewChild('inquiryPage', {static: true, read: ViewContainerRef}) container: ViewContainerRef;

  constructor(@Inject(MAT_DIALOG_DATA) public data: InquiryDialogData) {}
              
  ngOnInit(): void {

    this.componentRef = this.container.createComponent(this.data.inquiryPageComponent);   
  }
}

Angular 13 way of creating a dynamic component

Improved Debugging and Test Times

TestBed is the primary unit tests API for Angular applications and libraries.

In order to decrease the test time in TestBed, the new version is released with an improved test API. The framework can now set up and tear down the test environment and learn the DOM automatically after each test run. This leads to faster, less memory-intensive, and better-isolated tests.

New Type for Forms

Angular 13 has introduced a new type for forms, which is FormControlStatus. It’s a union of all possible status strings for form controls:

• The type of AbstractControl.status, for example, is now FormControlStatus instead of string.
• And the type of StatusChanges is Observable<FormControlStatus> instead of Observable<any>.

Router

• There is an improvement for the router so that it will not replace the browser URL when new navigation cancels ongoing navigation.
• There is a proposition to fix an incorrect parsing for navigation. This happens when the default URL serializer drops everything afterward like a question mark in query parameters: /users?start=1?&pages=15
• You can add missing outlet events to RouterOutletContract, which is useful when the module federation renders components dynamically at some point in the future.

Accessibility (A11y)

There is an Accessibility (A11y) improvement in Angular Material: all Material Design Components (MDC) have been checked for better Accessibility.

Checkboxes and radio buttons, for example, have now larger touch sizes, and other components have better high contrast modes.

A comparison of touch target sizes. The sizes on the right are the new sizes.

A comparison of touch target sizes. The sizes on the right are the new sizes.
Pic courtesy: betterprogramming.pub

Other Changes

• The framework core now supports TypeScript version 4.4.
• Version 7 of the reactive programming library RxJs (Reactive Extensions for JavaScript) is now supported.
• Inlining fonts speed up the First Contentful Paint (FCP), which can improve the web performance. That’s why the team has introduced now support for inlining Adobe Fonts just like they did for inlining Google Fonts in Angular 11.
• We can disable or enable built-in validators such as min, max, and minLength dynamically.
• We can set custom conditions in ng_package.
• There is an improvement of error messages, like the error about “a missing animation trigger” for the platform-browser.
• Clear service worker cache in the safety worker. This ensures that broken or stale content will not be served in future requests.
• Improvement for the localization API. You can check the documentation for $localize.

For more information and to develop web applications using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop your custom web app using Angular, please visit our technology page.

Content Source:

1. betterprogramming.pub

Top 5 Angular UI kits and frameworks

Angular keeps growing in adoption and keeps becoming every day more popular among Frontend implementations.

In this brief guide, we will have a look around some of the greatest and most popular UI kits and frameworks, trying to understand which one of those could be the right choice for your next project.

Angular Material

Angular Material is considered today one of the most popular UI kit for Angular, probably the most one, despite its root feature that makes it anchored to the material design style, which could be not good for everyone. With more than 22k stars on GitHub, this kit is proving its so much beloved by developers and guarantees good community support that keeps posting and discussing bugs, features to integrate, eventually performances issues, and more.

Pic courtesy: betterprogramming.pub

Pros

• Very popular
• Represent the base on which other UI kits lean
• A decent number of components
• Integrates the Material Design
• Multiple modules, not monolithic
• Integrates a good CDK
• Provides some accessibility features
• Still supporting IE 11

Cons

• Hard to customize: working with this kit will make you suffer against weird DOM structures, ghosted tags, and hard-to-code CSS styles, which in some cases required the notorious (and bad) approach of ::ng-deep rules
• Strictly bound to the Material design style
• Documentation is not much exhaustive, will lead you to StackOverflow searches. Also missing a good search engine in docs pages.

Verdict

Good to develop a CRM or an admin software, very bad for general-purpose Front end needings. Still missing good documentation and the material look-and-feel could not be good for everyone. Found it very stable: use it and don’t pretend to customize it a lot, because despite the CDK it will drive you mad as hell.

Ng-bootstrap

Defined as “Bootstrap widgets — The angular way” by its authors, the Ng-bootstrap UI kit has been popular for a lot and was one of the first kits available around.

The anthem has been “let’s replicate Bootstrap features and make them all available to Angular”. The result is a good basic UI kit without complaints, but really essential. Some components are a bit inadequate compared to the original ones and the documentation is very concise. A good choice if you need the “basic bootstrap”, but not much more.

Pic courtesy: betterprogramming.pub

Pros

• Essential, which could be an advantage
• Easy to use
• Very close to the original one in terms of look and feel
• Easy to customize
• Multiple modules, not monolithic
• It’s legacy

Cons

• Essentially… you probably won’t be ok with just this one and will lead the developer to integrate features with other stuff
• Not so much popular nowadays could miss support for specific issues

Verdict

Ng-bootstrap is a good kit if you need plain Bootstrap features, not useful if you need more. Today it’s suffering the Ngx library as a rival, but Ngx is more complete, newer, and even more professional in some cases, so let’s choose this if you don’t need much.

Ngx-bootstrap

This recent UI kit designed by Valor Software is becoming rapidly popular and lives on the “Develop faster and better” motto. Could sound like an Ng-bootstrap clone and it could be considered something similar, but the truth is that this one is completely redesigned and provides better features and advanced components.

Supports Bootstrap 3, 4, and even the 5th version proving that this library provides a good supporting community and that is often updated.

Pic courtesy: betterprogramming.pub

Pros

• It’s bootstrap-like but more advanced
• Very good documentation
• Multiple modules, not monolithic
• Got specific components out of Bootstrap, like “Rating”
• Very stable, even on advanced components

Cons

• The look-and-feel is essential, requires custom CSS rules
• Sometimes it’s hard to understand what’s real Ngx and what’s not, because the term Ngx is today adopted by many other libraries and components

Verdict

To me, Ngx is the best Bootstrap-based UI Kit. Very solid, very comprehensive documentation, and never had issues. Consider this one to be the basic standard for modern web apps. If you miss something, just integrate. This is a real bootstrap to me.

MDBootstrap

Yet another Bootstrap-based UI kit, MDBootstrap is a HUGE kit and is almost the quintessential of UI components for Angular, providing really everything for any need.

It’s the only one that comes with a CLI, premium support, and which looks like a “professional” tool. But other than that the result is not much satisfying. I found it really messy, really heavy, and hard to set up.

Pic courtesy: betterprogramming.pub

Pros

• Probably the biggest one in terms of the number of components
• Good esthetic feel, way better than the basic bootstrap
• Looks good if you need a premium UI Kit
• Provides external services: hosting and a tool for building
• MDB Pro version available (required in some cases)
• Multiple modules, not monolithic… but in this case not much effective in terms of performances
• Available also for Vue.js and React

Cons

• Looks “heavy”
• Hard to understand because of its complexity, need some time be mastered
• Looks like a commercial product

Verdict

I’ve had a brief experience with this and it just didn’t fit my needings. Could be a good choice if you want to invest some time to really understand it and to adopt it as a “company standard” development process, not really suited for spare developers or Open source projects. Too complex and too less immediate, it feels like working with a “big Java framework” more than a UI Kit for angular.

Carbon Components for Angular

The IBM’s solution for Front end needings: this UI kit looks enterprise, professional, and even beautiful. Carbon didn’t become a real breakthrough in the UI kits panorama and competition, but it’s worth trying.

The documentation is superb, covering really a lot of aspects about components implementations.

Pic courtesy: betterprogramming.pub

Pros

• Professional tool, supported by IBM
• Exhaustive documentation with live examples
• Multiple modules, not monolithic
• Built-in Design patterns and approaches

Cons

• Too much professionalism for some B2C needings
• Not much popular… will you solve your issues?
• Requires good skills

Verdict

The Carbon IBM’s solution looks very fascinating and charming but must be considered an advanced tool which could not suit your needings. There are many projects where you really don’t need that much technique and its complexity will force you to spend some hours to really understand approaches and mechanisms. Give it a try if you need an enterprise tool.

For more information and to develop web applications using Angular, Hire Angular Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop your custom web app using Angular, please visit our technology page.

Content Source:

1. betterprogramming.pub

How to make your site 25x faster

Organic traffic is a great way to get eyeballs on your website and Google is the most popular search engine of choice that you can use to get that organic traffic coming.

Although Google ranks your site based on a lot of metrics, how fast your website loads is one of the critical factors.

Websites that load quickly are not just great for rankings but also for the overall user experience.

Since most of us developers( especially indie developers) are using JavaScript frameworks, such as React and Angular, which probably do a client-side rendering of data, the speed at which data is fetched forms an important aspect of the development process.

There is a simple way of making your site load faster, and that is caching and CDN(Content Delivery Network).

Using a combination of both can lead to miraculous drops in time taken to load the first byte.

In this blog, I will demonstrate caching with an example using Redis and also explain what is CDN.

Caching, in layman’s language, is storing data that you think might be used frequently into memory(called cache).

So the next time you need that data, you check whether it’s stored in the memory and if not, then you make a call to the database to fetch it and maybe store it into the cache for future use.

Pic courtesy: javascript.plainenglish.io

As you can see from the image above, caching is simply a layer of a data structure containing frequently accessed data between your data source and the app.

Not all data needs to be cached. For example, a user’s personal setting or shouldn’t be cached on the server. However, you can always store them in the client’s local storage for faster access.

Caching of data is one of the simplest ways to reduce the load time, at the same time, you have to be smart about how you cache your data.

What should you cache?

As stated before, frequently accessed data should be cached to provide a responsive and quick experience.

Different developers have different caching strategies depending on their preferences and needs. If you want me to cover various common caching strategies, then drop a response to this blog.

Below are some examples of items that you should cache:

Authorization & Session Tokens

Landing page data that doesn’t change often(such as recent projects in a portfolio site).

Blog and post drafts can be stored in cache for a while and then inserted into the database after a fixed amount of time.

Real-time comment streams & analytics.

Why Redis?

Although you are free to use whatever option you are comfortable with, I highly recommend at least checking Redis out.

Redis is an open-sourced in-memory data structure store that has familiar data types such as lists, dictionaries, strings, hashes, etc.

It is a key-value data store with extended abilities such as the ability to set expiry dates.

Redis is the most loved database as per the Stack Overflow 2021 survey.

AWS’s MemoryDB for Redis is a great choice if you need a durable transactional log that stores data across multiple Availability Zones.

Installation

Installing Redis is incredibly straightforward if you are on Linux.

Head over to the Redis download page and download the latest stable version available or you can simply run the following command in your terminal:

sudo apt-get install redis

Once you are done installing Redis, simply type redis-server to spin up a Redis server. The default port of this server is port 6379.

However, if you are on Windows, there are two options.

You can either follow the simple guide on how to install an outdated Redis on your Windows machine or you can use Windows Subsystem for Linux(WSL) and get the latest Redis.

I personally went with the WSL way and it created an Ubuntu 20.04 system for me to install Redis and any other packages I might need in the future.

Usage

There are plenty of guides available online on how to get started with Redis, hence I will just be providing a demo of what Redis can do to speed up your website.

I will be creating a simple Node.js server that fetches some data from the web and then sends them to its clients and later we will be adding caching to it and see the massive difference.

Below is a server that simply fetches the data from a data source and then passes it along to the client.

const express = require('express');
const app = express();
const redis = require('redis');

const fetch = require('cross-fetch');

const cacheClient = redis.createClient();
app.get('/', async (req, res, next) => {
        await fetch('https://jsonplaceholder.typicode.com/photos')
        .then(response => response.json())
        .then(json => {
            console.log('Newly fetched data')
            return res.json({ data: json });
        })
});
app.listen(3000, () => console.log('listening on port 3000'));

You can see the response time in the image attached below:

Pic courtesy: javascript.plainenglish.io

Now we will implement caching using Redis.

First of all, we need an npm package.

npm i --save redis

Once this is installed, we will import it into our server.js file & create a client.

const redis = require('redis');
const cacheClient = redis.createClient(); // => Redis client

We need to edit our app.get() function and add caching logic to it.

It’s simple if-else logic. We first check if the data is present in our Redis server or not by calling the Redis client and using the .get() to get data.

If the data is not present, then we make a call to our data source to get fresh data. We insert this data into our Redis store by calling the .setex() function on our Redis client.

cacheClient.setex('sample',60,JSON.stringify(json));

The first parameter is the name(key) of the data we want to store, followed by the time to expire, and then finally the actual data(value) goes in as the third parameter.

We are using JSON.stringify() method to convert our JSON data to a string data type.

With the data stored in the Redis store, the next time the app.get(‘/’) function is called, the client will be able to fetch the data from the Redis server instead of fetching from our original data source.

Pic courtesy: javascript.plainenglish.io

With this implemented, we can instantly see amazing results as the time taken is just 52ms compared to 1301ms from before.

This was a very simplistic view of caching and Redis is capable of much more than caching and can even be used as a permanent storage option.

Our final server.js file will look like this:

const express = require('express')
const app = express();
const redis = require('redis');
const fetch = require('cross-fetch');
const cacheClient = redis.createClient();
app.get('/', async (req, res, next) => {
await cacheClient.get('sample', async (err, data) => {
        if (err) console.error(err);
        if (data) {
            console.log('Data was cached before')
            return res.json({ data: JSON.parse(data) });
        }
        else
          await fetch('https://jsonplaceholder.typicode.com/photos')
                .then(response => response.json())
                .then(json => {
                    console.log('Newly fetched data')
                    cacheClient.setex('sample',
                        60,
                        JSON.stringify(json));
           return res.json({ data: json });
        })
})
});
app.listen(3000, () => console.log('listening on port 3000'));

Content Delivery Network(CDN)

Caching data on the server is surely a great improvement but what about caching large HTML, video & image files?

CDN provides a simple solution to this issue. It is important to know that CDN and caching are not the same.

While CDN does cache content, not everything that cache data can be called a CDN.

CDN refers to a geographically distributed group of servers that work together to provide fast delivery of sites & other assets(like image & video files).

Popular sites such as Netflix and Facebook leverage the benefits of the CDN and deliver content quickly to you using the nearest group of servers near you.

Pic courtesy: javascript.plainenglish.io

CDN stores a cached copy of your content in multiple locations throughout the world.

So if someone from Australia visits your UK-hosted site, they will instead visit the nearest CDN server available to Australia and get a cached copy of your UK-hosted site.

This also saves bandwidth costs and increases reliability & uptime.

In some platforms and hosts, a CDN is at your disposal by default, and generally, using it is as simple as adding a header to your HTML file.

Personally, in my experience, I have found Vercel’s CDN to be the simplest to use with a good, detailed guide with a useful feature that prevents your data from being stale(outdated).

In Vercel, you just need to add a header to inform the CDN that the site needs to be cached. An example header is given below:

Cache-Control: s-maxage=1

It is worth noting that any data that you load client side will not be included in your site’s cached CDN copy. This is because the data is loaded dynamically on the client-side and not server-rendered.

However, you can always cache the data that is being loaded on the client-side via Redis, CDN, or any other option available to make the dynamic loading faster.

For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop your custom web app using JavaScript, please visit our technology page.

1. javascript.plainenglish.io

Top 5 JavaScript trends to adopt in 2021

As the world leans more towards digital technologies, as more businesses focus on online and physical presence, and as content continues to dominate, web development becomes even more essential.

Accordingly, one of the best programming languages for better frontend development is JavaScript. That’s why, today, we want to show you some of the top JavaScript trends that can help boost your web application’s success.

Dark Mode

Dark mode has been one of the recent web development trends that have been blowing up everywhere. As a result, almost all popular apps can switch to a dark mode or stick with the standard light mode.

Moreover, since it uses less color and brightness, the dark mode also helps preserve the battery and makes it last longer. Some people also claim that dark selection can be beneficial for specific visual impairments. For web designers, the dark mode also allows them to use colors more creatively, as the black background of the dark option can help colors stand out even more.

Using this script snippet results in the widget appearing on your site automatically so that users can conveniently switch between their preferred themes. The plugin is relatively lightweight, and since it uses local storage, it will remember and save the last chosen theme.

React

Another JavaScript trend that remains on top for a few years and is gradually garnering more popularity is React.js. React is an open source, frontend, and entirely free JavaScript library for developing smooth and effective user interfaces, especially for single-page apps.

Facebook developed the React library several years ago and has built it into one of the most popular JavaScript libraries for frontend developers. In 2020, 80% of front-end developers were using React only. In addition, many companies like WhatsApp and Airbnb have taken on this library as well.

The reason behind this is that React offers a lot of convenience and benefits for today’s developers. The programming library is easy to learn and even easier to use. It comes with many tutorials and documents explaining how to utilize the library best.

If you are already skilled in JavaScript, picking up React will be no trouble at all, and you will find yourself easily using it within a few days. React also comes with a lot of reusable components, which are a lifesaver for any developer.

The JavaScript framework uses small user interface components, which you can use to create more prominent parts or reuse again to save your time and efforts. All the pieces have their logic, and they can control their rendering, which allows you to use them again wherever and whenever you need them quickly.

Convenience is important to me. It helps me navigate the flow more efficiently. How about you?

All this makes it easy to develop and maintain apps. In addition, since you are reusing the same essential components, you can keep your projects’ same feel and look. Other popular libraries besides React include Angular, Vue, and Svelte.

Animations

A better user experience does not just include a smooth and fast website. It also contains a unique and creatively designed website and what better way to show off your creativity than through animations.

Animations can make your website visually striking and keep visitors hooked on your page. They can help differentiate your website from all the usual static websites. If you think you need to go out and do some special courses on animation, we’ve got some good news.

JavaScript has several libraries that allow you to integrate animations on your website easily. These libraries include anime.js and JSTweener. You can input these into your website code, customize the code, and voila! Your animations are ready.

Data Visualization

Especially if you are running a business or have a product checkout page on your website, employing data visualization tools can significantly help you in many ways. First, it can improve the user interface and experience by filling out fields quickly and accurately.

As a result, the whole checkout experience for visitors and potential customers becomes much more accessible and makes them more willing to follow through on their purchases. Due to all these benefits, data visualization is a big trend within JavaScript for business and marketing purposes.

All you need is a little <input />

One specific library that is quite useful is Algolia Places. It allows you to create much more efficient forms, which help inaccurate data input and quick form filling. In addition, you can incorporate a map that will conveniently display a specific location for better data visualization.

Algolia Places uses OpenStreetMap’s extensive database and is incredibly fast to use. In addition, it can handle some typing mistakes and simplifies the entire checkout process for users.

Full-Screen Videos

Incorporating full-screen videos on your webpage is one of the most popular JavaScript trends developers utilize these days. Again, rather than creating an essential static website, incorporating dynamic videos and GIFs can help make your website more interactive and offer a better user experience.

A better user experience, then, can help drive more traffic to your website, making it easy to push your content, raise awareness about your brand and increase your ROI for your marketing and business objectives. But, how can you add full-screen videos to your website?

JavaScript offers a great resource: Bideo.js. This library makes it super easy to add full-screen videos to your website’s background. While it takes a while to load, you do not have to write endless code to incorporate the video smoothly.

The library has everything you need to add the videos along with several customization options quickly. The code works great for screens of all sizes and various platforms as well. This JavaScript tool can help play high-quality and engaging videos smoothly in the background, whether a computer or mobile. You can resize the video according to the browser, and it is also easy to implement using CSS or HTML.

For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop your custom web app using JavaScript, please visit our technology page.

1. betterprogramming.pub

Laravel Forge CLI

Laravel Forge launched their first official command-line tool that gives you a nice set of commands to manage your Forge servers, sites, and more.

The first release (v1.0) of the Forge CLI contains around thirty commands, including initiating deployments, viewing application logs, configuring SSH key authentication, and more.

Installation

You may install the Forge CLI as a global Composer dependency:

composer global require laravel/forge-cli

After it’s installed you can forge from your terminal and see usage:

Pic courtesy: https://laravel-news.com/

Get Started

To view a list of all available Forge CLI commands and view the current version of your installation, you may run the forge command from the command-line:

forge

Authenticating

You will need to generate an API token to interact with the Forge CLI. Tokens are used to authenticate your account without providing personal details. API tokens can be created from Forge’s API dashboard (opens new window).

After you have generated an API token, you should authenticate with your Forge account using the login command:

forge login

Current Server & Switching Servers

When managing Forge servers, sites, and resources via the CLI, you will need to be aware of your currently active server. You may view your current server using the server:current command. Typically, most of the commands you execute using the Forge CLI will be executed against the active server.

forge server:current

Of course, you may switch your active server at any time. To change your active server, use the server:switch command:

forge server:switch
forge server:switch staging

To view a list of all available servers, you may use the server:list command:

forge server:list

SSH Key Authentication

Before performing any tasks using the Forge CLI, you should ensure that you have added an SSH key for the forge user to your servers so that you can securely connect to them. You may have already done this via the Forge UI. You may test that SSH is configured correctly by running the ssh:test command:

forge ssh:test

To configure SSH key authentication, you may use the ssh:configure command. The ssh:configure command accepts a --key option which instructs the CLI which public key to add to the server. In addition, you may provide a --name option to specify the name that should be assigned to the key:

forge ssh:configure
forge ssh:configure --key=/path/to/public/key.pub --name=sallys-macbook

After you have configured SSH key authentication, you may use the ssh command to create a secure connection to your server:

forge ssh
forge ssh server-name

Sites

To view the list of all available sites, you may use the site:list command:

forge site:list

Initiating Deployments

One of the primary features of Laravel Forge is deployments. Deployments may be initiated via the Forge CLI using the deploy command:

forge deploy
forge deploy example.com

Updating Environment Variables

You may update a site’s environment variables using the env:pull and env:push commands. The env:pull command may be used to pull down an environment file for a given site:

forge env:pull
forge env:pull pestphp.com
forge env:pull pestphp.com .env

Once this command has been executed the site’s environment file will be placed in your current directory. To update the site’s environment variables, simply open and edit this file. When you are done editing the variables, use the env:push command to push the variables back to your site:

forge env:push
forge env:push pestphp.com
forge env:push pestphp.com .env

If your site is utilizing Laravel’s “configuration caching” feature or has queue workers, the new variables will not be utilized until the site is deployed again.

Viewing Application Logs

You may also view a site’s logs directly from the command-line. To do so, use the site:logs command:

forge site:logs
forge site:logs --follow              # View logs in realtime

forge site:logs example.com
forge site:logs example.com --follow  # View logs in realtime

Reviewing Deployment Output / Logs

When a deployment fails, you may review the output / logs via the Forge UI’s deployment history screen. You may also review the output at any time on the command-line using the deploy:logs command. If the deploy:logs command is called with no additional arguments, the logs for the latest deployment will be displayed. Or, you may pass the deployment ID to the deploy:logs command to display the logs for a particular deployment:

forge deploy:logs
forge deploy:logs 12345

Running Commands

Sometimes you may wish to run an arbitrary shell command against a site. The command command will prompt you for the command you would like to run. The command will be run relative to the site’s root directory.

forge command
forge command example.com
forge command example.com --command="php artisan inspire"

Tinker

As you may know, all Laravel applications include “Tinker” by default. To enter a Tinker environment on a remote server using the Forge CLI, run the tinker command:

forge tinker
forge tinker example.com

Resources

Forge provisions servers with a variety of resources and additional software, such as Nginx, MySQL, etc. You may use the Forge CLI to perform common actions on those resources.

Checking Resource Status

To check the current status of a resource, you may use the {resource}:status command:

forge daemon:status
forge database:status

forge nginx:status

forge php:status      # View PHP logs (default PHP version)
forge php:status 8.0  # View PHP 8.0 logs

Viewing Resources Logs

You may also view logs directly from the command-line. To do so, use the {resource}:logs command:

forge daemon:logs
forge daemon:logs --follow  # View logs in realtime

forge database:logs

forge nginx:logs         # View error logs
forge nginx:logs access  # View access logs

forge php:logs           # View PHP logs (default PHP version)
forge php:logs 8.0       # View PHP 8.0 logs

Restarting Resources

Resources may be restarted using the {resource}:restart command:

forge daemon:restart

forge database:restart

forge nginx:restart

forge php:restart      # Restarts PHP (default PHP version)
forge php:restart 8.0  # Restarts PHP 8.0

Connecting To Resources Locally

You may use the {resource}:shell command to quickly access a command line shell that lets you interact with a given resource:

forge database:shell
forge database:shell my-database-name
forge database:shell my-database-name --user=my-user

For more information and to develop web applications using Laravel, Hire Laravel Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop custom web apps using Laravel, please visit our technology page.

Content Source:

1. laravel-news.com
2. forge.laravel.com

7 useful JavaScript shorthands you must know about

JavaScript is a very powerful programming language these days. There is a lot that you can do with it. In addition to that, JavaScript has a huge ecosystem that allows you to discover a lot of useful tools, frameworks, and libraries.

JavaScript has a lot of powerful features and tools that make the life of the developer much easier. The syntax contains a lot of shorthands that you can use to write JavaScript code much faster and reduce lines. Especially in the latest ECMAScript specifications.

In this article, we will give you a list of shorthands that you can use in JavaScript. So let’s get right into it.

1. Convert string to a number

Normally, to convert a string to a number, we use the method parseInt() . However, there is a shorthand that allows us to do that.

By using the unary operator + , we can easily convert a string into a number.

Here is an example:

let speed = "60";

console.log(typeof speed); //string

console.log(typeof +speed); //number

console.log(+speed); //60, not "60".

As you can see, only by adding + at the beginning of the variable speed , we were able to convert the speed to a number.

There is also another shorthand to convert from a number into a string. It’s by simply adding an empty string to the number.

Here is an example:

let speed = 100;

speed += ""; //returns "100" , not 100.

console.log(typeof speed); //string

2. Using the ternary operator

Another shorthand is the ternary operator, it allows us to easily write conditional statements in a short way using the keywords ? and : .

Here is an example using IF else statements:

Longhand:

let speed = 80;

if(speed < 30){

 console.log('slow');

}else if(speed > 60){

 console.log('fast');

}else{

 console.log('between 30 and 60');

}

//output: fast

Here is the same example, but now using the ternary operator instead:

Shorthand:

let speed = 80;

console.log(speed < 30 ? 'slow': speed > 60 ? 'fast'
: 'between 30 & 60');

//output: fast

As you can see, by using the ternary operator shorthand, we were able to easily reduce the amount of code we had to write. It only took us 2 lines of code to write the conditional statements.

3. Short-circuit evaluation

Have a look at the below example using an IF statement.

Longhand:

let isOnline = true;

if(isOnline){
 console.log("Online");
}

//returns "online"

We can write the same statement using the short circuit && . Here is the example:

Shorthand:

let isOnline = true;

isOnline && console.log("Online"); //returns "online"

The short circuit evaluation && is one of the shorthands that allow you to write short conditionals. It’s used between two values, if the first value is truthy, it returns the second value. Otherwise, it returns the first value.

4. Flattening an array

The best shorthand to flatten a multidimensional array is by using the method flat(). We have seen, a lot of developers use the method filter, concat, and all other long ways to flatten an array. Maybe because they don’t know about the flat method yet.

So this amazing method allows you to flatten an array in one single line of code. It accepts one optional argument(number), which is the level of flattening(how deep you want to flatten an array).

Here is an example:

let numbers = [9, [102, 5], [6, 3], 2];

numbers.flat(); //returns [9, 102, 5, 6, 3, 2]

5. Merging and cloning arrays

When it comes to merging and cloning arrays in JavaScript, the spread operator {…} is the best shorthand you can use.

Merging arrays:

const employees = ["Chris", "John"];

const entrepreneurs = ["James", "Anna"];

//merging both arrays to a new array.

const all = [...employees, ...entrepreneurs];

console.log(all); //output: ["Chris", "John", "James", "Anna"]

Cloning an array:

const numbers = [4, 8, 9, 0];

//cloning the numbers array.

const clone = [...numbers];

console.log(clone); //output: [4, 8, 9, 0]

6. For loop shorthand

Mostly when we want to loop through an array using a for loop, we do it like this:

Longhand:

const users = ["John", "Chris", "Mehdi", "James"];

for(let i = 0; i < users.length; i++){
   console.log(users[i]);
}

/*output:
   John
   Chris
   Mehdi
   James
*/

But we can achieve the same thing using the loop for of shorthand:

Shorthand:

const users = ["John", "Chris", "Mehdi", "James"];

for (let user of users){
  console.log(user);
}

/*output:
   John
   Chris
   Mehdi
   James*/

7. Arrow functions

Arrow functions are a shorthand that allows you to easily write functions in a short way and reduce your code.

Here are the examples:

Normal function:

function addNums(x, y){
 return x + y;
}

addNums(6, 5); //11

Arrow function:

const addNums = (x, y)=> x + y;

addNums(6, 5); //11

As you can see, these are some of the popular shorthands that you can use in JavaScript. They allow you to reduce code syntax and keep your code short as much as you can.

For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop your custom web app using JavaScript, please visit our technology page.

1. medium.com

The best JavaScript practices to make your code look and work better

We always say that JavaScript is full of surprises. It never fails to amaze us. Every day, we learn something new about this programming language. Something which is very small but can make a huge impact on your code. Something which is worth sharing.

In this article, we’re going to share eight JavaScript hacks that you can use in your day-to-day stuff. So let’s learn something new!

1. Run Event Listeners Only Once

It’s very common to use event listeners in your web app, not just in Vanilla JS applications, but also in modern JS frameworks and libraries like Angular and React.

To cite an example, let’s say we want to do something on a button click. We can use event listeners here. Often, we want to act whenever a specific event fires. But what if we want to do it only once?

Not to worry. We can actually execute our event listeners only once by simply doing this:

const button = document.querySelector('button');

button.addEventListener('click', () => {

    console.log('We will only run once');

},{ once: true })

2. Use the ‘defer’ Attribute

To be honest, all of us have faced a situation where we felt like our web application is getting slower and we are not able to find out why. We’ve felt like we are doing everything as it should be, but still the browser is taking time to show the first content of our application.

Well, this might be because of long scripts getting executed before HTML. Often, we add our scripts inand we forgot that the next statements will not be executed until the script in <HEAD> finishes its execution.

We can simply use the defer attribute with our scripts to execute them after the HTML content.

/* No matter where you place this script tag inside the HTML, this will only run when the HTML content is completely loaded. */

<script src="main.js" defer></script>

3. Fast Conditional Checking

It’s always recommended to use shorthand to make our code look cleaner. As no application can survive without conditionals like the if statement, we should know the shortcuts for that, too. And thankfully, JavaScript provides the && operator.

We can shorten our conditional checking by using the && operator.

let condition = true;
// Long way
if (condition) {
    someFunction();
}
// Short way
condition && someFunction();

4. Random Number in a Given Range

We can simply generate a random number from a given range with just one line of code. These kinds of tricks are very useful in real-world applications.

function randomNumber(num1, num2) {
    return Math.random() * (num2 - num1) + num1;
}

console.log(randomNumber(50, 100)); // Expected output - random number between 50 and 100 (50 and 100 will be inclusive)

5. Empty an Array in One Line

This is one of the hacks which We love the most. We can empty an array just by giving the value 0 to its length property.

let sampleArray = ["John", "Bob", "Mark", "Alex"];
sampleArray.length = 0;
console.log(sampleArray); // Output - [] (it's empty now)

6. Check Whether the Object Is Empty

We can use the Object.entries() method to check whether an object is empty or not. Since Object.entries() returns the array of the object’s enumerable properties, therefore if the length of that array is 0, that means the object is empty such that the object has 0 property.

let sampleObj = {
    name: "Mark",
    occupation: "Developer"
};
let emptyObj = {};
console.log(Object.entries(sampleObj).length === 0); // false
console.log(Object.entries(emptyObj).length === 0); // false

7. Filter Duplicate Values From Array

From ES6, we have a new concept in JavaScript which is called Set.

"Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection." — MDN Docs

Since Set in JavaScript is a collection of items that are unique, i.e., no element can be repeated, therefore we can use it to filter duplicate values from an array.

This trick is again very simple but very useful. First, we will convert our array into Set, and as Set doesn’t have duplicate values, our new Set will have unique values from our array. Then we simply convert this new Set back into an array.

	let namesArray = ["John", "Bob", "Mark", "Alex", "Mark", "Alain", "Bob"];
	console.log([...new Set(namesArray)]); // Output - ["John", "Bob", "Mark", "Alex", "Alain"]

8. Clone Object Using One Line

Since objects in JavaScript are reference types, we can’t simply use = to clone them, so with the below three methods, you can properly clone an object using just one line.

const person = {
    name: "Mark",
    username: "@markcodes"
};
// Using Object.assign() Method
const clonePerson1 = Object.assign({}, person);
// Using JSON
const clonePerson2 = JSON.parse(JSON.stringify(person));
// Using Spread Operator
const clonePerson3 = { ...person };

For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop your custom web app using JavaScript, please visit our technology page.

1. betterprogramming.pub