/wdg/ - Web Development General

Prev thread: →

>Free beginner resources to get started
Get a good understanding of HTML, CSS and JavaScript.
developer.mozilla.org/en-US/docs/Learn - a good introduction (independent of your browser choice)
freecodecamp.com
codecademy.com
hackr.io

>Further resources
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
github.com/kamranahmedse/developer-roadmap - Frontend+Backend learner-path suggestions
youtube.com/watch?v=Zftx68K-1D4&feature=youtu.be

jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS

Attached: wdg.png (822x552, 868K)

Other urls found in this thread:

mongoosejs.com/docs/api.html#document_Document-save
youtube.com/watch?v=lxYFOM3UJzo
jsfiddle.net/208qsoav/1/
stackoverflow.com/questions/29055518/are-es6-template-literals-faster-than-string-concatenation
stackoverflow.com/questions/51185/are-javascript-strings-immutable-do-i-need-a-string-builder-in-javascript
twitter.com/SFWRedditVideos

how do i scrape a dynamically updated site with javascript? ive been using cheerio for this sort of thing up until now but it looks like what i'm trying to load isn't generated until after a delay

Do you mean that the data you want is populated by ajax?
Is replicating the ajax call an option?

Yea consider replicating the javascript, otherwise if it's too complicated just selenium that shit

I have a question towards full-stack developers: How did you become one?

I'm currently a front-end developer, so most of my skills involve html/css/JS/PHP/React ... what should I be looking into to make the transition to back-end?

Is it just like starting over but with the front-end knowledge I guess? I'd really appreciate any tips, thanks.

Attached: programming.png (1080x718, 169K)

nigga if you already know php or any server-side language, that means you are one step closer to the backend world

Working on the signup in an express/mongo app, I encrypt the password on a .pre() hook in my Mongoose model. What I'm wondering is if this flow makes sense as far as promises go:

handleSignUp: (req, res) => {
const {
name,
last_name,
email,
password
} = req.body
User.findOne({ email })
.then(userFound=> {
if (userFound) return res.status(409).json({ msg: "E-mail already in use." })
return userNew= new User({
name,
last_name,
email,
password
})
})
.then(userNew=> userNew.save())
.then(userSaved=> res.status(201).json({ msg: "Successfully registered user.", userSaved}))
.catch(err => res.status(500).json(err))
}


I'm most concerned about the .then(userNew=> userNew.save()) line. Since .save() returns a promise I thought I could link it like

User.findOne()
.then(... return userFound or return userNew)
.save() // Supposed to use the returned userNew and save that, but doesn't do that
.then(userSaved)
.catch(...)


...but it throws an error. Here's the documentation

mongoosejs.com/docs/api.html#document_Document-save

thanks, i was able to get what i needed. had no idea you could even do this.

Cool.

Things like session cookies complicate it but in dev tools, you can usually just right-click the network request and select "Copy as fetch" and then pretty much just paste it into Node.

Use the Passport-Mongoose plugin, it will do all that shit for you.

I could be using loopback or something if I didn't want to do it by myself but I'm trying to learn how things work first.

Just do it like:

const userNew = new User ({
// ..
// ..
})
userNew.save()
.then(userSaved => res.status(201).json({ msg: "Successfully registered user.", userSaved}))
.catch(err => res.status(500).json(err))


This way you can just encrypt the password inside newUser before you save it, making everything a million times easier, and the code is actually readable instead of chaining like 6 promises together.

I'd do that if I didn't have to look for the email the user sent to see if it was already in use, I guess I could use a conditional outside the whole thing and not chain the promises to the findOne function

What should I use instead of jquery mobile/ui to make my form look better? I'm already using regular jquery for some stuff.

Attached: file.png (863x403, 76K)

I didn't even know jquery had a ui, why though? is it like bootstrap or something?

Have you tried normal CSS

it allowed for things like pic related pretty easily. the problem is that it requires really old, deprecated, and insecure jquery (1.8) and the project seems dead.

yeah, but it's just for a small personal website so I'm not looking to get too deep into learning all the tricks and hacks to get the css right

Attached: file.png (804x261, 22K)

No?
You literally have an if / else statement already, it's exactly the same

if the user exists, you exit the function and return a json message saying it exists, else you save it to a constant, then you change the password to be hashed, and then you save it to the database.

But to hash it you just run it through bcrypt and then change userNew.password = hash, so now userNew's password is hashed before you save it.

And then you just do userNew.save()

I'm already encrypting the password. I tried what you commented, it works but it throws an UnhandledPromiseRejectionWarning: Unhandled promise rejection. error


User.findOne({ email })
.then(userFound=> {
if (userFound) return res.status(409).json({ msg: "E-mail already in use." })
})
.catch(err => res.status(500).json(err))

const userNew = new User({ ... })
userNew .save()
.then(userSaved=> res.status(201).json({ msg: "Successfully registered user.", userSaved}))
.catch(err => res.status(500).json(err))

fug dude I'm writing pseudo code so you figure it out and learn something

Obviously new User has to be :
const userNew= new User({
name,
last_name,
email,
password
})

and you have a space after the .save also it should be userNew.save()

Attached: pepodance.gif (1027x731, 111K)

I'm typing the code here to translate the variables but the code in my editor works, I'm testing it, it saves users if it they put a unique email and throws the email already in use if they don't

I just wish people would enjoy the sites I make so I could live off them. Maybe I'm just bad at monetization.

React will get me a job
Vue seems nicer makes more sense and has actual documentation
:-(

Is there any real reason to learn GraphQL?

>Vue
>has actual documentation
I've never heard that said before.

Making routes for different data structures could be a pain in APIs. You could just have one/less end point to use for all of your db queries using GraphQL.

Well, since you know JS, I'd recommend picking up Node and learning some db as well (most db's have packages that you could use to interact with them through JS as well). After that, come work for us, we need someone.

no it isn't. The only times you will really want to use them is in a big single page application imo. For that they offer some really useful features like data binding and organizational sructures.

Are there any websites that have those non-generic bootstrap templates? Every single one of them are those generic "responsive" animation bloated filled with white spaces and probably use particles.js templates.

Well their website has some nice examples, and they have a team that makes videos for free, rather than me wasting $10.99 on some udemy crap for react

People keep stealing my fucking work. What should I do?


I have had 3 things stolen. I make tools for twitch streams and I offer them for free and people keep stealing them for their multi-million dollar funded streamer tool sites.

This is the fucking third. They are just watching what I do and copying it and making profit. I'm fucking pissed.

What is the point of being upset that others are making money off of it, if you want to give it away for free? Why not just put it on github with a different license that says they can't sell it? leddit's Jow Forumslegaladvice might be able to help given more details

>making tools for twitch streams
lol
>offer them for free
lol x2
>multi-million dollar funded streamer tool sites
doubt it
If you truly want to give shit away, why do you care that it gets used elsewhere? Either man the fuck up and enforce your licenses, or shut the fuck up.

>make something for free
>omg people took it for free
What did you expect? If you make something for (free) then it's free to use by anyone

Unless you mean you put a license on it meaning nobody else can use it for commercial and they do anyway, in which case it's illegal and you can take action against them and will win.


This is how open source works, you put shit out there and other people just take it and then put their own twist on it and you get nothing from it. What was you expecting? They'd give a shit about you? lol

Ok so I'm spending thousands of dollars to make my code mine. That's cool.

These fucking stupid companies though. I applied for one to see what they would do and they actually gave me the test to code shit to see if I was a good coder but they stole my fucking tools and I'm one coder and it took me 2 days to code my tool and it took them 6 months to copy it.

That's who I'm dealing with. Fuck these guys.

and yes, they are funded for 5 million dollars and have over 30 employees and I'm one person with a bottle of ritalin.

Makes JSON payloads lighter by only including the fields you specifically requested for.

I didn't put the code out there. I put the idea out there as a finished project for free use for streamers and they stole it and added it to their shitty subscription model.

Dude literally all you need to do is include a license for free wherever you upload the code, you don't need to spend anything to add a license that says companies can't steal it for business use.

If you would have taken 10 minutes to think about how other people might use your code before you release it publicly you wouldn't have this problem.

It's like if you are invent email and some big name company comes along and steals the idea of email and puts a subscription on it. You're fucked because you don't have enough people on your site to spread the word and the shitty subscription model site gets all of the people because they are a bigger name.

That's exactly how it works.

They didn't take my code. They took my idea. I need a 5k USD tech patent to protect me against it.

Stop making it openly available and fucking sell it then you mong

Whats so enticing about being a back-end dev that people go for that over front end?

I understand not being a designer, however I dont understamd people who prefer back end over front end if they could do both.

Not sure if this is it but shouldn't the then() in the findOne function return something if the user isn't found? I'm not familiar with promises but doesn't it just keeps running if you don't tell it to resolve in this case?

> work hard to make release
> barely time to test code
> rewriting front end entirely
> finally working
> reviewing own code
> break the app during code cleanup

Attached: 608.jpg (709x765, 36K)

>If you would have taken 10 minutes to think about how other people might use your code before you release it publicly you wouldn't have this problem.
Well it's not like product managers think about this either. Or they'd be better off not maybe...

> break the app during code cleanup
You did use git, right? If so, it shouldn't be a problem to go back.

What are you working on anons?

Attached: jz2PCCIr7N1r5jhdIuKB.gif (540x440, 93K)

a todo list on php

I've gotten so lazy about committing. I'm on a team of one other full time engineer and an intern. And I have the bad habit of making large commits with lots of different updates. I did like committing until it's clean. Could always squash temporary commits away in the end. But I'm so in love with not having to package up my commits in a little gift wrapped box for plebs to look at and tell me to stop writing one line if statements.

Polishing a small Elixir program that automatically transfers files from a local directory to my linode server via SFTP every hour, so that my Phoenix site consistently pulls up-to-date data.

>They didn't take my code. They took my idea. I need a 5k USD tech patent to protect me against it.

You're supposed to patent fully functional products that do unique shit, not ideas.

>patent fully functional products that do unique shit, not ideas
If only that were true

Reminder that this one scrawny BR absolutely BTFO every other language built for concurrency out there (Haskell, Javascript(Node.js), Go, Crystal, Rust ) by literally just recycling an existing 30+ y.o. boomer language.

youtube.com/watch?v=lxYFOM3UJzo

literally no one cares about your shit language and its useless gimmicks fag

My portfolio website, and after that, finishing up a few projects in it.
nice .gif, btw

Cool, you opted for a minimalist desing for your portfolio?

I wouldn't call it minimalist on its own, but compared to most web dev (and especially web design) portfolios, it sure looks minimal.
I'm just trying to make it look modern, while keeping the usability to max. Not trying to make something ultra-flashy and cinematic with shitty UX.

Pic from Google, but this is a bit similar to what style I'm going for.

Attached: 10_user_profile_projects.jpg (1600x1865, 1.14M)

Oh looks pretty cool and clean!

>just selenium that shit
is selenium better than phanotmjs?

ask Stallman lol... that's what you get for buying into communism meme.

>ask Stallman
It's funny because RMS did the opposite thing.
He saw people selling software and he replicated the functionality in free versions which he gave away.

What are some cool project ideas to make me learn backend more
Preferably stuff I can just shove fake data into and not need to get actual users

For a profession where you spend 95% of your time in front of a computer screen I wish the web development world wasn't so obsessed with working for other people. It seems a lot of people are worker drones who live to work their lives away for other people in Silicon Valley when it would be better if they were independent and worked for themselves.

Literally anything you can do on the internet has to be this way thanks to pajeets and poor countries in general.

You just can't get a nice freelance wage compared to a first world country because 10 dudes in india will work for 1/10th of your price, and together they'll EVENTUALLY catch up to one person, even if they are retards.

You have to work for someone else because other people are part of a huge company and that company has a lot of money to pay educated and good workers, who have actual quality and worth.

You get fuck all online except pajeets and low tier programmers who got denied from every other job, or people who are living in shitholes where their local pay is so bad they'd rather work for peanuts but it's more than what they can get anywhere in their country anyway.

Poor people drive the price down -> People get used to paying less, getting shit tier stuff in return -> everyone loses, even the customers

rate new reddit

I'm not good at design, I spend too much time with it and it looks like shit anyways. I'm heading into backend and then into cybersec. Is bootstrap or any other framework a way for me to just design my projects to look somewhat decent and then do the backend stuff by myself?

Attached: halp.png (230x219, 7K)

That's literally why bootstrap exists, so you can just have a consistent design and focus on the logic behind the website, not the look.

Maybe use a swatch or bulma or something so it looks a little different if you want it to not look exactly like everything else.

I thought so, thank you very much sir

Being a freelancer isn't supposed to be easy. Instead of work being fed to you in a typical job you need to get out there and find it/network.

If you're implying that you can't get by on freelancing, you're objectively wrong. If you're implying that you can't make great money freelancing, you're still wrong, so I don't really know what you're getting at. Not sure if you're just jaded or something, but blaming people from another country as the reason you can't find work seems like a cop-out.

Anything is possible, obviously.
Just the amount of competition is way higher, and they're also wanting less pay, and are often times just as skilled as you.

It's more about marketing & selling yourself than being actually good at what you are doing.

That goes for any kind of work though. Plenty of people get turned away at interviews, for example, because they don't have good social skills and thus don't seem like a good candidate. I think this is especially true when you consider that being a freelancer is essentially the same as being your own business. You are the product as well as the sales team, so you need to both be able to do the job as well as sell the idea that you're the best.

Frontend newbie coming from backend here.

So now I am writing a comment field that gets its contents through a rest api (yes, I want the rest api for this).

But where I don't know if I do it right, I am building a js function that concats some strings with the html content for the comment boxes in them and then drops this into the DOM.

I-is this string-stuff how it is supposed to be done or am I retarded and it is terribly inefficient compared to something else?

Attached: djw8lztokti01.png (586x578, 37K)

Post an example fiddle/sandbox/whatever

You can concat strings if you're doing small tasks, but if you want to render something more complex it would be better to build a template element, then use something like Handlebars/Mustache to render and append it in the DOM.
This assuming you're not using any front-end framework.

jsfiddle.net/208qsoav/1/

About this, quickly wipped this up from some stacoverflow answer, but it would work about the same, just with more variables that adjust the content of each individual comment-box of course.

Googled it, would that really work with variable input?

>would that really work with variable input?
That's one of the main points of a templating engine.

Heh, fair point

The problem is that, if you are taking raw user input and putting it onto the page, you are leaving yourself open wide for XSS fuckery.

Seems like performance is literally the same for this kind of task: stackoverflow.com/questions/29055518/are-es6-template-literals-faster-than-string-concatenation

Me here. I woke up a few minutes ago, the only way I found to solve the warning was by nesting the promises

handleSignUp: (req, res) => {
const {
name,
last_name,
email,
password
} = req.body
User.findOne({ email })
.then(userFound => {
if (userFound) return res.status(409).json({ msg: "E-mail already in use." })
const userNew= new User({
name,
last_name,
email,
password
})
userNew
.save()
.then(userSaved => res.status(201).json({ msg: "User registered.", userSaved }))
.catch(err => res.status(500).json(err))
})
.catch(err => res.status(500).json(err))
}

user, templating engines are not template strings.

Oh fug :DDD

Well, what is with the performance there compared to just shitting it together with string concatting?

You do not need to worry about putting a variable into a string when it comes to performance unless you are making a lot of them.

Like if you changed a million times you'd create a million strings and that's pretty stupid, but I'm sure JS could handle it

I originally planned for 20.000 string concats a second tbqh so performance does matter, but maybe I should do less updates on the client-side

That's without all the REST calls btw,
which is also the reason I am doing all of this client-side, I don't want that bloated shit on my server, so the consumer can suck it.

I did a test once with 1200 variables embedded.
Not sure how reliable those results are.

Anyway, the point of using a engine isn't to do it faster, it's to escape malicious HTML tags and keep your code much more legible.

Attached: 154589624589.png (262x107, 4K)

What could you possibly need 20k strings for
Just use push instead of concat, then you mutate and return instead of returning a brand new string.

Looks like this isn't good either or did I look up the wrong thing again: stackoverflow.com/questions/51185/are-javascript-strings-immutable-do-i-need-a-string-builder-in-javascript

Not really webdev specific but I'm using PostgreSQL via pgAdmin 4, does anyone know if there's a way I can update the definition of a materialized view WITHOUT having the view refresh itself after the definition update?

Nevermind, figured out the with data/with no data shit

I'm so stupid and bad at UI I'm considering taking a udemy course on bootstrap.

Trying to make some fancy graphs using React. One I'm trying to make is a map showing where users are from, any tips on making this? Pretty new to React

Less bullshit to deal with on the backend

When doing frontend you often end up writing specs and talking to clients, which if you chose programming as a career is not something you want to do

So you go full backend and deal with web servers and databases, making your life bearable again

learn2piracy

bad companies expect front end devs to be designers and product managers

i guess that's it

Its almost impossible to totally separate front end dev and design. No matter what you need to have some sense of UX. Also you're forced to use JS, which in turn forces you to use asynchronous paradigms, even though in the end nothing is truly async. Functional programming paradigms are the same way. They are all about not maintaining state, but state is an unavoidable reality when it comes to software.

Maintaining state is actually quite easy now with modern libraries like react/vue

The problem is when your manager hands you over some doodle scribbled hastily and says "ok here's the spec, should take a few days"

No, you have no idea how many edge cases you've left out on your 'design'

you're probably better off doing something like:
API call,
on success loop through the object,
within each instance of the loop build an html template and populate with the name/surname etc,
append that html to a parent variable outside the loop,
when done append that parent variable into the DOM.

Alternatively that parent variable could be populated into the DOM first so the user comments would appear as they load.

It's unfashionable but jQuery is perfect for this kind of thing.

I want to create a MVP of a social network. I can only do front end. It's okay if the website got no functional backend it's just got to look good and do basic stuff.

What stack should I use?

Attached: funk.webm (1280x720, 1.83M)

this is good b8

it's not bait