/wdg/ - Web Development General

Suicide Prevention Edition

Previous thread: >Beginner Roadmap and Overview
github.com/kamranahmedse/developer-roadmap
youtube.com/watch?v=UnTQVlqmDQ0

>Free beginner resources to get started
Get a good understanding of HTML, CSS and JavaScript.
developer.mozilla.org/en-US/docs/Learn - a good introduction to HTML/CSS/JS and Node.js or Django
freecodecamp.org - curriculum including HTML/CSS/JS, React, Node.js, Express, and MongoDB
javascript.info - curriculum providing a strong basis in JavaScript

>Further learning resources and documentation
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
hackr.io - crowdsourced collection of tutorials from across the web for learning languages and libraries (ignore sponsored stuff, look at upvotes)
learnxinyminutes.com - quick reference sheets for the syntax of many different languages (generally not sufficient on their own for learning something, but very helpful)
pastebin.com/gfBPg24A - Everything PHP

>Asking questions
jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS
3v4l.org/ - Use this and post a link, if you need help with PHP/HackLang

Attached: wdg_95.jpg (1280x720, 108K)

Other urls found in this thread:

jsfiddle.net/nzo948we/
developers.google.com/web/fundamentals/primers/promises
journal.stuffwithstuff.com/2015/02/01/what-color-is-your-function/
twitter.com/AnonBabble

First for first

jQuery + PHP Master Race

>CoffeeScript is still actively maintained and updated
Oh god why would you do that

How do I make this look less shit?
I dont know what to do with the progress bar, cancel/retry buttons, or error message.

Attached: Untitled.png (1434x592, 38K)

On smol screen

Attached: Untitled.png (683x709, 35K)

I love you.

It's so comfy.

Different buttons should have the same width.
Maybe use the background and fill it from left to right in a subtle way to indicate progress?
Also maybe add an icon on the left side to indicate the file status. (green checkmark for success, red x for error, yellow ! for some warning, blue spinny thing to indicate upload in process)

I'm the best.

how do i get good at writing java backend?

my = {
data : {name : number}
}


How do I get number? my.data.name?

obviously
you can literally test this on the any dev console btw, just hit F12

>my
is that perl or something

I am retard at maths.. do I can make it?
;____;

dope.

probably should have done that before writing 78 lines of code assuming it would. whatevs

yes easily

uh, any idea why my sockets would get overwhelmed?

I fire off like 10 in the same room within 3 seconds of each other and then it doesn't emit for like half a minute, then it spams the rest.

show pseudocode

Is there a system or project structure to follow to make developing vanilla css/html/js components not trash?

Is it worth learning web development in 2019 without a degree?

has anyone tried to deploy laravel site to a shared host? is it a good idea?

So I'm trying to send a CSRF token that's a cookie as part of AJAX request, I got it to work on firefox but not on Chromium or safari, what's causing this?
jsfiddle.net/nzo948we/
Thanks in advance

I hope you are not trolling me ;____;

ngrok wasn't forwarding cookies causing the issue

Best lifetime for RESTful tokens?

Working with an api and i wonder if i should just let them go for years or be sure to renew them frequently.

Should i give them a lengthy lifetime or make them valid only per request?

is there a simpler way to check if several PHP variables are set rather than writing them down one by one again on an if?

Using Django, I have a button in a template which I want to call the del function in my views.py with three arguments: the site name, it's category, and finally the entire dictionary so I don't need to read it from file again (these are available as variables in the template already).

I already have a form to add a site which works fine. I was thinking maybe of doing this with another (hidden) form, but I'm not sure how I'm going to distinguish POST requests from these two forms in my main views function.

any backend devs have advice on improving a basic api?

only done a little express/node in the past, looking for ideas to help refactor things like routes and models, db conections.
right now it's basic crud but I've got the route handlers defined as an array of objects which are generated in a loop which makes it easy to add routes.

working on the db now not sure if i should open and close the connection on each request or keep the connection alive the whole time and just make my queries for every request?

I hope so or I'll just have to an hero.


Also, question guys. What are some shit I could put on a portfolio to make it eye catching?
Right now I have simple (or at least it looks simple to me) stuff.
Like a calculator, a pomodoro timer, drum machine and a markdown previewer from FCC projects. At least I made them from scratch.
I thought about making a tetris game or something.
What else can I add? I want to market myself as front end dev, how do I show off SASS/Bootstrap skills as well (once I get the latter).

Attached: 1553757268431.jpg (780x879, 585K)

How do I get rid of this shit? I have this in my htaccess file:

Header add Access-Control-Allow-Origin "/var/www/html/*" Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS".

This shit simply ignores it. I also tried to put it into the apache config file.

Another question, is it possible to make ffmpeg queue videos instead of running them simulatenously? How much performance do I need for a "tube" like website, currently I have a dualcore / 4 GB RAM VPS.

Attached: sss0mksv.jpg (972x178, 37K)

uuuuuuuuugggggghhhhhh
>guy makes website in a way so the form is generated by going through the model with reflection and some voodoo magic
>supposed to add data bind to this fucking shit
fucking hell I hate asp.net

12 Hours, but refresh their lifetime every time a request is made

>Access-Control-Allow-Origin "/var/www/html/*"
This makes no sense, an origin can't be a local file
Use "*" if you want to allow all origins

Is it a decent authentication system if it works like this?

>User Register
>User logins, jwt token with only the id as the data gets set
>Everytime the user needs to do something that requires being logged in the front-end sends the token that is checked on the back end, if its valid based on the id that was sent inside the token the back-end sends stuff from the database from that id, the only problem is that everytime i have to fucking send my jwt token so my requests look like shit, pic related

Attached: 63346364.jpg (588x21, 9K)

That's normal, you have to send the token each request.

Create an interceptor for all http request to automatically put the token so that your code looks cleaner.

If the problem is that you have to repeat the code to add the header for every request, you can simply define an interceptor on the axios instance to do that for you automatically
Also, might as well use Oauth2 instead of coming up with your own protocol

Why is white men always portrayed as evil?

Set the axios.defaults.headers to be the auth token so you don't need to include it everywhere.

You don’t need math(s) for web development, retard.

Because they refuse to make JavaScript the universal language

Doesn't that mean it will send the header every request even if its not needed?

Attached: 363463346346346.gif (500x281, 285K)

babel js more like babby js lmao

socket io more like succ it Ayo lmao

I tried that already. Whatever I do, it doesn't change anything.

Do an OPTIONS request on that url with curl and see what headers are being returned

For all of you screaming how you can't get a job in web-dev, why don't you just move to another country?

Attached: 1549852480123.jpg (754x692, 137K)

Wait do people actually have problems getting jobs here?
Getting a webdev job is ridiculously easy last time I looked. Literally get 3 headhunter calls every week, and I've only got 2 years of experience.

WHY CAN'T I BIND CHECKBOX STATE TO A BOOL

Attached: db4.jpg (495x362, 17K)

he's not, web dev is close to zero math, even game programming you can get by since most math is in libraries you can use without much understanding

Do you guys call your first screen when someone logs in Home or you are cool and fancy and call it Dashboard?

Attached: 1541793058250.gif (680x502, 179K)

I assumed I wasn't going to get a job in my country since I started (Spain).
Luckily I have a decent English level so I'll just try and find a remote position.

But that could lead into me spiraling out of control being alone at home.

you mean native webcomponents or building your own custom solution?
For frontend imo, all that stuff isn't nearly as impressive as if you made an actual mockup of a site of some imaginary business.
calculator, pomodoro timer, drum machine and that stuff is good if you want to show, that you know how to write some JS, but the people who maybe end up tasking you to build a site, might not even know what JS is and probably don't have a handle on the technical site of webdev.
code?

S-should I be transpiling ES5? Wordpress suggests ES5 code with 'var' everywhere and then ESNext.

I'm assuming there's no need to transpile es5? I'm right, right?

Transpile *from* ES5? Not really.
But you might just as well write modern JS and then set your compatibility target and transpile anyway, depending on which ancient browsers you want to support.

I'm extra fancy, I divide the site into sections and call the landing page of each section the dashboard for that section

>I'm assuming there's no need to transpile es5? I'm right, right?
"Hello user-kun, one of the clients is saying that the site doesn't work on his browser. He's using Safari 2005. Can you check that real quick?"

>actual mockup of a site of some imaginary business.

Thanks for the idea, yeah, that sounds like a much better approach.
I'm working on a portfolio site for a friend that's into drawing.

Also going to learn Adobe XD, not sure if that's something demanded but I think it could be useful.

Should I target my wp plugin for the block editor? It's new tech, after all.

What's confusing is how some actions work. Like, if I hide the custom fields in block editor, the "publish_post" hook doesn't run, but if I show them, it does. So how am I to know if my shit ran or not? A lot of extra conditions.

who here adhd i cant get through life

Attached: 1544284245226.jpg (436x536, 51K)

$xml_body='

'

$headers = array(
"Content-Type: text/xml; charset=utf-8",
"SOAPAction: \"tempuri.org/WS_THINGY\"",
"Content-length: ".strlen($xml_body),
);

$url = 'webserviceurl.kek?wsdl';

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 30);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, trim($xml_body));

$reply = curl_exec($ch);


why the fuck is this not returning ANYTHING at all? no errors, no success, nothing
the only way I can make it return a response is removing the content-length header, which then indicates the obvious error in the request

please help me I'm going insane

$xml_body=''

$headers = array(
"Content-Type: text/xml; charset=utf-8",
"SOAPAction: \"tempuri.org/WS_THINGY\"",
"Content-length: ".strlen($xml_body),
);

$url = 'webserviceurl.kek?wsdl';

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 30);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, trim($xml_body));

$reply = curl_exec($ch);

proper code tags

Try running it through normal curl, not through php.
Can't diagnose it unless you share the actual data/url you post to.

>Sails
>Feathers
>Adonis
>nest
impressions or thoughts on any of these?

Attached: anActualBurger.png (268x491, 8K)

how the fuck do I display different shit when clicking list items?

Attached: react material-ui.gif (713x433, 108K)

just use bootstrap :^)
The traditional way is to have different website for each item displayed.
There's another technique used, which consists of having a bunch of divs hidden inside a container div, and whenever someone clicks on one item you display the div conaining the text or content of that item... but hide the rest first. This is done in javascript. Bootstrap comes with this built in.

that's exactly what I did and now I'm trying to recreate this in react

Holy shit. Turns out the hooks work fine, but I just didn't understand how php works.

>go to admin post edit screen
>is_admin() returns true
>publish a post
>is_admin() returns false if custom fields are displayed, false otherwise
gulp. I am going to move all hooks into my primary file and just attach them regardless. I think that's the safe bet. I tried to copy Akismet style and now it's assfucked me. serves me right, I guess.

I CANNOT SOLVE THESE CAPTCHAS? PICK CARS? THERE'S 1 IMAGE WITH A CAR AND WE ALL KNOW IT NEEDS 3

Why are you sending XML requests to the WSDL URL? You only need that with an actual SOAP client, if you have your XML request ready you can post it directly to the endpoint.

>returns false if custom fields are displayed, false otherwise
make that first false true

hide all divs except the first
-click
.hide the active div
.display the div related to the item

Also be sure to use the length of the XML after whitespace trimming and not before, in case that ever matters.

Based

Although I personally like vanilla js more, jQuery has some perks too.

JAMstack ftw

>how the fuck do I display different shit
>react material-ui.gif
use the same router library everyone else uses with React?

oh wait, nevermind. They are all displaying the same email content anyway.
So just have the button apply a kind of filter to the emails you want to show.
>click on 'starred'
>only show starred emails
hope that makes sense?

Nope never gonna make it. Raj has phd from Mumbai university and was coding JavaScript before 10. Now go buy that rope and save your time.

Attached: IMG_1122.jpg (480x360, 16K)

I tried to do a cart functionality with cookies 2 weeks ago and I want to kill myself.
What is the least retarded way to implement a cart?
I went with cookies because I wanted the client to store all his shit while he wasn't doing any actual purchasing, but my system also has gifts and I made a fucking mess.
Pls help I'm retarded

Then why does the Computer Science carreer in my university demand 4 maths + probability?
Checkmate atheists.

Buut for software development I need to know math, right?

Is Bootstrap responsive? I am using Bulma.css but holy fuck is it fucking lackluster compared to what i have seen and used in bootstrap

what a dumb question

You dont want to move to other EU country?
Is not easy, the world is not an open border happy disney land...

>Is not easy, the world is not an open border happy disney land...
Should have been born in an EU country

Computer science generally includes a decent amount of theory. And certain math concepts lead into different areas of computer science, e.g. linear algebra for graphics and machine learning, probability and calc for runtime analysis.

You generally don't need most of that theory or most of those concepts for web dev.

Depends on the software you're developing; programming in, say, C++ with Qt doesn't inherently require more math than JS with HTML/CSS.

Im experimenting with node, and I'm writing a simple rest api just for the sake of it. Im using express + postgres + sequelize. I am mainly a .NET/Java programmer so JS just baffles me, hope you can help me with this really dumb question.

I have this method in the 'user' router, which properly returns all users in my db.
router.get('/', async (req,res) => {
try {
res.json( await user.findAll() );
} catch (error) {
console.log(error);
}
});

However I also want to put the role of the user in the result itself, to avoid making another call looking for it, so I modified the previous method to this:
router.get('/', async (req,res) => {
try {
let result = await user.findAll();
result.forEach(element => {
element.dataValues.role = role.findAll({where: {id: element.dataValues.id}});
});
res.json( {result} );
} catch (error) {
console.log(error);
}
});

However, rather than returning the role within each user, it returns something like this:
{
"result": [
{
"id": 1,
"name": "test",
"email": "[email protected]",
"password": "test",
"salt": "test",
"refRole": 1,
"role": {
"isFulfilled": false,
"isRejected": false
}
}
]
}

Rather than returning the role, it returns those two arguments fullfilled and rejected. I guess it is because of how JS handles asynchronous tasks. Can someone point me in the right direction?

Not familiar with those libraries, but judging by the names of the properties, what role.findAll() is returning is a promise, so you should do the same that you do in the line above and use await on the promise

I've put another await right before result.foreach; it still doesnt work.

JS looked promising but it is so damm confusing, tho

You need to put it before role.findAll, not before result.forEach
But in order to put await before role.findAll you need to turn the inner function async, which would make the forEach useless as you would return it before the computation started
tl;dr you need to refactor the code

>JS looked promising but it is so damm confusing, tho
You started with promises, which is arguably one of the more confusing parts of Javascript if you're not used to them, and then decided to throw in the mix ES6's async/await syntax for good measure, which further complicates things

I was born in an EU country

For the record, if you remove the .forEach and use a normal let-of, it should work (haven't tested it) since you'd still be inside an async function (the outer async function)
It wouldn't be optimized (you could arguably run the inner queries in parallel instead of sequentially) but it'd probably work

Putting an await before result.forEach doesn't do anything because result.forEach doesn't return a promise.

You need to make the forEach callback async, and put await before each role.findAll() assignment. ( was right, those are promises.)

However, this doesn't totally solve the problem. The real issue is that that forEach loop runs, creates a bunch of promises (which will resolve later), and then continues onto the next line of the program, res.json({result}). The issue with this is that the response is getting called before those promises resolve.

So, you need to wait for all those promises to resolve. You can do this with Promise.all(). Promise.all() takes a list of promises all running concurrently, and resolves when the last one of them resolves. You can create that list of promises by using the map method instead of forEach. So your result.forEach should look something like this:
await Promise.all(result.map(async element => {
element.datavalues.role = await role.findAll({where: { ... } });
}));

Only set it when the user's logged in

Tried this and it worked.
Also tried this and it worked, and this should supposedly be more efficient because of parallelism.

Thank you both anons, you really helped. But why the flying fuck is there two such radically different ways to code asyncronous tasks in JS? What kind of clusterfuck is this?

I'm going to investigate this some more, can you point out some tips/articles on this?

Thanks again

How do I make it so my website reacts to a certain radio input element being selected? I mean without a submit button or anything

with css or javascript.

>tfw fell for the bootstrap meme

I can't do it bros, i need it, i am so awful at CSS, i need bootstrap

Attached: 533215215.jpg (583x616, 27K)

>But why the flying fuck is there two such radically different ways to code asyncronous tasks in JS?
There isn't really, async/await is basically just syntactic sugar over promises
"async" makes functions implicitly return promises, "await" is used to hide .then(), .catch() and .finally() under the hood

>I'm going to investigate this some more, can you point out some tips/articles on this?
Learn promises
Then learn async/await
Then realize async/await are promises with a wig and makeup

>tfw made a minesweeper in js
I'm proud of myself, recursive funcion included!

Attached: 1554158834170.jpg (719x879, 50K)

literally every css framework comes with responsive classes, what's the point otherwise?
Also what's the problem with Bulma?

Nobody uses it so its harder to steal templates

The first one, a regular loop, works because you're making all those requests in sequence. That means that you make the first request, wait for it to finish, and then start the second request, wait, etc.

The second one, the forEach/map, makes all of the requests concurrently. It starts the first request, starts the second...; it starts all of them at once. Then, as each one finishes, it does the assignment to the object.

Both ways are valid. The second way is generally better when you're making requests that don't depend on the previous one. The first one if they do (e.g. you're making requests [A, B, C] where you need to get the result of A before you do B, and you need to get the result of C before you can do B.)

You should also consider learning more about SQL, relational DBs and Sequelize, because you might be able to do all this in a single request by using joins.

As for further reading about asynchronous JS, you should read up on Promises; this is a good explanation:
developers.google.com/web/fundamentals/primers/promises

Like said, async/await is basically just syntactic sugar on top of Promises, so learning those is helpful to understand what's happening when you await.

There's also the article "What Color is Your Function":
journal.stuffwithstuff.com/2015/02/01/what-color-is-your-function/

That might be too hard to understand for a beginner (I barely understood it the first time I read it), but you might glean something interesting from it.