/wdg/ - Web Development General

What's everybody working on?

Also, post some good web-related tech talks, I'm bored and also compiling a list.

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 - Collection of PHP links. (Maybe someone should check which of these are still relevant)

>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: 1530417078113.png (320x180, 29K)

Other urls found in this thread:

svelte.dev/
thispersondoesnotexist.com/
medium.com/full-stack-shenanigans/how-to-create-fluent-interfaces-the-easy-way-with-vanilla-javascript-2a61b6558f01
github.com/kkuchta/css-only-chat
doc.qt.io/qt-5/qtqml-index.html
php.net/manual/en/gmp.installation.php
github.com/getify/You-Dont-Know-JS/blob/master/this & object prototypes/ch2.md
twitter.com/SFWRedditVideos

Alright webniggas I have a question.
Given HTML


Cool text

How in the hell I select the preceding element that is

Rephrase your question, what exactly are you trying to do?

Element has 3 childs. I can select 2nd child by unique element and need to hide 2nd and 1st child.

My project manager told me to find 1:n OKRs for myself. But i totally dont know. I would refactor most of their stuff but no time for that and not really a good OKR. Please help.

>This shit is soul-sucking and life-draining.
This is not a web-dev specific thing. It's like this throughout most commercial programming jobs. Sometimes it happens when you are working on open source too.

t. someone who's worked on desktop and web applications commercially

to make it clear the parent has no inque ID and class name shred across

Can't you just do something like
.myclass > a, .myclass span:first-child {
display:none;
}


to hide the first two elements?

any php 7 fags around?
what editor do you use?
vscode feels like a notepad with syntax highlighting, none of the ide-like plugins work at all.
netbeans is the best thing i have so far but it's heavy as hell

I'm also wondering this. do you use any js frameworks around your PHP? I've been looking to get into it again but I haven't been web devving in a while so I'm not hip anymore to this shit.

Order may change.

>do you use any js frameworks around your PHP
No, I'm postponing this as much as I can for now but I'll try svelte.dev/ when I decide to work on frontend.

Any UI fags that can help me on how to get better at CSS. I really suck at it and don't want to rely on web designers anymore. But I have no idea what to do. This shit to me os trying and trying random shit again and again until I have the wanted result.

Attached: 1398732222473.jpg (417x384, 62K)

Sublime

Laravel
CodeIgniter

Okay, turns out I didn't read the message correctly. Disregard the frameworks I mentioned.

I've read all of your posts several times, and I'm still not clear on which ones you actually want to show and which ones you don't.

You want to hide the first and second children of the li.myclass element, but the order sometimes changes, so which ones do you actually want to remove?

>How in the hell I select the preceding element that is

>What in the hell do you mean?
Doesnt matter, I already discovered there is no way to choose preceding element in CSS nor ever will be (same reasonsas with :parent)

shit, my bad, I think I understand. how about
.myclass > a, .myclass > a + span {
display:none;
}

this would target the anchor link directly within the list item, and then it would target the span that is an immediate sibling next to the a. that should work for you.

I have been hearing more about it lately too and I was thinking I might use it in conjunction with PHP, just didn't know if you had a better suggestion. thanks!

you're fine dude. way before I used Laravel but I think I'm too much of a brainlet for that. I want something that is as small and minimal as possible, ideally. perhaps I'm being too picky

oops, didn't see that. yeah, there is currently no way to target the immediate preceding element in CSS

Web3.0 when?

No, but you might be able to rig something up.

E.g. if you want to select all children preceding the element, you could select all the children and apply your display:none, and then override it with a selection of children which follow the element.

I understand but in my case I need SPECIFICALLY preceding

What's a good place to find algorithm interview questions? I figured first that I'll learn them on a trial and error basis, but I might as well prepare.

Basically, I'm done with the projects I intended to do and I've set up a development environment to learn TypeScript, Flow, Next.js, hell even Socket.io if I find the time, while I'm applying for jobs.

I don't want to commit 100% (not even 50%) of my time to the job search. I want to marginalize it as much as possible because I realized that's the only way to keep my sanity.

nextSibling using JS?

best case is what suggested. if you don't want a JS solution (for this specific case), you will probably need to rework your overall design to avoid getting trapped by this again

it is alright, I've settled for the first-child for now

So many links, 0 project ideas. Please help.
I'm just bored and I need something to build.

If you got suggestions let me know. Whatever you want I'll build it, I'll even buy the domain and pay for hosting.

Elaborate

There's a reason there are no ideas in the OP, it's because we don't have any. The last thing I coded was a CMS for photo galleries and before that a CMS for a blog site and before that a... ah, you know how it goes.

Why would we give project ideas? I have a lot but I have been building them.

thispersondoesnotexist.com/

There is a bunch of GAN generated fake people. Here is an idea: a mock-up social network site a-la Twitter/Facebook with fake profiles, fake people, fake info and posts. Bu believable enough.
Hell, for ultimate mockery you can make something like LGBTQonly Twitter-alike with random-generated genders assigned (there is at least 43 now)

you have .nextSibling and .previousSibling to choose from.

Throw your ideas at me senpai. Preferably backend-heavy project ideas

Funny thing is, the last major project i did was also a custom CMS. lol

Meanie

Brilliant, thank you. Gonna try this. I'm fairly competent with UX so it'll be interesting to do the front-end as well

>muh web 2.0
>muh web 3.0
>muh semantic web

I think I'd might get cancer if I hear anyone else saying it

What would be the best way to generate this block in javascript? (so I can make it dynamic)








pepipopa
@pepipopa
none


1 days

shut the fuck up

button.addEventListener("click", this.buttonFunc(this), false);

anotherFunc() {
console.log("meh");
}

buttonFunc(ref) {
ref.anotherFunc();
///bla
}

jQuery and fluent it with objects/element?

I use sublime text

does it get better?

What does it mean when it is said that you shouldn't use access tokens as authentication? I'm developing a SPA/API and getting tokens from a third party, I can just trust the access tokens for HTTP/socket authentication/authorization purposes, right?

Attached: yqbu1.png (661x313, 35K)

*trust the bearer of access tokens with short lived expiration dates

not allowed to post the actual code but basically I did this and it seems to work ok. Is this an acceptable practice?

Attached: v286jJD[1].png (1052x888, 71K)

What environment should i use to develop a front-end stack (html, css, js)?

You must be insane.
Either write your HTML as a string then use a parser, or use a templating engine (handlebars, ejs, or an add-on for jQuery) if you are sane enough to not mix HTML with JS logic.

Yes but that's pretty retarded. use jQuery or
medium.com/full-stack-shenanigans/how-to-create-fluent-interfaces-the-easy-way-with-vanilla-javascript-2a61b6558f01

why not jsx?

Nvm I’m retarded

sup /wdg/, quick rundown
>I have a client
>he had (foolishly) gotten his website done through a company that outsources to india
>as a result all his shit was fucked up
>50k+ lines of css, a gorillion javascript libraries imported and the site is still shitty etc etc)
>I had to scrape existing content
>vary in size/resolution, some are ~200kb others are 3.5mb
>I need to resize to get them to a size that is reasonable for the web
Is there a way I can resize to a filesize or something like that? I have used ffmpeg so I feel like I can use it for something like this, but I'm not sure. Any ideas?

just use jsx what the fuck is this brah

started on a terminal app to read Jow Forums over ssh
native python 3.5

steal from other sites

I've heard good things about jpeg-recompress

>>I need to resize to get them to a size that is reasonable for the web
if you're talking about just compressing an entire directory of images you could probably throw together a quick and dirty script with something like python-pillow.

Does anyone here use "native web components" can't get my head around what it actually is, is it just Polymer?

>50k+ lines of css
lol, for what? even the most bloated css library I ever used (semantic-ui) has only 36 k with commetns

maybe they too have 50 k, I did disable some of their modules before compiling

Attached: Screenshot 2019-05-10 at 09.22.27.png (940x1112, 230K)

I'm building a simple rest api. What's the common way to implement authentication/authorization?

Each user will have an account where they can store their own lists basically, and I'm building a front end as well. So in the front end, do I just send the user name and password to the api every time I need to retrieve the users list? Or am I supposed to generate some kind of token somehow?

>Or am I supposed to generate some kind of token somehow?
this. you are supposed to generate a token and receive it via cookie, headers..

I would just use a proven 3rd party solution for this, no? why experiment with such things yourself, just see how they do i.

There are basically two common types of authentication, client-side or server-side, also referred to as token based or session based, respectively.

Cookies are used in both instances. The former, client-side, is technically truly RESTful because it's stateless on the server.
It's usually done via JSON Web Tokens (JWTs), which contain 3 parts - a header with an algorithm, a payload containing minimal identifying information (for example a username) but never ever sensitive info (JWTs aren't encrypted, just encoded), and a signature, formed by hashing the header + the payload together using the algorithm listed + a secret (let's say 'secretdog'). When the server receives a request that requires authentication, it checks the JWT cookie sent along with the HTTP payload, and performs the hash of { header + payload + 'secretdog' }. If the resulting signature matches the signature sent in the JWT request, you know it came from you. If it was forged by them, they'd have a different signature because they wouldn't have 'secretdog'.

Session based authentication is far more simple. Generate a session ID, chuck it in a database along with their username (redis is good), and give it to them in a cookie. When a request is made, just check the session ID.

To add to this as well, always always double check your user and permission database before performing dangerous/destructive operations. Just because someone has a valid JWT, it doesn't mean their user hasn't recently been deleted, demoted, etc. You still need to check the database to ensure they're allowed to. That's the difference between authentication and authorization.

What things are you having trouble with ?
CSS isn't that hard (untill you get to grid and flexbox).
I'm a fucking brainlet that isn't even good at javascript but I'm good at CSS.

...

There's this website that is able to update its html after a specific time without using js and with no user interaction(as in if I disable js it still updates the element). It does this in an iframe.
How is this possible? How do I prevent an iframe update like this?

motherfuckingwebsite.com

Well then it most likely has something with a timer running on the server side, this could be by any number of ways but it just hides it from you by running it serverside in some way.
Also I don't think you could stop it updating if it's serverside.

Ok but after u load a page how can it update the client side html with no js?

Like I said it might be running serverside stuff and just giving you the plain html while keeping a connection to the client so you can get updates (much like how AJAX works).
This way the client only sees the finishes results (the plain html) and not the inner workings (the Javscript and other stuff that's being used) this way you can keep things hidden from the end user.

if the server never finishes the request, you can keep sending data to the client. to modify the page you'll have to emit both html and css to hide/modify the previous content of the page.

the javascript version of this is called Comet or Long Polling.

here's a single page realtime chat website made with just html and css github.com/kkuchta/css-only-chat

Ohh, I understand. To be clear: the little loading symbol appears to be finished in this case. But the connection can still be held open anyway?

How would I terminate the connection manually or otherwise prevent this?

from the client side just press esc/stop
from the server side just exit or return from the function (depends on language/library/framework being used).

You could do a lot with CSS and iframe refreshing using in a noscript tag

that's interesting... Seems too sophisticated for plain HTML, like how you can do form validation in html5.

Are there people here who do any other programming than web dev? I have a question regarding a personal concern

I have been making GUI for so long with CSS that its basically rooted in my brain

Will i find it difficult to pick maybe Tkinter for Python or Qt for C++ when creating GUIs? Do they work close to CSS?

Attached: 94694836282374623.jpg (1170x1089, 125K)

var test = {
prop: 42,
func: function() {
return this.prop;
},
};
am I setting myself up for `this` bugs if I follow this pattern, or is this the go-to?

javafx actually uses CSS to style GUIs but it's Oracle CSS

Looks fine, just a getter and setter pattern.

Tk only can be used for procedurally building a GUI, that's why there are a bunch of dedicated GUI builders in different programming languages for it.
Qt has a declarative approach called QML which is a lot closer to CSS, but still mixes in programming concepts. Essentially it's still the same code, but with less boilerplate.
doc.qt.io/qt-5/qtqml-index.html

Any JavaScript pros here? When I do blanket

document.querySelectorAll("[attr="value]");


should I do just document search or is it faster performance wise to select a parent first via selector and then query parent with that request?

dude, it will run on the clients browser, who gives a fuck.

no seriously, those kind of micro optimisations will eat up your time

it DID give me a fuckton of bugs. nobody told me `this` would turn into a dom element. fuck that pattern, then. what's next on the chopping block

VUE.JS IS FUCKING SHIT FOR DYNAMIC CONTENT FROM AN API

what problem are you having?
And what's different about it than say React?

i want to learn php to make a shitty website. what book should i get?

Books in 2019?
Use Laracasts

laracasts dont tuck away neatly on my bug out drive though.

Can I somehow ship and use binary blobs with my WP plugins that will go on wordpress.org?

>should I do just document search or is it faster performance wise to select a parent first via selector and then query parent with that request?
The fewer nodes you have to go through, the faster it is. What you should be asking yourself, however, is why you're having to do so in the first place. Might there be ways in which you could restructure the page or your own code such that you don't have to search the DOM? If you're generating the page programmatically, you should already have a handle or at least have assigned it a unique ID.

>micro optimisations
Yes and no. The thing is, query selectors are fucking slow. We're not talking half the speed, we're not even talking a tenth of the speed, but at times upwards of SEVERAL HUNDRED times slower. At that point it's not a micro optimization, it's not being a fucking retard.

How easy is it for the average retard to install a php extension like GMP (a math module)? Impossible, right? like, 1 in 10000 can/will?

>nobody told me `this` would turn into a dom element
It shouldn't. What exactly are you doing?

var test = {
prop: 42,
func: function() {
console.log(this.prop, this);
},
};
x.onclick = test.func

Totally doesn't look like a virus. Definitely safe to plug this mystery box into my website.

But now you're binding the function to an event. When a function is used as an event handler, 'this' always refers to the element to which the fired event is bound.

>oh, you're USING the thing? well that changes everything!

Dealing with a site that uses zend 1.10 (or 12?), emberjs 1.8, and WordPress.
Wasn't developed by me and has no documentation and very little comments. The emberjs is minified and used heavily for the front end and has no original source.
We tried to bid high to sabotage the bid but came in at mid level and won the contract (I said don't bid...).
Thing doesn't have many checks in place so if things aren't perfect it crashes. Database allows for null when the code crashes on nulls.
It's horrible..

I'm in the same boat. CSS itself is braindead easy but coming up with stuff to make is really difficult. I've just been looking at as many different websites as possible for inspiration. I don't think you can get around experimenting and revising over and over.

>To call a user object’s operation, given a callback interface type value value, operation name opName, Web IDL arguments list args, and optional callback this value thisArg [...]
>Call a user object’s operation with listener’s callback, "handleEvent", « event », and event’s currentTarget attribute value. [...]
Section 3.9 of the Web IDL specification and section 2.9 of the DOM standard, if you're interested.

Can anybody here post some custom startpages they've made so I can take a look at the code?

recently started working on a laravel project i am using neovim with coc.nvim

> In order to have these functions available, PHP must be compiled with GMP support by using the --with-gmp option.
php.net/manual/en/gmp.installation.php

github.com/getify/You-Dont-Know-JS/blob/master/this & object prototypes/ch2.md

Just started a web dev job and I know hardly anything about webdev. Its legit backend stuff, they use tons of apis/cloud features. I know the general gist of some of the stuff but I am definitely not conversant in any of it. I know what for loops and abstract classes are. My coworkers can obviously tell and most questions I ask so far dont make sense and just show my lack of knowledge.

How can I catch up and not be a dead weight without annoying my coworkers. I can tell they already get annoyed if I want to shadow them on a ticket or something because they have to explain things in such simple terms.