DEV Community: Dezmerean Robert

Add custom color palettes to GIMP and Inkscape

Dezmerean Robert — Thu, 28 Jul 2022 21:43:00 +0000

This article explains how the .gpl format works, how to create a .gpl palette file and import it into GIMP and Inkscape.

Note: The .gpl format is also supported by Aseprite, Drawpile, Krita and MyPaint.

GIMP's Palettes Format

GIMP palettes are stored using a special file format, in plain text files with the .gpl extension. Note that it supports only ASCII characters.

Every palette must have the following structure:

GIMP Palette
Name: <name>
Columns: <number>
# <comment>
  0    0    0  Black
255  255  255  White
# ...

GIMP Palette - it must be the first line of the file.
Name: <name> - sets the name of the color palette.
Columns: <number> - is just an indication for displaying the palette inside GIMP.
# <comment> - comments must start with a #. All comments are ignored by GIMP.
0 0 0 Black - RGB values for the color followed by the color name.

Here is an simple example:

GIMP Palette
Name: Example
Columns: 5
# A simple example
  0    0    0  Black
255  255  255  White
255    0    0  Red
  0  255    0  Green
  0    0  255  Blue

Note: The RGB values don't need to line up.

Importing the palettes

After you have a color palette in GIMP's .gpl format, you can easily import the color palette to start working with it.

You can also generate .gpl files using palettes generators like Paletton or download one from here.

GIMP

Copy the .gpl file in the folder /palettes, which you create in the folder indicated at Edit ‣ Preferences ‣ Folders ‣ Palettes.

Restart GIMP to see the new palette in the list.

Inkscape

Copy the .gpl file in the folder indicated at Edit ‣ Preferences ‣ System: User palettes.

Restart Inkscape to see the new palette in the list.

Ember.js: Installing Tailwind CSS

Dezmerean Robert — Tue, 28 Jun 2022 23:25:31 +0000

TL;DR

$ ember install ember-cli-postcss                   # Install ember-cli-postcss
$ npm install --save-dev tailwindcss                # Install tailwindcss

$ npx tailwind init app/styles/tailwind.config.js   # Optional: Generate a Tailwind config file for your project  
$ npm install -save-dev postcss-import              # Optional: If you want to use the @import statement

/* app/styles/app.css */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

// ember-cli-build.js

// ... 

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          // { module: require('postcss-import') }, // If you installed postcss-import
          require('tailwindcss'), 
          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file.
        ]
      }
    }
  });

  // ...
};

Overview

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

https://tailwindcss.com/

The goal is to make your Ember.js app integrate with PostCSS and use Tailwind as a plugin.

PostCSS is a tool for CSS syntax transformations.
It allows you to define custom CSS like syntax that could be understandable and transformed by plugins.

https://github.com/postcss/postcss/blob/master/docs/architecture.md#overview

There is a huge number of plugins, Tailwind been one of them.

Installing `ember-cli-postcss`

The first step is making your app integrate with PostCSS.

You can use an add-on that helps you integreate PostCSS with Ember.js, ember-cli-postcss:

$ ember install ember-cli-postcss

For more about ember-cli-postcss check out the documentation.

Install Tailwind

Now you can install the Tailwind package directly using npm or yarn:

# Using npm
$ npm install --save-dev tailwindcss

# Using Yarn
$ yarn add --dev tailwindcss

Add Tailwind to your CSS

After you install tailwind you need to use the @tailwind directive to inject Tailwind's base, components, and utilities styles into your CSS:

/* app/styles/app.css */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Tailwind will swap these directives out at build time with all of its generated CSS.

Create your Tailwind config file (optional)

Note: If you don't need to customize your Tailwind installation you can skip this step, and do it when you need to.

If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI.

$ npx tailwind init app/styles/tailwind.config.js

For more about the Tailwind Configuration check out the documentation.

Process your CSS with Tailwind

The last step is adding Tailwind as a PostCSS plugin in your build chain.

This means adding tailwindcss to the list of plugins you pass to ember-cli-postcss in your ember-cli-build.js.

// ember-cli-build.js

// ... 

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          require('tailwindcss'), 
          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file. 
        ]
      }
    }
  });

  // ...
};

Now your done, you have successfully added PostCSS and Tailwind to your app.

Install `postcss-import` (optional)

To be able to import styles from other files with the @import statement and split your CSS in multiple file, you need postcss-import:

# Using npm 
$ npm install --save-dev postcss-import

# Using Yarn 
$ yarn add --dev postcss-import

Since postcss-import is a PostCSS plugin (like tailwindcss), you have to add it your build chain.

This means adding postcss-import to the list of plugins you pass to ember-cli-postcss in your ember-cli-build.js.

// ember-cli-build.js

// ... 

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          { module: require('postcss-import') }, 
          require('tailwindcss'), 
          // require('tailwindcss')('./app/styles/tailwind.config.js'), // If you have a Tailwind config file. 
        ]
      }
    }
  });

  // ...
};

Now you can use the @import statement in your app.css:

/* app/styles/app.css */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "custom"  /* This will import the CSS form custom.css */

Get URL Parameters with JavaScript

Dezmerean Robert — Mon, 27 Jun 2022 22:42:00 +0000

URL Parameters (also known as Query Parameters or Query String) are a set o key value pairs attached to the end of a URL. They are used to send small amounts of data from page to page, or from client to server via the URL.

TL;DR

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

// https://example.com/path/to/page?color=purple&size=M&size=L

urlParams.get('color')     // purple
urlParams.getAll('size')   // ['M', 'L']

URL Parameters Structure

The query parameters are separate from URL path with a ? (question mark):

https://example.com/path/to/page?color=purple

Each parameter after the first one is joined with an & (ampersand):

https://example.com/path/to/page?color=purple&size=M&size=L

In this case the query string is color=purple.

There are characters that cannot be part of a URL (for example space) and some other characters have a special meaning in a URL (the character #). This types of characters need to be encoded (for example space is encoded as %20).

Get a URL parameter

You can get the query string using window.location.search.

const queryString = window.location.search;

You can then parse the query string's parameters using URLSearchParams:

const urlParams = new URLSearchParams(queryString);

Now you can use URLSearchParams.get() to get the first value associated with the given search parameter:

// https://example.com/path/to/page?color=purple&size=M&size=L

urlParams.get('color')   // purple
urlParams.get('size')    // M
urlParams.get('nothing') // empty string

Get all values of a URL parameter

Now you can use URLSearchParams.getAll() to get all values associated with the given search parameter:

// https://example.com/path/to/page?color=purple&size=M&size=L

urlParams.getAll('color') // ['purple']
urlParams.getAll('size')  // ['M', 'L']

Check if a URL parameter exists

You can use URLSearchParams.has() to check if a given parameter exists.

// https://example.com/path/to/page?color=purple&size=M&size=L

urlParams.has('color')   // true
urlParams.has('size')    // true
urlParams.has('nothing') // false

Iterating over URL parameters

Iterate through all keys:

const keys = urlParams.keys();

for (const key of keys) {
  console.log(key);
}

Iterate through all values:

const values = urlParams.values();

for (const value of values) {
  console.log(value);
}

Iterate through all key/value pairs:

const entries = urlParams.entries();

for(const entry of entries) {
  console.log(`${entry[0]} = ${entry[1]}`);
}

For Internet Explorer

The URLSearchParams is not suported on IE, so you will need to parse the URL and get the query parameters.

function getParameterByName(name) {
  cont url = window.location.search;
  name = name.replace(/[\[\]]/g, '\\$&');

  let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
  let results = regex.exec(url);

  if (!results) {
    return null;
  } 

  if (!results[2]) {
    return '';
  }

  return decodeURIComponent(results[2]);
}

Now you can use getParameterByName to get the first value associated with the given search parameter:

// https://example.com/path/to/page?color=purple&size=M&size=L

getParameterByName('color')   // purple
getParameterByName('size')    // M
getParameterByName('nothing') // null

Setup a Jenkins CI/CD pipeline for AltWalker

Dezmerean Robert — Mon, 20 Sep 2021 17:45:18 +0000

This tutorial should help you setup a CI/CD pipeline on Jenkins for your AltWalker tests.

Create your first Pipeline
Quick Start Examples
Setup XML Reports
Using a Dockerfile
Examples
Resources

Create your first Pipeline

Copy one of the examples below into your repository and name it Jenkinsfile. Try modifying the sh command to run the same command you would run on your local machine.

pipeline {
    agent { 
        docker { 
            image 'altwalker/altwalker:latest'
            args '-u root:root'
        }
    }
    stages {
        stage('test') {
            steps {
                sh 'altwalker online tests -m model/default.json "random(vertex_coverage(100))"'
            }
        }
    }
}

Click the New Item menu within Jenkins
Provide a name for your new item (e.g. My-AltWalker-Pipeline) and select Multibranch Pipeline.
Click the Add Source button, choose the type of repository you want to use and fill in the details.
Click the Save button and watch your first Pipeline run!

Quick Start Examples

Below are some easily copied and pasted examples of a simple Pipeline for Python and .NET.

Python

pipeline {
    agent {
        docker {
            image 'altwalker/altwalker:latest'
            args '-u root:root'
        }
    }
    stages {
        stage('test') {
            steps {
                sh 'altwalker online tests -m models/model.json "random(vertex_coverage(100))"'
            }
        }
    }
}

.NET

pipeline {
    agent {
        docker {
            image 'altwalker/altwalker:latest-dotnet-3.1'
            args '-u root:root'
        }
    }
    stages {
        stage('test') {
            steps {
                sh 'altwalker online tests --language dotnet -m models/model.json "random(vertex_coverage(100))"'
            }
        }
    }
}

For more information about all the tags supported by the AltWalker docker images check out the docker repository for altwalker/altwalker.

Setup XML Reports

After you setup for first pipeline:

To generate the XML reports add the --report-xml to your online or walk command.
Inside the Jenkinsfile after the online or walk command add the following line:
```
junit 'report.xml'
```

For a python project the Jenkinsfile should look like this:

pipeline {
    agent {
        docker {
            image 'altwalker/altwalker:latest'
            args '-u root:root'
        }
    }
    stages {
        stage('test') {
            steps {
                sh 'altwalker online tests -m models/model.json "random(vertex_coverage(100))" --report-xml'
                junit 'report.xml'
            }
        }
    }
}

Using a `Dockerfile`

For projects which require a more customized execution environment, Pipeline also supports building and running a container from a Dockerfile in the source repository.

Copy one of the examples below into your repository and name it Dockerfile:
```
FROM altwalker/altwalker:latest

# Install your specific requirements 
```
Replace image 'altwalker/altwalker:latest' with dockerfile true from one of the previous example.

In contrast to the previous approach of using an "off-the-shelf" container, using the agent { dockerfile true } syntax will build a new image from your Dockerfile rather than pulling one from Docker Hub.

For a python project the Jenkinsfile should look like this:

pipeline {
        agent { 
            docker { 
                dockerfile true
                args '-u root:root'
            }
        }
        stages {
            stage('test') {
                steps {
                    sh 'altwalker online tests -m model/default.json "random(vertex_coverage(100))"'
                }
            }
        }
    }

The agent { dockerfile true } syntax supports a number of other options which are described in more detail in the Pipeline Syntax section.

Examples

For a fully working example you can check out:

for Python: https://github.com/Robert-96/altwalker-jenkins-example
for .NET: https://github.com/Robert-96/altwalker-jenkins-dotnet-example

Resources

CLI tools from the Python3 Standard Library

Dezmerean Robert — Mon, 26 Apr 2021 15:54:11 +0000

TL;DR

$ python -m http.server                           # Create a webserver serving files relative to the current directory
$ python -m http.server 8080                      # Start the webserver on port 8080
$ python -m http.server -b 127.0.0.1              # Bind the webserver to 127.0.0.1    
$ python -m http.server -d path/to/files          # Serve files relative to path/to/files  

$ echo '{"key": "value"}' | python3 -m json.tool  # Pretty-print JSON objects

$ python -m gzip data.json                        # Compress data.json    
$ python -m gzip -d data.json.gz                  # Decompress data.json.gz    

$ python -m zipfile -c archive.zip data.txt       # Create zipfile named archive.zip from source file data.txt
$ python -m zipfile -e archive.zip .              # Extract zipfile into current directory

$ python -m tarfile -c archive.tar data.txt       # Create tarfile name archive.tar from source file data.txt
$ python -m tarfile -e archive.tar .              # Extract tarfile into current directory

Http Server
JSON
GZIP
ZIP
TAR

Http Server

The http.server module provides a simple command line interface to create a very basic web server.

$ python -m http.server

This command will create a very basic web server serving files relative to the current directory.

$ python -m http.server 8080

The first positional argument will specify an alternate port.

Option	Description
`--bind`, `-b ADDRESS`	Specify alternate bind address. (Default: `0.0.0.0`)
`--directory`, `-d DIRECTORY`	Specify alternative directory. (Default: current working directory)
`--cgi`	Run a CGI Server.

Read more in the documentation.

JSON

The json.tool module provides a simple command line interface to validate and “pretty-print” JSON objects.

$ python -m json.tool <INFILE> <OUTFILE>

If the optional infile and outfile arguments are not specified, sys.stdin and sys.stdout will be used respectively.

$ echo '{"key": "value"}' | python3 -m json.tool
{
    "key": "value"
}

$ echo '{key: "value"}' | python3 -m json.tool
Expecting property name: line 1 column 2 (char 1)

Option	Description
`--sort-keys`	Sort the output of dictionaries alphabetically by key.
`--json-lines`	Parse every input line as separate JSON object.

Read more in the documentation.

GZIP

The gzip module provides a simple command line interface to compress or decompress files just like the GNU programs gzip and gunzip would.

$ python -m gzip <FILE>

$ python -m gzip data.json

This command will compress the data.json.

$ python -m gzip -d data.json.gz

This command will decompress the data.json.gz file .

Option	Description
`--fast`	Indicates the fastest compression method (less compression).
`--best`	Indicates the slowest compression method (best compression).
`-d`, `--decompress`	Decompress the given file.

Read more in the documentation.

ZIP

The zipfile module provides a simple command-line interface to interact with ZIP archives.

$ python -m zipfile -c <ZIP-FILE> <SOURCE-FILE-1> [... <SOURCE-FILE-N>]

If you want to create a new ZIP archive, specify its name after the -c option and then list the filename(s) that should be included.

$ python -m zipfile -c archive.zip data.txt

This command will create a new ZIP archive name archive.zip that will include data.txt.

$ python -m zipfile -e <ZIP-FILE> <OUTPUT-DIR>

If you want to extract a ZIP archive into the specified directory, use the -e option.

$ python -m zipfile -e archive.zip .

This command will extract all files from archive.zip inside the current directory.

$ python -m zipfile -l <ZIP-FILE>

For a list of the files in a ZIP archive, use the -l option.

$ python -m zipfile -l archive.zip

This command will list all files from the archive.zip ZIP archive.

Option	Description
`-c`, `--create ZIP-FILE SOURCE-1 [... SOURCE-N]`	Create zipfile from source files.
`-e`, `--extract ZIP-FILE OUTPUT-DIR`	Extract zipfile into target directory.
`-l`, `--list ZIP-FILE`	List files in a zipfile.
`-t`, `--test ZIP-FILE`	Test whether the zipfile is valid or not.

Read more in the documentation.

TAR

The tarfile module provides a simple command-line interface to interact with tar archives.

$ python -m tarfile -c <TAR-FILE> <SOURCE-FILE-1> [... <SOURCE-FILE-N>]

If you want to create a new TAR archive, specify its name after the -c option and then list the filename(s) that should be included.

$ python -m tarfile -c archive.tar data.txt

This command will create a new TAR archive name archive.tar that will include data.txt.

$ python -m tarfile -e <TAR-FILE> <OUTPUT-DIR>

If you want to extract a TAR archive into the specified directory, use the -e option.

$ python -m tarfile -e archive.tar .

This command will extract all files from archive.tar inside the current directory.

$ python -m tarfile -l <TAR-FILE>

For a list of the files in a TAR archive, use the -l option.

$ python -m tarfile -l archive.tar

This command will list all files from the archive.tar TAR archive.

Option	Description
`-c`, `--create TAR-FILE SOURCE-1 [... SOURCE-N]`	Create tarfile from source files.
`-e`, `--extract TAR-FILE OUTPUT-DIR`	Extract tarfile into target directory.
`-l`, `--list TAR-FILE`	List files in a tarfile.
`-t`, `--test TAR-FILE`	Test whether the tarfile is valid or not.

Read more in the documentation.

Add meta tags for social media with HtmlWebpackPlugin

Dezmerean Robert — Wed, 21 Apr 2021 21:10:42 +0000

Social media meta tags are <meta> tags in the <head> of your web page that control how URLs
are displayed when shared on social media.

If you are using webpack you can use the meta option from the HtmlWebpackPlugin to add the
social meta meta tags to your web page:

// webpack.config.js

// ... 
new HtmlWebpackPlugin({
  meta: {
    'description': { name: 'description', contnet: '...' },
    'keyword': { name: 'keywords', content: '...' },
    'og:title': { property: 'og:title', content: '...' },
    'og:description': { property: 'og:description', content: '...' },
    'og:type': { property: 'og:type', content: 'website' },
    'og:url': { property: 'og:url', content: '...' },
    'og:image': { property: 'og:image', content: '...' },
    'twitter:card': { name: 'twitter:card', content: 'summary_large_image' },
    'twitter:title': { name: 'twitter:title', content: '...' },
    'twitter:description': { name: 'twitter:description', content: '...' },
    'twitter:image': { name: 'twitter:image', content: '...' }
  }
})
// ...

DEV Community: Dezmerean Robert

Add custom color palettes to GIMP and Inkscape

GIMP's Palettes Format

Importing the palettes

GIMP

Inkscape

Ember.js: Installing Tailwind CSS

TL;DR

Overview

Installing ember-cli-postcss

Install Tailwind

Add Tailwind to your CSS

Create your Tailwind config file (optional)

Process your CSS with Tailwind

Install postcss-import (optional)

Get URL Parameters with JavaScript

TL;DR

URL Parameters Structure

Get a URL parameter

Get all values of a URL parameter

Check if a URL parameter exists

Iterating over URL parameters

For Internet Explorer

Setup a Jenkins CI/CD pipeline for AltWalker

Table Of Contents

Create your first Pipeline

Quick Start Examples

Python

.NET

Setup XML Reports

Using a Dockerfile

Examples

Resources

CLI tools from the Python3 Standard Library

TL;DR

Table of contents

Http Server

JSON

GZIP

ZIP

TAR

Add meta tags for social media with HtmlWebpackPlugin

Installing `ember-cli-postcss`

Install `postcss-import` (optional)

Using a `Dockerfile`