/wdg/ - Web Development General

Bump Limit Edition

>Previous Thread
>Free 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)
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
freecodecamp.com/
codecademy.com/
bento.io/
google.com - It's amazing, you should try it user

>Further resources
github.com/kamranahmedse/developer-roadmap - Roadmap
youtu.be/Zftx68K-1D4 - Web Development in 2018

>Tools
jsfiddle.net/ - Use this and post a link, if you need help with your code
caniuse.com/ - Check browser support for front-end web technologies

Other urls found in this thread:

discord.gg/wdg
gitgud.io/chiru.no/chiru.no/
jsfiddle.net/a7w33bu6/
fading.blue
fading.blue/u/16355032.jpg
jsfiddle.net/mst119ju/
jsfiddle.net/mst119ju/1/
expressjs.com/en/api.html#req.query
expressjs.com/en/guide/routing.html
twitter.com/SFWRedditImages

Oh lawd /wdg/. The past few weeks I have fallen to the /dpt/ dark side. I have embraced software development and have forgotten my roots in web development. Please forgive me, oh lawd...

why does /wdg/ have useful links while /dpt/ is just shitposting, I don't understand.

Join the web-development server, if you want to get free learning resources and access a huge trove of useful links.

discord.gg/wdg

But make sure you come to this thread too, from time to time.

you are one cheeky guy, you know that?

Because /wdg/ ppl are focused on building things, whereas dpt are a bunch of anime shitposters who brag about their C fizzbuzz.

3 month doing JavaSricpt and php tutorial i need some ideia what kind of project i can do , i have background in C# , with it i build some windows form and windows simple app

How do I defend PHP against bullies /wdg/? What qualities does PHP possess that other languages do not?

reposting my Angular issue, cause I had posted it after bump limit

hi, guy who needs to do qt and nodejs here
just an update, I tried uws on node and microsoft cpprest for cpp and did a test. They seems to work well with each other. Thanks!

nothing

>all these dependencies

nice, just be aware that when you want to further forward the data from Node to the Browser client, that µws-sockets and socket.io-sockets are not able to connect to each other directly, since socket.io is a whole thing built around the lower level basic sockets with various extra features attached. But if you use it on both the webserver and browser client, then everything is fine.
(if it's ok for you to use 2 different socket implementations on the node server side-by-side)

Just in case you try that and things aren't working right away.

Give me website ideas

Not sure if this is a PHP issue or a nix issue, but i'm making a website thats basically a user friendly frontend to this daemon I made.
The frontpage (index.php) basically just iterates over the /etc/defaults/shittyapp file that the init script reads to start this thing and turns it into a form.
I need to write to that file if anything has changed, so I need root access.
I've setup the www-data user with an ssh key, then edited root's ~/.ssh/authorized_keys, adding an entry for that key and making a bash script that writes the form data execute when authenticated.
The script just needs to read in a file written by the form handling php script with all the POST data.
Now I can su into www-data and run that script just fine using 'ssh root@localhost', I can see the log entries in /var/log/auth.log and the script's log entries in syslog.
I only have issues when I use popen('ssh root@localhost', ...) in the form handling PHP script... I can see the identical log entries in auth.log implying that www-data successfully authenticated, but the script never runs..
I fucking can't make sense of it. It has to be PHP as all the involved nix utilities work just fine otherwise.
I realize the process resource the popen function returns belongs to ssh, thats why I've written all the POST data to a file rather thank piping it through a file descriptor with proc_open.. But ssh just drops everything right after authenticating.
Pls help.

best way in js to make http api? just trying to do GET requests for now. I have node...should i just base node or a framework like express?

express makes routing + APIs 1000x easier. Trust me: I tried using base node, and then I switched to express and the difference is night and day. Go with express. if you have any experience with javascript express takes like an afternoon to get good enough at to start working

what about node-http-api?

Express is better than something more bare-metal like that because it has a more advanced routing system and more supported middleware, so if you need to implement logging in or sessions, it's as simple as using npm to find the package

thought so thnx user

Designing an API. I've got a few resources: rounds, tabs, and cards.


Essentially, a round is a collection of tabs, and a tab is a collection of cards.

When designing my endpoints, should these all fall under the /Round/ resource, so I may expose the following methods:

/Round/ -> Get all rounds
/Round/:id -> get tabs in round identified by :id
/Round/:id/:tab -> get cards in tab identified by :tab
/Round/:id/:tab/:card -> get card identified by :card

or should each resource get its own controller?

node question - if i wanted to fake an api and just hard code some data, would i make a new .js file and put the data in json and GET it from there?

are you using express or bare node?

followup: are you using any front end frameworks

express

no just templating system

The only thing I would say to make sure to do is to return "Content-type: application/json" in your header. afaik, express has a res.json(/*some stuff*/) by default. The reason I recommend this is because some frontend frameworks will automatically parse out JSON into an object if it receives the application/json content type header. Additionally, some will error out if they don't receive this when they are expecting it.

Futaba clone

gitgud.io/chiru.no/chiru.no/

how do some apis end with /something and not /something.json

how do you get data from /something

what file is in that directory that returns the api?

>the entire source in a single file with PHP, HTML, CSS, Jas intermixed
I get what the author wanted to do with the single file mentality, but still, shit looks scary.

it's only explicitly a directory if it ends in /

Why in gods name would anyone write code like that anymore?

so if i wanted my home page to get data from /teams/players how would i do that using node express?

what would go in

app.get('/', function(req, res) {

});

Once you have a base understanding of HTML CSS and JavaScript, what would you study next? I just graduated and only had one web programming class. I'd like to work as a WebDev in the future, but there is so much to learn. Where would you start?

>base understanding of HTML CSS and JavaScript, what would you study next
Intermediate understanding of HTML CSS and JavaScript.

also im still confused on how i can get /teams/players to display data. Do I just create a js file in there and make arrays and objects?

defend this chromiumcucks
jsfiddle.net/a7w33bu6/

Getting paid

I turned my image hosting project into a progressive web app, it works better on android because Apple is shit, so much inconsistently between iOS 10 and 11 it’s fucking stupid

fading.blue

I’m thinking about adding an albums option, should I?

Not him, but I made exactly that a year ago using vanilla PHP and MySQL; the result is 300kb unminified script. I'm currently running a small boards with it. 80000 posts posted, 20000 images uploaded, mostly archived, as we speak.

I am trying to create some type of e-shop for my website, therefore I need to be able to create new sites for the products on the go, is there any way to do it using database? I searched for it and found nothing.

fading.blue/u/16355032.jpg

So I'm probably being a spaz, but hopefully someone can help.

I'm trying to vertically centre my content on a page. When I resize the viewport, the containing child div becomes taller than the parent, meaning the background doesn't expand right to the bottom of the page. How do I fix this?

Forgot jsfiddle: jsfiddle.net/mst119ju/

how do I make myself hate frontend dev less?

first english, then look at opencart or prestashop

Setting a left/right margin on your content is not vertically centering user..

Tell me what you're trying to achieve and I'll fix it for you. The background behavior looks fine to me

Check the fiddle, I'm not referring to the left/right margins.

Is that the guy that got fired from google for being too honest?

Made some tweaks: jsfiddle.net/mst119ju/1/

I fixed the 100% height error you made so your body element will grow, added a reset, made the background layout fixed so the background will stick when you scroll, fixed your fonts and added a viewport tag. Is this what you wanted?

what is the irc

if youre making a search function with a form with node.js, will the URL be something like /teams/names/ or /teams/names?search=?

That's what I was aiming for. I think (like you said) I cocked up on setting the height to 100% - it didn't even pop into my head that the overflow wouldn't work with how it was originally set.

Thanks!

>Under the old addressing system, organizations such as the University of California At Berkeley were given more IP addresses than the entire country of China.

How much do you think they made off selling those IP ranges to datacenters and stuff now that IPv4 is nearly used up?

I'd say because /wdg/'s interests are more restricted than /dpt/'s, so they don't have a lot in common to talk about. But for the whole month of December we were doing the Advent of Coding challenge, and it was a ton of fun, threads were super helpful, lots of resources and code sharing.

wouldn't use /Round, if what you are querying is actually a tab or card.
Might not look as nice, but normal queries might be easier to understand, when just reading the URL.
/Round/1426/12/4
vs
/yourPath?round=1426&tab=12&card=4

But if you use route params, then a single route should be fine?
/getMyShit/:roundID/:tabID/:cardID
and if 'cardID' is left undefined, you know that the reply should be a tab

you would give it its own route.
express docs should tell you everything

What the correct way of creating global variables for buttons in Javascript?

My index.html displays different buttons depending on whether the user is authenticated or not. This causes my javascript file throw an uncaught typeerror but should i create a try catch block to check whether the buttons exist or just leave it like this?

frontend framework like Vue, React or Angular and/or learn how to write a backend.
See the roadmap in the OP.
that's up to you to decide
you can have your API work with either route parameters or query strings.
global variables are never correct

can someone suggest me a good article about webrtc video streaming
i need to build that shit and it is not going that good

>frontend framework like Vue, React or Angular and/or learn how to write a backend.
>See the roadmap in the OP.
Not him but I went with Java Spring backend development after learning the basics of html5, css3 and javascript. Gives you a much better understanding of stuff than learning yet another shitty frontend library

What are you doing to fight transphobia in the software industry?

Looks like your architecture is a mess if your app tries to use nonexistant stuff. Global variables are usually bad. Maybe show some code?

>Global variables are usually bad.
How do you handle onclicks then? Function calls from your .html?

ok im having trouble doing it the ?team= way

how would i modify this code to make it work that way?

router.get('/:team', function(req, res) {
res.send(req.params.team);
})

express docs are really good, have a look
expressjs.com/en/api.html#req.query

you listen for GETs on a specified route like "/team" and then clients can put anything in the query string, which you can access on the req object via "req.query"
In your case "req.query.team". But just see the link above.

still cant get it to work do you know whats wrong

router.get('/:string?', function(req, res) {
console.log(req.query.string);
})

>trying to load renderer.js
>doesn't exist

you use the ":" only if "string" is supposed to be a route parameter.


router.get('/', function(req, res) {
console.log(req.query.team);
})

assuming that you query that route with yourURL + "?team=myTestTeam", then console.log() should output "myTestTeam"

ok thanks but now if i dont do a query it says req.query.team is undefined. I already had a router.get('/') that does something else. How can i separate the two? I want the query only to run on a form submit

router.get('/getTeam', function(req, res) {
console.log(req.query.team);
})

and instead of sending your request to "/" you send it to "/getTeam" instead.
Read the documentation.

what if i want to keep the url the same? as in just add a query to it when user uses a form

i did im not finding what im looking for.

It pays well for what I do desu

ok nvm i think i got it. What do you think of this

router.get('/', function(req, res) {
console.log("something");
if (req.query.string) {
console.log(req.query.string);
}
})

Don't cram in too much stuff on the same path, but:

if req.query.team is defined you respond with the desired info.
if req.query.team is undefined you just do something else instead.

How are global variables and handling events connected?

whatever works for you.
but just like you wouldn't have one function do 2 completely different things depending on the arguments you pass to it, it's also not a good idea to do that with a route since you might lose overview quickly.

>Bootstrap 4 finally comes out of beta
>still uses jQuery as a dependency

Piece of garbage.

Please tell me this is a personal project and the web page with user authentication is not in production and does not have any sensitive data involved.

fuck idk what to do then. I need /something to do something differently than /something?search=whatever

but why?
You can send any request to any route on your backend.
Why does it have to be the same?

What are you trying to achieve? This is a general example
var menu = document.querySelector('.menu-button');
menu .addEventListener('click', function() {
//do something
});

It's called a parameter you dipshit. Read the docs.

expressjs.com/en/guide/routing.html

Scroll down to route parameters.

What's your stack? Are you using javascript for everything (including authentication)? Is this all client side? Are you using a framework?

Wrap that shit up dont pollute the global namespace like a nigger

idk they just want GET /something to do one thing and GET /something?search= to do another

Is there any nice way to split up my server with tightly coupled socket.io handling, express routes, and other data structures?
As it stands they're in clear sections but rely on each other being in the same scope often. While I could easily refactor them in a way that they work exactly the same but are separate required components, but it doesn't feel like that fixes the problem.

Spring boot on the backend that takes care of the authentication. Javascript is only used for the rest api calls

That's a global variable you dumbfuck

Shut up you dumb cunts. He asked
>How are global variables and handling events connected?
And I showed him how. Doesn't matter if it's shit practice or not, I simply answered his question.

>mfw restarted the server and now nothing works

>they
if that's what they want and you are getting compensated, then just do it.
but like said you might be better off with route parameters then?
so "/" for the default response and "/myTeam" to return info about myTeam.

what's the issue you are looking to fix?
What I like to do is have one file where I create both the express API and the socket object and export them separately, so each other module can just import whatever it needs from my server.js.
module.exports = {
expressApp,
io
}

You only keep url same if it's same page. And at that case simple if exists should suffice.

Simplest to deploy.

What server?

I know but then again anyone that uses Bootstrap is a garbage dev.

It's not possible to send a client an *array* of typed arrays / buffers as a response, right?

TL;DR
What PaaS is cheaper than Heroku to roll out a system written in python that will mostly do API calls?

Long version
I made an app + server service for a small store in town. Why this architecure? So I can fit more than one store in per instance and start building on top this network of stores. So as more people are coming in, I'm afraid I'll run out of free space in Heroku. Before I make the jump I checked and there are two stand outs: PythonAnywhere and Firebase which seem to allow me to do more on their free tiers but I'm already set in Heroku, along with their "weird" annoyances like not being able to write to disk. Is there any better solution than those or should I just stick with Heroku?

DigitalOcean $5 VPS. Or Vultr. or Linode. Or AWS.

Don't be a PaaS bitch and set up your own server.

It's only global variable if you define menu in top level scope and share it in lower levels. Also just add if exists. There are probably better solutions but impossible to tell without context.