/wdg/ - Web Development General

Archived after 45 Replies Edition

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 - Everything PHP

>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_n.png (1280x720, 252K)

Other urls found in this thread:

staticgen.com/
javascript.info/
colourlovers.com/group/Artist_Palette_Challenge/conversations/21978/APC_502_Yoshitaka_Amano_天野_喜孝
stackoverflow.com/jobs/salary
mycard2go.com/en/#page1
w3schools.com/js/js_objects.asp
developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes
developers.google.com/search/docs/guides/
udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/
frontendmasters.com/courses/web-development-v2/
udemy.com/modern-html-css-from-the-beginning/
udemy.com/css-the-complete-guide-incl-flexbox-grid-sass/
youtube.com/watch?v=jV8B24rSN5o
youtube.com/watch?v=moBhzSC455o
youtu.be/UB1O30fR-EE?list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU
linode.com/docs/websites/set-up-web-server-host-website/
github.com/bakape/meguca/blob/master/docs/installation.md
twitter.com/SFWRedditVideos

*ahem*

Guys, is JAMstack a meme? It seems like the stupidest fucking "new" thing I've ever heard of.
>It uses HTML, JavaScript, and APIs!
>It doesn't have a backend!
>Static websites meme!
...Am I missing something?

The name isn't the best imo, but the idea it is based on is pretty solid and has become more and more popular.
The core principle (as far as I remember) is to make your site completely static and decouple it from your backend. Then you can easily host the frontend on a (free) CDN. Your site can render its own state any the only responsibility of the server is to handle API calls, but it doesn't have to deal with any kind of server-side-rendering.
I am not too sold on the markup part, but I can see it come in handy, when you have sites with lots of text content, like some blog, tutorials, articles, etc., (or if you need someone else with less webdev knowledge to edit things)

So it's basically just sort of separating your front end into a self-contained, static unit? That makes sense I guess.
I'm just still not sure why it's really so much of a "thing".

It's related to the rise in static-site-generators I think.
Those often have the option to use markup/markdown to create a large chunk of the content.
I guess you saw it on this already: staticgen.com/
Some of these are mixed server-side-render/static-site-generator (like Next or Nuxt), some are mainly for static-generation (like Vuepress or Gatsby).
So in these cases, the JAM name is fairly accurate.

So the udemy course on JS is discounted from $180 to $10 and I'm thinking about taking it.
Have any of you guys had experience with them? Would you recommend it?

if you're not averse to reading,I highly recommend:
javascript.info/

Udemy is always discounted. Their practice is borderline illegal.
If it's ever not at 85% or more, just open it in another browser or private window.

color theory is hell
all colors look like shit

take a gander at this,it might change your mind:
colourlovers.com/group/Artist_Palette_Challenge/conversations/21978/APC_502_Yoshitaka_Amano_天野_喜孝

Attached: s.png (450x80, 392)

It's a balance,when picking colors for a web page(or any form of art for the purpose of attracting people)the eyes need to rest,not be strained at what they are viewing.

How well does webshit pay in comparison to other programming jobs?

stackoverflow.com/jobs/salary

Someone give me an idea on what to make? I want a little side project that isn't a simple CRUD app. Preferably with node or spring boot

mycard2go.com/en/#page1

I fucking hate parallax normally but this is the first acceptable implementation I've seen.

thought you were referring to parallax on scroll at first.
On mouse move seems kinda pointless.
Also they fucked up the scrolling, when attempting to scroll by holding the middle mouse button.

Alright, seems to be almost the same.

There is no parallax on scroll, and that's the point. It's disorienting. On mouse move makes a lot more sense for a design that's purely cosmetic.

What do you see when you scroll with the MMB pressed?

What do most people use for serving files for their website? At the moment I have node just opening the file with FS and piping the stream but there's probably much faster technologies out there for CDNs etc right?

Rolling the mousewheel I can freely scroll custom distances.
With MMB pressed it changes to the kind of scroll hijack behavior, where it moves to the previous or next fullpage section only, so they are aligned with the viewport.
If it's static, then some CDN like Netlify, Github pages, Surge, Zeit or maybe even S3

Does anyone know any good introductory resources for SEO?


I have no idea how to actually get traffic now that I have a site.

Attached: 1541574895170.gif (480x560, 501K)

Just google "SEO", whatever comes up first must be the best resource.

>Archived after 45 Replies Edition
this is what you get for being meme javascript """"programmers""""

Unfortunately the SEO is a very convoluted area and the web is full of false guides or miraculous methods for SEO optimization

Many informations are old or no longer valid and without good tools it is difficult to do good SEO

Your best option is to find someone qualified to show you the basics

Which is easier to get an internship with, front-end or back-end? (computer engineering major here)

Also, is Haskell worth learning in addition to Python in order to get a start on back-end? I have no preference but I like Haskell's quirks from what I've seen.

>switched from Atom to Sublime
holy shit why the fuck have I been using Atom all this time

I don't see why either would be difficult,it is an internship after all,they expect you not to know much.Your job is to prove to them that you can learn and adapt.

check your local market or the market you are aiming for, then decide what's worth

>(you)
I am sure someone made a backend in Haskell, but I can't remember seeing Haskell used for anything related to webdev. So not worth it to answer that question. At least not for web development, unless you really like the language and are only working on your own projects.

I just saw it listed on the webdev roadmap and thought I'd verify, good thing I did.

Could you recommend any functional programming languages for back-end that pair well with Python?

why not node

In what sense should it pair with Python?
I assume you already know JS though?

Best way to learn java?

From what I've heard, Elixir is probably the most popular functional language within the realm of web backend.

But in general, why use Python at all? Or why not use only Python for your backend?

Don't.

If you really do need to learn it, what languages do you already know?

I'm building a simple dice roller in JavaScript because I need to fill out a portfolio and it seems like an OK piece. (I'll also be starting on a PHP character sheet creator after this.) Now, I'm not the greatest at JavaScript, out of the whole semester of our code class we only learned about 5 or 6 hours worth of fundamentals. So my question is about adding in a random number generator to the function. Here's my example:
>ES6 BTW

This is the RNG function I'm using:

function getRandomInt(min,max){
return Math.floor(Math.random()*(max-min+1)) + min;
}

The code I'm writing for each rolling button... I'm assuming there is a much better way than to write out one of these for each type of die (d4, d6, d8, etc.)
We didn't learn shit about loops or anything like that, mostly just putting stuff into the DOM with JavaScript.

let dFour = 4, dSix = 6, dEight = 8, dTen = 10, dTwelve = 12, dTwenty = 20, dPercent = 100;
let dFourButton = document.createElement("button");
dFourButton.innerHTML = "Roll a d4";
dFourButton.addEventListener('click', dFourRoll);
function dFourRoll(){
}
>Random function here, as well as output to the DOM here


So for this section, I have to add the function getRandomInt, since it's already instanced in an earlier function I would just need to make this:

function dFourRoll(){
function getRandomInt(1, dFour){
}

}

Sorry, kinda lost when it comes to adding more functions inside functions...

am I on sort of the right track?

What should I use in order to supplement my learning on Free Code Camp? I am understanding how everything works, but I'm not sure if I'm retaining it. I'm still working on the CSS section of it, so it might just need to be beat into my head more.

>am I on sort of the right track?
Ideally you'd want to create a 'dice' object with properties and methods, say a 'value' property and a 'roll' method.
You can certainly do it the way you're doing it now, but it'll just lead to a lot of redundant code.
w3schools.com/js/js_objects.asp
developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes

not him but isn't java one of the better languages to try and get a job?

you can use code tags on Jow Forums
put your code between (code)...(/code)
replace () with []

Like you said, look at for loops and also make that function reusable.
You don't need separate functions for each dice roll. Just pass different arguments to it.

build something simple yourself, that's not directed by some tutorial

>From what I've heard, Elixir is probably the most popular functional language within the realm of web backend.
If by "the most popular" you mean the new flavor of the month functional language you'd be right.

You could put all the dice numbers in an array and loop through them.

let output = document.getElementById('output'); // assuming this is where results are shown

let dice = [4, 6, 8, 10, 12, 20, 100];
dice.map((dieNum) => { // iterates through dice
let button = document.createElement('button');
button.innerHTML = "Roll a d" + dieNum;
button.addEventListener('click', () => { // inline function to run on event
let roll = getRandomInt(1, dieNum);
output.innerHTML = "You rolled " + roll + " on a d" + dieNum;
});
});


Note the inline function passed as the event listener. We don't want to go through the trouble of giving this function a name, when we only need it in this one spot.

Also, my code makes the assumption that every die's roll is determined by its name, so you might have a more complex structure for the dice array like:
let dice = [
{ name: "d4", min: 1, max: 4 },
{ name: "d6", min: 1, max: 6 },
// ...
{ name: "d10", min: 0, max: 9 },
{ name: "d100", min: 0, max: 99 },
];

And then change the other code to make use of those properties that are getting passed in.

Eh, maybe. But if you're in web dev general, I'd master JavaScript first, and then maybe do Java if you've absolutely determined that it's the best way to get a job in your area.

What other functional languages do you see used on web backends?

For Backend

>Stable Tier
PHP
Ruby
Python
C# (old .NET platform)
Javascript (Node.js)

There are all old, well documented, proven, just werks technologies. Start here.


>Newer Tier
Go - Simple & your best bet for raw performance.
C# - Using the new cross-platform .NET Core
Elixir - Individual processes are fucking slow (you'll be using a lot of external services to handle computations for example), but they're reliable & you can have lots of them. You need to learn OTP and Erlang to get the most out of this language in my opinion. Even the de facto solution for deployment in Elixir right now is via converting an elixir application into an Erlang 'release'.

Documentation is harder to find since they're newer, but there's enough to handle most usecases.


>Ivory Tower Tier
Crystal
Haskell

Enjoy never completing a project with these. They no doubt have their merits, but the documentation and ecosystem isn't there yet

Cheers lads.

without wanting to be nitpicky, .forEach() or for...of would read better here, if you don't actually need an array returned

>What other functional languages do you see used on web backends?
Scala
#F
Clojure
Common-Lisp
Rust is technically functional, and is a better bet than elixir simply because it can be used beyond webdev/distributed systems.

Yeah, you're right, I initially intended to do some preprocessing, but then I changed the design.

Clojure is a fair counterpoint, but Common Lisp is pretty rare, as is F#.

anyone here in the southwest/mountain region? trying to look for somewhere to start, and to be honest, i don't think there's anything really attractive to work for where i'm at, new mexico. was looking to jump to colorado, anyone have experience there?

I read this entire documentation and it helped me get a good grasp of SEO in general when I basically didn't know anything: developers.google.com/search/docs/guides/

You can skip the google-specific stuff if you want but double check if it actually is google-specific and not applicable to other popular search engines before you do so.

So, I studying a bit of webassembly, and I noticed that currently it is unable to do changes on the DOM. Why the fuck would they do that? Even though the idea of WA is not to substitute JS, logic intense sites (in my case, a filebrowser) would benefit a lot from it.

>logic intense sites (in my case, a filebrowser)
What logic is in your file browser that is just too much for JavaScript to handle?

WASM is in it's infantile stage, babby has to crawl first.

wait can I put my shitty projects I did the first week of learning on my portfolio and get a job

Ruby, python, JavaScript, lisp, c, I want to better understand it for clojure in the end.

To anyone who started learning and got a job, how long did it take you? I'm about 7 months in and feel that with another 3-4 months I should be solid.

Wait until you switch from Sublime to VSCode.

I think I found my first little company, /wdg/. Going to take a little while to become profitable(just need a job, or some cash flow), but I'll be making a few grand per month. Feels good. All I did was build a useful website. Got constant visitors on the daily.

I'd just like to say thanks for the beginner roadmap & overview. I'm just starting and it looks like a handy beginning.

Attached: 1516425856487.png (1920x1080, 2.21M)

So I created this awesome thing that should have made a lot of money.

It got viewed by millions and I made 20 dollars in the last week.

I'm never gonna make it. Sorry zyzz. I'll keep trying but man I am just a failure through and through.

I'm going to try again.

No point quitting now.

udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/

Any of you lads used this?

Attached: 1549851329146.png (1444x1080, 2.05M)

I love art. Web development is art. Beautiful art. It's a shame that it comes down to usefulness. Utility. Benefit. I understand it, but it hurts a little to see someone's soul fail.

Seems very pajeet, all css/js in one file is the most telling sign of a shit developer. Also no mention of git, or any of the important stuff that actually matters like deploying or how to actually get your shit done in an efficient way.

If you are trying to actually learn, watch something from frontendmasters like frontendmasters.com/courses/web-development-v2/ or on a very specific subject, say flexbox or grid.

If you want to "make something" more than learn I recommend traversy udemy.com/modern-html-css-from-the-beginning/
or max whatever his name is udemy.com/css-the-complete-guide-incl-flexbox-grid-sass/

>20 in the last week
Well, user, that's $1040/yr. in extra income, if you make $20 a week. Make it a goal to increase that number at least every month.
I made a course, and get like $100 every 3 months, sometimes less. It took me like an hour to put it together, and while I wish I made much more, it's still nice, passive income. The goal is to create multiple passive incomes like this, so that you don't have to work so much.

>all css/js in one file is the most telling sign of a shit developer.
That's not true. If you're making a small website, there's no reason to separate everything (even though I would, there's nothing wrong with not doing so)

>html5 and css3

You don't need a paid course for this. Just reading the docs and experimenting is enough desu.

Try Traversy Media as this guy said He even has free youtube videos on those specific topics:
Crash course: youtube.com/watch?v=jV8B24rSN5o
Example Page from scratch: youtube.com/watch?v=moBhzSC455o

whats the IP range on chinks and russkis?
I want to block whole china and russia

Indian address are welcome too

What's the average pay for web dev in comparion to soft dev?

>completely throwing away easy to understand code, design patterns, easy to navigate file structure to save yourself 30 seconds making a file and importing it, which doesn't even change the output css file(s) in any way.

Like I said, pajeet tier. No point in learning from these people, you wanna become 10x developer, not a 0.5x developer that creates spaghetti 3k lines of code CSS files using comments to separate it.

i wouldn't call css development, user

I'm looking to create something interactive.

Attached: 1549855414253.jpg (1440x1076, 950K)

youtu.be/UB1O30fR-EE?list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU

This any good, lads? Or will it be too slow?

Attached: 1522481096263.png (1920x1080, 2.15M)

dude, get the fuck out of here.
seriously, just do something, anything.

Thanks user, I'll start with that!

What monitors do you guys use ?
I have a 144hz Benq but ditching it for something with actual picture quality, is 1440p worth getting or will that negatively skew my perception of websites when the standard is still 1080p ?

I'm going to setup an imageboard for me and a few other people. The plan is to rent a Linode vps and buy a domain from Google. After that, just run the imageboard software. Is it really this simple? Is there anything I should know security wise?

Attached: 1548872511102.jpg (3000x4950, 1.19M)

Forgot to add I've read these
linode.com/docs/websites/set-up-web-server-host-website/
github.com/bakape/meguca/blob/master/docs/installation.md

any free course that as good as these?

This seems like a fun project. Have fun, user!

While learning may be fun, not knowing how to handle a web server properly is not

Which PHP IDE is the most popular?

Attached: 1525985319124.png (480x640, 535K)

software devs are generally higher prized than web devs. take that as you will.

How do I get innerhtml on onlick function?

1

>blog post
>Started college at 22 for IS&T, graduated last May
>Don't like current job
>Made a decent web app for senior project
>Realize I want to do web dev
>Seeking validation from internet strangers

I want to quit my job and spend 3 months grinding web dev basics: Month 1 JS/CSS/HTML, Month 2 asp.net/some JS Framework/MVC, Month 3 XML/JSON/IDK

Any suggestions, words of validation?

>Made a decent web app for senior project
>spend 3 months grinding web dev basics
guess that app wasnt decent as you say

>apply in every direction
>send a ton of resumes
>contact people on LinkedIn
>someone will have to take the bait and give you an interview
>????
>profit

too many people do that and it looks horrible imo.
The same weather app, pomodoro timer and quote generator every time.
are you the user with the twitch extension?
pass 'this' to the onclick function to reference the button
>Month 3 XML/JSON/IDK
You don't need to take out a month for JSON.
You will use JSON at some point before that already and it's the same syntax as normal JS objects anyway, so nothing you really have to learn separately.
And like the other user asked, why would you have to go through the basics if you finished a web app project already?

Well it was a full stack thing using Google map apis/hosted on AWS using RDS w/ SQL server/jscript with asp.net backed

But it was only one project that I split with one other guy. I'm talking about grinding solo projects and feeling super comfortable with OP tech

Yeah I'm pretty good on that end. Apparently Im super charming and was able to impress with what I knew about data structures / design patterns / explaining my senior project. My current job is total ass though, maintaining 15+ year old MFC hot fucking garbage that crashes when INI settings are wrong or missing or if there isn't a DB connection

>are you the user
I love your memory. Yes, it's me. I'm launching another one tomorrow and am developing a 3rd for the contest they have going on.

Laravel or Symphony

>absolute state of web """""programmers""""""

try again

why?

laravel is based on Symphony as far I know...

Why would we have statistics on which IDE is the most popular?

Watch out for the tidalwave of Medium articles on ES2019 features written by people who cannot communicate properly in English /wdg/

great

Please give yourself time to research what you need to learn properly, because the schedule you're thinking of is all retarded and hitting on the wrong areas.

To get you started, learn HTML first, then CSS, make sure you can produce a static web page that would look fine in the 90s / early 00s, and THEN start to learn JS. And vanilla JS will take you a year to fully grasp and understand. After that year you then move on to a JS framework.

>MVC
is not a language, it's a way of building and coordinating your code

>XML
is dead and has been for 10 years or so, where the fuck did you pull that from

>JSON
is just JS objects but in dedicated files like the other guy said

Also why do you mention ASP.NET?

3 months is way too short a time to even become passable in webdev. You don't want to be a liability do you user