/wdg/ - Web Development General

/wdg/ - Web Development General - Special Christmas edition!

last thread: >This seasons' Advent of Code:
adventofcode.com/2016/

>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/

>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] backendDevelopmentBookmarks.md

>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
pastebin.com/pDT82mQS

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

Other urls found in this thread:

jsbin.com/quyafamomo/edit?html,css,output
jsfiddle.net/pgocakpx/
stackoverflow.com/questions/16080378/check-if-one-date-is-between-two-dates-javascript
goodbyepewdiepie.com/
sparkjava.com/
ninjaframework.org/
youtube.com/get_video_info?video_id=VGNwXq6vPoI
gist.github.com/anonymous/ed1fe37f0fd8977d2a08340c81d3ae64
wampserver.com/en/
httpd.apache.org/docs/2.4/
access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/7/html/System_Administrators_Guide/ch-Web_Servers.html
youtube.com/watch?v=sBzRwzY7G-k
stackoverflow.com/a/29080063
twitter.com/NSFWRedditGif

Le first

So guys I've been learning frontend for a long time now, and I have some experience with it so I made a react web app and it's going pretty well except I literally have no idea how to "put it on the internet" like I just know front end I don't even know how to google this fucking problem I don't know what to use or what I'm doing, like in this cases do you need to use shit like express or data bases? any ideas?

google how to set up a LAMP server (linux, apache, mysql, php)

I use both digitalocean and vultr as service providers.

Am I limiting myself by just using php/pdo and SQLite for my back end, then notepad++ for my text editor? I just dont see the need for anything more. I am a tiny bit limited with what I can do from the SQLite command line, but 98% of stuff I can do just fine. Super lightweight, no annoying bloated IDE, no GUI to hold my hand and do the dirty work for me, n00bs are easily impressed, etc.

How can I accomplish pic related?

The big middle area is a div that shows messages.

The bottom left is a non-resizable text area that should take up as much space as possible as long as it doesnt push the send button off the screen.

Duckduckgo it pleb

a real chat program will require using a backend technology like php / nodejs / python

is this supposed to be a comment section or an instant messaging chatroom

are you asking how to make a chat app or just howto design the front end to look like that?

Its an instant messaging chatroom that im writing for fun to learn JS and some other web stuff.

Using nodejs as the backend and websockets for the front end. Ive already written the back end and front end (im not new to programming and have written GUIs before in Qt and various Jaba GUI toolkits).

I have a working version but its ugly and im struggling with the html/css.

Just how to design the front end. Everything is already written, its just ugly.

design sucks, just steal someone's ideas

there you go user: jsbin.com/quyafamomo/edit?html,css,output

Same user working on js form validation from last thread here
Now i have to make a date field, like "Enter your birthday" in YYYY-MM-DD format
but i need to ensure that the data is a date greater than 1900–01–01 and less than today

heres my current code
HTML-
Date

*Please enter valid a date

JS-
var form = $('#form');
var date = $('#date');
form.on('submit', function(e){
if(date.val() new Date()){
e.preventDefault();
$('#dateError').show();
}else{
$('#dateError').hide();
}


Cant figure out what to put in the if statement condition, any help appreciated

here's a starting point

jsfiddle.net/pgocakpx/

i would then use the @media tag to change the width % of the text box and button based on the screen size, just make sure it adds up to 100%. Better methods may be out there, i did this in like 2 seconds

form validation/security should be done through the back end FIRST, user

also this

stackoverflow.com/questions/16080378/check-if-one-date-is-between-two-dates-javascript

its pretty easy to compare unix time

Those of you who are employed, how much are you making?

dude just google job salaries. Also depends if youre junior level or senior

Calm down, I was curious about the /wdg/ folks specifically

asking people their income is weird

Not properly employed but I'm working 80 hours a month in a small agency as a side job (I'm a university student) and I make 1.1k Euro after taxes.
Probably not that much but it's easy money. 3 days a week and I have a lot of freedom about how I'm developing. I do back and frontend there.
This is in Germany by the way.

Its an anonymous message board dude, i can tell you that my nuts smell bad and i havent showered in two days and it doesnt matter

goodbyepewdiepie.com/

Added linear prediction

Gainfully employed. 63k/yr. I got a job offer for 70k/yr, but I decided to reject it because it's extremely cushy here (come in whenever, dress however, do whatever on the Internet).

I've fapped 5 times here.

>i've fapped 5 times here

ABSOLUTE

MADMAN
A
D
M
A
N

How do I pull info from an iframe? I want to use one piece of information from an embedded google trends graph.

You can't, unless it originates from your own domain.

Security reasons.

I have a php image upload system where I crop square thumbnails out of the images during the upload process. Only a few images made it but I got this message


Fatal Error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 3280 bytes) in createSquareThumbnail.php


What do

Quick Questions to real web developers:

Is CGI interface used to write the actual server logic? Or is wikipedia wrong?

Do you have to learn frameworks to use it? (ie for authentication, session management etc?)
If so, which language are the dominant ones written in?

Can I go anywhere in web dev without learning JS, PHP and the rest?

I know java, but the java server architecture/frameworks seem incredibly boring to learn and not in much demand, especially for short term gigs.

Mid level dev in a very low cost of living area. Making ~$70k with bonuses. Rarely work more than 40 hours a week. It's pretty chill.

Also just got a $50k bonus due to my company getting bought out. Got raped on taxes, though

>I know java, but the java server architecture/frameworks seem incredibly boring sparkjava.com/
ninjaframework.org/

Got my second interview at LaunchCode.

Went in with a PHP/SQL project with hopes of being placed as a front end developer. They said I didn't demonstrate enough JavaScript, so I reworked it to include a bunch of JavaScript form validation.

I'm also building a small social media website from scratch, hoping to have it functional by my interview next week. Things are looking promising lads

goodjob man, what kind of JS form validation

How to get good at css + modern app design /wdg/?
All my apps look like shit unless I copy someones design/template. Also sick of using bootstrap, it helps in some areas but carries unwanted baggage plus looks generic as fuck.

only way with css imo is to just keep using it. I've kind of put it off for a while, and i definitely regret it now, but just keep working on design projects. CSS can be really finicky but after you continue to work with it you learn to build with it a lot quicker

>Is CGI interface used to write the actual server logic? Or is wikipedia wrong?
Yes, CGI is usually used to conduct server-side logic. Or an equivalent web server module (mod_php, mod_passenger). But web server modules are basically the exact thing as CGI. ( an interpreter that executes scripts, and acts as an intermediary between the script and the web server )

A new trend is to try to push more and more of the application logic into client space via javascript frameworks, but at the end of the day, even client-side webapps will need to make periodic requests to the backend. (to query data or save state) And again, all requests to the backend will invoke a cgi script (or the like). The request passes data in, the script processes it, and passes some output back as the response.

>Do you have to learn frameworks to use it? (ie for authentication, session management etc?)
Not technically. Most of the time you can do anything you need to do with just the base language.
However, you should learn frameworks. Maybe not right away. It is good to learn the fundamentals and "reinvent the wheel" a bit in the beginning. It helps you develop a good understanding of what you're doing. But once you get comfortable, and understand exactly what is involved in these things (auth, sessions, registration, mailers, etc), then you should learn frameworks. Frameworks will save you lots of time. (if you know what you're doing)

>If so, which language are the dominant ones written in?
PHP. Despite Sup Forums's hate for the language, most of the world still uses php for their webdev needs. Why? Because it is free, its been around for a while, there's an abundance of php devs, and its the simplest to get started with. (and doesn't require any fancy configuration)

>Can I go anywhere in web dev without learning JS, PHP and the rest?
Technically, yes. But you won't go as far.
Both JS & PHP are crucial to most modern websites/webapps. Without solid experience in both, your stuff will always be somewhat limited and will take longer to produce. There's a high expectation of web developers these days. You're expected to have experience in design, backend logic, frontend logic, and even a little experience in system configuration.

Most places will also want to see that you have a reasonable degree of experience with at least 3 frameworks. They like the guys that know a dozen frameworks. But usually if you know at least 3, you'll still be able to get serious consideration for the position they're interviewing for.

Guys. I pray that you can help me. I've been searching for hours, but I can't find the answer to my question.

I'm using the youtube api to query data about videos. I'm using the 'get_video_information' endpoint.
Ex: youtube.com/get_video_info?video_id=VGNwXq6vPoI

They return the data in ugly application/x-www-form-urlencoded format. I've been parsing it, converting it to JSON.

There's still a property that I don't know how to parse.
On line 347, you can see there's the 'fmt_list' key, and an array of string values.

You can see quite obviously, further parsing is required. These strings are composed of 5 values, delimited by the '/' character.

The first value is the itag.
The second value is the resolution.

I don't know what values 3, 4, & 5 represent. I've googled the matter extensively. For hours. There is just no documentation on this, and the few bits of code I can find, everyone always seems to want to pull the resolution out, and disregard the rest. Nobody seems to know/care what values 3, 4, and 5 are.

I will say that I have reason to suspect one of these values may represent 'ipbits', but i'm not certain.

Does anyone know the keys that correspond to these values?

I've been there. I know it has that table that converts itag number to the matching codec.

But none of that helps me to decode these values.

I mean, it's great that itag 22 is an MP4 of H.264 encoding. But that doesn't tell me what the values: '9', '0', and '115' mean.

It's so frustrating. I literally cannot find anything on how to decode this parameter.

----
Also, this is what I have so far:
gist.github.com/anonymous/ed1fe37f0fd8977d2a08340c81d3ae64

Not much, I know. But I kinda got stuck on trying to solve the mystery of the enigmatic fmt_list parameters.

How to get job doing freelance? I need $100. I don't care what kind of work it is.

>I don't even know how to google this fucking problem

start by googling "how to deploy react app" or something similar. I haven't done this, but it looks like Heroku is an option. I know that Heroku made/makes deploying Rails apps super is easy. if their stuff still works the same, you can deploy to some temp address (URL will be random strings + heroku.com or something like that) for free.

super easy*

you could contact them.

> Windows
Open "C:\Windows\System32\Drivers\etc\hosts"
add "127.0.0.1 firstapp.local" to the file
install wamp ( wampserver.com/en/ )
setup a virtual server and all of that

You have now simulated putting your shit on the internet.

-----

If you need to actually, for real put your shit on the internet:

- go to digital ocean and get a droplet, I recommend fedora
- learn to use the package manager ( apt-get / dnf / yum )
- install httpd, mod_php, mariadb-server and all of that shit
- read: httpd.apache.org/docs/2.4/ (all day, everyday)
- purchase a domain name, and get yourself registered with the registrar
- purchase dns services ( noip.com , dyndns, or godaddy or something) OR host the dns server yourself
- make sure your registrar has the correct mapping of your domain name to your dns server
- setup all the records on your dns server
- make sure apache is setup all good on your server, and that your app/site is in the webroot
- check those named virtual host entries, make sure they're all correct
- make sure your firewall is allowing traffic to pass on port 80 and 443

TL;DR:
- Domain Name (registrar)
- Domain Name Services (nameserver w/ DNS Records)
- Server with Apache Installed
- Apache is running, files in proper directory, config all good
- Firewall isn't being a bitch
- selinux isn't being a bitch

Congratulations, you're hosting your own shit.
Now get back to work.

>PHP/SQL project
>hopes of being placed as a front end developer

Contact who? Google?

Do you honestly think they'd talk to me?

Everyone who has tried to ask about this on the forums has gotten the generic "this endpoint is not an officially supported api" answer.

ughh ignore this hipster. it's 2016.

yeah that's what I meant, contacting YouTube/Google. I probably didn't read your post carefully enough. just saw that you said you were using the YouTube api. didn't realize it wasn't something that's not officially supported. still worth a try if you've been searching for hours? idk

access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/7/html/System_Administrators_Guide/ch-Web_Servers.html

>code challenge: build a rest service in ASP.NET
>never touched ASP.NET or the framework at all before now

Just tell me if I'm completely and utterly fucked or not.

well I just did a Google search and there are multiple tutorials. so probably not fucked at all. anything you can Google your way through isn't that hard. just a matter of how long it will take.

Building REST in .NET is easy. And if you really know programming then picking up C# shouldn't be too hard.

Make $80k as early-mid level developer

Need some help with ERR_NO_RESPONSE

i have a button that increments a database value and then fetches the new value on screen

When I click it too fast the page stops querying and when I refresh I get a blank google chrome error screen.

Is this a result of some MySQL setting being too restrictive or what?

You're not handling deadlocks

>deadlocks
Okay so in this case what would I do?

Try again if the query times out

but doesn't sql have some sort of buffer where it will wait until one query is done?

Yeah but if you fill it too much, additional ones will just time out

how do I make this timeout infinite?

I did it guys! I got hired as a developer! Today was my second day and I'm still so hyped. I have 3 out 4 years of a CS undergrad degree from a good school, but I'm on hiatus for medical leave, so on paper I'm just a high school grad with one summer internship in IT and no certs. But the github and the projects and the blogging and the going to meetups paid off - I met someone looking to hire at a Python meetup and I blew their coding test out of the water, I had so much time left I wrote up unit tests lol.

I'm getting $36/h in Dallas, I think 30/h is about 60k. So, low/normal for diplomaed entry dev in a big city, but high for no degree and hardly any official work experience.

God, I'll be able to buy a real computer now. And wheels. And a phone, or at least a battery.

Congrats user! im still looking, but got a pretty good github. what kind of meetups did you do, and im pretty bad socially, but how did you strike up conversation with random people...i cant do that bit

What do you think, is this a good starting book for Django?

obeythetestinggoat[dat]com

May I ask what you put on your GitHub account?

I have more or less small projects ("Sup Forums programming challenge" sized), but that' won't do the trick, will it?

So what kind of stuff did you put on GitHub? Contributions to OpenSource projects? Write your own websites?

>The first value is the itag.
>The second value is the resolution.
>I don't know what values 3, 4, & 5 represent.

As I understand it, it shows all available formats, listed in quality order, so you can just take the first one and ignore the rest.

Unless you want a lower resolution, that is.

You are literally missing the point.

I want to know WHAT the values are FOR.

This has nothing to do with quality. And I certainly don't want to ignore data.
I want the data. I want to know how to interpret it.

I want to know what it means.

I'm not just gonna ignore it.

Which javascript framework/library do I start with? There are just so fucking many of them

first vanilla
then jquery
then look around you to see what is getting hired most

Dude.


1. Maybe your question wasn't that well formulated, then?

2. I tried to help YOU and you are just bitching arroud.


Maybe I'm missing something, but why don't you go to a random YT video and compare the values to the values on the site?

It's probably some of them values: 1080, 720, 480, 360, 240..

this video is a good start desu youtube.com/watch?v=sBzRwzY7G-k
I wouldn't learn jQuery today anymore. it's shit and doesn't scale

Most jobs require it your personal opinions are irrelevant

It's really easy to learn so no real reason not too

Many jobs require cleaning toilets as well, but that doesn't mean I'm gonna do it

1. Vanilla JS
2. Vanilla JS (no really, what is: hoisting, memoization, callbacks, iterate over properties, how does "this" work, variable scope, Document Object Model and Browser Object Model ...)
3. JQuery (easier DOM manupulation)
4. Jasmine (module testing)
5. Webpack (dependency management)
6. Vue JS (single page applications)

With those you will have a solid foundation in JS and know serveral important tools. If you can apply those (I don't mean to know every single jQuery method, just know how things work generally) you might look into some optional power-ups:

7. Node + Express (if you want to go full stack with JS for your backend)
8. ECMAScript6, TypeScript or CoffeScript (more "beautiful" JS, avoid the quirks of JS)
9. React/Redux, Angular2, Ember ... (bigger Single Page frameworks, if you want to work as a JS guy)

How are the future prospects of design jobs in this industry? Like, UI designer and UX designer? What are their salaries compared to frontend/backend? Will they die soon or stay?

using async/await when targeting ES5 in typescript 2.1 transpiles into a mass of switch statements and promise generators (duplicated in every file that so much as declares any function as async). They shoulda stuck to their guns and told everyone to fuck off requesting the feature.

What are the key things I should learn when I'm learning node.js? And what are some good and fun projects I can make now in the beginning?

>What are the key things I should learn when I'm learning node.js?
I'd recommend trying to learn nodejs

>And what are some good and fun projects I can make now in the beginning?
Hello world!

How do I do a indexer for public trackers in HTML?

what do you mean as "indexer"?
in pure html? you can't.

if you wanna go even more crazy, install gentoo and use vim

How can I show scrollbar when I hover over a div and then hide it afterwards?

overflow: scroll;

use jquery to add class that has overflow scroll to div on hover, then off hover add class with overflow hidden

I have a problem with React.

I have a component Chat, to which I have added a method messageReceived(message).

I have a parent component Game.
Here are its render and componentDidMount methods.

render() {
return (



);
}

componentDidMount() {
var chat = this.refs.chat;
chat.messageReceived('hello world');
}


I keep getting errors, telling me the method messageReceived doesn't exist.
Specifically
TypeError: chat.messageReceived is not a function

halp

Thanks. Eh, I don't know how it'll work, I have a content inside of it and when the scrollbar shows, it gets over it. The only way would be if I could style it and make the scrollbar really narrow, just noticeable enough that the user knows that div is scrollable. Then again, I guess it should be obvious since the content gets cut in half at the bottom.

make the div wider or add padding to the right of the div

Is it bad if I put an and tags inside of tag? It makes it easy to change font color when I hover over an img too, without having to use those sibling selectors and what not.

probably not the best practice. Why not just give the h1 an id or class then change it when you hover over the image? shouldn't have to use sibling selectors at all

I guess I'll do that, thanks. Just don't know if it's a good idea to have millions of small jQ snippets like that for everything if I can achieve it with CSS or rather just ignore. Does that affect performance?

hey lads! i have a question regarding hosting

I have a website hosted on godaddy and my client just purchased a .ie domain he wants to move the website to. I added a "off site DNS" to the godaddy DNS manager for the hosting - it gave me two nameserver adresses. What should i do with these? I know it should be a simple process but I've been trying all week and I can't get it to work.

Should the DNS hosting on the domain be internal or external? Do i need to add a DNS record anywhere?

do i need to close a php connection for each .php page i have? if the user closes the window of a .php page does it automatically close the connection or are they still connected to the db? then every time they open up the window it re-connects?

if you already have jquery included and run a simple function to change the color of stuff, it wont affect performance at all. Just dont include too many .js frameworks or libs or you will start to notice performance decline. Check in the developer tools of Chrome, there's a timeline of the processes. Most cases though just Jquery is fine....hopefully you're using the minified version....or even better the slim minified version

>godaddy
stackoverflow.com/a/29080063

have fun getting fucked by them, I endured them two years.

Yeah, minified and no other frameworks. Thanks.

I think I tried this already but I will try again! Thank you user. What hosting should i reccomend for my clients then if godaddy sucks ass?

if they need to manage it there's no way around shared hosting.
just have a look if they support let's encrypt or try to avoid it to cash in selling their own, that's a good first indication.

otherwise a vps is usually a lot cheaper and more flexible to set up.