Web Tools Weekly Issue #461 (Mergify Review, Frameworks, React, Uncats)

Issue #461 (Mergify Review, Frameworks, React, Uncats)05/19/22

The following intro is a paid product review for Mergify, a GitHub-based service for automating your pull requests and code merges.

If you're working in a team environment, large or small, it's pretty likely that pull requests and code merges are a regular part of your routine. Anything to ease or automate that process – which often includes code reviews, assignments, labeling, etc. – is certainly going to be a boost to your team's workflow.

Enter Mergify, a GitHub-based service that automates your pull requests based on rules you create, enabling you to streamline all pull request-related workflows. Mergify is used by number of big tech names including Amazon, Mozilla, Uber, Netflix, Airtable, and IBM.

Here are some common use cases to help you determine how valuable Mergify can be to your team:

Automated Merges – You set up custom rules that determine if merges take place. No need for manual checks as long as certain conditions are met.
Safe and Prioritized Merge Queues – Your custom rules can determine how important a pull request is, allowing your merges to take place safely and in predetermined priority.
Automatic Branch Updates – You can keep all branches up to date automatically, avoiding any use of the "update branch" button when pull requests are outdated compared to the master branch.
Automated Review Requests – Based on rules you define, pull requests can be automatically assigned to the appropriate team or reviewer without any manual action necessary.

Those are just a few of the powerful ways that Mergify can help you and your team, but let's delve a little more into those specific features.

First of all, as I briefly covered in the overview above, Mergify's true power comes in the specific rules you create that form the backbone of all your automations.

Once you've installed Mergify through GitHub, Mergify can be configured by adding a YAML file to your project's root folder. The default config file, accessible in your Mergify dashboard is shown in the screenshot below.

Mergify's default configuration file

The meat of the config file is divided into two main sections: Conditions and Actions, both of which are expanded on in the Mergify documentation. Conditions are similar to any conditional-type logic in programming. Here is an example:

conditions:

        - or:

          - author=alejandro

          - author=guerrero

The above rule uses the "or" operator to determine that if either of the listed names is the author of the pull request, the condition will pass. If this is the only condition, then an action will be triggered.

Here's another example of condition:

conditions:

        - or:

          - and:

            - author=bichette

            - label=core

          - and:

            - author=romano

            - label=frontend

This rule uses both "or" and "and' along with the "author" and "label" attributes. In this case, the merge will take place if the author of the pull request is "bichette" with a "core" label attached, or if the author is "romano" with a "frontend" label attached. Mergify's docs list all the attributes available, giving you a good sense of how many possibilities there are.

Actions are triggered once your defined conditions are met. Here's an example that includes an assignment-related action:

pull_request_rules:

        - name: assign PRs with modified JS files to manoah

          conditions:

            - files~=\.js$  

            - -closed

          actions:

            assign:

              add_users:

                - manoah

The above rule will assign a specific reviewer to a pull request if that pull request involves modified JavaScript files.

Here's another practical example where a specific condition determines that two entire teams should review a pull request:

pull_request_rules:

        - name: ask security team to review security labelled PR

          conditions:

            - label=security

          actions:

            request_reviews:

              teams:

                - "@myorg/security-dev"

                - "@myorg/security-ops"

Other actions you can trigger in response to conditions include automatically adding labels, copying a pull request to another branch, backporting, post-check conditions, and lots more.

One final thing I'll discuss is how Mergify's features far exceed that of the competition. For example, Mergify allows the following, among other features:

Unlimited rules
Automated actions (some of which I demonstrated above)
Handling of pull request dependencies
Ability to assign reviews randomly to teams or members
Test and merge multiple enqueued pull requests in parallel
Use a bot account to act in your behalf
Private Mergify deployment
Premium support from the Mergify team
And lots more...

All these features make Mergify the fastest and most feature-rich merge queue on the market and many corporate teams working on large projects have had lots of positive things to say about Mergify (check out the home page for some testimonials).

I should also point out that Mergify's code is open source, so you can contribute or even make feature requests or improvements by opening an issue.

Mergify is free for open source projects and there are multiple commercial plans available, depending on your team's size and needs. So check out Mergify today if you want to be able to customize and prioritize your team's code merges safely, securely, and as fast as possible.

Now on to this week's tools!

Front-end Frameworks

create-web3-frontend
A fast way to get started with a fully-fledged web3 front-end setup with Next.js, wagmi (React hooks for Ethereum), and Tailwind CSS.

Start UI [web]
An opinionated UI starter built with Next.js, React, Chakra UI, Storybook, React Router, and lots more.

Markdoc
A powerful Markdown-based syntax and toolchain for creating custom documentation sites.

todomvc-vanillajs
An example of the ubiquitous TodoMVC app, often used to feature specific JavaScript libraries, built with vanilla JavaScript.

Horizon UI
A beautiful open-source admin template built in React and Chakra UI, featuring dark/light versions and 70+ components.

Master Styles
A new CSS framework and design library, similar to Tailwind, compatible with just about any JavaScript library or framework.

SaaS Starter Kits
A directory of 50+ SaaS starter kits and boilerplates, categorized by language/technology.

Virgo
A free HTML, CSS, and JavaScript landing template with 42 components, 6 pages, and no third-party plugins.

Spruce CSS
An open-source, lightweight, and modern CSS design system and framework built on Sass.

hackernews-remix-react
A Hacker News clone written with universal TypeScript, using React and Remix.

HyperUI
A collection of free Tailwind CSS components to build marketing sites, admin dashboards, e-commerce stores, and more.

React Tools

react-simply-carousel
A simple, lightweight, fully-customizable React carousel component that's touch enabled and responsive, with support for autoplay and infinity.

use-clamp-text
A React hook to clamp multi-line text to a given height in a responsive way and with extreme flexibility.

react-copy-to-clipboard
Copy to clipboard React component based on a similar older JavaScript project.

Allotment
A React component for resizable split-pane views for resizing two connected frames on a page, along with the option to enable closing panes.

numeric-stepper
A numeric stepper component for React, based on a Dribbble shot.

react-embed
A React component to embed just about any type of platform's content (YouTube, DailyMotion, JSFiddle, Replit, Dropbox, SoundCloud, and more).

click-to-component
Option/Alt+Click React components in your browser to instantly open the source in VS Code.

React Arborist
A full-featured tree component for React with ability to select to drag and drop, open and close folders, efficiently show thousands of items, and more.

Next SEO
A plugin that makes managing your SEO easier in Next.js projects.

The Uncategorizables

Learn How You Can Build Fintech Applications Faster With Lower Maintenance Costs
Download Sencha free guide to learn how to build applications faster, with lower maintenance costs, using charts and dashboards. Make better decisions by building and deploying sophisticated-looking, elegant, and enterprise fintech apps. SPONSORED

Spacedrive
A file explorer that combines your drives and clouds into one database that you can organize and explore from any device.

Tailwind Weekly
A weekly newsletter about all things Tailwind CSS with a new issue every Saturday.

Smartcat for Figma
An easy way to work with multilingual designs in Figma. Has a decent free plan.

DiskerNet
An internet on your disk that provides a full-text search archive from your browsing and bookmarks.

Changie
An automated and universal changelog and version management tool for preparing software releases, with lots of customization options.

Meilisearch
An open-source, lightning-fast, Rust-based, and hyper-relevant search engine that fits effortlessly into your apps, websites, and workflow.

Dagger
A portable development kit to build powerful CI/CD pipelines quickly, then run them anywhere.

Hypertrace
An open distributed tracing and observability platform that provides global, service and backend dashboards, allowing teams fast insight into service-level objectives.

io.livecode.ch
A prototype for turning code repositories into interactive tutorials and books, with code snippets that can be edited and run on the web.

Beacon
A web browser with a first-class browsing experience for a decentralized internet built with web technologies and secured without third-parties.

DopeUI
High quality UI design templates for Figma and Photoshop. Many free options here and some paid.

Typebot
Powerful blocks to create unique chat experiences. Embed them anywhere on your web/mobile apps. Free if self-hosted.

Commercial Apps and Classifieds

HTMLRev – 50 HTML landing page templates with images, illustrations, etc.

VSCode.Email - Most of my VS Code / IDE stuff is in my new newsletter. AD

Reshaped – React/Figma design system for product designs and prototypes.

Quest – Build component-based React apps designed in Figma quickly

Bytes - A JavaScript newsletter that's informative and entertaining. AD

GA Client – Dashboard with a simple view of your Google Analytics metrics.

Relicx – Debug front end issues fast with session replay and more.

A Tweet for Thought

I'm not fooled. If you look closely, you can tell it's not a real laptop.

Send Me Your Tools!

Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.

Before I Go...

[ WARNING: Flashing animations ] Arteater is a pretty cool little service that lets you upload hand-drawn individual frames that are converted into an animated GIF.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris