npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

html-base

v1.5.0

Published

HTML Initial Bundle

Downloads

113

Readme

HTML Base

License:MIT npm

HTML initial bundle for professional frontend development

Why

  • Templates, themes prototyping
  • Integration with any CMS and frameworks
  • Modeling JavaScript applications
  • Routine web development tasks automation

Features

  • Advanced CSS Reset scss-reset
  • Basic SCSS Mixins Collection scss-mixins
  • (Not so) Old browsers support
  • Predefined VSC workspace
  • Initial JavaScript modules and SCSS files
  • Automated test tasks
  • A lot of useful open source included

Structure

html-base/
├── .gulp/              # Gulp tasks
├── .vscode             # VSC custom settings
├── src/                # Source files
│   ├── favicons/       # Icons
│   ├── fonts/          # Custom Fonts
│   ├── javascript/     # Scripts and JS Resources
│   ├── images/         # Images
│   ├── images/sprite/  # SVG sprite
│   ├── layouts         # HTML parts
│   ├── scss/           # SCSS files
│   └── video/          # For video files
├── dest/               # Beautified Development build output
├── build/              # Compressed Production build output
├── test/               # Test scripts
└── json/               # JSON files

Output

  • Clean, tested, beautified, optimized and/or compressed HTML/CSS/JS

Usage

By Git Command

Clone the repository and install dependencies manually:

git clone https://github.com/frontend-layers/html-base.git project-name
cd project-name
npm install

By Shell Command

npx get-html-base project-name
cd project-name
npm i

Or Download html-base Zip Package for Manual Installation

  • https://github.com/frontend-layers/html-base/archive/refs/heads/master.zip

JS Apps Mode Install

Please add -js key

npx get-html-base project-name -js
cd project-name
npm i

Install via Package Managers

Using npm

npm i html-base

Using Yarn

yarn add html-base

Using pnpm

pnpm i html-base

After installation, copy the html-base folder from node_modules and rename it according to your project name.

Then, update the package.json and related files based on your new project title, description, owner, etc.

Finally, install all dependencies with:

Using npm

npm i

Using Yarn

yarn add

Using pnpm

pnpm i

Usage

After installation, launch the project using one of the following commands:

gulp

or

npm start

To update packages, use the following commands:

npm updates
npm i

Under the hood

Related Tools

JavaScript plugins

  • Babel
  • Rollup

JavaScript utils

  • DomReady
  • NoJs

Tests

  • Deep HTML5 Validation
  • On fly HTML5 Validation
  • CSS3 Validation
  • Google Mobile-friendly test
  • Google PageInsight Performance test

Images

  • WEBP Convertor
  • SVG (SVGOmg compression)

Automation

Development bundle for fast and robust web development based on Gulp and Rollup

Files

  • .gulp/*
  • ./gulpfile.js
  • ./babel.config.js
  • ./package.json

Styles

  • autoprefixer
  • gulp-postcss
  • gulp-sass
  • sass

Server

  • gulp-connect
  • gulp-open
  • localtunnel

Notification

  • gulp-plumber
  • fancy-log

Source Maps

  • gulp-sourcemaps

JavaScript development

  • rollup
  • rollup-plugin-babel

Tests

Editor

  • .vscode/settings.json
  • .editorconfig
  • .eslintrc.json
  • .prettierrc
  • .eslintrc.json

VSC Tweaks

  • liveSassCompile
  • Emmet "commentAfter"
  • Panel at the "right" (Terminal, hints etc.)
  • ESLint JS tweaks
  • Search exclusions

Tunneling

.gulp/server.js

const subdomain = ''

HTML Files

  • index.html - templates list
  • home.html - main landing page
  • product.html - product page
  • article.html - article page
  • test-design.html - design system
  • test-sprite.html - svg sprite test

SVG Sprite generation

  • copy svg files for sprite into './images/sprite/' folder
  • launch in the terminal gulp sprite
  • generated svg sprite is there - ./images/sprite.svg

Docker integration

Steps to Set Up Docker Container and Run them locally

Log in to Docker Hub

docker login

Pull the Docker Image

Download the latest version of the html-base Docker image from Docker Hub.

docker pull andreymatin/html-base:latest

Copy Files from the Docker Container

Extract the application files from the Docker container to your local machine. Replace html-base with the name of the running container if it's not html-base.

docker cp html-base:/app ./

Start the Application

Use the make command to start the application with the up target defined in the Makefile. Ensure that the Makefile is in the same directory.

make up

Docker-Related Files

  • Makefile
  • Dockerfile
  • docker-compose.yml

Makefile

The Makefile provides an easy way to manage and automate Docker commands. It includes tasks such as:

  • Starting and stopping the Docker containers.
  • Automatically opening the application in a browser.
  • Following container logs.

Key targets include:

  • up: Builds and starts the application containers.
  • down: Stops and removes the containers.
  • log: Displays the application logs in real time.

Makefile Windows Installation

If you have Chocolatey installed on your Windows system, you can install make directly by running the following command in an elevated PowerShell (Administrator) terminal:

choco install make

Dockerfile

The Dockerfile is used to define the application’s image. It specifies:

  • Base image: The Node.js version (e.g., node:22).
  • Working directory: Where the application is stored in the container (e.g., /app).
  • Exposed ports: The ports used by the application, such as 4000.
  • Dependencies: Installs gulp globally and other npm dependencies.
  • Application entry point: Defines the command to start the
  • application (npm start).

docker-compose.yml

The docker-compose.yml file orchestrates multiple services and simplifies container management. It defines:

  • Services: Specifies the application (app) and its dependencies.
  • Image: Uses a predefined image or builds it locally (andreymatin/html-base:latest).
  • Container name: Assigns a recognizable name to the container (html-base).
  • Ports: Maps container ports to the host machine (e.g., 4000:4000).
  • Environment variables: Configures settings like NODE_ENV and PORT.
  • Volumes: Synchronizes files between the host and container for development.

Contributing

For issues, bugs or improvements please open an issue

Preferred Code concepts

  • HTML - https://google.github.io/styleguide/htmlcssguide.html
  • CSS - BEM - https://github.com/airbnb/css
  • SCSS - https://sass-guidelin.es/
  • JavaScript - https://standardjs.com/

Logscreen

Inspiration

  • Google Web Fundamentals (https://developers.google.com/web/fundamentals/performance/why-performance-matters)