Issue #302 (Codacy Review, JS Utils, Jamstack, React)05/02/19
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
In the following screenshot I've filtered the issues to show only JavaScript warnings:
Codacy's Issues List filtered to show only JavaScript Warnings
Depending on the language used, you've likely detected these sorts of problems using a number of different tools, which can be tedious and time consuming. But the beauty of Codacy is that your code is analyzed automatically with every commit and pull request. Fifteen languages are officially supported by Codacy (including JavaScript, PHP, Python, Ruby, and C#) along with another fifteen via community supported plugins (including CSS, CoffeeScript, TypeScript, SQL, and Shell Script).
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!
|
JavaScript Utilities and Modules
reattempt
A modern JavaScript library for the browser and Node.js that lets you retry asynchronous functions when they fail.
Uppy
A sleek, modular open-source JavaScript file uploader, now at version 1.0 (details).
bowser
A browser detection utility in case there's no other way, because not even modern browsers always provide good feature detection mechanisms.
CrumbsJS
A lightweight, intuitive, vanilla ES6-fueled cookie and local storage library.
CKEditor 5
The popular modern JavaScript rich text editor is now at version 12+ (details).
shepherd
Yet another "guided tour" plugin with Tippy.js (the tooltip utility) as a dependency.
ObjQL
A query utility for JavaScript. See the code examples to understand what it does.
negative-array
Negative array index support (e.g. array[-1]) using ES2015 Proxy.
fromfrom
A JavaScript library written in TypeScript to transform sequences of data from one format to another.
indent-textarea
This looks useful! Add editor-like tab-to-indent functionality to `textarea` elements, in a few bytes.
Bootbox.js
Now at version 5+ (details). Programmatic dialog boxes using Bootstrap modals.
globalThis
A cross-engine global `this`, based on the code in this article.
promise-utils
A dependency-free JavaScript/TypeScript library that provides Lodash-like utility functions for dealing with native ES6 promises.
|
CMS's, Site Builders, Static Sites, etc.
1MB
A free and easy static website host.
Webiny
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)
Hyper Editor
A block based content editor intended to be integrated with any CMS or Framework, completely independent from any backend technology or platform.
Themosis
A framework to build enterprise solutions with WordPress, now out of Beta.
Bootstrap Shuffle
Bootstrap builder for busy developers.
Cosmic JS
Cloud-hosted content platform that offers a flexible and intuitive CMS API.
Menupit
Create a restaurant website with an easy-to-use GUI.
roast.io
Simple hosting solution for HTML pages and SPAs with a free initial tier.
Brandcast
Cloud-based end-to-end workflow for enterprise teams to design, collaborate, and instantly publish websites for all of their business needs.
React Static
A progressive static-site generator for React.
|
React Tools
ReactPlayer
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion.
Formal
Elegant form management primitives for the React Hooks era.
React Jeff
HTML Form library for React with an easy to learn API, lots of utility features, and written with React Hooks.
radio-group
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.
Storeon
A tiny event-based Redux-like state manager for React and Preact.
useQueryParams
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.
react-phone-number-input
An international phone number `input` component for React.
react-svg-pan-zoom
A React component that adds pan and zoom features to the SVG images. It helps to display big SVG images in a small space.
yubaba
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.
|
|
