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

wctc.edu/programs-and-courses/applied-technologies/web-digital-media-design/index.php
wctc.edu/programs-and-courses/business/social-media-marketing/index.php
wctc.edu/programs-and-courses/applied-technologies/marketing-media/index.php
jsfiddle.net/eamonnmag/Q567s/
github.com/ubuntufag/html
stackoverflow.com/questions/796087/make-a-div-into-a-link/3494108#3494108
paste2.org/64nb24nM
placekitten.com/200/70');
codepen.io/user/pen/VKwRXG
twitter.com/NSFWRedditVideo

>don't assume my social skills
I wasn't assuming anything. (I am now, though)

The reason I mentioned that is because a lot of people want to go into freelance web dev because they think it's a job where you can just sit at your computer and make websites, when in reality it's mostly talking to people and trying to sell them shit. Nothing about that was directed at you in particular, and you'd know that if you had actually read the post instead of sperging out at the mention of social skills.

>My issue has been more meeting people with small businesses who would actually want a website.
Then maybe you should find businesses with shitty websites and convince them to upgrade.

Trying to do this:

wctc.edu/programs-and-courses/applied-technologies/web-digital-media-design/index.php

and since this is more of an arts thing and not that really computer science, I'm thinking of getting some marketing certs along the way.

wctc.edu/programs-and-courses/business/social-media-marketing/index.php

and maybe

wctc.edu/programs-and-courses/applied-technologies/marketing-media/index.php

Does anyone have any recommendations or advice?

If you're trying to get into a programming / web dev / IT job, it's usually BS CS or don't bother. Companies mostly won't care about AS degrees and almost certainly won't care about the marketing certs. You're probably better off saving the money and self-teaching or doing courses on udemy / coursera / etc.

Fuck leaseweb.com, some pleb tried to ddos extort me and they suspended my dedi.

Shady people only come if you do shady shit. Your fault.

Need to design a new portfolio site. Any suggestions on a css framework?

I'm a fan of bootstrap for it's flex system. But i'd like to try something new.

Materialize is neat.

Does anyone know how to link to chrome bookmarks?

Misc

does not work.

I have no idea how to center a button in HTML5, so I just put it inside a div with align = "center".
Is that a bad idea?

learn css if you want accurate positioning.

just use vanilla css, you'll have like what 2-4 static pages to build?

>Hack a really cool canvas website during the weekend
>decide to implement it with proper structure and frameworks next weekend
>lose interest

And the cycle continues. I have a lot of projects but they are all unreadable/expandable native spagetti.

Sup guys. I'm making a web app with a dynamic form. When the user clicks 'Add Another' a new form field is generated where they can input information.
How do I get all the values from the form using JavaScript since the fields will not have a set amount or a set name/ID?
And how do I make sure none of them are empty?

It returns 0-2 as it should

What was the idea, user? Maybe someone else would do it.

Alright Sup Forums, I just don't get this fucking "headers already sent" php bullshit, please help.

Error:

Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /Applications/MAMP/htdocs/Mini TI/index.php:9) in /Applications/MAMP/htdocs/Mini TI/php/funcoes.php on line 60


Line 60 (where I'm attempting to start a session):
function iniciaSessao($nome, $email, $telefone, $endereco) {
if (!verificaSeSessaoExiste()) {
session_start();
$_SESSION["nome"] = $nome;
$_SESSION["email"] = $email;
$_SESSION["telefone"] = $telefone;
$_SESSION["endereco"] = $endereco;
}
}


Line 9 and beyond (where it says the output started):
> pic related

My form:

I wish I knew php so I could help you. Actually I'm glad I don't know php.

PHP is so ugly what the fuck.7

I always have some trouble when people use var name in their own language, mixing it with english terms.

For your error, it means you've already sent the header somewhere. Are you sure you're not outputting anything before session_start? session_start should be a priority.

Ah, I see you have a on top, that's probably why. session_start above any output.

Because it's written by some beginner.

Should I even bother self teaching this shit to get a job if programming is going to become over-saturated anyways with all the bootcamp grads?

So should I always put my php script before any html tag (like pic related)?

Not necessarily. It depends on your project structure. But as you can see, for sessions, it can cause problems. Simply put session_start on top of everything, even if you only use it later in the code.

that doesn't matter

Nobody is becoming a dev anymore because of how popular it is to learn. It's just not worth it.

alright
bento, free code camp, or the odin project?
respond quick or your house turns into a cumblasted anime figure

i dunno user. the way i have always learned is with youtube tutorials. pls no cum mr

thanks user!

Does this look right? I'm trying to create a function that can be called using an optional callback and return a Promise if no callback is supplied.

someAsyncFunc = (someArg, callback) => {
const promise = new Promise((resolve, reject) => {
doAsyncThing(someArg.foo, someArg.bar, (err, asyncResult) => {
if (err) {
reject(err);
} else {
resolve(asyncResult);
}
});
});

if (!callback) {
return promise;
} else {
promise
.then(result => callback(null, result))
.catch(err => callback(err));
}
}


then use it with a callback func:

someAsyncFunc(stuff, (err, result) => {
if (err) {
handle(err);
} else {
doStuffWith(result);
}
});


or use it as a promise:

someAsyncFunc(stuff)
.then(result => {
doStuffWith(result);
})
.catch(err => handle(err));

how can I make a d3 chart responsive? I tried setting the width as the parent div width but it only resizes after you refresh the page. here is test fiddle jsfiddle.net/eamonnmag/Q567s/

>Just got a job as a web dev
>Have no experience web developing for a living
>Site I'm supposed to be maintaining has no documentation whatsoever

Maybe a dumb question but I am having problems finding the answer.

I'm trying to use Mongo/Mongoose in my application (huur durr), and I'm trying to have an array of items inside my document. The thing is, is that I want to keep them unique, but I can have two of the same type saved within my array, even though I have it set so its supposed to be unique.

Is there a reason for this? I've dropped the database in case it didn't catch on that they have to be unique, but it seems like the Array type in Mongo doesn't support unique indexes natively.

I don't understand your question. What do you mean by unique?

I'm confused on what these even mean

I second Materialize it didn't take me long to get good and fast with it wen just starting out

Hello /wdg/ i was wondering if you could help me with setting my homepage, i have to .html file with all the css saved in it and was wondering how to set it up as homepage for my Chromium browser.

github.com/ubuntufag/html

I should phrase it better, but I'm a little tired.

I'm basically trying to implement a version of facebooks "save post" kind of thing. What I mean by unique is, is that I can save the same 2 posts (they have the same uniqueID/everything) in my database, even though I have it set in my Mongoose schema that I want them unique (so no two posts are in the same array)

Red pill me on CSS transform /wdg/.

I don't use facebook. Is that save post function like a watch later on Youtube?

Yeah, that would be the closest thing. Right now its letting me save the same 2 posts (or two youtube videos for example) within my Mongodb array. I've tried to look around, and it seems like it might not natively let you have unique indexes in the array.

>tfw you spend 2 hours refactoring some ugly code into something clean and well organized but then it doesn't fucking work for some reason.

It's pretty neat. You can stretch and rotate stuff. What do you want to know about it?

I want to make a div behave like a link.

Found this 5 year old answer:
stackoverflow.com/questions/796087/make-a-div-into-a-link/3494108#3494108

Is this still the way to go, or is there a more elegant way that I haven't found?

What am I doing wrong? when I import my components shit breaks.

import React from 'react';
import { render } from 'react-dom';

import {Header} from './components/Header';
import {Home} from './components/Home';

class App extends React.Component {
render() {
return (












);
}
}

render(, window.document.getElementById('app'));


As soon as I remove this it starts working again.
import {Header} from './components/Header';
import {Home} from './components/Home';

Why use a framework for a portfolio site?

someshit

test

That royally fucks with the styling, but I suppose I can just create a class for it.

Because he's dumb and can not take one step without left-pad holding his hand. Welcome to the modern webdev generation.
For loop over .querySelectorAll(".myInput")
Use async functions. Conditionals are a terrible pain with callbacks or promises.

What's better?

firstname.one or firstname.cloud ?

Firstname one.

I was thinking the same thing. Mostly because email forms give you less of a headache with a three character tld than with a five character tld.

Cloud simply doesn't make any sense for a portfolio site (it is a portfolio site, right?)

Yes it is.

Probably because you are nesting a block level element inside an inline element...

>not programming in english

r8 my entry-level gulpfile, Sup Forums

paste2.org/64nb24nM

web dev is for phags

learn c++

>tfw have 4 letter .io domain and can't even code

what's a good idea for it senpai
i will learn how make it if it's a good idea

modern C++ at it's current state is a clusterfuck, a simple web dev wouldn't comprehend it.

>pure ES5
Why?
You can web dev in C++, retard.

Why does flask seem to have so much more following than cherrypy when cherrypy is so clearly the superior choice?

how could i improve it with ES6?

i'm a complete noob in ecmascript and can't even code a medium-sized webpage without jquery

the point was to ditch web dev and get into real programming

btw this is you

The point was that not all web dev is designer bullshit and left-pad.

Btw looks nothing like me.

This is probably a silly question, but I can't work out. It's about trying to animate a background-image in CSS. Can't figure out the trick needed. Thanks in advance.

What is the background image?

In your case it would only make the code more readable. Read up on const, let, template strings and arrow functions. Also, don't fucking assign anonymous functions to variables, when they can just be named function declarations.

a {
position: relative;
padding: 0.2em 1em;
color: #000;
text-decoration: none;
}

a:before {
content: "";
background-image: url('placekitten.com/200/70');
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
opacity: 0;
transition: opacity 500ms;
}

a:hover:before {
opacity: 1;
}
codepen.io/user/pen/VKwRXG

I'm writing an internal website for people to manage SQL tables.

Am I going to get bullied here if I said that it's on Flask+SQLAlchemy?

>Materialize
tbqh I like this a lot more than bootstrap. I would really like to swap it out, but I spaghetti'd so much that it would be a real pain

Scaled down the background image, then cropped it into the size of the hover area.

Excellent, thanks! I had read something about using :before and :after, but couldn't get it to work in practise.

Should be:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Header from './components/Header';
import Home from './components/Home';

class App extends Component {
render() {
return(
// markup goes here.
);
}
}

ReactDOM.render(, document.body);

I think the problem is that the render() function is declared twice between 'react' and 'react-dom'.

Wait, sorry, render() wasn't declared twice because both declarations are in separate classes. I think you were just importing Header and Home the wrong way.

Do you have an error you can show us? I don't know how your home or header components/files look like, but one/both of them is obviously why it breaks.

Hold on, I just tried out both your code and mine, and both of them compile just fine. No idea why it's breaking for you, maybe you have an incompatible version of 'react' or 'react-dom'?

>Am I going to get bullied here if I said that it's on Flask+SQLAlchemy?
Yes, because no matter what you use, it's the wrong thing.

use display:block, a fixed width, and margin: 0px auto;

How would I go about building my own Web framework for practice?
Which basic things should I attempt to implement?

Also, in what way should I implement user authentication?

What does this script do?

Start with routing and getting the basics down.

>Also, in what way should I implement user authentication?
A secure way, read up on it.

Can you at least give me a hint of what I should be looking into?
I found a bunch of contradicting articles, not so sure on which one I should trust.

>trying to make a single page node/angular site which takes image urls from a database and displays them with infinite scroll.
>look up how to do this
>php

What the hell?! Does nodejs not have a dbconnector and ajax equivalent?
Might just do it all in php if I need to use it anyways.

That sounds fine.

Yes, PHP is the ONLY language that can connect to a database and receive AJAX requests.

This is common knowledge.

It's combo of three very simple concepts - scroll event, AJAX and API. Do you really need to be spoonfeed about how to connect them?

>Yes, PHP is the ONLY language that can connect to a database and receive AJAX requests.
>This is common knowledge.
Kek Ok I see node-mysql now.
For some reason my first several searches turned up nothing but people combing node and php.

>Which basic things should I attempt to implement?

If I were doing it, I'd try to copy Express.

Core functionality:
- URL parsing
- routing
- middleware hooks

Then, as middlewares, implement whatever other features you want:
- body parsing
- cookie parsing
- sessions
- etc

>Also, in what way should I implement user authentication?

If you're asking this, you probably aren't ready to handle making your own web framework from scratch. Learn how to do it using an existing framework before you try to make your own.

In general, a simplified version of the way password-based authentication works is this:

- When a user creates an account, they supply a unique identifier (email, username, etc) and a password.

- The server salts and hashes the password (google it) and creates a database record for the user containing the unique identifier and password hash. (Its very important to never store unhashed passwords anywhere.)

- Later, when the user wants to log in, they supply the identifier and password. The server looks up the record using the identifier and hashes the supplied password. The hashed supplied password is then compared to the hash on file, and if they match, the user is allowed to log in.

- Your users probably don't want to have to log in every time they make a request, so you need to store the user's state somewhere. That's a little bit complicated, since http on its own is stateless (also, statefulness isn't RESTful, if you care about that). You need to store that state in a session or as a JSON Web Token (google it)

Hope that helps.

OH LOOK it's another SJWs destroy everything they touch episode.

Why can't I work in an industry that isn't full of numale cuckboys?

What did 'ol Crockford do to piss them off?

Read through the OP, couldn't find enough:
What should I do if I just want to make sites for people with my html/css/js knowledge to finance my neet lifestyle?

If MongoDB is shit, what db should I use with nodejs?

what's your data model look like and what database features do you need?

you could have a UTF8 BOM character hidden in your code. (copy and paste your code to a editor with the charset set to UTF8 no bom)
also, header should be the first thing the php send. befor html, meta, body tags...

I'm just making a link shortener

good question i was wondering the same thing! i now need a website portfolio like really really quick

>uncle calls me last night
>"hey user you fix computers right?".
>y-y-yes!
>says you're hired!
>says i started a consulting business and you're in charge of building the websites for all my clients.
>Shit i haven't made websites since lolflash
>i just wanted to be neet and do surveys for 5 dollar amazon cards all day

halp /wdg/! what would you do? id like to put to put some thing together in 2 weeks, where do i start?

woah dude i went to wctc for the web and digital media design

My first job got me doing all backend. everyone else i graduated with is doing wordpress kill yourself jobs.

Take the software development one.

this is a lie, they help you get an internship, and if you make nice projects along the way youll get a job like any CS major would.

He describes web security as being bad by saying that the web is 'promiscuous', which is slut shaming.

Also he calls people stupid sometimes.