/wdg/ - Web Development General

>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.wikipedia.org/wiki/Comparison_of_web_application_frameworks
[Gist] backendDevelopmentBookmarks.md (embed)

>Useful tools
pastebin.com/q5nB1Npt/ (embed)
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/ (embed)

>How to get started
pastebin.com/pDT82mQS (embed)
pastebin.com/AL6j7GEE (embed)

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

Other urls found in this thread:

jsfiddle.net/5qjxprta/1/
java.com/en/download/faq/java_javascript.xml
softwareengineering.stackexchange.com/questions/102090/why-isnt-java-used-for-modern-web-application-development
jsfiddle.net/gLtmgd51/
tutorialspoint.com/servlets/index.htm
projects.spring.io/spring-boot/#quick-start).
twitter.com/NSFWRedditImage

Web development is for stupid niggers

Trying to learn me some ruby on rails,

can someone tell me why it's rendering show.html.erb instead of goy.html.erb?

If you can see, the articles controller defines goy.

If i call articles/new, it does call the new.html.erb

If you call something other than new, it will render show.html.erb no matter what.

You need to show me your routes.rb

Rails.application.routes.draw do

resources :articles
get 'articles/goy'


root 'welcome#index'
end

I'm seem to be just making apps that connect one web api to another as of late. any suggestions lads?

Does there exists a tutorial,video,tips for creating a wordpress e-commerce theme?

fuck im so lazy to read documentation.

Is there a way to make a new sub array every time an each() or for loop iterates.

Hi /wdg/, newbie here.

From all the provided learning materials in OP's pasta, what is the best focused in WebDev?

Bump for this please

name one reason i shouldn't use node.js to build a message board.

Java anywhere in the title is reasons 1-10.

>Finished a very thorough full stack course.
>Feel reasonably confident.
>Start building portfolio site.
>Write all the back end in a couple of hours.
>Front end taking me days just because I'm finicking around with what to put on my page.

At what point should I start applying for jobs? I'm pretty sure that given access to google I can figure out most problems but I'm definitely still a little bit hazy on some aspects of JS.

Any advice would be greatly appreciated.

it's a good idea.

javascript is a pretty nice language.

protip though. use EventEmitter as much as possible.

it makes your code super clean and uncoupled.

it's really fun to have index.js just be a bunch of object inits and registering .on('event', () => {}) listeners.

Can /wdg/ explain to me why all modern sites are dogshit slow, require 10MB of javascript and CSS, and redraw or refresh themselves 3-4 times before settling down. All for maybe 40KB of actual text/image content, maybe.

And why the hell did everyone suddenly decide reinventing the iframe was a good idea? With those floaty nav bar things everywhere. What the hell is going on?

all that slow is the botnet nonfree js crap they pull in external to their site.

react, and other js frameworks standalone are quite fast.

jsfiddle.net/5qjxprta/1/

HALP

var objectPlayer = [ 50, 50, 100, 100, 'div1', '#00ff00' ];
var objectNPC = [ 50, 50, 300, 100, 'div2', '#ff0000' ];

function collision( a, b )
{
var a = [
[a[2], a[3]],
[a[2]+a[0], a[3]],
[a[2], a[3]+a[1]],
[a[2]+a[0], a[3]+a[1]]
];
var b = [
[b[2], b[3]],
[b[2]+b[0], b[3]],
[b[2], b[3]+b[1]],
[b[2]+b[0], b[3]+b[1]]
];

var md = [];
var n, i;
for(n = 0; n < a.length; n++)
{
for(i = 0; i < b.length; i++)
{
md.push(a[n][0]-b[i][0]);
md.push(a[n][1]-b[i][1]);
}
}

var quadrant=[ 0, 0 ];
var col = [ 0, 0, 0, 0 ];
for(n = 0; n < md.length; n+=2)
{
if( md[n] < 0 & md[n+1] > 0 ){ col[0]=1; }
if( md[n] > 0 & md[n+1] > 0 ){ col[1]=1; }
if( md[n] < 0 & md[n+1] < 0 ){ col[2]=1; }
if( md[n] > 0 & md[n+1] < 0 ){ col[3]=1; }


part 1

Depends on what you want to do. Career as a professional? freelance?

>java === javascript
no, they're as different as two languages could be.
See Java's brief explanation: java.com/en/download/faq/java_javascript.xml

What do you want to happen that isn't? And I'm guessing this is vanilla JavaScript we're working with here

if(((md[n]*md[n])+(md[n+1]*md[n+1])) > ((quadrant[0]*quadrant[0])+(quadrant[1]*quadrant[1])))
{
quadrant[0] = md[n];
quadrant[1] = md[n+1];
}
}
if( col[0] & col[1] & col[2] & col[3] )
{
var closest = [ 0, 0 ];
if(quadrant[0] > 0 & quadrant[1] > 0)
{
a[1][0] -=b [3][0]; a[1][1] -=b [3][1];
a[2][0] -=b [3][0]; a[2][1] -=b [3][1];

closest[0] = ( a[1][0]*a[1][0] ) + ( a[1][1]*a[1][1] );
closest[1] = ( a[2][0]*a[2][0] ) + ( a[2][1]*a[2][1] );

if( closest[0] > closest[1] ){ objectPlayer[2] -= (2); }
if( closest[0] < closest[1] ){ objectPlayer[3] -= (2); }
}
if(quadrant[0] < 0 & quadrant[1] > 0)
{
a[0][0] -=b [2][0]; a[0][1] -= b[2][1];
a[3][0] -=b [2][0]; a[3][1] -=b [2][1];

closest[0] = ( a[0][0]*a[0][0] ) + ( a[0][1]*a[0][1] );
closest[1] = ( a[3][0]*a[3][0] ) + ( a[3][1]*a[3][1] );

if( closest[0] > closest[1] ){ objectPlayer[2] += (2); }
if( closest[0] < closest[1] ){ objectPlayer[3] -= (2); }
}
if( quadrant[0] > 0 & quadrant[1] < 0 )
{
a[0][0] -=b [2][0]; a[0][1] -= b[2][1];
a[3][0] -=b [2][0]; a[3][1] -= b[2][1];

closest[1] = ( a[0][0]*a[0][0] ) + ( a[0][1]*a[0][1] );
closest[0] = ( a[3][0]*a[3][0] ) + ( a[3][1]*a[3][1] );

if( closest[0] > closest[1] ){ objectPlayer[2] -= (2); }
if( closest[0] < closest[1] ){ objectPlayer[3] += (2); }
}

part 2

if( quadrant[0] < 0 & quadrant[1] < 0 )
{
a[1][0] -= b[0][0]; a[1][1] -= b[0][1];
a[2][0] -= b[0][0]; a[2][1] -= b[0][1];

closest[1] = ( a[1][0]*a[1][0] ) + ( a[1][1]*a[1][1] );
closest[0] = ( a[2][0]*a[2][0] ) + ( a[2][1]*a[2][1] );

if( closest[0] > closest[1] ){ objectPlayer[2] += (2); }
if( closest[0] < closest[1] ){ objectPlayer[3] += (2); }
}
}
else
{
if(col[0]&col[1]&(!col[2] & !col[3])){ return 'top'; }
if(col[2]&col[3]&(!col[0] & !col[1])){ return 'bottom'; }
if(col[0]&col[2]&(!col[1] & !col[3])){ return 'left'; }
if(col[1]&col[3]&(!col[0] & !col[2])){ return 'right';}
}

}

part 3

This is supposed to be collision correction between two squares but I basically cobbled it on the fly and am also retarded.

It works but it is monstrously bloated.

As a java and oracle-sql programmer, I think professional, I want to implement those knowledge to use on jdbc.

And you want to develop software or web apps?

>supposed to be collision correction
What in the heck is that?

I plan on learning both but right now I just want to learn web apps.

var highlightBtns = (function () {

$("#startButton").on("click", function (event) {
event.preventDefault();
$(".rangesGrid table").each(function () {

var userHands = [];
var positionName = $(this).closest("[id]").attr("id");
$(this).find(".highlighted").each(function () {
userHands.push($(this).text());
});

});
});
}());

Ok I have looked at a few places, but I am stuck on JS objects, what I want to do is when the start button is pressed, the function goes through all the tables that are made, and pushes the highlighted cells in each to an array.

I have got most of this working, I just don't know how to do the object part, any help appreciated.

While I think you can do a back-end in Java, I don't think I've ever seen any Java developers here. It's not super common to do a back-end in Java
softwareengineering.stackexchange.com/questions/102090/why-isnt-java-used-for-modern-web-application-development

There are plenty of other options though, that's just my 2 cents. I also don't know of any resources to get started doing a back end in Java

I don't get what youre doing or what you mean.

Delete the first and last lines, does it work now?

you got it m8
var highlightBtns = (function () {

$("#startButton").on("click", function (event) {
event.preventDefault();
$(".rangesGrid table").each(function (thisIsATable) {
//do something with thisIsATable
console.log(thisIsATable);
var userHands = [];
var positionName = $(this).closest("[id]").attr("id");
$(this).find(".highlighted").each(function () {
userHands.push($(this).text());
});

});
});
}());

hm, ok then user.
Appreciate the help.

>It's not super common to do a back-end in Java
But that's wrong
It's my back end language of choice. There's also lots of jobs offering for java back end stuff, java being enterprise has even reached meme status

The follow up to collision detection.

>It's my back end language of choice
Maybe you can help him () find some resources for getting started with Java as a back-end. I don't know of any

So you're mapping two arrays of coords waiting for them to intersect?

No that function detects collision first by calculating the Minkowski difference (md) and then corrects them by determining the closest line to square B in square A by determining the quadrant square B is intersecting the most and determining which point is the second closest to the intersecting point. Then once the closest side to the collision is determined I just subtract either x or y.

Yeah, gonna need simpler English than that

I'm passing two objects, determining whether those two objects are colliding and then making them un-collide.

Okay, use a fiddle or something like this next time

jsfiddle.net/gLtmgd51/

Also, what is this doing wrong? I see it's spitting out "left"

It's not doing anything wrong. It's just bloated as all fuck and runs like shit.

So same as other languages, you can either start learning to use the core apis to hopefully get a feel of how everything works and then look into the modern frameworks that everybody uses to get stuff done or directly skip to said frameworks.

In java's case the old way of doing it would be handling http requests from a servlet running in a servlet container like tomcat, handling database connections through jdbc. You'd serve the front end either as static html + js content, calling your servlet endpoints with ajax requests and whatever, or with some templating engine like jsp pages.
All this stuff is old as fuck and learning material is available all over, this tuorial for example seems to be a good starting point : tutorialspoint.com/servlets/index.htm

Otherwise you may want to skip directly to nicer to use frameworks like spring. Pick either graddle or maven as project manager (dependency management, test runnig, project packaging and whatever) and use spring boot to autoconfigure your stuff for you. The official getting started tutorials and example projects are a nice place to start (projects.spring.io/spring-boot/#quick-start). This can embed your server into your executable, handle orm mappings, setup user authentication mechanism or whatever really through their bazillion sub projects. There also are lots of tutorials available. You just want to avoid using too outdated documentation.

Am I missing something with objects?

Every example I see, it has stuff like

name: "something",
rooms: "number",
ect.

Shouldn't there just be keys and the values be empty, and you add them later?

What is confusing you? It is realy contextual whether or not you want predefined values.

It also depends which language we are talking about since in C-like languages you have to actually declare objects as types while in js you can just assign a js object outright.

JS, so I don't need to put anything in the values when I define the object keys

Thank you very much user.

You can do this yes.
var test = {
'valueA':'',
'valueB':'',
'valueC':''
};

>go to website
>ctrl-F
>their own search implementation pops up
>needless to say it doesnt work

today the web died a little bit

Dont blame the codemonkey blame the blogger who wrote an SEO article that says on page search analytics will make you instantly rich and famous no matter how small or what type of business you run. I just had to roll my own on page search stuff so I can relate even if I didn't hijack that particular functionality.

I'm only answering you because Sup Forums hates Rails.

>can someone tell me why it's rendering show.html.erb instead of goy.html.erb?

This is correct.
With "resources :articles" you created the following actions:
index/show/new/create/read/update/delete

So "GET articles/goy" triggers the show action with the parameter (or rather "article id") "goy".

I'm not sure what you want to do here, but as I understand it you want something that is usually considered bad practice - at least by some people, who argue that all your routes should be CRUD. So in your case rather make a "goy controler" and put your action in a show action there:

# routes.rb
get 'articles', to: :show, controller: 'goyim'

However, that only one possibility. You could also set it up that the show action does something "funky" when it gets "goy" as parameter, depends on what you really want to do.


Maybe you should look though some tutorial like "Rails in Action" to get the hang. Rails is pretty easy abd powerfull, but it's opinionated, so if you work against it you'll have a hard time.

Oh, I fogot the most obvious thing:

If you want to use the "goy" action at a certain article, your route sould be something like this:

www.example.com/articles/1/goy

>vue 2.2: 74kb minified
>angular 1.6: 163kb minified
>angular 2.4 (bare necessities: core + common + forms + http + platform-browser + zone.js): 492kb minified

>not using bloatware: 0kb minified

>only capable of reinventing the wheel: unemployable

how can i break up what i get with an ajax call? why does it all go into responseText?

>how can i break up what i get with an ajax call?
wat

>why does it all go into responseText?
Where should it go?

i want to put one part of it in another variable and the rest in responeText. Is that possible? When i print out the responseText it all goes in the same spot.....retarded if you ask me

You're not making sense. What is it you're requesting? HTML? JSON? Other kind of data?
And how is Javascript supposed to know how you want to break down your data?

im grabbing data from a table. When i print out the data its all in one variable (responseText)

nvm dude i dont think its possible

Sounds like youre using IE. Are you using IE?

You can do data streams with vanilla js client side or easymode with a meme library in node

i'm assuming you're fetching data from a server to a web page using ajax

1. make your server serialize result data, into json for example
2. grab responseText, deserialize json into javascript object
3. you can now manipulate your data the same way you could on your server, congrats
4. now go read a book and learn how the web works

no i dont use IE

i just called another ajax request

then you dont have access to the responseText until the request is complete

ya i do

first function gets response, prints it to the page, then that calls another function that gets a response, then prints other data to a different part of the page

>Sup Forums hates Rails

How the fuck can you hate THIS

i would rail these rubies

Look at that harlot, wearing mascara, eyeliner AND eyeshadow for a video on RoR. I bet she does anal on first date.

database calls

>she

I challenge you to write a better search function.

google.com

>echo'ing all of that

no thanks, jeff

Don't know if your still here, or if anyone else can help. Trying to get it to make new object(s) when the button is pressed.

var highlightBtns = (function () {

$("#startButton").on("click", function (event) {
event.preventDefault();
$(".rangesGrid table").each(function () {
function Position(name, hands) {
this.handName = name;
this.userHands = hands;
}

var range = new Position(positionName, userHands);
console.log(range.name, range.year);

var userHands = [];
var positionName = $(this).closest("[id]").attr("id");
$(this).find(".highlighted").each(function () {
userHands.push($(this).text());
});

});
});
}());

I have an app that uses laravel as backend and react for frontend. Do I have to manually create an empty blade file that extends the layout for every react router page because otherwise I get a not found error?

No. Learn how to properly route a Laravel application. Honestly, React with a PHP backend is best with PHP only providing API endpoints.

I challenge you to use indentation

fuck man, ditch the frameworks.

vanilla php5.0+ with AJAX calls is the way to go

Too modern
ANSI C + CGI is the way to go

I just spent an hour troubleshooting why my component function in React wasn't working. Turns out I just forgot to bind it with this. Time to drink boys

ES6 classes? There's an autobind-decorator package that automatically binds methods to their component instance

Is it possible to host a HTTPS NGINX site that's running a react webapp with proxy pass to the API endpoints on node.js?

I have to provide a route in Laravel otherwise it thinks the route doesn't exist. I can go to the page I want by navigating and clicking buttons in react router but if I just type the url it won't work.

That was my plan when I started but react native made me change my mind.

nice, I'll look it up. thanks m9

I plan on hosting my Node.js webservice (web server - API - Database) on a single Amazon Web Services EC2 server and I also plan on buying a DNS record from there.

Is this a good idea? Are there cheaper or all round better alternatives?

>Using indentation when not forced to

anyone use Iris?

aws stuff always scare me as i'm never sure what i'm actually going to pay each month
maybe try to host on a vps if you don't need your stuff to scale rapidly or whatever
digital ocean is nice and comfy but there are cheaper options on lowendbox to host small projects

>EventEmitter
>using node.js instead of superior good old php

Thanks! That Digital Ocean thing looks like it could be very useful during the testing stage, in which I will only be running servers in the weekend.

Do people actually use single-file components in Vue apps?
It seems so weird and unnatural to have CSS, JS and HTML all in the same file

when youre using tons of meme include .css and .js's, yeah im sure it does

how do you update data on your web app with ajax via select query? im using ajax read just fine, but if i want to filter to another record how can i do that?

How do people usually learn bootstrap?
Just trial-and-error messing with CSS from the bootstrap reference, like I'm (unsuccessfully) trying to do?

i found bulma.io easier to use.

bootstrap still feels obnoxious and incomplete.

Smart people don't.

The documentation for most CSS frameworks are pretty informative. It tells you where to put the classes for each type of element.

Basically most CSS frameworks have some sort of grid system that is typically based on "12 columns" and you're supposed to wrap a div with a row class with divs that each have column classes that add up to 12.

If you're using Chrome, right clicking on an element and clicking inspect element also allows you to see the styling that is applied to the element. You can modify the HTML inside your browser to change classes without having to modify your code.

I'll check it out, thanks

I know all the fundamentals of web dev it just seems like a lot of ritualistic inserting of class names for each element, and I don't really know how to combine stuff to get what I want. Also I'm pretty terrible at CSS in general

>smart people waste their time fucking with stylesheets all day
Is this the /wdg/ eqiuivalent of programming in C

>implying css is hard at all

>How do I test my CSS changes on Chrome on the current page I'm on?
>On Firefox all I do is just hold Shift + F7 or Ctrl+Shift+I to open the Style Editor, scroll to the bottom of the stylesheet page and paste all my CSS. Does Chrome have anything equivalent to Firefox's Style Editor?
>Nevermind, I figured out a workaround albeit a bit more cumbersome than Firefox's style editor. I just change the page source, and at the bottom of the block I just type in and and paste the CSS between those tags.

You can go to elements and enter shit in the panel on the right side, or just go to sources, select the CSS you want to edit, and edit it (pic related is the second version, notice how I changed the body's background-color to bright green and it became bright green). You can always just use jsfiddle for prototyping too.

Does anyone make any passive income though adsense on sites?

I need some ideas to get me started, an extra $50/month would be nice.

>At what point should I start applying for jobs?

Code 3 or 4 free PSDs to HTML, add some JS functionality and you're good to go.