/wdg/ - Web Development General

Learning about arrow functions and starting to use them everywhere and then complaining that their this-binding behavior is stupid and you hate it 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_atari_800.jpg (980x1170, 283K)

Other urls found in this thread:

vuejs.org/v2/guide/comparison.html#AngularJS-Angular-1
website.com/user/:id
socket.io/docs/client-api/#With-query-parameters
socket.io/
youtube.com/watch?v=txEqvqKzISY
github
codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript
dev.twitch.tv/docs/extensions/required-technical-background/#twitch-pubsub
dev.twitch.tv/docs/pubsub/
twitter.com/SFWRedditGifs

first for Vue

Attached: upM71pVR_400x400[1].jpg (400x400, 8K)

how the fuck do I want for 2 events from different listeners before calling back

Promises?

Learn about promises and promise.all() or learn about async await

How is Vue comparable to AngularJS?

vuejs.org/v2/guide/comparison.html#AngularJS-Angular-1

They both use templates and two way data binding. Vue is generally seen as much more simpler because it doesn't opt for services, factories, controllers, etc. Instead everything is pretty much component based with a dash of directives and mixins.

This, but you'd have to wrap event handlers in a promise.

something like


var promiseOne = new Promise(function(resolve, reject){
window.addEventListener('keydown', resolve);
})

var promiseTwo = new Promise(function(resolve, reject){
window.addEventListener('keyup', resolve);
})

Promise.all(promiseOne, promiseTwo)
.then(function(){
//do stuff
})

@ thisguy

If your goals is to make shekels and make your app more known. Should you go for IOS or Android (in the first place I mean). A regular app, not something that would do better on either OS.

How many of you have used angular material?

Attached: Screen Shot 2019-02-19 at 7.24.34 PM.png (245x194, 16K)

Make a web app so you can be platform agnostic.

Never done that but I heard a friend made an app that way. I don't talk much with him anymore.
Does it give good results in terms of freedom you have in the end with the app?
I guess most apps that looks like websites are made that way but I'd like somthing that looks more like an app that was made specifically for mobile.

Performance wise, web apps are alright for simple solutions. If you do care about performance and want develop a mobile only app I'd develop it in Flutter. I find it much faster than developing native Swift/Kotlin iOS/Android and you get a second platform for free.

I'm like minutes away from giving up and hiring someone to write this node script for me.

take a look folks, this is what a loser looks like

you have to be kidding me...
I'd do it for a lot of money tho

I have a deadline. I could do this shit in php in 5 seconds if php had websockets built in.

It's the Twitch guy.

What's the problem?

>I CoUlD Do tHiS ShIt iN PhP In 5 sEcOnDs iF PhP HaD WeBsOcKeTs bUiLt iN.

Trying to figure out how to send messages to specific connected users and how to open the socket for a specific user in the first place.

This is a different world, spongebob.

[cod]
io.on('connection', (socket) => {
socket.emit('message', 'never give up!');
})
[/code]

oh, so on connection you have the client send their id with a socket?

Can I send info to their page? Like if they connect to website.com/user/:id an in my app.get can I send that req.id to the page so it can connect under that id?

>and how to open the socket for a specific user in the first place.
The socket connection is initiated by the client and will remain open unless manually closed or until the clientside JS stops running, because the client navigates away or something.
On your server, the 'connection' event receives a newly connected socket as its argument.
io.on('connection', socket => {
console.log(`Socket ${socket.id} just connected`)
socket.emit("customGreeting","Hello new user.")
})

Now I guess the question is how you know that a socket belongs to a certain user.
Probably a good idea to google "socket io authentication" or such.

What might be interesting to know is, that when establishing the connection, you can just add query parameters to the initial socket handshake.
See: socket.io/docs/client-api/#With-query-parameters
So you might include some way of authentication and other things, like a token or whatever else you planned on using.

fullstack junior dev here. Thinking about writing only vanilla JS from now on in my work projects. Right now my company allows us to use Jquery because our sites are very front-end heavy (lots of complex animations and scroll events and other modern trends) and Jquery is just fantastic for knocking that stuff out quick and easily (sometimes).

When I first started as an intern I didn't even know JS lol and I still don't really, but I can write basic, vanilla JS, but because I'm still kinda slow and inexperienced I avoid it so I don't waste time but I'm getting to a point now where I'm fast enough with my markup (html, css) that I can spend a little bit extra time writing out the vanilla JS to do some of the more basic things.

Is there a way to open a socket with :id?

app.get('/user/:id', function(req, res) {
res.sendfile('index.html');
console.log(`User id is ${req.params.id}`);
});

No, you're using express, for serving routes. You need to also use a framework like socket.io to handle websocket communication.

There is a client and server dependency needed for this.

The problem is consistency. You should stick with their stack. Imagine a new dev comes in knowing only jQuery and you have xmlhttprequests everywhere.

I'm...is it possible to send a message from a route? Like in app.post can I emit or does everything have to be inside of io.on?

forgot link

socket.io/

Trying to read a file from req, ffmpeg crashes all teh fucking time, this module is meme-tier
try {
var ffImage = FMMPEG(file);
var ffChange = ffImage.clone();
var image = new Promise(function(resolve, reject) {
ffImage
.on("start", cmdline => {
console.log('FFMPEG: started "%s"', cmdline);
})
.on("error", reject)
.outputOptions(["-c:v libvpx"])
.pipe(
writable,
{ end: true }
);
writable.once("end", resolve);
});

var change = new Promise(function(resolve, reject) {
ffChange
.on("start", cmdline => {
console.log('FFMPEG: started "%s"', cmdline);
})
.on("error", reject)
.outputOptions(["-c:v libx264"])
.pipe(
writablechange,
{ end: true }
);

writablechange.once("end", resolve);
});
await Promise.all([image, change]).then(FileOK);
} catch (err) {
return FileError(err);
}

This is fine for writing trivial apps or static websites, but when you start working on large enterprise projects things like routers, and reusable components become a necessity. At that point you can either roll your own framework to handle those problems or adopt one of the actively maintained and vetted solutions that already exist.

see where I mentioned query parameters
It can take a moment to wrap your head around how the socket events work and how to properly send data back and forth.
3am here, so got to go, but I guess you will figure some things out with that.

Like the other user asked, you are using socket.io, right?

>is it possible to send a message from a route?
Think you need to look at it from a different angle. It's no longer a GET request to a route with a server response.
Instead you open a connection once, and then emit&receive pre-defeined events, that each includes some kind of payload.
Anyway good luck. Always interesting when someone is actually building something here.

>and then emit&receive pre-defeined events, that each includes some kind of payload.

Hmm, so let me explain how this is supposed to work so I can make sure that express/socket can do this.

I need routes. 1 for the broadcaster to go to that contains their id in the url. This opens a page and creates a socket with their ID. Another route is for POSTs that I am sending with AJAX. This POST contains a JWT that I verify and some transaction data including the broadcaster ID. I want to send a message about the transaction to the socket with that broadcaster's ID.

That's all it has to do. I was going to do a leaderboard and some database stuff in it, but I already have it in PHP from a previous extension so I'll just fire the data to another server.

I feel like this is potato easy, but my potato hasn't grown yet.

I think you're confused about REST vs websockets

With websockets (socket.io) As soon as a user enters the page a socket connection is made and you can send events from the server to the clients and vice versa.

With REST (GET,PUT,POST,DELETE -- this is what express does)
The client can GET things from the server, basically asking for something and the server returns it or POST / PUT things basically telling the server to update some value in its database that may alter future GETs.

in Express / REST the server cannot tell the client to do anything, all transactions rely on the client asking the server to get some thing or change something.

It sounds like you want to work with websockets which is two way communication.

If you get anything out of this post let it be

Express This stuff VVVVV

app.get('/user/:id', function(req, res) {
res.sendfile('index.html');
console.log(`User id is ${req.params.id}`);
});


has absolutely nothing to do with sockets at all.

In what situations is a SPA worth it over a simpler JS app? For something with complexity like Facebook and Gmail it makes sense, but where is the line?

Boutta take a .net assessment test for some recruiter

At least itll let me know how much i don't know

Anyone did something with ActivityPub ? How was the experience ?

I have socket stuff below it. I'm using socket io. I'm asking if what I want to do is possible.

I can't think of a use case where you would want to mix routes and socket handling. Can you better explain what it is you're trying to do that requires this?

>In what situations is a SPA worth it over a simpler JS app?

In situations where the application's state needs to be managed and passed between multiple components.

why is css selective about what it listens to?

I set a div id and call it with css using # , right?

yes

>why is css selective about what it listens to?

Attached: wat.jpg (764x551, 124K)

vuemastery will be giving all their courses for free between feb 22 and feb 24, is it worth learning for a beginner? is this knowledge transferable to react later?

Why do I see people who use web technologies calling themselves Software Engineer or being given that title by their companies?

Is a web developer someone who strictly deals with front-end development? Is a software engineer someone who can also deal with back-end/databases/etc?

I know html/css/js(+frameworks)/php/java/python... etc. Would I fall into software engineer, then? I'm a little confused.

Attached: 1267404831018.jpg (631x480, 30K)

I make a URL for streamers. URL is an overlay that does things for that specific streamer when people buy things in the extension on their twitch page.

So streamer needs to go to a URL without entering any info. So URL has to contain their Id. A socket has to open with the backend. Backend has to accept Ajax POST so the extension can send transaction data. That data needs to be send through socket to the broadcasters page.

>Why do I see people who use web technologies calling themselves Software Engineer or being given that title by their companies?

Because they make software? What exactly would you call people who create applications on the web and sell them as an SaaS?
It's not like any of these titles are protected (in the U.S. anyways)

why is this fred more friendly and attractive than dpt?

Because we are having so much fun over here

iOS for sure without a doubt. Higher revenue, less competition. As long as you have a beautiful icon and design you can pretty much get away with murder.

Because the title given doesn't matter and for the most part is informal. Web developer vaguely deals with front-end, but they can also deal with back-end and graphic design. You can be a web developer and only deal with one of the above 3, or you can deal with a mixture.
Typically however; devs who majority deal with graphic design call themselves designers, devs who deal with back-end are much more likely to call themselves software developers/engineers.

Call yourself whatever you want unless the region actually protects the titles. Could even call yourself a fucking code curator for all anyone cares, as long as you can prove to the company that you're valuable.

>spend entire day trying to write 2 files from 1 readable stream with no success
>just now found out passthrough exists

how do i identify embedded, cross-origin iframes from a top-level content script, in the context of a chrome extension? i know how to communicate between the various content scripts and the background page, but i don't know how to match the responses from the documents within embedded iframes, to the iframes as the top level script sees them. i want to do this so that i can position elements over them. is there some way to get the iframes position from within its document? i hope this isn't too confusing.

Is flutter a meme?

i don't think i've ever wrapped event listeners in promises. pretty cool. that would only work for a one-off detection though, right? you'd have to recreate the listeners after each 'all' resolution. also, one event occurring several times before the other might throw things off. probably not in the case of keyup/down though, nor with op's start events.

It's new so yes I guess. I'd suggest waiting a bit till it matures. Google seems to be moving towards putting first class support for Flutter in their new Fuchsia OS which seems to be an IOT/Mobile OS.

test

I'd like to try out Flutter but I really don't see the point in learning Dart for it desu.
It doesn't look too difficult but every language has its quirks and I already feel like having 4 different type inferred variable types is a new one (var, dynamic, final, const).
I'd say watch how it develops over the next few months and if Dart evolves to a language that's worth learning, Flutter will be a framework worth learning

To be honest you don't really need to learn Dart if you already know Java, C# or used ES6 classes. They're all pretty much the same.

Got any good books to recommend to learn data structures?

Yea you may be right. I just finished a talk on AngularDart and I might just try it out for a small app. Here's the talk btw: youtube.com/watch?v=txEqvqKzISY
Now I just gotta see if Sublime has good support for Dart

Because /dpt/ keeps arguing about Python and what does and doesn't count as a REAL programming language. Bunch of insecure elitists who think it's shameful to have an easy time while programming.

At least for me declarative rendering is such a great feature, that I use those libraries almost always.
You don't have to go all the way, with a router for multiple pages, state-management, and so on.
With Vue and React you can just add as much as you need. From a few elements that use declarative rendering to full blown progressive web SPAs.

Yes to both imo.
If you know one, you can get into the other fairly quickly, as it's mostly a matter of different syntax (if that's the right word here), but the core concepts stay mostly the same.

I guess if you want to make it repeatable, then a solution where you set flags for which event has been triggered might work.
You could use Object setters or Proxies for that.
Let all event handlers fire, whenever they are triggered, and only when the final missing flag is set to true will the callback run.
Then you can reset all the flags to false again and let the process repeat.

lol, someone explain this picture to me... How the fuck does mozzarella not know if their browser supports a certain DOM property?

those diversity hires are sure worth their wages lol

Attached: Screenshot 2019-02-20 at 12.35.55.png (1058x584, 120K)

Well it just pulls the data from here:
github
.com/mdn/browser-compat-data
So the writers of MDN most likely don't manage that repository?

Not everything under mozilla.org is written and maintained by an all-knowing Mr. Mozilla.

I didn't ask for explanations. I just told that they are a fucking failure...

They should hire one of those women coders to fill out that data on GitHub, to not embers themselves in their own documentation..

How do you read a JSON file using javascript?

I'm thinking of adding a blog to my personal site as a way of learning. The front end is built using vanilla JS at the moment. Is there a conventional way of doing this? I don't want something unwieldy like wordpress. I'm not sure how to go about this and whether to store the posts on a database and then return them or what

>How do you read a JSON file using javascript?
import contents from 'file.json',

but you need to setup a compiler to handle this. In typescript you just add an additional option to tsconfig

codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript

Is this method actually fine?

depends, do you want to bundle they JSON contents in your js file or do you want to fetch data from a JSON file on a server?

Just fetch

well yeah, then use the other example. I'd probably use axios, or the native fetch method.. or do it like in the example you linked.

It will work, but you can really use fetch instead of XMLHttpRequest.
Unless you need IE11 support

Attached: Screenshot from 2019-02-20 13-18-32.png (1309x463, 48K)

Also first time I've seen this

Attached: 1532416251369.png (841x34, 7K)

are you fetching from other people's servers? There are workarounds for this, you could for example...
>make a req to your won server
>your server makes the req to the other server and parses the data
>your server serves you the data

I looked at the Twitch dev docs for a bit.
Why aren't you using Twitch's PubSub system for extension?
dev.twitch.tv/docs/extensions/required-technical-background/#twitch-pubsub
dev.twitch.tv/docs/pubsub/
Looks exactly like what you want.

>origin 'null'
Are you loading an HTML file straight from disk here, without it being served from some kind of remote or local webserver?
Looks like the server you are requesting the JSON from doesn't like that.

Is there a better way to visualize and process periodically audio samples from WebAudio than Analyser? I am trying to find a way to call a function each, say, 1,024 samples, and do some fancy signal processing with them.

Fuck angular. They're at version 15 or something and yet 90% of the users use AngularJS.
That's it, I'm switching to something that lands me a job.

Do you use spaces or tabs for indentation?
which one is better and why?

Attached: 1550113033030.png (498x391, 102K)

tabs.
you can set your editor to render tabs as how many spaces you want without fucking your code...

whoever uses spaces is too retarded for programming.

Tabs unless you're working on Python.

but spaces are same length on every machine and editor while tabs are not

spaces for alignment so that it works at any tab width

Attached: botnet killer.png (610x195, 19K)

and what if I like 3 spaces instead of 2? but my coworker likes 2 instead of 3..

each time one of us changes it, the entire file gets refactored lol...

brainlet much?

This.

is an obvious skid

most people set up their ide + linter to auto fix indentation.

There are only 2 solution to this:
- use tabs
- enforce coding standard by forcing everyone to use for example 2 space as indentation..

Just press space as many times as you want or configure it so tab automatically inserts the correct amount of spaces for the right indentation level.
Or just configure your beautifier to convert to tabs/spaces on save, no matter what someone used to actually write the code.
Whether you ultimately press space or tab is completely irrelevant as long as the project is set up right and everyone uses the same linter/beautifier/prettier rules

suck cock

rather want top keep arguing and calling each other retards because someone uses tabs to indent their code?

Attached: 1532345367284.jpg (640x640, 52K)

Because I still have to send those events to my front-end.

is Laravel good enough for a big project like an intranet for a mining company?

laravel is the best php framework good for anything and everything

what about zend or symphony?

what about them?

I've heard they are better than Laravel