Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer
Alright so I built an app using NextJS and with Strapi using a Postgre database. It's all running fine local, now my question is - where do I host it? I'm 90% sure the free tier of Netlify would be sufficient for the front-end, but the database is outside my expertise. I see most people recommend Heroku, but the free tier only offers 20 max connections. I thought that seemed small, but doing some research I think I found that the average Wordpress host only allows that many connections anyway, so if it works there with MySQL databases it should be fine for a small site. Just nervous because the next tier up is $50/mo. and I have no concept of when I'll need bigger infrastructure.

Also, what's the workflow like to having a local development PostgreSQL db and pushing it live? I can use Git to push all my Javascript stuff onto Vercel/Netlify/whatever and have it automatically build and deploy for me, but is there a similar workflow with pgAdmin?

Adbot
ADBOT LOVES YOU

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer
Figuring out how to deploy this Next.js + Strapi + PostgreSQL stack feels like hopping into the cockpit of a space shuttle and trying to do a lunar landing. But there was a time not so long ago that I shied away from doing any CLI stuff because "What do you mean there isn't an .exe I can just download?" Now I've got it mostly figured out; the trick was decoupling everything in my head, because I'm used to "Wordpress is the frontend is the CMS is the database" Holy Trinity style development. I could use Wordpress, but it doesn't seem possible to filter based on Advanced Custom Fields.

Next.js is on Vercel. I was doing this anyway with static sites, so this was easy.
Strapi is on my local machine for right now, and it can connect to the database. Seems like I could host this on a $10/month Digital Ocean droplet.
The DB is on Heroku. I need to figure out how to set up permanent credentials using Heroku, because the ones they give you change every so often unless you set them up the way they want you to.

I need to figure out a way to sync my local database to the one on Heroku/Digital Ocean, if that's possible, the same way I can develop the Next.js part on my local machine, push to Github, and have Vercel build it automatically. Strapi doesn't have an export/import or data backup, and the only plugins that did that aren't compatible with the latest version.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer

prom candy posted:

I really don't see this happening. There's a very small minority of people who are like "I don't see what's so good about hooks, class components are just fine" but I think these are largely the same people who originally went "I don't see what's so good about React, jQuery is just fine"

If they die off, can we use "class" instead of "className" in JSX please?

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer
If anyone feels like picking apart a relatively simple NextJS project from someone still learning the ropes of React, I'd appreciate it! I got inspired to remake my friend's photography website. I'm not sure he'll use it, but I needed something to experiment on and got inspired. I'm still considering options for the photo gallery, though anything is probably good if I convince him that prospective clients don't really spend time looking through 100+ wedding shots when he can just show his best samples and pop the rest on Instagram.

- I noticed there's a lot of rerenders, and I think it's because of the cursor component, namely the useMouse hook. It constantly needs to update the state of the position. On top of that, certain things use the ImageHover component, which also updates the global state (useContext) in order to change the styling of the cursor so it doesn't visually block buttons or photos. My question is, is the rerendering just an unavoidable tradeoff for having a cool cursor effect? I saw a lot of sites on Awwwards using the same effect and wanted to see if I could replicate it.

- I'm using Framer Motion. It took a long time to find how to code something where the transformations would calculate based on a starting point of when the element entered the screen, because all of the tutorials and examples from the official docs I could find assumed you'd be calculating from the top of the document. I found this useInViewScroll hook and modified it slightly. I think I could rewrite it to use react-intersection-observer, but I'm not sure if it would make a difference performance-wise.

- Please ignore the CSS and any placeholder stuff, I need to clean it up a bit (form is just proof-of-concept, navigation needs tuning, some things aren't linked to their respective targets, there are some placeholder images, etc.) but it's like 90% there as far as placement.

- There are two pages: the homepage and the Portfolio page. I'm not sure if I'd split the individual portfolio sections into pages.

I really want to know if I'm committing any sins of React, optimization, file naming, etc. because I don't want to start with and continue bad habits, so if anyone wants to critique my code... thank you!

Site is here: https://hearthandoak.vercel.app
Github is here: https://github.com/Ultharite/hearthandoak

P.S. Ignore the Kanye quote, that's all on him.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer

Ima Computer posted:

Calling useMouse at pretty much the root of the application (in your Layout component) means that you're re-rendering the entire page for every mouse position update.

Since the only thing that needs to re-render when the mouse moves is the circle element, you could move rendering code for that element and the useMouse hook call into it's own component, and pass the ref from the Layout component to it as a prop. It should be a big performance improvement.

Changes to overButton state will still trigger a re-render of the entire page, but considering that occurs far less frequently than mouse position updates, it's a lot less of a concern.

Thanks! Running refs and props around is something I'm getting used to.

teen phone cutie posted:

shot in the dark question, does anyone know why I can do this in Chrome but not Safari

TypeScript code:
// full screen button
document.getElementsByClassName('ytp-fullscreen-button')[0].click();
In Safari, nothing happens but in Chrome, it correctly goes fullscreen

Some Googling led me to some answers - either make sure the element you're clicking on has cursor: pointer, and/or that element or some ancestor has to have an onclick= set on it.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer

Nolgthorn posted:

Hello fine people of the internet. I have a CSS question! I know you're all dying to see it.

https://jsfiddle.net/df0g4rek/1/

I've extracted this simplified example from an existing code base! Div `container` is whatever, it's just somewhere on the page. Div `outer` and div `inner` are both thanks to this 3rd party library that replaces native scrollbars with custom ones. I've removed the javascript code from the example, because it's not relevant.

Other than the fact they exist and my client wants to use that library. They are customizable so if those are the cause of the problem by all means tell me.

Within this scrollable area, there's div `background` which has to be there and is the focus of the issue. And div `square` which acts as placeholder content. Ideally when you scroll to the right, div `background` would extend all the way across. But it does not.

It's like the browser stops bothering to render it, "oh nobody will ever scroll to the right." it says.

Adding width: fit-content; on the .background div seems to work (in Chrome at least, haven't extensively tested it).

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer

frogbs posted:

I've heard about running Wordpress 'headless', but hadn't really considered it because i'd still have to maintain a Wordpress install. I assume that process doesn't change at all even if the presentation layer is decoupled, right? Do most people just run the Wordpress installed locally/not on the public internet?

Wordpress is the easiest thing to maintain, but I've resigned to being too dumb/old/stubborn to understand a "decentralized" approach where a database is on Heroku and images are served by Cloudinary CDN and NextJS is on Vercel and the CMS is on whatever and now my client has to pay three separate services for hosting and they've gone over their limit for the "free" tier so now it's $299/month for the "team" plan on Contentful. The alternative for a $10/month hosting for Wordpress is great peace of mind for now until I can afford someone to handle back-end stuff for me (or teach me).

You could run Wordpress local-only to serve as the CMS to generate a static website through Gatsby/Eleventy/NextJS. I think that limits you to only being able to re-build the static site on your machine unless you copy the local Wordpress environment somewhere else when you want to make updates.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer
This was a really useful site at helping me think of grid (and flexbox) in simple ways that can apply to lots of real-world use cases: http://1linelayouts.glitch.me/

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer

"Here's our new logo, could you add it to the site?"

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer
Is there a chat bot that doesn't suck? Clients always have them but they're all a massive drain on page speed and insert so much render-blocking code that PageSpeed Insights throws a fit. Sometimes all the red in every area is the chat bot and the site would score a 90+ otherwise.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer

Boba Pearl posted:

Does this look OK? I'm colorblind and I don't want to sear anybodies eyes. A lot of color's look much duller to me. I tried to go to the web critique thread in the OP but that's been dead for 6 years. I'm trying to optimize for phones because about 70% of my viewers view on mobile.

https://bobapearlessence.com/

It scrolls horizontally on my phone (Galaxy S22 Ultra) because the word "Characters" at the bottom is too long without breaks. But otherwise the layout works.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer
I've never heard of tRPC so now I have a new thing to research. Thanks thread! I thought GraphQL was what everyone was going to be using.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer
Where should I be looking for jobs, especially remote work? I've tried LinkedIn, Indeed, all those major sites, but I'm getting no hits. I get a lot of messages and emails saying "Are you available for an interview tomorrow at [insert time here]?" and then when I reply that I am, I get radio silence. Is that usual these days? Why even ask if they have no intention of following up?

I know Jan/Feb is a rough time for web dev jobs, it's why I'm trying to break out of freelancing, but these time wasters are absurd.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer

Nolgthorn posted:

Is there a way to fight back against the time wasters? Like, if someone contacts you and you respond with interest that's a half contract that they will ask you a follow up of some sort. This is basic social stuff. Can we reprimand whichever agency is hiring these people?

Or, get off LinkedIn which is a spam network. I did ages ago, people just pay to be able to send out mass messages. Take them less seriously I suppose..

Yeah I'm getting off LinkedIn. It's solely a place for people to brag about their accomplishments, most of which are awards people made up solely to be able to brag about on LinkedIn. I just started reaching out to marketing agencies and such directly, I'll see if that gets me anywhere.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer
Something I've been wondering, why isn't there anything as simple as shared/managed hosting for Node.js stuff like there is for PHP? I can get a Wordpress PHP + MySQL installation running in a few minutes for under $10 a month, but Node.js stuff is much more expensive and time-consuming.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer

prom candy posted:

I think it would depend on a few things. What kind of prices do you think you can fetch? The good old days are over, small websites are not fetching great prices anymore, and Squarespace is gonna end up costing you more than $10 for a domain and $0 to host a site on Vercel/Netlify. Secondly, what level of customization would you need to offer? For example if someone says "yeah that's great but I really need it to have X feature and I'll pay double for it" can you make that happen with Squarespace? I think those are the two major concerns I'd have with picking Squarespace vs. basing a business around something like Astro + free and low cost themes.

But yeah if I were going to start a small website building side business I would probably simply not start it because the amount of hustle required to make not very much money would be huge I think. If you have programming skills there are probably lower effort ways to make side money.

What are those lower effort ways? Asking for a friend

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer
Twenty years of this and I still don't know how to handle clients who don't know what they want on their website. I have a client who wants to buy and sell items, but I'm having a very difficult time getting him to give me content, any content, and when he does it's a grammatical mess of half-finished ideas. It's like going to a real estate agent and saying "I want a building" but not having any idea if you want a residential place, commercial, how many rooms, colors, etc. This is why I like working with agencies more than individual clients.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer

The Dave posted:

No one is doing anything original. Find a site or template they like and recreate it without thinking. Unless you’re actually in the creative space, responsible for branding and identity and trying to be industry leading, everyone just wants to be someone else.

I've been thinking about that. I hate using AI, but I'm probably going to have to use ChatGPT to write his content if I continue with the site. The site he likes is nearly 100% product descriptions and product images he doesn't have, so that's the main thing that's stopping me. Can't make those up out of thin air.

Adbot
ADBOT LOVES YOU

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer

Harriet Carker posted:

Just stick in lorem ipsum and placeholder images.

That never works in my experience. All they'll focus on is that the text is some weird language and that they don't like the images. It's a waste of time.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply