DEV Community: ramoures

[Boost]

ramoures — Thu, 20 Feb 2025 02:27:47 +0000

Lightweight and Flexible Minifier (JS, CSS, HTML)

ramoures ・ Feb 19

#javascript #css #html #minifier

live file-watching compressor for JavaScript, CSS, HTML files of your projects.

ramoures — Wed, 19 Feb 2025 22:16:49 +0000

Lightweight and Flexible Minifier (JS, CSS, HTML)

ramoures ・ Feb 19

#javascript #css #html #minifier

live file-watching compressor for JavaScript, CSS, HTML files of your projects.

ramoures — Wed, 19 Feb 2025 21:58:53 +0000

Lightweight and Flexible Minifier (JS, CSS, HTML)

ramoures ・ Feb 19

#javascript #css #html #minifier

Lightweight and Flexible Minifier (JS, CSS, HTML)

ramoures — Wed, 19 Feb 2025 12:55:45 +0000

What is minifix?

minifix is a universal minifier that supports minification for JavaScript, CSS, and HTML files. It’s designed to be lightweight, easy to use, and highly configurable, making it a great tool for developers who want to optimize their code with minimal effort.

Features

Efficient Minification: minifix uses powerful libraries like Terser for JavaScript, clean-css for CSS, and html-minifier-terser for HTML to ensure that your code is minified efficiently.
Live File Watching: With live file-watching support, minifix automatically detects changes in your files and minifies them instantly, eliminating the need for manual execution.
Configurable Options: You can customize the minification process for each file type using a simple configuration file. minifix leverages the power of three popular libraries, and you can fine-tune their behavior through the minifyOptions configuration:
- CSS: Configure options using clean-css constructor options.
- JavaScript: Customize minification with Terser options.
- HTML: Adjust settings via html-minifier-terser options.
Lightweight and Easy to Use: minifix is designed to be simple and straightforward, making it accessible for developers of all skill levels.

You can install it locally or globally using npm.

Installation

Before installing minifix, consider whether you need a local or global installation:

A local installation is recommended for project-specific usage, ensuring that each project uses the correct version of minifix.
A global installation allows you to use minifix across multiple projects system-wide without reinstalling it.

Local Installation

npm install --save-dev minifix

Global Installation

npm install --global minifix

Usage

Running Locally

npx minifix

Running Globally

minifix

📌 If minifix.config.mjs does not exist, it will be created automatically.

Configuration

minifix is highly configurable. You can define your input files, output files, and minification options in a minifix.config.mjs file. Here’s an example configuration:

/* minifix.config.mjs */
export default {
    inputs: ["views/input.html", "assets/css/input.css", "assets/js/input.js"],
    outputs: ["views/index.html", "assets/css/style.css", "assets/js/default.js"],
    minifyOptions: {
        css: {
            format: false
        },
        js: {
            format: {
                preamble: "/** Comment */"
            }
        },
        html: {
            collapseWhitespace: true,
            removeComments: true,
            removeRedundantAttributes: true
        }
    }
};

In this example, minifix will minify the specified input files and output the minified versions to the specified locations. You can also customize the minification options for each file type, such as preserving comments in JavaScript or removing redundant attributes in HTML.

Advanced Configuration

Here’s how you can customize each type of file:

CSS: Use the clean-css constructor options to control how your CSS is minified. For example, you can disable formatting or enable advanced optimizations.
JavaScript: Customize JavaScript minification with Terser options. You can add custom comments, control code formatting, and more.
HTML: Adjust HTML minification settings using html-minifier-terser options. Options like collapseWhitespace and removeComments allow you to control how your HTML is processed.

Supported File Types

minifix supports minification for:

JavaScript (.js,.mjs,.cjs)
HTML (.html,.htm)
CSS (.css)

Why Use minifix?

minifix is designed to be a one-stop solution for all your minification needs. Whether you’re working on a small project or a large-scale application, minifix can help you optimize your code and improve performance. Its live file-watching feature ensures that your files are always up-to-date, and its configurable options give you full control over the minification process.

Contributing to minifix

minifix is an open-source project, and we welcome contributions from the community. If you encounter any issues or have suggestions for new features, feel free to open an issue on the GitHub repository. If you’d like to contribute code, you can fork the repository and submit a pull request.

Conclusion

minifix is a powerful and flexible tool that simplifies the process of minifying JavaScript, CSS, and HTML files. Whether you’re a seasoned developer or just starting out, minifix can help you optimize your code and improve the performance of your web applications. Try it out and share your feedback with us!

For more information, check out the minifix GitHub repository.

React Server Side Rendering with Express and Vite

ramoures — Tue, 30 Jul 2024 04:08:22 +0000

ReactJS Server Side Rendering template (shopping website) with ExpressJS and ViteJS.

Node.js Streams
Data fetching from Rest API
Sitemap add-on
SEO friendly

Github Repository

View Demo - (Mirror Link)

Installation

git clone https://github.com/ramoures/express-react-ssr.git
cd express-react-ssr
npm install
npm run build
npm start or node server.mjs
Browse http://localhost:5173/shop/

Update the .env file to edit/remove the shop directory from the URL.

Develop

Tailwind CLI build and minify process: npm run tw
npm run dev

Browse http://localhost:4173/shop/

Always ready fresh template in development.

Build

After development completion:

npm run build for build new dist directory.
npm start or node server.mjs
Browse http://localhost:5173/shop/

I Used

Node.js Stream
Axios
React Router Dom
React Helmet
Tailwind CSS framework
XML Sitemap
...

Data source: fakestoreapi.com

License Under The MIT License
Email: ramoures@gmail.com

PHP Phone Book

ramoures — Fri, 01 Sep 2023 11:41:17 +0000

Demo

UTC Timezone

Admin panel demo

username: admin
password: 123

Front page demo

Setup

1.Clone or download: GitHub Repository
2.Create a new MySQL database.
3.Set your database information and your PROJECT_URL in config.php.
4 & 5:

4.Browse /setup to create the required tables and admin sign up.

Ex. https://localhost/PHP-Phone-Book/setup/

5.Remove /setup directory.

OR

4. Remove /setup directory.

5. IMPORT php_phone_book.sql to your database table.

The username added after import is: admin , password: 123

6.Set media directory permission to 777.

sudo chmod -R 777 media

Requirement

Apache HTTP web server.
MySQL database
PHP ^8.2.4
Apache module mod-rewrite must be enabled.
mysqli, mysqlnd, pdo ,pdo_mysql PHP extensions must be enabled.

To check the above: <?php phpinfo(); ?> - PHPInfo

allowOverride must be set to All in the Apache configuration file.

Information

HTTP Server: Apache
Programming language: PHP 8.2.4
Programming paradigm: OOP
Architectural patterns: MVC
Template engine: TWIG 3.0
Database: MySQL
Licensed under MIT

I used:

URL Routing methods.
TWIG template engine.
PDO & Prepared Statements MySQL Connection.
Singleton design patterns for some required classes.
Multi language suppourt.
Many options for configuration. config.php
Sorting and pagination of items.
Client and server side captcha for sign in form.

Optional config: Google reCaptcha or Cloudflare Turnstile
Errors handling method.
Bootstrap and jQuery.

HELP

Solutions

Enable the apache module mod_rewrite

$ sudo a2enmod rewrite

Set config allowOverride All

Edit the Apache config file:

$ cd /etc/apache2

$ sudo nano apache2.conf

Find:

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>

And change it to:

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

/var/www/ : your root directory.

Press Ctrl + o (for save), then Ctrl + x (for exit).

Then,

$ sudo systemctl restart apache2

Apache mod_rewrite module

Add new language

Create your language file in the lang folder.

Ex. fr.php or ar.php and develop similar to lang/fa.php.

Add your new language for frontend pages.

<!-- Example: -->
<div class="changeLanguage">
     <button id="fr">Fr</button>
     <button id="en">En</button>
</div>
<!-- Look at: .changeLanguage click function on view/assets/js/app.js or backend.js  -->

E-Mail: ramoures@gmail.com