/wdg/ - Web Development General

Previous: Alright seriously, should we even have this general?
If only a handful of posters drop out, the thread even gets archived during the week and weekends are even slower.

>Beginner Roadmap and Overview
github.com/kamranahmedse/developer-roadmap (don't be overwhelmed, ignore the later parts and go step-by-step)
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 (ignore sponsored stuff, look at upvotes)
learnxinyminutes.com - quick reference sheets for the syntax of many different languages
pastebin.com/gfBPg24A - Collection of PHP links.

>Need help with some HTML, CSS or JS?
jsfiddle.net - create an example here and post the link

Attached: wdg_n.png (1280x720, 502K)

Other urls found in this thread:

github.com/P1xt/p1xt-guides/blob/master/job-ready-javascript-edition-3.0.md
github.com/P1xt/p1xt-guides/blob/master/deprecated/job-ready-javascript-edition-3.0.md
github.com/P1xt/p1xt-guides
github.com/P1xt/p1xt-guides/tree/master/deprecated
learnenough.com/javascript-tutorial/hello_world
jsonplaceholder.typicode.com/
twitter.com/SFWRedditImages

Cheer up user. It's still early in some places.

Finally, I don't have to scroll through the rest of Jow Forums anymore.

What's a good source about Node design patterns? I've got most of the things figured out, but I think I can give my code a little bit more order. I've been putting my functions in objects and connecting them with modules and so on. Haven't used the object oriented approach with Classes, because they compile down to two connected objects anyway. Does one even do an ORM approach in Node? Last time I did it was with PHP and it almost made me throw my PC out of the window.

Blazor!

I don't know node but I would say pick a popular framework with strict conventions.

Whenever I have to work with simpler frameworks (either in PHP or Python) I always find myself thinking about organization as the code grows. It drains one energy which would be better spent working on the product itself.

so I've made some progress on my rss aggregator, random font/theme
acktic(dot)github(dot)io

Attached: 2466732867234.png (1366x768, 890K)

I had previously been working on PHP projects, but it hate the language itself. What do you think would be a better idea going with node.js or django?
t. a 'decent' software programmer

I'd say go with flask in python and express for node.

Do you get that feeling that a lot of stuff in programming is unnecessary over complicated ?

I just trying to install composer and there is so much of everything. Locally, globally, where do i place it, where do i install libraries and so on...
Do i need to install developer mode ? there is all these options on every corner I don't know what it is and do i need them or not.
Why can't it be as simple as pressing few buttons?

Does anyone know a way in vanilla js to select all current sounds you have going, and more specifically adjusting their volume when you create them as an object like
var track1 = new Audio('mysong.mp3');

asp or node

I'm at a shitty front end job and I've been learning react outside of work to find a new job in the city. My issue is that it feels like when I watch youtube videos etc, everyone is teaching/using react differently.

I'm able to make an API call display all the information and sort it out on a page, but I just feel like I don't understand what react is doing under the hood. There is a plethora of videos aimed at total beginners, and quite a few very advanced videos, but the middle ground seems like a barren wasteland.

Am I just dumb or am I missing some resources to help me progress and not form bad habits?

put them into an array or an object and loop through it?

How do you guys deal with session hijacking?
I see a lot of libraries and CMSes not even setting a token for double-checking and just assuming the session id is safe.
Sure it's going to be hard to find a valid identifier for a small site, but a bigger site with many visitors will make it a lot easier to catch on a logged session by bruteforcing.
Those suggesting to also check the IP are dumbasses.
Perhaps using both a token and the user agent might be the safest bet?

What's the industry standard approved way to secure session login and why don't they post the definitve example on OWASP instead of just stating the issue?

Audio has a `volume` property. You can make a collection of Audio objects and add/remove them on `playing` / `ended` |`pause` to keep track of currently playing audio.

It's for a bullet hell game, so I want to control all the bullets and hits and explosions and such, which I generate with such functions:

function playBulletSound() {

var sound = new Audio('bullet.wav');
sound.play();

}

and the problem is that when I try to select all sounds, I just get an empty object. Btw do I need to collect garbage when I create sounds this way?

Alright, how do I do that? How do I make the collection of Audio objects?

Or the other way I can think of doing this is just getting a global volume variable volume and just playing all the sounds with that volume variable as an argument to all the sound generating functions.

heh
let sounds = [];
sounds.push(sound);

Hmmm, might work. Thanks.

create an object and put references to the sounds, then you can loop through the object props for of loops...

var sounds = {};

function playBulletSound(id) {

sounds[id] = new Audio('bullet.wav');
sound.play();

}

*sounds[id].play()

or you could do it like this, the ids will be integers obviously and you won't have control over them

That sounds like the array will just grow bigger and bigger and I don't have a good way of cleaning it.
I like more, but I don't like having to put all the sounds in an array in every redraw of the screen, but meh, could be worse.

You want to install composer globally.

You would only want to install it locally if you only wanted to use it for a specific project, and then you would install it locally in that project folder.

Anyone?

Nah when I think about it I'll just pass a volume argument and adjust the volume when I play it.

How do these websites make SEO dynamic search results? For example if you search for '3657 usd to eur' you get result pic related. Can it be that they have a separate thousands of pages for every single increment of usd? 3658, 3659, etc?
I always see these kind of pages where somehow they implement their own search function of the site to google search. Especially on shops like ebay, etc. When you press on the result on google search page it brings to eg. Ebay search results

How does these things work? Is there a specific term for it? Any links/readings?

Attached: Screenshot_20190629-152719.png (1440x2560, 427K)

Is roadtoreact book any good?

>I don't have a good way of cleaning it.
reassign it to an empty object? you can use the delete keyword to delete singular properties...

In javascript, Arrays are objects as well, just with some convenience functions.

>want to make a side project
>people suggest solving some problem in your life
>do {
>i find a problem i want to solve, start thinking of how to build a webapp to solve it
>google the problem
>multiple websites/apps already exist
>} while (true)

Attached: download.jpg (279x181, 8K)

Thanks, but I'll just go like this . Now when I think about it it seems silly to pass all the sounds to an object, when I can just adjust the volume when I create them, and just change the volume to the background music. It would be much less of a hassle.

fuck I need help!!!!!!!!!!!!!!!!!!!!!!!!!!!
the coolest guide on what to learn for javascript i had bookmarked has 404'd, it was so perfect!

I have don't know the first thing about web archive stuff. Is there anyway like that I can get the info back?

github.com/P1xt/p1xt-guides/blob/master/job-ready-javascript-edition-3.0.md

Attached: 1372216414653.gif (360x359, 564K)

Attached: Capture.png (698x277, 29K)

'illegal' illegal or just offensive?

Something like 'iwillpayyou50ktoassassinatethepresidentoftheunitedstates.info' ?

what kind of phrase did you come up with that you are worried would be worthy of prosecution?

archive.org wayback machine
just put the url there, if you're lucky it will still be there

btw give url

doesn't work either my man

oh wait yes it does! THANK YOU!!!
github.com/P1xt/p1xt-guides/blob/master/deprecated/job-ready-javascript-edition-3.0.md

yeah guy just moved it

you aren't even trying

just go tot hat guys github page
github.com/P1xt/p1xt-guides
github.com/P1xt/p1xt-guides/tree/master/deprecated
github.com/P1xt/p1xt-guides/blob/master/deprecated/job-ready-javascript-edition-3.0.md

how the fuck do you manage to find other stuff?

Ok now the sounds work fine, but the volume adjustment isn't linear. Does anyone know if it's squared or logarithmic? I heard that often sound volume adjustment is logarithmic.

i live in Japan it's late as fuck i guess, i went to his page and saw something similar but it wasn't the same so I freaked

learnenough.com/javascript-tutorial/hello_world

this is cool, ty for linking

if you wanna understand what's going on under the hood, i suggest learning javascript (without react) and learn how to make an XMLHttpRequest, make the request and parse the json yourself.
if you want an api for learning this, id suggest jsonplaceholder.typicode.com/

what does composition over inheritance actually mean? or more pointedly, what is composition really?

Is this bad coding?

$scope.datoXslx = $scope.results.map(item =>({

packagos : Object.assign({},item.packages.map(valors => valors.parcel_id))


How can I get the same result but in a cleaner way?

inheritance is A extends B
composition is A includes B as a field

How do i hide files in atom ?
I want to hide .htaccess for a start, i added the names in "Ignored Names" box but they still appear.

Attached: Capture.png (1256x274, 37K)

\.htaccess ?

Am I supposed to put a fire-and-forget api call into the redux "action creator" or somewhere else?

I've got this:
export const publishMessage = message => ({
type: 'PUBLISH_MESSAGE',
payload: {
message
}
});

and I'd like it to, you know.. send that off message to the back end, and I don't care what the response is. What's the way to do this?

Either
Redux saga
or
Redux thunk
There is probably more options but those are the ones I've used.
I switched from thunks to sagas

is it possible to do webdev on linux exclusively? i just hate windows so much and i cant afford apple computer
anyone here with some experience?

...why wouldn’t it be?

the majority of servers do in fact work with linux, so some times it's the right thing to do

i was just thinking about possibility that some important webdev software wouldnt work on linux or has bad support or similar reason, dont know really thats why i wanted to hear from you guys

well theorically speaking Net. core works on windows, idk if they have anything of that working on linux

Visual Studio is windows only (VS code is cross platform)

What's the best IDE?

Netbeans some say

>What's the best IDE?
WEB
STORM

IDE for what specifically?

Otherwise use vscode if you need an editor.

>look up where junior positions are
>they're all everywhere besides where I live despite being in a high pop, modern area
yeah, ok nigga

Attached: 1560446593402.jpg (286x290, 10K)

Help a brainlet out, this is fucking nonsense. Pic related.


Name:


protected void Submit_Click(object sender, EventArgs e)
{
var a = Request.Form["nameField"];
Response.Write("Hello " + a + "
");
}

Attached: WHAT THE FUCK.png (538x167, 10K)

Removing runat="server" from the fixed the issue.

Attached: shrug.png (560x407, 20K)

hey /wdg/, I've set up a basic resume website for myself on my Pi and I have my IP forwarded by my router. I want to set up a domain name; how do I do this? I presume I just go to any old DNS registrar website and pick one I want, then in the purchase say "map this to this IP address". In that case, which is the cheapest DNS registrar?

Pls help a brainlet understand how is defined?
How do new line characters work?
Does stripping/sanitizing it before entry into a DB mangle newlines??

Is it too late for me to start learning if I want to make a career change?

Learning past 25 is being delusional

I am 27, I really disagree. Shit is cash.

No one?

Dont listen to this fag i started at 25 with a paid internship now with 27 i already switched 3 companies every time with a raise and the latest one is a huge multinational, theres a huge lack of non shitty developers in the market, everyone wants to be one but not everyone is smart enough

I'd also say that you dont even have to be good just by being mediocre/average you're granted a position, theres like one good developer every 1000 average devs so most jobs are taken by averages dudes

As a general rule, you want the pristine data inside your database. Imagine doing a search but some of the characters are htmlencoded and your butt starts to hurt.
The textarea sends the unencoded text to the server, including line breaks.
If you just need plaintext you should save just that.

Or are you expecting html content? If so use a html sanitization library that gives you the option to strip out all the not allowed shit and you're good to go.

Atom editor

Is there any way to drag-to-reorder files and folders in the tree view?

I would love to have the ability to drag-to-reorder files and folders in the tree-view into a custom order that makes sense for the project, rather than defaulting to alphabetical order.

doesnt work either.

aren't session IDs unique enough to counter that?
I'd imagine, that if you have IDs that it's pretty much impossible to randomly generate one, that's currently active.
What does a session ID usually look like?

react developer interview next week, what concepts should i deepen?

A session id looks like this:
qu4o7a8fjmulsjand5k1riirm4

The problem is that if you run a service website with lots of traffic, that remote chance might not be so remote after all.
There's also the possibility that the session leaked through sniffing if not using https, or a middleman attack via malware.

You could encrypt the session ID and user agent with a server-side private key. This would be slow though.

How easy is it to get a job in Web Dev? How much experience would I need?
I know C, C++ and C# and did some basic tutorials on HTML, CSS and Javascript and found out that I enjoy web developing way more and would like to switch now

Would doing a couple of projects to show I know what I am doing be sufficient to start applying for jobs?

Knowing a JS framework (angular,react,vue) is a must nowadays for web dev. once you know it and have made a few projects on it, it's just a matter of time until you arrive on a job.

Yes
And a lot of the time the official installation instructions for popular os software are just completely wrong or misleading and you end up having to waste two hours on stackoverflow
Docker, MySQL etc.

chartdata: {
labels: [],
datasets: [
{
label: "",
backgroundColor: "#f87979",
data: [],
showLine: false
}
]
},
options: {
responsive: true
}

I want to push data into data array, I tried to this chartdata.datasets.data.push(item)

but that doesn't work, any know what to do?

datasets is an array.

i tried this as well chartdata.datasets[index].data[index].push(item) but doesn't work

This? chartdata.datasets[0].data.push(item)

it's correct you need to specify the index for dataset, because you want to access the item at a specific position.
For the data property on the other hand you just want to push a new item.
So it would be
chartdata.datasets[index].data.push(item)


Really read up on that though before you continue with other stuff, since it's so fundamental to everything else.

based and codepilled, it worked thanks user

I will thanks for the explanation as well

Stupid question, but how's the 'correct' way to indent something like this if I don't want to write it in just one line?

const btn = document.querySelector(`[value="${e.key}"]`) || document.querySelector(`[data-kbd="${e.key}"]`);

There is no correct way to indent anything no matter what the other aspies here screech. It all depends on what works for you/who you work with/who you work for I would...
const btn = document.querySelector(`[value="${e.key}"]`) ||
document.querySelector(`[data-kbd="${e.key}"]`);

this, based on personal preferance I would indent before or after the ||

That's why I quoted 'correct'.

I usually do it like
const btn = document.querySelector(`[value="${e.key}"]`)
|| document.querySelector(`[data-kbd="${e.key}"]`);

To keep consistent with how I write the ternary operator
const btn = (somelargecode)
? document.querySelector(`[data-kbd="${e.key}"]`)
: document.querySelector(`[value="${e.key}"]`);

Yeah that's perfectly fine I generally like operators at the end of the line (like I wrote it) but if it makes more sense for you and falls in line with what you usually like then go for it.

My general rule of thumb is whatever makes the other idiots in the office not come ask me more questions.

The real question is why you're selecting what should probably be a known button. I don't really see why you wouldn't know the button ahead of time.

It's a function to deal with keyboard input.
On keypress it selects the appropriate button and clicks it.

That's even worse. Instead of click the button, why not just call the right function?

For a ghetto example:
function onEscapePress() {
console.log('you pressed escape');
}

const keyToCallbackMapping = {
esc: onEscapePress,
};

document.body.addEventListener('keydown', dispatch);

function dispatch(e) {
keyToCallbackMapping[e.key](e);
}

Why would I do that if I want to trigger on onclick event handler?

Because you would have the onclick handler also point to onEscapePress. You wouldn't need to look up the button at all. I didn't include it in that example.

function onEscapePress() {
console.log('you pressed escape');
}

const keyToCallbackMapping = {
esc: onEscapePress,
};

document.body.addEventListener('keydown', dispatch);

function dispatch(e) {
keyToCallbackMapping[e.key](e);
}

escapeButton.addEventListener('click', onEscapePress);

Is the "all express modules should be no more than 20 lines of code" a thing people actually do?