The Web Design & Development Megathread

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

«‹›361 »

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

Maluco Marinero posted:

It seems like the answer is by tightly coupling with Amazon services to emulate the server behaviour you need, which honestly feels disingenuous in terms of presenting this as 'serverless'. Does this actually reduce complexity, I'm not sure it does.

Yeah, I read a bit more of that tutorial and it seems that you are just writing framework specific node code for the server and pushing it live via shell script. Interesting abstraction, but serverless it is not.

EDIT: which is exactly what Ruggan just said!

# ? Oct 13, 2017 11:30

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 14:30

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

Ruggan posted:

Yeah. It isn't serverless. All it's doing is abstracting the concept of a server away behind some common API:

I mean it's a cool concept, but definitely a misnomer. It's mostly aimed at allowing developers to create applications where they don't need to worry about back-end setup (provisioning, availability, etc). You're still giving Amazon or Google or whatever a set of instructions on how to handle different HTTP requests sent their way.

Another good description:

Finally, a better analogy for the HTTP vs SQL (because you'd never put a SQL query [letter] inside an HTTP request [envelope]):

Let's say you are a piece of server code. Your job is to open envelopes addressed to you and read the contents. Based on what is written, you need to take something out of your refrigerator and send it as a response.

The mailman (the server's routing logic, which tells it what code should execute based on the incoming request) drops by and delivers an envelope addressed to you. This envelope is the HTTP request, and it can contain anything.

You open the envelope to discover that someone has sent you a blank letter. Idiot. You do nothing and send back an angry response. This is validation logic written in the server side language leading to a HTTP error response code.

The next day, the mailman drops by again. This letter tells you to get a FUCKYOU out of your refrigerator. You look in the refrigerator and find nothing by that description. This is the SQL query which returns a blank dataset. You send back an empty letter. This is a successful HTTP response with no data.

On the third day, the mailman comes by again. This letter tells you to get a gallon of milk out of the refrigerator. You look in the refrigerator and retrieve a gallon of milk. Another SQL query that successfully returned data. You send a package to the person containing this milk. A successful HTTP response containing data.

Finally the mailman delivers one final letter. This letter tells you to look for 1 OH and also throw away your refrigerator. Because your boss didn't make you parameterize your queries and wrote sloppy server side code, you just threw away a really expensive appliance and all the food went bad. But you were just doing what you were told. This is SQL injection.

HTTP is the envelope. SQL is the instructions on how the server interacts with the relational database.

Hope this helps.

Yeah that's definitely making a lot of sense, but I think I have one more less theoretical question.

If I was going to make a post request to some server code to upvote a forum post, lets call it remote.php, how does that php file know to run the upvotePost() function? Like what's telling the php file "you should be running this function, if these parameters are given?"

# ? Oct 13, 2017 13:32

ModeSix: Mar 14, 2009

Grump posted:

Yeah that's definitely making a lot of sense, but I think I have one more less theoretical question.

If I was going to make a post request to some server code to upvote a forum post, lets call it remote.php, how does that php file know to run the upvotePost() function? Like what's telling the php file "you should be running this function, if these parameters are given?"

Generally this is given in the post data or in the case of php sometimes as a query string, such as you see on the forums here.

newreply.php?action=newreply&postid=477341370

Your case:

remote.php?do=upvote&id=1234&user=USERBOB&otherparam=hahaha

# ? Oct 13, 2017 13:37

Main Paineframe: Oct 27, 2010

Grump posted:

Yeah that's definitely making a lot of sense, but I think I have one more less theoretical question.

If I was going to make a post request to some server code to upvote a forum post, lets call it remote.php, how does that php file know to run the upvotePost() function? Like what's telling the php file "you should be running this function, if these parameters are given?"

It's not too different from how you'd handle an AJAX request on the front-end - have a function that receives the request content as a parameter, and then parse that parameter and run different logic based on what it contains.

# ? Oct 13, 2017 14:17

Rapner: May 7, 2013

Maluco Marinero posted:

It seems like the answer is by tightly coupling with Amazon services to emulate the server behaviour you need, which honestly feels disingenuous in terms of presenting this as 'serverless'. Does this actually reduce complexity, I'm not sure it does.

Of course there are servers involved. The point is that you don't need to even consider them anymore when architecting an application. It isn't magic.

Instead of paying for a server for a month, you pay for a docker container per 100ms of use. In terms of efficiency, it's impossible to beat except when comparing to other cloud serverless techs.

# ? Oct 13, 2017 15:03

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

Rapner posted:

Of course there are servers involved. The point is that you don't need to even consider them anymore when architecting an application. It isn't magic.

Instead of paying for a server for a month, you pay for a docker container per 100ms of use. In terms of efficiency, it's impossible to beat except when comparing to other cloud serverless techs.

But it sounds like you still write some server code that sits between the DB and the front-end, making it just as 'serverless' as any other cloud thing?

# ? Oct 13, 2017 15:14

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

Grump posted:

Yeah that's definitely making a lot of sense, but I think I have one more less theoretical question.

If I was going to make a post request to some server code to upvote a forum post, lets call it remote.php, how does that php file know to run the upvotePost() function? Like what's telling the php file "you should be running this function, if these parameters are given?"

The web server, when it sees the remote.php URL with a POST body of action=upvote&postid=12will execute the code in that file. So that file could look like this:

PHP code:

// I have not written PHP in years, so this is all pseudocode!
if ($_POST['action'] === 'upvote') {

    // use $_POST['postid'] to construct a paramaterized DB query to upvote that post!
    // maybe add logic to see if the user already voted on that post and not do it if they did
    upvotePost( $_POST['postid'] );

} else if($_POST['action'] === 'delete') {

    // use $_POST['postid'] to construct a paramaterized DB query to delete that post!
    // maybe add logic to see if they own that post and / or are allowed to delete it!
    deletePost( $_POST['postid'] );

} else if($_POST['action'] === 'blah') {

    // keep adding actions that do stuff!
    //...

} else {

   // code to return an "I don't know what you want me to do!

}

There's nothing magical about it at all. The URL points to a PHP file, that file is executed. You can have logic inside said file to branch based on GET or POST parameters, SESSION variables, etc.

Many sites use routers to abstract this a bit, so *all* hits go through something akin to router.php and it would map the URL upvote/post/12 to a specific file that would handle that.

# ? Oct 13, 2017 15:27

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Grump posted:

Yeah that's definitely making a lot of sense, but I think I have one more less theoretical question.

If I was going to make a post request to some server code to upvote a forum post, lets call it remote.php, how does that php file know to run the upvotePost() function? Like what's telling the php file "you should be running this function, if these parameters are given?"

I think you're just using it as an example, but just to be clear...don't use PHP (unless your job requires it). Anyway, I already answered your question!

Thermopyle posted:

1. Some server like Apache or nginx gets a HTTP request from a browser, an app, a script, whatever.
2. It has rules on what to do with requests to different domains and paths.
3. It passes the request to your app which gets an object with info about the request. The HTTP method, the body of the request, headers, the path requested, etc.
4. Your app uses that info to decide what code to run.

For example, in Django you have a file that maps urls to different view functions.

Python code:

urlpatterns = [
    url(r'^your-mom/', this_is_the_mom_joke_generation_function)  # runs the mom joke generator function
]

When your web server passes a HTTP request to Django, django branches based on the url of the request, and if that url is https://www.hilarious.com/your-mom/ it runs the this_is_the_mom_joke_generation_function which returns a response in a format that gets translated back into what your web server software understands which then sends it to back to the client browser.

Rapner posted:

This is no longer true with modern web design. It is standard practice for many applications, including thick web apps, to connect directly to an offsite database. A lot of serverless models and mobile apps do this as standard.

Serverless Stack is a step by step tutorial which includes how to do this.

I'm familiar with serverless, in fact I just said this about it:

Thermopyle posted:

Yes, it's dope and that poo poo is the future.

The fact remains that you still have a layer between the frontend and the actual database. In some cases the web server layer has been pushed back into the database software, in other cases it's just the traditional application server sitting in between the client and Postgres or MySQL, it's just that it's been abstracted away, in other cases it's not even abstracted away, but you still call it serverless because Lambda doesn't give you a persistent server, it spins up your server function in response to requests.

Serverless is neat because it makes explicit the fact that all an application server like Django or whatever is is a function that takes in an HTTP request and spits out an HTTP response.

I can definitely remember being confused about this as a beginner. At the time I was learning with Flask and I couldn't grok how Flask was sitting there waiting for a request. It's not! Your web server (Apache) was what is sitting there waiting for a request, then it runs your Flask application and passes that request data in. All of Flask/Django/ASP.NET boils down to a function that takes a request and gives a response.

# ? Oct 13, 2017 15:27

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

Thermopyle posted:

I think you're just using it as an example, but just to be clear...don't use PHP (unless your job requires it).

Yeah just an example. I'm actually working on project with an Express server, and I was just trying to wrap my head around how these provided API endpoints work.

But thanks for the help everyone!

# ? Oct 13, 2017 18:26

Tei: Feb 19, 2011

I am stupdi so I have stupid ideas.

I made a resource loader, despite there are million of these and are probably better than mine. Then I had a idea, I can store 2MB of data in localstorage. Maybe once a resource is downloaded, I can store in the localstorage, so the next time I need it, the resource loader could take it from localstorage and put in the page. I know the browser have a cache and theres a standard how this cache works. But the idea of creating another cache is interesting.

Despite this being a dumb idea, I like the gist of it, so maybe I will make a experiment with it, to see If I can improve a complex page load time.

# ? Oct 14, 2017 08:08

IronDoge: Nov 6, 2008

My coworker updated some product images on a client's site for me, then I get a complaint the pages are running slow. I go and check on the images and they're all loving 8MB in size. There's also 4 of them on 1 page. He just straight up uploaded un-optimized and un-resized images from our creative department's photoshop files. :psyduck:

# ? Oct 16, 2017 16:34

-JS-: Jun 1, 2004

Tei posted:

I am stupdi so I have stupid ideas.

I made a resource loader, despite there are million of these and are probably better than mine. Then I had a idea, I can store 2MB of data in localstorage. Maybe once a resource is downloaded, I can store in the localstorage, so the next time I need it, the resource loader could take it from localstorage and put in the page. I know the browser have a cache and theres a standard how this cache works. But the idea of creating another cache is interesting.

Despite this being a dumb idea, I like the gist of it, so maybe I will make a experiment with it, to see If I can improve a complex page load time.

People use this method for stuff like web font caching. It's not stupid at all (within reason!)

# ? Oct 16, 2017 16:41

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

IronDoge posted:

My coworker updated some product images on a client's site for me, then I get a complaint the pages are running slow. I go and check on the images and they're all loving 8MB in size. There's also 4 of them on 1 page. He just straight up uploaded un-optimized and un-resized images from our creative department's photoshop files.

Many moons ago we did the site for an NYC architecture firm. They demanded that the images be loving HUGE (like ~60-70 Megs each) in the "work" section to show case how amazing they were while *also* demanding that the site load fast. There were ~48 images in the section. Good times.

Oh, it was also a Flash site because they had to have AMAZING ANIMATION on everything.

Luckily I never had to work on that one.

# ? Oct 16, 2017 16:59

kedo: Nov 27, 2007

My default response to this is to say, "Okay, no problem," then allow the client to upload whatever images they want, and then resize/crunch the images server-side. I've yet to meet a client that's savvy enough to know the resized, 40% quality jpg isn't the 50MB monster they uploaded.

# ? Oct 16, 2017 17:14

Tei: Feb 19, 2011

-JS- posted:

People use this method for stuff like web font caching. It's not stupid at all (within reason!)

That would be fantastic, but I doubt is really feasible. Would google fonts reply to ajax request of a font? How you reembet that in the page? Do font urls support dataurls of 200kb+ size? Also maybe you the have to care with what browser like what font format.

# ? Oct 16, 2017 17:43

Tei: Feb 19, 2011

Lumpy posted:

Many moons ago we did the site for an NYC architecture firm. They demanded that the images be loving HUGE (like ~60-70 Megs each) in the "work" section to show case how amazing they were while *also* demanding that the site load fast. There were ~48 images in the section. Good times.

Oh, it was also a Flash site because they had to have AMAZING ANIMATION on everything.

Luckily I never had to work on that one.

What about these kids minecraft maps that render a map using what seems google maps interface? That would allow to render in the screen a image that is some GB in size but only downloading a few image files.

# ? Oct 16, 2017 17:45

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

Tei posted:

What about these kids minecraft maps that render a map using what seems google maps interface? That would allow to render in the screen a image that is some GB in size but only downloading a few image files.

I will go back in time 9 years and tell my past co-workers about this and they will say "WTF is a mincraft?"

# ? Oct 16, 2017 17:51

Tei: Feb 19, 2011

Lumpy posted:

I will go back in time 9 years and tell my past co-workers about this and they will say "WTF is a mincraft?"

This or "Have you seen what Notch has posted in Tigsource? is a cool octree render for java. It render quite fast, for java".

Convert a big image to google maps interface
https://github.com/Murtnowski/GMap-JSlicer

# ? Oct 16, 2017 17:58

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

kedo posted:

My default response to this is to say, "Okay, no problem," then allow the client to upload whatever images they want, and then resize/crunch the images server-side. I've yet to meet a client that's savvy enough to know the resized, 40% quality jpg isn't the 50MB monster they uploaded.

The answer to better client CMS usage is to cut the corners off the CMS, not to expect better technical discipline from the client.

# ? Oct 16, 2017 21:00

-JS-: Jun 1, 2004

Tei posted:

That would be fantastic, but I doubt is really feasible. Would google fonts reply to ajax request of a font? How you reembet that in the page? Do font urls support dataurls of 200kb+ size? Also maybe you the have to care with what browser like what font format.

Maybe I'm misunderstanding, but I'm not sure what you think isn't feasible - this is an actual thing and it's used quite widely - https://www.google.com/search?q=localstorage+font+cache

# ? Oct 17, 2017 09:05

Tei: Feb 19, 2011

-JS- posted:

Maybe I'm misunderstanding, but I'm not sure what you think isn't feasible - this is an actual thing and it's used quite widely - https://www.google.com/search?q=localstorage+font+cache

Yea, I checked it somewhere else and had a positive feeling people is already doing this (frameworks).

Would not help me in many cases, I am using fonts with hostname-based-DRM and Google Fonts and they have their own resource loader and stupid poo poo like that, so I probably can't cache these things.

Is a pain in the rear end when you want a perfect score in PageSpeed Insights withouth cheating, and PSI is angry about a resource that is hosted in Google servers or so. Like, dude, this bitch server is not even mine!, fix you poo poo.

# ? Oct 17, 2017 13:22

kedo: Nov 27, 2007

Current status: sitting in on a UX/design review call where the biggest critique point has been that the designer is failing because she's "trying to solve UX problems with design."

They're not doing any traditional UX work. No wireframes, sitemaps, nada. They're only doing design comps.

It's a combo UX/design review.

:psyboom:

# ? Oct 17, 2017 14:21

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

kedo posted:

Current status: sitting in on a UX/design review call where the biggest critique point has been that the designer is failing because she's "trying to solve UX problems with design."

They're not doing any traditional UX work. No wireframes, sitemaps, nada. They're only doing design comps.

It's a combo UX/design review.

There are design review calls that *aren't* like that?

# ? Oct 17, 2017 14:23

The Dave: Sep 9, 2003

Current Status: Sitting on a demo review of a new product for a large company and stakeholder is questioning the limited scope for the MVP when we're a month out from release and he's known the scope for months.

Feel you bro.

# ? Oct 17, 2017 14:24

kedo: Nov 27, 2007

Question for you React-savvy folks. How dumb is it to build only part of a site with React, and is that even possible/recommended? I'm still learning but I have a real world project that is the perfect application for it (rendering results of a search from an external API). The rest of the site is being built in WordPress at the client's request and I'm not sure I'm confident enough to try to build the whole thing using React and the WP REST API.

Thoughts? Opinions? Is having a big div that I dump content into w/ React an idiotic way to do this? My alternative is to fetch results and render them using a combination of vanilla JS and jQuery.

# ? Oct 17, 2017 15:02

Tei: Feb 19, 2011

My company is very small, so we kind of survived until today using brute force tricks.

But today my Designer asked me to lock files, because one of the junior developers managed to revert/undo/delete/vanish changes push by the designer.

I have googled it, and the accepted answer for "lock files in git" is to laugh at the people asking for it. Git is a horse, and locking files is like human shoes, so trying to lock files in git is like giving a horse human shoes.

This is not a question. I am just sharing my existential pain.

# ? Oct 17, 2017 15:14

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

kedo posted:

Question for you React-savvy folks. How dumb is it to build only part of a site with React, and is that even possible/recommended?

It's a good way to ease into React. Just rebuild a widget or something with React and leave the rest alone.

# ? Oct 17, 2017 15:15

kedo: Nov 27, 2007

Works for me. Thanks!

# ? Oct 17, 2017 15:30

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

The Dave posted:

Current Status: Sitting on a demo review of a new product for a large company and stakeholder is questioning the limited scope for the MVP when we're a month out from release and he's known the scope for months.

Feel you bro.

Assert that you are on track for release despite numerous challenges with a product at a high level of quality. Risking a change to the target scope could result in delays, re-assessment should occur in one months time. Tell them Nolgthorn from the internet said so.

# ? Oct 18, 2017 03:17

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Tei posted:

But today my Designer asked me to lock files, because one of the junior developers managed to revert/undo/delete/vanish changes push by the designer.

I take it you don't have a code review process?

# ? Oct 18, 2017 03:20

Rapner: May 7, 2013

The Dave posted:

Current Status: Sitting on a demo review of a new product for a large company and stakeholder is questioning the limited scope for the MVP when we're a month out from release and he's known the scope for months.

Feel you bro.

This is why large enterprises get a very firm solutions architecture document the client agrees to, and if they deviate from it then it's $$$$$.

# ? Oct 18, 2017 03:58

Tei: Feb 19, 2011

fletcher posted:

I take it you don't have a code review process?

We are a small company so we are process light. We do code reviews, but not before every time a junior dev synchronize his code with git. Do bigger companies have a review process before every code upload? how that even works? I imagine it has to slowdown everything so the junior is not uploading code until he "finish" a large task. I can't imagine a organization doing code reviews every half hour or a junior devs work.

I am interested in your answer because I would take any improvement you can suggest to me.

# ? Oct 18, 2017 09:48

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Tei posted:

We are a small company so we are process light. We do code reviews, but not before every time a junior dev synchronize his code with git. Do bigger companies have a review process before every code upload? how that even works? I imagine it has to slowdown everything so the junior is not uploading code until he "finish" a large task. I can't imagine a organization doing code reviews every half hour or a junior devs work.

I am interested in your answer because I would take any improvement you can suggest to me.

Yup, code review for every commit. All work is done on feature branches. Create a branch review in upsource, add the appropriate reviewers. Jenkins build machine is also a reviewer, and accepts when it is able to build your branch and all tests pass. Once the code review is closed, then it gets merged into the main branch.

They are especially important for junior developers as they learn the ropes, and making sure nothing bad gets checked in.

It can seem like it slows things down, but I think it pays off down the road when you are spending less time having to deploy patches for lovely code, and you get to spend more time working on new features.

In your example it seems like a 5 minute code review could have saved all the time you spent investigating how to lock files, undo what the junior dev had done, time the Designer spent bitching at you, etc etc.

fletcher fucked around with this message at 10:41 on Oct 18, 2017

# ? Oct 18, 2017 10:39

The Dave: Sep 9, 2003

Rapner posted:

This is why large enterprises get a very firm solutions architecture document the client agrees to, and if they deviate from it then it's $$$$$.

This is a fortune 250 company and this department is known for missing release dates. There�s a lot of sound theory they should adhere to but they always fall back on bad habits and it just is what it is.

# ? Oct 18, 2017 13:18

Alligator: Jun 10, 2009; LOCK AND LOAF

Does anyone here know if there are any weird quirks around the img onerror callback? I'm having a strange issue where in IE11 only it's being called for a valid image (server returns a 200, serves up the image). The callback replaces the image with a blank placeholder and a perfectly fine image is getting replaced.

To make sure it's not some weird timing thing I tried creating a new image element in the console, setting up an onerror callback and then setting the src to the same path. Calls the error callback every time. There must be something in the response that IE doesn't like but I can't figure out what.

edit: figured it out, someone added a

pre:

X-Content-Type-Options=nosniff

header and the thing that's serving the images isn't sending a Content-Type header, so I think IE might actually be in the right on this one?

Alligator fucked around with this message at 16:46 on Oct 18, 2017

# ? Oct 18, 2017 16:20

Scaramouche: Mar 26, 2001; SPACE FACE! SPACE FACE!

I don't know about "right" necessarily but pre-edge IE was relatively picky about headers compared to the others. Maybe that is right really, one of our suppliers sites will serve up every non-html file as a jpg. Zip file? jpg. PNG? jpg. PDF? jpg. Chrome seemed smart enough to figure it out but maybe that's not something the browser should be assuming.

# ? Oct 18, 2017 17:52

kedo: Nov 27, 2007

Okay. So my first real-world React app has reached its first functional milestone (being able to fetch and display results from an API) and I have to say I feel like an idiot for waiting so long to take the plunge in learning it. It's approximately a billion times more organized and understandable than the type of Vanilla/jQuery stuff I've been writing up until now.

Of course the downside (for you guys) is that now I'm going to start spamming this thread with a lot of dumb React newbie questions, so enjoy that.

# ? Oct 18, 2017 21:47

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

kedo posted:

So my first real-world React app has reached its first functional milestone

It will certainly remain clean and fast and organised as the codebase grows. I'm being sarcastic! Congratulations on the milestone, feels good. You might check out the modern framework thread if you aren't there already.

# ? Oct 18, 2017 21:52

kedo: Nov 27, 2007

Nolgthorn posted:

It will certainly remain clean and fast and organised as the codebase grows. I'm being sarcastic! Congratulations on the milestone, feels good. You might check out the modern framework thread if you aren't there already.

Yeah I have it bookmarked but I'm several thousand posts behind since on the whole I haven't really been giving much attention to modern frameworks, let alone threads about them.

Speaking of staying organized... does anyone have a favorite article or two about the subject I could read? I feel like I want to break my application out into partials (or whatever they're called for React), but I don't know a smart/common way to do that.

# ? Oct 18, 2017 21:57

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 14:30

Rapner: May 7, 2013

The Dave posted:

This is a fortune 250 company and this department is known for missing release dates. There’s a lot of sound theory they should adhere to but they always fall back on bad habits and it just is what it is.

Sounds like a management problem - contact negotiation and change requests are a thing they should be aware of long long before fortune 250.

# ? Oct 18, 2017 22:03

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

«‹›361 »