/wdg/ - Web Development General

How is form validation done in professional responsive websites these days?

I obviously don't want to write the validation code twice for frontend and backend. But making an validation API call everytime the user types a letter into an input field seems to be a bit overkill and harsh on the server.

Any tips?

validation should never be done client-side as it can be tampered with. I believe general practice is to valid when they try submitting, not on key press or however you have it configured

this. you can also validate it when the user moves onto the next input

When I say frontend validation I mean in a user experience sense. Obviously my backend is secured.

But if validation on submit is acceptable for modern websites than I'll just do that. Thanks!

You may not want to have to write it twice, but you're going to have to.
>frontend
Stick to HTML5 form input elements and you're golden. That shit is basically 90% of the validation done. The last bit is just to tell the user they're using a shitty password and should feel bad about it, letting them know the username/email is innapropiate or has already been taken and so they need to be a bit more original, oh and letting Google delay then for 30 seconds with some gay ass captcha for that Googlebux.
>backend
Pick your poison. For me, I'd use PHP and go through each of the POST variables and
>make sure they exist
>escape them
>check length
>check format
>check to make sure thoes values aren't stupid (e.g. display name "dickniggerjew")
>hash passwords

The major concerns are
>some cunt will try to fuck with your SQL DB by injecting code
>some cunt will try to fuck with your website by making it render bad values
So you need to get really fucking autistic and check everything, and the backend checking is more verbose and autistic than the frontend validating, because the frontend stuff can be fucked with by the Inspect Element alone.

The golden rule is to never trust your end users. They're either retards or hackers, there is absolutely no fucking middle ground.

there should be validation on both, the frontend one is mostly for it to look pretty, red underlines and stuff with html or js while the backend one is so that your database doesn't get filled with trash in case they get around the frontend for some reason. that's the ideal case, but from experience, in projects where the clients are gorillas the frontend and the db restrictions should be enough, assuming of course you return fallback messages in the request when the orm throws you the error (don't return the same literal message the orm threw unless it's user friendly and doesn't give too much info)

>Using Golang for backend

Pussy ass bitches instead of using the watered down version use the real deal, C++

Attached: 576546346.jpg (1080x1080, 91K)

using c++ for web apps in 2019

Attached: 1548965949503.jpg (211x239, 8K)

>he doesn't like SPEED

I am not regularly writing font-face stuff by hand, but shouldn't there be only one src: property, that then has locations separated by commas?
And shouldn't the more modern stuff (woff2, woff, etc) come first?
Ans also shouldn't the weight be defined by font-weight: N instead of the name?
Seems a bit weird all.

See the css Google fonts generates for example.
fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap

>you can also validate it when the user moves onto the next input
what's the event for this? that sounds useful

redpill me on mongodb.
is it the best nosql around?

What is the best was to accept monthly payments from my clients? I want it to be automated for the first of every month.

Attached: 53415090_977769822612867_3271104654770123295_n.jpg (1080x1350, 129K)

No. And you'd have known this if you took 5 seconds to google for this information

I'm getting burnt out lads, learning is getting harder and the deeper I go the less all the puzzles peices fit together. what should I do?

What are you even using/doing right now

It's the most popular document store nosql database but that doesn't mean that it's the best. There's also plenty of different types of nosql databases that have their own use cases. The other popular types are column store (Cassandra, ScyllaDB), Key/Value (Redis, Dynamo), graph store.

Please send help.

I have deleted my htdocs folder by mistake. Is there a way to recover ? I don't have system restore :/

I have broken windows7 with autoruns and had to reinstall it. Old files where placed on into windows.old folder but there was only documents, dekstop and windows folders in there. I deleted windows folder thinking there will only be windows files, but i think there were also C: disk where xampp were and i lost all my code :(((

Attached: help.jpg (239x211, 11K)

try those file recovery tools
be ready to not be able to recover everything, tho.

how the fuck do I make a footer?
google tells me to either use fixed + bottom: 0 (which makes it a persistent footer) or absolute + bottom: 0 (which makes it stay at the end of the window, and stay there at scroll).
I just want a footer that's at the very bottom of the page, with bullshit like "copyrighted" and so on

Maybe he wants your opinion instead of g*gles you autistic fuck.

set your body min-height to 100vh

make a vertical flexbox layout and have your main content container grow to use the available space so it always pushes the footer to the bottom.

>absolute + bottom: 0 (which makes it stay at the end of the window, and stay there at scroll).
Do this, but there are a couple additions that are necessary. Absolute positioning is in regard to the nearest positioned ancestor. The element isn’t positioned by default, so you need to give it position:relative.

Also, looking at my own site, you may need to add some bottom padding to (32px in my case) because otherwise there’s some empty space at the bottom. I don’t remember exactly why I did this; it might be some quirk of my site, so try without it first.

Ah, that bottom padding is to reserve space for your footer (which matters when the body content is taller than the viewport), so it should be set to about the same as the height of your footer.

You should also set the min-height like the other user said, for the case when your content is shorter than the viewport.

Don't know if this goes here but what are some good web hosts in your own experience?

Generally you'll have to invoice people and they'll pay within the due date, so it won't be completely automated. You could use something like InvoiceQuick invoicequick.com/ to auto send invoices though.

Why can't it be like how my hosting provider automatically charges me at the 1st and it just takes the money.

You could probably set up Stripe or something to collect recurring monthly payments via your client’s credit card. That would require actual setup, but it’s not too hard to get started with.

how do I quit being a lazy retard and actually finish the sites I've worked on after I make them look pretty. I want to make money from web design, at least front end, but I only have fun unfucking things by reverse engineering from inspect element

Attached: 1561180213002.png (643x480, 211K)

>anything realtime
good, I'm gonna make both an api and a chat app, thanks user
also, isn't js/node good for realtime aswell? what would be good projects to try and build with this tech?

web dev is unfortunately supremely boring, especially front end, once you've learned the fundamentals it is only down hill from there. if you can't power through that, maybe it's time to reconsider your choice of niche

How much to charge for maintenance per month for clientsites? Small to medium businesses specifically

What do you qualify as maintenance? Just making sure shit's running, or additional coding/design work as required by client?

Make sure shit is running and won't get hit by an exploit due to the shitty cms that won't be named

>left the NEET lyfe behind
>got my first proper job, as a webdev, at my mid 20's
>for the past month been averaging ~10h work days
>today's been another all-nighter
>late-night get an email from CEO that we need to make huge changes to a project that's being demoed tomorrow
>again
>spend all night converting some shitty JS to support some shitty IE
>tfw 5am again and I need to start getting to work soon
>tfw only one in the company that gets whole projects to do by myself
>just because I happen to have lots of experience, they squeeze 150% out of me
>tfw big-ass clients, tight schedules, and I'm the only one coder for these high-priority projects
I've been here like a month, and I'm already thinking I need a fucken raise, or the higher ups need to get a grip on what's a realistic timeline for one person to do this kind of shit. Or preferably both.

Attached: BFSzMdP.jpg (540x539, 30K)

I'm so fucking stupid.

Waited until the last day to work on project but not before getting drunk as fuck last night.

So now trying to build the whole project while ultra tired in a single night.

I don't get this self-sabotage bullshit but I deserve what's coming to me.

this is how i do all my work.
t:

Well this is my own fault. I had two weeks and I wasted it. The project isn't very difficult but I figured using the last week to get it done would be beyond plenty of time.

I was right, but didn't account for a fight with the girlfriend that lasted 3 days and had me driving all over the state. Got 2 hours of work done in 3 days.

The place I work pays me WAY too much to be pulling this shit.

Anyone?

I seriously hope you did not comment your code.
Just put ultimatum, even if they decline and you will have to leave they will regret it because their new coder gonna take forever to understand you codebase

Idk bro, just set a range around what the medium salary for your area is. And from there include your years of expertise/how much work you will be doing. Then pitch in a somewhat higher price than the standard.

Unless you're unemployed and in a shitty situation, then I guess you're gonna have to hold these balls. It all depends on your situation. I just finished writing an email and asked for big things because I can. I'm already employed, I got the years, I got the experience.

Put yourself in that spot. (tl;dr do research and stop asking dumb questions on Jow Forums without telling where you're based at)

Can I spawn/use threads in Spring Boot as I would normally for any other non-web Java project or do I need to do something special? Is there a special thread pool I should use, etc?

I just want to take a user uploaded image and run my own multithreaded algorithm on it which doesn't use anything from Spring.

Any recommendations for more easily debugging browser userscripts? Using the browser console and putting console.log() everywhere sucks

This is actually my first project for then which is why I'm freaking out right now.

I am trying to figure out what the best way to store JSON Web Tokens on the client side is, cookies or storage.

The most people seem to argue in favor of httponly cookies because it would safe you from XSS attacks.
But now I just read the following point. Does anybody here know a good counter argument why the following point is not true?

> You bring up a good point: if your site runs a malicious script, it's game over anyway. They can just bind keydown events to inputs of type password and steal your user's authentication information that way (which is much, much worse than stealing a JWT auth token). Storing JWTs in localStorage does little to increase the already immense possible damage from XSS.

Source:
stackoverflow.com/questions/44133536/is-it-safe-to-store-a-jwt-in-localstorage-with-reactjs

Are you saying that that SO answer is in favor of localStorage? Because it’s not. Guy even says he recommends using a cookie

You probably looked at the wrong answer. The answer I quoted is pro local storage. I didn't ask you to visit the link, I think my post expresses the question I am asking perfectly in isolation. But if you want to then go the answer from Alex Lyalka.

Oh. Yeah, dunno, user. If you ever figure out the best practices pls post about them. I am also building a SPA by myself (for a business demo, not actual production) so I don’t really have any other engineers to lean on

Ha interesting, I am actually in the same situation like you. I definitely will post about it if I find out more.
I would probably recommand this small debate:
security.stackexchange.com/questions/199527/should-sensitive-tokens-be-stored-in-localstorage-or-an-httponly-cookie
For now I will go with local storage because it is easier and I won't offer 'online banking' anyways if you know what I mean. But I would love to hear what other anons think...

>need projects to get job
>need to learn how to design in order for projects to not be ignored
I hate it

Trying to build a basic particle effects thing here.
this.draw = function(canvas) {
this.appearance(canvas, this.objstate);
};
appearance() is a callback passed to the constructor function. Here's the callback I'm using:
(canvas, objstate => {
canvas.fillRect(objstate.x, objstate.y, 20, 20);
}),
I tried using this but nothing showed up, so I ran the debugger. this.objstate is what it should be in draw(), but for some bizarre reason the anonymous callback interprets it as the canvas, so objstate.x and objstate.y and undefined and it won't draw. Can someone please tell me what the hell's going on?

Brainlet here, how do I do this in JS:

Input:
[
[1, 1, 1],
[2, 2, 2],
[3, 3, 3],
]

Output:
[
[1,2, 3],
[1,2, 3],
[1,2, 3]
]

You need parentheses around the pair of arguments for your callback arrow function. Right now I think what’s happening is it thinks objstate is the first and only argument, and since the first argument is canvas, that’s what’s passed.

((canvas, objstate) => {
canvas.fillRect(objstate.x, objstate.y, 20, 20);
}),

Thanks! This did the trick.
What a stark reminder that JS interpreters are terrifyingly lenient, even in strict mode. It blows my mind that it didn't throw an error at my malformed argument list.

What I want to do is download a bunch of videos from a site automagically.
If I make an ajax request to a site it says "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at".
How do I even load the page? Say I load it, I still need to scroll down to reveal all content links into the dom.

Seems like there are a lot of ways to do this but i'll probably go in the wrong direction.

Also, how do you trigger js events from the browser console? I believe I have used selector.click() before but it doesn't work.

specifically, what if it's a reactjs event I want to trigger without actually clicking on the element, and it's an onClick event. How can I do that from the console?

It's called CORS. Basically only the website's approved client can request the data from the back-end.

It’s interpreting it as a reference to the canvas, followed by a function literal. Just two values in parentheses separated by commas. And an expression like that will evaluate to the last of those values.

So it’s valid JavaScript, just not something you’d want to do in almost any case I can think of.

You can’t directly load resources from other websites if they don’t explicitly allow it. Otherwise your webpage be able to load someone’s facebook info (since the request would be made as them) and see their data, or you could access any service running on a local IP address, or do other bad things.

So you’d probably need to be a browser extension to do that, or just do it outside the browser altogether.

Why not just output[x][y] = input[y][x]?

I don't get it. I want a function creates the output from the input.

Honestly, I thought web dev would be easier, specially front end.
>Learn HTML, CSS and JS
>Now learn CSS frameworks (easy enough)
>Now learn JS frameworks/libraries
>Learn Redux
>Hey now learn Context instead
>Bro drop that shit and learn easy peasy
>Can't design for shit

Is back end more 'stable'?

I have a fat disgusting .js file for a big dynamic input form.
Is there some tool to see which functions and events are never being triggered? I want to be able to go through the form a few times, filling it up with different inputs, and as an end result get what parts of the code are obsolete and never in use.

Attached: brainlet.png (800x729, 48K)

Attached: .png (560x574, 51K)

What's a good resource, that's a bit more approachable than official docs, that relies on text instead of videos?

I lose my focus real quick if I have to listen someone, I'd rather read.

Does anyone know how to build firefox addons ?

There's a guide on their site to create a manifest.json, .js script and run the extension temporarily (for one session) but I want to create my own extensions for personal use that will remain installed. Their shit guide doesn't go into that...

So I'm moving my react app from regular react states to redux. Should I remove the "regular" state completely and only use redux, or not?

you need to get it signed on AMO, or touch on the xpinstall.something flag in about:config, to keep them installed. Latter only works on dev versions and the ubuntu version.
web-ext has a "web-ext sign" command that you just feed your api keys into.

a book? google?

do your own homework, man. hit the search engines

Truly a cancer. The worst part is, that you learn something like redux now, and 2 years from now it will be worthless.

if you know how to access array indices, then that should pose literally 0 problems.
That actually looks like some code challenge or interview task, so you better stop being lazy and actually do the work yourself.

Honestly most of that stuff doesn't take much time and effort to 'learn'.
You learned JS, that was the big task. (together with React itself maybe)

Those smaller tool libraries shouldn't throw a wrench in your operation. See how it works and if it's useful, then use it and move on...

Understanding the underlying concepts (e.g. flux in this case) would still be pretty relevant.

I'm toying with EventEmitter from Node.js but I'm having trouble to resolve something like this:

app.get('/', (req, res) => {
const query = req.query;
for (key of Object.keys(query)) {
event.emit(key, query[key]);
}

let response = '';
event.on('response', (phrase) => {
console.log(phrase);
response += phrase
});

res.json(response);
});

event.on('name', (name) => {
event.emit('response', { res: `Welcome to the site ${name}` });
});

event.on('admin', (admin) => {
if (admin)
return event.emit('response', { res: 'you are an admin' });
event.emit('response', { res: 'you are a user' });
});

My idea was that depending on the query that was send to the server I wanted a different response, but with two query I want that both still work. Is emitting and receiving events asynchronous? Can you even do something like this?

lmao, is that really the mindset some people have, especially when it comes to webdev?
If you learn something and you use it regularly for about 2 years, how is that a problem?
Do you want to learn webdev once and then just coast on that knowledge for 15 years?

I am not too familiar with that, but I am pretty sure creating an event listener in your route is a horrible idea.
This will basically create a listener every time the route is accessed? And every previous listener remains active and will add more text to their scoped response variable ?

Why do you want to use events here instead of just calling a function?

>If you learn something and you use it regularly for about 2 years, how is that a problem?
because the skill is useless from that point..? How am I supposed to advance if I just toss previous knowledge into the dumpster every time. All we get is small bits and pieces. It's a waste of time, really

I started learning oop in php. The email is sent, but I don't get the message working. Plz help
class customMail {

public $email_to;
public $mail_subject;
public $mail_body;

function __construct($name,$userMail,$message,$email_to,$subject_custom_text) {
$this->name = $name;
$this->userMail = $userMail;
$this->email_to = $email_to;
$this->subject_custom_text = $subject_custom_text;
$this->mail_subject = $this->name." ".$this->subject_custom_text;
$this->message = $message;

$this->buildEmail();
$this->sendEmail();
}
private function buildEmail() {
$this->mail_body = '';
}
private function sendEmail() {

$header = 'From: '.$this->userMail."\r\n".'Reply-To: '.$this->userMail."\r\n".'content-type: text/html; charset=ISO-8859-1\r\n'.'X-Mailer: PHP/'.phpversion();

$this->response="";
$result = mail($this->email_to,$this->mail_subject,$this->mail_body,$header);
if ($result)
{
$this->response = 1;
}
else
{
$this->response = 0;
}

if ($this->response = 1)
{
$this->output='';
$this->output .= '';
$this->output .= ' Email sent';
$this->output .= '';
}
else
{
$this->output='';
$this->output .= '';
$this->output .= ' Email couldn't be sent';
$this->output .= '';
}
}
public function getEmailResponse()
{
return $this->output;
}
}

>Why do you want to use events here instead of just calling a function?
Because I would like to learn more about the EventEmitter. I thought this was some useful babysteps. I remember that I read somewhere something similar on a blog, so I was giving a try, when I'm building an API I usually just use asynchronous functions, but I want to discover what Events are useful for.

>remove the "regular" state completely and only use redux, or not
Ask yourself if the local state is needed only for that component (UI state, form input) or if it’s needed globally

btw I am passing all the parameters in another .php file and since the mail() function is sending an email, the problem is not the parameters

may I ask why the fuck are you invoking the methods inside your construct function?

Then how did you learn and build anything in the first place, if that's the case?
How much time do you need to start using a (new) state management library?
>why invest time into X, when in the future there is probably Y
because you still need or want X now.
In a way it's just in the nature of webdev to be quite fast moving, even among other dev areas.

But really that concept applies to so many things.
Why buy hardware X now, when in a few years there will be newer stuff available.
Why rent server X now, when in 2 years I can probably get one with a much better CPU and more space.
Any you can be annoyed that you maybe then have to migrate your stuff over to another server and do maintenance, updates, etc. but that's just how things go, since shit doesn't stand still.

Not that I can't understand the preference for stable work environments.
I wouldn't want to set up a new bundler every few months or something like that.
I am happy when I did a set up, that I know works well for now, but I also don't have the expectation, that I wouldn't have to adjust to new things from time to time.
And 2 years really doesn't seem that extreme.

PHP's mail() function basically shouldn't exist these days. It "works" by calling the sendmail binary, and more often than not arbitrary programs aren't allowed to send emails, and where an arbitrary hosts allows it, it's going to end up in spam filters.

Look up an SMTP library and send email properly.

i know, but since I am learning OOP, I wanted to know why my class is sending the emails, but not receiving the alerts.

AAAAAAAAAAAAAAAAAAAAAAAAAAAAA

>isnt nodejs good
NO, you're doing so good user learning go. please don't go down that road. save yourself. if you really want another language, python. avoid javascript at all costs unless it's for web

and by web i mean client-side, not server-side

it makes sense for an event to be emitted in your route, but not to listen for one.
In a sense I guess it decentralizes the code, for the lack of a better word.
So instead of the route calling a bunch of other functions.
>log this GET
>increment that counter
>check if I am over some kind of traffic limit and send an alert if so

The route could just say
>Here I am emitting this event. Any other service that wants to make use of this can just hook into it from its end.
And this keeps the things nicely decoupled I'd guess.
If you want to remove your GET-logger, you just remove it and the hook is gone too, instead of having to delete the GET-logger and also having to remove the function call in the route.

right?

JavaScript and Node are totally fine.

I was reading some stuff and your reply and it is all making a little more sense now. Events are supposed to be "fire and forget", I guess. Like you said it is useful to do "parallel tasks". I thought I could use to make a request to two or more server to get a response, but for something like that I think I should keep using Promise.all().

I had an idea for a project where I would need to scrap some websites at each request and I thought EventEmitter might be useful, but I'm not sure anymore.