|
Issue #499 • February 9, 2023
Practical, No-nonsense UI Design Tips 🔥
If you do any design work, you might struggle to find actually practical UI advice that could help you turn your crappy-looking designs into something good. That's why our friend Erik created Design Hacks – an email newsletter of short, practical design tips.
You won't hear any talk about golden ratios, or complex color theory (these are frequently taught, but they don't make ugly designs better!). Instead, Design Hacks focuses on the first principles of an analytical and practical approach to visual design. It comes well-recommended by many in the industry and we think you'll love it. Check it out!
|
If you want to prevent cross-site scripting, data injection, and similar attacks on your website or app, one of the go-to web features you should look into is Content Security Policy, or CSP. CSP is a topic I can't cover properly in a brief newsletter intro like this, but I thought I'd briefly cover a few of the interesting things about this security layer. You can check out this MDN article if you want a nice introduction to the subject. I'll be borrowing a few things from that article here.
CSP can be enabled in one of two ways:
- By configuring your web server to return the Content-Security-Policy HTTP header
- By inserting a meta tag in your document's head section
The second option is naturally the easiest to try out CSP right away. Here's what a simple CSP meta tag looks like:
|
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; img-src https://*; child-src 'none';">
|
The above policy instructs the browser that all content (including scripts) must come from the site's own origin, that images must be served over HTTPS, and it disallows any web workers or nesting browser contexts (like iframes). Such a CSP example might work for a lot of small websites.
A more complex example might look like the following:
|
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; img-src *; media-src example.org example.net; script-src userscripts.example.com">
|
In this example, the browser is give much more detail on my policy:
- Content must come from the site's own origin
- Images can come from any source
- Media like audio and video, embedded via HTML's audio and video tags, must be served from the website's origin, with the exception of the allowed domains listed for media-src
- Scripts must be served from the website's origin, with the exception of the domain listed for script-src
Once you know what different directives are available, it's pretty easy to put together a policy that fits your own website or app's needs.
Of course, simply adding a meta tag like one of the above to any website can have unexpected effects. Usefully, you can use the following CSP example to test out a policy without it actually taking effect on the page:
|
<meta http-equiv="Content-Security-Policy-Report-Only"
content="default-src 'self'; img-src https://*; child-src 'none';">
|
Note the addition of "-Report-Only" to the end of the http-equiv value. This allows you to experiment with different policies without actually enforcing them on the page. So, for example, if you forgot that your website serves images from a CDN that's not on your domain, this "report only" version of the meta tag would catch that before it actually broke your pages.
As I mentioned, this is an extensive topic that's hard to do justice in a brief intro like this, but I thought I'd cover a few examples here just to give you a taste of what's possible.
Now on to this week's tools!
|
JavaScript Libraries and Frameworks
Fastify DX
A collection of @fastify/vite renderers, allowing you to serve static or live (SSR) Vue and React applications.
Piral
A framework for next generation portal applications that allows you to build web apps that follow the microfrontends architecture.
Practical, No-nonsense UI Design Tips 🔥
If you do any design work, you might struggle to find actually practical UI advice that could help you turn your crappy-looking designs into something good. That's why our friend Erik created Design Hacks – an email newsletter of short, practical design tips. SPONSORED
DerbyJS
A full-stack framework for writing modern web applications, powered by Node.js and MongoDB, but can also be used with other data sources.
Cample.js
A typed JavaScript web framework, written in TypeScript, for creating reactive websites with no virtual DOM.
Unovis
A modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript.
Arrow
An experimental tool for programming reactive interfaces using native JavaScript with its primary features being observable data and declarative/reactive DOM rendering.
Elysia.js
A fully type-safe web framework, optimized for Bun that has an Express-like syntax, is fast by default, and has end-to-end type safety like tRPC.
Atri
An open-source full-stack web development framework written in TypeScript, designed for Python developers, with future support for Node.js.
Vercel Examples
A curated collection of examples and solutions from the Vercel team, to help you build robust and scalable applications.
Hyperstack
A modern Node.js web framework for the pragmatic programmer, with built-in tests, and based on concepts from Rails development.
|
| |
Git, GitHub, and CLI Tools
Typo
An engineering analytics platform that connects the dots between Git and JIRA, to gain insights across tech processes and individuals. The free plan allows up to 10 members.
wfh
A shell script to create a remote repository directly from your local folder to GitHub.
Gist Database
A package, built with TypeScript, that allows you to use a GitHub gist as a key/value datastore, useful for small amounts of JSON data.
Skyflow: What If Privacy Had an API?
What are the most common mistakes companies make when it comes to managing and protecting sensitive user data? Read the guide now to learn how to move fast without breaking privacy. SPONSORED
GitHub Code Editors
Chrome extension that adds a button that allows you to quickly open any GitHub repo using github.dev, github1s, or CodeSandbox.
GitHub Error Solve
An open-source project to help you solve errors or issues that arise while using GitHub.
ProfileMe.dev
An online app to help you interactively create the Markdown for a nice looking GitHub README profile page.
 |
Le Git Graph
Chrome or Firefox extension that displays the Git graph for any GitHub repository, to visualize commits, branches, etc.
Juice
A Deno-based script to configure and personalize your Windows Terminal.
relno
A fully configurable release note generation framework that allow you to automatically generate beautiful release notes from commit messages and pull requests.
Carbonyl
A Chromium based browser built to run in a terminal, with support for pretty much all Web APIs including WebGL, WebGPU, audio and video playback, animations, etc.
|
React Tools
flatstore
A small and fast React state management solution, that's a global key/value storage, as an alternative to Redux.
Typist
A rich-text editor React component, powered by Tiptap, the headless text editor framework.
Skyflow: What If Privacy Had an API?
What are the most common mistakes companies make when it comes to managing and protecting sensitive user data? Read the guide now to learn how to move fast without breaking privacy. SPONSORED
usehooks-ts
A ready-to-use React hooks library, written in TypeScript, currently with 30+ hooks.
React Wrap Balancer
A React Component that makes long titles more readable in different viewport sizes. It improves the wrapping to avoid situations like having a single word on the last line, to balance heading text.
React Reader
An ePub-reader for React, powered by Epub.js, for an easy way to embed an ePub file in your React app.
React Unity WebGL
A modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React.
Codux
A visual IDE for React that allows you to visually edit projects side-by-side with your code editor and see every change reflected instantly.
 |
react-i13n
A performant, scalable, and pluggable approach to instrumentation (i.e. "i13n") for your React application. See description in the repo for what is meant by the term.
react-multi-email
A React component that lets the user add multiple emails in a textarea or input field, similar to adding at-mentions or hashtags.
react-visual-grid
A powerful and lightweight image grid component for React that's virtualized by Default and allows you to do masonry layouts easily.
|
|
Commercial Apps and Classifieds
These are commercial apps, affiliate links, PPC ads, and paid classifieds. Submit yours!
|
Modern MERN – A modern Node.js SaaS Boilerplate to build projects using the MERN stack.
|
|
Bytes – A JavaScript newsletter that's entertaining and informative for all levels of developers. AD
|
Infinite Table – A modern, lightweight, and extensible data grid for building React apps faster.
|
|
Function12 – A multi-featured design-to-code automation tool for converting Figma designs.
|
1440 – A free, no-nonsense daily newsletter that provides an impartial POV on the news. AD
|
|
idemeum – One-click password-less access to applications and infrastructure.
|
Metlo – A best-in-class security platform to inventory, test, and protect all your APIs.
|
|
|
A Tweet for Thought
I don't know if this is an old meme but this made me legit laugh out loud and I still don't know if what this guy is saying is real or parody.
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 remember StumbleUpon, which apparently is still a thing, you might want to try out Jumpstick, which is sort of a modern take on the same idea. I like that it allows you to select a category to begin, rather than just being random.
Thanks to everyone for subscribing and reading!
Keep tooling,
Louis
@WebToolsWeekly
PayPal.me/WebToolsWeekly
|
|
