DEV Community: sumyya khan

7 Latest Tips about Laravel Eloquent that you Must Need to Know

sumyya khan — Wed, 12 Oct 2022 06:25:23 +0000

Laravel includes Eloquent, an object-relational mapper (ORM) that makes it pleasant to interact with your database. Eloquent ORM seems like a simple mechanism, but under the hood, there’s a lot of semi-hidden functions and less-known ways to achieve more with it. In this article, I will show you some latest tips and tricks related to Laravel Eloquent and DB Models.

JSON Where Clauses

Laravel offers helpers to query JSON columns for databases that support them.

Currently, MySQL 5.7+, PostgreSQL, SQL Server 2016, and SQLite 3.9.0 (using the JSON1 extension)
// To query a json column you can use the -> operator
$users = User::query()
            ->where('preferences->dining->meal', 'salad')
            ->get();
// You can check if a JSON array contains a set of values
$users = User::query()
            ->whereJsonContains('options->languages', [
                'en', 'de'
               ])
            ->get();
// You can also query by the length of a JSON array
$users = User::query()
            ->whereJsonLength('options->languages', '>', 1)
            ->get();

Chain conditional clauses to the query without writing if-else statements

The "when" helper in the query builder is 🔥
You can chain conditional clauses to the query without writing if-else statements.
This makes your query very clear:

class RatingSorter extends Sorter
{
    function execute(Builder $query)
    {
        $query
            ->selectRaw('AVG(product_ratings.rating) AS avg_rating')
            ->join('product_ratings', 'products.id', '=', 'product_ratings.product_id')
            ->groupBy('products.id');
            ->when(
                $this->direction === SortDirections::Desc,
                fn () => $query->orderByDesc('avg_rating')
                fn () => $query->orderBy('avg_rating'),
            );

        return $query;
    }
}

Get all the column names for a table

DB::getSchemaBuilder()->getColumnListing('users');
/*
returns [
    'id',
    'name',
    'email',
    'email_verified_at',
    'password',
    'remember_token',
    'created_at',
    'updated_at',
]; 
*/

Accessor Caching

As of Laravel 9.6, if you have a computationally intensive accessor, you can use the shouldCache method.

public function hash(): Attribute
{
    return Attribute::make(
        get: fn($value) => bcrypt(gzuncompress($value)),
    )->shouldCache();
}

New scalar() method

In Laravel 9.8.0, the scalar() method was added that allows you to retrieve the first column of the first row from the query result.

// Before
DB::selectOne("SELECT COUNT(CASE WHEN food = 'burger' THEN 1 END) AS burgers FROM menu_items;")->burgers
// Now
DB::scalar("SELECT COUNT(CASE WHEN food = 'burger' THEN 1 END) FROM menu_items;")

Select specific columns

To select specific columns on a model you can use the select method -- or you can pass an array directly to the get method!

// Select specified columns from all employees
$employees = Employee::select(['name', 'title', 'email'])->get();
// Select specified columns from all employees
$employees = Employee::get(['name', 'title', 'email']);

Compare the values of two columns

You can use whereColumn method to compare the values of two columns.

return Task::whereColumn('created_at', 'updated_at')->get();
// pass a comparison operator
return Task::whereColumn('created_at', '>', 'updated_at')->get();

Eloquent has many excellent functionalities, which I explained above. I hope you will find them helpful and implement them in your Laravel Projects.

Follow Us on Twitter:

6 Reasons Why You Need to Build your Web App with REST API

sumyya khan — Mon, 25 Jul 2022 07:38:14 +0000

RESTful APIs are the widely used APIs in the world of web development. RESTful APIs use Hypertext Transfer Protocol (HTTP) requests to create, read, update, and delete (CRUD) data. They are popular because of their clarity, scalability, speed, and ability to handle all data types. The use of REST APIs has grown exponentially over the years and, today, many developers use these APIs for critical projects.

This blog highlights the important elements of RESTful APIs web development as well as its benefits for web application development.

Lightweight

One of the main advantages of REST APIs is that they depend on the HTTP standard, which indicates it is format-agonistic and you can utilize XML, JSON, HTML, etc. This makes REST APIs fast, and lightweight which is crucial for mobile app projects, internet of things devices, and more.

Scalability

Scalability means how many users can access your application simultaneously without facing system failures. So the REST APIs stand out due to their scalability. REST APIs are lightweight, in response APIs only send raw data in JSON or XML format. Let's say you have a sales management application and your team extended from 20 to 2000. With REST API, you can fulfill this demand without having to spend on a bigger resources pool.

Flexibility & Portability.

REST API's are very flexible and portable. The REST protocol separates the data storage and the UI from the server. This means that developers can work on different areas of a project independently and try out multiple developer environments as needed.

Independence

Another benefit of REST APIs is that the client and server are independent. With the separation between client and server, the protocol makes it easy for developments across a project to take place independently. In addition, the REST API adapts at all times to the working syntax and platform. This offers the opportunity to use multiple environments while developing.

Low Cost

If you are going with REST APIs then it will bring considerable cost benefits. They offer scalability without having to invest in costly hardware. You can save time due to more satisfactory performance, save cost by sustaining multi-platforms and enable better collaboration between teams.

A Universal Platform

Modern applications are mostly served on a wide range of devices like web browsers, mobile phones, tablets, and desktop clients. Having a mobile app for your application is no more a luxury, it's a must now. Employees want the information whenever and wherever they need it. So if you want to target the current devices and keep options open for the future, then REST API is the most suitable option because it separates the front-end from the application back-end.

Above we highlighted the common benefits of REST API but the benefits don’t stop there. REST APIs are also efficient, high-performing, consume less bandwidth, and are cost-effective because developers can use them without third-party tools.

Closing Notes

If you have a great idea about website development then Codebrisk is always here to convert your ideas into reality. For further assistance, please contact us or you can launch a project with us.

Follow Us on Twitter:

Why you should prefer Custom SAAS Application for your Business?

sumyya khan — Tue, 14 Jun 2022 10:10:01 +0000

We can't visualize a business world where SaaS applications are not playing an important role. As you know that SaaS is a long-term approach for businesses reserved for helping their customers with best-in-class service and products. Yet, many enterprises are hesitant about the feasibility of the SaaS model in their business. They might not be confident that choosing a SAAS Application is best for their business. Whether you are thinking about the idea of using the SaaS Application or if you are not considering it at all, You have to read this post. It will hopefully help you decide.

Why Choose Software as a Service (SASS)

Software as a service (or SaaS) is a way of providing applications over the Internet—as a service. Rather than installing and maintaining software, you can simply access it via the Internet and liberate yourself from complex software and hardware management. SaaS is one of the most popular types of cloud computing. SaaS applications are sometimes called Web-based software, on-demand software, or hosted software. Whatever the name, SaaS applications run on a SaaS provider’s servers. The provider controls access to the application, including security, availability, and performance.

Custom SAAS solutions offer businesses the ability to scale, backup, and recover their data from the cloud and increase their safety.
Zoom, Hubspot, Shopify, Office365, Google Photos, Gmail, Google Docs, Google Sheets, Google Drive, etc are the most famous examples of SAAS.
Any company can benefit from the SaaS application as it offers a low-cost option, a lenient, and easy-to-maintain option for executing a business strategy.

5 Benefits of Custom SAAS Web Development

Let’s list the primary advantages of Custom SAAS Web Development which may be useful for an entrepreneur to make a knowledgeable decision regarding the choice of software for his company.

Rapidly Scaling Over Time

Creating a custom SaaS software solution also directs to effortless scalability. Mostly Businesses grow over time and may need new software licenses, and server space or they need to add new users. With SaaS, making these changes is as simple as upgrading the existing plan or subscription for the application.
SaaS offers businesses the ease to scale their applications up or down based on their individual needs. These Businesses can also change their usage plan with their vendor without giving any advance notice.

Cost-Effective

Developing a custom SaaS application can result in substantial savings for businesses. Software-as-a-service reduces the upfront costs associated with the purchase and installation of traditional software. In addition, businesses can also save on ongoing costs such as upgrades and maintenance. SaaS is both downloadable and virtually maintenance-free. That's why the SaaS application proves to be much cheaper in the long run.

Quick Backup & Data Recovery

When you are using a SaaS application, a business’s IT infrastructure and data are safely installed and stored in cloud storage in a remote location. This means that even if something goes wrong with your servers, you can always go back to the previous savings with the backup log and get access to information from any device with an internet connection.

High Security

Another big advantage of creating a custom SaaS solution is the evolved security measures. SaaS applications offer businesses an incredibly safe platform where they can confidently store valuable business data.

SaaS is considered to be even more protected than traditional data storage methods. With custom SaaS solutions, platforms, servers, applications, and data are proactively protected and managed by data security specialists. Outsourcing to a cloud provider that is an expert in IT security can give businesses peace of mind that their data is safe.

Cross-device Compatibility

SaaS application development is very useful for enterprises in any industry. SaaS applications are straightforward to access by utilizing an internet-enabled device that will be more perfect for operating on various devices, like internet-enabled tablets and phones, etc.

Follow Us on Twitter:

The Benefits of Custom CRM Software Development

sumyya khan — Thu, 09 Jun 2022 07:01:01 +0000

CRM stands for Customer Relations Management. It is a software product type allowing for automated collection and processing of various data that your customers submit on your website. CRM is one of the world’s fastest-growing industries, expected to grow at a rate of 14% between 2021 and 2027. For those who work with a CRM platform, it’s challenging to imagine a world without it. CRM software can gather customer interactions in one central place to improve customer experience and satisfaction. CRM software has become an essential tool for businesses of all sizes. It can provide several benefits to any business, from organizing contacts to automating key tasks. It can also be an organized hub that allows constant communication both with customers and within the organization.

Benefits of Custom CRM Software Development

A Custom CRM solution can be used in different ways and provide multiple perks to your business. These are some benefits of CRM software listed below.

Improve Customer Relationship

Custom CRM software gives you the ability to store, manage, and efficiently track customer data. Given that your company’s existing customers are its most precious resource, it is important that they covert into loyal customers who promote your brand. With a CRM solution built specifically for your needs, you stand well-equipped to better understand your customers’ habits, needs, and preferences.

Increase Efficiency

When you opt for customized CRM software, you get the ability to assign specific dashboards for specific employees and departments. This means employees only get to view what’s essential for their jobs. Such a platform also streamlines integration between sales and marketing teams, giving both access to relevant data.

Automated Reports

Your team can easily collect and organize data about prospective and current customers using the CRM software’s dashboard and reporting features, which allow employees to automate and manage their pipelines and processes. The CRM can also help your team members evaluate their performance, track their quotas and goals, and check their progress on each of their projects at a glance.

Save Time

Work gets done faster when you have easy access to all the information you need. With role-specific dashboards, you guarantee that all the information your employees need is accessible through a single platform. Besides, you can also get your custom CRM solution to carry out repetitive tasks automatically.

Increase Sales

Boosting sales is the last frontier of any business, and custom CRM software works toward this objective in many ways. A boost in brand loyalty has a direct effect on this aspect. Since you get the ability to analyze customer data in the right manner, you may develop appropriate marketing strategies to increase conversion. An increase in sales is bound to follow.

Note

If you want to build a CRM system or eCommerce web application for your business, then Codebrisk is here to help you. Our CRM development with Laravel holds a wide range of features for entities to manage their interactions with customers. We create modules for collecting data, product status details, and launching email and social media campaigns with features such as Laravel Socialite which supports authentication with various social media platforms.

Follow Us on Twitter:

Why You Need to Build Your Next Single Page Application with Vue Js

sumyya khan — Fri, 13 May 2022 09:27:00 +0000

Nowadays, many companies have started to construct their web applications employing a growing web design approach referred to as Single Page applications. The Internet is loaded with SPA examples. Some of them you use regularly like Netflix, Google Drive, Facebook, Gmail, Google Maps, Trello, Twitter, etc.

A SPA (single-page application), is a web application that is simply composed of just one web page, a single file on the filesystem, such as index.html. A SPA generally downloads the initial application code (HTML, CSS, and JavaScript) from the server-side, and the subsequent resources are dynamically loaded to the page, usually in response to user actions. Requests for different “pages” (or “views”) are handled through AJAX (JavaScript) and replace parts of the page, potentially saving on bandwidth. This method decreases the time required to switch between pages and different parts of the application by eliminating the need to continually download parts of the single-page app, like the template, which doesn't often change.

Additionally, through the use of the browser's History API, the URL in the address bar can be changed with each page. Because of this, the browser history will act just like it does on a traditional website. This permits you to utilize the forward and backward arrows to go back and forth between pages.

What is Vue Js

Vue.js has become one of the greatest frameworks for building single-page applications. It abstracts away much of the complexity normally involved in building web applications. Also, it has been well integrated with many other frameworks, such as the Laravel PHP framework.

Vue js is developed by Evan You in 2013, Vue.js is a progressive, declarative JavaScript framework for building fast single-page applications. It is progressive because it can easily scale from a library to a full-featured framework. Vue proposes an adaptable ecosystem that can scale between a library and a full-featured framework.

Vue js and other Frameworks

React, Angular.js, Ember.js, and Vue.js are some of the most famous front-end web frameworks in use today. All these frameworks share a similar perspective and purpose. Each one offers specific advantages and limitations over the others, but Vue.js is popular for being an ideal middle ground. It offers more tools than React but fewer than Angular. On top of that, the syntax of Vue.js is simpler. On top of that, the syntax of Vue.js is simpler. Vue.js also offers built-in state management and vue-router, the official Vue.js router. However, it does not feature HTTP client functionality or form validation. Vue focuses on building user interfaces and creating reusable components.

Benefits of using Vue Js

So let’s look at the Benefits of the Vuejs framework that makes it a good choice for your business.

Component-based architecture

Like Angular and React, the Vue js framework follows a component-based architecture. This means all the frontend application code can be divided into independent components.
These components, consisting of template, logic, and styles, are bound together to form the web app.

Reusability

The component-based approach of Vue enables the formation of reusable single file components. Inside a component, template, logic, and styles are inherently coupled. Instead of separating the code into arbitrary layers, Vue assembles components that can be reused and into a function.

Future Maintenance

It is the responsibility of the developers to ensure that the app performs bug-free and is updated after the initial release. Vue.js helps you manage maintenance and updates easily.

Virtual-DOM

Vue js uses a virtual representation of the actual DOM of a webpage, created using Javascript objects. Thus the DOM objects can easily be rendered without modifying and refreshing the whole tree every time.

Code readability

As all the components are stored in separate files (and each component is just a single file), the code is easier to read and understand, which makes it easier to maintain and fix.

High performance

Vue js framework is very lightweight, bundling around 18kb - 20kb. But it doesn’t compromise on performance or productivity. It is one of the fastest frameworks available for building web interfaces. Vue js is lightning-fast to install and you can start working in a matter of minutes. Plus, the high page loading time also positively affects your web pages’ SEO ranking.

Reactive two-way data binding

Another benefit in DOM manipulations is two-way data binding inherited by Vue from Angular. In Vue, the bound data is updated reactively as are DOM objects, which is excellent for any application requiring real-time updates. Vue’s reactivity will make data updating clearer and easier to complete.

Notes

Being a custom web development company, Codebrisk has proven experience in developing single-page web applications for companies of any size. At Codebrisk, our expert developers utilize Vue js for building Single Page Applications. So if you need Single Page Application development, We are here for you to assist with this initiative. You can contact us for any suggestion about the development of an interactive, dynamic single-page application for your enterprise.

Follow Us on Twitter:

Latest Tips & Tricks About Laravel Validation & Laravel Routing

sumyya khan — Wed, 27 Apr 2022 07:26:33 +0000

Laravel is an open-source PHP framework devised to make developing web apps easier and faster through built-in features. These features are part of what makes Laravel so widely used by web developers.
Laravel includes a wide variety of beneficial validation rules that you can apply to data, even providing the ability to validate if values are unique in a given database table. Routing in Laravel allows you to route all your application requests to their appropriate controller. In this article, I will show you some laravel validation and routing tips. Hopefully, you can use them to supercharge your Laravel applications. Here we go!

Position placeholder in the validation messages

In Laravel 9 you can use the :position placeholder in the validation messages if you're working with arrays.

This will output: "Please provide an amount for price #2"

class CreateProductRequest extends FormRequest
{
    public function rules(): array
    {
        return  [
            'title' => ['required', 'string'];
            'description' => ['nullable', 'sometimes', 'string'],
            'prices' => ['required', 'array'],
            'prices.*.amount' => ['required', 'numeric'],
            'prices.*.expired_at' => ['required', 'date'],
        ];
    }

    public function messages(): array
    {
        'prices.*.amount.required' => 'Please provide an amount for price #:position'
    }
}

New array validation rule required_array_keys

Laravel 8.82 adds a required_array_keys validation rule. The rule checks that all of the specified keys exist in an array.

Valid data that would pass the validation:

$data = [
    'baz' => [
        'foo' => 'bar',
        'fee' => 'faa',
        'laa' => 'lee'
    ],
];

$rules = [
    'baz' => [
        'array',
        'required_array_keys:foo,fee,laa',
    ],
];

$validator = Validator::make($data, $rules);
$validator->passes(); // true

Invalid data that would fail the validation:

$data = [
    'baz' => [
        'foo' => 'bar',
        'fee' => 'faa',
    ],
];

$rules = [
    'baz' => [
        'array',
        'required_array_keys:foo,fee,laa',
    ],
];

$validator = Validator::make($data, $rules);
$validator->passes(); // false

Route resources grouping

If your routes have a lot of resource controllers, you can group them and call one Route::resources() instead of many single Route::resource() statements.

Route::resources([
    'photos' => PhotoController::class,
    'posts' => PostController::class,
]);

Custom route bindings

Did you know you can define custom route bindings in Laravel?

In this example, I need to resolve a portfolio by slug. But the slug is not unique, because multiple users can have a portfolio named Foo. So I define how Laravel should resolve them from a route parameter

class RouteServiceProvider extends ServiceProvider
{
    public const HOME = '/dashboard';

    public function boot()
    {
        Route::bind('portfolio', function (string $slug) {
            return Portfolio::query()
                ->whereBelongsto(request()->user())
                ->whereSlug($slug)
                ->firstOrFail();
        });
    }
}
Route::get('portfolios/{portfolio}', function (Portfolio $portfolio) {
    /*
     * The $portfolio will be the result of the query defined in the RouteServiceProvider
     */
})

Mac validation rule

New mac_address validation rule added in Laravel 8.77

$trans = $this->getIlluminateArrayTranslator();
$validator = new Validator($trans, ['mac' => '01-23-45-67-89-ab'], ['mac' => 'mac_address']);
$this->assertTrue($validator->passes());

Validate email with TLD domain required

By default, the email validation rule will accept an email without a TLD domain (ie: taylor@laravel, povilas@ldaily)

But if you want to make sure the email must have a TLD domain (ie: taylor@laravel.com, povilas@ldaily.com), use the email:filter rule.

[
    'email' => 'required|email', // before
    'email' => 'required|email:filter', // after
],

Route view

You can use Route::view($uri , $bladePage) to return a view directly, without having to use the controller function.

//this will return home.blade.php view
Route::view('/home', 'home');

These are some useful tips and tricks related to laravel Validation & Routing. I hope that by utilizing these tips, you will improve your code execution and usability. If you love them, then please follow us for more laravel & Vue js related news.

Follow Us on Twitter:

Cons & Pros of Single Page Application & Multi Page Application

sumyya khan — Mon, 11 Apr 2022 06:28:50 +0000

To guarantee your web app runs without any unwelcome interactions, it has to be supported by the right technology to certify high performance and speed. So if you are hunting for the best technique for creating a website, you’ll definitely encounter two prominent approaches and you will have to pick between MPAs (Multi-page applications) and SPAs (Single-page applications). If you’re skeptical about which one to go with, keep on reading to determine which one is the best choice for your next web application.

What is a Single-Page Application (SPA)?

Single-page applications entitle you to simulate the work of desktop apps. The architecture is organized in such a way that when you go to a new page, only a part of the content is updated. Thus, there is no need to re-download the same elements. This is very convenient for developers and users. The Internet is filled with SPA examples. Some of them you utilize regularly like Netflix, Facebook, Gmail, Google Maps, Trello, Twitter, etc.

Single Page Applications utilize AJAX and HTML5. JS frameworks (React, Angular, Vue, and Ember) are responsible for processing the heavy challenges on the client-side for SPAs. Such apps allow users to stay in one comfy web space and provide them with the best user experience.

Benefits of SPA

Here are the main benefits of the Single Page Application approach.

Speed & Performance: Since SPA doesn't update the entire page, but only the necessary part, it significantly improves the speed of work.

Quick development: Ready-made libraries and frameworks provide powerful tools for developing web applications. The project can work in parallel with back-end and front-end developers. Thanks to a clear separation they will not interfere with each other.

Mobile applications: SPA allows you to easily develop mobile apps based on the finished code.

Coupling: SPA is strongly decoupled, meaning that the front-end and back-end are separate. Single-page applications use APIs developed by server-side developers to read and display data.

Drawbacks of SPA

Here are some drawbacks of the Single Page Application approach.

Poor SEO: SPA operates based on javascript and it downloads information on request from the client part. Search engines can barely simulate this behavior. Because most of the pages are simply not available for scanning by search bots.

Troubles with security: Spa is more vulnerable to cross-site scripting attacks. Due to XSS, hackers can insert their own client-side script into web apps. However, it can be controlled by the means of securing data endpoints.

What is a Multi-Page Application (MPA)?

An MPA is a web app that includes more than one page and needs to reload the entire page. It is a preferred choice for big companies with large product portfolios, such as e-commerce businesses. If you are looking for examples, just think about Amazon, eBay, Aliexpres, or any other complex site with multiple pages.
Multi-Page Applications operate traditionally. They are quite large out of necessity. MPAs usually consists of a big amount of content so they generally have many levels and various links.

Benefits of MPA

Here are the main benefits of the Multiple Page Application approach.

Easy SEO optimization: MPA allows better website positioning, as each page can be optimized for a different keyword. Also, meta tags can be added on every page which positively affects the Google rankings.

Great Scalability: Mpa offers great scalability. This means that no matter how much content you require your app to include, there will be no limits. MPAs facilitate adding an unlimited number of new features, product pages, information about services, and so on.

Solutions & Frameworks: There are a ton of best practices, approaches, tutorials, and frameworks that assist developers to construct advanced multi-page apps.

Drawbacks of MPA

Here are some drawbacks of the Multi-Page Application approach.

Slow Speed: MPA is slower as the browser must reload the entire page from scratch whenever the user wants to access new data or moves to a different part of the website.

Development time: In multi-page apps the frontend and backend are more tightly coupled, therefore developers need more time to build them. There’s typically one project that requires the frontend and backend code to be written from scratch.

Final Thoughts

Both approaches discussed above have some pros and cons. SPA is characterized by its speed and the ability to develop a mobile application based on ready-made code. But at the same time, SPA has poor SEO optimization. Thus, this architecture is an excellent approach for SaaS platforms, social networks, and closed communities, where search engine optimization does not matter.

MPA offers high performance and better SEO optimization but still does not enable you to easily develop a mobile application.MPA’s are best used in e-commerce apps, business catalogs, and marketplaces. If you’re a large company that offers a wide variety of products, then an MPA is the best choice for you.

Note

Being a custom web development company, Codebrisk has proven experience in developing single-page and multi-page applications for companies of any size and in a variety of industries. At Codebrisk, our expert developers utilize the best techniques for building custom-made web apps. So if you have a great idea, We are here for you to assist with this initiative. Please Feel free to get in touch with us.

For More News & Updates,
Don't forget to follow me on Twitter/iamSumyyaKhan.

Why You Need to Turn Your Regular App into PWA Using Vue.js

sumyya khan — Thu, 31 Mar 2022 07:42:53 +0000

Progressive Web Applications (PWA) are a solution that manages the increased usage of native apps, specifically by smartphone technologies. Native apps are software programs produced for use on a certain device or operating systems such as Android and iOS.
The term “progressive” directs to the fact that they offer new features and, from the user experience’s point of view, they are initially recognized as regular websites but progressively they act more like mobile apps, among other things multiplatform. Progressive web applications (PWAs) incorporate the properties of native apps with traditional web technology. This has become essential because native apps are limited to the platforms they are made for. They are also limited by the cost of development and maintenance. Hence, native apps are useful, but they don't meet the various needs of different businesses.

Turn your App into a PWA using Vue.js

Any regular website can be a Progressive web application. A static blog, one-pager, an eCommerce store, or a simple website could be a PWA. Aliexpress, Flipkart, Twitter, Soundslice, Pinterest, Spotify, and Starbucks are the big enterprises offering a PWA experience.

If you want a website into a progressive web application, you can do this effortlessly. PWAs have a few requirements, including:

A service worker: A service worker is a core PWA technology in the form of a JavaScript file that your browser runs in the background. It is independent of a web page and is directly accountable for managing network requests and the core PWA features, such as push notifications or background synchronization.
A web app manifest: This is a JSON file that corresponds with the browser about the web app and how it should act when installed on the user’s device. The manifest web app file also contains the app description, icons, name, display, and colors. It is responsible for driving the user to “Add to Home Screen.”
HTTPS: For the service worker to deliver offline functionality and fast execution, the app should be operating in a secure environment. The HTTPS protocol guarantees the protection of the web app by stopping third parties from overriding your website using a malicious service worker.

Most hosts provide SSL certificates for free these days (many even do so automatically). So that is the easiest part.
Fo other requirements, there’s an amazing boilerplate that goes into constructing all of that stuff, both in terms of the files and the code itself. If you do it manually, it would be a tiresome task.
Luckily, there’s a more comfortable way with Vue, thanks to Vue CLI! Vue CLI offers a convenient PWA plugin, and, even better, it can be added to an existing or new project.

Benefits of using Vue Js for PWAs

Super Performance

When it comes to performance and speed, PWA and Vue JS work hand-in-hand. While PWAs are relentlessly fast. They quickly respond to user interactions and you can smoothly scroll through pages without being interrupted. On the other hand, Vue.JS is a light framework offering exceptional performance with the help of its progressive nature. When using Vue JS development along with PWAs, you can leverage offline access features provided by PWAs.

Improved Security

Security is a powerful feature that every enterprise considers when developing web or mobile apps to upgrade their product or services. Developing a PWA utilizing vue.js or transforming your vue.js into a PWA enforces transport layer security to encrypt all the sensitive information and data. Moreover, PWA bounds device hardware access without users’ consent, which enables the Vue JS development agency to utilize trusted JavaScript libraries for the Vue JS development.

Feels like a Native App

Vue Js is generally recognized to develop single-page applications and user interfaces. However, using Vue.JS for progressive web application development empowers you to construct native-like apps. It is possible to employ JSON files to alter various application elements, including app icons, theme, color, etc. Utilizing these properties, you gain full control over the procedure of developing web or mobile apps to compete with native apps.

Small Size

One shared feature between PWAs and Vue JS is that both are smaller in size. It is hardly in KBs. It assists businesses to leverage faster installation than any other frameworks or libraries. Such tiny size and quicker installation have captured many companies worldwide and left many widespread frameworks behind.

Lower Development Cost

Another amazing advantage of employing PWA and Vue JS is that you can reduce a lot of development costs. With PWA development, you can utilize the same stack for both mobile and web. Also, it is helpful to reuse the same piece of code as much as possible. So, in the end, it allows businesses to lower the overall development cost for the web or mobile app.

Improved SEO

We all know that Vue JS is not so SEO-friendly. With page load speeds, troubles in updating Meta, sitemap, and canonicals have made Vue JS tiresome to optimize for SEO. However, transforming Vue JS applications into PWAs can aid businesses to optimize their web applications for SEO. Since PWAs are linkable, it is possible to optimize them for search engines quickly. This greatly eliminates the restrictions posed by Vue JS.

Note

The Web development team at Codebrisk contemplates PWA to be the future of web applications for the B2C and B2B sectors. Here are some of the services we offer as a PWA app development company like PWA UI design, PWA web development, PWA integration, etc. If you need to develop a PWA for your enterprise, the Codebrisk team has impressive experience in PWA development and will be glad to assist you with your projects. Please feel free to contact us or get a free estimate of your project here.

For More News & Updates, Don't forget to follow me on Twitter/iamSumyyaKhan.

Why Choose a Laravel Ecommerce PWA for Your Business

sumyya khan — Mon, 28 Mar 2022 06:30:15 +0000

Nowadays, most people use mobile apps to visit websites. By using PWA, you can generate more traffic on the website.

PWA stands for a Progressive Web Application. This is an application constructed from the web technologies we all know and adore, like HTML, CSS, and JavaScript, but with a feel and functionality that is competent as a real native app. Thanks to a couple of smart additions, you can turn almost any website into a progressive web app. This means that you can build a PWA rather quickly, in regards to a native app that’s pretty difficult to develop. Moreover, you can propose all the characteristics of native apps, like push notifications, offline support, and much more.

Many websites you encounter online are Progressive Web Apps. Suppose we take the example of twitter.com, If you visit that site on your smartphone, you can install it on your home screen. Now, on opening the saved Twitter site, you’ll witness that it looks and functions just like a native app. There’s no browser window or any difference in running it from an iPhone or an Android smartphone. You just have to simply log in and you’re good to go. That’s the primary advantage of constructing your web app with a PWA in mind.
PWAs are gaining popularity. Many prominent websites are PWAs, like Starbucks.com,Flipboard.com, AliExpress.com, Pinterest.com, Washingtonpost.com, and Uber.com are even installable on your home screen and present a comparative experience to their native applications.

Laravel Ecommerce PWA

Laravel Ecommerce Progressive Web Application uses web compatibilities and provides an application experience to the user. By using a Laravel Ecommerce progressive web app, you can do things like work on a low internet connection, load on the home screen, Social Sharing of products, etc.
The Progressive Web Application is lightning fast as compared to the simple website. Due to the immediate execution as result user engagement increases on the website. As we know that Flipkart is the largest eCommerce platform. Firstly they utilized the only app after that they introduced Flipkart PWA as Flipkart Lite. With the help of PWA, it converts 70% of users to customers.

Features of Laravel Ecommerce PWA

More user-friendly than a web application.
Dynamic SEO.
Push Notification functionality.
Admin can add PWA home page layout.
Also, work with low-quality internet
Do not need to update Progressive web Application.
Admin can set the splash background color of the Progressive Web Application.
The admin can enter the application name.
Looks and feels like a native application.
Increases user engagement in the store.
Admin can upload and change the application icon.
Admin can set the theme color of the Progressive Web Application.
Support multiple currencies.
Support social sharing feature of the product.

Benefits of PWA

Less Storage Usage

If you compared it to any traditional application, the cost of utilizing Laravel eCommerce PWA is very low for the customer. Laravel eCommerce PWA doesn't require any substantial storage and performs better on their smartphones.

User-Friendly

Users can easily access the Laravel eCommerce PWA through a browser like Chrome, Safari, and Opera. PWA is mobile device independent so it can work on any mobile device.

Offline Mode

PWA would also behave even if you are disconnected from the internet connection. This feature is primarily valuable for businesses that have a catalog, where the user does not require to reload it again and again to view it.

Prompt Loading

When the user adds any progressive web app on the home screen, with the help of the service worker it loads immediately. FOR 3G connection, It takes 2.5 sec to load for the first visit and 7.1 sec to fully load the page. It takes 0.8 sec for the second visit.

HTTPS Secure

PWA offers HTTPS secure solutions which enable the browser to manage some level of server encryption. This improves the benefit of PWA as it performs only through HTTPS to prevent the common man-in-middle attack.

Easy Social Sharing

While using a PWA, you can effortlessly share the products on your favorite social media spots like Facebook, Twitter, Whatsapp, etc with your friends and relatives to obtain their views. The feature is also furnished to work in offline mode.

Closing Notes

The Web development team at Codebrisk contemplates PWA to be the future of web applications for the B2C and B2B sectors. Here are some of the services we offer as a PWA app development company like PWA UI design, PWA web development, PWA integration, etc.
If you need to develop a PWA for your enterprise, the Codebrisk team has impressive experience in PWA development and will be glad to assist you with your projects. Please feel free to contact us.

For More News & Updates, Follow me on Twitter/iamSumyyaKhan.

The Best Single Page Application Framework of 2022

sumyya khan — Thu, 17 Mar 2022 10:47:56 +0000

A SPA (Single-page application) is a type of web application that loads only a single web document, and then updates the body content of that single document through JavaScript APIs such as XMLHttpRequest and Fetch when other content is to be shown.
SPA permits users to utilize websites without loading whole new pages from the server, which can result in performance improvements and a more dynamic and smooth experience, with some tradeoff disadvantages such as SEO, more effort required to maintain state, implement navigation, and do meaningful performance monitoring.

Which Single Page Application Framework is the Best?

A Single Page Application framework is incorporated with a lot of utilities that drive the development process streamlined. Along with automating repetitious coding tasks, and offering ready-to-use components, these frameworks also provide HTML and AJAX support, URL routing, data caching, protection against security vulnerabilities, and improved performance.

Some famous web frameworks used for the web application development of Single Page Applications are listed below.

React Js

ReactJS is a widely used, high-performance library for creating the user interface. It is used in many popular social media sites such as Facebook, Instagram, etc. Earlier, the traditional approach was to create applications using server-rendered HTML. Each user interaction would result in generating a new request, therefore, loading an entirely new page. This resulted in slow loading and hence poor performance and poor customer experience. React uses virtual DOM and this “Virtual DOM” is considered as the biggest benefit of React by the developers. React is preferred as the best framework for SPA development because it is

Lightweight
Separation of concerns(SoC)
JSX – XML like syntax allows you to render HTML code using JavaScript
Virtual DOMs
Object-oriented paradigm
Highly scalable and flexible
High performance
Components based framework that promotes reusability and flexibility

Vue Js

Vue Js is a front-end JavaScript framework built to develop web applications, SPA, and user interfaces, which is based on a model-view-view-model (MVVM) is known as Vue.js. The framework is focused on the view layer, component composition, and declarative rendering.
If you prefer simplicity and flexibility in your front-end frameworks, then Vue is a good option. Besides, it’s the most lightweight of all other frameworks.

Being a flexible open-source framework, it can be utilized for fast, cost-efficient web application development. You can produce complex traditional web applications with heavy traffic or small-scale static websites. Surprisingly, Vue is also competent in the development of single-page applications. Currently, such companies as GitLab, Baidu, and Alibaba use Vue.js for their needs. This is due to the many features it offers such as:

Lightweight, easy to use
A minimalistic ecosystem
Virtual DOM results in faster dynamic HTML pages rendering
Customizable and reusable components
MVVM software design architecture
Reactive two-way data binding
Easily integrable with other Vue frameworks
User-friendly coding environment
Flexible to integrate with any third-party apps

AngularJS

Angular is one of the open-source, front-end, JavaScript-based frameworks widely used in creating single page applications on the client-side. It has been created by Google and the popular users of AngularJS include Microsoft, Google, and PayPal. It is qualified of transferring the entire content directly from the server to the browser, loading all the pages at the same time. Once they are loaded, the page does not reload if a link is clicked upon; instead, the sections within the page are updated instantly. AngularJS allows faster loading of pages as there is less load on the server. The two-way data binding feature saves the burden of writing numerous codes. Here, automatic integration of data between model and view components takes place. Further, AngularJS works on MVC architecture. Below are some features of this single page application framework:

Dependency injection
High performance and speed
Highly extensible with other libraries
Caching
Two-way data binding feature eliminating the need for DOM manipulation
No dependencies to code
Debugging and testing

EmberJS

EmberJS is a highly opinionated, open-source framework that facilitates greater flexibility. It observes a widget-based approach known by the name Ember components. The templates incorporated with Handlebars get updated automatically as the data changes, using minimal coding. The widespread users of EmberJS include Microsoft, Netflix, LinkedIn, Live, Vine, etc. Apple Music, which is a desktop application also uses EmberJS. Also, it has a powerful routing system. It works on the MVVM pattern and follows the Convention over Configuration (CoC) model. The data library presented by EmberJS is quite resourceful. Its friendly API makes many prefer EmberJS over other frameworks. It follows a two-way data binding pattern.

The framework offers defaults and basic templates to promote the best developing techniques. Some other unique functionalities offered by Ember are:

It has all the utilities a developer requires to develop a high-functioning application. It delivers hundreds of high-quality, curated npm packages.
It is a scalable, easy-to-use UI architecture
Ember Addons to execute new functionalities in your application.
Ember CLI comes built-in with an environment with rapid rebuilds, and auto-reload
Easy testing and deployment of web applications
URL routing
The inbuilt data layer can be integrated with popular database environments too
Convention over configuration

Closing Notes

Single Page Applications are the reason for the rapid loading time and creative user interactions of many popular websites. Building SPA is an effective solution for drawing end-users and customers.

At Codebirsk, we facilitate the development of single-page apps as our main goal is to provide a smooth user experience. Our proficient team of web developers has years of experience in providing successful web applications across the globe. So You can contact us for any suggestion about the development of an interactive, dynamic single-page application for your enterprise.

For More News & Updates, Follow me on Twitter/iamSumyyaKhan.

10 Latest Tips about Laravel that you should know in 2022

sumyya khan — Wed, 09 Mar 2022 05:44:19 +0000

Laravel has been the Best framework of PHP for many years. It has a massive ecosystem, active community, strong job market, successful startups, MVC architecture support, the creative template engine, etc. It has everything that makes it beneficial to adopt new technology. Laravel also helps website developers simplify their development process with clean and reusable code. In this blog, I've collected some awesome tips and tricks related to Laravel that can assist you in upgrading your code and app performance.

The findOrFail method also accepts a list of ids

The findOrFail method also accepts a list of ids. If any of these ids are not found, then it fails. Nice if you need to retrieve a specific set of models and don't want to have to check that the count you got was the count you expected

User::create(['id' => 1]);
User::create(['id' => 2);
User::create(['id' => 3]);

// Retrives the user...
$user = User::findOrFail(1);

// Throws a 404 because the user doesn't exist...
User::findOrFail(99);

// Retrives all 3 users...
$users = User::findOrFail([1, 2, 3]);

// Throws because it is unable to find *all* of the users
User::findOrFail([1, 2, 3, 99]);

Get a single column's value from the first result

You can use the value() method to get a single column's value from the first result of a query.

// Instead of
Integration::where('name', 'foo')->first()->active;

// You can use
Integration::where('name', 'foo')->value('active');

// or this to throw an exception if no records found
Integration::where('name', 'foo')->valueOrFail('active')';

Check if the altered value changed key

Ever wanted to know if the changes you've made to a model have altered the value for a key ? No problem, simply reach for originalIsEquivalent.

$user = User::first(); // ['name' => "John']

$user->name = 'John';

$user->originalIsEquivalent('name'); // true

$user->name = 'David'; // Set directly
$user->fill(['name' => 'David']); // Or set via fill

$user->originalIsEquivalent('name'); // false

Remove several global scopes from the query

When using Eloquent Global Scopes, you not only can use MULTIPLE scopes but also remove certain scopes when you don't need them, by providing the array without withoutGlobalScopes() Link to docs

// Remove all of the global scopes...
User::withoutGlobalScopes()->get();

// Remove some of the global scopes...
User::withoutGlobalScopes([
    FirstScope::class, SecondScope::class
])->get();

Order based on a related model's average or the count

Did you ever need to order based on a related model's average or count? It's easy with Eloquent!

public function bestBooks()
{
    Book::query()
        ->withAvg('ratings as average_rating', 'rating')
        ->orderByDesc('average_rating');
}

Retrieve the Query Builder after filtering the results

To retrieve the Query Builder after filtering the results: you can use ->toQuery(). The method internally uses the first model of the collection and a whereKey comparison on the Collection models.

// Retrieve all logged_in users
$loggedInUsers = User::where('logged_in', true)->get();

// Filter them using a Collection method or php filtering
$nthUsers = $loggedInUsers->nth(3);

// You can't do this on the collection
$nthUsers->update(/* ... */);

// But you can retrieve the Builder using ->toQuery()
if ($nthUsers->isNotEmpty()) {
    $nthUsers->toQuery()->update(/* ... */);
}

Checking For Table/Column Existence

You may check for the existence of a table or column using the hasTable and hasColumn methods:

if (Schema::hasTable('users')) {
    // The "users" table exists...
}

if (Schema::hasColumn('users', 'email')) {
    // The "users" table exists and has an "email" column...
}

Use through instead of the map when using pagination

When you want to map paginated data and return only a subset of the fields, use through rather than map. The map breaks the pagination object and changes its identity. While through works on the paginated data itself

// Don't: Mapping paginated data
$employees = Employee::paginate(10)->map(fn ($employee) => [
    'id' => $employee->id,
    'name' => $employee->name
])

// Do: Mapping paginated data
$employees = Employee::paginate(10)->through(fn ($employee) => [
    'id' => $employee->id,
    'name' => $employee->name
])
$request->date() method

Get value from the session and forget

If you need to grab something from the Laravel session, then forget it immediately, consider using session()->pull($value). It completes both steps for you.

// Before
$path = session()->get('before-github-redirect', '/components');

session()->forget('before-github-redirect');

return redirect($path);

// After
return redirect(session()->pull('before-github-redirect', '/components'))

New Laravel v8.77: $request->date() method.

Now you don't need to call Carbon manually, you can do something like:

$post->publish_at = $request->date('publish_at')->addHour()->startOfHour();

These are some useful tips and tricks related to the Laravel framework, I hope that by following these tips you will improve the performance of your code and usability.

For more details visit this link

For More News & Updates, Follow me on Twitter/iamSumyyaKhan.

What's New in Laravel 9 - Features & Updates

sumyya khan — Tue, 01 Mar 2022 05:24:33 +0000

Laravel v9 is scheduled to be released around September of 2021, but the Laravel Crew decided to push this release back to January of 2022. Now Laravel has been released on 8 February 2022. The new version of the Laravel framework has been shipped with a variety of robust features and updates. Laravel 9 continues the improvements made in Laravel 8 by introducing support for Symfony 6.0 components, Symfony Mailer, Flysystem 3.0, improved route:list output, a Laravel Scout database driver, new Eloquent accessor/mutator syntax, implicit route bindings via Enums, and a variety of other bug fixes and usability improvements. Laravel 9.x requires a minimum PHP version of 8.0 and Flysystem 3.x.

Laravel 9 is the subsequent long-term support version (LTS) and will accept bug fixes until February 2024 and security fixes until February 2025. Here are some of the significant features that I want to share with you.

Flysystem 3.x

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

Improved Eloquent Accessors/Mutators

Improved Eloquent accessors/mutators was contributed by Taylor Otwell. Laravel 9.x provides a new way to define Eloquent accessors and mutators. In Laravel 9.x you can specify an accessor and mutator utilizing a single, non-prefixed method by type-hinting a return type of Illuminate\Database\Eloquent\Casts\Attribute:

use Illuminate\Database\Eloquent\Casts\Attribute;

public function name(): Attribute
{
    return new Attribute(
        get: fn ($value) => strtoupper($value),
        set: fn ($value) => $value,
    );
}

Enum Eloquent Attribute Casting

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

use App\Enums\ServerStatus;

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

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

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

    $server->save();
}

Slot Name Shortcut

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

<x-alert>
    <x-slot name="title">
        Server Error
    </x-slot>

    <strong>Whoops!</strong> Something went wrong!
</x-alert>

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

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

Controller Route Groups

Now you can utilize the controller method to define the common controller for all of the routes within the group. Then, when defining the routes, you only need to provide the controller method that they invoke:

use App\Http\Controllers\OrderController;

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

Laravel Scout Database Engine

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

Improved Ignition Exception Page

Spatie Ignition open-source exception debug page has been redesigned from the ground up. The new, improved Ignition ships with Laravel 9.x and it includes light/dark themes, customizable "open in editor" functionality, and many more.

Implicit Route Bindings With Enums

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

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

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

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

Above are some main features and updates of Laravel 9.x, If you want to explore more about Laravel 9, you can visit this link.

For More News & Updates, Follow me on Twitter/iamSumyyaKhan.