/wdg/ - Web Development General

/wdg/ - Web Development General

Previous Thread: > Discord
discord.gg/wdg
OR
discord.gg/0qLTzz5potDFXfdT
(they're the same)

>IRC Channel
#Sup Forumswdg @ irc.rizon.net
Web client: rizon.net/chat

>Learning material
codecademy.com/
bento.io/
programming-motherfucker.com/
github.com/vhf/free-programming-books/blob/master/free-programming-books.md
theodinproject.com/
freecodecamp.com/
w3schools.com/
developer.mozilla.org/
codewars.com/
youtu.be/JxAXlJEmNMg?list=PL7664379246A246CB - "Crockford on JavaScript" lecture series.

>Useful Youtube channels
derekbanas
thenewboston
learncodeacademy
funfunfunction
computerphile
codingrainbow

>Frontend development
github.com/dypsilon/frontend-dev-bookmarks

>Backend development
en.m.wikipedia.org/wiki/Comparison_of_web_application_frameworks
gist.github.com/dypsilon/5819528/

>Useful tools
pastebin.com/q5nB1Npt/
libraries.io/ - Discover new open source libraries, modules and frameworks and keep track of ones you depend upon.
developer.mozilla.org/en-US/docs/Web - Guides for HTML, CSS, JS, Web APIs & more.
programmableweb.com/ - List of public APIs

>NEET guide to web dev employment
pastebin.com/4YeJAUbT/

>How to get started
youtu.be/sBzRwzY7G-k - "2016/2017 MUST-KNOW WEB DEVELOPMENT TECH - Watch this if you want to be a web developer "
youtu.be/zf_cb_Nw5zY - "JavaScript is Easy" - If you can't into programming, you probably won't find a simpler introduction to JavaScript than this.

>cheap vps hosting in most western locations
lowendbox.com
digitalocean.com/
linode.com/
heroku.com/
leaseweb.com

Other urls found in this thread:

expressjs.com/en/guide/error-handling.html
google.com/jsapi
gist.github.com/AlexBonney/56889ebdbec376301bd93960ac94f675
youtu.be/sBzRwzY7G-k
developer.mozilla.org/en/docs/Web/JavaScript/EventLoop
localhost:8080/
htmldog.com/guides/
mashable.com/2016/09/06/warner-bros-dmca/
developers.google.com/speed/libraries/
getbootstrap.com/getting-started/.
twitter.com/SFWRedditImages

I'm
>First time really using node, I sometimes hit some type of condition where a certain GET will fail and in the logs it will show as taking a really long time. I essentially load the main page and then use the public js to load /foo. The main page loads fine. And even if I navigate to /foo directly it will never load. Only solution is to restart the node server process.
>GET /foo 200 104659ms
>What could this be?

>Post code

This is all called by the home page:
//public.js
$.get( '/videos', parameters, function(data) {
$('#vid').append(data);
});


//app.js
app.get('/videos', home.videos);


//index.js
exports.videos = function(req, res){
var first = returnSanitizedNumValOrDefault(req.query.first, 0);
var max = returnSanitizedNumValOrDefault(req.query.max, 1); // must be > 0
var go_to_page = returnSanitizedNumValOrDefault(req.query.goToPage, 1);

req.getConnection(function(err,connection){
var queryString = 'SELECT * FROM vids LIMIT ' + first + ', ' + max;
var query = connection.query(queryString, function(err,rows){
if(err)
console.log(err);
if(rows.length) {
res.render('layouts/vids_regional', {
go_to_page:go_to_page,
data:rows
});
}
});
});
};


vids_regional is an ejs file

Any way I can debug this? It's a sporadic problem and all the google info I found was all or nothing, this works 99% of the time. console.log(err) never happens as it eventually return 200, just after the browser has given up.

Also first

thanks, OP

Hint for all the noobs - F12 opens browser developer tools where under console javascript errors are shown.

First of all, you should be following the standard express way of handling errors instead of just logging them: expressjs.com/en/guide/error-handling.html
(If you used the official express generator or some variant, this is already set up, you should see an error handling function near the bottom of your main js file.)

Secondly, if your server is hanging like that, it almost always means you have an unhandled request. In other words, in a route somewhere you have some condition where you don't actually terminate the response. Make sure you're always using the built in express response methods (res.send(), res.redirect(), res.render(), etc) or otherwise explicitly returning something.

when you hold down a key on your keyboard, there's a short delay before it starts repeating until you let go

can i get rid of that delay somehow?

If you're making a game or something, you can listen for specific key down and key up events.

In general, the OS or keyboard firmware handles debouncing the key press signals. You might be able to turn it off in your accessibility settings or something.

>key up key down

that'll work thanks

Thanks user. I copied most of the express code from some tutorial and it did deviate quite a bit from the standard generator.

>it did deviate quite a bit from the standard generator
There isn't necessarily anything wrong with that as long as you're handling it in some way using the next(err) convention. It also makes your code a lot cleaner and DRYer and helps you to avoid mysterious non-error errors like you're dealing with, especially as your application gets bigger.

Working on a website for my university which will help students find study groups based on their classes and schedule and professors. Want to implement Google maps support so people can just click on a school building to meet at (library, student commons, etc.) But Google maps API costs money in some circumstances

If you're getting enough traffic to bump you up out of the free tier, you're getting enough traffic to monetize and pay for it.

Alternatively, just list the buildings or create a simple campus map with css with clickable buildings.

openstreetmaps

What is next after code academy?

read the documentation and make whatever you want

Our school had something like this implemented and I got a chance to play around with it, but I since deleted the files from my own comp (fugg).
iirc there are really 2 or more maps APIs, my school I think was using, which is free and doesn't require any authentication.
>google.com/jsapi
In combination with an xml file defining coordinates and onclick events to pull up description, pictures, directions.
I think the paid for api would let you do all this within the app rather than have the xml file ride on top of it, but functionally there's nothing you can't do one way or another.

I guess the only downside is this method only allowed shaded building outlines to click on, no fancy 3d buildings.

samefag Actually KML
google.maps.KmlLayer

I need help with a nested Wordpress loop. The code block is pretty large, but I dropped it into a gist on Github. Half of it works as intended, it's only the nested part that's breaking. Would anyone be willing to look at it for me?

why don't you just post it?

Feels rude to post it assuming someone here wants to fuck with Wordpress. Most people hate php, myself included.

Here it is. Line 19 starts the broken nested loop. I've included comments on what it's supposed to do.

gist.github.com/AlexBonney/56889ebdbec376301bd93960ac94f675

can somebody recommend a good html5/css3 course? doesn't have to be free, just needs to be good and teach fancy things i don't already know

sorry, I myself can't help you with that, at least not directly.
do you know how to debug scripts in php? my suggestion would be to learn how to do it, using var_dump(), print_r() or something. I read some days ago that some IDEs can even show lots of info.

I'm interested in this, too. I already know some html5/css3, but I'm still lacking knowledge... hell, I still don't know which things are/are not html5

if it's in a css file or a inside style tag it's css

i would just like to know common practices for like, putting things side by side instead of stacking everything
and how do i make my own bootstrap

I don't know how to debug php. I know it sounds lazy, but this is probably going to be my only php project I'll ever complete unassisted (minus random help from Sup Forums), and I'd much rather use my time learning how to better unit test javascript.

I'll probably throw it up on stackoverflow in a bit. It's just a random Wordpress thing, and I do not want to be an expert at Wordpress.

don't give up, m8. php is easy, you can probably solve your problem simply by using var_dump()

I am new to this stuff and have been stuck on this one problem for about 6 hours, its made me so pissed i have been punching the wall
I am trying to make an ordering system for a project, where you input the quantity you want to a form, but i have no idea how to process it correctly or make it go into the cart($_SESSION array) without adding unneeded stuff
I cant find any websites that gives me a code template which works in the way i need my site to, i have just been going back and forth with w3schools and the stuff i can remember from my head, if you know any and can link them it would be appreciated
This is the form(Using Post)
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_assoc($result)){
echo "" . $row["name"] . "
$" . $row["price"] . "
Qty";
}

I'm pretty sure there is a problem in the name part or there is another problem with me trying to process it as most of my errors were about arrays/index
This is my current attempt at merely testing processing, i have been doing this for hours so have tried a few different things
foreach ($_POST["itemQty"] as $qty) {
if ($qty = NULL or '0') {
unset ($qty);
}
else {
echo $qty)
}
}

No ; after echo $qty you put a)

I just ctrl+z'd back to that state in my processing file because i cleared it so i could copy it here, must have went too far back to before i fixed syntax
Ignoring syntax should the code be working fine?
The processing thing doesn't work, i either get all $qty even with zeros, or nothing at all depending on != or = on the if()

That, and i have no idea on how to get the product id, all my attempts get errors
I need that so i can query/input to the database later

The code should work, I think you need to say == if you want it to work that way, = will set the var. To get the id just pass it to post and use $_POST["id"]

youtu.be/sBzRwzY7G-k [Remove] - "2016/2017 MUST-KNOW WEB DEVELOPMENT TECH - Watch this if you want to be a web developer "

This video in the OP says that Python and Node.js are pretty similar. Is that true? My impression was that Python was super easy, some call it pseudocode just cause it's not really structured at all; whereas Node.js is a huge clusterfuck. Am I wrong?

I took a Python course years ago, how hard would it be to transfer that knowledge to Node.js?

>you need to say == if you want it to work that way, = will set the var
I deserve death
But for some reason it still doesn't work and i get 0's
foreach ($_POST["itemQty"] as $qty) {
if ($qty == NULL or '0') {
unset ($qty);
}
else {
echo $qty;
}
}

I even did unset ($_POST["itemQty['$qty']"]);
Sorry for all the bother
When you say pass the id to post do you mean there is a better way then i am trying now that also keeps it together with the quantity? Every time i tried to get the ID out of post i always got index errors, i used $_POST["itemQty"]['0'] and $_POST["foodQty['0']"] when testing it

Completely new to webstuff and I wanted to get a simple slideshow, so I downloaded a jquery plugin. I wondered how hard it would be to write one myself and took a look at the code

It was like, 600 lines and I didn't understand any of it. Shit's a bit discouraging, how much JS should I know before I even attempt to touch web design?

for (var i = 1; i

the callback uses a reference to i

I get it and I dont get it.
I know that 'i' is called by reference and not by value here but looking at it step by step still makes confusion for me.

In the first iteration i = 1 so setTimeout is called (and even if timeout is 0 seconds) it will not get called immediately so that it can log 1, instead it mysteriously waits for 'for' loop to finish as if 'for' loop is empty and just incrementing 'i' for nothing.

The timer callbacks only start firing once the loop is completed. At that time, i is 6.

Is there anyone else that could possibly help? I have been doing this project for weeks and am only stuck here, but its due tomorrow (In less then 12 hours)
The site will be pretty much an empty shell with errors if i cant get it to work and ill have wasted weeks to end up getting no marks

the snippet creates 5 callbacks which, once the timeout is reached, will be run at the next possible opportunity (javascript uses a single-threaded event loop)

the callbacks use a reference to i, so when they are eventually run they use the current value of i instead of the value at the time the callback was created

the event loop cannot pause in the middle of a for-loop to run any callbacks, so, no matter what you put for the timeout it will always print the final value of i

what are you even trying to do? is $_POST["itemQty"] an array?

Oh thank you so much, I was hoping that someone will mention that timer start firing once the loop is complete. That was the thing that was confusing me and was obvious to me that it is happening , I just didnt know why.

So the reason is that because javascript is single-threaded it first finishes 'for' loop and then setTimeout? To be precise setTimeout is indeed called 5 times, its just that its callback function is fired only at the end of 'for' loop because of order of single-threaded queue?

What exactly are you trying to achieve?

I can see a few issues:

1. User input in $_POST always come as strings, comparing to null is therefore pointless.
2. You are unsetting the scoped variable $qty in the foreach loop.This doesn't really do anything in your case. If you want to unset empty inputs (and '0') in the $_POST array, unset them via their keys:

foreach ($_POST["itemQty"] as $key => $qty)
{
if (empty($qty))
unset($_POST["itemQty"][$key]);
else
echo $qty;
}

>its just that its callback function is fired only at the end of 'for' loop because of order of single-threaded queue

Correct, even if you set the timeout to 0 ms.

Any guys around here who know Zend Framework?

yup here's an article explaining it in more detail: developer.mozilla.org/en/docs/Web/JavaScript/EventLoop

specifically look under the "Zero delays" header

thank you so much anons

Its meant to become one right?
The page the form is on has the name and price of the item, and a input section next to it where you say the qty you want
I'm trying to then get it so once the form is submitted, the items which have not recieved any input, or have 0(No qty), will be ignored
Then those that do have a qty will be put into a shopping cart of sorts, which will have the id of the item so i can query the db for the name on that cart page as well as input it once the order is complete
One thing i am confused about too is getting the ID and qty to match up, i originally thought getting a multidimensional array with the ID, then qty and maybe name to just make it easier, but i cant figure out how

here uhh.. try this

session_start();
$_SESSION["cart_tems"] = array();
foreach ($_POST["itemQty"] as $qty)
{
if (boolval($qty))
{
$_SESSION["cart"]["items"][] = $_POST["itemID"];
}
}


"$_SESSION["cart_tems"][] =" appends to the $_SESSION["cart_tems"] array

Is there a guide for "What to do if you have a good idea for a website"

Like how to protect the idea (if possible) to a stage where I can then go on here and ask for partners to help develop the website if they think its a good idea.

Thanks, it looks kinda good in my head, but just to make sure the itemID also intervals with the foreach right? And how is qty tied to the itemID index? Also is ["cart_tems"] just you typing ["cart"]["items"] differently or does it mean something else?
Sorry if this is annoying basic stuff but i pretty much only teaching myself how to do php when i began the project

Anybody using vim for php projectS?

Only for single page experiments, honestly.

hey guys, I need an advice.

I want to move my dev blog from blogger to a personal domain.

I don't want to write from zero my blogging platform since I've not the time with a full time job. What blogging platform would you suggest ? Ghost seems really fresh but requires node.js I've never used wordpress but it seems to be the most common choice.

localhost:8080/

this is my first nodejs app, can you guys give some honest feedback? also when do you think i can start applying for junior dev positions

>I want to move my dev blog from blogger to a personal domain.
You can setup a domain with blogger. If you want more control over the site itself, then I see no issues with wordpress (but I don't have much experience with it.)

I'm the tard who cant do basic php
But did you seriously just link us to localhost for your app?

Or is this some epic Sup Forums meme?

>localhost:8080/
Not sure if b8, but nobody but you can access that.
localhost, as the name implies is a local only address - every computer has it's own localhost or 127.0.0.1
People on you're home network can using your lan ip address
192.168.x.y:8080
And if you opened your internet facing router to forward to your computer only then we could then access it with your main ip address (that's a bad idea though, don't do this).

yeah I know but I would like a fresh start. After some years of using it I'm not really found of blogger as a development blog platform. Sometimes things feels just too messy.

>when do you think i can start applying for junior dev positions
Eh, I'm afraid it will still take a while.

9/11

htmldog.com/guides/

Hey guys I've a question about digital ocean and vps pricing in general. They have a 5$ per month plan, does it means that I pay that at maximum and that if I waste more resources they will terminate the instance or that they will charge more ?

Python is pretty easy. Not really sure what you mean by not structured since it has probably the strictest structure of any modern language. JavaScript (Node is a runtime environment not a language) can be a bit of a clusterfuck sometimes, but overall it's evolving into a pretty great language. Also, if you want to do anything web dev related in ${CURRENT_YEAR} you pretty much have to know JS, just like you have to know CSS and HTML so you might as well learn it.

>I took a Python course years ago, how hard would it be to transfer that knowledge to Node.js?

If you took it years ago and haven't done anything with it since, it's going to be hard because you're basically starting from nothing.
If you do practice regularly, you'll have a much easier time, though. JS is a C-like language and Python is vaguely C-like, so you will see some familiar constructs and keywords and things that will do what you expect for the most part.

Have you ever messed around with virtual machines on your PC? Basically VPS providers have datacenters full of hundreds of powerful, rack-mounted computers running virtual machine software. When you sign up for a plan, one of those computers starts up a VM instance according to that plan. Then, you basically have a computer (not a powerful one for the $5/mo plan, but plenty to run a web service on) sitting in a datacenter somewhere that you can SSH into and install/run whatever you want (As long as you abide by their ToS, no CP, etc.). You can run it at 100% resource utilization or leave it idling as far as they're concerned.

There are also services like Heroku and and OpenShift that handle all the dev ops and provisioning stuff for you. Basically, you upload a Node or Rails app or whatever, and they just run it for you. Then there's FaaS providers like AWS Lambda where you just give them a function that you can call remotely and they charge you by the microsecond of execution time.

A lot of providers don't allow you to run CPU at 100% all the time because it's usually shared to some degree with the other instances in the rack.

Regarding traffic it depends on the VPS provider.

Digital Ocean doesn't charge for people who exceed their traffic limit. But they do intend to in the future. The forums say 0,02 dollars per gb.
Ramnode just suspends your account until you buy more bandwidth.

Not sure about the others. It's usually stated on their website somewhere. And you can also just email them.

You're right but I didn't want to complicate things. I should have said you can "theoretically" use 100% or something. They'll usually bitch at you for using 100% because each host machine is running over capacity with VMs. If your web app is at 100% all the time, you're probably doing something else wrong anyway.

Scaleway might be a better option if you don't have the need for super fast IO, it's unmetered with a dedicated CPU for €3/month

>mobile version works perfectly from pc but only works on some pages from phone
I'm made of rage

thanks user, from my experience with virtual machine I would tell that what you said it's the expected scenario.

I was taking a look at their billing page and this made me think it was more like a cloud service billing method:

>Each Droplet is billed per hour up to its monthly cap. The monthly cost of your Droplet is calculated by running the hourly rate for 28 days (672 hours). Once you reach that amount (e.g. $10/mo for a 1GB VPS), you will not be charged for your server's additional runtime. This allows you to destroy your server before the maximum monthly charge and pay only for what you use.

but I misunderstood the last phrase, they are just stating that I wont pay more than 5$ if I just destroy the instance at some point.

>run a node websocket server on a different computer on my network
>connect to it via my external IP
>connection keeps dropping every 10 seconds
>connect to it through any other network or through cloudflare
>it works perfectly

thanks m8

I have a website that uses lots of images. And I'd say 60% of my images are my own, 30% creative commons, 5% public domain and 5% unknown licences. This last category forms a commercial risk to me so I plan to replace them in the future.

I dont mind taking images down on request. But I'd like to keep my hoster out of it because I just need the website to stay online.
Is there some kind of hoster that just ignores or forwards dmca's and let me handle the complaints myself?

It's a travel site btw.

Just put a visible link to a DMCA form/email in each page? That way they'll send them directly to you instead of going after your host.

That's a good idea actually.

Things like these got me worried.
mashable.com/2016/09/06/warner-bros-dmca/

Any of you memers use SQLAlchemy?

Say I have the following tables/columns:
User: id, name
Proposal: added_by, approved_by

How would I pull names of both submitter and the person who approved?
I tried doing:
proposals = Proposals.query.filter(Proposal.expired == 0) \
.join(User, and_(User.id == Proposal.added_by)) \
.join(User, and_(User.id == Proposal.approved_by))
.order_by(Proposal.approved_at.desc()).all()


But that just returns an empty result set, what do?

disgusting, so glad Django's ORM is a thing

I'm currently trying to make a program that scrapes data from a website. Ideally I would like to make it a static website which does all the work clientside. This would make it fully cross-platform, and I'm most comfortable doing UI in HTML/CSS.

Is there a way to load an external page using Javascript? I've tried using XMLHttpRequest, but this is blocked by same origin policy, and the site doesn't allow cross-origin resource sharing. I also tried loading the site into an iframe in order to traverse the DOM, but they seem to block this, and even if I could, some stuff I've read online says that the embedded site can block access to the DOM within the iframe.

Doing the same thing in, say, Python is easy, using a library at least. Is there really no way to do a normal HTTP request using Javascript in the browser?

You cannot load anything from a different website with XHR if it doesn't send an Access-Control-Allow-Origin header. You also cannot interact with a different website at all inside an iframe. It only works if the website is on the same domain AND protocol.

This should be obvious, if it was allowed it would be a HUGE security risk.

That shit is blocked for a reason, friendo.

If you're dead set on using HTML/CSS/JS instead of python, you could make an Electron app. Or just learn how to use curl.

Yeah, I knew it was blocked for a reason, but this seems like a thing that other people may have wanted to do in the past, and I was hoping there was some kind of built in functionality to load it in a safe mode, that used a new session for the connection or something.

Maybe I'll check out Electron, or just do it in Python and maybe QT or something.

Anyone here in Berlin?

Thinking of moving there to work in a meme startup.

How much should a Django weeb dev be earning in Berlin?

No professional web dev experience yet, but I've working in an analyst job in a tech startup for the past two years

I want to do Iron Yard but I'm terrified of loans.

I would need everything financed including the cost of living allowance.

This bricks my financial stability but I don't know what else to do. I can't get a job with just my portfolio here.

Anyone good at this school stuff have any opinions?

Smalltown USA, didn't even know college loans existed until I was 20.

>Code school

Just learn it yourself my mang

is the startup sellics ?

Nope, haven't applied anywhere yet, just looking around at the moment.

Who are sellics?

just throw your code into PHPStorm and debug it that way

xdebug isn't difficult to set up

Ask on Sup Forums. It has a German general.

I know some of it. Expert level vanilla js, bb.

I need something like it to focus on building an impressive portfolio in the shortest amount of time while learning node. Also maybe companies will pity-hire me like real degreefags because nothing says I am serious about a career choice like 20 grand of debt.

I feel like setting up a vps is unnecessarily complicated. It's not hard, but there is no reason why images shouldn't have everything preinstalled. And you could just change a password and enter a list of domain names and done. The folders and config files would just automatically be generated.

Although I guess that's what cpanel, plesk and directadmin are for.

i've been going through codeacademy, and now have got a private github repo linking from a domain of mine from AWS so that's all good, and I'm using atom.io and git.kraken to manage everything.

One thing I'm confused at and don't think codeacademy do a good job of explaining is how you link to bootstrapper, JS, etc. How does this work? Do I store these files in the root of my repo, can I link to external ones like the ones codeacademy do, are there differences between them?

CDNs are cached so they don't need to be redownloaded between several websites using the same CDN.

That decreases load time.

I only link locally when I heavily modify whatever I'm using which I always do.

make some scripts for that. in fact, I bet there are easy scripts for that already. I know there are some that let you download and install wordpress automatically from the CLI

If you don't send a ping every once in a while, the connection will be dropped

>CDN
Great, thank you, I'll use this in the future then thanks developers.google.com/speed/libraries/

Seems the same CDN thing for bootstrapper too getbootstrap.com/getting-started/. Thanks for the help

I'm using socket.io which pings automatically, I even tried manually pinging and it still happened.
It works fine by simply not connecting to it via external IP while on the same network so it's not that big of a problem.

What's a socially acceptable language to build a website's backend with nowadays?

Curious about one little thing:

With python on CodeAcademy you can just

>print "string"

and it's fine and prints to console. I just downloaded PyCharm and instead you have to

>print("string")

and the first gives a syntax error. Why? I thought it's the same language and the syntax should be respected by both.