Web Tools #404 - Frameworks, Tailwind, React, Testing

Advertisement

In case you didn't realize, the console object that you can use in your developer tools for debugging purposes (e.g. using methods like console.log() and console.clear()) is part of an official Web specification:

• The Console API on WHATWG
• Console API on MDN

As MDN points out, it's good that this is now an official spec. The article explains:

"The Console API started as a largely proprietary API, with different browsers implementing it, albeit it in inconsistent ways. The Console API spec was created to define consistent behavior, and all modern browsers eventually settled on implementing this behavior — although some implementations still have their own additional proprietary functions."

The article then points to the Chrome and Safari implementations, should you want to find out about the proprietary differences.

The Console object is available as a property of the Window object or inside a Worker and has about 20 or so methods available to it. One useful one that developers customarily created previously on their own is console.assert(), which allows you to pass a custom message if the item being asserted is falsy.

In this case I've literally dropped in the true and false, but this wouldn't typically be how you use assert(). Normally the first argument you'd pass in would be something you expect to be either truthy or falsy, from which you can then determine where a potential bug lies.

That's one example of what's available outside of the usual console.log(). Most of the methods have good browser support, so you can use these in whatever environment you're doing your debugging.
 

Front-end Frameworks

Managing Apple Devices at Your Business Is Easier Than Ever!
Managing your business's Apple devices is time-consuming – especially when employees are WFH. Jamf Now is a mobile device management solution making IT tasks simple so you can set up and secure devices from anywhere!   sponsored 

superplate
A well-structured production-ready front-end boilerplate for Next.js with Typescript, Jest, testing-library, styled-components, Sass, Bundle Analyzer and 30+ plugins.

The Component Gallery
An up-to-date repository of interface components based on examples from the world of design systems.

Supabase UI
An open-source UI component library inspired by Tailwind and AntDesign and designed to be used with Tailwind's utility classes.

Vue Notus
A beautiful, open-source UI Kit and admin for Tailwind and Vue, featuring multiple HTML elements and dynamic Vue elements.

next-startd
A free Next.js TypeScript landing page template with support for ESLint, Prettier, Husky, and lots more.

Tailwind UI Kit
Free and premiums Tailwind components and templates with React, Angular, and Vue integrations.

TailwindBlog
A Next.js and Tailwind-based blogging starter template, as an alternative to Hugo and Jekyll blogs.

extension-create
Helps you develop cross-browser extensions with built-in support for module imports/exports, auto-reload, and more.

kimia-UI
A collection of customizable UI Components for React built with Tailwind 2.0.

Bedrock
Not free or cheap. A modern full-stack Next.js and GraphQL boilerplate with user authentication, subscription payments, teams, invitations, emails, and more.

DashboardKit
Free and premium Bootstrap 5 admin template with 170+ ready to use conceptual pages, UI components, form elements, charts, tables, and more.

Testing and Debugging Tools

Bird Eats Bug
Bug reporting system that uses screen recording with technical logs to help your engineering team capture data and deal with bugs quicker.

Superadmin
A platform for no-code visual automation testing with a generous free plan for startups.

Waterfaller
Online tool that uses a 'waterfall' view of resources to find slowdowns on pages and use those insights to create tasks that fix core web vital issues.
Cumulative Layout Shift Debugger
Online tool to visualize the cumulative layout shifts of a web page, to identify what needs improving on mobile and/or desktop in the initial load of a website.

SelectorsHub
Browser extension that adds an extension to Dev Tools to allow you to easily edit and find references to elements via CSS selectors, XPath, JS element references, and more.

Ray
Not free, but for a change here's a PHP debugging tool you might want to check out.

nodejsscan
A static security code scanner for Node.js applications.

Atomos
Recoil developer tool to visualize and debug atom/selector relationships in React applications.

Sim Daltonism
A Mac app that lets you visualize colors as they are perceived with various types of color blindness.

Google Page Experience Checker
Enter your domain to check website performance and compliance with Core Web Vitals in the upcoming Google page experience update for May 2021.

Responsively
A modified browser to view and instantly preview responsive layouts in multiple device views at the same time.

React Tools

Advanced React & GraphQL
ICYMI, Wes Bos has re-launched his Advanced React course that offers 70+ HD videos in the master package. (Alternatively, there's React for Beginners and Beginner JavaScript).   promoted

react-anchorme
React component using Anchorme.js to detect urls and emails in a text and converts them into clickable HTML links.

react-spring-carousel-js
A performant React carousel component powered by react-spring and react-use-gesture.

React-Time-Picker
A time picker component for React with internationalization support and no need to use something like Moment.js.

rc-table
An extensive React table component with a number of useful functions and customizations.

React Currency Input Field
A currency-based input field for React, with various display modes.

Pullstate
Ridiculously simple state stores with performant retrieval anywhere in your React tree using React hooks.
 
echarts-for-react
A simple and the powerful React wrapper for Apache ECharts, a powerful, interactive charting and data visualization library.

Typed React Form
A fast, completely type-checked React form state manager that supports nested objects/arrays.

react-glider
A React wrapper for Glider.js, a native scrolling carousel component.

react-csv-reader
React component that handles CSV file input and returns its content as a matrix.

react-fetching-library
A simple and powerful API client for React to use hooks or the "Function as Child Component" pattern to fetch data easily.
 

A Tweet for Thought

Sarah Dayan in a thread on the apparent fragility of the JavaScript tooling ecosystem.

 

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...

Can you tell the difference between popular tech logos and slightly altered versions of the same logo? The Logo Quiz lets you test yourself, and it's a little harder than it sounds.

Thanks to everyone for subscribing and reading!

Keep tooling,
Louis
@WebToolsWeekly

Support this newsletter:  PayPal.me  /  Patreon / GitHub Sponsors  /  E-Books