/wdg/ - Web Development General

Weeb Dev General

Previous thread: >Beginner Roadmap and Overview
github.com/kamranahmedse/developer-roadmap
youtube.com/watch?v=UnTQVlqmDQ0

>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 to HTML/CSS/JS and Node.js or Django
freecodecamp.org - curriculum including HTML/CSS/JS, React, Node.js, Express, and MongoDB
javascript.info - curriculum providing a strong basis in JavaScript

>Further learning resources and documentation
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
hackr.io - crowdsourced collection of tutorials from across the web for learning languages and libraries (ignore sponsored stuff, look at upvotes)
learnxinyminutes.com - quick reference sheets for the syntax of many different languages (generally not sufficient on their own for learning something, but very helpful)
pastebin.com/gfBPg24A - Collection of PHP links.

>Asking questions
jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS
3v4l.org/ - Use this and post a link, if you need help with PHP/HackLang

Attached: wdg_template_n.png (1280x720, 710K)

Other urls found in this thread:

javascript.info
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
github.com/jgthms/bulma/releases/tag/0.7.5
jsfiddle.net/rn5cgu4p/1/
medium.com/@mattholt/its-2019-and-i-still-make-websites-with-my-bare-hands-73d4eec6b7
github.com/avajs/ava
twitter.com/NSFWRedditVideo

How do you make a movable (click n drag) element in webstuff?

>javascript.info
is a really good resource, thanks for sharing

I always liked low level stuff and assumed web dev was easy but boy was I wrong. You guys are autistic maniacs in the best possible way. How do I git gud?

mouse click and move eventlistener and modify the elements left/top or transform: translate CSS property?
There is also some popular library for exactly this but can't remember the name right now.

Having some hobby project you really like working on is a great way to learn and improve overall imo.

Pick something and get really good at it.
Don't fall for the fullstack meme, you'll get stuck in some shitty company who relies on you to hold the entire thing together and even if you can handle that, after decades of doing that shit you'll get bored - but the money raises to keep you gets better and better until you're literally a fucking husk.

So pick something. Anything. And keep getting better at it, pushing it to the limits of what you currently believe is capable. Don't ignore everything else, but don't waste your time trying to be a master of everything when the good companies are going to hire specialists of those areas anyways.

React devs, which framework/UI library do you like the most?

Who is the most framworked nigga on /wdg/ tell us your complete stacks so we can have a laf. Then tell us your salary so we can cry.

Attached: 1557257044026.jpg (646x887, 82K)

ANT. It just werkz. The other option you'll probably hear a lot is MUI.

Am I dumb for wanting to just use vanilla javascript/jquery? I wouldn't mind learning React for visuals, but Angular seems gimmicky. It's like people got sold on the idea of trying to us javascript for everything. Its like using a flat head screw driver for Phillips screws. Yeah, it will work, but sucks in the long run.

>MUI
Indeed and I find it absolutely hideous. Thanks, I'll check out ANT.

what are your reasons and what are you thinking about specifically when you say visuals?

ok but how does the js async meme even work

someList.forEach(a => { yadda })
/* use someList for something here */


but the lambda in the foreach is not done yet! how can i wait until it's done? or how should i think here - i wanna continue messing with the list after the foreach is done you know. surely this is not an unusual situation?

Its been a while since I have messed or looked into React, but remember it having some nifty bits for data visualization. I got kind of a luke warm introduction to node.js/Angular. Using a kinda flawed language that was really only designed for front end browser manipulation as some puesdo backend language just seems dumb. That and I hear startups like to use it, and I hate those. Also have been told some places won't let you use frameworks, and wouldn't understanding how the language works in raw form be better in the long run?

Again, I'm inexperienced and could be wrong, but those are my feelings on it.

// await only works in async functionas/scope
[1, 2, 3].forEach(async num => {
await someAsyncFunctionThatReturnsAPromise(num);
});

>wouldn't understanding how the language works in raw form be better in the long run?
Yeah, that's a given. You don't use React instead of JS, but you use it with your existing JS knowledge... really it's just a library.
>having some nifty bits for data visualization
pretty much all frontend libraries have some integrations with data visualization libraries, but you can always use any visualization library you want anyway. It's not like you are limited to only those, that also offer ready-to-use components for that particular frontend framework.

Regarding vanilla vs React/Vue/Agnular, it's not like there are things you can *only* do with those.
They do offer some very nice things though like the component system that makes lets you structure your site in a very organized way and their declarative rendering, where you create rendering templates/functions, that describe how the size should end up looking given a specific state.
Nothing stopping you from doing the same in vanilla, but those frontend libs are simply proven tools, that will do exactly that in a very performant and robust way, so you can use your time to actually create the UI and functionality and less to create the underlying rendering tech, unless your goal is to create yet another (micro)-framework.

Startups/Companies like to use different frameworks.
Angular generally has a bit more of an enterprisey image, React is the solid go-to and Vue is also liked by many, but you'll see it less often in companies (unfortunately)
Personal favorite of mine is Vue, but there are lots of options. The big 3 have the advantage of having a really solid eco-system as they call it with dev-tools and other 3rd party libraries that make use of these.

>but the lambda in the foreach is not done yet! how can i wait until it's done?
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

add all Promises to an array, await Promise.all() that array

That works, but you will have to wait the whole promise in the index 0 before start the promise in the index 1.
I'd usually do
await Promise.all([1, 2, 3].map(someAsyncFunctionThatReturnsAPromise))

>how the size should end up looking given a specific state
*how the site should end up looking

True, I just wanted to show the concept. I had in interesting time recently implementing batched async functions with decent error handling, I didn't want it to catch as soon as one failed (default Promise.all), but I wanted logs from rejected calls etc. Figured it out but wasn't as clean as I hoped.

>you will have to wait the whole promise in the index 0 before start the promise in the index 1
Actually, all the promises will be run in parallel, but you'll have no idea when any of them resolve.

Async/await is built on top of promises, and promises work based on return values. Since forEach basically just throws away the return values, you have no way to tell when any of them finish.

You should pretty much always do the await Promise.all(arr.map(...)) thing if you want to wait until all tasks finish, or use a classic for loop if you want the tasks to run in series.

I need a little help
I am learning bootstrap and it looks fine, but how can I make the font-size responsive (Having a p tag to have a font-size: 1.2em on mobile(sm) and the rest to have font-size: 1.8em)

So I'm on an MSSQL server using SSMS right, well I'm supposed to find this one table. It's not there is the Object Explorer but I can select from it with a query.

What is going on?

Refresh?

How the fuck do I even begin pagination with nodejs/mongodb?

>plugins never updated
>plugins never work together
gas whoever made cordova, literal meme of a framework which will cause you endless pain if you fall for using it

shame, the name was really cool
t. Spaniard

Bulma 0.7.5 released
Changes: github.com/jgthms/bulma/releases/tag/0.7.5

Attached: bulma-logo.png (640x160, 11K)

Do not try and find the table. That is impossible. Instead... realize the truth: there is no table.

in terms of javascript testing where do i get started i heard enzyme is the go to?

a lot of jobs require it in london but im not sure how frontend code tests are written, mainly says it on React roles? i can write tests for my backend APIs and general code which i do in Golang but frontend seems kind of pointless to test

test

index

There is no column with name '' on table 'orcamento'.

FUCKING WHERE DID IT HAPPEN, FAGGOT DOCTRINE? I JUST CHECKED ALL REFERENCES TO THAT TABLE AND NO MAPPING HAS AN EMPTY COLUMN NAME

jesus fucking christ, i should have just hand written some sql.

Why don't veteran programmers like modern web devs

Attached: 11575062201.jpg (1024x962, 67K)

Turned out it was a "view"

Interesting, I'm going to go play video games.

jsfiddle.net/rn5cgu4p/1/

What the FUCK is going on here? Why is there extra height added to the div in the first example?

Attached: 1557292931841.png (1015x720, 741K)

I have some Java experience, should I get into springboot or not? If not, what is the best Java library for backend shit that isn't to complicated?

Attached: Screenshot_20190616-204816.png (2048x879, 1.18M)

Doesn't really belong here but any netsuite niggas present?

yes, but you didn't hear it from me

What do you guys think about GraphQL?

I want to say this has to do with how text wraps around images online. Line height is a text based property, so maybe applying it to the icon type changes it. Not 100% though.

So I changed the incorrect ruling for the first logo to display as block it got rid of the gap; made the box bigger, but the gaps gone. When I changed the same element to inline-block it has the same problem. I feel like this is a render issue. When it inherits the line height it fucks with its type setting.

Attached: Screenshot_20190619-005207_Chrome.jpg (720x1480, 333K)

Probably feel like they got it easy and/or maybe see them as only in to it cause its popular now.

It’s based AND redpilled

I like it, I used Apollo on a project, it makes it pretty simple to integrate a graphql endpoint into an express/koa server, which basically involves defining a few functions and writing their graphql types in something that looks like a weird mix of json and yaml, and then you can use your choice of graphql clients in your app to query it (which can be as simple as fetch() or apollo-client itself)

I thought it would be a cool idea to make a single page portfolio that takes the whole viewport, with no scrolling at all, and have sections coming from the left on navbar button click.
It is cool indeed but working with two dimensions is a fucking pain in the ass. Never again, now I appreaciate single column layouts.

Is express.js still the go-to web framework?

For Node yes, as for backend technologies i'd go like this

>Ease of use and okay performance
>Node
>A bit harder but much better performance
>Go
>Same as above but more mature and just honestly straight up better
>.NET-Core
>Ease of use with "okay" performance that you can easily boost to tremendous performance
>Flask (Python) + C++
>Tremendous performance and dont mind using beta/alpha shit
>Rust-Rocket

I think this is okay

Attached: 2838523985.jpg (602x800, 69K)

Can i somehow create "normal" html files like you would without frameworks but with React or do i have to make an SPA with it?

still the most popular one for Node and easy to do shit with since there are so many resources available.
Good summary regarding performance I think.
It would be good if more people would check what their actual requirements are.
If someone wants to do some heavy computation, then Node probably isn't the right choice for them.
On the other hand very few personal hobby projects get CPU limited in any way and then you get some people who make it unnecessarily hard on themselves trying to optimize like madmen, when a straightforward fullstack JS setup would allow them to progress much more smoothly.

I am also kind of interested in Go, but also a bit hesitant since .Net-Core seems like the smarter thing to learn.
Fullstack JS served me pretty well, but wouldn't mind to branch out. Any pointers on that?

You can server-side-render it or even just pre-render it once during the build and then serve that.

You can use somethings like NextJS or react-snap for this purpose.

Goddamn these threads are fucking ded

Hey, not him, but thanks for posting good info and well thought out answers.

>Have a url called 'post_detail'
>Getting an error for something called 'post-detail'

what the fug :DDDDDDDD

Attached: five-guys-dc-spotlight-hed-page-2018.jpg (1320x660, 201K)

Is there a simple way to grab a set of object keys in modern javascript? Something like destructuring, except instead of manually supplying the values to destructure on, use an array for the keys and store the result in a different object.

To be more clear, my code now is:
source = /* large object with tons of properties */
keys = [ /* set of keys I actually want to use */ ]
ret = {};
keys.forEach((key)=> { ret[key] = source[key]; })


And I'm wondering if there's anything like
ret = source[...keys]

Why the fuck can I access {{comments.length}} on certain pages, but not on the page I actually want it to appear? Fuck. Handlebarsjs.

Ok, so I have a comment section on my web app. I want to only display about 10 per page, hiding the rest of the comments, sort of having them blurred, with a "show all comments" button. How do? Anyone have a tutorial they'd recommend? Or does anyone know if there's a specific name for this?

Stop using Portuguese words on anything programming related other than comments caro user.

Não

I'm a net core programmer learning Go, you can use both depending on the application you are making, it's not a waste of time, learn one then the other if you are interested in both. ( Start with net core , because moar jobs )

Stay bad then

My website got banned by facebook and I've lost 95% of my traffic

Attached: 15535308196782.jpg (474x480, 39K)

What is the website, and how does it get banned? I posted an article from the ACLU about Facebook censorship, and Facebook instantly removed the article as soon as I posted it. I thought it was the admin of the group, but it wasn't. Happened a few times instantly. Since then I haven't used facebook. I posted a video on youtube, it's called "Facebook censors ACLU article about Censorship" or something like that.

People were posting content on my site and sharing it on facebook a bit too eagerly so facebook blocked it. Now when someone tries to post a link facebook takes down the whole post because
> the content doesn't meet our Community Standards

React is JavaScript, so "normal html" doesn't really apply there.

If you want normal HTML, then use HTML. If you want to write HTML and have your js go in and do react-like things with it, you might want to check out Vue.js. Their basic tutorial should cover that workflow nicely.

With .nl domains you can contact the registry if a domain gets stolen. And they will undo the transfer.

I honestly don't understand why Verisign (or Icann) doesn't do the same thing with .com domains.

Sorry to hear that

Attached: 1468599235501.gif (360x360, 154K)

Thoughts on this article? medium.com/@mattholt/its-2019-and-i-still-make-websites-with-my-bare-hands-73d4eec6b7

As an old fag I can relate to it.

I’ve heard nice things about GatsbyJS
I think your way is the shortest way of doing it. If you’re doing it often, maybe define a helper func?
function cloneSubset (sourceObj, subsetKeys) {
// ...
}
// ...
var ret = cloneSubset(source, keys);

>pointing to something that I think is a function call. … erm, nope, it’s a type definition… okaaay awkward!
>“But how does this part work? Like, what is it actually doing?” I ask. I usually get blank stares. They almost never know.
>I don’t even minify page assets
lmao, wtf is going on at that guys company

>Here’s just some of the feedback I’ve received, which is a result of the “classic” approach:
>"I love the simplicity of your website design"
>"Your website is an example of what good web design should look like."
What does a framework have to do with the design of the site?
I feel that guy is pretty clueless.

>things that I imagine must be frameworks or hosted services (because I don’t know what the words are but they weren’t in my CS classes)
There is a difference between checking something out and consciously deciding against it and just being proud of your ignorance
>I don’t consider myself a web designer or even a web developer, but I’ll make a website if I have to
now I feel like I wasted my time reading that

I mean you don't have to jump on every new technology-train that comes along.
There are tons of things I know I am falling short on, but I don't pretend that it's all just BS anyway and I have it totally figured out with the stuff I know right now...
And really, learning React or Vue isn't a monumental task and even diving in a bit deeper isn't that hard since you can easily find good explanations on how reactivity works in those libraries if you are actually interested.

Attached: 1560937789346.png (933x1244, 1.58M)

This is not a web development question, but I thought that the anons here might have the relevant skills to answer it.
Is there any way to pull in the Jow Forums catalog view without having to resort to enabling javascript.

media queries

check out Ava too

github.com/avajs/ava

He sounds like he has lost touch with the web development world and should find a new career. I started learning when I was 9. Yet I still embrace and even like most modern technologies. This is an example of someone getting too overwhelmed with the changing pace of technology. "They get paid more money than me, and yet I have a degree! I have more years experience!"

Eh, nvm, I read more, and yeah, I agree with him (aside from his whining). People jump into react without understanding JavaScript, at all. What's the this keyword? "Hur, idk, but I could use it in React". I will always use vanilla everything for my own side projects. React/etc. is for work. Which is bullshit. I feel like companies demand React/Angular because they're made by big Tech, therefore they must be good, and we should use them for everything. Look at Vue. It's obvious why it isn't as big as React/Angular - it's not created by a big tech company. None of the shit is needed. I am quite annoyed with all the hype.

>It's obvious why it isn't as big as React/Angular
I was wrong to say this, as Vue is pretty damn big. What I meant was it's not as in-demand for jobs (last I checked).

I can relate.

I do the same stuff when making my own projects.

It just hits a point where it's not worth learning something like Angular. I'm at a point now to where I am constantly making projects for passive. Spending that time learning something new is just a waste of time when I could be developing with what I know.

thank you for using a sakuya image

at its core, react runs a render method when your application state changes and then updates the dom if the output differs from the last time

How is this legal? Please answer.

Bought a domain for a website i've been developing. I just checked it, and there's a webpage up displaying advertisements. How the fuck do I get rid of them??

Contact your system administrator

Where'd you buy the domain through? Do you have full access to it (e.g. ability to set DNS records)?

I don't have a fucking sysadmin lol.
namecheap. yeah. I haven't done anything with it though. I'm just wondering how this is legal? It's like buying a house, and have some company put a bunch of signs out in your lawn.

You did read the terms and conditions, didn't you user?

I recently bought from namecheap. You see pic related, right? It's normal. Once you change the nameservers, you'll be fine.

Attached: Screenshot_34.png (877x937, 49K)

I just did that. Still, why the fuck should they be allowed to do that?

console.log("typeof a:"typeof a);
console.log("typeof b:"typeof b);
a.equals(b)

=>
typeof a: string
typeof b: string
Uncaught (in promise) TypeError: a.equals is not a function


????

anyone?

use '===' dummy

Doesn't that compare objects? I dont want the objects to be the same, only the value and doing a.getValue()===b.getValue() for such a basic thing seems stupid.

>seems stupid.
Welcome to javascript

Guys what the fuck does kubernetes do and why does my boss think it's going to solve all of our legacy code bases problems

Sorry for the late reply, was working last night and wanted to give a good reply.
>react and vue are more like library's
>Structed components for site development
I'll take a better look at these. I like the thought of them as libraries than frameworks. I find frameworks to be annoying if you try to do anything that isn't default.
>Angular has an enterprise image
Then I will avoid it like the plague as I do not want to get into a corporate company.

Thanks for the great reply btw.

how are you deploying your applications at the moment?

not to give the wrong impression with that previous post, it kinda depends on what you consider a library and a framework.
'framework' is definitely the more common term for these, but some people get really turned of by that word.
A funny term I once read somewhere was
>A library is what you use
>A framework is what's using you

Generally you have all the freedom in the world regarding how to structure your site with these, but of course it's opinionated in certain ways too (just like any library).
If you want to set up the routes for the pages of your SPA, then there isn't much room for creative freedom, but otherwise you create the components in whatever way you like.

>tfw making a portfolio for a client with literally 6 rendered images and one video

Now I truly understand why 'content is king'.

It's just the default dns settings. Just delete both a records and it will certainly disappear.

Backlinks are actually king. Content comes far below that. But an empty site without text can't really be searched.

Yo, maybe I can into content for you, I've studied multimedia. Knowmy shit with animation(traditional), motion graphics and illustration, even a bit of design.

what it was?

Literally ftp

So I'm making a simple login with node, express, handlebars and mariadb. What are some security tips to keep in mind when handling user and session data?