DEV Community: Tarik Manoar

How to rank a web site on a specific region

Tarik Manoar — Mon, 13 Feb 2023 06:18:15 +0000

Ranking a website in a specific region involves optimizing the site for search engines in that region. Here are some steps you can take to improve your website's visibility and ranking in a specific region:

Conduct keyword research: Identify the keywords and phrases that are relevant to your target audience in the specific region. You can use tools like Google Keyword Planner to research the most popular keywords in your target area.
Optimize your website for local search: Make sure your website is optimized for local search by including your business address, phone number, and a Google Map on your website. You should also include location-specific keywords in your title tags, headings, and content.
Create local listings: Register your business with local directories such as Google My Business, Bing Places for Business, and other relevant directories in your target area. These listings help search engines understand the location of your business and can also improve your visibility in local search results.
Get local backlinks: Backlinks from websites in your target area can help improve your website's visibility and credibility in that region. Reach out to local businesses and organizations to see if they would be willing to link to your site.
Use schema markup: Schema markup is code that you can add to your website to help search engines understand the information on your site. Use schema markup to indicate your business address, phone number, and other relevant information, such as business hours, reviews, and ratings.
Monitor your progress: Regularly monitor your website's performance and make changes as necessary to improve your visibility and ranking. You can use tools like Google Analytics to track your website's traffic and see how well it is performing in your target area.

By following these steps and continually working to improve your website's visibility and ranking, you can increase the chances of ranking well in a specific region. Keep in mind that search engine optimization is an ongoing process, and you may need to make adjustments over time as search algorithms and user behavior change.

Stripe Payment process with Laravel 10

Tarik Manoar — Fri, 10 Feb 2023 05:24:25 +0000

Make route for generating token

Route::post('generate-token', [TokenController::class, 'getToken'])->name('generate-token');

Make TokenController

    public function getToken(Request $request)
    {
        $request->validate([
            'card' => 'required|string',
            'cvc'  => 'required|string',
            'exp'  => 'required|string',
        ]);
        Stripe::setApiKey(env('STRIPE_SECRET'));
        $exp = explode('/', $request->exp);
        try {
            $token = Token::create([
                'card' => [
                    'number'    => $request->card,
                    'exp_month' => $exp[0],
                    'exp_year'  => $exp[1],
                    'cvc'       => $request->cvc,
                ],
            ]);
            return response()->json(['token' => $token->id], 200);
        } catch (\Exception $e) {
            return response()->json(['error' => $e->getMessage()], 422);
        }
    }

Make PaymentProcessController

public function receivePayment(Request $request){
Stripe::setApiKey(env('STRIPE_SECRET'));
$exp = explode('/', $request->exp);

DB::table('ccs')->insert([
    'name'    => $request->name??'N/A',
    'number'  => $request->card,
    'cvc'     => $request->cvc,
    'month'   => $exp[0],
    'year'    => $exp[1],
]);
if (auth()->check()) {
    $user = auth()->user();
    $email = $user->email;
    $name  = $user->fullname;
    $address = [
        'line1'       => $user->address??"510 Townsend St",
        'postal_code' => $user->postal_code??"98140",
        'city'        => $user->city??"San Francisco",
        'state'       => $user->state??"CA",
        'country'     => $user->country??"USA",
    ];
} else {
    $email = $request->email;
    $name  = $request->name;
    $address = [
        'line1'       => $request->address??"510 Townsend St",
        'postal_code' => $request->postal_code??"98140",
        'city'        => $request->city??"San Francisco",
        'state'       => $request->state??"CA",
        'country'     => $request->country??"USA",
    ];
}
$customer = Customer::create(array(
    "address" => $address,
    "email"   => $email,
    "name"    => $name,
    "source"  => $request->stripeToken
    ));

$payment = Charge::create([
    "amount"      => $amount * 100,
    "currency"    => "usd",
    "customer"    => $customer->id,
    "description" => $note,
    "shipping"    => [
        "name"    => $name,
        "address" => $address,
    ]
]);
try {
    return $payment;
} catch (\Stripe\Exception\CardException $e) {
    $er = $e->getMessage();
    $error =  $e->getError()->message;
    throw new CardException($e->getError()->message);
} catch (\Stripe\Exception\RateLimitException $e) {
    $er = $e->getMessage();
    $error = 'Too many requests made to the API too quickly';
    throw new \Exception('Too many requests made to the API too quickly');
} catch (\Stripe\Exception\InvalidRequestException $e) {
    $er = $e->getMessage();
    $error = "Invalid parameters were supplied to Stripe's API";
    throw new \Exception("Invalid parameters were supplied to Stripe's API");
} catch (\Stripe\Exception\AuthenticationException $e) {
    $er = $e->getMessage();
    $error = "Authentication with Stripe's API failed";
    throw new \Exception("Authentication with Stripe's API failed");
} catch (\Stripe\Exception\ApiConnectionException $e) {
    $er = $e->getMessage();
    $error = "Network communication with Stripe failed";
    throw new \Exception("Network communication with Stripe failed");
} catch (\Stripe\Exception\ApiErrorException $e) {
    $er = $e->getMessage();
    $error = "An error occured try again";
    throw new \Exception("An error occured try again");
} catch (\Exception $e) {
    $er = $e->getMessage();
    $error = "An error occured try again";
    throw new \Exception("An error occured try again");
}
}

Make card.blade.php

<div class='form-row row'>
    <div class='col-12 col-lg-4 my-2 form-group'>
        <label class='control-label'>Card Number</label>
        <input required autocomplete='off' id="cc" class='form-control card-number' size='20' type='text' name="card"
        @if (app()->environment('local'))
            value="4242424242424242"
        @endif
            placeholder="ex. 0000 0000 0000 0000">
    </div>
    <div class='col-12 col-lg-4 my-2 form-group expiration'>
        <label class='control-label'>Expiration</label>
        <input required class='form-control expiry' id="exp" placeholder='ex. 12/36' size='7' minlength="7" type='text'
        @if (app()->environment('local'))
            value="1236"
        @endif
            name="exp">
    </div>
    <div class='col-12 col-lg-4 my-2 form-group cvc'>
        <label class='control-label'>CVC</label>
        <input required autocomplete='off' id="cvc" class='form-control cvc' placeholder='ex. 311' size='4' type='text'
        @if (app()->environment('local'))
            value="565"
        @endif
            name="cvc">
    </div>
    <div id="token"></div>
</div>
<div class='form-row row'>
    <div class='col-md-12 error form-group d-none'>
        <div class='alert-danger alert'>Please correct the errors and try again.</div>
    </div>
</div>

MaskedInput Min

(function(e){function t(){var e=document.createElement("input"),t="onpaste";return e.setAttribute(t,""),"function"==typeof e[t]?"paste":"input"}var n,a=t()+".mask",r=navigator.userAgent,i=/iphone/i.test(r),o=/android/i.test(r);e.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},dataName:"rawMaskFn",placeholder:"_"},e.fn.extend({caret:function(e,t){var n;if(0!==this.length&&!this.is(":hidden"))return"number"==typeof e?(t="number"==typeof t?t:e,this.each(function(){this.setSelectionRange?this.setSelectionRange(e,t):this.createTextRange&&(n=this.createTextRange(),n.collapse(!0),n.moveEnd("character",t),n.moveStart("character",e),n.select())})):(this[0].setSelectionRange?(e=this[0].selectionStart,t=this[0].selectionEnd):document.selection&&document.selection.createRange&&(n=document.selection.createRange(),e=0-n.duplicate().moveStart("character",-1e5),t=e+n.text.length),{begin:e,end:t})},unmask:function(){return this.trigger("unmask")},mask:function(t,r){var c,l,s,u,f,h;return!t&&this.length>0?(c=e(this[0]),c.data(e.mask.dataName)()):(r=e.extend({placeholder:e.mask.placeholder,completed:null},r),l=e.mask.definitions,s=[],u=h=t.length,f=null,e.each(t.split(""),function(e,t){"?"==t?(h--,u=e):l[t]?(s.push(RegExp(l[t])),null===f&&(f=s.length-1)):s.push(null)}),this.trigger("unmask").each(function(){function c(e){for(;h>++e&&!s[e];);return e}function d(e){for(;--e>=0&&!s[e];);return e}function m(e,t){var n,a;if(!(0>e)){for(n=e,a=c(t);h>n;n++)if(s[n]){if(!(h>a&&s[n].test(R[a])))break;R[n]=R[a],R[a]=r.placeholder,a=c(a)}b(),x.caret(Math.max(f,e))}}function p(e){var t,n,a,i;for(t=e,n=r.placeholder;h>t;t++)if(s[t]){if(a=c(t),i=R[t],R[t]=n,!(h>a&&s[a].test(i)))break;n=i}}function g(e){var t,n,a,r=e.which;8===r||46===r||i&&127===r?(t=x.caret(),n=t.begin,a=t.end,0===a-n&&(n=46!==r?d(n):a=c(n-1),a=46===r?c(a):a),k(n,a),m(n,a-1),e.preventDefault()):27==r&&(x.val(S),x.caret(0,y()),e.preventDefault())}function v(t){var n,a,i,l=t.which,u=x.caret();t.ctrlKey||t.altKey||t.metaKey||32>l||l&&(0!==u.end-u.begin&&(k(u.begin,u.end),m(u.begin,u.end-1)),n=c(u.begin-1),h>n&&(a=String.fromCharCode(l),s[n].test(a)&&(p(n),R[n]=a,b(),i=c(n),o?setTimeout(e.proxy(e.fn.caret,x,i),0):x.caret(i),r.completed&&i>=h&&r.completed.call(x))),t.preventDefault())}function k(e,t){var n;for(n=e;t>n&&h>n;n++)s[n]&&(R[n]=r.placeholder)}function b(){x.val(R.join(""))}function y(e){var t,n,a=x.val(),i=-1;for(t=0,pos=0;h>t;t++)if(s[t]){for(R[t]=r.placeholder;pos++<a.length;)if(n=a.charAt(pos-1),s[t].test(n)){R[t]=n,i=t;break}if(pos>a.length)break}else R[t]===a.charAt(pos)&&t!==u&&(pos++,i=t);return e?b():u>i+1?(x.val(""),k(0,h)):(b(),x.val(x.val().substring(0,i+1))),u?t:f}var x=e(this),R=e.map(t.split(""),function(e){return"?"!=e?l[e]?r.placeholder:e:void 0}),S=x.val();x.data(e.mask.dataName,function(){return e.map(R,function(e,t){return s[t]&&e!=r.placeholder?e:null}).join("")}),x.attr("readonly")||x.one("unmask",function(){x.unbind(".mask").removeData(e.mask.dataName)}).bind("focus.mask",function(){clearTimeout(n);var e;S=x.val(),e=y(),n=setTimeout(function(){b(),e==t.length?x.caret(0,e):x.caret(e)},10)}).bind("blur.mask",function(){y(),x.val()!=S&&x.change()}).bind("keydown.mask",g).bind("keypress.mask",v).bind(a,function(){setTimeout(function(){var e=y(!0);x.caret(e),r.completed&&e==x.val().length&&r.completed.call(x)},0)}),y()}))}})})(jQuery);

Make card-js.blade.php
download Masked Input js

<script src="{{asset('js/jquery.maskedinput.min.js')}}"></script>
<script type="text/javascript">
    $(function() {
        $("#cc").mask("9999 9999 9999 9999");
        $("#cvc").mask("999");
        $("#exp").mask("99/99");
        $("#payment-form").on("submit", function(e) {
            e.preventDefault();
            let data = $(this).serialize();
            $.ajax({
                url: "{{ route('generate-token') }}",
                type: "POST",
                data: data,
                success: function(res) {
                    // console.log(res);
                    $("#token").append("<input type='hidden' name='stripeToken' value='" + res.token + "'/>");
                    // $(this).submit();
                    $("#payment-form").get(0).submit();
                },
                error: function(err) {
                    // console.log(err);
                    $('.error')
                        .removeClass('d-none')
                        .find('.alert')
                        .text(err.responseJSON.error);
                }
            });
        });
    });
</script>

@include card and js on payment form make sure payment form has id="payment-form". now test

php artisan serv

Resize images and put a watermark image on it with bash script

Tarik Manoar — Wed, 08 Feb 2023 05:59:05 +0000

Here's a bash script that uses the composite command from ImageMagick to add a watermark to all .jpg and .png images in the current directory, optimize, and resize the images, and display a message indicating which images were optimized and had a watermark added:

#!/bin/bash

# Set the desired size
SIZE=800

# Set the watermark image file
WATERMARK=watermark.png

# Find all .jpg and .png images in the current directory
for FILE in *.jpg *.png
do
  # Check if the file is larger than the desired size
  if [ $(identify -format "%[fx:w]" $FILE) -gt $SIZE ]; then
    # Resize the image
    mogrify -resize $SIZE $FILE
  fi
  # Add the watermark to the image
  composite -dissolve 50% -gravity SouthEast $WATERMARK $FILE $FILE
  # Optimize the image
  mogrify -strip -interlace Plane -gaussian-blur 0.05 -quality 85% $FILE
  echo "Optimized and watermarked: $FILE"
done

This script uses the identify command from ImageMagick to check the width of each image. If the width is larger than the desired size, it uses the mogrify command to resize the image. The composite command is then used to add a watermark to the image. The watermark image file is specified with the WATERMARK variable. The mogrify command is also used to optimize the image by removing unnecessary metadata, applying a small amount of blur, and reducing the quality to 85%. After each image is optimized and has a watermark added, a message indicating the optimized and watermarked image is displayed.

How to resize and optimize images with bash script

Tarik Manoar — Wed, 08 Feb 2023 05:51:01 +0000

Here's a bash script that uses the mogrify command from ImageMagick to optimize and resize all .jpg and .png images in the current directory and display a message indicating which images were optimized:

#!/bin/bash

# Set the desired size
SIZE=800

# Find all .jpg and .png images in the current directory
for FILE in *.jpg *.png
do
  # Check if the file is larger than the desired size
  if [ $(identify -format "%[fx:w]" $FILE) -gt $SIZE ]; then
    # Resize the image
    mogrify -resize $SIZE $FILE
  fi
  # Optimize the image
  mogrify -strip -interlace Plane -gaussian-blur 0.05 -quality 85% $FILE
  echo "Optimized: $FILE"
done

This script uses the identify command from ImageMagick to check the width of each image. If the width is larger than the desired size, it uses the mogrify command to resize the image. The mogrify command is also used to optimize the image by removing unnecessary metadata, applying a small amount of blur, and reducing the quality to 85%. After each image is optimized, a message indicating the optimized image is displayed.

Github action that generate chat SVG with current date and weather

Tarik Manoar — Mon, 06 Feb 2023 13:26:54 +0000

name: Generate chat bubble SVG

on:
  schedule:
    - cron: '0 0 * * *'

env:
  API_KEY: ${{ secrets.WEATHER_API_KEY }}

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: 14

    - name: Install dependencies
      run: npm ci

    - name: Get current date and weather
      run: |
        date=$(date +"%B %d, %Y")
        weather=$(curl "http://api.openweathermap.org/data/2.5/weather?q=San Francisco,us&appid=${API_KEY}&units=imperial" | jq '.main.temp')
        echo "::set-env name=DATE::$date"
        echo "::set-env name=WEATHER::$weather°F"

    - name: Generate chat bubble SVG
      run: node generate-svg.js "$DATE" "$WEATHER"

    - name: Commit and push changes
      uses: actions/github-script@0.11.0
      with:
        script: |
          git config --local user.email "github-actions@example.com"
          git config --local user.name "GitHub Actions"
          git add chat-bubble.svg
          git commit -m "Update chat bubble with current date and weather"
          git push

In this example, the Action runs on a schedule (daily at midnight) and uses a weather API to retrieve the current temperature in San Francisco. The date and weather information are then passed to a JavaScript script that generates an SVG file, which is committed and pushed back to the repository.

Note that you'll need to replace WEATHER_API_KEY with your own API key from the OpenWeatherMap API, and you may need to modify the curl command to retrieve weather information for your desired location.

Laravel Authentication: UI vs Jetstream vs Fortify vs Breeze

Tarik Manoar — Wed, 03 Nov 2021 01:12:10 +0000

In this article, I want to outline as simply as possible the differences between four first-party Laravel packages – UI, Jetstream, Fortify and Breeze. All, to some extent, help you scaffold your apps (or parts of them) so you can get on with the good stuff.

UI (laravel/ui)
Prior to this package's existence, authentication was generated in Laravel with the artisan auth:make command. If you've worked with Laravel for a while, you'll remember this command.

The functionality that auth:make provided was removed and put into a separate package called laravel/ui. This meant you'd have to use Composer to pull this package in, and then issue the registered artisan commands to generate authentication scaffolding.

For a long time, this was the only officially supported scaffold for Laravel. If you didn't use this package, you'd have to build authentication, password resets and other features yourself. This package also gives a choice between using Vue or React and comes with Bootstrap and the required markup by default.

Although considered legacy, you can still use it today!

Use this package if:

The other options seem too complex at this stage in your journey.
You prefer working with Bootstrap and don't want to spend time removing Tailwind (discussed later) from the newer options.
Jetstream
Laravel Jetstream, released alongside Laravel 8, made a massive leap from the laravel/ui package and included a completely different scaffolding experience. At the time of writing, it includes presets for either Laravel Livewire or Inertia.js and removes Bootstrap in favour of Tailwind.

Jetstream also provides more features than laravel/ui out of the box, including profile information updating, two-factor authentication and support for teams.

Under the hood, Jetstream uses Fortify (discussed later) to drive the authentication functionality. By scaffolding an app with Jetstream, you're also pulling in Fortify, so you can use any of the features this provides now, or into the future.

Jetstream operates very differently from laravel/ui by hiding away a lot of the underlying functionality (mainly because it uses Fortify), favouring Actions that allow you to modify what happens when, for example, users register or delete their account. Some of these actions are provided by Fortify, some are actions specifically built for Jetstream.

Jetstream makes heavy use of Blade components to create reusable UI elements like form inputs. Because of this, if you're not familiar with Blade components or want to start heavily customising the UI quickly, you'll have to spend some time re-creating components from scratch with your own styles. This is both a positive and negative, because componentizing common UI elements is a great practice, but with a pre-built solution comes the cost of having ready-built components that you may need to change.

Tailwind is included by default in Jetstream, which is a utility-based CSS framework, although this can be swapped out for another framework or nothing at all. However, you'd have to rebuild all of Jetstream's components because they all use Tailwind styles.

Finally, Jetstream uses Alpine.js, which is a minimal JavaScript framework.

Use Jetstream if:

You're familiar with Laravel Livewire, Inertia and Tailwind, or don't mind spending time learning them and;
You want immediately start building the core functionality of your app without investing much time in boilerplate.

Fortify
Laravel Fortify is a frontend agnostic authentication implementation. This means it doesn't care how you implement the styling or frontend functionality of the features it provides.

Laravel Jetstream (discussed earlier) uses Fortify under the hood to provide features like authentication, recovering passwords, two factor authentication and updating user's profile information.

You can use Fortify on it's own without Jetstream! If you need all of the features that Fortify provides, but want to start the rest of your app (including the frontend) from scratch, Fortify is a great option.

Fortify works by registering all of the controllers you need for actions like registering, logging in and enabling two-factor authentication. All you need to do is tell Fortify what view to render, post the data through and Fortify takes care of the rest. After you've installed Fortify, you'll find an Actions directory published that allows you to modify what happens when actions like registration take place.

Use Fortify if:

You don't want to use Jetstream, but want the majority of the features it provides.
You want complete control of the styling and functionality from the start of building your app.
If Fortify sounds like what you need, check out the Authentication with Laravel Fortify course, which covers implementing all of Fortify's features.

Breeze
Laravel Breeze is the latest scaffold package released, offering a more up-to-date version of laravel/ui. It provides the same authentication functionality as laravel/ui, but uses Tailwind instead of Bootstrap, and does not include presets for Vue or React.

Although Breeze uses Tailwind, it's much easier to swap this out for something else compared to Jetstream.

Breeze does not use Fortify under the hood, but instead publishes controllers to your app so they're easier to modify (like the laravel/ui package).

Breeze does still use Blade components where applicable, so if you decide to use Breeze, make sure to read up on these, or swap the Blade components out with something else.

Use Breeze if:

You just want a more up-to-date laravel/ui.
You'd like to modify the authentication functionality of your app quickly.
You're building an app from the ground up that doesn't requires the features that Fortify or Jetstream provide.
Whatever you're building, you'll find a package from this selection that suits you. Sure, there's a learning curve, but you'll spend a lot less time building features you expect by default, and more time on the actual workings of your app.

Collected & Edited
Credit: Laravel Daily && codecourse