DEV Community: Kalimah Apps

3 VSCode extensions I use for PHP development

Kalimah Apps — Mon, 17 Jul 2023 18:28:45 +0000

TL;DR
All the mentioned extensions are part of PHPKit extension.

This extension provides PHP code intelligence for VSCode. I have used it for a long time now and it is consistent and reliable. While it has a premium version, the free one is sufficient for most of my work. The autocompletion and the details on hover are the two most features I utilize.

You can stubs intelephense.stubs settings to make it aware of your code. This is a great feature if you develop, for example, with WordPress because there is a built-in stub for it.

However, for other projects you might struggle a little bit to find and add the stubs. For example, WooCommerce does not have a stub (I could not find any). With Laravel you need to use IDE Helper Generator for Laravel to assist the extension resolving Laravel specific functions.

2- PHP DocBlocker

One of the lacking areas for most developers is documentation. In many projects it is either missing or not complete. I won't go into the reasons for this, but one way to keep the code clear to others (and your future self) is to use docblocks.

This extensions makes the process very easy. If you place the cursor above a function, type /** and then press tab, it will generate a docblock with all related tags.

It is highly configurable but I never found myself needing to change the default values.

3- PHPTaqwim

This is one my latest extensions. It is a linter/formatter extension for PHP. I was motivated to create for a few reasons, but the main ones is lack of maintenance and documentation.

The extension provides an extensive set of rules and is thoroughly documented and is highly configurable.

One of the best features is that there is no need for PHP runtime. You don't need to configure PHP executable path at all! Just install and it should work on PHP files.

It also comes as a NPM package, which might be a better option for continuous integration tools.

Extend VSCode workspace settings from another file

Kalimah Apps — Sun, 16 Jul 2023 13:12:06 +0000

TL;DR

I created a VSCode extension, Tabaqa, to enable extending workspace settings from another source.

One of the great features of the VSCode is that you can customize the settings of the workspace. This is usually done by adding a setting.json file inside .vscode folder.

However, this causes few problems. For example if you push your project to a git repository and commit settings.json file, others who pull the code will have to use the same settings as you do.

Obviously they can customize the settings to their preferred way, but this means that they have to push the new changes to the repo (and change it for everyone else) or make sure they don't push it every time they add a new commit.

Another issue is when you have a monorepo. Typically you would have different projects adjacent to each other. Even though you might have a slight different settings for each project, you still need to duplicate all the settings across all projects.

These approaches well add extra time for maintenance and become a distraction from working on the project itself.

This is why I developed this extension, Tabaqa. It means layer in Arabic. The extension helps extending settings either from a parent folder, a file in the workspace or from a URL.

Getting started

The quickset way to add settings to your workspace is to create a file named tabaqa.json and place it inside the root .vscode. Create it with this content:

{
    "extends": "https://raw.githubusercontent.com/kalimahapps/configs/main/.vscode/settings.json"
}

Sidenote: I create a repo with settings that I use regularly. You can find it here: https://github.com/kalimahapps/configs/tree/main/.vscode. The URL above is referencing that repo.

If you save tabaqa.json file and restart VSCode, you will see that settings.json is created with the settings pulled from that URL. The settings will be applied to the currently opened workspace.

But what if you wanted to change some of these settings? You can add the changes to settings property inside tabaqa.json. For example,

{
    "extends": "https://raw.githubusercontent.com/kalimahapps/configs/main/.vscode/settings.json",
    "settings": {
        "editor.formatOnPaste": true
    }
}

The extension will pull the settings from the remote repo, apply editor.formatOnPast and update the workspace settings.

You can also extend from a file inside your project:

{
    "extends": "../path/to/file.json",
    "settings": {
        "editor.formatOnPaste": true
    }
}

Nested folders

Another way to extend settings is to inherit them from another tabaqa.json file up the folders tree. This is the default behavior. If you wanted to opt-out you can add root: true to tabaqa.json:

{
    "root": true,
    "extends": "../path/to/file.json",
    "settings": {
        "editor.formatOnPaste": true
    }
}

This will signal to the extension to stop searching up the tree and populate the settings at this level.

Tabaqa on VSCode

kalimahapps / tabaqa

Extendable and nested settings for VSCode

Tabaqa

Extendable and nested settings for VSCode

NOTE: Please be aware that this extension updates settings.json file. If you have any custom settings, please make sure to backup your settings.json file before installing this extension.

Extend VSCode settings from a parent folder, another file or a url. You can also nest settings by adding a tabaqa.json file inside a folder. The extension will look for the file and apply the settings to the current workspace.

How does it work?

The extension looks for a file names tabaqa.json inside the top level .vscode folder. If the file is found, it will read the file and apply the settings to the current workspace. The extension will inherit the settings from all tabaqa.json files up the folder tree until it reaches the root folder (or if root: true has been set).

See this folder structure as an example:

├── .vscode
│   └─ tabaqa.json

…

View on GitHub

👥 Connect
Twitter: @kalimahapps

VScode extension to format PHP using Typescript!

Kalimah Apps — Fri, 30 Jun 2023 17:29:01 +0000

It is true. I created a VSCode plugin using Typescript to lint and format PHP files.

Current status of PHP Linter tools

While PHP has been around for a long time, linting and formatting PHP files are not as supported or maitained as other languages (say Javascript or python).

PHP has built in linting switch php -l, but its only for syntax errors. It does not check for code style or formatting. This functionality can be easily added using many of the VSCode extensions.

In addition to that, there two popular libraries to lint/format PHP files:

1- PHP Code Sniffer

Has the most installs on packagist.
Not regularly maintained. Commits are few and far between.
Has an outdated documentation (last updated in 2016).
Uses xml for configuration which is an outdated format for configuration.

2- PHP CS Fixer

Highly maintined and regularly updated.
It has fewer installs than PHP Code Sniffer, but the margin is not that big.
Has a detailed documentation but it is still hard to navigate.
Uses PHP for configuration which is a better format than xml but still not ideal.

Unfortunately, both libraries are not easy to configure and setup. Also, both libraries have a number of VSCode extensions, but they require the path to PHP executable to be set in the configuration, which is not as easy as it sounds, at least in my experience.

This extension

PHPTaqwim (Arabic for correction) aims to be a simple and easy to use extension to lint and format PHP files. It requires no configuration and it works out of the box. It is also configurable if you want to customize it.

Interestingly, it is written in Typescript, not PHP. This is the reason that it does not require PHP runtime to be installed on your machine. It uses PHP Parser under the hood to get PHP AST and apply the rules.

It also comes as a NPM CLI package, so you can use it in your CI/CD pipeline.

PHPTaqwim on VSCode

Vue Options to Composition API Online Converter

Kalimah Apps — Wed, 24 May 2023 12:05:38 +0000

If you are reading this, chances are you have old projects using Vue2 options API and you want to migrate it to Vue3.

One of the main features that were introduced in vue3 is composition API. It helps writing a code that resembles "regular" JavaScript functions.

While Vue team has provided backward compatibility for options API, it is still a good idea to migrate the code to get the benefit of the new features in Vue3 and have a more maintainable code.

However, many developers choose not to migrate for a multitude of reasons.

Migration might introduce new bugs to a rather working code (if the code is not broke don't fix it).
There is a learning curve required when rewrite the code with the new features.
Busy schedule. Most developers work on few projects simultaneously and do not have enough time for improving old code.

This is why I developed this online tool. It converts options API to composition API without much effort from the developers.

Click to see example
The tool can convert this code:

// https://github.com/gitlabhq/gitlabhq/blob/e6d048d769240760008f0dbb6b811e1ebc675292/app/assets/javascripts/ide/components/repo_tab.vue#L3

import { GlIcon, GlTab } from '@gitlab/ui';
import { mapActions, mapGetters } from 'vuex';
import { __, sprintf } from '~/locale';

import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue';
import FileStatusIcon from './repo_file_status_icon.vue';

export default {
  components: {
    FileStatusIcon,
    FileIcon,
    GlIcon,
    ChangedFileIcon,
    GlTab,
  },
  props: {
    tab: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      tabMouseOver: false,
    };
  },
  computed: {
    ...mapGetters(['getUrlForPath']),
    closeLabel() {
      if (this.fileHasChanged) {
        return sprintf(__('%{tabname} changed'), { tabname: this.tab.name });
      }
      return sprintf(__('Close %{tabname}'), { tabname: this.tab.name });
    },
    showChangedIcon() {
      if (this.tab.pending) return true;

      return this.fileHasChanged ? !this.tabMouseOver : false;
    },
    fileHasChanged() {
      return this.tab.changed || this.tab.tempFile || this.tab.staged || this.tab.deleted;
    },
  },

  methods: {
    ...mapActions(['closeFile', 'updateDelayViewerUpdated', 'openPendingTab']),
    clickFile(tab) {
      if (tab.active) return;

      this.updateDelayViewerUpdated(true);

      if (tab.pending) {
        this.openPendingTab({ file: tab, keyPrefix: tab.staged ? 'staged' : 'unstaged' });
      } else {
        this.$router.push(this.getUrlForPath(tab.path));
      }
    },
    mouseOverTab() {
      if (this.fileHasChanged) {
        this.tabMouseOver = true;
      }
    },
    mouseOutTab() {
      if (this.fileHasChanged) {
        this.tabMouseOver = false;
      }
    },
  },
};

To this

import { GlIcon, GlTab } from '@gitlab/ui';
import { mapActions, mapGetters } from 'vuex';
import { __, sprintf } from '~/locale';
import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue';
import FileStatusIcon from './repo_file_status_icon.vue';
import { ref, computed } from 'vue';


// Data
const tabMouseOver = ref('false');

// Props
const props = defineProps({
    tab: {
        type: Object,
        required: true,
    },
});

// Computed
const closeLabel = computed(() => {
    if (fileHasChanged.value) {
        return sprintf(__('%{tabname} changed'), { tabname: props.tab.name });
    }
    return sprintf(__('Close %{tabname}'), { tabname: props.tab.name });
})

const showChangedIcon = computed(() => {
    if (props.tab.pending) return true;

    return fileHasChanged.value ? !tabMouseOver.value : false;
})

const fileHasChanged = computed(() => {
    return props.tab.changed || props.tab.tempFile || props.tab.staged || props.tab.deleted;
})


// Methods
const clickFile = function(tab) {
    if (tab.active) return;

    this.updateDelayViewerUpdated(true);

    if (tab.pending) {
        this.openPendingTab({ file: tab,
            keyPrefix: tab.staged ? 'staged' : 'unstaged' });
    } else {
        this.$router.push(this.getUrlForPath(tab.path));
    }
}

const mouseOverTab = function() {
    if (this.fileHasChanged) {
        tabMouseOver.value = true;
    }
}

const mouseOutTab = function() {
    if (this.fileHasChanged) {
        tabMouseOver.value = false;
    }
}

You can see the tool here: https://kalimah-apps.com/vue-options-to-composition

When you use this tool please remember that it does not cover all cases. It is useful to get you a step head and remove one hurdle from the code migrating process.

If you would like to contribute, report a bug or request a feature you can check the repo at GitHub:

kalimahapps / vue-options-to-composition

Online tool to convert vue2 options to vue3 composition API

Vue Options to Composition API Converter

Introduction

This is an online tool to convert Vue 2 options API code to Vue 3 composition API code.

Example

Input Vue 2 options API code:

export default {
    data:{
      items: [],
      list: {},
    },
  props: ['loading', 'lazy', 'disabled'],
  methods:{
    isLazy(){
      return this.lazy;
    },
    isLoading: function(){
      return this.loading;
    },
    isDisabled: () => {
      return this.disabled;
    }
  },
  watch:{
    loading(newValue){
      console.log("Value", newValue);
    },
    disabled:{
      immediate: true,
    handler(value) {
      this.bar = value;
    }
    }

  }
}

Output Vue 3 composition API code:

import {

…

View on GitHub

4 VSCode extensions I use when developing with Tailwind

Kalimah Apps — Thu, 06 Apr 2023 01:34:41 +0000

TL;DR

All these extensions are available in this VSCode extension pack TailwindCSS Kit

1. Tailwind CSS IntelliSense

Tailwind CSS IntelliSense is a powerful tool that can help developers to write code faster and more efficiently. The tool provides real-time suggestions for Tailwind CSS classes, reducing errors and improving code quality. By using IntelliSense, developers can increase productivity, reduce the learning curve, and improve the accessibility of their applications. If you are a developer working with Tailwind CSS, be sure to take advantage of this powerful feature.

2. Tailwind Fold

This extension is extremely helpful when working with Tailwind. Long list of classes can clutter the html part and this extension provide a great way of hiding them away and show them only when needed. In addition to the default functionality, the options are well-thought and fit almost any preference. For example, I like the classes to be unfolded when I click on the line not the class itself, and there is an option for that.

I gave the extension 5 stars rating but there is one issue I would like to see improved. I use eslint with eslint tailwind plugin which breaks long classes into multiple lines. The extension does not seem to fold classes that spans over multiple lines.

3. Tailwind Documentation

The Tailwind Documentation extension provides quick access to the official Tailwind CSS documentation. This extension enables developers to access the Tailwind CSS documentation directly from within the VSCode editor, without having to open a browser or leave the editor.

4. Tailwind Config Viewer

Tailwind config can be confusing. They might expand exponentially and make it harder for users to know the resolved config. This is why I created this extension. It enables users to view the resolved Tailwind config and it will also show the color for any color-related classes (text-*, bg-*, accent-* ... etc)

In future, I am planning to make the classes clickable so when a user clicks on a class it will be inserted in html section.

👥 Connect
Twitter: @kalimahapps
GitHub: KalimahApps
Website: https://kalimah-apps.com/
CodePen: https://codepen.io/khr2003

My Other Posts

Increase tailwind classes readability with this eslint plugin

Kalimah Apps — Sun, 05 Mar 2023 15:58:56 +0000

Tailwind is a popular utility-first CSS framework that has gained significant traction in recent years. It is a highly customizable and easy-to-use framework that can help developers streamline their workflow and create visually appealing websites with less code.

One of the biggest advantages of using Tailwind is that it streamlines the development process. The framework provides a set of pre-defined classes that developers can use to style their HTML elements. This eliminates the need to write custom CSS for every single element on the website, saving a significant amount of time and effort.

With such large amounts of pre-defined classes, sometimes it can be difficult to read and understand at first glance how a particular element is styled.

Let's look at this example (taken from flowbite):



<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" value="" class="sr-only peer">
  <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
  <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Toggle me</span>
</label>

This is a checkbox that has been styled using Tailwind. It is a single line of code that contains a lot of information. It is not immediately clear how the checkbox is styled.

This is why I developed an eslint plugin that helps developers to better understand how Tailwind classes are being used in their code. The plugin is called @kalimahapps/eslint-plugin-tailwind and it is available on npm. Currently, it has two rules.

tailwind-multiline

With this rule, you can enforce that Tailwind classes are written on multiple lines once they exceed a certain number of characters. This makes it easier to read and understand how the element is styled.

Let's see how the above example would look like with this rule enabled:



<label class="relative inline-flex items-center cursor-pointer">
    <input type="checkbox" value="" class="sr-only peer">

    <div
        class="w-11
            h-6
            bg-gray-200
            peer-focus:outline-none
            peer-focus:ring-4
            peer-focus:ring-blue-300
            dark:peer-focus:ring-blue-800
            rounded-full
            peer
            dark:bg-gray-700
            peer-checked:after:translate-x-full
            peer-checked:after:border-white
            after:content-['']
            after:absolute
            after:top-[2px]
            after:left-[2px]
            after:bg-white
            after:border-gray-300
            after:border
            after:rounded-full
            after:h-5
            after:w-5
            after:transition-all
            dark:border-gray-600
            peer-checked:bg-blue-600"
    />

    <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Toggle me</span>
</label>

As you can see, the classes are now written on multiple lines and from first glance you can identify which classes are being used to style the element.

tailwind-sort

This is the other rule that is included in the plugin. It helps developers to sort the Tailwind classes in a consistent manner. While tailwind provides a prettier plugin to sort the classes, I found it unintuitive and not very useful. The classes in the base layer will be sorted first, followed by the classes in the components layer, and finally the classes in the utilities layer.

This rule, however, sorts classes alphabetically but in groups. For example, it makes sense that bg-sky-500 and dark:bg-sky-100 are grouped together. This is because they are both background colors. The same goes for text-sky-500 and dark:text-sky-100.

Let's see how the above example would look like with this rule enabled:



<label class="cursor-pointer inline-flex items-center relative">
    <input type="checkbox" value="" class="peer sr-only">

    <div
        class="bg-gray-200
            after:bg-white
            dark:bg-gray-700
            h-6
            after:h-5
            peer
            dark:peer-focus:ring-blue-800
            peer-checked:after:border-white
            peer-checked:after:translate-x-full
            peer-checked:bg-blue-600
            peer-focus:outline-none
            peer-focus:ring-4
            peer-focus:ring-blue-300
            rounded-full
            after:rounded-full
            w-11
            after:w-5
            after:absolute
            after:border
            after:border-gray-300
            after:content-['']
            after:left-[2px]
            after:top-[2px]
            after:transition-all
            dark:border-gray-600"
    />

    <span class="font-medium ml-3 text-gray-900 dark:text-gray-300 text-sm">Toggle me</span>
</label>

I think this is a much more readable and understandable way to write Tailwind classes.

Install and Usage

Currently, the package only works for vue projects. To install and use this plugin in your project checkout readme file:

kalimahapps / eslint-plugin-tailwind

ESLint plugin to sort tailwind classes

KalimahApps Eslint Tailwind Plugin

Provide eslint rules for tailwindcss

✨ Rules

tailwind-sort: Sort tailwind classes in alphabetical order in groups
tailwind-multiline: Break tailwind classes into multiple lines if they exceed the max line length (default: 80)

💽 Installation

PNPM

pnpm add eslint @kalimahapps/eslint-plugin-tailwind -D

NPM

npm install eslint @kalimahapps/eslint-plugin-tailwind -D

🔧 Usage

Create eslint.config.js file (or eslint.config.mjs for esm, or eslint.config.cjs for commonjs) in the root of your project and add this

import kalimahAppsTailwind from '@kalimahapps/eslint-plugin-tailwind';

export default [
    {
        plugins: {
            kalimahAppsTailwind,
        },
        rules: {
            'kalimahAppsTailwind/sort': 'warn',
            'kalimahAppsTailwind/multiline': 'warn',
        },
    },
]

The following options can be set to the mutiline rule:

maxLen: break classes as soon as the line length is longer than this (and join if the line is smaller)
quotesOnNewLine: put the quotes on different lines to the first and last…

View on GitHub

👥 Connect
Twitter: @kalimahapps

Toggle maintenance mode in Laravel using web routes

Kalimah Apps — Mon, 09 Jan 2023 14:19:55 +0000

As a web developer, it’s important to keep your website up to date and running smoothly. However, sometimes you need to perform maintenance on your site and you don’t want your users to see any errors or downtime. That’s where Laravel’s maintenance mode comes in handy.

Laravel’s maintenance mode allows you to put your website into a state where it is only accessible to authorized users, such as admins or developers. This allows you to perform updates or make changes to your site without disrupting your users’ experience.

Enabling maintenance mode using CLI

To enable maintenance mode, you simply need to run the following command in your terminal:

php artisan down

This will create a maintenance mode “lock” file in your storage directory, which will prevent any users from accessing your site.

ℹ️ Note
The lock file is named "down" and it will be created in the storage/framework directory.

If you need to access your website while it’s in maintenance mode, you can use the --secret option to specify a secret endpoint that will create a browser session allowing you to bypass the maintenance mode:

php artisan down --secret=secret-route-to-allow-certain-users-to-access-the-application

You can then access your site by appending the secret route to your site’s URL:

https://example.com/secret-route-to-allow-certain-users-to-access-the-application

Once you’ve finished your maintenance tasks, you can simply run the following command to disable maintenance mode:

php artisan up

This will remove the maintenance mode lock file and allow all users to access your site again.

Enabling maintenance mode using web endpoints

The above method is fine and it works well. However, it is not convenient as you would need to SSH into your server to run the commands.

To manage maintenance mode from your browser, you can add custom routes to your routes/web.php file.

To enable maintenance mode, you can add the following route:

Route::get(
    '/enable-maintenance-mode',
    function () {
        Artisan::call( 'down', [
            '--secret' => 'allow-certain-users-to-access-the-application-using-this-secret',
        ] );

        dd( Artisan::output() );
    }
);

Notice that we are using the Artisan::call() method to run the down command. We are also passing the --secret option to specify a secret route that will create a browser session allowing you to bypass the maintenance mode.

To disable maintenance mode, you can add the following route:

Route::get(
    '/disable-maintenance-mode',
    function () {
        Artisan::call( 'up' );
        dd(Artisan::output());
    }
);

Bounce: Custom maintenance mode page

The default maintenance mode page is not that great.

It does the job but it does not provide any extra information to the user about why the website is down, when it will up again.

If you want to display a custom maintenance mode page, you can use the --render option to specify a view that will be displayed to your users:

php artisan down --render=custom-view

or using the Artisan::call() method:

Route::get(
    '/enable-maintenance-mode',
    function () {
        Artisan::call( 'down', [
            '--secret' => 'allow-certain-users-to-access-the-application-using-this-secret',
            '--render' => 'custom-view',
        ] );

        dd( Artisan::output() );
    }
);

Now you can create a custom-view.blade.php file in your resources/views directory and add any content you want to display to your users.

Goodbye prettier, welcome ESLint

Kalimah Apps — Mon, 09 Jan 2023 02:04:33 +0000

Like many developers I have used prettier for a long time for most of my projects. It has been the go-to formatting tool for front-end developers and for a good reason. It provides opinionated formatting with minimal options. This coupled with a wide IDE support makes it easy to setup and user.

Unfortunately being opinionated has its downsides. It is not possible to configure prettier to your liking. For example, I prefer to have a trailing comma in my objects and arrays. This is not possible with prettier. I also prefer to have a space after the function keyword. This is also not possible with prettier. A quick search on prettier’s GitHub issues shows that there are many requests for these features. The maintainers have been very clear that they do not want to add these features. They want to keep prettier simple and opinionated.

The other issue is that prettier does not work well with ESLint. While prettier website provides a guide on how to integrate with linters, it is a still a combersome process. I can't remember how many times I tried to make them work together and failed.

Enter ESLint

ESlint, like prettier, needs no introduction. It is a linting tool with great support. It is also highly configurable. By highly I mean it has 300+ rules (or options) listed on its website. In addition to that there are many plugins that provide more rules for various part of your project. Lastly, you can write your own rules if you want to.

While being highly configurable is a good thing, it represents the other extreme to prettier. It is easy to get overwhelmed by the number of options and rules. This is why I prefer to use a preset that provides a good set of rules and plugins. There are many presets available, like airbnb, standard, xo, etc. I have used many of them and they seem to work well. However, I have found that they are not perfect for my projects. Especially that I work mostly with vue projects.

That is why I created a sharable config for ESLint that I use in my projects. It comes with great defaults and include popular plugins like unicorn, promise, jsdoc, vue and other eslint plugins.

How to use it

You can install it using npm or yarn:

npm install --save-dev @kalimahapps/eslint-config
yarn add --dev @kalimahapps/eslint-config

Then add the following to your .eslintrc.js file:

module.exports = {
  extends: ["@kalimahapps"],
}

Then add this to your .vscode/settings.json file to auto-fix on save:

{
    "prettier.enable": false,
    "editor.formatOnSave": false,
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
}

Where to find it

GitHub

kalimahapps / eslint-config

Comprehensive eslint rules for vue projects with typescript

KalimahApps Eslint Config

Comprehensive eslint rules for vue projects with typescript

✨ Features

Includes unicorn, jsdoc, vue and other eslint plugins
No prettier.
Tabs and semicolons.
Configurable rules.
Sort package.json and .vscode/settings.json files.

While this config is tailored for vue projects, it can be used for any javascript/typescript project. You might see some duplication in the rules, but nothing major.

💽 Installation

PNPM

pnpm add eslint @kalimahapps/eslint-config -D

NPM

npm install eslint @kalimahapps/eslint-config -D

🔧 Usage

Create eslint.config.js file (or eslint.config.mjs for esm, or eslint.config.cjs for commonjs) in the root of your project and add this

import eslintConfig from '@kalimahapps/eslint-config';
export default [...eslintConfig];

VSCode integration

Install ESLint extension in VSCode and add this to your .vscode/settings.json file

{
    "prettier.enable": false
    "editor.formatOnSave": false,
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript

…

View on GitHub

NPM

@kalimahapps/eslint-config - npm

Comprehensive and configurable ESLint config for Vue 3 projects with TypeScript support. Latest version: 1.2.91, last published: 9 months ago. Start using @kalimahapps/eslint-config in your project by running `npm i @kalimahapps/eslint-config`. There is 1 other project in the npm registry using @kalimahapps/eslint-config.

npmjs.com

Adding inheritAttr in vue3 using setup with vite

Kalimah Apps — Sat, 11 Jun 2022 05:30:13 +0000

When using vue3 composition API you can utilize setup in script tag to write less boilerplate code which makes it easy to maintain in future.

All top-level bindings can be used directly used in the template tag. See this example:



<script setup>
// variable
const msg = 'Hello!'

// functions
function log() {
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
</template>

While this is great in making code more readable it comes with downfalls. Most notable inability to disable attribute inheritance inside script tag with setup attribute.

So in order to disable attribute inheritance using setup you need to add two script tags.



<script>
// use normal <script> to declare options
export default {
  inheritAttrs: false
}
</script>

<script setup>
// ...setup logic
</script>

This works fine but it defies the purpose of writing less boilerplate code.

Using vite, the amazing build tool, I developed a plugin that will enable you to omit the extra <script> declaration.

The new syntax will be like



<script setup inherit-attrs="false">
// ...setup logic
</script>

And that's it. The plugin will add the second <script> tag automatically with inheritAttrs: false.

You can find the plugin, installation and configuration steps here:

kalimahapps / vite-plugin-vue-setup-inherit-attrs

Add inherit-attrs support for vue3 using vite

vite-plugin-vue-setup-inherit-attrs

Add support for inheritAttrs in vue-setup using vite

[!WARNING] You don't need this plugin if you are using Vue 3.3+

Use defineOptions instead.

Install

npm install vite-plugin-vue-setup-inherit-attrs -D

Usage

In vite.config.ts import the plugin and add plugins array:

import { defineConfig, Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import inheritAttrs from 'vite-plugin-vue-setup-inherit-attrs';

export default defineConfig({
  plugins: [vue(), inheritAttrs()],
})

In vue template add inherit-attrs="false":

<template>
  <div class="root-element">
      <div class="nested-element" v-bind="$attrs">
          $attrs will be added to this element instead of the root element
      </div>
  </div>
</template>

<script lang="ts" setup inherit-attrs="false">
  // code here
</script>

Config

No config needed :)

Change Log

1.0.4

Moved…

View on GitHub

Trace activity in WordPress

Kalimah Apps — Sat, 26 Jun 2021 02:20:45 +0000

One of the areas that WordPress lacks is logging user activity. In particular the activity of site admins and editors. This is a vital feature as it helps trace back any actions that have caused error or for general troubleshooting.

An attempt has been made to fill this gap with a number of plugins. However, these plugins have some shortcomings make them not very useful (as I have experienced) when debugging errors. The plugins either provide full features for premium version, or generally do not display all the useful information when changes are logged.

That is why I created Nashaat Activity Log plugin. This plugin will log information about most of the changes that occur in WordPress admin area.
Here are some examples what the plugin logs:

Post changes (content, options, title, excerpt .. etc).
Plugins and themes activation, deactivation, installation, removal and theme switch.
Website updates (core, plugins and themes)
Taxonomy changes
Widget changes (order, adding or deleting)
Users changes (profile changes, registration, removal)
Login attempts. This is a very useful feature as the plugin records failed attempts with IP address. It will help detecting brute force attacks and possibly blocking the offending IP address.

There are also many other areas where the plugin logs users activity.

This is an example of how logs appear.

And this is an example of filtering:

New features will be soon added. Currently I am working on adding support for WooCommerce changes (settings, products, tags .. etc). And later I am planning to add support for most popular plugins such as Yoast SEO, Gravity Forms, Advanced Custom Fields (ACF), WPForms, bbPress, Contact Form 7 and Easy Digital Downloads.

To download the plugin you can search for Nashaat Activity Log from your WP plugins page and install it. Or you can download it from this link:

👉 https://wordpress.org/plugins/nashaat-activity-log/

If you face any issues please submit a question in the support forum: https://wordpress.org/support/plugin/nashaat-activity-log/.

Enable Gutenberg editor in WooCommerce

Kalimah Apps — Fri, 12 Feb 2021 08:55:12 +0000

WooCommerce 5.0 has recently been released with new features and improvements but sill no support for Gutenberg, WordPress block editor, while creating products. It is ironic since WooCommerce provides a number of good blocks that can be added to pages and posts but not in products.

In this quick tutorial I will show you how to activate Gutenberg for products and resolve some of the issues that occur with this activation.

NOTE: All code here can be added to functions.php file in your theme.

Enable block editor

To enable Gutenberg you can use 'use_block_editor_for_post_type' filter by simply adding these lines:



function activate_gutenberg_product( $can_edit, $post_type ) {

    if ( $post_type == 'product' ) {
        $can_edit = true;
    }
    return $can_edit;
}
add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );

The above code will enable the new editor for product post type but you will notice that categories and tags have disappeared.

Enable taxonomies

WordPress custom post types have a argument 'show_in_rest' (available since 4.7.0) which enables the retrieval and modification of post type using REST API.

Using 'woocommerce_taxonomy_args_product_cat' and 'woocommerce_taxonomy_args_product_tag' filters we can enable REST.



function enable_taxonomy_rest( $args ) {
    $args['show_in_rest'] = true;
    return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );

Catalog visibility

Once you enable Gutenberg editor, catalog visibility will not appear. This is because 'post_submitbox_misc_actions' action is not supported in Gutenberg editor.

One way to resolve is to hook into Gutenberg slots like PluginPostStatusInfo but that is a rocky road and which will require spending long hours and might not get you the required results.

The easy way is to utilize WooCommerce built in functions to add this feature. And since WooCommerce JavaScript files are already loaded we don't have to do add any scripts, only the PHP part.

First add a metabox:



function register_catalog_meta_boxes() {
    global $current_screen;
    // Make sure gutenberg is loaded before adding the metabox
    if ( method_exists( $current_screen, 'is_block_editor' ) && $current_screen->is_block_editor() ) {
        add_meta_box( 'catalog-visibility', __( 'Catalog visibility', 'textdomain' ), 'product_data_visibility', 'product', 'side' );
    }
}
add_action( 'add_meta_boxes', 'register_catalog_meta_boxes' );

Then we take add the function 'product_data_visibility' from WooCommerce source with few changes:



function product_data_visibility( $post ) {

    $thepostid          = $post->ID;
    $product_object     = $thepostid ? wc_get_product( $thepostid ) : new WC_Product();
    $current_visibility = $product_object->get_catalog_visibility();
    $current_featured   = wc_bool_to_string( $product_object->get_featured() );
    $visibility_options = wc_get_product_visibility_options();
    ?>
<div class="misc-pub-section" id="catalog-visibility">
    <?php esc_html_e( 'Catalog visibility:', 'woocommerce' ); ?>
    <strong id="catalog-visibility-display">
        <?php

        echo isset( $visibility_options[ $current_visibility ] ) ? esc_html( $visibility_options[ $current_visibility ] ) : esc_html( $current_visibility );

        if ( 'yes' === $current_featured ) {
            echo ', ' . esc_html__( 'Featured', 'woocommerce' );
        }
        ?>
    </strong>

    <a href="#catalog-visibility"
       class="edit-catalog-visibility hide-if-no-js"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a>

    <div id="catalog-visibility-select" class="hide-if-js">

        <input type="hidden" name="current_visibility" id="current_visibility"
               value="<?php echo esc_attr( $current_visibility ); ?>" />
        <input type="hidden" name="current_featured" id="current_featured"
               value="<?php echo esc_attr( $current_featured ); ?>" />

        <?php
        echo '<p>' . esc_html__( 'This setting determines which shop pages products will be listed on.', 'woocommerce' ) . '</p>';

        foreach ( $visibility_options as $name => $label ) {
            echo '<input type="radio" name="_visibility" id="_visibility_' . esc_attr( $name ) . '" value="' . esc_attr( $name ) . '" ' . checked( $current_visibility, $name, false ) . ' data-label="' . esc_attr( $label ) . '" /> <label for="_visibility_' . esc_attr( $name ) . '" class="selectit">' . esc_html( $label ) . '</label><br />';
        }

        echo '<br /><input type="checkbox" name="_featured" id="_featured" ' . checked( $current_featured, 'yes', false ) . ' /> <label for="_featured">' . esc_html__( 'This is a featured product', 'woocommerce' ) . '</label><br />';
        ?>
        <p>
            <a href="#catalog-visibility"
               class="save-post-visibility hide-if-no-js button"><?php esc_html_e( 'OK', 'woocommerce' ); ?></a>
            <a href="#catalog-visibility"
               class="cancel-post-visibility hide-if-no-js"><?php esc_html_e( 'Cancel', 'woocommerce' ); ?></a>
        </p>
    </div>
</div>
<?php
}

Reverting back to classic editor (temporarily)

If you want to revert back to the classic editor, for any reason, here is a trick.

Change 'activate_gutenberg_product' function to this:



function activate_gutenberg_product( $can_edit, $post_type ) {
    $disable = in_array( 'classic-editor', array_keys( $_GET ) );
    if ( $post_type == 'product' && $disable != true ) {
        $can_edit = true;
    }
    return $can_edit;
}

Now if you include &classic-editor in WordPress admin url the classic editor will be loaded.

Full code



function activate_gutenberg_product( $can_edit, $post_type ) {

    if ( $post_type == 'product' ) {
        $can_edit = true;
    }
    return $can_edit;
}
add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );

function enable_taxonomy_rest( $args ) {
    $args['show_in_rest'] = true;
    return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );


function register_catalog_meta_boxes() {
    global $current_screen;
    // Make sure gutenberg is loaded before adding the metabox
    if ( method_exists( $current_screen, 'is_block_editor' ) && $current_screen->is_block_editor() ) {
        add_meta_box( 'catalog-visibility', __( 'Catalog visibility', 'textdomain' ), 'product_data_visibility', 'product', 'side' );
    }
}
add_action( 'add_meta_boxes', 'register_catalog_meta_boxes' );


function product_data_visibility( $post ) {

    $thepostid          = $post->ID;
    $product_object     = $thepostid ? wc_get_product( $thepostid ) : new WC_Product();
    $current_visibility = $product_object->get_catalog_visibility();
    $current_featured   = wc_bool_to_string( $product_object->get_featured() );
    $visibility_options = wc_get_product_visibility_options();
    ?>
<div class="misc-pub-section" id="catalog-visibility">
    <?php esc_html_e( 'Catalog visibility:', 'woocommerce' ); ?>
    <strong id="catalog-visibility-display">
        <?php

        echo isset( $visibility_options[ $current_visibility ] ) ? esc_html( $visibility_options[ $current_visibility ] ) : esc_html( $current_visibility );

        if ( 'yes' === $current_featured ) {
            echo ', ' . esc_html__( 'Featured', 'woocommerce' );
        }
        ?>
    </strong>

    <a href="#catalog-visibility"
       class="edit-catalog-visibility hide-if-no-js"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a>

    <div id="catalog-visibility-select" class="hide-if-js">

        <input type="hidden" name="current_visibility" id="current_visibility"
               value="<?php echo esc_attr( $current_visibility ); ?>" />
        <input type="hidden" name="current_featured" id="current_featured"
               value="<?php echo esc_attr( $current_featured ); ?>" />

        <?php
        echo '<p>' . esc_html__( 'This setting determines which shop pages products will be listed on.', 'woocommerce' ) . '</p>';

        foreach ( $visibility_options as $name => $label ) {
            echo '<input type="radio" name="_visibility" id="_visibility_' . esc_attr( $name ) . '" value="' . esc_attr( $name ) . '" ' . checked( $current_visibility, $name, false ) . ' data-label="' . esc_attr( $label ) . '" /> <label for="_visibility_' . esc_attr( $name ) . '" class="selectit">' . esc_html( $label ) . '</label><br />';
        }

        echo '<br /><input type="checkbox" name="_featured" id="_featured" ' . checked( $current_featured, 'yes', false ) . ' /> <label for="_featured">' . esc_html__( 'This is a featured product', 'woocommerce' ) . '</label><br />';
        ?>
        <p>
            <a href="#catalog-visibility"
               class="save-post-visibility hide-if-no-js button"><?php esc_html_e( 'OK', 'woocommerce' ); ?></a>
            <a href="#catalog-visibility"
               class="cancel-post-visibility hide-if-no-js"><?php esc_html_e( 'Cancel', 'woocommerce' ); ?></a>
        </p>
    </div>
</div>
<?php
}

Hopefully this was an easy and useful tutorial.

8 tools to help with CSS

Kalimah Apps — Sat, 06 Feb 2021 01:44:33 +0000

While CSS is not a complicated language, some parts of it were a mystery to me when I started learning it. For example combining multiple box-shadow or background-image attributes. That's why I designed these playgrounds to make working with CSS easier and more productive.

Here are the 8 playgrounds you can use to improve CSS productivity.

1- Cursor property

Starting with an easy one. You can check out the different values for the cursor property. Hover on each box and see what the cursor would look like in your browser.

2- Filter property playground

This playground helps visualizing what different filter values do. You can stack different filters, modify their values and get the CSS code ready to be used.

3- Transform property playground

Demystify another CSS property. Since each value affect the subsequent transforms values, this CSS property could be confusing to manage. With this playground you can add a stack of transforms, set transform-origin and get the CSS code.

4- Box shadow generator

Using shadows in your design is a great option, if done properly. This what the box shadow generator does. You can add a stack of box shadows then get the generated CSS.

5- :nth-selector

CSS provide great selector options to target specific elements. This is the case with :nth-selectors (nth-child and nth-of-type). While they are extremely useful in many cases, their use is somewhat hard to figure out.

http://nthmaster.com/ website provide great examples on how to use them, the visuals however are not that good. Use this pen to see how different selectors work live.

6 - Border radius generator

border-radius property is not difficult to grasp at first. But once 8 values are used instead of 4 it might be confusing.
Not sure what I am talking about?! Check out this pen and disable simple mode.

7- Gradient generator

There are no shortages of gradient generators, but none a one stop gradient generator. Some lack a good user interface or don't provide enough options.

This tool provides an intuitive and a "complete" generator. It has 500+ presets and you can control almost all gradient aspects such colors, size, shape, type and even stack multiple gradients.

Make sure you click on info button to get more information about the tool and how to use it.

8- Palette generator

This tool does not generate values for a CSS property but rather a complementary tool to assets with color combination.

This generator resolves the shortcomings of available palette generators. It has a nice user interface with live view of color combination. It also includes a color theory section to help designers understand how color matching works.

It also provides a set of keyboard/mouse shortcuts to make the process as seamless and easy as passible.