DEV Community: Hasan TEZCAN

Streamlining Pipeline Automation with JavaScript Scripts from GitLab Repositories

Hasan TEZCAN — Thu, 16 May 2024 12:00:14 +0000

In today's software development landscape, maintaining a clean and efficient codebase is crucial for productivity and scalability. One area where this principle can be applied is in the automation of pipeline tasks using JavaScript scripts. In this blog post, we'll explore how integrating JavaScript scripts from GitLab repositories into pipeline jobs can lead to a cleaner codebase, promote code reusability, and simplify script management.

Leveraging JavaScript Scripts from GitLab Repositories

Traditionally, when implementing pipeline automation, developers often copy and paste JavaScript code directly into their codebase. However, this approach can lead to a cluttered and less maintainable codebase, especially when dealing with multiple pipelines or frequent updates to the scripts.

By contrast, integrating JavaScript scripts directly from GitLab repositories offers several advantages:

1. Clean Codebase

By keeping pipeline-related JavaScript scripts separate from the main codebase, you ensure that your codebase remains focused on its core functionality. This separation helps maintain code cleanliness and improves overall code readability.

2. DRY (Don't Repeat Yourself) Principle

Integrating JavaScript scripts from a central GitLab repository promotes the DRY principle by eliminating the need to duplicate script code across multiple projects. Instead, developers can reuse the same script in multiple pipeline jobs, reducing redundancy and minimizing the risk of inconsistencies.

3. Easy Management

Managing JavaScript scripts becomes significantly easier when they are stored in a central GitLab repository. Developers can update, version, and track changes to the scripts in one place, ensuring consistency and simplifying maintenance tasks.

Integration Example

Let's illustrate this concept with a simple example. Suppose we have a JavaScript script stored in a GitLab repository that performs a deployment announcement task. Instead of copying this script into each project's codebase, we can integrate it directly into our pipeline job using the following configuration:

Announce Deployment:
  stage: notify-deployment
  image: node:20-alpine
  rules:
    - if: $CI_COMMIT_BRANCH == "master"
  allow_failure: true
  when: manual
  script:
    - wget -O ./scripts/announce-deployment.js --header "PRIVATE-TOKEN:$GITLAB_API_TOKEN" $GITLAB_API_URL/projects/123/repository/files/scripts%2Fannounce-deployment.js/raw\?ref\=main
    - node ./scripts/announce-deployment.js

Example JavaScript Script: announce-deployment.js

Here’s a simple demo example of the announce-deployment.js script:

const axios = require('axios');

// Define the announcement function
async function announceDeployment() {
  const projectName = process.env.CI_PROJECT_NAME;
  const branchName = process.env.CI_COMMIT_BRANCH;
  const commitMessage = process.env.CI_COMMIT_MESSAGE;
  const commitAuthor = process.env.CI_COMMIT_AUTHOR;

  // Slack Webhook URL from environment variables
  const slackWebhookUrl = process.env.SLACK_WEBHOOK_URL;

  const message = {
    text: `Deployment Alert: ${projectName}`,
    attachments: [
      {
        title: `New deployment on ${branchName}`,
        text: `*Commit Message:* ${commitMessage}\n*Author:* ${commitAuthor}`,
        color: '#36a64f',
      },
    ],
  };

  try {
    await axios.post(slackWebhookUrl, message);
    console.log('Deployment announcement sent successfully.');
  } catch (error) {
    console.error('Failed to send deployment announcement:', error);
  }
}

// Execute the announcement function
announceDeployment();

Conclusion

Integrating JavaScript scripts from GitLab repositories into pipeline jobs offers a cleaner, more efficient approach to pipeline automation. By adhering to the principles of clean code, DRY, and centralized script management, developers can maintain a streamlined codebase while maximizing code reuse and minimizing maintenance overhead.

In summary, by leveraging GitLab's capabilities to integrate JavaScript scripts directly into pipeline jobs, development teams can achieve a more efficient and maintainable pipeline automation process.

Stay tuned for more insights and best practices on optimizing your development workflows with GitLab CI/CD!

How can I share a git stash?

Hasan TEZCAN — Mon, 27 Nov 2023 13:43:20 +0000

Create a Patch:

You can create a patch file from your stash and send it to your colleague.
Run

git stash show -p stash@{0} > my_stash.patch

to create a patch file.

Send the my_stash.patch file to your colleague.

Your colleague can apply the patch with

git apply my_stash.patch.

MutationObserver

Hasan TEZCAN — Thu, 23 Mar 2023 08:54:50 +0000

What is the mutation observer?

MutationObserver is a JavaScript API that allows developers to listen for changes to specific elements or nodes in the DOM (Document Object Model). It provides a way to observe and respond to changes that occur within the DOM structure.

The MutationObserver works by registering a callback function to observe a specific target element or node in the DOM. When a change occurs, such as a node being added or removed, the callback function is called with a list of MutationRecord objects that describe the changes that have occurred.

The MutationObserver API provides a powerful tool for building responsive web applications that need to react to changes in the DOM. It can be used to implement a wide range of features, such as lazy-loading content, auto-updating UI elements, and real-time data synchronization.

Let me explain mutation observer through an example.

Our aim is to add an animation when the category's section height changes. We need to listen that operation

before	after

In order to do this we need a reference of the category section.



import React, { useRef } from 'react';
import { CategoryItems } from './category-items/category-items';
import { CategoryTitles } from './category-titles/category-titles';
import './categories.scss';

const Categories = () => {
  const categoriesRef = useRef<HTMLDivElement>(null);

  return (
    <div className="categories" ref={categoriesRef}>
      <CategoryTitles />
      <CategoryItems />
    </div>
  );
};

export { Categories };

After preparing the categoriesRef, we can create the mutationObserver structure.

First of all, we need to create mutationObserver



  const mutationObserver = new MutationObserver(async () => {
    console.log('mutationObserver operation');
  });

This is our mutationObserver instance we will call this instance from useEffect



  useEffect(() => {
    if (categoriesRef.current) {
      mutationObserver.observe(categoriesRef.current, {
        childList: true,
        subtree: true,
      });

      return () => {
        mutationObserver.disconnect();
      };
    }
  }, []);

We defined mutationObserver.observe with categoriesRef.current which listens to the parameters such as childList and subtree, also you can check this out for more parameters.
And also we define the mutationObserver.disconnect() on componentWillUnmount hook for delete listen operation when component closed.

Henceforward when the height change at categoriesRef we will see the console log.



    console.log('mutationObserver operation');

Then we will add the animation handler code piece and define a CSS transition to categoriesRef



  const mutationObserver = new MutationObserver(async () => {
    const categoryTitles = document.getElementById('categoryTitles') as HTMLDivElement | null;
    const categoryItems = document.getElementById('categoryItems') as HTMLDivElement | null;

    if (categoriesRef.current && categoryTitles && categoryItems) {
      if (categoryTitles.clientHeight > categoryItems.clientHeight) {
        categoriesRef.current.style.height = `${categoryTitles.clientHeight}px`;
      } else {
        categoriesRef.current.style.height = `${categoryItems.clientHeight}px`;
      }
    }
  });



.categories {
  transition: height 200ms ease;
}

voilà 🎉

Source

https://javascript.info/mutation-observer

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

How to colorize SVG image?

Hasan TEZCAN — Mon, 13 Feb 2023 01:45:01 +0000

Are you tired of using icoMoon to maintain your SVG icons? While it's a great tool for managing icons, its user interface can leave much to be desired. On top of that, you may be looking to reduce your dependency on third-party tools. If so, a CDN could be the perfect solution.

However, switching from icoMoon to a CDN can bring about some changes that you should be aware of. Instead of using a font-based approach, a CDN requires the icons to be added as images. This shift in delivery and display may take some getting used to, but it should not affect the functionality of the icons themselves.

IcoMoon font based approach

In this approach, we use the icomoon classnames to render the SVG icons.

And we can change the colors of SVG icons with CSS like this. 👇

.icomoon-logo {
  color: red;
}

SVG with HTML `<img>` element approach

In this approach, we use the img tag to render the SVG icons.

But we can't change the colors of SVG icons with CSS when we use with HTML IMG tag. This is not worked!

We are putting the SVG icon in the src attribute of the img tag.

<img src="https://cdn.dsmcdn.com/example-icon.svg" alt="example-icon" />

How we can change the colors of SVG `<img>` icons?

1- Hacky way

We can use a hacky way to handle that like this. 👇

This filter can able to change the colors of SVG HTML <img> elements but you need to find the color that you need with a trial-and-error method.

img: {
  filter: invert(20%) sepia(243%) saturate(1576%) hue-rotate(-21deg) brightness(137%) contrast(73%);
}

SOURCE

It's a way you can use it but not the best one!

What else we can do at this point? Let me introduce you to CSS MASK!

2- CSS MASK

In my opinion, CSS masking is the ideal solution to this problem. By using the mask-image property, we can render the SVG image as if it were a font. To do this, we'll need to create a CSS class for the SVG icon.

This is the CSS class for the SVG icon. 👇

.icon {
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-position: center;
  width: 24px;
  height: 24px;
}

Then we will use the mask-image property to render the SVG image like a font. But we will define it dynamically with React. 👇

We also need to define the WebkitMaskImage property for the Safari browser.

const MenuItem = ({ SvgIcon, selectedName, link }: MenuItemProps) => {
  return (
    <a className={cn("menu-item", selectedName === "my_coupons" && "active")} href={link}>
      <div className="icon" style={{ maskImage: `url(${SvgIcon})`, WebkitMaskImage: `url(${SvgIcon})` }} />
      <p className="name">"My Coupons"</p>
    </a>
  );
};

And that's it! Now we can change the colors of SVG icons with CSS like this. 👇

.icon {
  background-color: red;
}

Let's take a look at the result. 👇

Conclusion

In this article, we learned how to use SVG images like a font. We learned how to change the colors of SVG images with CSS. We also learned how to use SVG images with HTML <img> tag. I hope you enjoyed this article. If you have any questions, please let me know in the comments. Thanks for reading!

Solution of "Can't find Python executable 'python'" Node Error

Hasan TEZCAN — Thu, 15 Dec 2022 18:06:45 +0000

Hello everyone, today we will take a look at a mix-in problem. The main reason of this situation is deprecated dependencies.

The project that we developed use a node version 14.18.0 and we use a node-sass version 4.14.1 package and this package also deprecated for today.

PS: You can use normal sass package today instead of node-sass.

The error out looks like these



Error: Can't find Python executable "python", you can set the PYTHON env variable.

The python3 was already installed on my pc. But this is not helped at all.

We need to install python 2.7.18

We can use pyenv to work multiple python version. Let's download it.

1- Install "pyenv"



brew install pyenv

2- Install the "2.7.18" version of python



pyenv install 2.7.18

and set it as a global



pyenv global 2.7.18

3- Add python executable directory to PATH



export PATH="${HOME}/.pyenv/shims:${PATH}"

You can check the PATHs with;



echo $PATH

4- Add python executable directory to the .npmrc



npm config set python $(which python)

You can check the config with



npm config list

or check from .npmrc;



cat .npmrc

After these steps, you can able to work with "python" and the node starts to will work with the "python" alias.

Arrivederci 👋

Source:

https://github.com/TryGhost/node-sqlite3/issues/1552#issuecomment-1075059490

Function rgb is missing argument $green.

Hasan TEZCAN — Wed, 23 Nov 2022 16:06:21 +0000

This is not work!



rgb(111 197 236 / 49%)

Use this



RGB(111 197 236 / 49%)

or this



rgba(111, 197, 236, 0.49)

SOURCE: https://stackoverflow.com/a/74262232/10694425

manipulate strings with sed

Hasan TEZCAN — Mon, 21 Nov 2022 23:35:20 +0000

What is `sed`?

https://en.wikipedia.org/wiki/Sed

sed ("stream editor") is a Unix utility that parses and transforms text, using a simple, compact programming language.

It was one of the earliest tools to support regular expressions.

Today I will show you some examples of what can you do with sed. (in a basic way)

gyp: No Xcode or CLT version detected!

Hasan TEZCAN — Wed, 09 Nov 2022 17:24:44 +0000

gyp: No Xcode or CLT version detected!

First, delete the Xcode tools by using the below command.
sudo

rm -rf $(xcode-select -print-path)

Now, install the Xcode by running this command.

xcode-select --install

SOURCE: https://reactgo.com/gyp-xcode-or-clt-version-detected/

Fancy CLI text

Hasan TEZCAN — Mon, 07 Nov 2022 07:55:15 +0000

You can write fancy text like that from this site.

The font that you see top of the page is ANSI Shadow

https://patorjk.com/software/taag/#p=display&f=ANSI%20Shadow&t=commithub

Error [ERR_MODULE_NOT_FOUND]: Cannot find module

Hasan TEZCAN — Sun, 06 Nov 2022 23:25:53 +0000

If you want to use import instead of require you need to add module part to your package.json

"type":"module"

But don't forget you need to import with file extension.


import { ErrorMessage } from "../alerts.js"; // WORK

import { ErrorMessage } from "../alerts"; // WONT WORK!

SOURCE: https://stackoverflow.com/a/67105989/10694425

Sort all JSON files in the directory as alphabetically

Hasan TEZCAN — Wed, 02 Nov 2022 09:16:52 +0000

Installation

npm i -g json-sort-cli

Usage

jsonsort directory

SOURCE:

https://codsen.com/os/json-sort-cli

github: https://github.com/codsen/codsen/tree/main/packages/json-sort-cli

Show local current hour:minute with js

Hasan TEZCAN — Fri, 28 Oct 2022 07:14:14 +0000

new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', hour12: false});

SOURCE: https://stackoverflow.com/a/20430558/10694425

DEV Community: Hasan TEZCAN

Streamlining Pipeline Automation with JavaScript Scripts from GitLab Repositories

Leveraging JavaScript Scripts from GitLab Repositories

1. Clean Codebase

2. DRY (Don't Repeat Yourself) Principle

3. Easy Management

Integration Example

Example JavaScript Script: announce-deployment.js

Conclusion

How can I share a git stash?

MutationObserver

What is the mutation observer?

Source

How to colorize SVG image?

IcoMoon font based approach

SVG with HTML <img> element approach

How we can change the colors of SVG <img> icons?

1- Hacky way

2- CSS MASK

Conclusion

Solution of "Can't find Python executable 'python'" Node Error

1- Install "pyenv"

2- Install the "2.7.18" version of python

3- Add python executable directory to PATH

4- Add python executable directory to the .npmrc

Source:

Function rgb is missing argument $green.

manipulate strings with sed

What is sed?

gyp: No Xcode or CLT version detected!

Fancy CLI text

Error [ERR_MODULE_NOT_FOUND]: Cannot find module

Sort all JSON files in the directory as alphabetically

Installation

Usage

Show local current hour:minute with js

SVG with HTML `<img>` element approach

How we can change the colors of SVG `<img>` icons?

What is `sed`?