Front-End

Carbon – A new programming language by Google

Everyone knows Google’s obsession with creating different frameworks and launching a few programming languages. Dart was one of the programming languages launched by Google which was object-oriented and a web-based programming language.

Dart programming language didn’t gain a huge response from the developers and hence it never got the position of mainstream programming language. Many programmers prefer C++ and JavaScript over Dart due to their strong background.

One programming language named GO gained quite impressive among developers and GO. GO or GoLang was statically typed and explicit. It was a general-purpose programming language that was similar to the C programming language.

Now Google is all set to launch a new programming language called Carbon programming language. Carbon Language could serve as a successor language to C++, one that provides a simple starting point for developers to a newer language that addresses contemporary development concepts like memory safety and generics.

This would be similar to how Microsoft built Typescript to update JavaScript and Kotlin to strengthen weaknesses in Java. The language was recently unveiled at the CPP North conference in Toronto by Google developer Chandler Carruth.

C++ works, but what’s the problem?

C++ has been around the block for much longer than some of us have been alive. Developed in 1982 and released in 1985, C++ has found its way into operating systems, browsers, and games.

While C++ is not the coolest kid to learn (unless you want to go down the game dev track), but it still holds a strong foothold for applications that requires performance, speed, and is a bit strapped with resource availability.

In a nutshell, C++ is a general-purpose programming language that has all the usual bells and whistles such as classes and objects, abstraction, encapsulation, polymorphism, and inheritance. It’s strongly typed, case sensitive, uses pointers, and has a massive functions library.

So, what’s wrong with C++ ?

The general criticism of C++ is that it leans towards being overly complex. IntelliSense generally sucks, no support for first-class functions and tuples, and initializer lists are considered a ‘hack’. In addition to this, there are a few quirks like duplicate syntax and operators such as the & being both a logical operator and a reference.

Then there’s the issue of each compiler vendor making up their own names and prevents linking modules from different compilers.

There’s a bag full of other problems but in short, C++ works but it has its issues.

Carbon Programming Language: An Experimental Successor To C++

Given the context, it seems reasonable to think of a new purpose-driven language that builds on the six goals for C++ and adds one more:

• Performance-critical software
• Software and language evolution
• Code that is easy to read, understand, and write
• Practical safety and testing mechanisms
• Fast and scalable development
• Modern OS platforms, hardware architectures, and environments
• Interoperability with and migration from existing C++ code

What Are The Promises Of Carbon?

Starting from the difficulties experienced in the language and in the governance, Carbon adopts a different approach for both areas.

Language

Carbon wants to start from scratch including:

• modern generics system,
• modular code organization,
• simple syntax.

Carbon wants to be “a successor language […], rather than an attempt to incrementally evolve C++”, carbon-lang.

For this reason, it gave up on transparent backward compatibility while remaining interoperable with and migratable from C++.

Governance

Carbon wants to be more inclusive by:

• Building on open-source principles, processes, and tools. Contributing is easier and more transparent.
• Having a clear governance structure that can make decisions rapidly when needed.
• Expanding the ecosystem with tools that provide a rich developer experience (compiler, standard library, IDE tools), and tool-based upgrades
• Bridging a gap in the C++ ecosystem with a built-in package manager.

Carbon: The Language

As stated in the Goals, “Carbon is an experiment to explore a possible, distant future for the C++ programming language designed around a specific set of goals, priorities, and use cases”.

Syntax

Among the presented features, it is worth mentioning:

• Introducer keywords:fn for function, var for variable declarations
• Function input parameters are read-only values
• Pointers provide indirect access and mutation
• Expressions to name type
• The namespace at the root is always local
• Public members by default. The reasoning seems to be that since you will mostly read the public functions in your API, it makes sense to expose them.
• Type checking generics

This list is by no means complete but it gives an overview of some characteristics of the language.

So, when’s the full release?

Currently, Carbon is in an experimental phase. The current roadmap is as follows:

• Release of a core working version (0.1) by end of 2022
• 0.2 in 2023
• Full 1.0 release in 2024–2025

That’s basically it for now. The documentation for Carbon is generally succinct and accessible — even to those who are not C++ developers.

Overall, it should be interesting how Google pushes Carbon once it’s fully ready. Will it be linked to all the metaverse stuff that’s up and coming everywhere? (Sort of like how Kotlin got pushed through Android development to replace Java) Or perhaps it will be linked to Android-based game development?

Whatever the future, Carbon is coming. How it plays out, we will probably find out in a few years’ time.

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.

Content Source:

• medium.com

The most useful Frontend coding tips and Database concepts

Frontend development is very important these days. There are a lot of tasks that a frontend developer has to do on a daily basis.

As front-end developers, we write a lot of HTML, CSS, and JavaScript code all the time. Knowing some coding tips could be very beneficial for us. That’s why in this article, I decided to share with you some frontend coding tips that you probably don’t know.

Hiding an HTML element

Do you know that you can hide an HTML element without using JavaScript?

By using the attribute hidden, you can easily hide an HTML element natively. As a result, that element won’t be displayed on the web page.

Here is the code example:

<p hidden>This paragraph won't show up. It's hidden by HTML.</p>

Use the inset shorthand in CSS

It’s always a good practice to use shorthands in order to make your CSS code smaller. The property inset in CSS is a useful shorthand for the four properties top , left , right , and bottom .

If these four properties have the same value, you can just use the property inset instead and your code will look much cleaner.

Here is an example:

Bad practice:

div{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Good practice:

div{
  position: absolute;
  inset: 0;
}

Detect internet speed

You can easily detect internet speed in JavaScript by using the navigator object. It’s very simple.

Here is an example:

navigator.connection.downlink;

Pic courtesy: blog.devgenius.io

As you can see above, it gives me 5.65 since my internet speed is not good at all.

Vibrate your phone

Again, you can easily use the method vibrate()in the navigator object to vibrate your phone.

Here is an example:

//vibrating the device for 500 milliseconds

window.navigator.vibrate(500);

So as you can see, the device in this situation will vibrate for 500 milliseconds.

Disable pull to refresh

By using only CSS, you can disable pull to refresh on mobile. The property overscroll-behavior-y allows us to do that. Just give it the value contain .

Here is the example:

body{
 overscroll-behavior-y: contain;
}

Prevent the user from pasting text

There will be situations where you will need to prevent the user from pasting text into inputs.

Well, you can easily do that in JavaScript using a paste event listener.

Here is an example:

<input type="text"></input>
<script>
//selecting the input.
  const input = document.querySelector('input');
  
//prevent the user to paste text by using the paste eventListener.
  input.addEventListener("paste", function(e){
    e.preventDefault()
  })
  
</script>

As a result, now users can’t paste the copied text into the input field.

Database Concepts

Databases are the backbone of our applications, and the more you learn about how they work, the better you will be at using them, writing applications against them, and troubleshooting problems when things inevitably go wrong.
So let’s dive into seven things you should (probably) know about databases.

Choosing the Right Database Is Hard

We’ve seen a lot of dogmatic fist-banging about “the best” or “the worst” database, but the truth is the best database is the one that works best for your application. There’s no one-size-fits-all sort of database just like there’s no one-size-fits-all programming language or operating system.

When starting a new project, choosing the right database can be one of the most crucial decisions that you’ll make. So how should you choose which DB to use? We put together a list of five things to consider in our article on databases for developers, but let us also quickly go through them here.

What kind of data will be stored in the database?

Are you storing log files or user accounts?

How complex is the data that will be stored?

Can the data be normalized easily?

How uniform is the data?

Does your data roughly follow the same schema or is it disparate or heavily nested?

How often will it need to be read or written?

Is your application read- or write-heavy, or both?

Are there environmental or business considerations?

Do we have existing agreements with vendors? Do I need vendor support?

By answering these questions, you can help narrow down your choices to a few candidates. Once there, testing should tell you which one is the best for your application.

Moving to the Right Database Is Harder

Sometimes you don’t have a choice and the database is already chosen for you. Whether you came to the project after it was started or political winds forced you a certain way, using the wrong database for the job can be frustrating.

But equally, if not more, frustrating is the progress of migrating databases should you get the opportunity. Once you start down one path, it’s not easy to simply change paths in the middle of things. Not only do you have to figure out a way to replicate your data from one database to another and learn a whole new system, but depending on how tightly coupled your database code is with the rest of your application, you might also be looking at extensive rewrites as well. Changing databases is not a task that should be undertaken lightly and without a lot of consideration, debate, testing, and planning. There are so many ways that things can go horribly wrong. This is why #2 is so important: Once you choose, it’s hard to undo that choice.

NoSQL Doesn’t Replace SQL, It Complements It

The debate about using a SQL or NoSQL database will go on forever. We get that. But often missed in this argument is the fact that NoSQL databases don’t replace SQL databases. They complement them.

There are some things that NoSQL databases do very well and there are some things that SQL databases do very well. Prometheus is very good at storing time-series data like metrics, but you wouldn’t want to use MySQL for that. Is it technically possible? Yes, but it’s not designed for that and you’re not going to get the best performance or developer experience out of it. On the flip side, you wouldn’t want to use Redis to store highly relational data like user accounts or financial transactions for the same reasons. Sure, you could make it work in the code, but why add that complexity and headache when you could just use the right tool for the job?

There is going to be some inevitable overlap in some areas. There are some excellent databases that are technically NoSQL that do a good job of storing relational data (see: Couchbase), but there are other outside factors that go into using one over the other. Factors like client language support, operational tooling, cloud support, and others are all things to take into account when choosing a database.

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.

Content Source:

1. blog.devgenius.io
2. betterprogramming.pub

9 hidden features of Chrome DevTools

Web developers love nothing more than finding amazing extensions that accelerate the development process.

One such tool is Chrome DevTools, which offers a lot of features and it is the go-to tool for frontend developers, of all levels.

DevTools has a wide array of features and options, and Google has done a fantastic job documenting this tool.

However, despite the comprehensive documentation, there is still a list of helpful tools and features that most developers don’t know about.

From emulating mobile devices to finding useless JavaScript code, we’ll be covering 9 secret features the DevTools has to offer in this blog.

#1. Controlling Network Speed

Your website will be accessed by people from around the globe using devices of different sizes and platforms.

You can build websites that are responsive using media queries, but what about network speed?

Not every one of your visitors will have the same network speed, hence you need to check how your site behaves with different network speeds.

Luckily, DevTools has the option to switch between 3 network presets:

• Fast 3G
• Slow 3G
• Offline

Pic courtesy: javascript.plainenglish.io

You also get the ability to add a custom profile.

You can find this feature under the Network tab, by clicking on the “No throttling” dropdown menu.

#2. Multi Cursor

Pic courtesy: javascript.plainenglish.io

DevTools has an excellent code editor inbuilt.

If you’re someone who edits CSS or any code using this tool, you will absolutely love the multi-cursor support.

It’s very easy to set up as well. All you need to do is press and hold Ctrl( Command on Mac) and click on lines where you want multiple cursors.

You can also undo your selections by pressing and holding Ctrl(Command on Mac) + U.

Moreover, you can also press Alt and drag to get multiple cursors. You can see the implementation here.

#3. Dark Mode

For me, dark mode increases visibility & reduces eye strain. There are many upsides to using dark mode, as well as downsides.

Various articles cover this topic.

Pic courtesy: javascript.plainenglish.io

We use the dark mode wherever possible, from the Twitter app to our calculator app.

DevTools is no exception.

To enable the dark mode, open the Settings by clicking the three vertical dots present in the right corner of the screen.

Then go to Preferences > Appearance > Theme and finally select Dark.

#4. Command Menu

Pic courtesy: javascript.plainenglish.io

You can quickly open a Command Menu by pressing Ctrl(CMD on Mac)+Shift+P when DevTools is opened.

It provides a fast way to navigate the DevTools and over time, you become familiar with it.

This feature is handy if you are familiar with VS Code’s Command Palette.

You can delete the > and replace it with ? to see all the features offered by this menu.

#5. Detecting Unused Code

Pic courtesy: javascript.plainenglish.io

Modern JavaScript apps are becoming increasingly complicated and rely on a ton of third-party libraries.

There’s always some code that’s not used and is rendered redundant.

DevTools helps you locate such redundant code that may unnecessarily be hampering your site speed.

To do so, click the three vertical dots on the top-right corner of DevTools. Then click More Tools and select Coverage.

All you need to now is reload the page and the newly popped up panel will display the unused JavaScript code.

You can see the total bytes as well as the unused bytes along with the visual usage bar.

#6. Auto-Start

If your primary browser is some other browser that doesn’t offer such tools, and you only use Chrome for the Devtools, then this feature can be incredibly useful to you.

Pic courtesy: javascript.plainenglish.io

There is a global option under DevTools settings to auto-open DevTools for popups.

However, the better way of doing this is by starting DevTools not just on popups but with the Chrome browser itself.

You can do so by adding the following line as a property on Google Chrome.

 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs 

And for Mac users,

 --auto-open-devtools-for-tabs 

You can refer to the answers here to learn more options to enable DevTools.

#7. Color Picker

Pic courtesy: javascript.plainenglish.io

Color Picker is a great way to select the exact color you need and be able to easily add it to the CSS of your site.

DevTools offers a color picker and accessing it is a very straightforward process.

Go to the Elements tab and from there select the Styles panel to see the CSS.

Simply click on the color square (not the value) and the color picker will show up.

The color picker has the ability to easily convert between color modes, like from HEX to RGBA.

#8. Mobile Emulator

Pic courtesy: javascript.plainenglish.io

Over 60% of all online searches are performed by mobile devices, making responsive web design a critical part of web development.

Fortunately, DevTools offers a mobile emulator, which has predefined height and width which match that of some popular mobile devices like iPhone, Pixel, Surface, and iPad.

Open DevTools and click the Toggle Device Toolbar as shown in the media above.

You can also choose between mid-tier or low-tier mobile from the “No Throttling” drop-down menu.

Additionally, dragging the handles to resize the viewport is another handy option to get the exact dimensions you need.

#9. Breakpoints

Pic courtesy: javascript.plainenglish.io

Ever wondered how many media queries sites like YouTube have? You can easily check it by enabling the option to see media queries.

Just click the 3 vertical dots as shown in the media above and enable media queries visibility.

You will see a new panel showing various media query breakpoints which you can click to apply.

Besides this, you can also set breakpoints in your JavaScript code quite easily.

One way to do this is by writing debugger in your code, which will pause the execution when debugger is reached.

console.log('a');
console.log('b');
debugger;
console.log('c');

The other way is to go to the Sources tab and then head over to the code file and find the line where you want to pause the execution.

Then you have to click the line number on the left side of your code, which will make a blue icon appear on that line number. That’s it.

DevTools will pause before this line of code is executed.

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.

Content Source:

1. javascript.plainenglish.io

How to write clean API calls with Axios

Making frontend applications is not as simple as it used to be. Frontend frameworks like React and Vue.js rely heavily on APIs. This adds complexity to our app because we need to manage how we call these APIs. One solution is to simplify the process by writing clean API calls.

But wait, what are “clean API calls”? To me, that means the proper structuring of API calls, making them easy to read and maintain. First, we do this by utilizing the single-responsibility principle. Each function must have a single responsibility, and with this principle in mind, we need to separate the logic for each endpoint.

The other thing we try to consider is the DRY principle (“Don’t Repeat Yourself”). This is very important – arguably more so in the case of frontend API providers – because it gives a sense of tidiness in the code, thus improving readability. we use Axios because it gives features such as interceptors, defaults, etc. It reduces the amount of boilerplate code you need to write for each API endpoint.

Pros and Cons of Using Axios

There are many ways to achieve this. You can either use the Fetch API or you can use a third-party library called Axios. By the title of this article, you can guess that we prefer Axios. Why? Let’s weigh in on the pros and cons.

Pro: Simplicity

What we like most about Axios is that it is very simple to use. The programming API is so easy to use that we have gotten really used to it. Well, this might be too personal of a preference, but you can try it yourself. we have used jQuery’s AJAX and the Fetch API, and we would rank Axios above all of them – although not by too large of a margin since all three of them are nice to work with.

Pro: Backward compatibility

Honesty, you wouldn’t think about this feature until you needed it. we mean, most people have modern browsers, but if some of your customers aren’t most people, they might not be able to use your app if it isn’t backward-compatible. The Fetch API is relatively new and old browsers aren’t capable of using it. Otherwise, libraries like Axios and jQuery’s AJAX are built on top of JavaScript’s XMLHttpRequest. For those of you who are wondering, XMLHttpRequest is an old version of JavaScript’s built-in HTTP calling mechanism.

Pro: Mature library with lots of features

You can do a lot with Axios – a whole lot. For example, as of the writing of this article, the Fetch API does not have built-in request/response interceptors. You have to use third parties. Compared to Fetch, writing clean APIs using Axios is very simple. Axios already has so many built-in conveniences. To name a few, you can set default headers and default base URLs using Axios.

Con: Too sophisticated for small apps

we have used Axios for long enough to understand that this library can be overkill for small apps. If you only need to use its GET and POST-APIs, you probably are better off with the Fetch API anyway. Fetch is native to JavaScript, whereas Axios is not. This brings us to the next point.

Con: Axios bloats your bundle size

This second point corresponds to the first one perfectly. One of the main reasons we avoid the use of Axios for small apps is the fact that it bloats your production build size. Sure, you might not notice a size spike for large apps like in e-commerce and such. But you will notice a huge increase if you are making a simple portfolio site. The lesson to be learned? Use the right tools for the right job.

Con: It’s a third party

Look, let me just start by saying that this third point is really subjective and some people might have opposite views. Axios is a third party. Yes, you read that right. Unlike Fetch, it is not native to the browser. You are depending on the community to maintain your precious app. Then again, most apps these days do use open-source products. So would it be a problem? Not really. Again, this is a preference. we are not advising you to reinvent the wheel. Just understand that you don’t own the wheel.

Installing Axios

Axios is available in multiple JavaScript repositories. You can access it using yarn and NPM. If you are using regular HTML, you can import it from CDNs like jsDelivr, Unpkg, or Cloudflare.

Assuming you are using NPM, we need to install Axios using this command:

npm install -S axios

If there are no errors in the installation, you can continue to the next step. You can check alternative installation methods on GitHub.

Making Separate Axios Clients

What are Axios clients? Clients are how we set default parameters for each API call. We set our default values in the Axios clients, then we export the client using JavaScript’s export default. Afterward, we can just reference the client from the rest of our app.

First, make a new file preferably named apiClient.js and import Axios:

import axios from 'axios';

Then make a client using axios.create:

const axiosClient = axios.create({
  baseURL: `https://api.example.com`,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});

As you can see, we initiated the base URLs and default headers for all our HTTP calls.

Using Interceptors for Clean Redirects

When calling interacting APIs – especially when there is authentication involved – you will need to define conditions when your call is unauthorized and make your application react appropriately. Interceptors are perfect for this use case.

Let’s say that we need our application to redirect us to our home page when our cookies expire, and when our cookies expire, the API will return a 401 status code. This is how you would go about it:

axiosClient.interceptors.response.use(
  function (response) {
    return response;
  }, 
  function (error) {
    let res = error.response;
    if (res.status == 401) {
      window.location.href = “https://example.com/login”;
    }
    console.error(“Looks like there was a problem. Status Code: “ + res.status);
    return Promise.reject(error);
  }
);

Simple, right? After you’ve defined your client and attached an interceptor, you just need to export your client to be used on other pages.

Exporting Axios Client

After configuring your Axios client, you need to export it to make it available for the entire project. You can do this by using the export default feature:

export default {
  axiosClient
);

Now we have made our Axios client available for the entire project. Next, we will be making API handlers for each endpoint.

Folder Structure

Before we continue, we thought it would be useful to show you how to arrange your subfolders. Instead of writing a long comprehensive explanation, we think it would be better for me to give you an image of what we are talking about:

How I would arrange my folders. Pic courtesy: betterprogramming.pub

This assumes we will have admin, user, and product endpoints. We will home the apiClient.js file inside the root of the network folder. The naming of the folder or even the structure is just our personal preference.

The endpoints will be put inside a lib folder and separated by concerns in each file. For example, for authentication purposes, user endpoints would be put inside the user file. Product-related endpoints would be put inside the product file.

Writing an API Handler

Now we will be writing the API handler. Each endpoint will have its asynchronous function with custom parameters. All endpoints will use the client we defined earlier. In the example below, we will write two API handlers to get new products and add new products:

import { axiosClient } from "../apiClient";

export function getProduct(){
    return axiosClient.get('/product');
}

export function addProduct(data){
    return axiosClient.post('/product', JSON.stringify(data));
}

This pretty much sums up how we would write an API handler, and as you can see, each API call is clean and it all applies the single-responsibility principle. You can now reference these handlers on your main page.

Using the Handlers in Your Web App

Assuming that you are using an NPM project for all of this, you can easily reference your JavaScript API handlers using the import method. In this case, we will be using the getProduct endpoint:

import { getProduct } from "../network/lib/product";

getProduct()
  .then(function(response){
    // Process response and
    // Do something with the UI;
  });

There you have it: a clean no-fuss API handler. You’ve successfully made your app much more readable and easier to maintain.

For more information and to develop your web app using 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 website using JS, please visit our technology page.

Content Source:

1. betterprogramming.pub

How Promises work in JavaScript

In the current age of JavaScript, Promises are the default way to handle asynchronous behavior in JavaScript. But how do they work? Why should you understand them very well?

A Promise in Real Life

When we make you a promise, you take our word that we will fulfill that promise.

But we don’t tell you when that promise will be fulfilled, so life goes on…

There are two possible scenarios: fulfillment or rejection.

Fulfillment

One day, we fulfill that promise. It makes you so happy that you post about it on Twitter!

Rejection

One day, we tell you that we can’t fulfill the promise.

You make a sad post on Twitter about how we didn’t do what we had promised.

Both scenarios cause an action. The first is a positive one, and the next is a negative one.

Keep this scenario in mind while going through how JavaScript Promises work.

When To Use a Promise

JavaScript is synchronous. It runs from top to bottom. Every line of code below will wait for the execution of the code above it.

But when you want to get data from an API, you don’t know how fast you will get the data back. Rather, you don’t know if you will get the data or an error yet. Errors happen all the time, and those things can’t be planned. But we can be prepared for it.

So when you’re waiting to get a result from the API, your code is blocking the browser. It will freeze the browser. Neither we nor our users are happy about that at all!

Perfect situation for a Promise!

How To Use a Promise

Now that we know that you should use a Promise when you make Ajax requests, we can dive into using Promises. First, we will show you how to define a function that returns a Promise. Then, we will dive into how you can use a function that returns a Promise.

Define a function with a Promise

Below is an example of a function that returns a Promise:

function doSomething(value) {
    return new Promise((resolve, reject) => {
        // Fake a API call
        setTimeout(() => {
            if(value) {
                resolve(value)
            } else {
                reject('The Value Was Not Truthy')
            }
        }, 5000)
    });
}

The function returns a Promise. This Promise can be resolved or rejected.

Like a real-life promise, a Promise can be fulfilled or rejected.

States

According to MDN Web Docs, a JavaScript Promise can have one of three states:

"- pending: initial state, neither fulfilled nor rejected.

- fulfilled: meaning that the operation was completed successfully.

- rejected: meaning that the operation failed."

Pending

The pending state is the initial state. This means that we have this state as soon we call the doSomething() function, so we don’t know yet if the Promise is rejected or resolved.

Resolved

In the example, if the value is truthy, the Promise will be resolved. In this case, we pass the variable value in it to use it when we would call this function.

We can define our conditions to decide when to resolve our Promise.

Rejected

In the example, if the value is falsy, the Promise will be rejected. In this case, we pass an error message. It’s just a string here, but when you make an Ajax request, you pass the server’s error.

Use a Function With a Promise

Now that we know how to define a Promise, we can dive into how to use a function that returns a Promise:

// Classic Promise
doSomething().then((result) => {
    // Do something with the result
}).catch((error) => {
    console.error('Error message: ', error)
})
// Use a returned `Promise` with Async/Await 
(async () => {
    let data = null
    try {
        data = await doSomething()
        // Do something with the result
    } catch(error) {
        console.error('Error message: ', error)
    }
})();

You can recognize a function that returns a Promise by the .then() method or an await keyword. The catch will be called if there is an error in your Promise. So making error handling for a Promise is pretty straightforward.

Promises are used in a lot of JavaScript libraries and frameworks as well. But the simplest web API is the Fetch API, which you should use for making Ajax requests.

For more information and to develop your web app using 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 website using JS, please visit our technology page.

Content Source:

1. betterprogramming.pub

What’s new in Webpack 5

The fifth major webpack release was released recently. Almost two years since the last major release (4), this release brings a lot of changes to the most used module bundler in the JavaScript ecosystem. If like me, you started your front-end career prior to the rise of webpack, you remember the pain and frustration of working with tools like gulp and grunt.

Let’s take a look at the breaking changes and the improvements that come with the new release of this incredibly popular library.

What’s new in Webpack 5

This new version concentrates on five key areas.

Faster builds with persistent caching

Slow builds are one of the most common complaints from developers about webpack. The module bundler now offers an opt-in filesystem cache. This should improve our productivity as developers by speeding up our development builds.

Smaller bundle sizes

Improvements have been made to tree shaking (also known as dead code elimination). While previous versions of webpack were able to remove unused code, version 5 takes it even further. webpack is now able to remove code inside of modules, leading to even smaller bundle sizes. To read more about all of the optimization features of webpack 5, check out the official documentation.

Better long term caching

After bundle size, the thing that can improve your app loading time the most is caching. With caching, returning visitors to your application experience an almost instantaneous loading experience. With webpack 5, changes made to your code that don’t change the minimized version (eg, comments or variable names), do not result in cache invalidation. This means that your users will be able to experience the performance improvements of caching for longer.

Breaking changes now to allow further improvements later

Some of the changes introduced in this version will not have any visible impact on your application’s performance today. Instead, they are meant to allow for new features and improvements in later versions of webpack 5.

These future features include using http(s) imports as module externals. This will help with the development of micro frontends. To read more about these new and exciting features, check out the official documentation here.

Another breaking change is bumping the minimum Node.JS version from 6 to 10.13.0. Dropping support for older Node.JS versions will allow the team to simplify their code, and remove workaround to support these older versions.

webpack 5 also brings a new experiments configuration option with support for WebAssembly, Async Web Assembly, Top Level Await, and outputting your bundle as a module (previously only possible with rollup).

Module Federation

This new feature, in short, allows multiple webpack builds to work together. It allows your application to dynamically load code from another application (aka, a different webpack build). The most popular application of module federation is to enable micro-frontend architecture.

Going over module federation in detail is beyond the scope of this article. If you are interested in learning more, be sure to read the official webpack post here.

Breaking changes

Here’s a rundown of the breaking changes othat made it into this version and corresponding migration advice.

Removed Deprecated Items

All items that were marked as deprecated in version 4 have been removed. If your webpack 4 build prints deprecation warnings, be sure to address those before upgrading.

Changes to built-in plugins

The plugins IgnorePlugin and BannerPlugin accept different arguments. Read more here.

Node.JS polyfills removed

In previous versions of webpack, polyfills for native NodeJS libraries like crypto were included. These have been removed. Instead, you should use frontend focused libraries, or install the polyfills yourself.

Should you upgrade now?

This is a personal question, and it really depends on how you use webpack in your project. Most developers who use webpack, use a lot of plugins. You need to make sure that the plugins you use, support this new version.

What about NextJS?

If you are using NextJS, you can upgrade to webpack 5 by setting the version as a yarn resolution in your package.json. But again, if you have a custom webpack config, you will need to ensure that your config works with webpack 5.

What about Create-React-App?

The big advantage (and disadvantage for some) of create-react-app, is that there is no official way to customize your webpack config. For those of you using CRA, you will need to wait until react-scripts is upgraded to support webpack 5. According to a contributor, this should happen in Create-React-App version 4.1 (source).

For more information about migrating from version 4 to 5, be sure to check out the official migration guide.

Summing it up

This new release of webpack makes me even more excited for the future of frontend development. It’s so refreshing to see new features and improvements to a tool that We use every day. We should see it’s improvements driving innovation in the community for the next few years.

Most frontend developers don’t end up touching webpack very much, and just assume that it “just works”. We’ve said it before, and we’ll say it again: We think this is a mistake. Understanding how your build tools work makes you a stronger developer and is invaluable in debugging errors.

While the webpack team will continue to support version 4, by fixing bugs and adding features, for the foreseeable future, they suggest that you upgrade to version 5. With almost any library (except perhaps React), there comes a time when you need to make breaking changes and architectural improvements that rely on those breaking changes.

In short – while dealing with breaking changes is annoying, We don’t think it’s too much of an ask to make some changes to your application’s configuration every two years in exchange for a better and faster build system.

For more information and to develop web application using Webpack 5, Hire Front-End 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 Webpack 5, please visit our technology page.

Content Source:

1. medium.com

New Features In ES2020

ECMAScript has grown to be one of the world’s most widely used general-purpose programming languages. ECMAScript is based on several originating technologies, the most well-known being JavaScript (Netscape) and JScript (Microsoft). Here are the new features of ES2020.

Dynamic Import

Now, you can import a file dynamically.

import { max } from '../math.js';
const nums = [1, 2, 3];
max(...nums); // 3

This has been the way we could import a file. And the JavaScript engine reads the modules in the file and bring them into the file where those modules are called. But now, you can do this as follows.

const numbs = [1, 2, 3];
if (numbs.length) {
  const math = '../math';
  import(math)
    .then(module => {
      module.max(...numbs);
    })
}

A dynamic import returns a promise. Which means you can write it this way as well.

const math = '../math.js';
const module = await import(math);
module.max(...numbs);

Why this feature is good is that you can use a dynamic import in a regular JavaScript code like the example above.

Here’s the browser support for Dynamic Import.

• Chrome: 63
• Edge: No Support
• Firefox: 67
• IE: No Support
• Opera: 50
• Safari: 11.1

BigInt

When you had to add two numbers that are too big enough to cause an overflow, weren’t you suffered?

Number.MAX_VALUE * 2 // Infinity

BigInt is a savior in this case.

You can make a BigInt by calling BigInt() with parenthesis or 2n with ‘n’ at the end of a number.

const num = 2;
const bigNum = BigInt(num);
bigNum; // 2n
bigNum === 2n; // true

You can also add, subtract, multiply and divide it.

const bigN = BigInt(10);
bigN + bigN; // 20n
bigN * 3n; // 30n
bigN - BigInt('55'); // 45n
bigN / 3n; // 3n

Note that bigN / 3n returns 3n , not 3.33333n. Because as you also can assume from its name, it only handles the integers. So bigN / 3n is similar to Math.floor(10 / 3).

However, unfortunately, you can’t make a BigInt with a float number. And also, you can’t use a BigInt and a Number together, either.

BigInt(3.3); 
// Uncaught RangeError 
BigInt('3.3');
// Uncaught SyntaxError
BigInt(1) + 1;
// Uncaught TypeError
// Cannot mix BigInt and other types

Instead, the only allowed case to mix the operations is when you compare the size of the operations.

BigInt(1) < 2 // true

And a BigInt can be evaluated like a Number if it’s in if condition.

function print(n) {
  if (BigInt(n)) {
   console.log('hi');
  } else {
   console.log('bye');
  }
}
print(1); // hi
print(0); // bye

Here’s the browser support for BigInt

• Chrome: 67
• Edge: No Support
• Firefox: 68
• IE: No Support
• Opera: 54
• Safari: No Support

Promise.allSettled

This is quite similar to Promise.all , but there’s a significant difference between them. Promise.all waits for all the promises being fulfilled or an any promise being rejected. On the other hand, Promise.allSettled doesn’t care about that. What it cares is to know if all the promises are done, whichever their status is. So every input promise could be fulfilled or rejected, but it doesn’t matter to Promise.allSettled . Just all of them have to be done.

const promises = [
  Promise.resolve(1),
  Promise.reject(2),
  Promise.resolve(3)
];

const onResolve = (data, prefix) => {
  console.log(prefix, 'Resolved with', data);
};

const onReject = (err, prefix) => {
  console.log(prefix, 'Rejected with', err);
};

Promise.all(promises)
  .then(onResolve.bind(null, 'all'))
  .catch(onReject.bind(null, 'all'));

// Result:
// all Rejected with 2

Promise.allSettled(promises)
  .then(onResolve.bind(null, 'allSettled'))
  .catch(onReject.bind(null, 'allSettled'));

// Result:
// allSettled Resolved with
// [
//   {
//     "status": "fulfilled",
//     "value": 1
//   },
//   {
//     "status": "rejected",
//     "reason": 2
//   },
//   {
//     "status": "fulfilled",
//     "value": 3
//   }
// ]

This might be quite useful when you want to do some works before some action, for example, getting all of the required data before the user sees the list page. But the user could see the empty items because the fetch might be failed.

Here’s the browser support for Promise.allSettled.

• Chrome: 76
• Edge: No Support
• Firefox: 71
• IE: No Support
• Opera: Unknown
• Safari: Unknown

globalThis

This is lit. It’s dead simple and easy to use.

globalThis refers to the global this context on which your running context is. If you’re on Browsers, globalThis will be this , if you’re on Node, globalThis will be global . Hence no need to think about the different environmental issues anymore.

// worker.js
globalThis === self
// node.js
globalThis === global
// browser.js
globalThis === window

And this is how it works under the hood, but don’t use it in your code!

var getGlobal = function () { 
  if (typeof self !== 'undefined') { return self; } 
  if (typeof window !== 'undefined') { return window; } 
  if (typeof global !== 'undefined') { return global; } 
  throw new Error('unable to locate global object'); 
};

Here’s the environmental support for gloablThis.

• Chrome: 71
• Edge: No Support
• Firefox: 65
• IE: No Support
• Opera: No Support
• Safari: 12.1
• Node: 12

For more information and to design a website using front-end technology, Hire Front-End 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 website using JS, please visit our technology page.

Content Source:

1. medium.com

Top 5 best practices to write more robust JavaScript

JavaScript is the standard technology for implementing a seamless interaction between a user and the web page. Almost all modern browsers support it. It is the main technology behind driving the modern UX and/or server-side frameworks such as Angular, Node.JS and ReactJS. Here are top 5 best practices to write more robust JavaScript.

1. Use factory functions

If you don’t know what a factory function is, it’s simply a function (that isn’t a class or constructor) that returns an object. This simple concept allows us to take advantage of JavaScript and its features to create powerful robust applications.

It’s important to know that they’re no longer factory functions when they’re called with the newkeyword.

Why factory functions?

Factory functions can be used to easily produce instances of objects without having anything to do with classes or the new keyword.

What it essentially means is that they ultimately become treated as just functions, which means they can be used to compose objects, functions, and even promises. This means you can mix and match factory functions together to create an enhanced factory function, then continue composing with other functions or objects to create even further enhanced ones. The possibilities are endless.

When we take that into consideration and combine it with good code practices, it really begins to shine.

Here is a simple example of a factory function:

function createFrog(name) {
  const children = []
  return {
    addChild(frog) {
      children.push(frog)
    },
  }
}
const mikeTheFrog = createFrog('mike')

When you’ve used factory functions enough, you begin to realize that compared to its class constructor counterpart, it promotes stronger reusability. This results in less code, an easier time refactoring since factory functions ultimately return arbitrary objects, and an easier time managing one code to another.

2. Add methods on the .prototype when writing constructors

If you’re new to JavaScript, this section might be a little new to you as it was for me for the first two years of my experience with JavaScript.

(Keep in mind that this does not apply to classes because classes already attach methods onto their prototypes.)

Here’s an example of a constructor:

function Frog(name, gender) {
  this.name = name
  this.gender = gender
}

Frog.prototype.leap = function(feet) {
  console.log(`Leaping ${feet}ft into the air`)
}

Why do this instead of directly attaching the leap method, like in the example below?

function Frog(name, gender) {
  this.name = name
  this.gender = gender
  
  this.leap = function(feet) {
    console.log(`Leaping ${feet}ft into the air`)
  }
}

When we attach methods directly on the prototype, they get shared among all instances created by the constructor.

In other words, using the last example, if we created three separate Frogs (from this.leap = function() {…}), then we end up creating three separate copies. This is a problem because the leap method will always stay the same and doesn’t need to have its own copy to its instance.

Ultimately, this results in lower performance, when it could have been avoided. The this.name and this.gender properties need to be defined on the instance because in real life, frogs probably have their own names and gender so it makes sense to have them created on the instance level.

Here’s an example on GitHub of this approach used by the popular request package.

3. Use the conventional .type property when differentiating

This practice works so well that it’s in extensive use today. If you’re a React developer, you’ve probably already been seeing this every day, especially when you’ve been working with Redux.

Using similar approaches also makes it extremely easy for you in your development flow since it even documents itself extremely well:

function createSpecies(type, name, gender) {
  if (type === 'frog') {
    return createFrog(name, gender)
  } else if (type === 'human') {
    return createHuman(name, gender)
  } else if (type == undefined) {
    throw new Error('Cannot create a species with an unknown type')
  }
}

const myNewFrog = createSpecies('frog', 'sally', 'female')

4. Use TypeScript

TypeScript has become widely adopted in the JavaScript community due to its ability to provide a strong defense for type safety as well as its ability to help us catch bugs before they even occur.

Using TypeScript will enable your compiler to detect and show warnings about any potential errors in code before the code even runs.

But that’s not even close to a complete list of reasons why adopting TypeScript is good for any situation. One of the best things about TypeScript is that it allows you to use new features in JavaScript before they’re supported by major browsers since they get compiled down to earlier versions of JavaScript, ultimately being able to run in old browsers.

5. Always consider using try/catch when using JSON.parse or JSON.stringify

In JavaScript, when we pass JSON as input to the JSON.parse method, it expects a properly formatted JSON as the first argument. If it’s formatted incorrectly, it will throw a JSON parse error.

The danger coming from JSON parse errors is that receiving invalid JSON crashes your app. We’ve recently been in a situation at work where one of our web projects was failing because another internal package did not wrap a JSON.parse in a try/catch. This ended up making a web page fail, and there was no way to get past this error unless the internal package fixed it. This happened because the JavaScript runtime was broken.

SyntaxError: Unexpected token } in JSON at position 107

You shouldn’t always expect valid JSON input as it can receive weird characters like the >character, which is not uncommon today.

For more information and to design a website using front-end technology, Hire Front-End 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 website using JS, please visit our technology page.

Content Source:

1. medium.com

React – The most agreeable JavaScript library to build single-page or mobile apps

React is a standout amongst the most open source code libraries made for JavaScript software engineers. It is centered on the most agreeable and simple approaches to build up an application or a website page. It’s utilized for taking care of view layer for web and Mobile applications. React likewise enables us to make reusable UI collection of components.

Why is React so popular?

Less Complex

React is just simpler to grasp right away. When compared to Angular – if we really need to do that – it is much simpler. React utilizes an exceptional language structure called JSX which enables you to blend HTML with JavaScript. This isn’t a prerequisite; Developer can in any case write in plain JavaScript however, JSX is substantially less demanding to utilize.

Perfect Entry

At the time Angular 2.x was reported by Google, alongside the retrogressive inconsistency and significant changes it would bring. Moving from Angular 1 to 2 resembled moving to an alternate framework so this alongside execution speed enhancements that React guaranteed made it something developers were anxious to attempt.

Let us take a quick look on the advantages of React over other advanced technologies or frameworks with the front-end world changing consistently.

Development Flexibility

The primary job in that process was played by the side-libraries, which give you a few exceptional chances. For example, as a developer, one is currently ready to conquer a few limitations and preclusion inside a coding procedure while picking the most agreeable and comprising methods for dealing with certain issues.

Native Approach

React can be used to create mobile apps with React Native, and React is source of re-usability, meaning extensive code re-usability is supported. So at the same time we can make iOS, Android and Web application.

Virtual DOM

The utilization of Virtual DOM is another imperative development. On account of that expansion you can make an in-memory information structure store and specify goals contrasts. Accordingly, you can refresh the program’s shown DOM proficiently.

Data Binding

React utilizes one-way data binding and an application design called Flux controls the stream of information to parts through one control point – the dispatcher. It’s simpler to troubleshoot independent parts of extensive React applications.

Advanced App Performance

The development of React diminished the issue of falling behind different applications created on similar stages. React consequently refreshes one-page applications that frequently don’t require reloads for the UI redraws.

SEO Friendly

A standout amongst the most imperative issues of JavaScript systems is that don’t fit well with search engines. As an outcome, this mismatch has negative implications for your website page or application with a lower search engine positioning. React is prepared to help tackle such an issue. It gives you a chance to run your application on a server, while as of now featured virtual DOM would have the capacity to render and come back to the program as a normal site page. In this way, there is no requirement for PhantomJS.

Testability

React applications are super easy to test. React views can be treated as functions of the state so we can manipulate with state we pass to the React view and take a look at the output and triggered actions, events, functions, etc.

For more Information and to build a website using React JS, Hire React 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 website using React JS, please visit our technology page.