rik
Explore posts from serversKPCKevin Powell - Community
•Created by rik on 8/25/2024 in #front-end
What's causing the different sizing of my left panel on two different pages?
Home: https://blacklodgeresearch.github.io/website/
About: https://blacklodgeresearch.github.io/website/about/
Same template HTML. Same CSS. Different content on the right. The "about" page having more content pushes the left panel over, and that's not what I want.
I would like it to be the right single size across the site, and I'm prepared to learn that I'm supposed to be using something other than grid.
Advice appreciated.
6 replies
KPCKevin Powell - Community
•Created by rik on 8/23/2024 in #front-end
Why is my top grid area so tall? Why is my address not aligned right?
https://blacklodgeresearch.github.io/website/about/
I'm using
grid-template-areas to define an area for the name of the hackspace top left, and nav bar for the rest of the top row. It appears to have more vetical height than I as expecting, and I would prefer it to collapse down to the max-height of the hackspace's name (plus some padding that I understand).
My browser inspector tells me that the vertical height is large, not the padding or the margin.
Can someone point me to the documentaiton as to why that is, please?6 replies
KPCKevin Powell - Community
•Created by rik on 8/23/2024 in #front-end
How do I use the CSS Grouping selector for several children
I want to set the style of
a, a:hover, a:visitied and a:active, in the nav section of my site separately from the rest of the site. I thought I'd use a CSS selector of nav a, a:hover, but this selects nav a and a:hover not nav (a and a:hover). Is there a ... brackets for this, like for math?26 replies
KPCKevin Powell - Community
•Created by rik on 5/25/2024 in #front-end
Breaking long lines of command lines, on mobile.
I've got a page with a long line of code. It's wrapped in
<pre><code></code></pre>. It is the widest part of the page if I keep minimizing the rest as it doesn't break. It happens to be a git clone command, so it has a long URL on the end.
Is there a generally accepted place to break up the URL, and allow it to wrap? Do I need to specify something to make it typeset in a nice, obvious way to show that it was broken to display but shouldn't be on the command line?16 replies
KPCKevin Powell - Community
•Created by rik on 5/24/2024 in #front-end
The site is responsive when viewed on codepen. Why not when served from GitHub pages?
I am confused.
Grab your phone and go here: https://codepen.io/rikrose/pen/yLWJZov
Now visit: https://night-vision-discord.github.io/website/starting-editing/
Why do they look different? I created the CodePen by doing view-source on the second page and cut-and-pasting to CodePen. The CodePen version has the effect I'm after (TOC goes to the top when the view window is narrow). Why doesn't it work when served from GitHub Pages?
14 replies
KPCKevin Powell - Community
•Created by rik on 5/23/2024 in #front-end
Responsive 2 column layout with header and footer
It should be simple, but I'm still so new to CSS.
I'm using 11ty to generate static HTML. I have a CSS file along with it. I'm trying to make a 2-column layout, with header and footer, that looks fine on desktop and mobile. I accept that mobile probably looks different, but I haven't even got the desktop looking right yet.
I've got a codepen here: https://codepen.io/rikrose/pen/yLWJZov
It appears that my table-of-contents section is too narrow, but I have no idea what's controlling that width. In fact, looking at another page, it appears that the width is uncontrolled, and so varies from page to page.
I'm fairly sure I need shorter titles on the sections, but I also need a fixed width, at least on desktop.
What have I cross-threaded, and what do I need to go read to learn how to do it correctly?
114 replies
KPCKevin Powell - Community
•Created by rik on 5/8/2024 in #front-end
Applying scintillation and noise effects, with CSS
I'm trying to create an effect similar to noise and scintillation in night vision devices. Example images can be seen on this page: https://www.cloudynights.com/topic/691671-improved-ebi-images-with-five-tubes/
What I'm after is both the "grainy" look, and the bright scintillations, using CSS, on top of text (h1 through h3 elements) and td backgrounds.
I followed the tutorial on https://www.freecodecamp.org/news/grainy-css-backgrounds-using-svg-filters/ using both their SVG and a generator at https://fffuel.co/nnnoise/ and neither seemed to achieve the effect.
I've got a collaboration on JSFiddle with my attempts so far for this here: https://jsfiddle.net/6L5yw4nh/21/#&togetherjs=VmU1H2Sv4f
I would appreciate help, guidance, understanding, and hints.
8 replies
TTCTheo's Typesafe Cult
•Created by rik on 2/26/2024 in #questions
tRPC errors squished by _error
I'm trying to work with tRPC, and the error returned to the client seems to go through /_error, and so the tRPC Client is complaining about "<!DOCTYPE" being returned.
How does one go about debugging what's happening, removing the traversal through _error?
2 replies
Zod.enum makes my tRPC explode
I'm having an issue with what appears to be circular dependencies. My problem is that I'm not sure what is being parsed that is causing the issue. I don't see a circular dependency. I think that the error message is not indicating the problem line correctly, as I just added more debug to the file and the error message didn't change.
Is there a way to switch on more debug logging in v10 on the server side, so that I can see what's happening more?
The error message:
⨯ TypeError: Cannot read properties of undefined (reading 'parseAsync')
at getParseFn (file:///C:/repos/automation/automate/node_modules/@trpc/server/dist/index.mjs:190:23)
at Object.input (file:///C:/repos/automation/automate/node_modules/@trpc/server/dist/index.mjs:357:28)
at eval (webpack-internal:///(api)/./src/server/api/routers/usbDeviceControl.ts:20:79)
The marker for that last line doesn't seem to change with the content of the file.
How do I go about finding what's undefined here?
4 replies
Beginner Client Problems
Node 21, npm 10.2.4, tRPC 10, from a create-t3-app run yesterday.
I've got a zod validator create by drizzle-zod, for inserting into a table. There is a
.omit() call to remove fields not allowed to be set by my user. I'm using this in a publicProcedure as the argument to .input(TableValidator), and there's a .mutation() that inserts the data into the database.
I have also used a z.infer<typeof TableValidator> to get a type for this data, which I'm using on the client to coerce the single data structure I'm using as test data to that type, to use as an argument to the .useMutation() call.
My editor thinks that the data structure type does not match the expected input type of the .useMutation(). The error message reads:
Type { command: "add" | "remove"; argument: string }' has no properties in common with type 'UseTRPCMutationOptions<{ command: "add" | "remove"; argument string; },TR{CCLientErrorLike<BuildProcedure<"mutation", { _config: RootConfig<{ ctx { db: BetterSQLite3Database<...>; }; meta: object; errorShape { ...; }; transfor...' and the parameter type.
How do I go about finding what I have failed to understand?8 replies
TTCTheo's Typesafe Cult
•Created by rik on 1/25/2024 in #questions
Seeding with Drizzle ORM and tsx runner
I'm trying to seed my database. My project uses Drizzle ORM, and I have a seed.ts in my db directory. Simply including a
tsx seed.ts gives me a message that my environment is not set up.
It's my first full stack project. I need some help pointing in the right direction for convincing the environment to be set up in the same way as running for a dev/test/prod db, but for the script that tsx will run.11 replies