/wdg/ - Web Development General

OP's pissed he has to make this thread edition.

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

>Further resources
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
github.com/kamranahmedse/developer-roadmap - Roadmap
stackoverflow.com/ - Developers asking questions and helping each other

>Tools
jsfiddle.net/ - Use this and post a link, if you need help with your code
caniuse.com/ - Check browser support for front-end web technologies

Attached: wdg.png (1280x720, 180K)

Other urls found in this thread:

flexboxfroggy.com/
en.wikipedia.org/wiki/Mass_noun
preactjs.com
jsfiddle.net
codepen.io
getbootstrap.com/docs/4.3/getting-started/introduction/
freecodecamp.com/
udemy.com/course/learn-javascript-full-stack-from-scratch/
twitter.com/NSFWRedditVideo

eloquent javascript

I have the deep mad pleasure, to introduce to you what web development will look like after the next 5 years.

Attached: banner-1[1].jpg (870x374, 35K)

it already looks like this. it looked like this since the beginning. this is nothing new faggot.

it's happening as we speak, but the full transition is not yet complete, it will be, soon

where can I begin to learn some decent ways to visually design a website? I struggle big time with trying to think of a unique enough layout that doesn't sacrifice function. do you just spitball designs until one sticks?

do americans even try?

Attached: future of web tech.png (1056x459, 204K)

the theorical way to design a website is to first define the functionality, then, design different layouts for the functionality (boxes with texts and empty squares representing images for it, there are softwares for just this stage), then put that functionality to test with real humans, see how they perform different given tasks with the specific wireframes. From there iterate on what works and discard what doesn't, make the final wireframe, from that wireframe define a design, test the design too (some might skip this part), then finish the design based on the text and off to production

>Web Technologies
What the fuck does that even mean? There's so many different web technologies. What were they awarded medals for, exactly?

Also, friendly reminder that most modern "web technologies" are being developed in America.

>Oh no there are BROWN people INVADING my work place, my tiny white brain and dick can’t handle it

Is there a way to create the effects of react-router without using react/react-router? I see now why React is nice, but I really don't want to use react for the entirety of this project.
Using ejs.

Beginner here.

What do you use for nesting multiple divs inside of another main div element?
For example when you make a layout in your head and start writing HTML.

Is Flexbox good to use and should I use it everywhere?

Attached: Capture.jpg (459x425, 31K)

flexbox/grid

Why is UI/UX done in Adobe?
Is it just to give yourself as a front-end dev a quick sketch of how the website is going to look like, before you implement is, because it's easier to just drag and drop stuff into it? It servers only as a sketching tool right?

Can be anything whatever you are familiar with
even paint

by pajeets ;^)

React really isn't that hard to get to grips with, I'd probs just recommend React desu.

Crossroads JS is a good alternative to React Router.

Is there anywhere to pirate plugins on codecanyon?

Because buying a mac is fucking stupid

Yes, workers tend to want to protect the value of their labor by restricting outsiders from the labor supply. Especially foreign scabs that by nature of their foriegnness will make any kind of collective bargaining much more difficult.

Go to hell, capitalist.

...

Not flexbox alone, use it combined with a grid. You make a grid that you design yourself, with the amount of rows and columns you need, use the grid-template-rows and grid-template-columns in your css within a container tag, and you place the divs with your content on that grid.

If you're feeling adventurous you can try bootstrap. Bootstrap is basically a cdn you put in your tag, and then you are good to go.
A grid in bootstrap is always made out of 12 columns, and an unspecified number of rows.
If you start using bootstrap, it's always



(or col-6 or col-4 depending on how wide you want your column to be)

If you struggle with the flexbox functions, here is a silly game: flexboxfroggy.com/

To nest you

something here

something here

Sorry, should be


Level 1: .col-sm-9


Level 2: .col-8 .col-sm-6


Level 2: .col-4 .col-sm-6



This is using bootstrap. You can do it without the same way, you just need to set the padding, size of the columns and everything else in css.

i see your discussing in my favorite programming language

Attached: gigachad.jpg (1068x601, 65K)

Kys

ty man, appreciate it, hope u have a good day

hey bro dont get mad on me because i love bootstrap so much.
those give me some nice look as my pipi get bigger

Attached: dv6tb14lvdz21.jpg (720x377, 21K)

Sup bros, so i have been out the loop with webdev for some time, is React still king for front-end? And whats hip backend right now, .NET-Core?

Attached: 4453453454.gif (162x226, 777K)

will you please fuck off back to where this image came from

Spaghetti HTML/PHP for front end and back end. Or at least that's what it is at my job. I've started implementing React into the front-end and just building the back end API in PHP.

Apologies but what do you mean with spaghetti HTML/PHP?

HTML code and PHP code all merged into the one thing. No classes or any structure. Just a big file of about 15,000 lines filled with functions. Codebase created in like 2013.

Highly undesirable to be working with the code I've just mentioned. So yes I see React as a huge improvement to what things used to be.

ahhhahh!
just starching before my javascript exam bro
can you give me some tips im totally lost with that function


The onclick Event

The onclick event is used to trigger a function when an element is clicked on.

Click the button to trigger a function that will output "Hello World" in a p element with id="demo".

oy yeh Click me


function getMyPantiesFunction() {
document.getElementById("demo").innerHTML = "pantis found";
}

>ahhhahh!
>just starching before my javascript exam bro
>can you give me some tips im totally lost with >that function

Attached: 0f65048127e14db91c3fdf2949128b87.jpg (780x1200, 61K)

I wish that was me

How do i put my hobby website on my resume? It's a pretty serious site that gets regular traffic and continual maintenance and updates. It's something that i've done for years. Do i put something like this in a portfolio? on my work history on my resume? As a side note on my resume?

Using MONGODB and Express I sent a post request that fails validation. I catch the exception and I can make a new object that will pass the validation. How do I send the new request?

I'm trying to do this in middleware. I can catch the exception fine but then what. Do I just use the router to send a new request? To make things extra complicated I'm trying to do this within supertest. I'm not sure calling supertest in a different file will preserve the internal port it sets up.

To avoid posting my whole project I'm just hoping to be pointed in the right direction. I'm going to try to handle it directly in the router but I'd like to deal with it in the middleware, obviously.

Am I suppose to handle this within the same same object? IE the middleware handler has error, response, and request parameters so I wonder if I can use the response to deal with this.

mention it in any way you see fit

wow nice advise useful as a chocolate teapot

what kind of hobby website is it? what did you use to build it with? what features does it have and what does it do?

I would assume you should put it on your portfolio/resume but what should I as someone hypothetically looking to hire see in this project?

Why isn't flutter working and where the fuck do I need to put the pubspec.yaml file to make this fucking thing work?

>Very clear instructions on how to get dart and flutter working on the official docs
>Got it working on my first try
Purge everything and start from scratch. Read the instructions carefully nerd.

your discord is shit

Can someone tell me how to properly show errors in PHP/Apache2 before I shoot this laptop and before I shoot myself.

I know it's related to the php.ini file and I get occasionally errors in the /var/log/ file. but as the response to the ajax call, I get the stupid error.twig page

Has anyone here used LinkedIn Learning? Would you recommend those courses?

I have. Some are good. What's nice is that you get certificates at the end of the course. Certificates don't mean shit, I know, but they're worthwhile in the sense that it's showing potential employers that you're continuously learning new things. So being able to add a new cert every few months is definitely nice self-promotion. Diversify it as well. Do one for networks, security, etc. Make that employer think you know you're shit - that's all that matters.

I went through those multiple times goddammit

also my specs rn are 4 gig ram and using a 7200 rpm hdd. are my specs whats fucking me?

and seriously, I need any advice you can give me

Good to know. Thanks for the advice!

>I need any advice you can give me
Use React Native. You're welcome.

Attached: 1563056104878.jpg (225x225, 8K)

so what is node.js exactly? is it hard to learn?

node is just a execution environment for js that is commonly used to run js based servers.

Thoughts on pic related?

Attached: Selection_092.png (518x264, 10K)

>softwares
en.wikipedia.org/wiki/Mass_noun

>but I really don't want to use react for the entirety of this project
preactjs.com 3k total, same API

>If you start using bootstrap
How to not learn CSS and have to change your class names with every major version
Also bootstrap is SO GOOD that Twitter refuses to use it on their own website in favor of atomic CSS
tl;dr: fuck bootstrap

>jsfiddle.net
codepen.io faggot

Attached: ohzrd5t.jpg (666x570, 69K)

I'm learning RUBY!

Aren't all the biggest web frameworks American though, usually white guys?

React, Angular, Vue (Asian in New Jersey made it), svelte

I'm trying to fade in an image at a given pixel when you scroll down the page, but I have no idea why this doesn't work. Is something not supported or what?

$(document).ready(function () {

$(".example-photo").css("opacity", 0);

$(window).scroll(function () {

var windowHeight = $(window).height();
var windowScrollPosTop = $(window).scrollTop();
var windowScrollPosBottom = windowHeight + windowScrollPosTop;

//offset returns object with two properties
var objectOffset = $(".example-photo").offset();
//offset value of top
var objectOffsetTop = objectOffset.top;

//$(".status").html(objectOffsetTop);
//to not overload browser
if (!$(".example-photo").hasClass("animation-complete")) {

if (windowScrollPosBottom > objectOffsetTop) {
$("example-photo").animate({
opacity: 1,
}, 3000).addClass("animation-complete");
}
}
});
});

>Jquery

Then what's better to do?
A lot of job offerings that I've seen for web dev require knowing jQuery.

.NET-Core vs Spring for a porfolio site?

Attached: 1566693388795.png (800x840, 109K)

if you want a front end framework/library then React or Vue

Anyone use AOS?

I have problem with it, in mobile view it causes a white space on the right. You can fix this with overflow-x: hidden on the body (which I need to use anyway). Problem is if you do this it stops AOS from working.

Anyone know a workaround? I've tried wrapping the page in container instead of using overflow-x, it works for desktop view but the problem is still there for mobile.

asp.net core or nothing

Has the situation with front-end frameworks in JS finall stablized? We are stuck with basically React & Vue and sometimes Angular, with sometimes smaller ones popping out but these big 3 seems that are here to stay

Who cares if you know your JS and at least one state management framework you know them all.

>2019
>not using xamarin

>Start copying website to learn a new stack
>It doesnt use bootstrap
>want to learn bootstrap
>realize I'm making something which is worse in every way

Git gud

Basically, since I downloaded my website copy off my GitHub repository, the file that handles the connection to the database was missing.

Is paying for Laracasts worth it?
I don't really mind the money but it seems most of the stuff there is pretty outdated and the comment section does not get much attention.
I considered going to their free Laravel video, then a couple of youtube ones from freecodecamp (PHP, Laravel and MySQL) and maybe get a book after that.

Attached: 1561129049656.jpg (740x385, 43K)

Please, don't invest anything related to PHP in 2019. Embrace the new world and the new technologies.

Literally 90% of the jobs in my area are related to PHP, I'd like to embrace a monthly paycheck.

lmao and which are these technologies? PHP Laravel is a fine framework and PHP is still in use and will be.

So user what's the best way to learn bootstrap?

getbootstrap.com/docs/4.3/getting-started/introduction/

Daddy said Symfony is the way to go.

By building a few websites with it? Or building a portfolio of user cases (aka website layouts) with it

I agree with both of this
If you have a solid understanding of CSS, BS is pretty easy.

Put the script above the button element

window.onload you fucking retard

add display_errors = On in the ini, then restart apache2 service

I don't think it should be needed there, when you click the button the script must have been loaded already

>freecodecamp.com/
will it be a good idea to add certifications from this place to my resume? don't really have anything in it yet but i'm working on it

lolno

pic related.

How do you guys find idea of functions in one line of code ?

Seems to safe space and code looks cleaner this way, is this practice frowned upon ?

Attached: e.png (449x302, 14K)

Anything which can be done on one line should be done on one line

No
Readability > le smart oneliner

Fuck this nigger, Use Angular, it has jquery lite built into it.

React is created by Russian living in London

I guess we will have Svelte as a fourth horseman. But not sure tbqh.

No, this looks wrong, because it's exactly the same code. I just use oneliners when the code is a little different. For example
something && somethingelse;
instead of
if (something) {
somethingelse;
}

holy shit,
I lost my last bit of sympathy with people hating on JS and webdev

Recently I had to get into Android development and now tried both Flutter and native with Kotlin.
Dealing with libraries and documentation is so much better with Web/JS it's not even funny. I seriously can't overstate this.
When I look for a JS library, I have a real good chance finding something useful on npm or GitHub which usually also includes top-notch documentation, quick-start guides, code examples, etc.
With Java/Kotlin it's a bunch of fuck-yous and a mix of 10 different Medium articles, that all tell you a different way on how to go about it.

Also managing packages is horrible in both Kotlin and Flutter.
Everyone who says npm is shit can go fuck themselves. I would take it any day over alternatives. Flutter isn't "that" bad, while native Gradle bullshit is straight up retarded.

It's like native development is intentionally fucked up with a million extra lines of boilerplate.
Oh, you want a recycler view? Have fun manually gluing your fucking LayoutManager, RecyclerAdapter, ViewHolder and a bunch of xml layouts together.
Flutter actually comes out on top here with its ListView.builder. Give it the damn array and have it build the items.. wtf else would I want?

Want to send a remote procedure call in Kotlin? Either include this library and manually modify your fucking build script with a bunch of magic-plugins or do some other bullshit like instantiating a new StreamObserver, overriding all its functions and have it look fucking ugly in general.
Why the fuck not just use async/await? JS and Flutter at least let you keep your sanity.
Flutter probably has the nicest option again, since you can simply do
await for (var entry in _myStream) {
_someMap[entry.itemId] = entry.itemName;
}


The only annoyance with Flutter and Nativescript is writing the bridge to access device hardware, but that's a small price to pay in order to not go insane

Thanks for reading my blog.

Attached: 1562002746196.jpg (225x225, 8K)

Xamarin is much better!

I'd just like to chim in here and say react-native is pretty fucking broken. But its still in beta

Normal for a Facebook technology!

After doing the web stack with JS/TS/Node/PHP7/React I had to decide if I wanted to learn Android or Java Spring/.Net.

I tried everything out and went for .Net, since Core 3 is coming out and I'd like to try out RPA in the near future.

With all that knowledge, I'm currently making a website in WordPress that could eventually earn me a few bucks.

I want to get into web development, I have a few projects in mind that could help me get independent, real projects that people want me to do for them

I tried fiddling around with my very basic html, css, js, php, mysql knowledge but its just a big fucking mess, I want to do it the right way and not just putting stuff together hoping it will somehow work out

my question is, whats the best place to start? To be honest I'm overwhelmed --- vanilla javascript, jquery, bootstrap, react, react native, vue js, angular, babel, json, mongoDB, REST API,.-..

where do I even start, what is outdated and what should I learn?

Are these cheap (on sale) udemy courses worth it?
udemy.com/course/learn-javascript-full-stack-from-scratch/

or can you recommend me something else? thank you