Newest
Simple CSS Vars library
Create valimport { caviar } from "https://esm.town/v/jxnblk/caviar";
const vars = caviar({
dark: {
text: "#000",
bg: "#fff",
},
light: {
text: "#fff",
bg: "#000",
},
});
Create val// JSX example
<div style={vars.style.light}>
<h1
style={{
color: vars.text,
backgroundColor: vars.bg,
}}>
Hello
</h1>
</div>
Can also be used for non-dynamic CSS vars
Create valimport { caviar } from "https://esm.town/v/jxnblk/caviar";
const vars = caviar({
blue: "#0cf",
});
// <div style={vars.style} />
Tests: https://www.val.town/v/jxnblk/caviar_tests
TODO
- Fallback for missing mode keys
Simple CSS library for Val Town
Create valimport { css } from "https://esm.town/v/jxnblk/tuna";
const styles = css({
body: { // special keyword
fontFamily: "system-ui, sans-serif",
margin: 0,
backgroundColor: "#f5f5f5",
},
container: {
padding: "32px",
margin: "0 auto",
maxWidth: "1024px",
},
input: {
fontFamily: "inherit",
fontSize: "inherit",
lineHeight: "1.5",
padding: "2px 8px",
border: "1px solid #ccc",
borderRadius: "4px",
},
});
Create val// JSX example
const html = render(
<div className={styles.container}>
<style {...styles.tag} />
<h1>Tuna Example</h1>
<input
type="text"
defaultValue="hi"
className={styles.input}
/>
</div>
);
Limitations
- Does not currently support media queries
- Does not support HTML element selectors (other than
body
) - Does not support pseudoselectors
- Does not support nested selectors
Tests: https://www.val.town/v/jxnblk/tuna_tests
TODO
- Convert number values to px
- Companion CSS var library
- Media queries
- Nested selectors
AQI Alerts
Get email alerts when AQI is unhealthy near you.
Set up
- Click
Fork
- Change
location
(Line 4) to describe your location. It accepts fairly flexible English descriptions which it turns into locations via nominatim's geocoder API. - Click
Run
Background
This val uses nominatim's geocoder to get your lat, lon, and air quality data from OpenAQ. It uses EPA's NowCast AQI Index calculation and severity levels. Learn more: https://www.val.town/v/stevekrouse.easyAQI
CORS issues are the bane of frontend engineers.
In Val Town, if you don't customize any CORS headers, we add these defaults:
Access-Control-Allow-Origin: "*"
Access-Control-Allow-Methods: "GET,HEAD,PUT,PATCH,POST,DELETE"
You can override them if you wish to disallow CORS. Check out @neverstew/setCorsHeaders for the easiest way to do this in your code.
This val is a client-side-rendered React app that makes requests to @stevekrouse/cors_example_backend. The backend is in a different val because CORS applies to requests on different domains. The backend has examples of the default permissive CORS behavior and disabled CORS.