/wdg/ - Web Development General

socket.io is a bloated ws wrapper. Just use ws.

Do you mean ws, a WebSocket client/server library, or WS, the abbreviation for native WebSocket?

To answer your question, it depends on what you're doing. If it's just some hobby stuff at home, I would highly recommend you go with native WebSocket. Purely as an exercise to get a better grasp of the fundamentals. For something larger, you'd save yourself a lot of grief (unless you know precisely what you're doing) by simply picking something ready-made.

steamcommunity.com/app/814380/discussions/

On this page there is an AJAX page navigation - that is when you click a forum page it reloads the DOM/frame/whatever it is called. Thing is - be it userscript via 8Moneky or an extension it would would only run once if I want to affect the elements inside that dynamic DOM.

Where should I look for to hook up to that event that updates the frame? How can I even catch it?

working on a web application based on springboot. Dependency injection is not too magical to me now but it does makes me think how stupidly hard it is to implement.

How can I make it so a passport token is optional and you can instead just send the key and secret?

Like you can either pass it in the body of the request or pass the token in the Authentication header

>it would would only run once
The event? Your script?

My script yeah.
Like page load, it executes, I do changes to the DOM tree and that's it. If I be clicking pages to do ajax loading it wont execute anymore for the changed elements.

My question, I guess, how would I hook up to that AJAX event? Like, what options?
I know I could just subscribe to `observer` and every time it is triggered I can enforce my script but that's retarded because it can be triggered 999 times per second for every smallest thing like mouse hover.

well look up how to intercept xmlhttprequests and then apply your changes afterwards with a slight delay to allow the page to update.

How can I inject custom CSS into the page as a global CSS i.e. it would apply just like native page css

Is Codeacademy Pro worth it?

codecademy.com/pro/membership

>it wont execute anymore for the changed elements
Probably because they're being replaced? It's like you're trying to dereference a freed pointer.

Verify that the handles you're using, actually refer to something in the DOM with something like:

// Testing instanceof first prevents it from throwing type errors
if (!(elm instanceof Element) || !elm.isConnected)
// Renew handles
else
// Do shit

Socket.IO is really easy to start with.

Stylish

What are good places to get design inspiration?

Yeah, but I need to inject some basic CSS by myself via my script, cant use stylish

The sea. A rural town in Southern Mexico.

no, i think is right
I need to somehow get an event dispatch that new dom tree is populated and then re-run function again for the newdata

codepen if you're looking for layout and animation type things. Otherwise, just look around at Magazine layouts and re-create them using css grid.

Thanks. It's a midsized business, so looking to get inspired for layouts that have product pages and a lot of customer service type stuff.

I've actually done that for this page. It's a really ugly hack, but it's quite easy to do:

const css_elm = document.createElement("style");

// Second argument is line number and must be incremented if using more lines
css_elm.sheet.insertRule("CSS goes here", 0);

document.head.appendChild(css_elm);

in what form is "CSS goes here"
raw CSS?
directive-separated?

You could write your own observer script that fires at set intervals as opposed to several hundred times a second.

(function() {
function _observer() {
if (newValue !== oldValue)
document.dispatchEvent(new Event("stuffChanged"));

setTimeout(_observer, 16);
}

_observer();
}());

Just raw CSS. We're literally just inserting a string into a element.

How do I even program in php? Like where? Is there an IDE?
How do I test something I write?
Is there some tools to help me like drag and drop elements instead of writing everything by hand?

Attached: 1556812872662.png (442x458, 207K)

Hi I am getting into webdevelopment, what is a good wireframing software for linux, the type of software that you can use to make a layout for a website's ui?

Attached: 1488958837118.jpg (233x267, 46K)

Why do people fucking push their client (so the front-end) folder with their backend one when deploying a ready app, dont you just build the files your react/vue/angular/whatever made throw it inside a folder in the server root and just make the server use those files? and then you can delete that client folder

>How do I even program in php?
You write PHP code to a file, preferably one with a .php extension.

>Like where? Is there an IDE?
Any IDE or text editor will work. Use Notepad++.

>How do I test something I write?
Host a local web server with PHP capabilities. Use WAMP if you're new to web servers.

>Is there some tools to help me like drag and drop elements instead of writing everything by hand?
Possibly, but you shouldn't use them. Actual coding isn't like Scratch.

>You could write your own observer script that fires at set intervals as opposed to several hundred times a second.
Super-ugly.
I'm a hack but I have dignity.

>Just raw CSS. We're literally just inserting a string into a element.
Alright, cool, thank

>software that you can use to make a layout for a website's ui
A lot of people use Photoshop for that (or GIMP if you're a poorfag/freetard). Personally I more or less know what my code is going to look like in my head so I usually freestyle it.

I thought Go Was supposed to be the future? How many years till google scraps it, i'd give it like 3, maybe 5

Attached: 23525325.jpg (921x207, 31K)

but for someone else like a client how do you visualize options for them?just show them other active websites of a different variety and have them say what they like? Also i have photoshop, I fucking much prefer gimp for anything like this?

>Super-ugly.
Oh that is nothing. You'd have a heart attack if you only knew what monstrosities lurk underneath the shiny surfaces of APIs and frameworks.

MutationObserver could be another solution.
Instead of intercepting requests just listen for DOM events.
developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Then when something happens, debounce your own action for like half a second and apply your changes.
example?

>MutationObserver could be another solution.
That's precisely what he wanted to avoid using, since it absolutely kills performance.

so i have a user table which contains username, email and password. i want to add created_by, phone_number and registered_by field. should i create new table with relation or should i add them in same table?

Are you going to access any of those fields separately? If so, they should probably be in their own table. If not, save yourself the pain of having to write mile-long join statements.

>since it absolutely kills performance
how so?
The only time his code would run is when new threads get rendered into the DOM after clicking a page number, right?

thanks user for reply
> mile-long join statements.
well actually i am using laravel so no issue with that.
> access any of those fields separately
ok i am showing all the registered users in a table does that count?

>MutationObserver could be another solution.
>[Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event handler as 'passive' to make the page more responsive. See

meh

Attached: 1532460779058.png (421x500, 202K)

which course are u interested in

Use tampermonkey to make a little script

lol, i remember being your seat. WHAT THE FUCK >>>IS

I wanna get into backend right now so C# or Java would be neat. Then jump into python or ruby.

Haven't taken C nor Java so can't give an opinion on those, but their Python course is actually very good.

Allright I'll give it a shot to Python then. Thanks user.

Am I retarded?
steamcommunity.com/groups/archiasf/discussions/1/

Attached: 1556137108189.png (842x410, 24K)

Could you explain a little better what you want to achieve..?

right now I'm trying to understand why the fuck jquery fails when it should be working

Attached: 54623543254325423.png (842x410, 19K)

Attached: 2019-05-06_21-50.png (1375x439, 69K)

???
learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-item-using-class-or-id/

yeah what the actual fuck

Your complaint is that JQuery isn't finding the thing you're after when you think it should. Well, your
document.getElementsByClassName is incorrect. How do I know? Because you can't use a dot/fullstop in that getter unless your classname literally has a dot in it. Even though it's incorrect, it returned an array. An empty array. However, you didn't know this because you didn't check the contents of the array.

The likilhood is that there is no .form_topics_container at all. Use the newer way of finding things to see for yourself:
document.querySelector('.form_topics_container')

This is a combination of JQuery's convenient CSS selector and the core JS element finding functions. It's nicer too.

I mean yes, the dot was wrong if you remove it - everything works.

But thejQuery query was correct and it failed. I'm trying to understand why.

Worked for him:

Look at Shopify templates then, that should pretty much help you.

How do I learn React and Redox fast. I need it for the front-end of my application.

What's the simplest way to contain text within a triangle?

Buy a template from someone and customize it a bit, they wont notice nor will they care, as long as it looks good and works. Just make sure that it's compatible with mobile screens.

How do I do login with MVC?
model is user, controller is user?, view is login?
model is user, controller is ?
i dun get it.
login as a model makes no sense, too

Create a LoginUser model with username and password.
Create a LoginController that handles the model on POST.
Create a View with a login form that is returned by the GET method of the controller.

>pastebin.com/gfBPg24A - Collection of PHP links. (Maybe someone should check which of these are still relevant)
This pastebin was from PHP Guy, a namefag who hung around here for a while. He only made the list less than a year ago, so I imagine that stuff is pretty much still relevant. (PHP doesn't move that fast.)

Although he did complain that I didn't include the most updated version when refactoring the OP, but then he never got around to giving me the new link.

i've got a question so i know c++, python and asembly for x86 and the basics of html so is it worth to move to web dev or i should rather stay in game dev/ software dev?

fuck off we're full

Using plain websockets isn't that much harder than just using Socket.io. Here's an example chat server using uWebSockets in Node.js:
const wss = new WebSocket.Server({ port: 8080 });
let currentId = 0; // unique id for messages, added in before they're broadcast

wss.on('connection', function connection(ws) { // when the websocket server gets a new connection
ws.on('message', function incoming(data) { // register a handler for when that new client pings us
let message = JSON.parse(data);
message.id = currentId;
currentId++;
let messageStr = JSON.stringify(message);

wss.clients.forEach(function(client) { // send to everyone, including sender
if (client.readyState === WebSocket.OPEN) {
client.send(messageStr);
}
});
console.log('sent to ' + wss.clients.length + ' clients');
});
});

And here's the relevant parts of the frontend code:
socket = new WebSocket('ws://192.168.0.100:8080');
socket.addEventListener('open', function(event) {
console.log('connected to server!');
});
socket.addEventListener('message', function(event) {
console.log(event.data);
app.messages.push(JSON.parse(event.data));
});

function sendMessage() {
if (this.inputMessage === '') return;
this.latestId++;
socket.send(JSON.stringify({
// id: this.latestId, // let server set unique id
from: this.username || 'user',
text: this.inputMessage,
}));
this.inputMessage = '';
}

This is an excerpt from a Vue.js app, so there's a bit of background code for getting user input, but this is the basics.

Use wss.clients.size instead

>it returned an array
HTMLCollections are array-LIKE objects, but not actual arrays (they don't have Array in their inheritance chain). Don't make the mistake of thinking they're the same or you'll be dumbfounded when trying to use slice and instead it throws an error.

>It's nicer too
This obsession a lot of JS developers have with it looking "nice" has got to fucking stop, or at least be dialed back a great deal. Yes, query selectors are nice and a really neat feature. Completely agree. They are also, however, literally orders of magnitude slower in virtually every scenario compared to the "old school" methods, particularly getElementById which, when put side-by-side, is insanely fast. You can polish a turd however much you like, but at the end of the day it's still a turd.

Preferably you should build your websites or apps or whatever-the-fuck you're doing, such that you don't ever feel the need for extensive use of query selectors in the first place.

Depends on what you want to do. You can do a lot of cool stuff with web dev and there's plenty of jobs.

Game dev is only worth it as a hobby or small teams. Software dev is vague, I'm assuming you mean legacy software or systems programming? Either way you could learn C# or Java and it'll apply to web dev and software. (Though systems programming is usually in C which doesn't have much use in web dev)

Web is so fucking easy

well then do that, so the browser knows you are not going to mess with the scrolling event and it doesn't have to wait for your code to finish.
fake it with this
developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
getting into it is (too) easy
actually building something halfway decent is another story

In jquery $() is just shorthand for jQuery(). So if the former doesn't work, use the latter or manually define $ as such within the scope of your script.

>actually building something halfway decent is another story
While certainly true, it should also be noted that being too anal is just as much of a productivity killer.

shape-outside isn't supported on all browsers tho. I'm thinking on using it anyways but if there were an universal solution (even if it were in js), I'd prefer it

Ya'll got any opinions on reading 'fake' URL parameters using Javascript?

How can I easily split up a giant GET request? I was asked to make a virtual table in React that shows 10,000+ rows, and all the data is fetched via a single GET request. I was skeptical of this design but it's what I was given from our backend guys.

Now we run into an issue because some customers have 100,000+ records from this request, so waiting for the GET can be slow. The business side doesn't want pagination, they want to be able to click "Display All Records" and get everything. Any good ideas on how to approach this?

Well if the 100k+ records must be gathered in one then there's not much to do about it. Maybe load records as the user scrolls through the page?

So when the user clicks "Display All Records" you actually just load X% and then you load another chunk as the user approaches the bottom of the page.

Yeah I was thinking that, except they want every column to be sortable. So if they hit "Display All" and then sort alphabetically, they would need all the data and I can't wait for them to scroll.
The whole proposal just isn't realistic

eh, Edge is on Chromium soon anyway, so the only one left would be IE.
And who even cares about IE users. They had several years to update now.
yeah like the other user said, only load what's visible, plus some buffer.
I think I even read something about some React component that did exactly that, it even reserved the scrollable space, so you could scroll to wherever and it would load the entries for that position.
Of course it gets complicated if the list is supposed to be sortable and you don't have all the items on the client yet.

Yup thanks for your input and the other user as well. This would be doable of I could just get rid of column sorting.

I'm kinda scared cause this one isn't mine, this is a job I'm doing. If the client goes to test the website using edge or something he might complain.
How soon is edge starting to use chromium?

I think you can already get the chromium'd Edge through the ms dev channel

Every single company here is asking for React experience, and advanced JS knowledge (OOP, testing, the whole thing). I was a pretty basic front-end developer until recently (nothing too advanced in JS) but I was doing okay in my company until it crashed, I'm currently learning JS the proper way as well as React, but I feel like I'm lightyears behind the required knowledge/experience, it's so depressing I feel like I'm back at square one (and I probably am).

How the hell do I get up and running as fast as possible? Any advice to catch up? Anyone here ever got into that position? I feel like I'm learning fast but I'm so overwhelmed by all of the subjects I have to explore and experiment with.

Attached: 1557093190732.jpg (740x740, 92K)

FreeCodeCamp Cash Register exercise:

The hell am I doing wrong? The currentValue never increases.

Attached: Clipboard01.jpg (780x413, 115K)

Use a ReadableStream and start filling in data as it's received.

Having a 100k elements might not be the best of ideas, though. Perhaps you could just fill the screen with rows and bind the scroll event such that the first row displays item[Math.floor(scroll_offset / row_height)]?

>could have posted link to code
>posts an image of code instead
line 34
also wtf is up with that push, pushing a single item array and a number?

First of all don't be afraid to use space, it makes your code a million times easier to read.

I notice you're using next.value and next.val, are both of those actual properties (of what I assume to be an array of objects)?

i am the screen shot guy you are referring to just notices that i have JavaScript disabled via ublock and decentraleyes was loading jquery don't know how and why. sorry for that.
but i am still able to select with
document.querySelector('.forum_topics_container');

Oh right, thanks.

there is a new php guy here not a namefag may be he can create new pastebin

As usual the best way to learn is to immerse yourself in it. I've learned an incredible amount simply by putting together my own little hobby projects and by having a preference for my own solutions over using someone else's library or framework.

Those anons.
They know their shit t.b.h

Attached: a1886952c37c14c71073122142797121.jpg (681x908, 88K)

So I learned that front end design is all about how things look to the user . It's small but something to keep in mind

download all records with a pls wait spinner, a progress bar if you know the amount in advance.
cache them for future pageloads (if you always need to request new data you can have a spinner "getting latest" but still display the old data and then merge it when it arrives)
display only the subset that will fit on screen (but see what happens when you display 100k first, only optimise if necessary)

I get the feeling that his employer rather believes in magic and wants the records to appear instantly, which is why he's asking for advice in the first place. Otherwise that solution is trivial.

Caching 100k records might be a problem itself though.