Category Archives: Web

Quasar excellent VUE framework to speed up development and streamline web app development

Posted on by
Reply

Quasar is a framework that is built on top of Vue.js, which is a progressive JavaScript framework used for building user interfaces. Quasar is an open-source framework that provides developers with a comprehensive set of tools and components to build high-quality web applications.

One of the main benefits of Quasar is its ease of use. It is designed to make the development process faster and more efficient, with pre-built components and a ready-to-use UI kit that allows developers to focus on their application logic rather than the layout and styling. The framework provides a clean and intuitive API that simplifies the development process, making it easier for developers to create responsive web applications quickly.

Quasar also provides a range of useful features that can help developers to create modern web applications with ease. For instance, it comes with a built-in icon set, color picker, and image selector, which saves time for developers by removing the need to search and find third-party libraries. The framework also has a robust build system that makes it easy to compile and package the application for deployment.

Another benefit of using Quasar is its comprehensive set of components. The framework comes with a large number of reusable components that can be easily integrated into the application. These components include various UI elements such as buttons, forms, and menus, as well as more advanced components like carousels, modals, and dialogs. With these pre-built components, developers can create beautiful and functional applications in a shorter time frame.

Quasar also offers excellent cross-platform support. Developers can use the framework to build web applications that work well on desktop and mobile devices, as well as native applications for iOS and Android. This makes Quasar an excellent choice for building modern applications that need to work on a wide range of devices.

Finally, Quasar has an active and supportive community of developers. This means that developers can easily find help and support when needed. The community offers a range of resources such as tutorials, forums, and documentation, which makes it easy for developers to get started with the framework.

In conclusion, Quasar is an excellent framework that offers many benefits for developers. Its ease of use, comprehensive set of components, and cross-platform support make it an excellent choice for building modern web applications. Additionally, its active and supportive community makes it a great choice for developers who want to get up to speed quickly and build high-quality applications with ease.

HOW TO GET STARTED WITH QUASAR:

Install Node.js if it is not already installed. You can download it from the official website: https://nodejs.org/

Open a command prompt or terminal window and install Quasar CLI by running the following command:

npm install -g @quasar/cli

Create a new Quasar project by running the following command:

quasar create my-project

This command will create a new Quasar project in a directory named “my-project”.

Navigate to the newly created directory:

cd my-project

Start the development server by running the following command:

quasar dev

Open your web browser and go to the following URL:

http://localhost:8080

You should see the default Quasar welcome page.

Create a new page by running the following command:

quasar new page hello

This will create a new page named “Hello” in the “src/pages” directory.

Edit the newly created file “src/pages/Hello.vue” and replace its content with the following code:

<template>
  <div>
    <h1>Hello, world!</h1>
  </div>
</template>

Save the file.

Restart the development server by stopping the previous “quasar dev” command and running it again.

Open your web browser and go to the following URL:

http://localhost:8080/hello

You should see the “Hello, world!” message displayed on the page.

Congratulations, you have successfully installed Quasar and created a “Hello, world!” sample page!

404 Error when deploying Spring Boot WAR file on Tomcat 9

Posted on by
3

We recently encountered a problem when deploying a Spring Boot application as a WAR file on Tomcat 9. After deploying the WAR file to Tomcat, we received a 404 error when trying to access the application in a web browser. The Tomcat logs showed no errors or exceptions related to the deployment, and we were unsure of the root cause of the issue.

Solution Attempt 1: Check the WAR File and Dependencies

Our first step in troubleshooting the issue was to verify that the WAR file and its dependencies were correct and complete. We double-checked the contents of the WAR file and reviewed the application’s dependencies, but we found no issues that could explain the 404 error.

Solution Attempt 2: Check the Tomcat Configuration

Our next step was to review the Tomcat configuration and make sure that it was set up correctly for the application. We checked the server.xml file and made sure that the correct port and context path were specified, but we still encountered the 404 error.

Solution Attempt 3: Check the Spring Boot Configuration

We then turned our attention to the Spring Boot configuration and reviewed the application’s application.properties and application.yml files. We checked the server port and context path settings, but we found no issues that could explain the 404 error.

Tomcat server

Solution Attempt 4: Review the Spring Boot Code

Finally, we reviewed the Spring Boot code to make sure that the application was correctly configured for deployment as a WAR file on Tomcat. We checked the Spring MVC configuration, the Thymeleaf templates, and the view controllers, but we found no issues that could explain the 404 error.

Solution: Compatibility Issue with Spring Boot 3.0 and Tomcat 9

After exhausting all other possible solutions, we discovered that the root cause of the 404 error was a compatibility issue between Spring Boot 3.0 and Tomcat 9. It turns out that Spring Boot 3.0 requires Tomcat 10 or later, and Tomcat 9 is not compatible with this version of Spring Boot.

Once we upgraded to Tomcat 10, the application deployed and ran without any issues. We were able to access the application in a web browser and verify that all functionality was working correctly.

Conclusion

In summary, we encountered a 404 error when deploying a Spring Boot application as a WAR file on Tomcat 9. After trying various solutions and troubleshooting steps, we discovered that the root cause of the issue was a compatibility problem between Spring Boot 3.0 and Tomcat 9. Once we upgraded to Tomcat 10, the issue was resolved, and the application ran without any issues.

This experience highlights the importance of keeping up to date with software compatibility requirements and being aware of the potential issues that can arise when using different versions of software together. By staying informed and up-to-date, we can avoid similar issues in the future and ensure that our applications run smoothly and reliably.

How to test nginx configuration without breaking down the server

Posted on by
Reply

You simply use t and c flags followed by config file

sudo nginx -tc /etc/nginx/nginx.conf

This can give you output like this when ok:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

t flag according to man nginx means : Do not run, just test the configuration file. nginx checks the configuration file syntax and then tries to open files referenced in the configuration file.

c flag means: Use an alternative configuration file. the config file path should come after the c flag.

Why you should use this instead of restart? or reload? because when you do sudo service nginx restart and your config file is broken you’ll affect the whole server and if you have multiple websites that means all sites go down possibly because of some little curly boi ; . reload might not do anything when there is error. to be safe always test config before reloading or restarting. even if you do simple changes to main nginx config or sites configs.

IE 11 not opening, crashing on Windows 10 after upgrade from windows 7, How to solve

Posted on by
Reply

After upgrading from windows 7 to 10,  IE 11 doesn’t open.  I have searched a lot but didn’t find a solution.  One solution suggested it was due to logitech camera’s process monitor. but removing that didn’t solve the problem.   The error log in event viewer was this:

Faulting application name: iexplore.exe, version: 11.0.10240.16412, time stamp: 0x55b99d3f
Faulting module name: ntdll.dll, version: 10.0.10240.16430, time stamp: 0x55c59f92
Exception code: 0xc0000409

After some digging, it turned out it was due to EMET 5.2 Microsoft mitigation service.  seems Microsoft security service breaks its own program.   I uninstalled it, IE 11 worked. I reinstalled it after downloading it again from Microsoft site.  IE 11 stopped working.  I opened EMET notification and went into apps and tested the different checkboxes for IE.  unchecked EAF and leaving other checks worked.

TL;DR;  If you have EMET 5.2 installed, opening EMET, going to APPS -> unchecking EAF in front of Internet Explorer and then OK should make IE work again.  what security implication that means not sure. but Microsoft should fix this soon.

 

Why site is so slow on IE even to scroll – Poor IE 8,9 performance

Posted on by
1
Stop using IE

IF your site is running too slow on IE 8 or IE 9, but it is working perfectly fine on Chrome and Firefox. Check if you are using shadow filter in your css. While Internet Explorer is generally slower than Chrome and Firefox, It is not as slow as when using shadow filters. It really performs terribly that render your site useless and deter visitors from ever daring to visit your site. This is why you should never use filters again. Even scrolling becomes too slow and jumpy. Opening javascript dialog boxes such as jquery lightbox takes extra seconds that it makes the website hard to navigate. While Microsoft describe shadow filter as depreciated on MSDN for IE 9 and above. it is still inexcusable to have it perform this slow especially that IE 8 only supports that way.

The following css makes a huge performance degradation in IE :


filter: progid:DXImageTransform.Microsoft.Shadow(Color=#777777, Strength=2, Direction=0), progid:DXImageTransform.Microsoft.Shadow(Color=#777777, Strength=2, Direction=90), progid:DXImageTransform.Microsoft.Shadow(Color=#777777, Strength=2, Direction=180), progid:DXImageTransform.Microsoft.Shadow(Color=#777777, Strength=2, Direction=270);

Here is a demo of the issue, try this on IE and then on Chrome/Operate/Firefox/Safari. Try to click remove and add filters and notice the difference. Click the images to trigger lightbox and see how slow it is when the filters implemented. Even on simple text page, it is still slow when scrolling. On Chrome and Firefox, the shadow implemented using box-shadow which performs excellently.

Demo showing IE shadow filters performance