When running your app in a local environment, you might need to connect to APIs. However, modern browsers block Cross-Origin Resource Sharing (CORS) by default in JavaScript APIs. Here are a couple of options:

1. Include CORS Headers: You can include the proper CORS headers in the response from your server to allow requests from the specified origin.
2. Disable Same-Origin Policy for Local Testing:

to run Google Chrome without CORS restrictions, follow these steps:

For MacOS

open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir 
--disable-web-security --disable-site-isolation-trials

For Windows

• Right click on the desktop, create a new shortcut
• Add the target as

"[PATH_TO_CHROME]\chrome.exe" --disable-web-security --user-data-dir=~/chromeTemp

• Click OK.

For Linux

google-chrome --disable-web-security

Remember that this approach is for development purposes only. In production, it’s essential to handle CORS properly to ensure security and prevent unauthorized access. If possible, consider setting the necessary CORS headers on your server or deploying your app on the same domain as the service you want to call.

Happy Coding..!

If your application is running on https you need to use the proper command to make it work.

How to use ngrok for HTTPS endpoints

1. Download ngrok from official website
2. Connect your account with an Authorization token
3. use below command

./ngrok http <APP-HTTPS-URL> -host-header=”localhost:44325"

./ngrok http https://localhost:44325 -host-header=”localhost:44325"

simply do not forget to add https before the URL

Happy tunneling….!

Enable inspect element — developer tools in Microsoft Office add-ins on Mac (Debug Office Add-ins)

When you are developing Microsoft office add-ins you may need to open up developer tools on right-click(for debugging purposes). By default, it only allows to see the source but not inspect option.

If you want to enable it you may need to enter the below command on the terminal and reopen the add-in again.

defaults write com.microsoft.Excel OfficeWebAddinDeveloperExtras -bool true

defaults write com.microsoft.Word OfficeWebAddinDeveloperExtras -bool true

defaults write com.microsoft.Powerpoint OfficeWebAddinDeveloperExtras -bool true

defaults write com.microsoft.Outlook OfficeWebAddinDeveloperExtras -bool true

To be able to debug Office Add-ins on Mac, you must have Mac OS High Sierra AND Mac Office Version: 16.9.1 (Build 18012504) or later.

Happy Coding..!

This is a long-awaited feature for google chrome. Chrome never had a separate extension bar to keep them reside. with the new change, you can easily manage the pin option for each extension.

simply click on the Extensions icons next to your profile icon. then you can see by default it will automatically pinned previous extensions. You can use click on each to make them available on the address bar or not.

I love this feature.. Tell me your story ??

Google Chrome released a new cool feature to the end-users with the latest versions (V 81+). If you are a user who uses version 81 or later you can try out this group tab option. This will allows users to organize tabs into visually distinct groups, e.g. to separate tabs associated with different tasks

What are the Features

1. Create a new tab group and name it
2. Set colors
3. Select multiple tabs (Command + Click tab) and make groups

How to make groups

1. Right Click on any existing tab
2. Click add to a new group

3. Right Click on the Gray dot and change other settings (Name, color, etc)

FAQ

Q. I can’t see “Add to new Group” option in my chrome

First, check your version, click on three dots in the right-hand corner and select Help → About Google Chrome

If it’s later 81, then type “chrome://flags” in the address bar. (Or chrome://flags/#tab-groups)

Search for “Tab Groups”, then make it enable.

You need to reload the browser to make it affect. Enjoy the new Chrome Tab Groups..!

Today I'm going to tell you about my latest released UX sketchbook on amazon. This is not just another type of sketchbook.

WHY?

UX designers are getting daily requests for creating wireframes for customers. We used papers to start sketching and then that will move to the next level with online tools such as AdobeXD or Figma. Same as all other UX designers I followed the same baby steps and realized that it's a bit hard to keep maintain those in papers forever.

Then I searched for several templates, Grid system Freebies to fulfill my need. But when it comes to responsive wireframes we need to have a closer arrangement of mobile, tablet and desktop views together to give a better idea to others.

Common Issues faced,

• Client meeting notes are in separate document and wireframes in another document
• No proper way of mind mapping ideas while discussing
• Can’t see the responsive designs in a single layout
• Free Templates doesn’t have the modern look and feel
• No proper place to take client feedbacks, notes, etc.
• Does not fit into your backpack

Solution

While all the above issues constantly bothering me during the last 10 years of my carrier and I was able to compile a list of page types that is useful for UX designers into printing material. At the same time, I realize its much easy to publish on Amazon and make them available to all user experience(UX) designers and User Interface(UI) designers around the world.

Here are a few ways that you can use inside page templates: :)

If you like it share it with others as well. This book specially designs with 8.5"x8.5" to fit on your backpack. Do not forget to give me some feedback…! Thank you.

Order Your Copy Now

Happy wireframing…!

Since most love the black cover edition we released the same interior with a black cover.

Order Black Edition

With the latest WSO2 EI tooling you can generate the docker image on the fly. you can find the developer article on generating the docker for wso2 Enterprise Integrator(WSO2 EI) on Generate and deploy Docker images using WSO2 EI Tooling in four easy steps

Sometimes you may face to generic error notification saying “Error creating the Docker image”. If you select Window -> Show View -> Errors, you can see the error pane like below.

Click on the error message to see the details.

org.wso2.developerstudio.eclipse.esb.docker.exceptions.DockerImageGenerationException: Could not create the Docker image bundle file.
at org.wso2.developerstudio.eclipse.esb.docker.util.DockerImageGenerator.buildImage(DockerImageGenerator.java:273)
at org.wso2.developerstudio.eclipse.esb.docker.util.DockerImageGenerator.generateDockerImage(DockerImageGenerator.java:202)
at org.wso2.developerstudio.eclipse.esb.docker.job.GenerateDockerImageJob.run(GenerateDockerImageJob.java:141)
at org.eclipse.core.internal.jobs.Worker.run(Worker.java:56)
Caused by: com.spotify.docker.client.exceptions.DockerException: java.io.IOException: Cannot run program “docker-credential-osxkeychain”: error=2, No such file or directory
at com.spotify.docker.client.auth.ConfigFileRegistryAuthSupplier.authForBuild(ConfigFileRegistryAuthSupplier.java:108)
at com.spotify.docker.client.DefaultDockerClient.build(DefaultDockerClient.java:1483)
at com.spotify.docker.client.DefaultDockerClient.build(DefaultDockerClient.java:1460)
at org.wso2.developerstudio.eclipse.esb.docker.util.DockerImageGenerator.buildImage(DockerImageGenerator.java:249)
 … 3 more
Caused by: java.io.IOException: Cannot run program “docker-credential-osxkeychain”: error=2, No such file or directory
at java.lang.ProcessBuilder.start(ProcessBuilder.java:1048)
at java.lang.Runtime.exec(Runtime.java:620)
at java.lang.Runtime.exec(Runtime.java:450)
at java.lang.Runtime.exec(Runtime.java:347)
at com.spotify.docker.client.SystemCredentialHelperDelegate.exec(SystemCredentialHelperDelegate.java:140)
at com.spotify.docker.client.SystemCredentialHelperDelegate.get(SystemCredentialHelperDelegate.java:88)
at com.spotify.docker.client.DockerCredentialHelper.get(DockerCredentialHelper.java:119)
at com.spotify.docker.client.DockerConfigReader.authWithCredentialHelper(DockerConfigReader.java:282)
at com.spotify.docker.client.DockerConfigReader.authForAllRegistries(DockerConfigReader.java:166)
at com.spotify.docker.client.auth.ConfigFileRegistryAuthSupplier.authForBuild(ConfigFileRegistryAuthSupplier.java:106)
 … 6 more
Caused by: java.io.IOException: error=2, No such file or directory
at java.lang.UNIXProcess.forkAndExec(Native Method)
at java.lang.UNIXProcess.<init>(UNIXProcess.java:247)
at java.lang.ProcessImpl.start(ProcessImpl.java:134)
at java.lang.ProcessBuilder.start(ProcessBuilder.java:1029)
 … 15 more

Seems root cause is java.io.IOException: Cannot run program “docker-credential-osxkeychain”

How to Fix the issue

This will occur due to normal docker UI installation in MacOs has a feature to store Docker credentials on Mac Keychain. So in order to fix this, we need to remove this option. Also, this will automatically be saved in your ~/.docker/config.json file

~/.docker/config.json on this remove “credSstore” : “osxkeychain” part.

{
“credSstore” : “osxkeychain”,
“HttpHeaders” : {
“User-Agent” : “Docker-Client/18.09.1 (darwin)”
….

Now you can generate the Docker image on MacOS Using WSO2 Enterprise Integrator Tooling. Happy Integration….!

Improving the user experience in CLI or command line interface is a bit debatable area since many developers think that they know what geeks want. Some Developers loves the CLI while others hate.

What is CLI?

According to the wikipedia, A command-line interface or command language interpreter (CLI), also known as

• Command-line user interface,
• Console user interface,
• Character user interface (CUI),
  is a means of interacting with a computer program where the user (or client) issues commands to the program in the form of successive lines of text (command lines)

Pros and Cons of CLI

There are many pros and cons you may figure out while using the real CLI. I’ll list down key things which I learned during my career.

• Efficient
• Fast
• Flexible

Once you speed up your life with the keyboard you may never want to use the mouse. Not only that you may learn the bunch of shortcuts and navigation options to do things faster. For most of the repetitive tasks, CLI users will create their own shortcuts, scripts, and aliases using the flexibility of the system.

Again there are heap of Cons as well,

• Rely on recall memory
• Unknown conventions
• Error-prone
• Responsibility & Danger

According to the research, Recognition memory is almost 3 times more accurate and almost 2 times faster than recall memory (Nobel, 2001). If you think about the user onboarding aspect unknown conventions may lead to huge frustration during the learning phase of the CLI. Human typing errors are inevitable and proving powerful codes may darken the entire world that they know.

A Good example is,

$ sudo rm -fr /

If you run this on any UNIX based OS, that will remove the entire filesystem recursively. If you are a windows fan you can try this too

Format C: /q /y

Define User experience for CLI

First, we need to clearly identify the goals of creating a CLI. Even those will become the challenges while we designing the experience.

If a particular user can easily memorable and typeable the particular command s/he will love to use it. In part two we’ll discuss how to achieve above listed heuristics by examples. Until then.. :)

Step 01: Select the desired repository and the folder and copy the URL from the browser window.

https://github.com/wso2-attic/carbon-identity/tree/master/components/agents/mobile-proxy-idp/Android

Step 02: replace the “tree/master” with “trunk”

https://github.com/wso2-attic/carbon-identity/trunk/components/agents/mobile-proxy-idp/Android

Step 03: Use svn checkout code to get into your machine

svn checkout https://github.com/wso2-attic/carbon-identity/trunk/components/agents/mobile-proxy-idp/Android

If you haven't installed svn on your machine use

apt-get install subversion

The term User Experience is widely used in organizations, industry, professionals but understood in many different ways depending on their own perceptions, experience etc. User experience is a multidisciplinary area which caused the multiple definitions depending on the different viewpoints. There is no single definition to suit all perspectives. You can find a bunch of definitions on below URL.

http://www.allaboutux.org/ux-definitions

UX is often used as a synonym for user interface(UI), interaction design, usability, customer experience, emotions, “WOW effect”, etc or as an umbrella term to incorporate many aspects.

Many different people helped shape the UX discipline over the years. So there are many founding fathers instead of a “father of UX". As I mentioned one of the founding father Don Norman explains the term UX(in two minutes).

ah? still confusing? ISO standard offer much simpler version. According to the ISO 9241–210:2010(en) Ergonomics of human-system interaction UX is,

“person’s perceptions and responses resulting from the use and/or anticipated use of a product, system or service”

But, Can it be that simple?