/wdg/ - Web Development General

weeb dev general

>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/
coderbyte.com/
bento.io/

>Next
youtube.com/watch?v=sBzRwzY7G-k
github.com/kamranahmedse/developer-roadmap

>Useful 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

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

artemyankov.com/tcp-client-for-browsers/
angular.io/tutorial
developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/
activemq.apache.org/websockets.html
0.0.0.0:8000');
nodejs.org/api/http.html
graphql.org/
heroku.com/customers
developer.amazon.com/alexa-skills-kit/alexa-developer-skill-promotion
developer.amazon.com/home.html
github.com/alexa/alexa-skills-kit-sdk-for-nodejs
hashtags.chat/
jsfiddle.net/kg261mc9/1/
pedophile.top/
retardedpedophile.club/
pedophilenigger.faith/
pedophilenigger.accountant/
twitter.com/AnonBabble

post what you're working on

trying to figure out the best way to do multiple textures in webgl so everything doesn't get fucked up

Is this for a browser game ?

Given that internet explorer is no longer worked on, how much longer will IE 11 be supported on the web since it lags further and further behind all other browsers.

dicking around with d3js for data presentation since the higher ups at my place wants to make the data more "DYNAMIC"

you're lucky, graphs are fun

Anything you would recommend for d3 senpai?

r8

Not sure because I just started looking into it, I'm mainly the backend guy to be honest.

look at gallery on their wiki and start off by adapting exiting stuff

Nah, I just want to learn some basic 3D stuff.

I'm about a month into learning web dev, at what point should i get a web server?

Can you suggest any cheap ones? Most I've seen still cost a minimum of 70 bucks a year, is that the lowest i'm getting?

not gonna spoonfeed too much because you won't learn
but digital ocean and GitHub pages
that's all

you don't really need to rent a server until you have something you want to host
before that just dev on localhost

if you're a student you might get some coupons from github student pack

AWS is a pay-for-what-you-use type deal, so you won't end up paying that much for a small low-traffic server.

noSQL or SQL?

Okay, i'm gonna check out DigitalOcean, AWS and Localhost. Thanks for the suggestions fellas.

Sup, /wdg/.

I'm currently using ZeroMQ for messaging and I'm happy with it. By "messaging" I mean "clients subscribe to the publisher (the server) to receive data and also connect to that server using client/server pattern to send requests".

The problem is that I want to eventually have browser clients that connect to it, but ZeroMQ doesn't have a proper JS client library (with CurveZMQ encryption support, etc.).

What's the solution for me? Should I use another separate library for browser clients only? If so, I guess I should mention that my server backend is in Python for now and might be moved to C++ later.

at a glance it seems zeromq communicates through tcp sockets
browser clients use websockets tho so you probably want to use a setup similar to this
artemyankov.com/tcp-client-for-browsers/
and have a proxyserver bridge websockets to your tcp zeromq endpoints

i'm assuming your point is to have synchronous client-server communication otherwise you could just send ajax to proxy server who would then send stuff to the remaining of your system

in both cases proxy server just interfaces the api for browser client to some existing zeromq client

also please share what you are using this messaging framework for

Just bought a whiteboard
Feeling like a real boy

>and have a proxyserver bridge websockets to your tcp zeromq endpoints
But doesn't this mean that I basically have to reimplement the whole of ZMQ spec in JS by myself? Doesn't sound fun. But regardless, I don't think a proxy is the right choice.

>i'm assuming your point is...
i dunno what my point is, user. I'm basically a noob in JS and webdev in general, and right now all I want is to tick a mental box that says "have a vague idea on how the backend for the web clients will work when I get around to implementing them".

The real mystery for me in JS is Pub/Sub, where Sub is the web client and Pub is my Python or C++ backend. how does one do that? (obviously ignoring the whole ZMQ thing I already have going on)

>also please share what you are using this messaging framework for
I'm making my own Pushbullet clone, i.e. a messenger where devices talk instead of people. A browser extension (or a web app) is a thing that's pretty important to have for a project like that.

Hi
Im learning Angular4 because i dont trust the stuff from facebook (react).

Is this tutorial enought to get the basics?
angular.io/tutorial

Is typescript the way to go?

>want to set up own forum system from scratch, figure it will be easy since I'm already a Javascript pro and PHP looks pretty similar
>my face when grappling with MySQL tables, columns, private keys etc
It's just so mind-numbingly dull /wdg/, I fucking hate working with databases!

Is python Flask gay or worth learning

There's a link in the OP about VPS hosts, I know, but which one do you guys use? I'm looking at Linode now to host my portfolio site as well as its variety of projects. Traffic isn't expected to be big so I'll prolly go for the cheapest options. Any recommendations?

You want different clients to send and receive data to each other. You want this to happen synchronously when possible so that client receives notification when getting sent stuff without having to poll the service every 20s or so. You also want to make sure each client gets its data after being disconnected for some time.
Standard way to implement this is to encapsulate data as events and make them pass through a centralized message queue which in turn makes sure to dispatch messages to the right clients in the right way. So you use a messaging framework since implementing all this crap would be a hassle. So you have to define the messages your applications will communicate to each other in term of event, and user interactions with applications in term of sending and receiving events.
So for web client, you'd translate application interactions into events but then would have to send these to server which in turn would pass them to messaging queue. Since you want synchronous communication you use websockets. You could use native notification apis with service workers like this developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/
but i don't think you can send more than some text and small images through this, also ios browsers don't support service workers.

Alternatively you could use another messaging system like this one which supports websockets apparently
activemq.apache.org/websockets.html

TL;DR use activeMQ

>which one do you guys use?
Vultr and Scaleway mostly, though the latter I would only use if you are from western europe, since they only offer servers in Amsterdam and Paris.

Though you can't really go wrong with any of them
Might check if they fullfull your need for automated backups, networking, block storage and whatever else you might want.

Trying to learn reactjs. Is all I do with reactjs rendered on the server and then outputting html documents to the client? I thought you wanted the client to do the front end rendering, to not strain the server, so this is confusing to me.

I want to start doing full stack shit. I know some babby HTML and CSS to toss together static pages along with Angular for SPAs, but I have no fucking clue how talking to backend works, or really anything at the backend. Where do I start for full stack shit? Is MEAN stack the best stack to master for someone starting out?

Thanks, user. I'll think about it.

Just learn php and javascript like a normal person.

Anyone here with document base database knowledge like mongo and such?

Is it possible to have something like an array of schemas inside a schema? Something like this:

UserSchema = {
name: String,
email: String,
hobbies: HobbySchema[]
}

HobbySchema = {
name: String,
type: String
}


How would it work? Does the user document references the various hobby documents?

Pick a backend you want to learn. Possibly in a language you already know.
Look at AJAX, REST and Websockets.
Make a bare bone app and implement it for the sake of learning.

You can prerender/server-side-render the initial response from the server afaik (never done so)
React still runs in your browser and takes care of changing state.

invoices and credit notes

Yes, MEAN is the easiest if you know Javascript and a bit of object oriented programing. The hardest part to learn there will be Angular though since it's a complete MVC framework, you could replace it with React since Angular tends to be overkill for most simple starting projects.

The MERN stack, I like it

Start with Node and no express, to get an idea of how things work on a somewhat lower level.

It's super easy to get started, once NPM is installed and stuff.
const http = require('http');
const server = http.createServer(function(request, response) {
// get data from request object, such as URL
let url = decodeURI(request.url)
// set data in response object and then send it with the end() method
response.statusCode = 200;
response.setHeader('Content-Type', 'text/html');
response.end(`ayyy lmao
you made a request for ${url}`);
});
server.listen(8000, '0.0.0.0', function() {
console.log('server running at 0.0.0.0:8000');
});


That's basically the simplest server implementation you can do.

In most situations you'll use the HTTP.get() method, and give it a URL, or you'll use Express or something.

But anyway, read the docs:
nodejs.org/api/http.html

Setting up dbs is fun in its own extremely boring and tedious way.

I've been working with JavaScript for a few years now, but I'd like to have a better understanding of JavaScript in general and how things happen under the hood.
I was recommended two books: "JavaScript: The Definitive Guide" and "JavaScript: The Good Parts."

How are they?

Eloquent Javascript > Both

Please respond.

Opinions on mLab?

oh damn this is sexy af graphql.org/

UserSchema = {
name: String,
email: String,
hobbies: int[] //array of hobbySchema id as fk
}
HobbySchema = {
id; int,
name: String,
type: String
}

That's very SQL like, are foreign keys even a thing in shit like mongo?

thanks my dude

Where do I buy domain names? Does it even matter? Don't need hosting since I'm just gonna use /based/ github pages

Not him, but no, not in the relational database-sense. But you can build a search index over hobbyschema identifiers and look them up very fast.

majority of them are basically the same price, if anything you'll just find some that offer better customer support or some promo price

also look into gitlab pages

>Where do I buy domain names?
Namecheap.

>Does it even matter?
Customer service, privacy policy, policies about takeovers, etc.
Some registrars will yank your domain if someone waives enough money at them, or will give your personal details to anyone that asks.

Namecheap has the best customer service. They only disclose your information for a valid warrant.

Is Heroku just for testing shit? Can an actual enterprise level application be hosted there?

Otherwise you can do this and optionaly make an index on hobbies if you need this to make queries.

UserSchema = {
name: String,
email: String,
hobbies: [{
name: String,
type: String
}]
}


It depends on how you model your domain realy, maybe you're actually storing relations between entities rather than documents

heroku.com/customers

Word. Thanks

Can I create an API endpoint like this users/:name/hobbies/:name with that approach?

ye
find({"name" : "user",
"hobbies" : {"name" : "shitposting"}})

or something

maybe you'd rather build your request like this tho :
/user?hobbies=shitposting

wouldn't make sense to query for users named user having a specific hobby unless username field is not unique

How the fuck do I get started with front end? I'm doing a project with node js right now and I have the backend part done but I have no idea where to even start with the front end. I mean I know basic html, js and css but I don't know how to tie it together without it being a super dumb solution. How do you guys get started when you don't even know where to begin? Just try to copy other projects on github or what? I'm thinking of doing it with react js, is this a really dumb idea if you're a novice?

Make use cases to describe interaction. draw out the interface before even touching or thinking of the markup and js behind it.

you define user stories, so how you want user to interacts with application through ui
then you draw shit mockups with pencil and old napkin of how your application looks like, what the different screens are and how they change in relation to user pressing buttons
use these mockups as general guidelines when making html and css
don't bother with frameworks for small projects unless you really want to learn one, maybe use some css boiler plate
comfy points for using sass and setting variables in css since you'll end up autistically wanting to try 15 different color schemes and typefaces

wake up
head to starbucks
open up your macbook
open up facebook
and in 4 hours, everything should be complete!

hope that helps user and if you have any questions let me know :3

Give it to me straight /wdg/: Is node for gay fruitcakes?

Yes but it's deceptively easy to learn

Why would it be?

Yep. It's still handy to have in your toolbox because most companies are gay fruitcakes.

Give me the MOST readable font and text/background color combo EVER. No really, readability is the #1 purpose of what I'm doing here

Why haven't you guys created an Amazon Alexa skill? You get a free Echo dot and a genuine pair of programming socks.

developer.amazon.com/alexa-skills-kit/alexa-developer-skill-promotion

Oh shit nigga. How I do this?

monospace white on black

You'll save time and energy if you read the typescript docs first

******developer socks
poor mans programming socks

There are some tutorials. Basically you need to sign up for an Amazon developer account, and then go to
developer.amazon.com/home.html

There's an 'Alexa' tab that has some links to videos and stuff to teach you how to make a skill.

Basically, you have to define a 'voice user interface' in their GUI tool (you can do it with JSON, but the GUI is easier). You give it a bunch of 'utterances', which are phrases that people might say to your skill. Multiple utterances can map to one 'intent'. An intent maps to a function on a server, generally hosted on Lambda. The code is written in Node (or Java or maybe Python?), and you can also save data to a DynamoDB table pretty easily.

The easiest way to write the code is using the Alexa SDK, which basically makes it easier to handle requests and send back responses.
github.com/alexa/alexa-skills-kit-sdk-for-nodejs

Anyway if you look through Amazon's documentation there are some tutorials and examples you can follow that guide you through this.

White text + black background or vice versa?

white text on black background

> ctrl + f
> no elm
You poor souls..

I made this with react and firebase:
hashtags.chat/

Basically user discord (no voice though lol).

thank you user, I'm buying an apple macbook™ tomorrow.

Do if/else statements in Javascript necessarily NEED else or can they just werk with if?

Pretty much every language (including JS) allows just if statements without the else.

Any good source to learn react that isn't the docs?

what is the coolest, hip-est, most next-level domain extension that I should be using for my startup?

dotbussy

Is there any way to get the if block to work properly without resorting to jQuery?

jsfiddle.net/kg261mc9/1/

The latest meme is offensive domains

pedophile.top/
retardedpedophile.club/
pedophilenigger.faith/
pedophilenigger.accountant/

.cool
you'll be hipster for reusing cool before hipsters start reusing cool before it becomes cool

What's on those? I'm in Europe, I might get jailed

.com

Seriously, don't bother with anything else unless your target is the tech crowd.

Make a retarded name like shizoopl.com before you even consider something like a .net or worse.

Moist.js, it's a front-end rear-based webular Javascript framework for partnerization and next-generatizationised web app development for the Web 4.0 market dot io

Trips.

Also shizoopl.com is available. Make it yours for infinite business dollars.

ONE OF US!!!
ONE OF US!!!

Just MDE shit

Can I make mad bux with vanilla JS? How to make mad monie?

have you used elm for anything?

by stop posting on Sup Forums

Yeah, I'm one of the early adapters.
I have been using it since version 0.12
It's included in an android and iphone app with >100000 users, in our website and in tons of my personal projects.

I start all new fronted projects with elm

>I have to give my credit card number to AWS so I can make a lambda function

fuck this

What are some prerequisites for elm? Just be good with js and familiar with fp?

>Globalist company
>promotions and prices are still geolocked
This is not that future I was promised

Question. If you were a business owner and you saw an advert in the local supermarket for 'website maintainence and repair' with an email address to contact, and you have been unsatisfied with your company's website lately so you send the message to the email address and the guy comes back saying that he charges £60 for a fix-up and £30pm for website hosting and continuous maintainence, would you find that extraordinarily cheap or an ok price?

you need to have a solid understanding of lambda calculus and topological boolean algebra. This is true for any functional programming language.