/wdg/ Web Development General

wet dreams general

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

freelancesharp.com
2ton.com.au/rwasa/
nuget.org/packages/FAP.React/
en.wikipedia.org/wiki/Suicide_methods
jsfiddle.net/obqhwkjd/1/
jsfiddle.net/obqhwkjd/4/
flexboxfroggy.com/
youtube.com/watch?v=Mkza0N8NiK4
codepen.io/Ampix0/pen/qmxqNL
flukeout.github.io/
github.com/kamranahmedse/developer-roadmap
expeditedssl.com/aws-in-plain-english
youtube.com/watch?v=nllZrOoxpzc
twitter.com/NSFWRedditImage

First for PHP

roast my website
freelancesharp.com

First for React

array[1] for Lua

nice domain
guess it's exclusively for C# jobs?

But really, why wordpress
Also better make it responsive.

yeah, I'm planning to make this one C# only and IP range ban 3rd world countries to keep only decent programmers in.

Wordpress because I need to learn it for some webdev jobs sadly, I'd love to work on Laravel, pure PHP, express.js or ASP.NET MVC

it has support for bitcoin payments now and its anonymous so thats nice, i can use it to hype it up

i'll surely make it responsive once i learn angular

Don't make your wordpress admin username 'admin'.

It's super easy to guess, and people will be able to execute password attacks pretty easily.

In any case, you should disable the thing that confirms that the user exists, and instead just use a generic "error: login failed"

Im not worried about the password being cracked, its quite complex

I'll change the login page to an AJAX login modal later on

mobile looks like shit faggot

put table in frame or something

you are the only person from the ones that tested my site on mobile that experiences the shrinking of the navbar, get a better browser

it's chrome dev it should work or you did something wronh

you r dumb...

Working on something.

Pls dont bully its very very early

Needs more shadow on the boxes

Not him, but I just tested on Android Chrome and Firefox, and it's not that the navbar shrinks, it's that everything else expands to the right of the navbar, thereby expanding the page.

Once you zoom out (which everyone naturally will when they realize they can't see anything) it looks like the screenshots others provided.

Maybe make each table row overflow-x scrollable?

>stupid to make a nice looking website without piling on tons of unnecessary node shit?
Node isn't front end, it's a javascript back end framework. Plenty of us use C# and Java instead because we're stupid enough to need backends when we're stupid enough to need permanent data.

>After setting up webpack, bundler, npm and a host of other shit you've already spent more time and work than it would've taken to just implement the feature
I reimplemented webpack by reloading scripts every 500ms and bundler is a cancerous concept, NPM too kind of. Get your own damn scripts.

I actually think it's about equivalent if you're a skilled developer. Installing shit is the SAME difficulty for everyone regardless of intelligence or skill but reimplementing everything is surprisingly easy if you know what you're doing.

Shit like webpack/yarn/gulp/bundler/etc is actually hard to install and most these things turn out to be under 10 lines of C# code.

Pure /wdg/ is svg. That way it works identically in all resolutions and is a fraction the file size. Understanding you're not perfect, a 16-24bit png is fine too.

Web dev can be simple, there's Javascript and another language, the other language you use when you realise storing things on the client's computer isn't a good idea.

Theoretically Java can do everything C# can do, although a lot of developers would prefer one over the other.

>PHP
Shit. Outdated. Slow.

>React
The dystopian C++ of Javascript.

>C#
>Wordpress
>love to work on .. ASP.NET MVC
What are you doing? Write that on your website

C# is lovely but any framework written by a team larger than 10 people will almost always be shit. ASP.NET MVC still gives me PTSD, there are a lot of horrible ideas that were used.

Also, your site takes a little long to load. It's not entirely convincing.

Nice background.

i'll switch to ASP.NET, Node or raw PHP soon, I'm doing this for WP practice because clients are too retarded to use another backend

other frameworks, are you even trying?

Like ASP.NET web api? Maybe. If you already have a lot of Javascript written Node is a better idea, I actually reimplemented node too but not because it's hard to install,I was already working out of C# and realised injecting data into HTML (so you have SEO or what not) is best done in a language designed to do that, like Javascript. Ultimately all I did was make a transform code function, render html function and the library I used already had execute/get/set functions.

People use WP for a CMS, people need a CMS who can't manage data with a back end or set up a database and link it through their front facing server. People who know how to write a back end probably wouldn't want to use WP and anyone paying for code would know that. It's actually a good idea if it's a website on your resume though and you're still applying to the online Spoletini spaghetti delivery business.

BTW, I actually like react, it's just disturbing
return (This is not natural)

My current stack I'm building is C#, v8 (vroomjs), React.

I wouldn't use a CMS, I'd build things with components and backend data, probably from a file unless money is involved. I can't see any need to waste memory for a database for my resume website.

It's nice, it was just developed before its best features were added. IIRC, server side rendering was not an intended feature.

before this I was mainly working with CodeIgniter and Laravel, most of my clients are intimidated by something like a backend thats different than wordpress (they literally say its too complicated lmao) one unfateful thing in life is that dumb people inherit money / get lucky and you have to do this shit for them, I'd be glad to work in any other system though

I like the idea of a front-end that has all the logic and only calls to the back-end for data, it just seems much cleaner that way.

Would you recommend react over angular? Right now I know no framework other than jquery

>most of my clients are intimidated by something like a backend thats different than wordpress
I've seen this business model before and it's beyond me, why are you letting your clients do any of the design? Tell them you'll do it and that's why they pay you.

>I like the idea of a front-end that has all the logic and only calls to the back-end for data, it just seems much cleaner that way.
Which is sweet until you realise no data from the back end is showing up in google searches and it turns out you need that.

>Would you recommend react over angular? Right now I know no framework other than jquery
jQuery isn''t a framework like react or angular, you still use it especially for react which only has one way binding, you then have to use jquery for the other way which really isn't a problem.

I don't use angular, but I've seen a little of it and I have some issues. For starters, it's a framework reforming from the navigation breaking idea of the SPA which even when you're developing these things you'll forget and eventually navigate backwards or forwards.

React is nice, but it changes too much, like C++:
function functionClick() { alert("Clicked!");}
class Greeting extends React.Component {
if(!this.props.name)
this.props.name = "Norbert"; //I don't actually think you can do this, but it demonstrates some things
render() {
return Hello, {this.props.name};
}
}
Like jQuery, it gives you a means of applying click handlers to things and it gives you one way binding, from your javascript code to your UI where it's really not hard to use jQuery to go the other way when you need to. Something like Vue: does it both ways, two way binding.

PHP 7 is faster than Ruby and other languages. If speed is one of you main concerns, then we should all learn assembly.

>I actually reimplemented node

What does that even mean?

> My current stack I'm building is C#, v8 (vroomjs), React.

can you tell me more, i know a bit of c# but how is your stack set up / how do you start it out, sounds interesting

>I've seen this business model before and it's beyond me, why are you letting your clients do any of the design? Tell them you'll do it and that's why they pay you.

they refuse to give you the job until you do things exactly as they tell you (wont let you choose technologies) like Wordpress since they're used to it and are afraid of learning anything else. I think they want to pretend they know more than us or something, not sure


>I like the idea of a front-end that has all the logic and only calls to the back-end for data, it just seems much cleaner that way.
could just use a back-end language with some preliminary data to feed the search engine then leave anything dynamic to js

I always liked the concept of two way binding, which framework is most intuitive with it? React looks nice

PHP and Ruby are both slow languages and "other" languages are all shit and slow and shit.

>then we should all learn assembly.
Facetious... 2ton.com.au/rwasa/

Most people accept that for web not even C or C++ is worth it and try to find a moderate middle point between real time fine tuned optimised byte code and a language that needed to wait a few versions before it had a sane typing system.

C# and Java are both shining examples here.

>If speed is one of you main concerns
Speed has an acceptable level, it's not a concern there's simply a cut off. If you're talking on the phone with someone on the other side of the world, you're going to notice and it's going to shit you. The acceptable delay here is about 200ms.

Websites are worse, it's noticeable and has an "unresponsive" feel when a website does not respond faster than 20ms. People want to feel something that's snappy. This is impossible if you're on the other side of the world, but if your actual backend takes single digit milliseconds the difference is not noticeable.

I used vroomjs to load and run scripts.

At the moment I have it set up for reactjs and vue and a library-less replacement for vue, I'm procrastinating about testing the actual vue part because I've never used it. I'd prefer the unholiness that is react.

It's cached serverside rendered react, I have vroomjs running scripts (hotloaded every 500ms) and checking props (and script hashcodes) to determine if it's a good idea to get a fresh render from the engine. Ideally everyone's system here should be the same, so any props input should have a html output mapable between the two. This should make things easy to cache simply by the props and hotloading.

>with some preliminary data to feed the search engine
But then you don't even need to go to the backend! It's a tricky problem, but the answer is back end data has to be injected before responding to requests, so we server side render.

>But then you don't even need to go to the backend! It's a tricky problem, but the answer is back end data has to be injected before responding to requests, so we server side render.
I miss the years pre 2014 when you could just whip something up with php jquery html js, this shit is getting too bloated and redundant

But PHP is abhorrent.

It was "the" old solution, it's what word press has a hard dependency on, it's why word press is shit and it's slow at a time where you only want fast code or really well cached code running. Cached C# code is just obsessively excellent. PHP instead runs a bunch of slow code between requests that's designed to be injected into HTML forcing you to mix code, which admittedly react skirts with.

Bloat is when there's features or boilerplate in your way that introduces common or frequent bugs and errors, this is inevitable if the framework introduces new syntax: Add 1 but not really true if the syntax is understandable and expectable. In this example, why did the api designers choose the character v? Why is there a full colon between on and click? What kind of scope is running in that string? These are all questions that make people with actual experience understandably a little uncomfortable, especially the scope question. If you're questioning a framework like this, it's likely it'll get in your way rather than help you out.

Only someone with a VERY questionable design style could ever unironically recommend PHP.

You mean angluarjs 1.x doppelgänger?

The old "muh php" meme. There is literally nothing wrong with php if you're not a retard.

Looks like a really good start

Fractal of bad design.

>Only someone with a VERY questionable design style could ever unironically recommend PHP.
>Only someone with a VERY questionable design style could ever unironically recommend being marketable

You are simply not right if you think PHP is more impressive than C# or Java on a resume. You are simply not a skilled web developer if you think PHP is any more or less than that.

Alright I'm sold, you
Now recommend me a book about c# webdev senpai, I can into C/C++

also, scrub your inputs for logins man,
Sql scrub

I'm working on campus this summer, but I literally work from home and don't do anything but fap and play video games. What else can I do to make money in the meantime? Not really interested in freelance work unless I can make ~$100 bucks a week.

I tried to get you a link to effective C# 6.0 which is exactly the best thing for you to become godly in C# if you actually do actually know C/C++ but failed. Internet piracy is not what it used to be.

If you want a C# library that's relatively simple and comes with serverside rendering set up, you may use mine if you so please:
nuget.org/packages/FAP.React/

I'm about the release new features though, like vue and an even more minimalist way to run javascript. Regardless, it's simple enough to that you could learn C# whilst debugging with a browser, the whole point is that you can do all the dirty backend business in as few lines of code as possible.

Oh, haha, oh dear.

>not handling this at the backend after hashing everything in the odd case of sniffers

I've got an idea for a website and I need to know how difficult it would be to incorporate. Maybe I can learn how to do it myself, maybe not.

The website has categories, each category has a few fields that people can fill out to submit an entry, and then later people can rate the entries. I'd probably need a way for people to create accounts, since people don't work for free and the prospect of internet points is appealing to people, which would entice them to make submissions.

How difficult would it be to make sure the site is secured, to structure the site and create the database of submissions, ensure that people don't do sql injections and hack my mom's dialysis machine, etc? Any advice on this would be greatly appreciated. What would I expect to pay if I were to hire someone to do this for me, if it would be too difficult or time consuming to learn the programming to do it myself?

Sounds like reddit.

nothing that massive, nothing that complex

No site is 100% secure. Just don't do anything stupid like doing security checks in javascript.

Not really sure what you're looking for by your description, but you may want to take time writing up requirements for every little piece of your website. That would help gauge the cost. However, webdevs will definitely overcharge you if you admit your ignorance. I would charge no less than $25 per hour. I make way more than that as a professional dev.

Thank you for the thorough reply. I do appreciate it.

No problem. To answer your specific questions:

>people don't do sql injections
Sanitize inputs and don't let inputs be part of the construction of any embedded queries. In my time programming, I've never seen anything vulnerable to an injection. If someone ends up doing that these days, they are poor programmers.

>hack my mom's dialysis machine, etc
I assume this is a joke, but don't serve your website from your home network

>if it would be too difficult or time consuming to learn the programming to do it myself?
web dev is actually is one of the more rewarding types of programming since you can see your results a lot sooner as long as you are a full stack(working on the backend and frontend stuff) developer. I wouldn't pay to make my own website. There are way too many frameworks out there that make it really easy like angular and python + flask.

thanks mang, really needed and, didn't know where to start!

Not that guy, but when in doubt, open up the dev tools, and see what's happening under the hood. Especially look for JS files that look like they might be libraries, and google them.

another good point, thanks!

Stop making another shitty dating app or forum site

What's the best way to learn css?

Well, the issue with CSS is that it is, in and of itself, pretty easy to learn. It's a pretty stereotypical "easy to learn, hard to master" type thing. One way I've heard to learn it easily is to try to duplicate stuff - your favorite website, a logo, whatever - with pure css WITHOUT looking at their code.

1. say I want to display data in a table and make it editable so that changes to cells are propagated to the db right away. What are my options besides throwing a bunch of JS onclick handlers with ajax at the problem?

I'm using jquery/datatables btw, but open to suggestions

2. Is there a simplified bootstrap.css containing only the styling without the grid part or similar? I use flexbox and would cut some fat, and bootstrap 4 looks a bit retarded

I had a phone call from a job I applied for. Failed the Javascript screening questions (definitions for inheritance, closure, promise, propagation). Been FE dev for 2 years but don't work with JS much and never had formal JS education.

What's a good guide for someone like me?

en.wikipedia.org/wiki/Suicide_methods

This isn't the edgy advice I came here for.

Read the fucking OP you retard.

How do I get the background of the sections out of the figure's position? The text wraps around the figure element but the backgrounds don't.

jsfiddle.net/obqhwkjd/1/

> 1)
>bunch of JS onclick handlers with ajax
implement it with Vue or React and then pretty much that on the editable component
> 2)
with most css frameworks you can pick and choose, what you use, when you include the parts from their sass source.

>Just don't do anything stupid like doing security checks in javascript.
Rather don't trust the client to properly check the data.
You can verify user input with JS as long as it's done on the server.

that?
jsfiddle.net/obqhwkjd/4/

Thanks for the help but I have just figured it out. 'overflow: hidden' declaration on the 'section' selector.

Does anybody know how to horizontally align elements? I'd like it to be positioned in the center of the black box.

Here are the properties for aside, which it is enclosed in:

aside {
float: left;
clear: both;
display: inline-block;
margin: 0 auto;
background-color: #000;
padding-right: 0px;
}


The figure element has no CSS applied to it.

The only way I have found to do it is through the dirty and archaic way of enclosing the element in tags.

Solved it myself again.

figure {
margin-right: 0px;
}


I will stop asking questions from now on /wdg/.

everyone should learn flexbox

flexboxfroggy.com/
youtube.com/watch?v=Mkza0N8NiK4
codepen.io/Ampix0/pen/qmxqNL

everyone should know their CSS selectors

flukeout.github.io/

>flukeout.github.io/
oh shit looks broken on FF (nightly), just use chrome for that one

it will be time consuming and probably not work out on your first try

if it is a good idea and you have already contacted customers / sold the product / raised capital, most goys will do it for equity (including me)
depending on the complexity 1k-10k and 1w-1month

however consider off the shelf products as well, you might can get away with installing WP on a VPS for 10 bucks and some googling for plugins

>off captcha is ridiculous at this point

WHY IS CSS SUCH A PAIN IN THE ASS

thanks again for this info

is freecodecamp any good? I wish there was just a book to learn everything..

I find flexbox almost useless now that we have grid layout.

Can someone post the front-end learning roadmap?

github.com/kamranahmedse/developer-roadmap

What is the best option for c# learning setup? win servers are expensive

So I have a dumb question, if nodes purpose is for package management and file serving. Say I we're to host a web app using AWS, isn't S3 and Route now serving files? Where would node fall into that stack? Or would it not be necessary at all if you're not working with something like a virtual DOM?

AWS Route 53 is just DNS. It translates a domain name to an IP address; not much more than that. You cannot run any custom code with just Route 53.

S3 is a static file server. You can store data on there, such as images or JavaScript libraries that will be loaded by the client, then put links to that content into your HTML or whatever. You cannot run any custom code with just S3.

AWS EC2 and Elastic Beanstalk are both services that let you run custom code, essentially like on a server. If you want to run Node.js (or any custom code), you probably want one of those. If you need a lot of files to be served to clients, then you should use S3 in conjunction with one of those. Route 53 is good and easy to integrate if you just want to go full AWS hosting stack.

This link is a good explanation of most AWS products:
expeditedssl.com/aws-in-plain-english

has anyone ever used this Stripe shit?

Neat, thanks for explaining!

Hey guys I hope someone can help me with a little problem.

I got two mongodb collections and need to do two finds and then show stuff from both of the collection in my pug/jade file.

here is the code kinda

router.post(bla bla function(req,res,next{
collection1.findstuff( function(stuff1){
collection2.findstuff(function(stuff2)
{
res.render('...', data: stuff1, data2:stuff2);
});
});
});

without the 2nd collection my pug file was just

each item in data
tr
td #{data.something}

etc.

How can I do this each item in data now with two collections?


hope you can help me and sorry for shitty formatting.

Going to be focusing my computer science degree in networking. Is asp.net something I should learn? It appears useful to at least know

>if nodes purpose is for package management and file serving
Nodes purpose is to let you run JavaScript on a server (as your backend for example)
NPM is the program, that comes with node, that lets you manage your project dependencies (both front- and back-end)

Node "can" serve files, but that's just part of what any backend can do.

Local machine. You can later run your creations in Linux machine using mono or natively when using core.

Don't know what programming has to do with networking but c# is good language to learn. Aim for asp.net core or at least MVC not webforms or old asp.

In React when you are rendering the final component, what's the best way to update the props on that? For example I'm rendering my app this way (on my index.js file):

ReactDOM.render(, document.getElementById('root'));

And I want to update the source to another URL when I click on a button, how would you go about doing this?

Lets make a stack overflow replacement that isnt ruined by the nazi modding.

It should be:
-anonymous
-points only visible to yourself

what else

I don't have much experience with react, that being said my newb assessment leads me to think you can solve this by updating the state of the source props using an onClick event.

why isn't that a state inside the App component?

muh internetpoints obviously

I think you need relatively strong modding, to keep out the "do my homework for me" questions, and the "what's the best choice to do X" subjective questions, and the "how do I make my own AI" extremely broad questions.

Because that's what I see on Quora, and that's largely unmoderated to those types of questions.

Got it, so instead of passing it directly into the component I should put the URL's as states in the component for easy change when clicking the button. Thanks lads.

>desktop broke
>pick up the old laptop I had laying around
>it's 1024x768
>everything looks fucked because i'm too lazy to build a mobile version

just my blog

i like it user
what did you use to make it?
t. absolute fucking pleb

How do I choose colors for my website? I suck at graphic design.

Anyone good at CSS and want to make some crazy animated shit?

MONOCHROMATIC SCHEME + MINIMALISM
It's easy breh

Quick, Angular or React?!

Vue

It's a meme bro

What kind of crazy animated shit?

I made this with pure css animation:
palossand.com

If I wanted to make a simple SPA page with ~10 subpages, would it be good to make one without a framework? I can just make my own router and do the good old hide and show divs for the actual pages when the user clicks a button.

just a general motivational video, watch this shit and change your fucking habits!!!
>youtube.com/watch?v=nllZrOoxpzc

For all of you NEETs out there (myself included), get your ass off the couch, turn off your TV and get to fucking studying. And don't forget your morning shower.

I've been doing a minimum of 5hrs of coding for the past two weeks, maybe more. Get your shit together guys, we can do this.

Shut up wageslave.

>don't buy things, when they are on sale
what?
>poor people don't have money saved
holy shit sherlock

wow i am a true Aluxer™ now