Issue #372 (CSS Values, Git/CLI, Jamstack, React)09/03/20
When writing CSS, if you find yourself having a hard time remembering what values are valid for any given CSS property, you'll want to check out my project CSS Values, which I've overhauled in recent weeks to include all CSS properties with up to date browser support and a few new features.
To look up a property, just type the property or a keyword and the app will automatically update to search in real-time. If more than one property is selected, you'll see a sub-menu that includes a list of all the filtered properties, which you can then navigate.
In addition to the ability to search by keyword, you can also choose from the pre-defined category filters.
Really, anything you type works as a category filter that can then be linked to when the URL updates based on the filter chosen or typed.
Each property includes a "Browser Support" button that pulls in the data from caniuse.com (using the awesome CanIUse Embed by Ire Aderinokun).
And finally, the app is now installable as a PWA with offline support (except for the browser data, which needs online connectivity to pull it in).
So check out the new features in CSS Values and let me know what you think! I hope you'll find it useful as a way to check valid values for CSS properties, or maybe just to discover new CSS properties that you hadn't heard of before.
Now on to this week's tools!
|
Git, GitHub, and CLI Tools
GH Archive
A project to record the public GitHub timeline, archive it, and make it easily accessible for further analysis.
present
A terminal-based presentation tool with colors and effects.
Stormkit
An infrastructure provider for modern JS applications that perfectly integrates with popular Git solutions.
GitDailies
Daily summary of the changes in your GitHub repos. It enables peer recognition, and keeps your team informed without the distraction of real-time commit alerts.
OctoLinker
A browser extension for GitHub that turns language-specific statements like `include`, `require`, or `import` into links.
Surge PR Preview
A GitHub action that previews your website on surge.sh for your pull requests.
portalize
A simple shell alias to make portals, or shortcuts (like bookmarks) to specific directories.
blogit
A personal blog based on GitHub Pages and GitHub Issues.
Taze
A modern CLI tool that keeps your dependencies fresh.
Release
Generate changelogs with a single command. Automatically generates a new GitHub release and populates it with the changes (commits) made since the last release.
wait-on
A cross-platform command line utility and Node API that will wait for files, ports, sockets, and http(s) resources to become available.
Hukum
An npm module that displays GitHub Action progress in the terminal. It works for workflows that run when a commit is pushed to GitHub repo. Once a commit is pushed, it will print status updates in real time.
Recommended Reading for Developers:
|
Site Builders, CMS's, Static Sites, etc.
Tech Productivity
A brief weekly newsletter for tech professionals. Features articles, tips, and tools for improved productivity. promoted
Relate
A visual development environment for fast, live team collaboration.
Elder.js
An opinionated static site generator and web framework for Svelte built with SEO in mind.
React Bricks
A React blocks-based CMS. Define your content bricks, create a blazing fast Gatsby or Next.js static site with admin dashboard, host it wherever you want.
μJam
A minimalistic Jamstack approach for creating GitHub-Pages hosted sites.
Brick
A super lightweight platform for creating small websites, like Google Docs for websites.
JungleJS
A Jamstack framework for Svelte. Write less code and develop static sites from any data source. Leverage Svelte and GraphQL for a seamless build.
Weblium
An intuitive AI-powered site builder.
gatsby-plugin-dark-mode
A Gatsby plugin that handles some of the details of implementing a dark mode theme.
jamstack-translate
Generate static translations for any front end project.
Azure Static Web Apps
A modern web app service from Microsoft that offers streamlined full-stack development from source code to global high availability.
|
React Tools
Flume
Extract business logic from your apps with a user-friendly node editor powered by React.
Bumbag
A friendly React UI Kit suitable for MVPs or large-scale applications.
Plasmic
The fast and fun visual builder for React. Build maintainable, production-ready presentational components at the speed of design.
Ant Table Extensions
Extensions for the Table component in the React Ant Design framework.
react-statey
Yet another tiny and simple global state manager with TypeScript support. Less than 1 KB (minified), no Redux, no context, no verbose boilerplates.
react-fetch-hook
React hook to let you conveniently use the Fetch API.
React Figma
Currently in Beta. A React renderer into Figma. Use React components as a source for your designs.
open-react-template
A free React landing page template designed for developers who want to create a quick and professional landing page for their open source projects, SaaS products, online services, etc.
React GridList
A virtual-scrolling grid-based component based on CSS Grids.
Aditum
A custom React component library to support developers in writing accessible and WAI-ARIA compliant single page applications (SPAs).
|
A Tweet for Thought
With so many problems in the world right now, whether you're dealing with work or non-work situations, this is great advice from Gary Vaynerchuk.
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...
If you're up for some coding challenges, you'll want to check out JSchallenger, which offers JavaScript challenges for all levels of development and even lists "most popular" and "most failed" challenges.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
