/wdg/ - Web Development General

"Whoever took over making these threads is doing a bad job" Edition.

>Previous Thread
>Official Discord
discord.gg/wdg

>Getting started
Get a good understanding of HTML, CSS and JavaScript.
MDN web docs offer a good intro (independent of your browser choice)
developer.mozilla.org/en-US/docs/Learn

>Free online courses
codecademy.com/
freecodecamp.com/
bento.io/

>Roadmap
github.com/kamranahmedse/developer-roadmap

>Resources
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
stackoverflow.com/ - Developers asking questions and helping each other
caniuse.com/ - Check browser support for front-end web technologies

>Youtube channels
youtube.com/user/TechGuyWeb - Traversy Media
youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ - freeCodeCamp
youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q - funfunfunction
youtube.com/learncodeacademy - codecademy
youtube.com/derekbanas

>in-depth comparison of VPS hosts
webstack.de/blog/e/cloud-hosting-provider-comparison-2017/

Other urls found in this thread:

edx.org/micromasters/software-development
jsfiddle.net/rry4qjjz/
jsfiddle.net/pg6t60b1/
jsfiddle.net/y2a1oyrf/3/
babeljs.io/docs/plugins/transform-class-properties/
libgen.io/ads.php?md5=20C68E019F43BFF9472363E6FB5A1D92
twitter.com/SFWRedditImages

How do I tell someone using mysql_connect that pdo is superior and not deprecated without sounding like a total elitist asshole?

I certainly hope that all of you have upgraded your old node.js projects to ayo.js.

How does it feel being confined to a general because Sup Forums doesn't think you are real programmers?

is msqli ok?

HOLLUP

>javascript
>can't into strong typing
kys

mimic those who are telling you that php is shit and don't sound like total elitist assholes

go back to your fizzing and buzzing

Best way to make easy money with webdev?

youd be better off mining coins or whatever the meme is

I told him,

"yeah we can use php but we should use pdo with prepare statements for safety"

TFW PRO AS FUCK, CUHHHH

Get a job
work that job
collect a upper middle class income for easy work devoid of intellectual challenge 95% of the time?

sounds like easy money to me

I make $130k a year doing front end dev.

This is in ATL too so it's not like I'm in an expensive area.

Best server side validation package for express/node?

Some people like express-validator but I don't really think form validation needs to be middleware.

I like "forms" aka caolan/forms, it's straightforward and sanely configurable

what framework and what do you work on mostly?

express-validator is the best I've found.

How do you properly store Database credentials for creating a new PDO in php? Right now this is what i have, but it seems remarkably dumb to store them as plain text on the server.
class KurassuNeemu
{
private $host = 'mai.hosu.to';
private $user = 'yuuzaa';
private $password = 'Pas5uwa4D0';
private $dbase = 'deeta-beesu';

public function establish_connection()
{
try
{
return new PDO ( 'mysql:host=' . $host . ';dbname=' . $dbase, $user, $password );
} catch ( PDOException $e ) { }
}
}

Traditionally you have a config file that holds environment-specific configuration stuff, and it looks something like this:

export DB_HOST=hostname
export DB_USER=username
export DB_PASS=password
export DB_NAME=database


This is exporting environment variables that your application can look for. This does not go into source control, it is generated on the server, somewhere nowhere near publicly served directories, and exists only there.

For a more systemic solution, there are packages like vault, and chef and puppet have arguably naive solutions for secret storage.

halp

I have a website built w/ node/express as backend.

It's gonna be a private site, w/ apps and personal stuff (blog perhaps).

I plan on using Digital Ocean for hosting.

What's the best way to set this up in a reasonable way? What are the tools and prerequisites I need?

Can you repeat the question?

Is Laravel good choice that will be around for a long time? Wanna learn some php framework and be good at it.

definitely yes.

Best way/practices to setup website with node?

Thank you I will look into it when I have time.

In the mean time I only use free templates, rip other peoples code and modify it, so far only static pages but I am interested in dynamic ones.

I guess I should look in SQL and php as well

The simples way would be a premade "node droplet" on digital ocean, if they still have those?

For SQL you should learn the basic syntax and then look into the book "SQL anti patterns", it's great to learn how to avoid some (very common) pitfalls.

>threads are only good, if they include a link to my shitcord
>don't forget to claim your username and introduce yourself to everyone :)))
The self-importance of some people.

How do I put default values in constructors?
// es6
class Carousel {
constructor(options) {
this.name = options.name;
this.email = options.email
}
}

// es5
function Carousel(options) {
this.name = options.name;
this.email = options.email;
}


So I just have to initialize it like this:
let C5 = new Carousel1();


Instead of
let C5 = new Carousel1({
name: "name1",
email: "email1"
})

FreeCodeCamp - a good learning resource or a cult raising unsuspecting beginners on jQuery and other frameworks?

fcc and cc are great for beginners
but much like growing up irl, you have to eventually stop sucking on your mom's tits and make your own food

This is the best for beginners
edx.org/micromasters/software-development

The third course, where you start doing Java, specifically teaches you how to understand gargantuan code bases and libraries which is what every single developer these days is doing and not building shit from scratch.

After a few of those courses just get some React book or Vue.js book and bang some shit out

>$832.50
I'm not used to such high prices for online courses. We have a respected distance learning institution here in the UK called the Open University. Is edx truly reputable or is it bullshit like udemy? I wouldn't sink so much money into an online course after the wankery I found with udemy.

>recommending video content outside of pluralsight or udacity
get
out
now

It's free, you only pay for "certified" track

>paying for online tutorials

Redpill me on tilda publishing

class teste
{
constructor() {
if(arguments.length > 0) {
this.nome = arguments[0]['nome'];
this.sobrenome = arguments[0]['sobrenome'];
} else {
this.nome = 'Adriano';
this.sobrenome = 'Nascimento';
}
}
}

var a = new teste();
var b = new teste({nome:'José', sobrenome:'da Silva'});

console.log(a);
console.log(b);

"The original mysql extension is not available anymore starting from PHP 7. It has plenty of bugs and security issues"
Once, I clicked the Catalog link.

what if I only supplied 1 argument and the rest is default?

ex:
var c = new teste({nome:'José'});


How do I detect the index of the supplied arg? Or are there any other way?

I'm thinking of:
constructor() {
let args = Array.prototype.slice.call(arguments);
args.forEach(function(i, index, array) {
if (i === null) {
i[index]

}
});

if(arguments.length > 0) {
this.nome = arguments[0]['nome'];
this.sobrenome = arguments[0]['sobrenome'];
} else {
this.nome = 'Adriano';
this.sobrenome = 'Nascimento';
}

But im not sure if its the right algorithm

Typescript.

jsfiddle.net/rry4qjjz/
Stupid reply box is not letting me paste the code

>jsfiddle.net/rry4qjjz/
thanks user

This.

Not 130k, but more than double the average household income.

Is bulma.io decent? How well does it work on mobile? I'm getting sick of Bootstrap

Using it right now. You'll have to get used to the convention, but otherwise it's solid. No js = no opinions on how to run shit.
It's flexbox based (as is BS4), so solid as fuck in responsive design.

Is git normally super slow over sshfs? I don't want to waste time setting up a local environment for WordPress dev so I'm doing things over sshfs, but git add takes a minute versus a second a or two which is a little annoying

How do people debug their program while doing webdev? I feel like I'm completely in the dark while writing javascript backend / frontend since I won't get any warnings at all from my IDE. For example I spent one hour trying to solve a problem on the react frontend and it turned out that I had simply written this.email instead of this.state.email.

warnings from your IDE isn't debugging lmao
debugging in webdev is the same as in other fields
actually learn what debugging is friend

Is there an uptodate resource on web technologies that covers everything ? (HTTP (1&2, Pipelining, Websockets...), HTTPS and Certificates, SHA, Security, Logging and Credentials...) (also Databases, Migrations...)

I feel like I'm lacking

RTFM

man HTTP

>but much like growing up irl, you have to eventually stop sucking on your mom's tits and make your own food

This is such a horrifying statement. I don't want to grow up ;_;

no

>For example I spent one hour trying to solve a problem on the react frontend and it turned out that I had simply written this.email instead of this.state.email.
use TypeScript for the love of god. the language server catches such mistakes in realtime

Does anyone have a link to ngbook for angular 4? Also does anyone know how exactly a plugin like fullpage.is works? I need something similar but for angular

I will repost my offer once here. It has no value for experienced programmers, but you know, there are people who pay for code camps to learn. And my offer has more value than these paid codecamps.

Gentlemen. I'm looking for junior devs, pajeets, neets and anyone who is willing to become my slave. I have an offer that can be interesting for you.

I have a side-project with some commercial potential, but I don't have enough time to develop it myself. So, I'm looking for people of any skill level who want to practice and do job for me. I will give you tasks, and you will be free to implement them in any way you want — microservice hell is what we will create.

What is your benefit?
- You will get real tasks. If you are learning to code, real-world task may be good for you to understand what expects you in the industry;
- You will get some experience of working with a real client. You will see how real-world interaction may look like;
- My feedback and code review may help you improve your skills;
- You'll be able to add "I know how to develop microservices" line into your CV;
- When the project becomes profitable, you risk getting a low-paid laid-back job, you will have the opportunity to feel the pain of microservice integration and so on.

What is my benefit?
- Free coders;
- Opportunity to find people for future mutually-beneficial exploitation.

Interested? Contact me via [email protected]

These day I'm using Vue but React is the 800 lb gorilla.

Very nice. You have the classic Disney-esque greedy capitalist character down to a tee. Much narcissist, very wow :^)

Is it fine in terms of accessibility to use placeholder for important information in an input element tag? Can blind people have the placeholder text read out to them or do their appliances skip over it?

fuck off

Should I remove tutorial projects from my git?

MDN says event.keyCode is deprecated. Also event.which and event.charCode. So what the hell should I use to register the enter key being pressed?

Money does not make you a real programmer

This is where you're wrong.

Web dev is programming whether or not you want it to be.

I have done both for probably, and hopefully, longer than you've been alive. Definitely programming and definitely harder in some areas than conventional native programming.

if someone is using mysql_connect let em know its deprecated and existing ways exist to breach databases using that. Then charge em a lot of money just to replace things with PDO's because they assume it will cost a lot of money. Unless its your coworker, in which case youre fucked m80

>know basic php, mysql, css, html
>use wordpress and make minor adjustments to prepared themes
>1.5k a site
rinse and repeat senpai

But the classic capitalist would first lure you, promising high salary, and only then will dump or enslave you. I am honestly offering slavery from the start. I am a good man, not a fat cat.

not original user but how can you encrypt said config file (.ini i assume)? I can unencrypt inside a php script but im a pleb and can't find the linux command to encrypt said config file

just installed mongoDB via the shell on a ubuntu VPS.
if I status it it logs as running on the console but if I ls I just get the whatevs.txt that was on the server when I first SSH-d in and the file contatining my code.....
where is mongoDB?? is it hidden? how do I run the .mongo to execute shell commands??

we aren't going to do your gay project for you pajeet

what's the best way to get number of rows with PDO?
I know that shit with count(*) but I just hate that I have to write the same shit twice when I'm using SELECT like this
$query=$conn->query("SELECT * FROM {$table} {$where}");
$row=$conn->query("SELECT count(*) FROM {$table} {$where}");

Am I doing it wrong?

the `mongo` command will put you into a mongo shell. your data should be stored at /data/db unless you or your method of installation changed that.

jsfiddle.net/pg6t60b1/

Decided to write my own code to filter a few portfolio elements on a page (pic related).

How can I make this code a bit more efficient and dynamic? I'm basically making a template and I want the user to be able to change the categories without having to edit the JS.

btw I used jQuery because JS is not my strongest point, I mostly do backend work.

figured it out by just typing stuff :) Thanks! it works!

Nice.

Improvements:

1) You don't need to use "each" for an array of jQuery elements.
2) You don't need a separate function per button. Make a generic function and use data tags or something.
3) Minor nitpick but if you bind a listener to the parent, then you can dynamically add more buttons later (if you bind to button, newly created buttons will not inherit events).

Examples:

jsfiddle.net/y2a1oyrf/3/

Also, hating on jQuery is a meme. It's good for prototyping/ projects where you are doing significant dom manipulation and don't have nazi performance restrictions.

Damn this is so clean. Way more efficient than the spaghetti I wrote lol. Thank you user.

class DefaultClass {
constructor({ name = 'Default Name', email = 'Default E-mail' }) {
this.name = name;
this.email = email;
}
}

new DefaultClass({});
new DefaultClass({name: 'some other name'});
new DefaultClass(); // error


class DefaultClass {
constructor(opts) {
const { name = 'Default Name', email = 'Default E-mail' } = opts || {};
this.name = name;
this.email = email;
}
}

new DefaultClass();


// babeljs.io/docs/plugins/transform-class-properties/
class DefaultClass {
name = 'Default Name';
email = 'Default E-mail';
constructor(opts) {
Object.entries(opts)
.filter(([k,_]) => ['name', 'email'].includes(k))
.forEach(([k, v]) => this[k] = v);
}
}

whoops
// babeljs.io/docs/plugins/transform-class-properties/
class DefaultClass {
name = 'Default Name';
email = 'Default E-mail';
constructor(opts) {
Object.entries(opts || {})
.filter(([k,_]) => ['name', 'email'].includes(k))
.forEach(([k, v]) => this[k] = v);
}
}

libgen.io/ads.php?md5=20C68E019F43BFF9472363E6FB5A1D92

Help me convert this to an async await function

roleAuthorization: function(type){
return function(req, res, next){
var user = req.user;
User.findById(user._id, function(err, foundUser){
if(err){
res.status(422).json({error: 'No user found.'});
return next(err);
}
if(type === foundUser.userType){
return next();
}
res.status(401).json({error: 'You are not authorized to view this content'});
return next('Unauthorized');
});
}
}

couple of super simple questions (for anyone viewing really)

do you look for clients/small businesses with old shitty sites or do you offer them to make them a new one? I can imagine both

how does your clients manage their sites, wordpress?

also I can build responsive sites fairly easy, how would I go about speeding up the process of learning backend or to build a dynamic website (eCommerce, blogs, etc)

thanks in advance

what should i use for scraping and submitting forms, php or node.js?

Rewrite User.findById to return a promise, or trying to use async / await isn't gonna really improve anything.

async function userById(id) {
return await new Promise((resolve, reject) => {
User.findById(id, (err, user) => {
if (err) return reject(err);
resolve(user);
});
});
}

function roleAuthorization(type) {
return (req, res, next) => userById(req.user._id)
.then(user => (type === user.userType ?
next() :
res.status(401).json({
error: 'You are not authorized to view this content',
}) && next('Unauthorized'))
.catch(err => (res.status(422)
.json({error: 'No user found.'}) &&
next(err))
)
}


That's pretty bad but you get the idea.

Depends how you intend to scrape.

No API and the website generates content through JavaScript?
Selenium with PhantomJS (there's node.js and python modules)

No API and the website doesn't require JS?

Node.js with that jQuery equivalent on the server side. Use async/await to make your life easier.
Python with lxml and the requests library is a good choice too.

alright, i'll go with selenium with phantomjs. thanks very much

How do I prevent storing my MySQL DB login info in plaintext in my relevant php files? I can prevent these files from being committed, but they comprise the bulk of my project.

Should I make a single seperate PHP file that just handles login validation and direct the others there, or is there a better way?

Probably clear from that example that I'm not a big fan of the async / await approach, but here's a more aggressive version:

async function userById(id) {
return await new Promise((resolve, reject) => {
User.findById(id, (err, user) => {
if (err) return reject(err);
resolve(user);
});
});
}

async function roleAuthorization(type) {
return (req, res, next) => {
try {
const user = await userById(req.user._id);
return type === user.userType ?
next() :
res.status(401).json({
error: 'You are not authorized to view this content',
}) && next('Unauthorized'));
} catch(err) {
return res.status(422)
.json({error: 'No user found.'}) &&
next(err);
}
};
}


Using async / await basically trades out your error handling mechanics for try / catch blocks, which I personally dislike vs promise catch. In this case, if you want to use async / await over promises, I'd recommend returning null instead of doing error stuff:

async function userById(id) {
return await new Promise((resolve, reject) => {
User.findById(id, (err, user) => {
if (err) return resolve(null);
resolve(user);
});
});
}

async function roleAuthorization(type) {
return (req, res, next) => {
const user = await userById(req.user._id);

if (!user) {
return res.status(422)
.json({error: 'No user found.'}) &&
next(err);
}

return type === user.userType ?
next() :
res.status(401).json({
error: 'You are not authorized to view this content',
}) && next('Unauthorized'));
};
}

>they comprise the bulk of my project.

What is the actual audience for your project? Are you just uploading your own personalised work to Github as a means to show that you know PHP and SQL to others or is it something that other people can actually use?

If it is the latter then you should see up an installation page that allows the user to set up their own database details.

That's a good question actually. I'm mainly just using git for version control, I don't care about people seeing the source, so I'll probably just set the repo to private and continue on the same way.

Alternatively consider selenium with chrome headless, as working with the outdated junk in nodejs can be a big pain in the ass.

What is the best way to get a screenshot of a webpage? I'd seen a lot of shitty third party services, and I'd tried to do it using phantomJS but I couldn't get that to work.

```
import User from './...'
import {
USER_NOT_FOUND_ERR
USER_UNAUTHORIZED_ERR,
USER_UNAUTHORIZED_MSG
} from './...'

const userById = id =>
new Promise((resolve, reject) => {
User.findById(id, (err, user) => {
if (err) {
reject(err);
}
resolve(user);
});
});

const roleAuthorization = type => async (req, res, next) => {
try {
const user = await userById(req.user_id);
if (type === user.userType) {
next();
} else {
res.status(401).json(USER_UNAUTHORIZED_ERR);
next(USER_UNAUTHORIZED_MSG);
}
} catch (err) {
res.status(422).json(USER_NOT_FOUND_ERR);
next(err);
}
};
```

libgen.io autocloses now I can only use libgen.pw or bookzz/bookfi

Not that guy, but in my experience working on old shitty sites is hardly worth the effort. The last 2 I did the previous dev just frankensteined code directly from stack overflow with zero rhyme or reason.
Small businesses will almost never know what they actually need development wise. They just want features that work. As long as the general idea of what they want front-end wise is maintained they won't know the difference.
I personally just offer to look at it for free and then determine which route I want to go and how much it will cost upfront.

For back-end just pick a stack you wanna try first. I personally found LAMP stack to be very simple and XAMPP is a really easy way to jump right in without having to do any setup yourself.

Making a simple inventory management website that allows you to add/edit products is a good way to start with something practical that small businesses normally need. Add more features as you see fit to further your skills or move on to another stack.

>I couldn't get that to work
You must be retarded, then.

The best way currently is probably something like rendertron or puppetron.

Eh, I guess. I'm not really a fan of the const name = () => function signature just because I then have to define my functions in a specific order as opposed to an order I deem to be best. There are situations in which I like to put my functions after a return statement, for example.

am I gonna make it

>literally no padding
>>>/dpt/
where the other blind anons are

Not him/her, but;

>how does your clients manage their sites, wordpress?

I (mostly) use Wordpress with a custom admin interface. I add/remove admin menu items in functions.php and hook it all up using ACF (plugin). There are even admin themes so it doesn't look like Wordpress.

>also I can build responsive sites fairly easy, how would I go about speeding up the process of learning backend or to build a dynamic website (eCommerce, blogs, etc)

For blogs I use Wordpress.
For eCommerce I use either Wordpress + Woocommerce (for higher budgets) or Shopify. Shopify has its own templating hooks just like Wordpress.

>material design

>learning HTML/CSS

How do I make 4 images appear one after the other in a horizontal line, and also center that line?