Issue #302 (Codacy Review, JS Utilities, Site Builders, React)
The following intro is a sponsored product review for Codacy, an automated code review and code analytics tool.
As part of your current coding workflow, you probably have some kind of code analysis checklist enabled by one or more tools. For example, you might incorporate a linter, a code style checker, or even some kind of code security scan.
Well, if you want to integrate multi-featured, low effort code analysis into your workflow, then you have to check out Codacy.
Once you log in via GitHub or Bitbucket, Codacy will display a list of your repositories and from there you can choose which ones you want scanned. An initial scan will notify you of the following:
- Issues with code security
- Error prone code
- Problems with code style
- Compatibility flaws
- Unused code
- Code performance recommendations
Once inside a project's dashboard, you'll have a slew of options, including ability to view commit history, project files, and open pull requests.
Allowing Codacy to analyze everything as the default might be overkill for any given project. The Code Patterns screen from an individual project dashboard allows you to customize the analysis tools you want used for that specific repository.
Codacy lets you choose which tools you want to enable or disable for each project
If you have a configuration file already set for one of the supported tools, Codacy will pick it up automatically. But if any of the tools are new to you and your team, you can choose which rules you want to enable or disable for any of the listed tools, as shown in this screen grab from the JSHint options:
Codacy lets you choose which rules to enforce for each supported tool
And these aren't just blind suggestions. Each code rule is explained so you can make an informed decision. Very handy and educational!
Finally, one of my favourite features of Codacy is its pricing tiers. If you're part of a small startup of four users or fewer, Codacy is free forever. So you'll only get charged as your team grows.
There are so many more features I haven't touched on in this brief review, but overall I really enjoyed poking around and seeing how code analysis can be customized to my own needs or those of my team. So check out Codacy today — it could be one of the most useful and ground-breaking code tools you'll try all year!
Now on to this week's tools!
A browser detection utility in case there's no other way, because not even modern browsers always provide good feature detection mechanisms.
A lightweight, intuitive, vanilla ES6-fueled cookie and local storage library.
Yet another "guided tour" plugin with Tippy.js (the tooltip utility) as a dependency.
Negative array index support (e.g. array[-1]) using ES2015 Proxy.
This looks useful! Add editor-like tab-to-indent functionality to `textarea` elements, in a few bytes.
Now at version 5+ (details). Programmatic dialog boxes using Bootstrap modals.
A cross-engine global `this`, based on the code in this article.
CMS's, Site Builders, Static Sites, etc.
A free and easy static website host.
A developer-friendly serverless CMS powered by GraphQL and React.
Automatic App Landing Page
A Jekyll theme for automatically generating and deploying landing page sites for mobile apps. (See also the Gatsby version)
A block based content editor intended to be integrated with any CMS or Framework, completely independent from any backend technology or platform.
A framework to build enterprise solutions with WordPress, now out of Beta.
Bootstrap builder for busy developers.
Cloud-hosted content platform that offers a flexible and intuitive CMS API.
Create a restaurant website with an easy-to-use GUI.
Simple hosting solution for HTML pages and SPAs with a free initial tier.
Cloud-based end-to-end workflow for enterprise teams to design, collaborate, and instantly publish websites for all of their business needs.
A progressive static-site generator for React.
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion.
Elegant form management primitives for the React Hooks era.
HTML Form library for React with an easy to learn API, lots of utility features, and written with React Hooks.
An accessible WAI-ARIA 1.1-compliant Radio Group React component.
React Redux Fork
A fork of React Redux 6, but up to 98x faster.
A tiny event-based Redux-like state manager for React and Preact.
A React Hook for managing state in URL query parameters with easy serialization. Works with React Router and Reach Router out of the box. TypeScript supported.
An international phone number `input` component for React.
A React component that adds pan and zoom features to the SVG images. It helps to display big SVG images in a small space.
An element animation orchestrator for React. Control when, where, and how to start animations and comes with pre-built animations you can drop in and start using.