/wdg/ - Web Development General

>Previous Thread
>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:

stackoverflow.com/questions/46072792/how-to-run-3-scripts-in-a-specific-order-in-a-website-and-how-to-modify-html-cod
localhost:5000/friends');
djangobook.com/the-django-book/
localhost:5000/new-friend',
regexly.chipto.io/
github.com/mzabriskie/axios
github.com/dcalsky/jwt-express-react
twitter.com/NSFWRedditVideo

First for banning vueposting.

>With AngularJS though it didn't really have that of a long time to establish itself, before Angular2/4 came around.
True, although people make way too much of a deal out of the differences between 1 and 2, it's really not that different. People act like learning angular 1 is like learning latin or something.

third for jsx is shit

I have a motherfucking problem and no one on the web helped me. Can Sup Forums do it?
stackoverflow.com/questions/46072792/how-to-run-3-scripts-in-a-specific-order-in-a-website-and-how-to-modify-html-cod

running functions in a specific order is trivial, but what exactly are you doing with that python code?
How is that supposed to work in someones browser?

callbacks

It's the only way I found to get the url's. Is there a better way?

Thanks for the suggestion but, could you elaborate please?

bootstrap or no bootstrap?

Depends on project.
What is it you want from bootstrap and what's the project?

I dont understand what you are trying to achieve, seems like you want to dynamically get the script tag content from the instagram site and add it to your own?
You are not very clear.

You can do normal ajax calls with Javascript and then handle the text response.
Once you have your data and processed it you then continue with whatever comes after.

So I can do what I did with Python, with JavaScript? And after that, how do I change the HTML given that the div's have the same ID and I don't want to do that manually?

An elements id has to be unique in your HTML.
No offense user but did you just copy a bunch, glue it together somehow and expect it to work?
You need to have some basics covered.

>So I can do what I did with Python, with JavaScript?
Browser run JS not python and it doesn't seem like you intend to involve some kind of backend server there.

Help i was learning php but got a Django internship, where can i get started with it? The official docs throws a lot of stuff at me help

Post what you're working on, doesn't matter how shit you think it is.

Pic related, a crypto-currency trading bot. Had to take a break from it due to actual work. Analysis module is complete, now I'm working on graphing the prediction model so that I can test different output weights.

Must.. stop... refactoring..

> should have bought at 3K

No, I actually did the Python script from scratch. Maybe it's because it is my first project and I'm still learning.

Back to the issue, I'm going to delete the Python file and do it with jquery do that should solve the "order of the scripts" problem.
Now I just don't know how to change the HTML. Should I change the div's from ID's to classes and make class1, class2 and so son?

Trying to post data to local sever with axios. Keep getting "404 not found" error.

Am I doing this right?

export const addFriends = () => {
const promise = axios.post('localhost:5000/friends');
return {
type: ADD_FRIENDS,
payload: promise
}
};

A lot of people agree that it's best to just use classes and abandon id's altogether. So yes.

Can anyone tell me what a "Full Stack" developer is? I keep hearing this over and over and it sounds like a meme to me.

Ok, thanks for the help. I will pass by when I finish it. See you here.

"Full stack" is someone that can work both the front and back end of a project.

pls

-make backend
-make frontend
-deploy your own shit

Full stack is someone who can take and receive dick.

djangobook.com/the-django-book/
or go search on youtube

learn to search the interwebz

Goddamnit, if you are too stupid to google "Django tutorial", you're not gonna make it, brah.

It's not like Django is some exotic niche technology.

That user probably has no AFK friends, so he came here to tell us about his internship. No h8 m8

Or you know im looking for a good source that someone already knows instead of searching and dont even knowing if the source is good.

Thats not it but thx

Thabk you m8

so you trust a random to provide you with a source rather than verifying yourself?
good luck with that job, you'll need it

Yes because maybe you know that random person knows django and knows good sources? Why are you so salty?

The point of search engines is to provide you with good, reliable sources.

any recommended apartments in nyc times square? how much is the cost? planning to move there for a webdev job

The question is about trust. Are you really this dense?

I have £100 to burn, are there any courses on Udemy I should take a look at? I've already enrolled in a bunch of free PHP courses. Looking for anything.

Buy some chips and follow a free tutorial

pls keep us updated on this

Learn whatever you want using free tutorials and ebooks, keep the money to host the stuff you make while learning.

Have you checked the documentation on github? Basically, the data you're trying to post should be the second argument of the post() function, and you call .then() with an anonymous function handling the return info. Might be complaining because you aren't supplying any data.

buy real books

I'm honestly confused. I've doing web development for over 13 years and too tired to try and understand that mangled piece of shit you've managed to hack together.

What ARE you trying to do? What's the end goal here?

Are you simply trying to display data from an Instragram page? Is that it? Are you trying to replicate certain functionality from Instragram locally? Are you just trying to harvest data to display it in your own customized way for a client?

A clear, concise, and simplified answer could really help here. I mean, really take the time to describe what you want the end-result to be and why. I promise you'll get an answer.

Well, I got it to work, sort of.

import axios from 'axios';

export const GET_FRIENDS = 'GET_FRIENDS';
export const ADD_FRIENDS = 'ADD_FRIENDS';

export const getFriends = () => {
const promise = axios.get('localhost:5000/friends');
return {
type: GET_FRIENDS,
payload: promise
}
};

export const addFriends = () => {
axios({
method: 'put',
url: 'localhost:5000/new-friend',
data: {
name: friend.name,
age: friend.age,
email: friend.email
}
});
};


Basically just hacking this shit together. Fuck it.

regexly.chipto.io/

For getFriends(), I'm simply displaying that data.
Then I have a forum for adding new data (addFriends()). Which is what I'm figuring out now.

Try a get instead of post since your not passing data, need to see your backend or try to navigate to the endpoint in a browser

And that's why you read the entire thread, I'm dumb

It's cool, I just hack shit together, and I have a job.

I guess I was confused because you were showing a get earlier when you were asking about a post. Your consts there make me think you're using Redux or something though, so maybe that's why you're using the return for your getFriends() function? Either way, you'd probably want to use a .then() on your axios calls with callback to handle any responses from the server. Then again, you may be, but we haven't seen all the code.

Also, PUTs are conventionally for updating data that's in the database already, you'd want a POST if you're adding a new friend.

github.com/mzabriskie/axios
They literally say to use .then() to handle the response when it comes around.

Bumping from last thread:
1) Has anyone experience with Dokku?
2) How to secure this stupid Rails thing? Is Fail2Ban + "on board" stuff enough or do I need additional measures?


By the way, I think I'll do my next bigger project in Hanami, not Rails.

You're using redux and going to run into issues with async code.

Your reducer functions need to be pure with no side effects like http calls.

What is your plan with the promise payload? Can you post your reducer function?

I think you may have to create an observable from the promise and put it all in an effect.

The promise payload, I have no clue, man, I'm completely new to React/Redux/Axios.

Reducer function:
const friendsReducer = (friends = [], action) => {
switch(action.type) {
case GET_FRIENDS:
return action.payload.data;
case ADD_FRIENDS:
return action.payload.data;
default:
return friends;
}
};


Did I dun goof?

Bruh, it's working without it.

But this user just brought my attention to the reducer. I definitely fucked up.

I'm not sure what that is haha.

Reducer should take in state and action, you got the switch action type right but why are you returning the payload?

You should return an action like
HandleAddFriendsAction(state, action)

Which clones the current state, make changes and return that.

Idk man. I've been writing VanillaJS for like two years. React is making me feel like shit :/

Think I have to really dig into the documentation. Thanks for trying to help, user.

Why does /wdg/ hate Angular 2+? I've been trying it out and it's a gorgeous framework.

Nah I got you,

K so the issue is the API http call will return after the reducer function is done. This means you can't do things like add the friend to the state because by the time it returns the function has competed already.

To get around this we need the http call to finish then call the reducer function with the result, in this case a friend or two I'm guessing.

Look up and read on effects, you'll need to use one to intercept the action dispatch, call the http call and then execute the results into the payload for your add friend reducer function.

This way the only thing your reducer function does is add the friends to your state, making it 'pure' (if you give it an input it should always return the same result and never waver).

I'm on my phone but I'll try to write the observable you need:

@effect()
Whatever = this.actions$.typeof(ADD_FRIEND).getLatestFrom(this.store$).exhaustMap(([action, state]) => {
Return Observable.fromPromise(observer => {
Put your promise here, when you get the result call :
Observer.next(result)
}} );
).map((result) => new Friend.AddFriend(result));

Its lack of shittiness is a breaking change for literally everyone on the angular 1 bandwagon

Should of mentioned, sorry been drinking.

You will have to deal with observables when using redux effects.

What that code does is:.
When the action observable emits an action with type of add friend, send it to the next in the chain

With that action, also get what the last state of the store (also an observable) was

With the action and the state, use exhaust map and pass these in. The exhaust map needs an observable which when it emits (observer.next(val)) it will pass the value to next in the chain. It will wait for async functions to finish so you create an observable from the promise that gets your api http call and passes the result on.

Finally you take the result from the exhaustmap and map it to a new action.

I know it's a lot but it is worth it.

>use React
>rapidly develop your project
>intuitively manage the structure of your application by breaking things down into a hierarchy of components
>use TypeScript to improve solidity of your code
>still able to get runtime errors

>use Elm
>writing tons of boilerplate code
>all of your code is in one big file because prematurely separating things bones you
>constant challenge to figure out how to architect application to be purely functional
>funky-ass syntax and preferred formatting
>impossible to get runtime errors

Why can't I have the best of both worlds

Has anyone here used WebAss yet?

Kill yourself, you worthless subhuman sack of shit.

Just use Angular 4+

vue.js is so comfy to use.
sugoi!

desu~

Is there a big website that uses node.js as the main/only backend framework? Anything example I find on google also has another backend language besides node.js

No, that would be retarded.

Most if not all 'big websites', as in shit like youtube or facebook or twitter will always use more than just one backend language.

Why would that be? Node.js is faster than any framework on PHP, Ruby, and Python. It uses javascript so both front and back end developers can easily work together. You can use libraries to make it multithreaded.
I understand companies like pic related using robust languages like Java in the back end, but websites like yahoo and wikipedia could be using node.js instead of PHP.

I was thinking the same thing, but with GO. Like, why doesn't literally every website use such a 3000 times-folded, fully featured language like golang? It's like they don't even want to be expressive web artisans?

Walmart.com

Because node.js is fucking stupid

>libraries to make it multithreaded
No you can't. You can spin up multiple communicating OS processes but that's not the same thing as multithreading. Calling into multithreaded C++ code isn't multithreading either.

Also that's a fucking retarded systems model.

>>constant challenge to figure out how to architect application to be purely functional
That's called being stupid, not working in a bad language.

I don't know shit about databases. Is there a limit to the file sizes you want to store in one? Like let's say my site was serving short stories that could be tens of thousands of words - would I want to keep those in a database or would there be a better solution?

"Files" are on OS concept, not really applicable in databases which think of data in higher level ways than "sequence of bytes".

Almost all RMDBS have both max length and arbitrary string types. 100KB value in a text field is not going to be a big strain on your DB, although when profiling be away the transfer time can become significant in select * style queries if you don't really need every field.

Try this
return axios.post(URL).then((payload) => ({type: ADD_FRIENDS, payload});

>Try a get instead of post since your not passing data
This is not the criteria you should be using when deciding on an HTTP method.

Explain SQL to me bois. Am I right in thinking it is a 'middleman' language between a database and a database-interacting language like PHP etc?

I think you are right but I am trying to learn about this: couldn't you say that the pseudo multithreading does the job well enough for serving a webpage? This isn't about rendering 3D models or doing difficult calculations after all

Would it be better to just store the text files as files and have the database simply reference the file?

It's more than that. It's the most popular database. Think of it more like php supports it, along with other database types. DBAs don't even touch much server side code to do their job

That's the most common practice

>couldn't you say that the pseudo multithreading does the job well enough for serving a webpage
Yes, multi-processing is almost always a perfectly acceptable model for scaling a web service. The primary advantage of threads is they can share a stack and are a bit more light-weight than processes (it costs less to create and destroy them). The difference is close to negligible when we're talking about the time/resource scales involved in your typical dynamic webapp though.

To be I () am not who you were replying to. I don't have a particular issue with node per se, although I don't think JS is a terribly well designed language. I just wanted to point out that true OS multithreading is not supported by node.

>It's the most popular database
lol SQL is not a database.

"middleman" doesn't seem real meaningful in this sense. It's the language you use to communicate with the database. I guess that makes it a middleman in some sense but it's not like there's some direct API you can employ instead. Some DBs in the NoSQL family use other languages or no specific language at all to communicate but it's not like SQL represents an additional layer you can skip, it's just the only language your DB recognizes.

Node or golang?

Whichever is the right tool for the job.

Is there a way to have all the routing done on the backend using express and then have it serve different react files? As of now I'm doing all the routing in react. Not sure what's preferable.

Are there any good sources for learning JS? I work as a PHP programmer and have solid knowledge in c++ and python but I feel like I'm lacking in the js area. I started YDKJS but it seems superficial in the way that it just glides over basic topics. Any recommended books that I could look into?

Kill yourself my man.

Yes. Depends on the app.

you'll get very few runtime errors if you setup typescript to be very strict and your linter to never allow you to use any type.
elm is nice but it will never be very practical I think

as I understand it they only use node in the more front-facing side of the backend (to do react SSR for example). the rest of the backend is still Scala and Oracle Commerce

I'm doing the log in part of my project and I wonder how to do the authentication with express + react. Should I send requests to the login server each time I go to a protected route in react to check if the user session is still valid? Presumably some request in ComponentWillMount. But on the other side it seems a bit expensive to send a new request everytime I update a protected page?

hi guys, I'm trying to make tetris in Javascript for class (we have been given very little guidance) I want to return a cloned version of my grid which is stored as a 2D array.

i don't want to return references to these values but a deep copy

var gridClone = function(grid) {
}


What is the best way to do this? I feel like I could iterate over every value and assign them to in a new array

cont.

But I don't know if this is efficient or not

Hey guys, I'm trying to set up my own Digital Ocean server and SSH into it, but I keep getting Port 22: Connection refused error. Does anybody have any good walkthroughs to deal with this shit? Everything I find online is useless. Any tips or whatever.

Apparently my droplet(server) is up and running on DO, but I do ssh root@--ip number-- and I get that error. I have checked and I do have sshd installed, I ping the server and it works. No idea...

I've decided to fuck efficiency and just trying to get something working for now. I feel like I get caught up when working with JS about trying to do things to fancily instead of just writing code that works.

>TypeScript
>142% growth rate
GOOD

Did you set up firewall? If yes then you probably blocked ssh. Hope you have alternative access at that case.

github.com/dcalsky/jwt-express-react

I like Node

You know the basic syntax, right?
If you still need to familiarize yourself, then check learnxiny, do some code challenges and learn ES6.
Once you got that down, you just start building stuff and constantly look up things on MDN

fresh server with no changes should give you 0 problems
Are you logging in with a password or did you specify, that you want to use a SSH key?
Probably the latter if you are having issues.