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

www-test.echoz.rocks/paste
github.com/jlem/WebDevChallenge
reddit.com/r/web_dev_help/comments/5pukmx/portfolio_project_idea_list/
developer.mozilla.org/en-US/docs/Web/CSS/background-size
streamable.com/9c5lt
discord.gg/wdg
esimakin.github.io/twbs-pagination/
docs.spring.io/spring-data/rest/docs/1.1.x/reference/html/paging-chapter.html
jsfiddle.net/z6ozxhz6/
codepen.io/user/pen/mMvzXo?editors=0010
jsfiddle.net/1ntv5ng5/
nginx.com/blog/rate-limiting-nginx/
dembol.org/blog/mod_cband/
twitter.com/SFWRedditGifs

Is there a /wdg/ version of this?

a lot of them can be applied in wdg though

Yeah, I just thought it'd be nice to have one specifically for wdg.
Something like a list of challenges that makes you use different languages/frameworks for the task they're good at.

www-test.echoz.rocks/paste
need some feedback, made this yesterday and a little while at work today
that part is really the only functional part so far, but there's something at /about as well

Is it worth learning MEAN stack? Or is that meme bullshit?

Found an Edx course on it.

github.com/jlem/WebDevChallenge
feel free to turn it into an image i guess

that's a big .svg
as long as it's angular2/4 and not angularjs, I think

Angularjs but why is it bad

because it's old and they've changed a lot since making it effectively useless to learn now unless you're focused on supporting legacy platforms

What should I learn instead I want to learn web development but there's so much different shit I cant decide on anything.

What will actually get me a job?

Look in your area (or where you'd like to move that's reasonable), what are they ACTUALLY asking for, and then learn it really fucking well.

AngularJS is Angular1 and from what I know there have been a lot of changes in 2&4.
Even though it is still used in various places as of right now, I would not expect it to last.

Angular is in demand, so for job purposes it sure is ok.
Same with PHP.
Just check job listings in your area and see for yourself, since it can always vary, depending on where you are.

Okay but why does Sup Forums hate on web development so much? The more jobs there are for a given technology the more hated it seems on Sup Forums. Is it just contrarianism?

Pretty much yes. Anything popular is hated regardless of how useful/good it is.

Thanks! It looks abandoned but is the best list available right now.
Gonna make a infographic and post it here.

If I learn web development will it be easy for me to get a job even without a degree?

getting into any field without a degree is tough
do you have enough discipline to do it? if not, go back to school

feel free to add more recent projects with recent tools as options, like replacing the "use foundation" with using bulma for instance

React is in demand where I am, at least. AngularJS is still popular though, just not as so.

Are any edx courses for angular or any webdev shit in general any good?

forget the svg for now, I'm mostly wondering about the other things, since I'm making it all from scratch using apache with php and sqlite

>Try to create a project using Laravel.

Is this even a challenge?

Yes?

what analytics suite should I be learning/using?

Im trying to get my background image to respond to the size of the browser window

ive been googling this problem but i have low iq and can't figure it out. I can set height to like 900px and it looks ok. But i wish I could get it to the bottom of the browser. I've not been learning for very long pls be patient i have autism

What's some good web dev related podcasts?

another decent list

reddit.com/r/web_dev_help/comments/5pukmx/portfolio_project_idea_list/

>reddit

back to /dpt/ you go

developer.mozilla.org/en-US/docs/Web/CSS/background-size
set full width and height, then
background-size: cover

>I could get it to the bottom of the browser

Set the height to height: 100vh;

vh stands for View Height, which is the entire size of the browser.

vh is the viewport height not the browser height

I literally just tested it. It scales to the size of the browser. Set a viewport to 90vh, load it at fullscreen and it will be 90% height. Cut the browser size in half, reload and the new 90% height is represented.

Is there any reason I shouldn't just add and style all my elements with JS, redoing layout when the viewport changes? Fully programmatic UI, as is done for mobile apps? It would remove the need for CSS layout and to use IDs or binding to link HTML and code. Much cleaner.

There would maybe be some accessibility challenges, and the noscript crowd wouldn't love it, but we're long past expecting webpages to work without JS anyway.

what browser are you using? chrome goes off the viewport size

streamable.com/9c5lt (Sup Forums wouldn't let me upload this directly for some reason)

Using Chrome. The section with the image is set to 90vh. I'm not sure why mine behaves differently.

height: 90vh;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
background-image: url('../images/main.jpg');

Huh, so as it turns out you cannot have a click event handler on a copy the filename from the download tag to your clipboard.

it looks to be right from here. its keeping the height at 90% of the viewport. Do the dimensions in your inspector say something different? Perhaps you confused the window height with the viewport height?

I don't quite understand what you're asking. The code you see in that post is what I used to create what you see in the video I linked to. The section clearly scales to the current height of the window.

What is the point of having high-order functions in JavaScript? It seems so unnecessary and complicated

Paging finally working for my ajax data table.
Ordering columns also done.

Next up: searching, changing number of rows per page.

After that editing cell contents I think.

take a look at this image:
red box is the window.
green box is the viewport.
If you opened the inspector and looked at the the actual height dimension of the div, I guarantee it would have the green box dimensions and not the red box dimensions.

discord.gg/wdg
discord.gg/wdg
discord.gg/wdg
discord.gg/wdg
discord.gg/wdg

kill yourself you stupid piece of redditor trash

>red box is the window.
it is a window, but not that kind of a window

Anons, how do I paginate a dynamic HTML table? Rows are being added and removed by editing DOM with JS, the dataset is stored in sql and is updated via ajax. It works fine but scrolling through 50+ result is not funny. DataTables doesn't help much as it is supposed for plain tables.

stop trying to split the thread, post in the general if you got something

>request elements 10-19
>put them in the table
>add prev and next links
>clicking prev link requests elements 0-9, clears the table, and puts them in instead
>repeat for next link (elements 20-29)
>use the power of grade 1 arithmetics to figure out the exact numbers on the fly

> implying I have to code the core functions myself
I think that such things are not welcomed in the web

you can use some shitty jquery plugin client-side esimakin.github.io/twbs-pagination/
as for server-side, every decent framework should support paginated requests almost out-of-the-box
docs.spring.io/spring-data/rest/docs/1.1.x/reference/html/paging-chapter.html

css uses the innerWidth and innerHeight of the window as the viewport (vh and vw).
the window itself is the browser window, described by the outerWidth and outerHeight.
jsfiddle.net/z6ozxhz6/

Anyone do webdev with emacs? If so mind sharing your .emacs? :D

Good luck.

There truly is no proper data table on the market today. jQuery datatables is a complete, disgusting mess. Bloated, too.

I've got a spring boot app that uses mongodb that I've deployed to an ec2 server.

So I installed mongo on app server everything runs sweet but every now and then mongo crashes complaining there isn't enough space on the device. There is enough space I'm only using up like 1g/8g.
Anyone seen similar before?

I know installing the DB on the app server isn't best practice but it is just a prototype so I want minimal infra. However I can't afford it to crash.

So as far as I can tell I am left with 4 choices.
1. Deploy proper mongo infra on aws. I am worried this will cost a bomb and I will be out of my depth
2. Migrate from mongo to dynamo
3. Migrate from mongo to a relational schema and use rds
4. Figure out how to get mongo to run properly on my app server

What do you guys reckon?

I think I'm gonna migrate to dynamo. Should be least friction and that way I get proper infra without having to do much sys ops

This is essentially what most component-based toolsets like react and vue do. You still use css to do the actual layouts because it's way faster then doing all the geo calcs in JS, and you usually use a css-like syntax to write it because it's far more concise. Look at styled-components.

...

This question doesn't make sense.

I need to know. Is it even possible to get a career in any of this? INB4 H1-B/Pajeets taking all the jobs

you can make a career telling people jesus is real
so yes it's possible
is this the right choice for you if you're asking dumbass questions on a south african testical harvesting board? probably not

No shit. Meant like in the tech industry.

yes.
For sure as a consultant. Pajeets can not consult locally.

As far as working on a product if you are good a company will consider you worth the money.
Besides this having strong soft skills is also incredibly valuable. Most people in tech have shitty soft skills.

If you are good technically and have good soft skills you are a very valuable asset to a lot of companies.
Pajeets have fuck all soft skills.

Most people think a college degree will get them a job. Of course everyone knows employers don't give a fuck anymore. They want to see what YOU can do. Would you recommenced learning on your own, or a trade school for this?

in a sense that is true but people still value degrees and certification.

It is a useful barrier to entry to filter out a lot of candidates.

Also you have to appreciate every time someone hires a new employee they have to be able to justify hiring them to everyone else in the company. Qualifications are a very useful here.

If you are hire someone that is fully self taught and has no official qualifications you are putting yourself in significant professional risk. Cause if that person fucks up you have no easy way of justifying the hire.

Having said that I'm sure there are some smaller companies that don't give a fuck about qualifications

are you gonna put it on github? Also add the sort asc/desc thing.

So what's the better option personally? Going back to college and wasting 2-4 more years and putting yourself more in debt? Learning on your own? Or going to a trade school?

I honestly can't say cause I've never been in your position. My advice would be start teaching yourself and go to meetups and get a feel for the community. See if there are people out there keen to hire self taught guys and just play it from there

cool. didn't know that. probably because I don't use any window decorations so the values are equal

>2. Migrate from mongo to dynamo
>3. Migrate from mongo to a relational schema and use rds
well, you're the one who knows what data you're storing. if you go with relational, then do it because that's what your data needs.
can't help you with the mongo problem because one time I tried to use it I ditched it for postgres before going into production (made the rookie mistake of trying to use it like a relational database)

>much cleaner
is it though? every time I have to do programmatic UI I long for something like HTML+CSS. I even remade my unity game prototype with fucking react+webgl.

because they're a useful programming construct

Do people get hired at meetups? Not for sex but for Web shit?

well not directly there but it is meant for networking and shit

roll

I'm down

> 94: raytracer
> difficult

This is considered difficult?

codepen.io/user/pen/mMvzXo?editors=0010

How did you go?

If you use react + rails, do react components completely replace partials?

roollllin

Is NetBeans ok if i want a more robust php dev environment? Phpstorm is not free

just use vi

Pretty sure they mean a 3D raytracer my man.

Raytracing is the same process in any dimension bruv. You can have 1-dimensional or 4-dimensional raytracing, the algorithm is the same.

It just werks :)

jsfiddle.net/1ntv5ng5/

How would I go about making a frontend for youtube?

I know HTML and CSS, and I've deployed a couple of sttaic websites.

All I want to make is something that can search youtube and return results, and "play" videos by embedding them in the page. It's a great way to get rid of the UI.

Should I use nodejs? What's the best tool for this? This will be my introduction to webdev.

I don't want to touch PHP.

rrrreeeeeeeeeeeeeeeeeeeeee

what?

>i have no idea about this discipline but php sucks guys amirite teehee

I've seen some code and I don't want to put in too much time in this. Hence, no php.

PHP sucks

And Ruby-on-rails would be more suitable for a beginner anyways.

>And Ruby-on-rails would be more suitable for a beginner
How so? You can't beat the xampp stack for beginners.

So I'm gathering that you need to:

- construct a youtube search url
- do a http request and get the page
- parse the page and extract URLs
- inject URLs into iframes

Node should be fine for this.

You could also do it with just regular html + javascript + php which might be more instructive.

I want to create individual pages for individual videos. Like if the video is at
youtu.be/randumbl1nk

It should be at
frontend.com/randumbl1nk

which of these links can teach me about more fundamental things about web services like networks, protocols, services, requests, standards etc?

Seconding the question

I want a book like Tannenbaum's operating systems about the web

If you have to ask then you need to put some time in first try the links in the OP.

What IDE does /wdg/ use?
I know there's a general disdain towards them but it's comfy using it.
Been using Visual Studio Code so far and was curious if there're better alternatives.

I just kopipe'd like 50 lines of javascript from somewhere, didn't even bother to read it, changed nothing and it worked seamlessly.

So this is the power of web dev.

VSCode

first thing that comes to mind when I think of a raytracer is a program that can produce picrelated

it does though

the MDN one

VSCode for front (I mainly do React+MobX in Typescript)
IntelliJ for back (I mainly do Spring in Kotlin/Java)

Visual Studio Code is fine
I use Eclipse for JavaEE, and Netbeans for JSF

none

Thanks! Forgot to mention I'm mostly doing front-end stuff so I guess VS Code is the way to go.
Gonna have to dabble a bit in Node.js for some back-end work soon but VS Code should still be adequate.

I have very little experience with web dev. I made a web page that can be abused and put a heavy load on the server.

I want to create a time limit for clients, I want them to do a request every second / minute for example. Duration should be configurable.

Is there a php setting for that? Or a library that I can use?

nginx.com/blog/rate-limiting-nginx/
dembol.org/blog/mod_cband/

I want to make the next Facebook. How do I do it using only HTML and *maybe* CSS if necessary?