/wdg/ - Web Development General

Previous thread: >COMPLETE BEGINNERS GUIDE
github.com/kamranahmedse/developer-roadmap

>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 (independent of your browser choice)
freecodecamp.org
codecademy.com
hackr.io
theodinproject.com/

>Further resources
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
github.com/kamranahmedse/developer-roadmap - Frontend+Backend learner-path suggestions
youtube.com/watch?v=Zftx68K-1D4x

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

>PHP resources
pastebin.com/gfBPg24A

Attached: wdg_bullshit_on_the_internet.jpg (960x960, 244K)

Other urls found in this thread:

greasyfork.org/scripts/374238-Jow
a.pomf.cat/zvbofq.webm
jsfiddle.net/1go576pz/
developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows
babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining.html
twitter.com/NSFWRedditGif

First for jQuery.

I found some great Node.js/Express courses, the problem is they are from mid/late 2016, are they still relevant or did node/express change so much it wouldn't make sense using them?

Attached: 53985327523253.jpg (543x589, 54K)

Can you believe people still use that redundant shite

>jQuery
webtoddlers are angry when you use this to manipulate their artisnal DOM objects.

it's all I know how to use tbqh, I'm trying to get gud at vanilla

>tfw it's impossible to use javascript to fetch url status codes due to cross domain rules
>tfw javascript is shit

Why did you learn jQuery before vanilla?

React is a library.
Angular is a framework.

because I didn't know better, I didn't even know you could do vanilla to be honest

Attached: thumb.jpg (800x450, 34K)

it was like in 2010, react and angular didn't even existed back then

you heard the meme, now hang your head in SHAAAAME

easy there edgelord, everibody has to start somewhere, I pretty much teached myself php mysql and jQuery out of thin air

Yeah, that should be fine. I'm not sure exactly what's changed since then, but the core stuff should be the same.

I'd like to develop a front-end + back-end for a media server. The basic idea is too have a simple authentication system after which you're presented with a dashboard and a few buttons, some which prompt for further input before sending a request. The back-end then parses the input and executes shell scripts.

Should I use node.js + express + cookie-parser + cookie-session for this or are there any other good alternatives? I'm not going to fuck around with any front-end libraries, just basic HTML+CSS+JS, it's small enough. I don't really like web development and just want this out of the way.

>media server.
plex

I already have plex running. I just want to make my own server running alongside for extra functionality, such as adding youtube links to download via youtube-dl and then parse via music brainz and adding torrents to rtorrent. I could use a webui but want 1 neat package for everything.

any webapi developer here?
i want to send computer generated files through api requests, would that save me bandwith or is better just send files directly? excel files, but they can be as big as 100MB sometimes.

What's the best Frontend framework to embed into my node.js app? I need some dynamic values to change after an HTTP request that returns some json data, nothing more than that. Anything light-weight and efficient to do the trick? Jquery won't cut it because its a value inside a string.

can't you do a pull request to plex to integrate in their services?

if you could pull that off it would be used for million of users

I need to make a simple image slider.
And I don't know shit about how to make one.
pls help

just take one premade breh, there's tons of it, literally google js slider

>feel like jerking off
>go on /gif/
>find a random dump thread
>don't know which vid to jerk off to
>decide to make a random number generator to choose which image number I want
>make it range from all the images
>make it more elaborate and auto-scroll you to the number you rolled and point an arrow to it
>make it have a roll button that's transparent and follows you in the corner so I can randomly roll which image I want to fap to
>turn it into a userscript for future usage
>aw yeah looks great
>realize I no longer have a boner and don't wanna masturbate so get on anime basket weaving site to tell my autistic e-friends

Attached: vaejdi.webm (1366x768, 1.23M)

top kek

>user script accidentally shares the webm on Facebook

where can i host my website/projects as cheap as possible?
i was thinking about github and aws.

What build are you using? If its just php or plain html then x10freehosting or freehostingnoads. Aws doesnt allow hosting its for experimentation, but I think heroku does

You know that feeling user?
That's the /wedgie/ feeling.
It's a feeling that can surpass ANY kind of boner.
It's the feeling of your potential.

Embrace the /wedgie/, user.

Embrace it.

If you got userscripts installed test it out

greasyfork.org/scripts/374238-Jow Forums-image-roll-script/code/Jow Forums%20Image%20Roll%20Script.user.js

Vid of it
a.pomf.cat/zvbofq.webm

whats the fastest way (tools) i can make a very simple realtime poll app/website

Probably socket.io

trying to place a video as the background of my website's first "block" but am failing miserably

the video loads correctly and the top navbar does too but everything else in the site disappears




#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.5);
}

#bgvideo {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
min-height: 100%;
}


no matter where the fuck I place it the result is the same, any ideas?

Arrow functions are still fucking shit if you have to use the code elsewhere, really such an odd addiction, who the hell thought
>wow, writing function is so fucking tiresome, better change that

Attached: 397885665632624.jpg (753x504, 47K)

Is it because the video is position: fixed instead of absolute? Or is that intentional?

Lambda functions are for when you _don't_ need to reuse a function you dingus.

Yes, they're mainly intended for inline functions. And JavaScript does require a lot of inline functions, since it tends to involves a lot of callbacks.

Wrong.

It's because of browsers cross origin policy, nothing to do with javascript itself.

no u

>teached

Does Travis CI automatically install the dependencies listed in install_requires in setup.py? Can't ask any other general because I doubt they would know, and it's a Django package anyway.

Attached: 1517800453686.jpg (801x601, 159K)

how does an engineer recover and get back into engineering after wasting their life on webdev?

"engineering"? there's 100 subfields of engineering wtf are you talking about?

i'm talking about getting out of webdev

Get a job waiting tables

superpower by 2020 you bitch lasagna

>"after wasting their life on webdev" he posts, in Web Development General
You just made a VERY big mistake, son.......*snarls like a cowboy*

*starts twerking*

Just wondering, how fast/slow is current JS compared to other languages?

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

>People still using bootstrap instead of just using Grid

For fuck sake

Attached: 325352325.jpg (700x400, 116K)

*taught
I realized I fucked up like a mintue after I posted it

It just werks

I honestly don't understand grid-auto-rows with multiple values in CSS. I've went through the whole CSS grid guide at MDN and this is the only thing I can't grasp because it isn't explained.

See this as example:
jsfiddle.net/1go576pz/

What's grid-auto-rows actually doing here? How multiple values work?

TL;DR: What does this mean?
grid-auto-rows: 100px 20px;

Actually a good question, lets say we create an identical copy of Discord or Visual code in native C++ or another language know for its "fastness", how much better would they perform than their JS counterparts, would the users even notice or care about a difference

Attached: 3529238327523.jpg (1079x1280, 141K)

developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows

Does anyone here know websocket/HTML5?

There are new languages that are comin in to fight the old guard like RUST is called the succesor of C++ or Node is a better PHP etc. etc. but what about JS, is there anything that will dethrone it or is it impossible for now?

Web Assambly - memeing but who knows-

Don't know shit about Web assembly but heard somewhere that its actually used WITH JS instead of replacing it.

>Don't know shit about Web assembly
same

are you sure

Do you guys use a lot of npms in your Node projects? I see people using additional packages for every small piece of code instead of creating their own.

>ironically thinking because he uses LISP, he's one to speak.

This is why millennial trash never get hired.

>implying there won't be a fucking turboautist who shats himself over worse font rendering of the c++ version

The problem is that developers can't agree on which language browsers should support.
Google wanted Dart to be the alternative to JavaScript, but other companies refused and no one implemented it in their browsers.
To make it viable, Google, Mozilla, Apple, Microsoft and possible Opera would have to reach an agreement, and none of them are interested in becoming dependent of someone else's property technology.

Is there a way to write this better?

Attached: 2018-11-12-022404_1920x1027_scrot.png (1210x350, 54K)

With this in your Babel config
babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining.html
you can do:
const branchId = this.employment?.branch?.id;

maybe a simple if instead of a ternary expression would suffice, since you practically don't have an else.
or branchId = this.employment.branch || null; if the id will never be 0

Also if you're using typescript and know that the property is set you can do:
const branchId = this.employment!.branch!.id

c# has this since the last versions, it's the absolute best.

Well first, web assembly isn't a language, it's a common bytecode that many languages will be able to compile to.

As of now, you can't just use wasm alone, there's no way to manipulate the DOM within webassembly. You have to have at least some layer of JS to do that stuff.

But webassembly isn't really meant to be used for that stuff anyway, it's more meant for more intensive computing like for in-browser games and stuff like that.

I am learning Node.Js now as my first back-end "language" and i am scared if it goes to shit someday and i will have to learn new ones (i will probably but i'd like it not in fear of my preferred one dying) , how close are the back-end related technologies? Can you jump between them or are most completly different?

Attached: 823121853782513.gif (460x258, 1.64M)

I don't think Node.js is going anywhere at this point unlike RoR and Spring. I will say though that since Node.js runs as a single threaded event loop, it's not going to be enthusiastically picked up by enterprises that care about stability.

Arent they working on multi-threading? Node is a fairly young thing, its just developing

New to TypeScript. totalUnits in the vals object literal has an initial value of 0. TS recognises it as a number. What am I doing wrong here, why is it thinking it is a string all of a sudden.

Btw I deleted the (vals['totalUnits'] as Number) part so no need to mention that.

Attached: nub.png (988x145, 19K)

Well it's JavaScript and that isn't going anywhere anytime soon. Node can come and go but JS is an integral part of browsers, part of the big three of languages (the others being HTML and CSS).

Only use square brackets for variable named properties. Use vals.totalUnits instead. Also it would pay showing us the declaration of "vals" and assigned types.

Here's the relevant code.

vals.totalUnits on line 90 still brings up the same error. I have a bunch of errors and am not sure how to go about fixing them, would much appreciate a guiding review of anything that sticks out.

Attached: nub2.png (1190x326, 70K)

:(

Attached: nub3.png (738x87, 15K)

Because HTMLInputElements value is a string, and a number plus a string will create another string and not add them.
Convert your value to a number first.

one is a number the other a string

of course you can do i < (form...

>Convert your value to a number first.
Yo I'm just using parseFloat cos that and parseInt are the only ways I know how to convert a value to a number right now.

Attached: nub4.png (733x150, 22K)

You're now trying to parsing your HTMLInputElement as a number instead of its value.

Why do people prefer Python to JS when it comes to writing scripts or web scrapping?

Uh huh. Thank you for your patience.

I have set the type of the Form.getInputElements()['multiply_num'] as any, getting no error message.

I've been drinking, thinking is tough for me right now.

News update, I've written parseFloat((Form.getInputElements()['multiply_num'] as HTMLInputElement).value) and it's beginning to connect in the brain.

Cheers again for the assistance, now vals.totalUnits on line 90 is a number but the error message says type string is not assignable to type number, why does it think I'm attempting to turn it into a string

Attached: nub5.png (525x44, 8K)

>Cheers again for the assistance, now vals.totalUnits on line 90 is a number but the error message says type string is not assignable to type number, why does it think I'm attempting to turn it into a string
post the line

Essentially the same line 90 as in image posted except with dot notation instead of bracket notation

You should probably use Number() instead of parseFloat()

Done. Also vals.drinks is now Array() instead of []

Does ayone use Laravel here? Is it possible to target the whole Laravel app to only use a specific schema in a database that has multiple schemas, where those other schemas are used by totally different apps?

Nah, you can keep the square brackets notation for initialising arrays. Likewise for strings and objects.
I use Number & String for it's prototypes or parsing in values (Array.from(), Object.keys, String(Val), Number(val), Boolean(val), etc).

[] implicitly has an 'any' type, TS says. With Array() no such notice appears.

Just have to proclaim my love for TS (TypeScript) by the way. I love how it forces me to check my code, since honestly my preferred approach to writing code is to write 'around' it first (i.e. test first, write afterwards) and TS works into that whole approach very well. It builds on the scaffolding around the code you write. Absolute godsend, and in case anybody is looking to make their JavaScript code more maintainable and intuitive to themselves and others, TypeScript is definitely the way to go.

One last TS question. 'Object.values' by itself brings up an error, saying "Property 'values' does not exist on type 'ObjectConstructor'". So I have re-set the type of 'Object' as 'any' according to advice online.

Is there any other way of solving this issue with Object.values, and, I assume, other Object methods like .keys and .entries? Because from what I understand, setting any as a type is something to avoid (if possible) and goes against the purpose of TS.

And one last general question. I read the term 'cast' a lot. Does the verb 'to cast' in the context of programming mean to assign a type to data?

Attached: object.png (916x99, 17K)

That's why you either type the object with Array or CustomType[]. I wouldn't create your array with "Array()" because TS probably thinks is an "Array" type and not anything else meaning you can insert anything in to the array and no type checking would occur because it's still an array. In your case the type would be:

type Vals = {
date: string,
drinks: Array,
totalUnits: number,
}

const vals: Vals = { ... }

Probably need to update your tsconfig target with es2018

Thanks for the info, I'll refer back to it when I am more familiar with TS.

Thanks for the heads up.

Holy shit you guys, Netflix posted some episodes of Jeopardy. I was mindlessly watching some and not doing too well with my answers.

The $1000 answer: What does PDF stand for?
> Contestant 1 buzzes in and then can't think of what to say
> Contestant 2 (confidently): "post script document"

I nearly spat my tea out, literally who doesn't know what a PDfFis? And I felt like a brainlet for most of watching that episode.

Attached: readinglist.jpg (1081x1060, 203K)

Did you know that using arrow functions inside classes does not make objects created from said classes inherit them using prototypes, instead they just create a new function altogether? I guess this isn't such a big deal on most cases but why would transpilers do this?

Attached: sd.png (1083x515, 119K)

You need to bind the "getNameAndColor" to the class instance in order to be able to use it outside the class.

Arrow functions have no context of "this" so it's bound to the parent context. For example we used to do something like this:

var self = this;
setTimeout(function() {
this.clearTimeout();
});


Now we can do the following:

setTimeout(() => {
this.clearTimeout();
});


So in the constructor you can:

this.getNameAndColor = this.getNameAndColor.bind(this);


or just use arrow functions.