|
Issue #553 • February 22, 2024
A Newsletter Helping Flex Your Product Muscle
Product for Engineers is PostHog’s newsletter dedicated to helping engineers improve their product skills. Learn what questions to ask users, how to build new features users love, and the path to product market fit.
Subscribe for free to get curated advice on building great products, lessons (and mistakes) from building PostHog, and deep dives into the strategies of top startups.
Subscribe for Free →
|
The DevTools in Chromium-based browsers continue to be improved on and if you're not careful you can end up using the same features without checking out other useful stuff.
One new feature that's currently in experimental mode is the "CSS Overview". To access this section, visit the page for which you want to generate a CSS overview, then click the three dots in the top-right area (the "Customize and control DevTools" option). Select "More tools" then choose "CSS Overview". You can also open the same option using the command palette by doing a keyword search.
Opening the CSS Overview panel in DevTools
This brings up a summary page explaining briefly how the tool can help you. Click the "Capture Overview" button to run the CSS Overview test.
The first thing you'll see in the result is a basic overview of your page's CSS, with data on number of stylesheets, inline style elements, number of style rules, as well as different types of selectors.
A synopsis of the CSS Overview features
After that, there's info on colors, which divides the colors into categories and provides info on low contrast. The example shown in the screenshot below has 7 different contrast issues that could use fixing for more accessible text.
A generated CSS Overview summary
There's also info on fonts. For both colors and fonts, you can click on a color or a font to see a list of elements using that color or font. You can click the element to go to it in the Elements panel if you want to deal with it in there.
Examining colors using CSS Overview
And you can also simply hover over any of the elements in the list and the element will be indicated visually on the page so you can see which one it maps to in the layout, as shown in the screenshot below.
Hovering over an element in the elements list in CSS Overview
And finally, there's info on unused declarations and number of media queries used on the page. The unused declaration info can certainly be useful for cleaning up your stylesheets and doing some refactoring.
The unused declarations section in the CSS Overview
When you first open the CSS Overview panel, you'll see a reminder that this is still an experimental feature, with a link to this bug report thread where you can submit issues if you find any. You can also use that for feature requests. It will be interesting to see how this feature improves as it's developed and comes out of the experimental stage, so keep an eye on that!
Now on to this week's tools!
|
Web Frameworks
DigitalHippo — A modern full-stack e-commerce marketplace template for digital products, built with Next.js, shadcn/ui, and Tailwind, and includes an admin dashboard, auth via Payload, and lots more.
The Boring JavaScript Stack — An opinionated full-stack JavaScript project starter built with Sails (the Node.js framework), Inertia (for SPA), Tailwind, and is compatible with Vue, React, or Svelte.
Product for Engineers — Product for Engineers is PostHog’s newsletter dedicated to improving engineer's product skills. Subscribe for free to get advice on building great products, lessons (and mistakes) from PostHog, and deep dives on top startups. SPONSORED
David UI Angular — A UI component library for enterprise-level projects based on Tailwind and Angular and features 20+ customizable components.
Draft UI — A set of 20+ simply designed React components focused accessibility and built with Adobe's React Aria library and Tailwind.
Homepage — A modern, fully static, fast, secure fully proxied, highly customizable application dashboard, configured via YAML files, with integrations for over 100 services and translations into multiple languages.
Baklava — A component library and design system based on native Web Components and can be easily integrated with your framework of choice.
rainboot.css — A Bootstrap theme with the same basic features as Bootstrap but powered by design tokens from Cloudscape, a third-party design system and component library.
JSX Email — A set of React components and helpers for building responsive email templates with JSX or TSX and compatible with modern email clients.
Nextly — A landing page and marketing website template for startups and indie projects, built with Next.js and Tailwind.
|
| |
Build Tools, Bundlers, etc.
pretty-quick — An npm package that runs Prettier, the popular code formatter, on your changed files, with support for Git and Mercurial.
Secretlint — A pluggable linting tool that scans your project to prevent committing credentials, installable via Docker or npm and includes a pre-commit hook.
Oxc — A collection of JavaScript tools written in Rust that includes a parser, linter, Rspack bundler, and bundler, type checker, and more.
@fastify/vite — A Fastify plugin to cleanly and elegantly integrate Fastify and Vite to create a minimal, low overhead, fast setup for full-stack monoliths.
package-majors — An interactive tool that shows the difference in a package's major (or minor) version downloads over the past week, to help identify where people are "stuck" when doing upgrades.
Meco: The #1 Newsletter Aggregator — The inbox is full of distractions and too many subscriptions lead to inbox chaos. Free your newsletters from the inbox. Move your newsletters to a space built for reading and declutter your inbox in seconds. SPONSORED
Glowup Vibes — Here's one you didn't know you needed. It's a Babel plugin that transpiles internet slang to valid JavaScript. For example "ghosted" becomes "return null", "lowkey.sus('message')" becomes console.warn("message"), etc.
pgxman — An npm-like registry for PostgreSQL so you can discover, install, and upgrade your PostgreSQL extensions.
 |
Banal — A CLI app that lets you analyzer your bundles on-demand, powered by esbuild, and works as a replacement for similar online tools.
TypeSpec — From Microsoft, a language to describe your data up front and generate schemas, API specifications, client/server code, docs, and more.
|
Why Fractional Teams Are the Secret to Hiring in 2024
In the realm of hiring, businesses are rethinking the conventional approach. Fractional roles offer a flexible and cost-effective alternative to the traditional full-time hires. This paradigm shift prioritizes expertise over employment, allowing companies to access seasoned professionals without the commitment of a full-time role.
Embrace the future of hiring with Fraction. Explore profiles of the best-vetted US-based senior developers, designers, and product managers at offshore rates, without the full-time cost. Plus, enjoy their risk-free trial – if you’re not satisfied with a hire, they’ll replace them at no additional cost.
Access Developer Profiles Instantly by Signing Up Today →
|
The Uncategorizables
Unkey — An open-source API authentication and authorization platform for scaling user facing APIs, to let you create, verify, and manage low latency API keys in seconds.
TypeHero — Not a tool but a platform that lets you connect, collaborate, and grow with a community of TypeScript developers via interactive coding challenges, discussions, and knowledge sharing.
CodeDiagram — A VS Code extension that lets you create a visual diagram of your codebase, side-by-side with your code, so you can better understand the architecture and improve refactoring.
Meco: The #1 Newsletter Aggregator — The inbox is full of distractions and too many subscriptions lead to inbox chaos. Free your newsletters from the inbox. Move your newsletters to a space built for reading and declutter your inbox in seconds. SPONSORED
Zed — Newly open-sourced, a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
Webacus — A "Swiss-army knife for developers" that includes 70+ operations, including encoding, decoding, compression, date and time functions, hashing, and lots more.
 |
textart.sh — A huge directory of graphics made purely with text. Just click any of the categories and you'll get multiple text art examples with options to toggle a color palette, adjust fills, and even upvote/downvote your favourites.
Quetta — A free, privacy-focused web browser for Android (iOS coming soon) with features like tracker blocking and data encryption.
Tart — A virtualization toolset to build, run and manage macOS and Linux virtual machines on Apple Silicon devices.
Privacy Tools — A one-stop resource, started in 2015, for information on services, tools, and privacy guides to counter global mass surveillance.
|
|
Commercial Apps & Classifieds
Tablize – A tool to transform your data sources into dashboards effortlessly with AI.
|
|
VSCode.Email – The latest news, tips, tools, & articles on the world's most popular code editor. AD
|
SaaS Starter Kit – A cutting-edge SaaS template that includes auth, subscriptions, database setup, etc.
|
|
RapidLaunch – A Nuxt boilerplate to launch a SaaS app with auth, pricing table, payments, and more.
|
TLDR – A daily byte-sized version of Hacker News that takes just a few minutes to read. AD
|
|
E-Commerce System – A library of Figma components to create high-quality e-commerce pages.
|
AgentHub – A collaborative AI platform to create workflow automations using modular components.
|
|
|
An X Post for Thought
If you're a fan of fonts, you'll love this real-life dramatization of all your favourites just hanging out.
Send Me Your Tools!
Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (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...
Continuing on the theme of tools for your build process, there's an X/Twitter account called npm malware that posts "malicious packages detected on npm in real-time". Might be worth a follow.
Thanks to everyone for subscribing and reading!
Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly
|
|
