Resolving 'Failed to Fetch' Errors in JavaScript

The "TypeError: Failed to fetch" error is a common and often frustrating issue encountered when working with web applications. This error usually arises from problems with the Fetch API and can be caused by a variety of factors.

Common Reasons for "Failed to Fetch" Errors

1. Incorrect or Incomplete URL

   - The URL used in the `fetch()` method might be incorrect or incomplete.

   - Make sure the URL includes the correct protocol (https:// or http://) and that the path is accurate.

2. CORS (Cross-Origin Resource Sharing) Issues

   - The server might not be returning the correct CORS headers. If you're unfamiliar with CORS, you can refer to the MDN documentation.

   - Ensure the server is configured with the appropriate `Access-Control-Allow-*` headers.

3. Incorrect Fetch Configuration

   - There could be errors in the HTTP method or headers passed to the `fetch()` method.

   - Double-check that the configuration, including the URL, HTTP method, and headers, is correct.

4. Browser Extensions

Occasionally, browser extensions can trigger these errors by interfering with API calls or altering the responses.

Steps to Debug

1. Verify the URL

   - Ensure the URL in the `fetch()` method is correct and complete.

   - Check that the protocol, path, and HTTP method are accurate.

2. Inspect the Browser Console

   - The browser console can provide valuable insights into failed API calls.

   - Look for errors related to CORS or other network issues.

3. Check CORS Headers

   - Confirm that the server is sending the correct CORS headers.

   - Use the browser’s Network tab to review the headers of the failed requests.

4. Experiment with Different Configurations

   - Try different `fetch()` configurations to pinpoint the issue.

   - Adjust methods, headers, and URL formats as needed.

5. Consider Using a Proxy

   - If modifying server headers isn’t possible, consider using a proxy to bypass CORS restrictions.

   - Implement proxies with tools like Express or `cors-anywhere` in Node.js.

React Vs Angular in SPA: What they are, differences and the end of debate

As soon as you decide upon being SPA, the Single Page Application, the question pops up which Library. Here, I discuss between what I have learnt so far in this area,as a developer, tester and UX designer.


Let's start with a basic introduction. Angular is a TypeScript-based Javascript framework, developed and maintained by Google. Angular 1 released in 2010 is now called AngularJS. Angular 2 and above release after 2016 is simply called Angular. The latest version is Angular 7. It is being used by Google, Wix, weather.com, healthcare.gov and Forbes etc. React is described as “a JavaScript library for building user interfaces”. Released in March 2013, developed and is maintained by Facebook.
Facebook uses React components on several pages. It is said that React is used far more at Facebook than Angular is at Google. Anyways, React has also a good range of supporters cum users likeReact
Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart etc. Additionally, Facebook is working on the release of React Fiber. Rendering is supposed to be much faster as a result.


The frameworks are component-based. A component gets an input, and after some internal behavior / computing, it returns a rendered UI template as output. Much appears like an MVC design pattern. The defined components should be easy to reuse on the webpage or within other components.


The differences start from the fact React focuses on the use of Javascript ES5 or ES6. Angular relies on TypeScript. Because of this Angular has more consistency. Also, Angular has hence, concepts like decorators and static types. Static types are useful for code intelligence tools, like automatic refactoring, jump to definitions, etc. However there is catch also that TypeScript may disappear over time. Additionally, TypeScript adds a lot of learning overhead to projects. And, for the type checking enthusiasts, there is something called Flow to enable type-checking within React. It’s a static type-checker developed by Facebook for JavaScript.


Then, lets remember that Angular is a full framework with all the tooling and best practices designed on top of it. React on the other hand is just a small view library that you
would need while making an app. React uses abstractions over simple Javascript. But learning Angular is bit time consuming as you should know everything else associated to it eg typescript, MVC. Plus Angular library in itself is huge. The Angular templates are enhanced HTML with special Angular language (Things like ngIf or ngFor). While React requires knowledge of JavaScript, Angular forces you to learn Angular-specific syntax.


On the Scalability issue, Angular is good at this time, 2018. However React is going to comeup with more in future. However, as of now Angular is easy to scale thanks to its design as well as a powerful CLI. React also claims to be good and testable and scalable. So, it won't be a bad idea to choose React.


Coming back to the programming style, I should assert here that Angular includes dependency injection, a pattern in which one object supplies the dependencies (a service) to another object (a client). This leads to more flexibility and cleaner code. Plus, the code becomes more testable. Angular's model-view-controller pattern (MVC) splits a project into three components: model, view and controller. Angular as an MVC-framework has MVC out of the box. React only has the V i.e View. You need to solve the M and C on your own.


But, there also lies a problem with Angular. This is already discussed above but the following idea will give you a new perspective as well. We’re now moving more towards microservices and microapps. React gives you more control to size an application by selecting only the things which are really necessary. They offer more flexibility to shift from an SPA to microservices using parts of a former application. Angular is too bloated to be used for microservices.


And, last but not the least, let me take you to a short discussion around native Apps creation. React with react native, react sketchapp and next.js, it is the best choice. Angular comes with ionic 2 and nativescript, but neither of those mobile frameworks allow angular to reach the performance of react native. React and Angular both support native development. Angular has NativeScript (backed by Telerik) for native apps and Ionic Framework for hybrid apps. With React, you can check out react-native-renderer to build cross-plattform iOS and Android apps, or react-native for native apps. A lot of apps (including Facebook; check the Showcase for more) are built with react-native.


Lets remember that definitely React has been the most popular when it comes to English frontend and full stack communities in 2016. It is also becoming a good choice for native JavaScript mobile and even desktop apps. React is fairly simple to understand. Angular is not so simple and code setup takes time. Also, Angular is way bigger, causing longer load times and performance issues on mobiles.


So, what I conclude that you should use Angular if you work at Google, if you love TypeScript, if you love object-orientated-programming (OOP), or if you work in a large team where there are guides, collaborators, scalability issues. You should use React if you work at Facebook, if you like flexibility, if you love big ecosystems and you like choosing among dozens of packages, or if you love JS & the “everything-is-Javascript-approach”.

Cheers ;)

Mohd Anwar Jamal Faiz

What is Chocolatey and how to install : Step by step guide from W3LC.com about the new and cool Windows Package Manager

To start with, Chocolatey is a package manager for Windows (like apt-get or yum but for Windows). You must have also heard in past about npm as a package manager for NodeJs.
It is much like similar thing - The package manager, to be specific!

Chocolatey is a decentralized framework for quickly installing applications and tools that you need. It is built on the NuGet infrastructure.

It includes all aspects of managing Windows software (installers, zip archives, runtime binaries, internal and 3rd party software) using a packaging framework that
understands both versioning and dependency requirements.

It is open source andyYou can host your own sources and add them to Chocolatey, you can extend Chocolatey's capabilities.

How to Install Chocolatey

It's easy, you know just like grabbing a Vodka Shot. But without a hole in pocket! It's free, in case you're wondering untill now.

Steps:

1. Ensure that you are using an administrative shell.

2. Copy the text specific to your command shell.
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

3. Paste in shell and press Enter

4. Wait for a few seconds and let the command execute.

5. [Optional] If you are using PowerShell.exe instead of Windows command prompt, there is an additional step. You must ensure Get-ExecutionPolicy is not Restricted.

a. Run Get-ExecutionPolicy. If it returns Restricted, then run Set-ExecutionPolicy AllSigned or Set-ExecutionPolicy Bypass -Scope Process.

b. Use following command istead of the earlier mentioned in point 2.
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))


And Voila! Its done!


References:
https://chocolatey.org/about
http://www.w3lc.com

Javascript to open new popup window center on screen

I have met this requirement several times and have written this many times from scratch.
I seem to forget the syntax and refer on the internet again and again. this time I formaly wanted to give it a place on my blog itself.
So here comes a simple java script function that opens a new pop-up window and puts it on middle of screen :-







For example you may try out the following link...
Click Here to open POPUP WINDOW

Clicking on the above link will open a new window. Voila!! U achieved a popup window. True, it was as easy as this. But the syntax to open a new window should be kept in mind.

You can return to this blog, whenever you feel like. There are a lots more advices, secret tricks, tips in programming. I do this for joy and passion. But no wrong if I request you to click on few of the Advertisement links. It would help me getting my bread and butter.

And for you all, I promise that the next article will be a very buttery. Yum! Yum!

Cool Trick with website images!!!

Mathematics in itself is a fun and sheer joy if you are able to see through its beauty.

I feel that as you keep on realizing the application of mathematics and its ideas in different branches of science, philosophy and technology, you will start enjoying every aspects of it. Especially, I find the number science and the effects of simple functions on the ranges that a domain of inputs can bring as amazing. 

Let me show a simple trick using Javascript. It will use a great mathematical trick. Please feel free to dive into it if you want.

Remember that JavaScript is a popular scripting language. It powers the most popular Web 2.0 applications with a combination of web development technique called AJAX.
However, Javascript can and is very well employed to create stunning effects in Web pages.

In addition it can also be copied and pasted in the address bar of a web browser. This will run the javascript code in the address bar over the webpage/document already loaded in the browser.

Lets stop gambling with words. Some men (women too!) really need action. So, here it goes...

Steps:
1. Open a web page with some pictures/images
You may even try with this webpage itself (so no need to open new)
or, You may also open http://images.google.com and search for whatever you like eg. cartoon.
2. Copy and paste the following code in the address bar of your internet browser.

############################################
javascript:R=0; it_discussions=5;x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function mohdajf(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.mkssddddddddddd=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('mohdajf()',it_discussions); void(0);
#############################################

Voila!! The pictures have started dancing!
This is a single manifest of the power of Mathematics used with Javascript!

It is evident that there can be much of fun with this one line of code.

In case, you modify the code to create yet another stunning cool image motions, please share it on IT-Discussions Blog.