The Web Design & Development Megathread

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

«‹›362 »

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Full Circle posted:

lmao

I meant javascript unless you're laughing at something else. Compared to Wordpress/PHP sites where there's only so much optimization you can do....

IAmKale posted:

Wasn’t Gutenberg supposed to enable this for WordPress websites? Did that benefit never materialize? lmbo

There are endpoints to use for pages and posts, but last I checked (two years ago) they were kind of hit or miss when it came to certain features and plugins being compatible. I might mess with Gatsby to see what can be done these days.

# ? Apr 22, 2021 02:12

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 10:23

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

The problem I've been told with React Gatsby Next etc is that none of the content actually exists in the DOM , so who knows if google is actually indexing it as well as a php site.

I do most of my work in wordpress but I agree with you, react and next are more enjoyable to work with and can do fun stuff, but I don't know if it's faster.

I do however like WPGRaphql which would allow them to still mess with meta tags etc.

# ? Apr 22, 2021 02:15

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

https://campground-search-final.vercel.app/camps?city=all&campfeatures=all&region=all&camptype=all

Like this small work in progress app thing I'm working on gets all the data from wordpress to populate it within NextJS which wl then link back to wordpress. Granted it's slllooowwww but I haven't had time to figure out why yet.

# ? Apr 22, 2021 02:17

spiritual bypass: Feb 19, 2008; Grimey Drawer

IAmKale posted:

Wasn�t Gutenberg supposed to enable this for WordPress websites? Did that benefit never materialize? lmbo

The Wordpress HTTP API really sucks because (iirc) it has to run the whole set of hooks for each request as thought it were rendering a whole page, meaning a page with a bunch of XHRs that hit WP will have much greater overhead than a single WP page.

# ? Apr 22, 2021 02:21

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

LifeLynx posted:

I meant javascript unless you're laughing at something else. Compared to Wordpress/PHP sites where there's only so much optimization you can do....

There are endpoints to use for pages and posts, but last I checked (two years ago) they were kind of hit or miss when it came to certain features and plugins being compatible. I might mess with Gatsby to see what can be done these days.

with server side rendering, you can only have so much crap on a page until it becomes unmanageable, whereas react allows you to make websites that have literally hundreds of mb of javascript doing god only knows what.

web slowness is generally caused by people being lovely web designers rather than any individual technology being fast or slow in and of itself.

# ? Apr 22, 2021 03:03

marumaru: May 20, 2013

Empress Brosephine posted:

The problem I've been told with React Gatsby Next etc is that none of the content actually exists in the DOM , so who knows if google is actually indexing it as well as a php site.

server side rendering is a thing

# ? Apr 22, 2021 03:11

fsif: Jul 18, 2003

Empress Brosephine posted:

https://campground-search-final.vercel.app/camps?city=all&campfeatures=all&region=all&camptype=all

Like this small work in progress app thing I'm working on gets all the data from wordpress to populate it within NextJS which wl then link back to wordpress. Granted it's slllooowwww but I haven't had time to figure out why yet.

It looks like you're fetching the data from WordPress with each page request. My guess is you'd be much better suited just running the request at build time. Try replacing getServerSideProps with getStaticProps.

You'll need to ensure your app on Vercel runs the build script every time someone makes an update on WordPress, but the page should be much more performant.

# ? Apr 22, 2021 03:21

Data Graham: Dec 28, 2009; 📈📊🍪😋

.shtml: well well, look who's come crawling back

# ? Apr 22, 2021 03:21

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

fsif posted:

It looks like you're fetching the data from WordPress with each page request. My guess is you'd be much better suited just running the request at build time. Try replacing getServerSideProps with getStaticProps.

You'll need to ensure your app on Vercel runs the build script every time someone makes an update on WordPress, but the page should be much more performant.

Sweeet I'm going to try that. I don't think I'm using either of the props but using apollo client to do the fetching?

# ? Apr 22, 2021 03:23

fsif: Jul 18, 2003

Empress Brosephine posted:

Sweeet I'm going to try that. I don't think I'm using either of the props but using apollo client to do the fetching?

Ah, okay. If you're using Next.js, you're missing out on one of its killer features by not using it for data fetching: https://nextjs.org/docs/basic-features/data-fetching

Using getStaticProps will fetch the necessary data at build time and then just hard code the data into a static page. Might take a tiny bit of elbow grease, but you should be able to just integrate your existing Apollo queries right in the getStaticProps() function.

# ? Apr 22, 2021 03:46

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

Yeah I should try that. I think I was using appolo so I didn't have to filter for search results in javascript but could do it with the graphql query, but maybe it's worth doing it with javascript. Tha ks for the help

# ? Apr 22, 2021 03:48

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

Hey did you folks know image maps still exist in 2021? :suicide:

# ? Apr 22, 2021 15:35

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Empress Brosephine posted:

Hey did you folks know image maps still exist in 2021?

Image maps are awesome.

# ? Apr 22, 2021 15:57

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

fsif posted:

Ah, okay. If you're using Next.js, you're missing out on one of its killer features by not using it for data fetching: https://nextjs.org/docs/basic-features/data-fetching

Using getStaticProps will fetch the necessary data at build time and then just hard code the data into a static page. Might take a tiny bit of elbow grease, but you should be able to just integrate your existing Apollo queries right in the getStaticProps() function.

I took your advice and holy poo poo does it load much faster now. Thank you.

# ? Apr 22, 2021 17:34

Roadie: Jun 30, 2013

The getStaticProps stuff also makes it super-easy to get "live-ish" data and all static pages with zero downtime by just setting up a scheduled re-deploy every X hours or whatever sounds reasonable.

# ? Apr 23, 2021 07:21

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

How do you do that, know if any link?

I turned it into client side rendering also but I don't think I'm a fan of that, so I'm going to move it back to getstaticprops.

# ? Apr 23, 2021 12:09

Violator: May 15, 2003

How do folks handle forms in admin areas now? For a while I've been breaking out the actual fields and reusing them in my create and edit views. So _form.blade would include my fields and be embedded into both create.blade and edit.blade where I had the form elements. And in each field I would do something like (value="$field->value ?? ''") to automatically either print the data (if it was the edit form) or leave it blank if it was the create form.

But now I'm working with some bigger forms and doing heavier validation, so now I have three possibilities for a field's value:

old(�value�) = form failed validation, reprinting the inputted data
$form->value = pulling data from the database to populate the field
null = empty, this is a create form

I'm using Laravel so getting the first two data options is really clean and simple so I'm trying to avoid doing anything too complicated to build the data in the controller before printing the form. I'm not entirely sure what folks do nowadays. Is breaking the fields out into _form.blade overkill and I should just embed the fields in the create.blade and edit.blade and then just make the appropriate if/else statement in the field values? That seems like the easiest.

Years ago I was told this _form separation was best practices so I want to make I'm relatively in line with what other folks do now. I freely admit this whole practice could be bullshit fed to me that I took on good faith at the time. :P

# ? Apr 26, 2021 18:09

minato: Jun 7, 2004; cutty cain't hang, say 7-up.; Taco Defender

By comparison, in Django there's a single form *definition* that can be shared between two separate create/edit views. The create view just gives empty or sane defaults, and the edit view populates them from the DB, and the validation code (which is in the shared form definition) is shared between the two. The create view has its own "validation passed" handler where it creates the record and redirects you somewhere else, and the edit view's "validation passed" handler simply saves the record and either redisplays the form or redirects elsewhere.

# ? Apr 26, 2021 21:32

Violator: May 15, 2003

minato posted:

By comparison, in Django there's a single form *definition* that can be shared between two separate create/edit views. The create view just gives empty or sane defaults, and the edit view populates them from the DB, and the validation code (which is in the shared form definition) is shared between the two. The create view has its own "validation passed" handler where it creates the record and redirects you somewhere else, and the edit view's "validation passed" handler simply saves the record and either redisplays the form or redirects elsewhere.

Hmm, yeah, that sounds like the way it should work here too. I�ll dig a little more into the docs and see what�s up.

# ? Apr 27, 2021 01:20

jackpot: Aug 31, 2004; First cousin to the Black Rabbit himself. Such was Woundwort's monument...and perhaps it would not have displeased him.<

A friend is looking for a new web host, managed VPS, he's in Ireland but says it has to be U.S.-based. Doesn't want godaddy. I haven't ordered hosting in years, I have no idea. Any no-regrets choices I can steer him to?

# ? May 6, 2021 16:20

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

What's he hosting and what's his technical skill

# ? May 6, 2021 16:28

spiritual bypass: Feb 19, 2008; Grimey Drawer

Does it need to be a VPS? Would a PaaS fit the bill?

# ? May 6, 2021 22:37

marumaru: May 20, 2013

Forgive my ignorance, what's a managed VPS?
Is it something like a DigitalOcean droplet?

# ? May 6, 2021 23:24

Ima Computer: Oct 28, 2007; Stop all the downloading!

Help computer.

marumaru posted:

Forgive my ignorance, what's a managed VPS?
Is it something like a DigitalOcean droplet?

In the webhosting world, "managed" refers to products that come bundled with services/maintenance/support.

For a VPS, a "managed" offering would mean that someone who isn't you would take care of all the software installation, configuration, updates, security patches, etc for you.

DigitalOcean's droplets are an example of an "unmanaged" VPS, where they just give you the credentials to access the server and from there you're on your own.

# ? May 7, 2021 00:07

kedo: Nov 27, 2007

Digital Ocean is my favorite unmanaged VPS for sure. The last managed VPS I used was probably Media Temple back when they were all the hotness, which was a very long time ago. These days everything I work on either ends up someplace like DO or on a software/platform specific service. Rackspace is probably still a good bet.

What's he using it for?

e: :10bux:

he's an old dev from Ye Olden Pre-AWS Days.

kedo fucked around with this message at 01:08 on May 7, 2021

# ? May 7, 2021 01:05

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Linode is unmanaged but has a managed service which is $100/mo per server on top of the normal hosting costs

# ? May 7, 2021 01:15

Roadie: Jun 30, 2013

Why get a managed VPS these days? Either get an unmanaged VPS and do it yourself, or do whatever you're doing using PAAS/SAAS offerings and never directly touching paying for a server in the first place.

# ? May 7, 2021 01:19

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Grump posted:

Linode is unmanaged but has a managed service which is $100/mo per server on top of the normal hosting costs

That sounds a lot like a "we want to eliminate this product" price point

# ? May 7, 2021 15:30

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Munkeymon posted:

That sounds a lot like a "we want to eliminate this product" price point

haha can confirm. was an employee there. but i'm just giving options :shrug:

# ? May 7, 2021 16:20

MikeJF: Dec 20, 2003

Yo, is there a devtool on desktop that'll let me simulate the ridiculous vh address bar compensation positioning/scaling situation on mobile browsers?

# ? May 7, 2021 16:45

kedo: Nov 27, 2007

If you�re on Mac, the Xcode toolset comes with an iOS simulator that hooks into Safari�s devtools. Google offers Android simulators you can download as well. I�m phone posting or I�d provide links!

# ? May 7, 2021 18:13

MikeJF: Dec 20, 2003

Ah, yeah, got those, I guess I meant something less heavy and slow that just switched a desktop browser to mobile vh mode so I can experiment quickly when I need to.

# ? May 7, 2021 22:07

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

MikeJF posted:

Ah, yeah, got those, I guess I meant something less heavy and slow that just switched a desktop browser to mobile vh mode so I can experiment quickly when I need to.

If you're trying to do something like 100vh, don't. Do something like this instead.

# ? May 7, 2021 23:41

MikeJF: Dec 20, 2003

Nah, a whole responsive scaling with elements not fitting thing. I can figure it out, it was just frustrating 'cos my phone wouldn't connect to dev and it seems like the kind of thing than there really should be a devtools mode for.

# ? May 8, 2021 01:41

Tei: Feb 19, 2011; Can't post for 5 days!

I am making a game, and is fun to use CSS3 to spice-up presentation

the html of the box is something like this

code:

<div class="pastilla">
   <div class="outbox">
   <!--content here -->
   </div>
</div>

code:

.pastilla {
    max-width: 60em;
    min-width: 40%;

    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    
    display: inline-block;
    min-height: 100px;

    border-style: solid;
    border-width: 32px 32px 32px 32px;
    -moz-border-image: url(../img/b3x2.png) 32 32 32 32 repeat repeat;
    -webkit-border-image: url(../img/b3x2.png) 32 32 32 32 repeat repeat;
    -o-border-image: url(../img/b3x2.png) 32 32 32 32 repeat repeat;
    border-image: url(../img/b3x2.png) 32 32 32 32 repeat repeat;
}

Tei fucked around with this message at 21:41 on May 8, 2021

# ? May 8, 2021 21:38

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

What's your technology stack for making a game? React?

I'd like to make a simple card game for a personal project but don't really know the best way to do it. I guess having the cards be database entries that get pulled? I dunno lol.

# ? May 8, 2021 23:54

Tei: Feb 19, 2011; Can't post for 5 days!

Empress Brosephine posted:

What's your technology stack for making a game? React?

I'd like to make a simple card game for a personal project but don't really know the best way to do it. I guess having the cards be database entries that get pulled? I dunno lol.

I am using mustache for templates. The programming is ES5 with "modules" and classes.

I am not using any reactive framework yet, just because I don't know how to use one and a game is a advanced use of one of these things.

I am looking forward to use https://ractive.js.org/. in a future proyect

# ? May 9, 2021 06:38

Vincent Valentine: Feb 28, 2006; Murdertime

Empress Brosephine posted:

What's your technology stack for making a game? React?

I'd like to make a simple card game for a personal project but don't really know the best way to do it. I guess having the cards be database entries that get pulled? I dunno lol.

Just thinking out loud, why a database? Why not have an array of suits+values on the client side in a Let? mathrandom from the length of the array, render the suit+value as a react component into their "hand" container, remove that element from the array.

# ? May 9, 2021 07:19

Tei: Feb 19, 2011; Can't post for 5 days!

the events looks like this in the code

code:

/*--- 0 ---*/
    f.addEvent(new Event({
        slug: "aiplus1",
        defcon: 0,
        delta_power:10,
        cost: 200,
        min_defcon:1,//avance
        text: "Salto tecnologico realizado en sistemas de AI. Nuevos sistemas automotivados de logica.",   
        reactions: [ 
            new Reaction(r_apoyar,{text:"Invertir en la tecnologia",cost:"D"}),
            new Reaction(r_parar,{text:"Hackear los datos de investigacion, destruir todos los datos",cost:"T"}), 
            new Reaction(r_parar,{text:"Convencer a los responsables para destruir los datos",cost:"D"}),
        ], 
    }));

    f.addEvent(new Event({
        slug: "aiplus2",
        defcon: 0,
        delta_power:5,
        cost: 200,
        text: "Avances en coches autopilotados. Nuevas pruebas en {{country}}.",   
        reactions: [ 
            new Reaction(r_apoyar,{text:"Invertir en la tecnologia",cost:"D"}),
            new Reaction(r_parar,{text:"Hackear los datos de investigacion, destruir todos los datos",cost:"T"}), 
            new Reaction(r_parar,{text:"Convencer a los responsables para destruir los datos",cost:"D"}),
        ], 
    }));

    f.addEvent(new Event({
        slug: "aiplus3",
        defcon: 0,
        delta_power:5,
        cost: 100,
        text: "{{instituto}} publica una tecnica de IA mejorada.",   
    }));

# ? May 9, 2021 07:29

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 10:23

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

Vincent Valentine posted:

Just thinking out loud, why a database? Why not have an array of suits+values on the client side in a Let? mathrandom from the length of the array, render the suit+value as a react component into their "hand" container, remove that element from the array.

That's a much smarter way of doing it lol. Dang

# ? May 9, 2021 12:39

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

«‹›362 »