DEV Community: PostSrc

Top 3 stock images source for developers and designers

PostSrc — Mon, 15 Nov 2021 04:00:00 +0000

Stock Images is very important and it's used for many things from Designing, Web user interface assets, and many others. Below are the top 3 places where you can get these stock images for free and in high definition. You can use it in most of your projects for free with an exception which is to include and add credit when using the image.

The list below goes from the most popular one but regardless of that, all of them have many high-quality photos.

This post was originally published at PostSrc 🔥🔥🔥. If you like this kind of tutorial, I would really appreciate it if you give it a visit.

Unsplash Homepage

Unsplash

Unsplash has been around for some years and it's by far the largest collection of free stock images that's available on the internet. You can search almost anything or search it by category. It's also very convenient that they allow us to manipulate the image before downloading which means the image can be optimized before even downloading it.

Pexels Homepage

Pexels

The second on the list is Pexels, Which also provides many free stock images like Unsplash but it's just another platform. One thing that Pexels has is advanced image filtering and one of them is filter by color.

Pixabay Homepage

Pixabay

The last on the list is Pixabay and this is pretty much like Unsplash and Pexels. They have more than 1.8 million high-quality stock images.

Do mix and match these sources and make sure to credit the image to their owner if you are using it. Do let us know which other stock images collection in the comment below.

How to set up CodeMirror for Laravel project

PostSrc — Thu, 28 Oct 2021 02:00:00 +0000

This post was originally published at PostSrc 🔥🔥🔥. If you like this kind of tutorial, I would really appreciate it if you give it a visit.

In this post, you'll be learning to set up CodeMirror for your Laravel project. CodeMirror is a very versatile text editor implemented in JavaScript for the browser but in this tutorial, we'll be using CodeMirror to display code example and beautify it by applying language modes and themes.

Let's get Started

First, install the dependency via "npm" or "yarn".



yarn add codemirror

Next, create a new js file and name it "code-mirror.js" inside the resource folder. This will be passed on to Laravel Mix for processing.



# laravel mix

const mix = require('laravel-mix');

mix.js('resources/js/code-mirror.js', 'public/js');

Initialize CodeMirror Instance

The content of the "js/code-mirror.js" should be the import and initialization for CodeMirror. For this example, we'll be focusing on the PHP modes but if you plan to use it for other programming languages, do check out their other modes available on the documentation.



/* resources/js/code-mirror.js */

import CodeMirror from 'codemirror';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/mode/htmlmixed/htmlmixed.js';
import 'codemirror/mode/xml/xml.js';
import 'codemirror/mode/css/css.js';
import 'codemirror/mode/clike/clike.js';
import 'codemirror/mode/php/php.js';

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    theme: 'dracula',
    matchBrackets: true,
    mode: "application/x-httpd-php",
    indentUnit: 4,
    indentWithTabs: true,
    tabSize: 4,
    lineWrapping: true,
});

Import CodeMirror Style and Theme

It's important that you import the styling to show the CodeMirror editor itself. From your "scss" or "css" file do import as follows. Do note that the theme imported is the "dracula" theme, if you want other themes do check out their docs for the full theme that is provided out of the box.



/* code mirror */
@import '~codemirror/lib/codemirror.css';
@import '~codemirror/theme/dracula.css';

Reference the Script in Blade Layout

Finally reference the script in the blade layout file of your project. Do note that the code source that you want to render can be from any of your Laravel models, for example, Code / Post / Article / Demo model instance. Pass the code instance into the textarea like below and make sure the id is set to "code" since we are using it to initialize the CodeMirror instance.



<textarea id="code">{!! $model->code !!}</textarea>

<script src="{{ asset('/js/code-mirror.js') }}"></script>

Preview CodeMirror

Below is the preview of the CodeMirror editor on the browser and depending on the theme it will be displayed differently.

Extra: Using Highlight.Js

If you are interested in the other approach to highlight codes, you can have a look Using highlight.js on Laravel project.

By now you will have learned how to implement CodeMirror on your website in few simple steps. If you find this tutorial to be helpful do share it with others and cheers 🍻. happy coding!

Cheapest and best VPS for value

PostSrc — Thu, 21 Oct 2021 04:00:00 +0000

This post was originally published at PostSrc 🔥🔥🔥. If you like this kind of tutorial, I would really appreciate it if you give it a visit.

Virtual Private Server aka VPS are getting cheaper and cheaper nowadays and many providers provide very competitive offerings

Hetzner

Hetzner is one of our favorite hostings today and it values a lot for the money. We have used it for quite some time now and the performance that it delivers for its cost doesn't compare with other VPS providers.

For under less than 6 euro, we are getting specifications of 2 vCPU, 2GB of RAM, 40 GB of fast SSD storage, and 20TB of bandwidths which is insanely so much.

By far, this VPS provider has the best offering on the market and the value for the price is worth it. Claim Hetzner 30$ credit

Hetzner Homepage

Vultr

The second VPS that we would recommend is Vultr and the value is on point. They have different specifications just like Hetzner but with more different specs and configurations that we can choose to.

They are very reliable and have more regions around the globe. Claim Vultr $100 Credit

Vultr Homepage

Closing Note

These VPS are the ones that we both use and recommend.

How to add custom error pages with Nuxt Js

PostSrc — Thu, 21 Oct 2021 04:00:00 +0000

Error pages are very important to have and to add them to your Nuxt Js application, it's very straightforward and easy to implement. What we essentially need is an "error.vue" file inside the layouts folder and the code should be as follow.

Error template

<template>
  <div>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else-if="error.statusCode === 500">Internal Server error</h1>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
  export default {
    props: ['error'],
    // layout: 'error' // you can set a custom layout for the error page
  }
</script>

The code above should be named "error.vue" and this is a special template that Nuxt has set and it will accept a prop with error as its name. To know more of the available properties, do console log the error object or refer to this documentation of Nuxt Error Page section.

Getting previous and next record in Laravel

PostSrc — Sat, 28 Aug 2021 00:00:00 +0000

This post was originally published at PostSrc 🔥🔥🔥. If you like this kind of tutorial, I would really appreciate it if you give it a visit.

To be able to navigate around through the previous and next resources is a very handy feature to have. This will enable easy navigation between the record on both sides (left and right). The implementation is quite straight forward but certain logic has to be clearly defined to get the right result in the model.

Example Scenario

PostSrc previous and next post
Laracast previous and next episode series

There are several ways to implement this functionality and the simplest way is to use the Model Id. Since by right an Id auto increment, we can assume that the newest post will always have a higher number than the oldest post.

Previous and Next Implementation

To get the previous and next posts we'll be using the code below. Do note that it's within the controller that you have defined in, otherwise any other places suitable in your application.

function show(int $id)
{
    // get the current post
    $post = Post::find($id);

    // get previous post id
    $previous = Post::where('id', '<', $post->id)->max('id');

    // get next post id
    $next = Post::where('id', '>', $post->id)->min('id');

    return view('posts.show', compact('post', 'previous', 'next'));
}

In the example above we are getting the default post by querying using the "id". To get the previous and next post we make use of the where clause by getting the lowest and highest post model "id" value. Once we get the models, we are comparing them with the other models we are getting the "max" for the previous post and "min" for the next post and this essentially filters the model to get only one that matches the criteria.

Previous and Next Video / Episode

In other case scenarios where you are not making use of the model "id", you need to define a column such as "episode_number" where it will store the numeric value.

function show(int $id)
{
    // get the current episode
    $episode = Episode::find($id);

    // get previous episode number
    $previous = Episode::where('episode_number', '<', $post->episode_number)->max('episode_number');

    // get next episode number
    $next = Episode::where('episode_number', '>', $post->episode_number)->min('episode_number');

    return view('episodes.show', compact('episode', 'previous', 'next'));
}

How to implement a robots.txt file in a Nuxt Js project

PostSrc — Thu, 26 Aug 2021 04:00:00 +0000

Having a robots.txt file is very important as it helps control Google and other search engines such as Bing to index website content. This is because the first thing crawler check when visiting the website is if robots.txt exists, hence it determine when content should be crawled or not.

There are several ways to add robots.txt and it's as easy as writing down manually in the "statics" folder. But for this tutorial, we'll be using nuxtjs/robots as it's more flexible and the content of the robots.txt can be easily manipulated.

1 - Install nuxtjs/robots Package

First thing first, install the robots package and define it in the modules array of the nuxt.config.js

yarn add @nuxtjs/robots

To define the robots config we can pass an object, array, or function where each method has its own use cases.

export default {
  modules: [
    '@nuxtjs/robots'
  ],
  robots: {
    /* module options */
  }
}

2 - Simple configuration

In this case, define the code as following and it will allow all user agents (bot) to crawl the site. In contrast, if the value of DIsallow is "/" then we are not allowing it to crawl any of the pages.

export default {
  robots: {
    UserAgent: '*',
    Disallow: ''
  }
}

Multiple user agents configuration

If you want to specify a configuration for a different user agent, do pass the array of objects as the robots value and it will behave as defined.

export default {
  robots: [
    {
      UserAgent: 'Googlebot',
      Disallow: '/user',
    },
    {
      UserAgent: '*',
      Disallow: '/admin',
    },
  ]
}

Function configuration

You can also pass in a function as the robot's value and in this case define logic or conditionally define the value of the robot you want it to be.

export default {
  robots: () => {
    if (someLogicHere) {
      return {
        UserAgent: '*',
        Disallow: '/'
      }
    }
  }

3 - yarn dev / npm run dev

Finally, run "yarn dev" and now you can visit /robots.txt to see the value of the robots.txt that you have defined.

User-agent: Googlebot
Disallow: /users
User-agent: Bingbot
Disallow: /admin

This post was originally published at PostSrc 🔥🔥🔥. If you like this kind of tutorial, I would really appreciate it if you give it a visit.

Nuxt Js Social Meta Tags for Social Sharing

PostSrc — Mon, 26 Jul 2021 16:00:00 +0000

In this post, you'll learn how to add social meta tags for better search engine optimization and social sharing. This will ensure that social networks such as Facebook and Twitter can get the appropriate data to show when contents are shared hence also improve the Google search engine result.

Nuxt Social Meta

By default, the easiest way to add the metadata is to use Nuxt Social Share which is a community package that has been around for a while. This package is great for simple use but not flexible enough to control the data.

To get started the package all we have to do is install it using npm or yarn.

yarn add nuxt-social-meta

Include it in the modules config and define the property and value pairs representing your website details.

module.exports = {
  modules: [
    ...[
      "nuxt-social-meta",
      {
        url: "Site url",
        title: "Title",
        site_name: "Site name",
        description: "Site description",
        img: "Link to image in static folder",
        locale: "en_US",
        twitter: "@user",
        twitter_card: "summary_large_image",
        themeColor: "#theme-color",
      },
    ],
  ],
};

Once you have defined that, now do run "yarn dev" and view the "head" section of the page. The necessary meta tags are generated by it. That's great but it lacks customization and flexibility to control and change the data. For the above example, all pages will have the same metadata which is not ideal for it's purpose.

Custom Implementation Helper (Better Nuxt Social Meta)

The solution that I have come up with is to define a custom plugin that injects a simple function that will generate the head metadata and then call the function in the head meta property which is available on every page.

The first thing to do is to create the file of the plugin. Call it "social-meta.js" and in this file, you need to copy the following code as a boilerplate which you can fully customize with your heart content.

function socialMeta(options) {
    // All meta tags
    const metaTags = [
        // Global
        { name: "author", content: options.url },
        { name: "publisher", content: options.url },
        { name: "apple-mobile-web-app-title", content: options.title },
        { name: "theme-color", content: options.themeColor },

        // Facebook & LinkedIn
        { property: "og:title", content: options.title },
        { property: "og:description", content: options.description },
        { property: "og:type", content: "website" },
        { property: "og:url", content: options.url },
        { property: "og:image", content: options.img },
        { property: "og:image:alt", content: options.title + ' page cover' },
        { property: "og:locale", content: options.locale },
        { property: "og:site_name", content: options.site_name },

        // Twitter
        { name: "twitter:card", content: options.twitter_card },
        { name: "twitter:site", content: options.twitter },
        { name: "twitter:creator", content: options.twitter },
        { name: "twitter:title", content: options.title },
        { name: "twitter:description", content: options.description },
        { name: "twitter:image", content: options.img },
    ];

    // Add meta tags to head
    return metaTags.map((tag) => {
        if (tag.content !== undefined && tag.content !== null) {
            if (tag.hasOwnProperty("name")) {
                return {
                    hid: tag.name,
                    name: tag.name,
                    content: tag.content,
                }
            } else if(tag.hasOwnProperty("property")){
                return {
                    hid: tag.property,
                    property: tag.property,
                    content: tag.content,
                }
            }
        }
    })
}

export default ({ app }, inject) => {
    inject('socialMeta', socialMeta)
}

What the code above does is that we'll define the required metadata in an array of key-value pairs which in turn create a collection of objects stored in an array of metadatas.

Using the Helper

Now make use of the helper in any page you want the social meta to appear. In this case let's say the homepage of your Nuxt Js site.

head () {
    const description = 'Your website description here'

    return {
      title: 'Homepage',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: description
        },
        ...this.$socialMeta({
          url: "your-website.com",
          title: "Website Homepage",
          site_name: "Website",
          description: description,
          img: 'website-image.jpg',
          locale: "en",
          twitter: "@website-twitter-handle",
          twitter_card: "summary_large_image",
          themeColor: "#hex-color-theme",
        })
      ]
    }
  }

Run yarn dev and head over to the page that contains this data. Do note that this is valid if defined on the layout page, any other pages that contain the same code will override the content of the layout head content.

By now you should be able to customize and add any of the necessary head metadata on your own. If you have any suggestions do comment down below. If you find it helpful do share it with your friends and keep on learning. cheers 🍻

This post is originally published at PostSrc. If you like this kind of tutorial, I would really appreciate it if you give it a visit.

How to Terminate Horizon during Deployment in Laravel Forge

PostSrc — Mon, 26 Jul 2021 04:00:00 +0000

Laravel Horizon

Horizon is a beautiful dashboard for Laravel applications that make use of the Redis queue. In this short post, you'll learn how to terminate Horizon process on Laravel Forge deployment process.

Laravel Horizon dashboard

Deployment Scripts

Inside the deployment script, do add the command below and on each deployment, it will gracefully terminate the master Horizon process on the machine. Any of the jobs that horizon is processing will be completed then horizon will exit.

// existing deployment scripts

// command to terminate laravel horizon
php artisan horizon:terminate

Do note that you'll have to set up horizon daemon by accessing the "daemons" page on the dashboard and defining the configuration. The command would be "php artisan horizon" and the directory is the full path of where the website is located in the machine.

Laravel Forge New Daemon

By having a daemon, the horizon instance will automatically be restarted by the process monitor such as the supervisor upon each successful deployment.

Active Daemons in Laravel Forge

Hope this tutorial is helpful and happy learning.

This post is originally published at PostSrc. If you like this kind of tutorial, I would really appreciate it if you give it a visit.

Installing PostgreSQL on MacOS

PostSrc — Fri, 11 Jun 2021 12:00:00 +0000

This post was originally published at PostSrc 🔥🔥🔥. If you like this kind of tutorial, I would really appreciate it if you give it a visit.

There are several ways to install PostgreSQL on macOS and in this tutorial, you'll learn the easy way.

Installing PostgreSQL via DBngin

The first way is to install it using DBngin and it's a free all-in-one database version management tool that comes with other databases as well such as MySQL and Redis. Under the hood, it's using Homebrew and the setup process is very simple. DBngin comes with a very simple GUI and anything from creating, starting, and stopping the database server can be done with a simple one-click button.

DBngin Interface

To create a new database simply press the + button and fill in the details required.

DBngin Create new Database

What makes it special is the simple interface, simple database versioning, one press starting and stopping server and future updates right in one app.

Installing PostgreSQL via Homebrew The second method is to use the Homebrew package manager. Let's get started and first launch your terminal and run the command below one by one.

Update brew to get the latest package version from the source.

brew update

Run brew doctor to run diagnosis to check if there are any errors.

brew doctor

Install the latest version of PostgreSQL.

brew install postgresql

Starting the PostgreSQL server.

brew services start postgresql

If you want to stop then run the stop command.

brew services stop postgresql

Lastly, to view any running services run the services command.

brew services list

Do note that the command above installs the latest version of the database, if you want other versions you have to specify the version number. For example, if you want to install version 12 run the command like below.

brew install postgresql@12

Installing PostgreSQL via Postgres.app

The 3rd method is to use Postgres.app and this application works just like DBngin but only has PostgreSQL database. It comes with a simple user interface and you can start, stop, restart, update and perform other actions with a click of a button. Do give it a look and if you are interested to try, just visit the homepage since it provides very straightforward installation guides.

Installing PostgreSQL via Package Installer

The last method is to install it using the official package installer from PostgreSQL page. To get started just follow along with the installation wizard and you will have it installed in no time. It also comes with pgAdmin which is a database management tool that is quite handy to use.

Official PostgreSQL download page

By now you should have PostgreSQL installed on your macOS and if you come across any issue do start a new discussion below. Thanks for reading and if you find it helpful do share it with your friends.

New Programming Blog

PostSrc — Mon, 07 Jun 2021 01:32:03 +0000

I have been wanting to to have my own programming blog for a while now and since I have finally got the time, I have dedicated to spend it developing and maintining it. Please welcome PostSrc.com 😊.

PostSrc (Post Source) - a community of programmers sharing all things programming that includes a how-to tutorial, guides, and step by steps tutorial.

You can learn web and mobile development, programming guides, and tutorials ranging from topics including VueJS, NuxtJs, Laravel Framework, TailwindCSS, Flutter, and More.

If you have some free time do give it a visit and share it with your friends. #programming #blog #journey

How to easily switch between PHP versions on macOS?

PostSrc — Sun, 25 Oct 2020 04:00:00 +0000

In this post, we'll learn how to switch between PHP versions in the macOS system. Firstly I assume that PHP is installed using Homebrew and if you have not done so, do follow this tutorial on How to install PHP 8 on macOS Big Sur using Homebrew.

Using Homebrew

By right when using Homebrew, we can install multiple different versions of PHP at the same time but only use it one version at a time. To see which PHP version you have installed do run the command below and if you see it's ticked ✔︎ then it means it's installed.

brew search php

If none of the PHP is ticked then by default the PHP that's on the system is the default one shipped with macOS. Installing different versions is very important as many projects use a different version of PHP. In this case, let's assume that we have version 7.4 and 8.0.

By default PHP version on Homebrew is "php@7.3", "php@7.4" and "php" which means that the PHP that has no version number is the latest / highest version, in this current time of writing is version 8.0.

Changing PHP Version

To switch to the PHP version you can simply do run the command below. Switching from PHP version 7.4 to 7.3.

brew unlink php@7.4
brew install php@7.3
brew link php@7.3
php -v

Otherwise, if it's from PHP version 7.4 to 8.0 all you have to do is specify the version number.

brew unlink php@7.4
brew link php
php -v

Warning when switching

Sometimes there will be a warning while switching mentioning that linking should use "force" and if that's the case do use the flag option.

brew link php --force

That's all, by now you should be able to change to any PHP version that your project requires. One piece of advice is that it's better to have a project to always stay up to date so having maintained aka latest PHP version is always a good practice.

This post is originally published at PostSrc. If you like this kind of tutorial, I would really appreciate it if you give it a visit.

Deleting Laravel Redis Queue Jobs

PostSrc — Thu, 30 Jul 2020 04:00:00 +0000

There are several ways to delete Laravel Redis queue jobs and below are the available options.

Option 1 - Laravel Command

The first way to clear a Redis queue is to use the artisan queue clear:command and this is the easiest you can do. Just open up the terminal and type the command below.

php artisan queue:clear [connection] [queue]

This command also works with other queue types such as a database.

Option 2 - Redis CLI

The second way is to use the Redis command and you can access it by typing it below.

redis-cli

once you are in Redis CLI, just run the command below.

FLUSHDB

This will clear all of your Redis cached.

Option 3 - Laravel Facade

Thirdly, If you want to use Laravel facade then you can create a route closure or console command to run the Redis command.

use Redis;

Redis::command('flushdb');

BONUS: If you want then you can make use of Laravel tinker.

php artisan tinker

After that run the command the flushdb command by passing it to the method parameters.

\\Redis::command(‘flushdb’);

Above are some of the ways to clear out your Redis cache, there are other ways but those 3 ways above is the most common one and proven tested.

Thank you for reading the tutorial and I hope you managed to learn something. Do comment below to start the discussion of this topic. Cheers 🍻

This post was originally published at PostSrc 👑 🚀. If you like this kind of tutorial, I would really appreciate it if you give it a visit.