ah
#development
sharp geyser
It doesn't return you an id
sharp geyser
lol
pearl trail
i am a certified web designer
lament rock
Yeah. I'm just gonna make my own file server software. This seems like a very fun project and I've already written a white paper on hypothetical implementation details and features. I'm sure the Windows remote FS is sensible to work with! :)
sharp geyser
Oh you got nextauth to send you an id?
radiant kraken
sharp geyser
ONG
pearl trail
Oh you got nextauth to send you an id?
yep
need a bit tweaking on the conf
i don't want to use external api for auth because i want to render the page on the server
since my vps is a bit far, so sending 2 requests just to get user data is a waste 
sharp geyser
since my vps is a bit far, so sending 2 requests just to get user data is a wast...
2 requests?
pearl trail
- page
- user data
sharp geyser
icic
pearl trail
by using next auth, i only request once
pearl trail
on the cookie or local storage
sharp geyser
wym
pearl trail
then store it in a store
what is the "store"
pearl trail
oooo yes
sharp geyser
import { writable } from 'svelte/store'
interface User {
id: number,
email: string,
is_verified: boolean,
is_premium: boolean,
is_staff: boolean
}
function createStore(user: User | null) {
// Will likely need update
const { subscribe, set } = writable(user);
function add(user: User) {
set(user);
}
function remove() {
set(null)
}
function get(): User | null {
let user: User | null;
const unsubscribe = subscribe(value => user = value);
unsubscribe()
return user!;
}
return { subscribe, add, remove, get }
}
export const user = createStore(null);
oh I forgot first_name and last_name
oh well
💀
pearl trail
on the cookie or local storage
well yeah then it's either one of these
pearl trail
yeah
sharp geyser
Im redesigning my entire site already
💀
I am building it from responsive up
that way its responsive first before anything
pearl trail
😎
sharp geyser
Ignore the hello
its me testing the navbar
for some reason the text hides behind it
I read its because im using fixed
but idk
<div class="relative">
<Navbar class={`flex items-center w-full h-16 fixed border-b md:text-xl bg-white ${dark('bg-gray-900')}`}>
<NavBrand href='/'>
<span class="">Vidcord</span>
</NavBrand>
<div class='order-2'>
<Button color='none' class='lg:hidden'>
<SearchOutline />
</Button>
<div class={`hidden w-[38rem] lg:block`}>
<Input placeholder='Search' />
</div>
</div>
<NavUl class='order-last'>
<NavLi>
<DarkMode size='lg' />
</NavLi>
</NavUl>
</Navbar>
</div>
its because im using fixed ig
pearl trail
oh yeah it is
just add padding top on the content with the size of your navbar's height
i usually do this
sharp geyser
so p-16?
pearl trail
pt-16
p will add padding 16 to every direction
it's still recommended to use pl and pr like at least 2 so it doesnt stick with the edge
add box-sizing too, otherwise overflow-x will appear when you use 100% on child iirc
sharp geyser
box-sizing?
pearl trail
yes
"If you set box-sizing: border-box; on an element, padding and border are included in the width and height:"
sharp geyser
like box-border?
sharp geyser
what are you telling me to add box-border to
pearl trail
to the content you're adding padding in
pearl trail
pearl trail
your welcome :3
dusky idol
Anyway know a python library to make/manipulate gifs using discord bot?
Like I've seen some bots do it
I can manipulate images using PIL but i've no idea about how gifs work
pearl trail
frame = Image.open(inGif) it gives frames on gif
using PIL
then you can do smth similar like this to combine the frames im1.save("out.gif", save_all=True, append_images=[this is the images], duration=100, loop=0)
lyric mountain
Anyway know a python library to make/manipulate gifs using discord bot?
Like I'v...
be wary about dealing with gifs tho
semitransparent surfaces will basically steal 50% of your color palette, and depending on complex the gif is you're heavily constrained in both size and duration
sharp geyser
https://cdn.discordapp.com/attachments/1257468790321582153/1258020661201211413/image.png?ex=6686868a&is=6685350a&hm=5ff75c2c76b7059288da1702bd43bd09991a87670e0c3e28df7b3f85fd253b8a&
https://media.discordapp.net/attachments/1257468790321582153/1258020661473972224/image.png?ex=6686868a&is=6685350a&hm=cb929be72e8a9cc267a36133a8b64759b0da8dd8b0b1af4ca085d62922d8e6de&=&format=webp&quality=lossless&width=660&height=1170
What you guys think
I have no plans to change it rn because i've been working on the backend + frontend for the past 12h but any feedback is nice
I think I might get rid of the vidcord in the mobile view and replace it with the search outline
Not sure
lyric mountain
it needs a logout button
sharp geyser
well yes
That is all test stuff
:p
Sorry forgot to mention its still slightly WIP
lyric mountain
ah
sharp geyser
Im thinking of just making logout appear in the settings tab
idk tho
I feel like if I add too much to the navbar it will start looking cluttered
😔
lyric mountain
nonono please dont
logout at popup menu
the worst thing is having to go to a whole different page to find the logout button
lyric mountain
in red
sharp geyser
yuh
Making a note cuz im too tired to do it rn
I've been working on the frontend and backend for 12h
my protected routes on the backend was broken for like 4h
and it was because of a typo
😭
lyric mountain
lul
sharp geyser
turns out my surrealdb query
I needed to specify users not user
which was why it was failing to get the user so it was like "Oh you aren't logged in fuck outta here"
surreal sage
hasty falcon
hi, how to make interval at topgg-autoposter
const { AutoPoster } = require("topgg-autoposter");
module.exports = (client, logger) => {
const ap = AutoPoster(
"secret",
client
);
ap.on("posted", () => {});
ap.post();
setInterval(() => {
ap.post();
}, 21600000);
return ap;
};```
doesn't work
quartz kindle
hi, how to make interval at `topgg-autoposter`
```js
const { AutoPoster } = requ...
if you have the autoposter then you dont need the interval lol
the name "autoposter" already tells you that it posts automatically
deft wolf
hi, how to make interval at `topgg-autoposter`
```js
const { AutoPoster } = requ...
top.gg autoposter has a default interval of 30 minutes, as far as I remember
hasty falcon
if you have the autoposter then you dont need the interval lol
🫡
I added the interval because in the console log topgg-autoposter was spamming, and it resulted in being limited to the API lol
but after i added interval nothing changed
quartz kindle
I added the interval because in the console log topgg-autoposter was spamming, a...
how was it spamming? did you require it multiple times in other files?
is your bot sharded?
hasty falcon
how was it spamming? did you require it multiple times in other files?
my bot structure is
Utility
TopggAutoPoster.js
main.js
so i call utility/topggautoposter.js to main.js
quartz kindle
is your bot sharded?
hasty falcon
is your bot sharded?
nope
quartz kindle
idk then
hasty falcon
but I think now the problem is solved because I moved it to main.js (maybe it works)
const { AutoPoster } = require("topgg-autoposter");
const ap = AutoPoster(topGGToken, client);
ap.on("posted", (stats) => {
logger.info(`Posted stats to Top.gg | ${stats.serverCount} servers`);
});```maybe
neon leaf
hasty falcon
its work 😄
deft wolf
lyric mountain
I added the interval because in the console log topgg-autoposter was spamming, a...
if autoposter was spamming, it's likely you had it starting inside an event of some sort
neon leaf
yes
neon leaf
im protected against that rce
do i merge this https://github.com/0x7d8/ainx/pull/1
neon leaf
is that a yes
quartz kindle
is that a yes
merge, publish under owo tag, undo, publish again under latest tag
now you have an owo version :^)
sharp geyser
Do tailwind breakpoints just not matter?
<div class="sm:hidden">
<NavBrand href="/">
<span class="">Vidcord</span>
</NavBrand>
</div>
I am fairly certain that sm:hidden does not mean to fucking hide it on my not so small screen
Its literally 2x as much as what the breakpoint is for sm
yet it hides until I go into dev tools and emulate a smaller device
sharp geyser
unpredictable frameworks :(
lament rock
sass is actually just a more fun version of css
scenic kelp
```html
<div class="sm:hidden">
<NavBrand href="/">
...
p sure you need visible sm:hidden
it needs a default to fall back to
scenic kelp
or maybe not visible but whatever the equivalent is
scenic kelp
Just use sass or pure css
also this is a terrible answer but
sharp geyser
it applies to all screens then you are to set breakpoints are larger screens to change its default behaviour
Well it looks better on mobile :)
scenic kelp
"i am getting a logical error in this framework"
"uhhhhh errr don't use the framework"
quartz kindle
sass is actually just a more fun version of css
never tried sass but i highly recommend less
nested css is so damn nice to work with
lament rock
It is nice which was the main draw for sass for me
but then I learned how to do it in raw css and just decided to ditch the build step since I have too much tooling
quartz kindle
but then I learned how to do it in raw css and just decided to ditch the build s...
ye same here
but out of anything, LESS is one of the nicest things i ever tried, its basically just raw CSS but nestable
lament rock
Sass is the same except braces are also optional
quartz kindle
sass also has some more advanced stuff like variables and expressions no?
lament rock
a co dev of my bot at the time we were using sass preferred that
Uh idr
It's been a while since I just compiled to css and just styled
quartz kindle
ye its been a while for me too
deft wolf
Cute puppies
deft wolf
pc or mobile?
PC
quartz kindle
squares not centered on screen, horizontal scroll bar appears, search bar moves by itself once page loads
sharp geyser
the search bar is something even I dont know how to fix
horizontal search bar is weird because its not replicating for me
I can try and look into it
sharp geyser
squares not centered on screen, horizontal scroll bar appears, search bar moves ...
Also which squares?
quartz kindle
horizontal search bar is weird because its not replicating for me
remove width: 100% from body
quartz kindle
lmk if the horizontal is still there
fixed
quartz kindle
sharp geyser
quartz kindle
only happens at some widths
sharp geyser
Wtf is happening
can you try refreshing?
Its not happening on my end
I made some changes
quartz kindle
nop
quartz kindle
quartz kindle
is there a max width defined somewhere for the images?
sharp geyser
nope
sharp geyser
Yea
idk how to fix that atm
I was looking into it
right so
ima fix 1 problem first and move on
If you refresh the site
you will notice some changes
flex flex-row flex-wrap gap-2 lg:gap-4
this is the current css for it
problem is
empty space on large screens
as well as other sizes too
I can use justify-center to center it, but that wates a lot of space
quartz kindle
justify-content: space-evenly;
quartz kindle
hmmm
sharp geyser
Even the gap on larger screens is kinda much
quartz kindle
Even the gap on larger screens is kinda much
flex-grow: 1;
flex-basis: content;
add that to the items
quartz kindle
wat
sharp geyser
its a tailwind thing
sorry
you'd think tailwind would have basis-content but ig not
quartz kindle
lel
sharp geyser
that did nothing
sharp geyser
wait what
quartz kindle
flex-grow and flex-basis are child properties
quartz kindle
yes
quartz kindle
typical css framework user
scenic kelp
just do an {#each} for now
scenic kelp
are you using svelte?
sharp geyser
yes
quartz kindle
why create css rules for your specific use case when you can slap 500 class names with generic rules instead
sharp geyser
I dont have any actual data to display rn, I just want to make sure that when I do display it, it will look fine
scenic kelp
{#each [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15] as i}
<div>{i}</div>
{/each}```where you replace the inner part with your video cards
sharp geyser
do I have to do as i?
scenic kelp
looking at how youtube does it is probably the best ngl
from the looks of how they do it it's just a flex grid
scenic kelp
grid is more suited to this than flex
quartz kindle
i mean, isnt this what you wanted?
quartz kindle
scenic kelp
the last row though
scenic kelp
which would be avoided if you use grid
sharp geyser
is there like a grid-cols-max or smth in tailwind
scenic kelp
you just set different cols with breakpoints
i would say it looks annoying trying to make it so that when you resize it keeps your scroll position but youtube also gives up on that so it's a non issue
sharp geyser
i would say it looks annoying trying to make it so that when you resize it keeps...
I got it looking fine on every other common resolution
and yet on mobile it looks shit
scenic kelp
center the container
scenic kelp
parent flex container idk
quartz kindle
<:wawa_huh_confused:826579871148539905>
add width: 100% to the grid container
and remove the max-width from the items
quartz kindle
i removed this and it fixed the mobile problem
sharp geyser
idk where thats being applied
as it does it automatically
thats not in my css class tree
so it must be tailwind applying it somehow
or flowbite
sharp geyser
im not using max-w-sm anywhere myself
I just did a project wide search
yea no im not using it myself
unless one of the classes I use uses it under the hood
and or flowbite
sharp geyser
I found something that works
You can try it out now if you want
Some widths will be broken because I don’t have the mental capacity to try and cover them all
I covered all the common screen widths
Mobile tablet laptop desktop and even larger screens
quartz kindle
width:100% works well for me
except for the 1 column layout
removing the max-width fixes the 1col layoiut for me
sharp geyser
I wish the content would grow to fit the screen on smaller screens
Oh well
now i have a layout for it
I can always change it in the future
quartz kindle
it does no?
sharp geyser
not really the cards remain 1 fixed size
only shrinking or growing if there are too many in the col/row
sharp geyser
the card itself
On a mobile screen when its 1 columb
i want the card to fit the screen
sharp geyser
yea
quartz kindle
or you want it to grow vertically?
sharp geyser
nah just fit the screen like that
quartz kindle
well i just showed you how i did it lol
quartz kindle
the max-width rule
quartz kindle
you need to combine it with width:100% on the grid
sharp geyser
oh pog
it worked
:D
oh yikes on the Iphone pro max its going to look weird
💀
quartz kindle
did you save? still old width for me
sharp geyser
oh thats applying to the card's themselves
you should of told me that
I thought it was on the entire grid
like
grid level
quartz kindle
ok now it looks good
sharp geyser
Yuh
I had to apply it at grid level
and on the items themselves
I hate repeating things
quartz kindle
:^)
sharp geyser
I wish css applied everything to its children
ig its to give you more control
but like
quartz kindle
some rules do, others dont because the children already have defaults
like, some rules have fixed defaults, others have "get it from the parent" default
sharp geyser
icic
makes sense
BUT
IT WORKS NOW
SO IDC
TIM
WHILE YOU ARE HERE
shit
I hit caps lock
quartz kindle
took you a whole roadtrip to flexbox land (my fault kinda) but you did it xD
sharp geyser
import { writable } from 'svelte/store'
interface User {
id: number,
email: string,
first_name: string,
last_name: string,
is_verified: boolean,
is_premium: boolean,
is_staff: boolean
}
function createStore(user: User | null) {
// Will likely need update
const { subscribe, set } = writable(user);
function add(user: User) {
set(user);
}
function remove() {
set(null)
}
function get(): User | null {
let user: User | null;
const unsubscribe = subscribe(value => user = value);
unsubscribe()
return user!;
}
return { subscribe, add, remove, get }
}
export const user = createStore(null);
is this how you use stores?
and when I go to say log them in
i'd call user.add(detailsFromApi)
and then i can dispaly that on the navbar
with user.get().first_name
As well as anywhere else I need access to their user profile?
All it takes is importing user right?
quartz kindle
uh
no idea xD
this is the docs example tho:
<script>
import { writable } from 'svelte/store';
const count = writable(0);
console.log($count); // logs 0
count.set(1);
console.log($count); // logs 1
$count = 2;
console.log($count); // logs 2
</script>
so you technically shouldnt need the subscribe function, unless you want to use it for something more advanced
but the whole reactivity thing is to allow you to directly bind the variables to your html
and do for example ```html
<p>{$user.first_name}</p>
and have that html autoupdate when you do user.set(data)
quartz kindle
disclaimer: i like svelte, and talk a lot about svelte, but i have actually never used svelte myself
quartz kindle
what part?
sharp geyser
one sec
can you see if it looks for you?
Idrk how to test responsiveness that well
quartz kindle
looks fine i guess?
its fine for a login box to have a fixed size, but if you wanna make it autoscale do something that scales very little
sharp geyser
its fine for a login box to have a fixed size, but if you wanna make it autoscal...
Like what?
quartz kindle
i would do maybe some very soft scaling, something like this
sharp geyser
i would do maybe some very soft scaling, something like this
Are you using min width?
quartz kindle
Are you using min width?
not in the video
but i usually do a combination of minwidth maxwidth and calc
ie width: calc(12rem +(100% / 6));
quartz kindle
Ive never used calc
allows you to do math
sharp geyser
Right but why 100% /6
quartz kindle
100% width divided by 6
sharp geyser
Right but for what? Why 6
quartz kindle
to make it scale less
sharp geyser
So 6 is a random number
quartz kindle
ye
sharp geyser
I see
quartz kindle
like if you increase window size by 500px
sharp geyser
Ill give it a try when i get home
quartz kindle
width = 100% would be width = 500
but width = 100% / 5 would increase width by 100 instead of by 500
quartz kindle
so basically thats what i usually go for:
min-width for minimum size
max-width for maximum size
width: calc(some fixed px + (some window percentage / some number))
to create a certain "level" of scaling, ie controlling the steepeness of the scaling
like for every 100 px of window, change width of element by 15px
sharp geyser
I see
thanks :)
Also should my backend do redirecting on success, or should I send status codes and what not then handle that on frontend
sharp geyser
Well error stuff I want to handle on the backend I think
quartz kindle
make a fetch request, handle result, change page or redirect if needed
sharp geyser
It would be kind of hard to do so on the frontend I think
because errors can happen for any reason
quartz kindle
yes but you need to send them to the client anyway
so instead of sending a full html response, send a json response and make the client paint/draw the html
sharp geyser
well yea
thats what im doing
What I mean is
say they aren't logged in and visit a page requesting protected content
the backend should do the redirecting then
not the frontend
quartz kindle
if you have such a page, ye
but for things like
the same page with different content whether user is logged in or not
(ie displaying the username in the nav bar)
that can be done on the frontend
sharp geyser
oh yea no
Im doing that 100% on the frontend
Right
I think i made it scale nicer
UGH
I hate this
I am trying to center the login form
but when I do it makes it overflow-x
quartz kindle
wasnt it already centered?
sharp geyser
I mean
centered x wise yea
ig it doesn't matter if its directly in the center
uh oh stinky
I have to refresh for the form to be there
I hope its a me issue
quartz kindle
you mean vertical centering?
sharp geyser
you mean vertical centering?
if vertical is - and not | then yes
I swear I can never remember which is which
😭
wait
quartz kindle
no like
sharp geyser
no
quartz kindle
horizontal is <->
sharp geyser
horizontal is going left to right
sharp geyser
vertical is up and down
bruh im dumb
excuse me
😭
but yea I wanted it vertically centered
quartz kindle
so you want up-down centering?
quartz kindle
height: calc(100vh - 5rem)
100vh = 100% view height
5rem = height of the topbar (or rather, the current margin-top)
sharp geyser
what should I apply that too?
the main div that has the <slot></slot> in it
<div class="box-border flex h-full w-full pl-2 pr-2 pt-20">
<slot></slot>
</div>
looks like this
quartz kindle
```html
<div class="box-border flex h-full w-full pl-2 pr-2 pt-20">
<slot></...
the slot
the box-border has pt-20, which is padding top 5rem
so the child element has the entire page of space, minus that margin top
quartz kindle
ye
so you can calculate the height as 100% minus 5rem
but percentage height doesnt work very well, so you use 100vh instead
vh is view height, aka window height
quartz kindle
wut
sharp geyser
thats why I wrapped it in a div
because nothing was applying to the slot itself when I put it on it
quartz kindle
i mean
this is how it renders for me
you have to put it in that flex h-full div
the one that contains gthe form
quartz kindle
thats what you showed me
quartz kindle
```html
<div class="box-border flex h-full w-full pl-2 pr-2 pt-20">
<slot></...
^
i imagined the <slot> is whatrever goes inside that div
sharp geyser
gotcha
well
either I am doing smth wrong still
or you can't use calc in tailwind
sharp geyser
no
quartz kindle
yeah the height calc is not therer
sharp geyser
refresh
its there form e
for some reason its not hot reloading
so you have to refresh
quartz kindle
i am refreshing
quartz kindle
yeah that class doesnt seem to work
sharp geyser
yea that was the case
quartz kindle
of course you have to do it wouthout spaces
sharp geyser
spaces dont mix
quartz kindle
space = multiple classes
quartz kindle
lmao
sharp geyser
whats that
O
yea
I was fucking with shit
I dont know if i told you but im ding all my dev on the server
cuz cors
fuck that
quartz kindle
xD
sharp geyser
my api and backend couldnt respond to each other on my machine
cuz of cors
😔
Right now to fix that search bar
idfk why it wont just make up its mind on where to be
OHHHH
Its because
it is deciding on if it should display the outline or the actual search bar
quartz kindle
its also moving when the font loads
font loading is known to make a page act weird
sharp geyser
how tf do I fix that
quartz kindle
only way is to wait until the font loads, which also means longer "white page" time
sharp geyser
<div class="flex flex-row items-center gap-4">
<Button color="none" class="md:hidden">
<SearchOutline />
</Button>
<div class={`order-2 hidden md:block md:w-80 lg:w-[38rem]`}>
<Input id="search-navbar" placeholder="Search" />
</div>
</div>
well this is my current search bar setup
💀
its hidden on screens larger than md
Looking at the html
it moves because it hasn't het fully loaded the Input
at least thats what it looks like
quartz kindle
if you look at the network tab
it moves exactly then the google fonts file loads
https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap
lyric mountain
I mean, try opening a youtube video in anonymous tab (so u dont get cache) and pause/mute the video
youtube page jumps around for like 10 seconds before everything loads
quartz kindle
i tried reloading the page without dev tools, whcih means without clearing cache
sharp geyser
so it probably wont when I build it
sharp geyser
😔
quartz kindle
wtf
sharp geyser
I really dont know
I would pay someone (with the money I dont have) to fix it for me
💀
sharp geyser
what is that on
quartz kindle
on the mx-auto flex container
sharp geyser
im not seeing one
sharp geyser
Yea no I can't change that
Like
I really cant
💀
Its something flowbite puts in itself
I can't control it
Honestly tim
idrc anymore
Who cares it needs like 1s to adjust
Well ig my ocd does
becaus now I cant get it off my mind
quartz kindle
lel
sharp geyser
tbh
flowbite is so fucking annoying
makes me want to rewrite my entire site AGAIN
This is the one I almost went with
I should of listened to my gut
😔
quartz kindle
xD
sharp geyser
right tim
should I
cuz
this searchbar is annoying
and I cant modify what flowbite puts in
unless I do so at the package level
fuck that
quartz kindle
in case they thought i was lacking
xDD
lyric mountain
A BR indeed stands out among others
quartz kindle
a Brazilian indeed stands out among others
lament rock
Battle Royales dont stand out
proven lantern
should i switch to zig from rust?
proven lantern
because bun used it?
because even rust needs it to work on lambda
my builds would probably be much faster
quartz kindle
lmao
sharp geyser
then again I like purple
💀
idk if everyone will like hte purple sadly
but I like it
😔
frosty gale
sveltekit in dev mode being open to public detected
sharp geyser
I got tired of cors issues with my backend and frontend
so I moved both to the server
quartz kindle
xD
sharp geyser
😔
bro
where you hitting random endpoints
😭
I have so many errors in the console
sharp geyser
literally just ssh -V
OpenSSH_8.9p1 Ubuntu-3ubuntu0.7, OpenSSL 3.0.2 15 Mar 2022
frosty gale
run sudo apt get and sudo apt upgrade
sharp geyser
run sudo apt get and sudo apt upgrade
that did nothing
Literally the same fucking version
😭
quartz kindle
run sudo apt get and sudo apt upgrade
isnt it apt update then apt upgrade? lel
quartz kindle
your version should be OpenSSH_8.9p1 Ubuntu-3ubuntu0.10
literally the same thing but with .10 at the end
sharp geyser
its still .7
quartz kindle
whats your distro?
sharp geyser
ubuntu
quartz kindle
22?
quartz kindle
ye update then upgrade
sharp geyser
alright ima work on the login form now
for the 4th time
Hopefully I can get the backend and frontend tied together at least when logging in
cuz im getting tired of this
green kestrel
heads up, theres a guy with the nickname 'alanfoster' going around large bot support servers asking if he can buy your bots if you want to get out of bot dev because of the new monetisation policies. The concent of hoovering up bots like this smells sus to me and possibly a scam. be on your guard!
im betting if it IS a scam, hes going to be first of many
eternal osprey
hey guys, is there any tool and or way to find out how much traffic a wesite is getting?
sharp geyser
I hate my life
harsh nova
It’s just a random site
Alexa ranking might work
sharp geyser
It’s just a random site
Do you want all time statistics or just listen to the traffic?
eternal osprey
I want to extract how much traffic a site has. Whether it’s life time or just in a span of 1h
Based on that I can gain insight on how much a site is being visited
sharp geyser
good luck
eternal osprey
I am asking for help no luck Mann
pearl trail
i don't think that's possible
idk law shits but i think if a tracker scraps random website's traffic and much stats, it'd be illegal, wouldn't it?
unless the site's company allow it or make it publicly available
sharp geyser
Yea I mean
Unless a company is willingly giving that information to the public its a good luck situation
sharp geyser
right
im obviously doing this state inside svelte thing completely wrong
I've logged in, login api endpoint returns user data, I call user.set(jsonData) and nothing seems to happen
I have my navbar reading this and will set an avatar if the data is not null otherwise it displays Login, well it never updates soooooo
user.ts file for storing the store
import { writable } from 'svelte/store'
export interface User {
id: number,
email: string,
first_name: string,
last_name: string,
is_verified: boolean,
is_premium: boolean,
is_staff: boolean
}
export const user = writable<User | null>(null)
+page.server.ts file
export const actions = {
default: async ({ request, fetch }) => {
const { data: { email, password } } = await superValidate(request, zod(loginSchema))
let response = await fetch('/api/auth/login', {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'post',
body: new URLSearchParams({
email,
password
})
})
user.set(await response.json() as User)
}
}
<svelte:fragment slot="trail">
<div class="flex flex-row items-center gap-4">
<LightSwitch class="hidden md:block" />
{#if $user != null}
<button class="btn rounded-full p-0 pr-2" use:popup={avatarPopup}>
<Avatar src="" background="bg-secondary-500 w-[3rem]">J</Avatar>
</button>
{:else}
<a href="/login">Login</a>
{/if}
</div>
</svelte:fragment>
and then I use it like so inside my main +layout.svelte importing user from $lib
quartz kindle
```html
<svelte:fragment slot="trail">
<div class="flex flex...
how is user defined in this component?
solemn latch
and this is why space based syntax is awful
earnest phoenix
i fixed it
but now its sending twice
it sends every minute after that only once
surreal sage
are there any tools for testing react sites
lyric mountain
well, depends on what u mean by "test"
solemn latch
yeah "react developer tools" its an extension for browsers.
If thats what youre asking for
solemn latch
The react compiler might come with some stuff you're looking for
solemn latch
Wow, you've come a long way ^-^
quartz kindle
why do you have this on line 253?
await i.deferUpdate(); // Ensure the interaction is acknowledged
past field
`await i.deferUpdate(); // Ensure the interaction is acknowledged`
I thought deferring the responses would ensure that the button response doesn't time out before going to the next round
lyric mountain
deferring is telling discord you received the event, but it'll take a while to answer
quartz kindle
I thought deferring the responses would ensure that the button response doesn't ...
an interaction can only be responded to once, a defer is a response, a reply is also a response
you cannot use both on the same interaction
quartz kindle
you either reply directly, or you defer and later on edit (not reply)
quartz kindle
ok so I don't need line 253
nope, not needed
past field
okay gotcha
past field
nope, not needed
is that the only thing that stands out?
quartz kindle
is that the only thing that stands out?
well thats the direct cause for the error you are seeing
past field
that would cause the error?
quartz kindle
yes
past field
thank you tim!
quartz kindle
if you want to use defer (although not really required here), this is the correct way of using it:
past field
@quartz kindle you should give the game a try haha
quartz kindle
// as soon as the interaction is received
await interaction.defer(); // replaces reply
// do other things
await interaction.editReply(); // editReply instead of reply because the defer is the original reply
this makes sense
quartz kindle
<@180112943612952577> you should give the game a try haha
i've seen the code so many times by now i can play the game in my head xD
its actually a very creative game
been a while since ive seen something new that isnt the 768769879th copy of the same things
normal badge
@quartz kindle ur bot, astro uses d.js?
quartz kindle
<@180112943612952577> ur bot, astro uses d.js?
in the past yes, but not anymore
normal badge
in the past yes, but not anymore
i'm getting interaction failed instantly for every command i'm using
quartz kindle
i'm getting interaction failed instantly for every command i'm using
with djs?
normal badge
i just ran /command help and it's stuck on thinking/deferring -- that's the only other thing i've received
quartz kindle
i just ran /command help and it's stuck on thinking/deferring -- that's the only...
just try again, sometimes discord shits itself idk
past field
its actually a very creative game
this really means a lot coming from you
lyric mountain
works for me tho
well but we're not shipping your machine to the client
quartz kindle
*well but we're not shipping your machine to the client*
why not tho? :^)
past field
why not tho? :^)
🔥
so you didn’t see anything else that would possibly cause interaction failed?
past field
like any race conditions
quartz kindle
🔥
that specific failure you showed was caused by that line
i didnt look for other issues
past field
i didnt look for other issues
ok i gotcha! i notice that when it boils down to the last 2 players, one of the players get a interaction failed and the one player ends up winning
quartz kindle
ok i gotcha! i notice that when it boils down to the last 2 players, one of the ...
do you get an error for that one?
past field
do you get an error for that one?
none
past field
do you get an error for that one?
gonna have a server run another game if it so i can monitor
surreal sage
81.6% documentation
sharp geyser
how is user defined in this component?
import { user } from '$lib'
sharp geyser
@frosty gale how the fuck does state work
It is not as easy as everyone makes it out to be
Not if you are wanting to store the user data after they login
because you can't do this on the server (e.g +page.server.ts)
digital swan
For auth I do an api fetch in the layout onMount then set it to a store
But obviously still checking server side for any auth protected stuff
sharp geyser
thing is im not using svelte's backend system
I am using an external backend api so I have to make fetches to it
which you can't do and store the user data
digital swan
Why not
sharp geyser
Well, because I just asked in the svelte server and they went on some speel about I can't and that I should use the svelte backend instead
digital swan
Peculiar
I mean I’m no web dev expert but that works best for my stuff and I haven’t ran into any trouble with it
Makes page data caching easy too
quartz kindle
Well, because I just asked in the svelte server and they went on some speel abou...
check this
using store + context
sharp geyser
https://component-party.dev/#component-composition.context
hm
is it suggesting I do fetching in the +page.svelte itself?
I have no idea if its okay to do api fetches in the page itself
but fuck it we ball
eternal osprey
hey guys, currently i know only these languages:
haskell, assembly (just a bit), java, js, python, scala, c++/c, (htm/css, not really languages but whatever).
What language should i extend my stack with?
I am most likely a backend programmer that works with data as data engineer, though i also like to create websites in my spare time.
sharp geyser
That's like asking what should I put on my hotdog
It depends on what you want or like to do
If you want to do some webdev, then continue using html and css and js
if you want to do backend programming, pick a language that you are comfortable with and use it to make apis and applications
sharp geyser
elixir is a fun one
quartz kindle
is it suggesting I do fetching in the +page.svelte itself?
you need to think about it from an agnostic perspective first
like forget about svelte for a second
at which point of the page loading do you want to fetch?
on which pages?
what do you want to do with the data after fetching?
sharp geyser
Well, I want to fetch when they submit the login form. Then I want to use this data on the navbar and any other pages like settings or dashboard that uses information about the user.
quartz kindle
Well, I want to fetch when they submit the login form. Then I want to use this d...
so regardless of svelte
you need to use either cookies or localstorage to persist the data between pages
unless you are going for an SPA (single page application)
quartz kindle
yes but the data itself, unless you want to fetch it again on every page load
sharp geyser
Right
quartz kindle
or include it from the server side
sharp geyser
but isn't that the point of stores/context?
quartz kindle
no
quartz kindle
svelte stores are not localstorage nor cookies
svelte stores are for sharing data between svelte components
but its all still js data
in memory
by default its not persistent
sharp geyser
Then why do people make svetle stores seem like some catch all solution
quartz kindle
because they dumb
sharp geyser
so wait
quartz kindle
but thats how frameworks work
frameworks have "components", which are independent pieces of content on a page
and they are supposed to be self-contained
and not bleed into each other
so frameworks have these kind of storage systems to enable data sharing between components
sharp geyser
What should I even do then?
quartz kindle
ie share the same data between footer and header
sharp geyser
set a cookie when they login containing the user data?
quartz kindle
a server-only cookie cannot be accessed from js
you usually use server-only cookies for sessions
for data you can use localstorage
sharp geyser
well here's the thing
what I use for form validations
requires a server action
💀
quartz kindle
yes
you have two types of client-server interactions
data that the server includes on page load
and data that you fetch from js
if you're working with pure html pages, no server side rendering, then you dont have the first one
but if you have server side rendering as well, then you can do both at once, login and add data to html