/wdg/ - Web Development General

>Discord / IRC
discord.gg/wdg
#Sup Forumswdg @ irc.rizon.net
Web client: rizon.net/chat

>Getting started
Get a good understanding of HTML, CSS and JavaScript.
Everything you learn will have these as their base.
The Mozilla Developer Network offers a good intro (no matter your browser choice)
developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web

>Online courses
codecademy.com/
coderbyte.com/
freecodecamp.com/
bento.io/

>Further reading/viewing
youtube.com/watch?v=sBzRwzY7G-k
github.com/kamranahmedse/developer-roadmap
github.com/getify/You-Dont-Know-JS
github.com/vhf/free-programming-books/blob/master/free-programming-books.md

>Code challenges
codewars.com/
hackerrank.com/
codefights.com/

>Useful resources
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
libraries.io/ - Discover and keep track of open source libraries, modules and frameworks
stackoverflow.com/ - Developers asking questions and helping each other
programmableweb.com/ - List of public APIs
caniuse.com/ - Check browser support for front-end web technologies

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

>cheap VPS hosting in most western locations
digitalocean.com/
vultr.com/
linode.com/
scaleway.com/
heroku.com/

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

Other urls found in this thread:

clickclickclick.click/
jsfiddle.net/2cruacmt/2/
jsfiddle.net/dmvuv8g5/2/
certbot.eff.org/
promisejs.org/patterns/#parallel
eloquentjavascript.net/
jsfiddle.net/
codepen.io/user/pen/QgZJoQ
twitter.com/NSFWRedditImage

dead thread general

How would i improve my websites security from attacks?
Like ddos attacks, sql injection etc etc
It's a fourm btw
Anything i need to look out for?

trying to combine D3.js (make an SVG chart) and fucking putting it inside a PDF using jsPDF.

WHY IS IT SO DIFFICULT TO GET THE SVG IN THE PDF FUCKING CLOSE TO ZERO DOCUMENTATION

someone please tell me they used jsPDF before and can use the doc.addSVG method properly?

what's a good way to learn learn rust and angular?

something where i could try lotsa stuff out without writing the backend myself

something whose back-end is nodejs maybe, cuz i've head it's 'in' these days

from major frontend js libraries i only know jqueery

from frontend i've done stuff in django/djangorust and very little in php

Guys can someone point me to a good complete C# tutorial?

I have an internship coming up at a major company and I need to land this one.

Mosh Hamedani has some neat tutorials on udemy, but everything above beginner is paid, can someone provide me a torrent or something to a intermediate/advanced part of his course, because I'm really really really short on money, like I barely have for food at this moment.

How do you start making money through freelance web development?

Upwork is filled with Indians and eastern Europeans working for microscopic rates.

Just invest in etherum you faggot.

>from frontend i've done
*backend
i meant

Answer me honestly or suffer the consequences

any freelance developers here? how did you make it?

I wanna make a web app SaaS thing.
Is the go-to method still just plain old HTML CSS and JavaScript with some gay libraries thrown in?

best framework for PHP? Is it Laravel?

>plain old HTML CSS and JavaScript with some gay libraries thrown in
that describes every interactive website in existence

My advice is to leverage what you got. Work for friends, senpai., locally.
I found some work for family members, will try Upwork soon.

What are some basic projects to embark upon in Javascript to improve my understanding of it?

is it possible to learn and work with angular without fantasizing about hanging yourself?

Learn about ES6 and a bit of typescript 2 first.

I just rechecked the express framework.
Since when creating a webapp with a micro-framework like Express is faster than with a big framework like Django?

Symfony Flex aka Symfony 4 in 2018.

Electron or NW.js if I would like to make a desktop version of my browser app?

anyone here has done some web analytics? i want to measure statistics in a friend's blog but i don't really know what to measure. i found lots of guides on installing the tools but nothing with concrete examples, with ideas on what parameters or events to measure specifically

Measure what you need, that's all dude!

1) Create websites.
2) Sell products, ad areas, ...
3) Continue.

0) Static website.
1) No JS.
2) No user accounts.

Okay, so I've tested both options on roughly 10000 s. Each div has a different ID which I dynamically assigned to them, some style values, event listeners etc.

The first approach is this:
I append each with a loop to a wrapper, then later on in the update stage I loop trough all the s via their IDs and reset their variables.

Second approach:
With a loop I create a long string with each said included, and then add this string to the wrapper's innerHTML. Later in the update stage I recreate this string again and then alter the wrapper's innerHTML once more.

My result is that the first method runs with roughly ~500ms, while the latter goes around ~250-280ms. However if I don't change that many attributes in the first approach (like the position, size can stay, and just change the innerHTML of each ), it runs around ~70ms. So as I see if I just want to change everything with brute force, then string manipulation is better than altering a shit ton of s, while if I narrow down what exactly I want to alter, and only alter that it is even faster.

Thank you for the help from yesterday!

I have and , how can I set section-b div to start always after the end of section-a div?

What? You want them both side by side in the same line?

No, i want the second div to be immediately below the first, the problem is that my first div have a kinda dynamic size, I have set the height to 390vh and loads fine on my desktop but when i load the page on a smaller screen it bugs the layout completely.

tl;dr i want the second div to start below the first one.

Put the code on jsfiddle or codepen and I'll help you debug it.

Does Lets Encrypt support generating domains you don't own? I want to make a website similar to tumblr where users can use a cname to point their domain to my nameservers.

meant generating SSLs for domains you don't own.

Predominantly backend developer.

Should I learn (deprecated) angular 1 in order to assist fellow devs on frontend?

Bare in mind backend is often completed fairly quickly and I dont wanna be sitting around doing fuck all.

But then again, I wont be learning a useful transferable skill by going into a deprecated framework.

just focus on javascript, you should still be able to assist them. I wouldn't devote any serious time on angular 1. just look shit up as you need it.

Since both points you brought up involving wasting time, I would say just listen to your subconscious. It's probably trying to tell you that your work environment is not conducive to progressing your career.

2 options I would consider
1) Become a contractor and turn the people you currently work for into your first client. Move onto better projects that won't leave you asking how to fill out your day.
2) Throw ethics out the window and develop personal projects while on the clock.

Really depends how much your are getting paid to be there. If you decide to cuck out and help other people do their jobs then at least get paid more. Like a lot more, because devs that only know front end are annoying to work with in my experience.

Dont waste time learning deprecated JS frameworks you dumb fuck. Learn Haskell instead.

>2) Throw ethics out the window and develop personal projects while on the clock.
Do this.

No

>sql injection
prepared statements

>ddos attacks
ddos protection service ie cloudflare

That should happen by default.

sanitize all user input, and throw away any request that has shit that shouldnt be there or doesnt have things that should be there

that's because there's zero money in it

you need a product

webapp describes mainly the backend

slim

this will give you ideas
clickclickclick.click/

NEET here, can someone tell me what I'm fucking up on? (node)

This works, but it's ugly as all hell, and not very reusable.

jsfiddle.net/2cruacmt/2/

I tried rewriting it.

jsfiddle.net/dmvuv8g5/2/

I don't get why this one isn't working.

(All I'm doing is grabbing a bunch of rows from a local mysql db, containing keywords, and trying to put the count in an object.)

Front end dev here.
I'm wanting to build a personal site for myself that I can use as a blog essentially, but I don't want to have to code everytime I want make a new post (like i would have to w/ jekyll or whatever).
And I don't want to use a bloated CMS, or anything where I have to use a stupid templating language, or PHP shit.

>Here's my idea:
Would it work (and be a good and viable idea) to basically create the blog/website using React or Vue, make a route that would be an "/admin" page that would essentially be my own little custom CMS for the site?

I would basically log into it, and to make a new blogpost/article/whatever, have a form that would have inputs [postTitle, date, tags], etc. and then a text input where I'd write the body of my post in Markdown. The form would then submit to a JSON database like Firebase or something (so i don't have to deal with a backend), and that data would create the new blog post/article on the website.

I dunno, would something like that work, or would it be a shitty way to do it?

>have 3 different pages
>each has sections
>navbar is
>>page page page page-section page-section page-section
>page links lead to /page, section links lead to #page-section

you want to make a simple non-js gallery, is this a good idea?

>have a #page-section with the first picture
>and the left/right buttons
>the buttons lead to #pic1 #pic2 etc
>using the css:target trick, intending to show pics only when they're targeted, thus having a slideshow
>have the server arrange the pictures

good idea or not?

>I don't want to have to code everytime I want make a new post (like i would have to w/ jekyll or whatever).
What does this mean? You're proposing a markdown-based solution, and Jekyll posts are literally written in markdown.

fixed, please ignore.

Well, so here's what I'm thinking.
Say I'm traveling somewhere, and I want to write a post about something cool I see, and show a picture or two blah blah. I wouldn't want to have to open up my text editor, code the post, compile/build, upload to server, etc. everytime I want to write or share something.

I'd rather just "login" to my site, write the post and/or add the image, whatever, and then hit "submit", and then be done with it.

You need to find real clients.

A CMS already does what you will be rebuilding from scratch. And it will be more feature-rich and secure than whatever you're going to come up with most likely. I would find a CMS that suits your needs. You don't need to use Wordpress if you don't want to. There are tons of options. It would just be a huge pain in the ass for you to build a CMS for your website

What are you trying to build?

Stop using "code" as a verb, especially when talking about fucking markdown, you sound retarded.

>I wouldn't want to have to open up my text editor, code the post, compile/build, upload to server, etc. everytime I want to write or share something.
I can't understand this line of thinking. You're basically saying you'd rather build a crazy overkill re-invention of the wheel instead of running a shell script. Are you a programmer or not?

If you need to do this, serve an html form with basic authentication at a different URL with a textarea and a submit button. It writes out the post file and compiles the jekyll site on the server. Far simpler and less inherently broken than what you're suggesting.

Yeah that's kind of what I'm feeling too. I guess I'm just having a hard time finding a good free lightweight CMS that I don't have to deal with an odd templating language or PHP or anything.

Anyone know of a good one?

>CMS
>Templating language
What have you had experience with in the past? You shouldn't need to worry about messing with templating yourself for most, if all, of what you're doing

These threads are trash because it's just idiot scrubs coming in here asking for help with the most entry-level problems who should all obviously be banned for not knowing how to use SO or IRC or mailing lists.

What is your opinion on WASM? Is it a nonsensical direction for browsers to be moving in?

Are electron style apps a fundamentally bad thing because embedding chrome is so fucking heavy? Does it make more sense with larger apps than it does with smaller?

When will Grunt/Gulp finally die off?

Will the functional revolution finally prevail?

Is immutability a meme?

Do you try and write pure functions?

Is two-way data binding a thing of the past?

>What is your opinion on WASM? Is it a nonsensical direction for browsers to be moving in?
It's unnecessary and a bad idea. Why would you need your web browser to do this kind of low-level processing?

>Are electron style apps a fundamentally bad thing because embedding chrome is so fucking heavy? Does it make more sense with larger apps than it does with smaller?
They're great for prototyping and portability, but tend to experience stability issues. That's not to say that coding the application without electron would be any more stable inherently, but it would almost certainly be lighter at the very least. Slack is a great example of this that I can think of

>When will Grunt/Gulp finally die off?
Probably in three years when something new comes around to either reinvent or replace JavaScript

>Will the functional revolution finally prevail?
lol no

>Is immutability a meme?
What? No

>Do you try and write pure functions?
In small applications that call for them, yes

>Is two-way data binding a thing of the past?
I don't think this is going to disappear for quite some time. It's still useful in a lot of applications

WASM is a symptom of the more or less nonsensical direction things are going in which is that web experiences "must go faster"

Electron is my current obsession I am disrupting all the application programmers at my place of work with it.

Never G/G are used really extensively

the Functional Programmer meme falls under the category of NNUTS (there's nothing new under the sun in computer science)

no its a methodology for how you mutate things

yup

its an antipattern

Gulp and Grunt really are unworkable trash, though. It's a bad abstraction. Just give me webpack and the scripts section of package.json.

I want to build a website like tumblr where users are given their own subdomain like bob420.mysite.com and they can point their domain at it with cname. That's easy and I've done that but I want SSL for each. Cloud flare offers free wildcard ssl for all sites so that would cover my domain and subdomain. But will that interfere with users creating a CNAME record on their DNS and me serving a let's encrypt cert for their domain?

holy shit you cannot be this retarded
please tell me this is a joke

Explain

I want mysite.com ssl enabled
I want user1234.mysite.com ssl enabled
I want myusersdomain.com ssl enabled
I don't want to pay for any certificates. What's so hard to understand about that?

I'm really, really, really fed up with the fact that twitter, facebook, and instagram pretty much rule social media at the moment. They're garbage, their interfaces suck, and they've let "feature creep" overwhelm them. That, and too many normies.

I'm setting out to make a new type of social media. I've already mapped out what I want it to be like, the database schema, the site layout, everything, and am starting on the backend code now. Once it's in a working state, I'll push it to my github repo and link here. In the meantime, I'm gonna shitpost here at every stage of the development process.

certbot.eff.org/

Honestly just have a profile with photos and basic info, some sort of chat function, and you're good. Take Facebook and strip it down into it's core concepts

That's kind of what I want to do.

Profile with a field to describe yourself and your profile photo, and all your posts

posts are text-only, markdown works. Links to images or videos will display in a container on the page.

So, basically, an enhanced, no-bullshit twitter with markdown and no character limit.

I also want to stick to some core design philosophies here, such as keeping the whole thing dead-simple, and making the whole thing extremely portable - essentially writing the whole frontend and backend code for the site with "I'm gonna have to make an app to interact with this thing" in mind from the outset.

just use wordpress...buy your own domain even, put it on aws, and run wordpress on it. boom

>I've already mapped out what I want it to be like

whats it gona be like?

...

that covers the ssl for the users custom domain, but they limit you to 100 subdomains so I can't use it for my domain if I want to allow more than 100 users. cloudflare offers free wildcard ssl for all top level subdomains so I'm trying to figure out if I can combine the two. I want user123.mysite.com to have an ssl cert, and I want the users to be able to create a CNAME record that points to user123.mysite.com and have that also have an ssl cert.

Noob here. I started JS a couple of months ago, so far so good. Now learning front-end memeframeworks. I'm liking react and the little I've seen about vue js, but for angular I'm already confused before even starting, because people speaks about angularJS, angular2, now I'm seeing tutorials about angular4. Wtf should I actually learn? I just want to do a simple project and say in my portfolio that I "know angular" to apply to junior webdev.

Nobody cares, my man.

Angular versioning became kind of a mess.

AngularJS is version 1. Angular 2 was a rewrite that changed a lot of things. I believe Angular 4 is almost entirely backward compatible with Angular 2. They just switched the way they do versioning, and skipped 3 because of some package or something.

So the legacy version is AngularJS, and is located at angularjs.org

And the new version is just called Angular (but it might be labeled as 2 or 4), and is located at angular.io

I think a decent amount of sites still use (old) AngularJS, because migrating any software is expensive, so there's still demand. But (new) Angular is probably what people will choose to start new projects. I'd say learn the new version, but if anyone here has a reason why not, then let me know.

Thank you, now I got it. Angular (2-4) then.

About what?

very informative thanks

There are twice more vue.js jobs than react ones in my country.

Since when vue.js becomes so popular?

Damn! I just finished a massive react native lesson yesterday after 2 months of study and practice.

:(

getJSON('url',
function(err, data) {
if (err != null) {
alert('Something went wrong: ' + err);
} else {
for (var i = 0; i < 100; i++) {
document.getElementById('tbody').innerHTML += "" + data.rows[i].ranking + ""+ data.rows[i].name + "" + data.rows[i].classId + "" + data.rows[i].rating + "";
}
getJSON('url',
function(err, data) {
if (err != null) {
alert('Something went wrong: ' + err);
} else {
for (var i = 0; i < 100; i++) {
var senpai = document.getElementById(i.toString()).innerHTML;
document.getElementById(i.toString()).innerHTML = data.classes[senpai - 1].name;
}
}
});
}
});


How to avoid nesting a call within a call within a call...

I'd use a Promise library for this.
promisejs.org/patterns/#parallel
Try to declare your data manipulation functions elsewhere.

secret tip: returning early is more readable than big else blocks

if (err) {
alert("...");
} else {
// do something with data
}

if (err) {
alert("...");
return;
}
// do something with data

>Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett
>40€ with shipping

Should I?

>have no job
>never any replies, no interviews for years
>get job
>people start calling on old resume
>look to upgrade job
>no hits, no replies, everyone ignores me
>finally land new job
>billions of emails from recruiters and constant calls

The recruiting field is full of old leads apparently.

Also the amount of recruiters calling about "IT" positions is fucking disturbing.

Can someone tell me about web development? I am a C# programmer but never really bothered with the web stuff. I know some basic html css javascript, should I do the Mozilla thing in OP? That seems really basic, but I'm not sure what my next step should be

Plenty of free resources to learn this kind of thing. If you are going to pay for something like that then do it in person so you get personalized training.

Actually I might start teaching people on the weekends now.

What do you want to do with web dev? Like what are your immediate goals?

there is this book it teaches throw projects, and you can code while you learn inside of the "book".
eloquentjavascript.net/

Wow, that's trash. Why are you deliberately trying to obfuscate the damn thing from us as much as possible so we can't get any context?

const tbody = document.querySelector('.dontUseIds');

function rowHtml(row, className) {
return `


${row.ranking}


${row.name}


${className}


${row.rating}


`;
}

Promise.all(['url1', 'url2'].map(u => fetch(u)))
.then(responses => responses.map(r => r.json()))
.then(([data1, data2]) => data1.map((row, idx) => rowHtml(row, data2.classes[row.classId - 1].name)))
.then(rows => tbody.innerHTML = rows.join(''))
.catch(e => console.error(e));


Or something, this is just off the top of my head. You can figure it out from there.

CSS is so garbage.

Bootstrap has a big issue too.

The fact you can't set a div height and have content vertically centered without hacking it together is retarded.

There is no reason I can't do something like
v-align: center
width: auto
padding-left: 50px

and have it figure the shit out.

Nah, instead I have to
margin-top: 50vh
width: auto;
padding-left: 25px;
padding-right: 25px;
transform: translateY(-50%)

fucking stupid, not to mention that breaks everything in bootstrap. I have rows just going wherever the fuck they want to go

>what is flexbox

on resize it wipes out 10% of the image on either side

.logo-container {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.logo {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;

}

Just put up a fuckin example already ya mong jsfiddle.net/

Vue is way easier (and smaller).
If you know React, you can learn Vue in no time.

BTW it's not bad to list React AND Vue in your c.v., is it?

I answered that question to some extent here:
Basically, a twitter where you have no character limits, and you can use markdown in posts. Also not a fucked as twitter/facebook, basically keeping it as simple as possible. And making it very easy to make a client app.

How do I move a wordpress website from my local computer onto my VPS?

How do I handle the database? I already have apache2, but I have to install MySQL onto the VPS, right?

How do I securely move my database file onto the VPS? Do I have to change passwords or anything? My db stuff is just "root" and "" for the localhost on my desktop.

trying to add csrf protection to a node js based website but on form send it gives me an invalid csrf token error, what am i doing wrong?

app.use(session({
name: 'session',
secret: 'noneofyourfuckinbusiness',
maxAge: 24 * 60 * 60 * 1000
}));

app.use(csrf());

app.use(function (req, res, next) {
res.cookie('XSRF-TOKEN', req.csrfToken());
res.locals.csrftoken = req.csrfToken();
next();
});

Here's where I'm currently at.

Mix of everything under the sun trying to figure this out. Ignore the colors, it's to see where things are.

codepen.io/user/pen/QgZJoQ

also just on the logo atm. Right side should be fine.

Goal here is to have the green and white 75% of the screen on desktop with the red section as 25% and the stuff just stacked on mobile.

A landing page basically while I build the real thing.

Does anyone with experience using Jinja2 know why it's turning all whitespace into a single space? Whether it is a single tab or five line breaks, it all gets reduced to a single space and it's driving me insane. Pic related.

>learn Backbone.js
>dies
>learn _.js
>does
>learn angular.js
>dies
>learn react.js
>dies
fuck this I'm done. no frameworks for me, just pure vanilla js.

like the other user said, it should happen by default. can you make a pic how it is currently?