Giter VIP home page Giter VIP logo

maso's Introduction

Maso ๐Ÿ‘น

Masochist template for web development

This project includes a sadistic CI workflow craeted with Github Actions that runs against every PR.

Getting started

Fork this project or use it as a template for your new project.

This template includes a simple web server that complies to all nags from the sadistic CI workflow. To start it up, install dependencies with npm install and run:

npm start

This starts a simple node.js webserver that serves files from /public folder and listens for the port 8000 (no dependencies!).

After the server has started, you can navigate to http://localhost:8000 and see the site in action.

Features

This project aims to have all every strict policy to make modern website development hard. The work is still in progress, but currently Github Actions makes sure that on all pull requests:

  • Lighthouse test gives 100/100 points on all tests
  • Strict ESLint and Prettier rules are fully obliged to

There's also dependabot configuration which ensures that:

  • NPM packages are always using latest versions of the packages
  • No vulnerable NPM packages are installed in the project

Motivation / Why would anyone use this?

Have you ever caught yourself making excuses when the client asks why the website takes five seconds to load? When the website has been filled with tons of images, trackers, lightbox plugins, slow APIs and other junk, it's much too late to start asking why nobody brought this stuff up earlier.

It all starts with a bad foundations: Maybe we didnt't install any linters, do any tests, or maybe using that bloated plugin was just a quick fix that we never got to do better.

Using Masochist web development template right from the start of a project is your guard against slowly drifting into code-rotten junkland with your project. By using the most strict and sadistic CI workflow to always check your code before merging forces you to be diciplined with your code.

You can use Maso as a leverage during initial implementation phase; it's much harder for your boss/designer/client to argue with a machine than it is with a developer.

Example 1

Lighthouse test says adding ten images to the front page carousel makes your site slow (surprise).

Use this as a leverage: It's suddenly not just the developer's problem โ€” you can bounce back that information and include both business and design to work out the best way to keep the site running fast and smooth. You just can't add all those images. The computer says no.

Example 2

NPM reports a vulnerability in your web server's version, so Dependabot automatically creates a new pull request to fix the issue. Leverage this and treat Dependabot as a productive member of your team.

To wrap up

The concept of Masochist web development relates familiarly to an older concept of Extreme Programming: How do we make sure we do code reviews? Let's make it impossible not to do them (pair programming). How do we make sure we do automated tests for our code? Let's make it impossible to not do tests (test-driven development).

While hooking up a strict, sadistic CI workflow may sound like a big up-front overhead, the concept is pretty similar to TDD or pair programming; we make it very hard not to do great code and fast websites.

Delaying problems to when client sees them and complains, now that's even more masochistic.

Configuration

Github Actions take some configurations that you can tweak if necessary.

PORT

Type: Number
Default: 5000

Your web server should always listen for port defined by environment vairable PORT. This can be changed by probiding an alternative port as PORT environment variable to Lighthouse action.

Contributing

This is an evolving project, and new feature requests and coding help is greatly appreciated. If you think you could make the saidstic CI workflow even more sadistic, just open an issue and describe how! Pull requests are also warmly welcome.

Licensing

The code in this project is licensed under MIT license.

maso's People

Contributors

dependabot-preview[bot] avatar dependabot[bot] avatar jehna avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

maso's Issues

Test coverage tool

Implement a test framework and make sure all lines are covered with tests

Check PR formatting

We should automate pull request formatting. Not only that you should have a template for pull requests, but the template should be checked against

Force maso workflow to be up to date

Since this template project will be forked and used as a template for other projects, we should make sure that any additions to Github actions are also updated to the forked projects.

So we should block PR merge in forked projects if any new stuff is added to this project's workflow.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.