The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›7 »

prom candy: Dec 16, 2005; Only I may dance

frogbs posted:

I've got three values that exist in the front matter for a post. I want the post template to take those values, figure out which one is the largest or smallest and assign new variables to each. I then want to use those variables in the post template.

Something like this?

src/content/config.ts

code:

import { defineCollection, z } from "astro:content";

const posts = defineCollection({
  type: "content",
  schema: z.object({
    number1: z.number(),
    number2: z.number(),
    number3: z.number(),
  }),
});

export const collections = { posts };

src/content/posts/my-post.md

code:

---
number1: 100
number2: 200
number3: 300
slug: my-post
---

Hello this is a post

src/pages/[slug].astro

code:

---
import { getEntry } from "astro:content";

const { slug } = Astro.params;
const post = await getEntry("posts", slug);

if (!post) {
  return new Response(null, { status: 404, statusText: 'Not found'});
}

const { number1, number2, number3 } = post.data;
const highest = Math.max(number1, post.data.number2, post.data.number3);
const lowest = Math.min(number1, number2, number3);
---

<h1>Hello: {slug}</h1>

<p>Highest: {highest}</p>

<p>Lowest: {lowest}</p>

I still don't get exactly what you're trying to do but this is how you get details from the frontmatter of a post and use it in the template. If you're running in SSG mode you need to also define getStaticPaths so it knows which post pages to generate but otherwise it should work the same.

prom candy fucked around with this message at 03:57 on Sep 4, 2023

# ¿ Sep 4, 2023 03:54

Adbot: ADBOT LOVES YOU

# ¿ May 16, 2024 14:30

prom candy: Dec 16, 2005; Only I may dance

frogbs posted:

Oh wow, thank you, i'm going to try this out.

No problem i actually havent had a chance to screw around with Astro too much but I was like 95% certain what you were trying to do is doable so it gave me an excuse to spin up an app.

# ¿ Sep 4, 2023 04:59

prom candy: Dec 16, 2005; Only I may dance

frogbs posted:

Just wanted to thank you again for this, I've gotten much further along in my project after looking at what you provided and reading more of the documentation.

The thing i'm wrestling with now is having a field in my schema and .md files that is occasionally empty. If I try to render some HTML based on that value being empty or not my Astro build fails. I feel like this is a pretty common thing to do in an SSG (I did it in Hugo no problem), but it seems like Astro is more strict.

The field is called 'address'. In my frontmatter if it's empty it just looks like 'address: '. I'm using a JSX expression to render it only if it has a value:
code:
{entry.data.address && <p>{entry.data.address}</p>}
But that triggers an error on build if 'address' has no value. If I remove it from the .md file the HTML isn't rendered.
code:
frontmatter does not match collection schema.
address: Expected type "string", received "null"
I thought it could be my schema needing to allow 'null' as a value, but an not finding a lot of documentation on how to do that with Zod.

Edit: It looks like this may be a bug? https://github.com/withastro/astro/issues/6469

No problem! Astro is sweet and I don't actually get a lot of opportunities to use it. I had fun digging into your problem last weekend.

In Zod I think you would express this as z.string().nullable(), or you could use .optional() and then not supply the address in the frontmatter at all if you don't have it.

# ¿ Sep 10, 2023 01:17

prom candy: Dec 16, 2005; Only I may dance

While we're talking about cool poo poo, Bun 1.0 is out: https://bun.sh/

Looks like it's super loving fast and has tons of DX improvements over Node. I was playing around with it a bit last night and it installs packages insanely fast.

# ¿ Sep 10, 2023 01:39

prom candy: Dec 16, 2005; Only I may dance

Not sure how it works in FF but in chrome if you look at the computed styles tab it will show you which CSS rules it used. I'm sure FF has something similar

# ¿ Sep 11, 2023 05:18

prom candy: Dec 16, 2005; Only I may dance

Shopify bought Remix last year and they're going all in on that (as mentioned at the start of the Hydrogen docs).

Remix is a loving awesome framework imo, they've gotten a lot of things right that NextJS got wrong

https://remix.run/

https://kentcdodds.com/blog/why-i-love-remix

If you want to run it on AWS I would look into deploying it with SST: https://sst.dev/ and https://docs.sst.dev/start/remix

# ¿ Sep 12, 2023 01:48

prom candy: Dec 16, 2005; Only I may dance

The people who work at Vercel are still React Core Team members I'm pretty sure. Aside from RSC they're supposedly working on React Fiber but everyone inside React is super hyped on RSC at the moment.

# ¿ Dec 7, 2023 23:02

prom candy: Dec 16, 2005; Only I may dance

Oh right, React Forget. I keep getting those mixed up.

# ¿ Dec 8, 2023 15:38

prom candy: Dec 16, 2005; Only I may dance

I think fly.io has a free tier

# ¿ Jan 6, 2024 21:28

prom candy: Dec 16, 2005; Only I may dance

It's loading for me but in the main carousel thing you've got white text overlapping with white image backgrounds

# ¿ Jan 29, 2024 23:21

prom candy: Dec 16, 2005; Only I may dance

Oh yeah the white on white was on mobile

# ¿ Jan 30, 2024 00:05

prom candy: Dec 16, 2005; Only I may dance

It's only Angular if it comes from the Angular region of Mountain View, otherwise it's just sparkling polymer

# ¿ Feb 9, 2024 05:57

prom candy: Dec 16, 2005; Only I may dance

You're basically not gonna get database-to-client typesafety without using an ORM or query builder that wants to define your schema. Drizzle is very cool. Similarly there's Jet for Golang, but I haven't used that.

# ¿ Mar 25, 2024 18:49

prom candy: Dec 16, 2005; Only I may dance

abraham linksys posted:

if you just want runtime type-safety with no ORM, you can hand-write zod schemas for the expected query results, and this brings up typescript to parity with, like, every other typed language where the types exist at runtime. there's some libraries that'll integrate this like slonik (https://github.com/gajus/slonik).

if you're using an ORM like drizzle you probably don't need any extra runtime validation? it already has its own schema DSL that i assume would enforce stuff at runtime

if you want actual end-to-end type safety when interacting with a database that is a huge can of worms in any language and can be a pit of a pain in the rear end to get set up (e.g. my java-heavy employer eventually gave up on JOOQ's DSL for being way too hard to work with and is still keeping on with JDBI). stuff like prisma exists but whoof that is some heavyweight stuff

adding runtime costs with something like zod is only really worthwhile if data is coming from sources outside your control imo. what you consider "outside your control" is entirely subjective though, i.e. i use zod to parse response shape for APIs that i control

# ¿ Mar 25, 2024 21:03

prom candy: Dec 16, 2005; Only I may dance

The codes do matter and I think we should argue about them. 422 for invalid input, fight me.

# ¿ Mar 26, 2024 06:28

prom candy: Dec 16, 2005; Only I may dance

America Inc. posted:

I ran into a surprising issue with a React app I'm making, that breaks my expectations about how the framework should work. In my mind, React works like this: you've got a hierarchy of components, each with their own state. When the state of the parent updates, the children are re-mounted, and the state is reset to initial values.

But with this app, that's clearly not what's happening. Imagine you have where you can search for a set of listings, and the listings update whenever you input text into the search field (live search). The components are laid out like this:
code:
const [query, setQuery] = useState("");
<>
	<Search onUpdateText /> // onUpdateText is a listener that updates query
	<ListingsPage query={query} />
</>
The ListingsPage has a useEffect hook that will run a paginated API call on the query along with a pageNo state variable (initially set to 1).

Now my expectation is that when I, as a user, input new text into the search field, that will update the query state variable, which triggers a re-render of the app, which will re-mount ListingsPage and reset pageNo to 1. That's not what happens though: if I'm on the 2nd page of results (pageNo is 2), and I update the query, pageNo stays at the value of 2. WTF?

I can think of some ways to change the data flow to avoid this problem, but that's really not what I thought React did. I added this line to check when mounting happens:
code:
useEffect(() => { console.log("Did mount?"); }, [])
and I can see that the ListingsPage component is not being re-mounted when query changes.

If you wanted that useEffect to re-run when query changes you would need to pass it into the dependency array:

code:

useEffect(() => { console.log("Did mount?"); }, [query])

Also not sure exactly what you're doing but this is essential reading for newer React devs: https://react.dev/learn/you-might-not-need-an-effect

# ¿ Apr 22, 2024 18:40

Adbot: ADBOT LOVES YOU

# ¿ May 16, 2024 14:30

prom candy: Dec 16, 2005; Only I may dance

EpicCareMadBitch posted:

Wondering as someone that has little knowledge on web development as to how do i sit down and create the website I envision? Would site builders be a better option? Or even Fiverr? I would like full control though. Just asking as a n00b here, it would be a blog setup by the way.

What are you trying to do? Is this like, your grand vision? Or a website for your uncles pizza joint?

# ¿ May 16, 2024 05:45

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›7 »