/wdg/ - Web Development General

Previous Thread:
>Free 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)
developer.mozilla.org/en-US/docs/Web - General documentation for for web-technologies
freecodecamp.com/
codecademy.com/
bento.io/
google.com

>Further resources
stackoverflow.com/ - Developer questions and answers
github.com/kamranahmedse/developer-roadmap - Roadmap
youtu.be/Zftx68K-1D4 - Web Development in 2018

>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: op.png (824x553, 251K)

Other urls found in this thread:

developer.mozilla.org/en-US/docs/WebAPI
developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation
fonts.google.com/
github.com/kamranahmedse/developer-roadmap
jsfiddle.net/0nhknfjt/13/
youtube.com/watch?v=Zftx68K-1D4
youtube.com/watch?v=oRzOBT1qJMA
jsfiddle.net/0nhknfjt/16/
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#Bracket_notation
labs.abeautifulsite.net/simple-php-captcha/
twitter.com/NSFWRedditImage

The virgin Reactor and the Chad Angle

>tfw 1366x768
No room for all my coding. I feel like bursting into tears everytime I switch my laptop on.

Attached: 54ye5kto9coz.png (691x653, 27K)

Do front end jobs that primarily use React generally expect you to be good at node as well (beyond npm and webpack stuff)? Or does that fall more into full-stack?

What is the functionality phones and tablets have that knows when the user is moving/rotating them? I'm looking for a parallax effect that plays with that.

Accelerometer or gyroscope. Parallax is cancer.

Thanks, I don't care about that. I'm making a web app targeted at children and want to have some visual interactivity like that in the login screen which will look similar to pic related.

Attached: laracon_invasion.png (800x600, 754K)

developer.mozilla.org/en-US/docs/WebAPI
developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

not the same guy but
>tfw project managers/designers/clients at my ask for parallax
>tfw can only suggest it's not the best idea in most cases
>tfw gotta do it anyways to make client happy and make their site a little extra "special"
>tfw when I kinda like parallax sometimes, if it's done really well and efficiently
>tfw can't really do that with our current stack and platform
>tfw they give me an image to parallax in a full-width container that's only like 1500x500.
>tfw yeah that's not gonna look good
>tfw $(window).scroll(function(){});
>tfw...

Attached: 1301941145303.jpg (750x750, 196K)

I'm still trying to figure out how the fuck you actually are supposed to learn webdev.

Every tutorial i try to find online is at least 1--2 years old and in that timeframe whatever it is i am trying to learn has changed significantly.

Also half of the tutorials are from pajeets that do things super weird and backwards and probably just straight wrong/are not best practices but are technically functional.

Like seriously how am i supposed to learn this shit. It is pissing me off.

Are there no learning materials that start teaching you things that you will 100% need to do as a webdev? Like for instance say im trying to learn angular 5 with redux, they would go through and show you okay you will need to do all crud operations heres how you would implement them, here is how you do async functions using ngrx, here is the proper way to do loops in pure functions, etc.

NOPE, nothing like that. It is so fucking frustrating. Not to mention there are like 50 different frameworks- so many that i think it is hurting newcomers because they cant even fucking learn to do anything because stuff changes every month.

Fuck.

Alright, fuck this. Does anyone want to work on this with me? Great resume booster. It's a legitimate site with a flourishing community, I'm expecting a decent amount of users(potentially), nothing huge.

Anyway, things on the todo list:
>Pagination
>Authentication(login/signup)
>Search feature

That's about it for now.
Technologies in use:
>Handlebars.js
>MongoDB
>node.js/express

Will throw up an ngrok server, if you want to check it out. Email me [email protected].

Also, I don't care about le dox. I have no life, no friends, so doxing me would be pretty pointless, you aren't ruining my life.

>tfw 1280x800
Could be bigger, but it's not bad at all. alt+tab to switch between things, etc. Learn keyboard shortcuts to make it easier.

That'd be full-stack. Although if you can React, then you can node as well, so you'd probably be learning it.

Is there a free alternative to the Whitney fontset which Discord uses?

fonts.google.com/

I'm looking through the ones provided by google and I can't really find any that has that informative bold yet soft look

Attached: 1464532544144.jpg (439x290, 23K)

This is the motherload: github.com/kamranahmedse/developer-roadmap

>Does anyone want to work for free on my shitty website that'll never take off and implement these super basic features that I'm too retarded to code????

Make sure if you're looking for a tutorial you put 2018, or 2017 at the end of your search result. Make use of the documentation of the tools you're using. This is where people actually learn. Once you get used to reading docs, then your life will be easier.

Yeah, it's kind of a mess right now.

Just stick with the basics. Get good at html5, modern css (responsive, flexbox, grid, SASS), and vanilla ES6 javascript. Those will be your bread and butter. Don't get overwhelmed by all the little libraries and frameworks out there, as most of them are not essential, and if you do need to learn them, you can learn in your spare time or even on the job as needed (when you get one).

The nice thing is, once you have some experience and knowledge, you have a better idea of what you need to know and what is/isn't worth knowing.

For frameworks, there's a lot of shitty tutorials out there like you mention, but unfortunately you just gotta stick with it and build stuff the best you can. Again, don't bother learning a bunch of different ones, as it's better initially to focus in and get good at just one or two.

>>Does anyone want to work for free
It's not really work, it's a fun project. People are working on projects now, why not jump into something with someone else, working together?
>shitty website that'll never take off
I don't plan on it "taking off", whatever you mean by that.
>super basic features that I'm too retarded to code????
I'm learning by doing. You're a really nice person, user. I like you.

hey fellas I am starting a QA Developer job in about a week and I do not have any experience beyond basic unit testing for basic JS apps. Could anyone point me in a good direction to set up a good testing process for a variety of web dev technologies and applications? thx

Attached: dd.png (135x244, 79K)

This is why people pay to go to school. If you're going to autodidact this shit, expect to spend some time learning the wrong things and doing things the wrong way until you get more experience.

is there any documentation at all on the splitChunks plugin introduced for webpack 4 to replace the common chunks plugin? why is no one talking about it? code splitting is a must on any decently sized project.

Not that user, but if you've worked and freelanced as a web dev you inevitably got asked or proposed things like this on a regular notice so I understand why someone would respond that way. It can make a person jaded and free work, even if it's a side project can turn into an obligation with deadlines and not even a thank you.

I mean, even in my uni projects we got paid in some way whether it's with free lunch, some concert tickets or even actual money despite the incentive not being money. Time's precious, you know? That being said, good luck with your project and hopefully you'll find someone.

Does anyone know a free widget that allows me to link my instagram to my website. I found lightwidget but because my site is HTTPS it didn't work

not sure what you mean?

just put a link to your instagram in your website?

Depends, do you want to be a real nigga or a code monkey?

How come I never see any discussion about Spring Boot? I really enjoy working with it.

No I want 5 column wide, 2 row tall feed of images taken from my instagram on my website.

>I understand why someone would respond that way
Yeah, I get where he's coming from. Anyway, my comment was for anyone. I know a fair amount of shit that I can pass onto someone less experienced, or even have someone more experienced and teach me shit. There is no obligations.

I saw:
>make friends with other anons
>learn shit
>build something

> good luck with your project and hopefully you'll find someone.
Thanks,

Instafeed and masonry js modules

How did you get over imposter syndrome? I'm probably a mid-senior developer, but I feel like I need to learn much more. I always feel like I need to learn more before applying to jobs.

spring and java aren't "cool" and trendy. that's mostly what people wanna talk about on the internet regarding web dev.

>work for "experience" or "exposure"
you know with that everyone immediately imagines the cigar-smoking CEO type, that's just out to fuck you over and exploit your good will.

>It's not really work, it's a fun project.
yeah it's work.
If you work on your own side-project, then you are doing it for fun or out of some genuine interest.
You didn't provide any info about your site. There is no reason, that someone should assume, that there is a fun time to be had, when the alternative is to work on personal things that you know actually interest you.

If it's nothing huge, why don't you open source it so we can take a look and see if we can help on something?

Once you know how to traverse the DOM, is that all there is concerning vanilla JavaScript?

Does anyone know how to link to a hashtag within an instagram users page?

There's also AJAX, but if you're the jobless type who thinks websites should be pure and use as minimal JS as possible then yes that is all you need Javascript for.

I'm using two 1080p monitors on my PC and it's often not enough for me, I honestly can't believe someone can be productive on single 1388x768 screen, as a front-end web developer at least.

Sup Forums thinks my post is spam.
But I am trying to call a function in my html file from an external JS file. Can someone please help?

jsfiddle.net/0nhknfjt/13/

youtube.com/watch?v=Zftx68K-1D4

Watch this video. It's not perfect, but pretty much the best out there.

I miss the old internet
The dancing Jesus internet

youtube.com/watch?v=oRzOBT1qJMA

here ya go

jsfiddle.net/0nhknfjt/16/

Thank you.
But can it not be done from a different js file?

yes, but i don't think you can do that on that website though

Then why does this not work?

Attached: testFunc.png (931x182, 14K)

Because you aren't calling the function testFunc(). You need to write 'testFunc()' in the JS part to call it.

Also you are on JSFiddle so remove the src part.

because you're saying that js script is in the /js folder, but you don't know how the website organizes the folders

Also, go learn the basics of JS and HTML

Is reactive programming a meme or is it good?

there is no some site where I can do webdev for free?

Isn't that what I am doing here?

Haven't I already done that on line 20?
Also, this is in Atom

Attached: source.png (893x670, 69K)

fix issues on github or something

What line 20?

My original image here:

its as legitimate as progressive application design and fearless concurrency

I need to learn php but straight ahead i ran into some problems.
Things I have done so far:
> installed debian
> installed apache, sql, php and its modules as stated in tutorial
> switched index.html and index.php ordering in some config file so that apache would launch index.php first
> created index.php file with vim


and it works
> deleted phpinfo and added some text localhost page throws me 500 error log says syntax errors...
> I was able to solve this with simple echo "some text " but as I saw bunch of examples on internet no one writes all of their html code enclosed in echo
-------------------------questions--------------------------
> why plain html doesn't work for me?
> why simple page doesn't load if I omit ?> php closing tag at the end of file even though It should work without it?
> Is this apache related? Should I edit some more configs?
> Why is it so unfriendly and difficult to even start learning php, could anyone recommend a simple detailed guide on how to set up basic system and basic php register/login page for beginning?

Thank you for your time, I feel I can't google out anything because my questions are too stupid but I hope it is ok. If someone could answer to even one of my questions or lead to the right direction I would be really grateful.

I have no idea what fearless concurrency is and progressive web apps are just there, i don't see how they can be bad or good, it's just another option.

Oh right. No, you didn't. You defined the function. To actually execute it, you need to call it.

Isn't "testFunc()" is what is calling the function? Since it's already defined in my JS file

code sitting in script tags doesn't just execute automatically. if it did, it might start trying to modify shit that isn't loaded yet. You need to use one of the browsers event listeners, such as document.onload, then have that call your desired functions.

nvm im a brainleet, i just need to write html outside php tags

just memes that mean nothing, named by soyboys in san francisco.

Not really wdg related but is there a way to make Adobe XD run on Windows 7?

and while i'm at it. don't ever use script tags outside of the area of your document.
You should only be referencing javascript files, and put all your code in there.

Is django good enough to warrant learning python for web dev back end over just using express?

I've heard it automates a lot for you and that's what I'm interested in, I don't want to really be a back end dev at all, just on some occasions I want to put some simple things in, have sign up forms, admin page etc and be able to include them as easy and quick as possible.

Are there things for express that can do that automated for you anyway?

get with the times, grandpa

>code sitting in script tags doesn't just execute automatically
I think you worded that wrong, because it does.
I am not sure, but I feel there might be an issue with referencing an external file and embedded JS in the same script tag?
It's something you usually never see.

Attached: jsexec.jpg (739x375, 31K)

I love Angular 5!

explain

Only retards don't like Angular.

Did you quote the wrong person

yes, sorry. replace doesn't with shouldn't. it also puts my continuation post in a context that makes sense

Bruh belongs just above the closing tag, don't confuse the noob.

You can't include inline scripts inside a script tag with a link. (Some browsers might allow it, but in general I think you're not supposed to do it.)

You need a second script tag in which you call testFunc(), or you just need to put it inside that script.js file:
[script type="text/javascript" src="js/script.js"][/script]
[script type="text/javascript]
testFunc();
[/script]

(Replace some of those brackets with angle brackets because Sup Forums doesn't like me embedding script tags)

Note the lack of the 'src' attribute on the second script tag, which means the code written inline inside the tag will be executed.

>code sitting in script tags doesn't just execute automatically
Yes, actually it does. But as you said, you want to avoid that because it might modify not-yet-existent things. So using document.onload is generally what you want (or DOMContentLoaded or whatever you're supposed to use these days).

>in head tag
>before closing the body tag

What is the truth

Number two so the entire DOM loads before the JavaScript can dig its meaty claws into it.

why?

I'm comfortable with JavaScript and Python 3, I've learned a little bit of other languages along the way. Why does PHP have to be so different? Why is debugging PHP such a chore? How do I git gud?

Attached: 1516216662528.gif (499x276, 463K)

It forces you to write javascript that is both maintainable and extendable which your average weblet will seldom take the time or interest to do

fuck PHP

Oh boy. I can't wait to code for a library that becomes obsolete and unusable when the next version comes out.

I did. Pajeets were cloning my code, i.e. stealing it. I will open source it when I deploy it, and have the above features implemented. It's not huge, but it is big. I worked hard on it, and it's my most proud work. It'd be a shame if someone published it before me.

>don't ever use script tags outside of the area of your document.

False. Never put script tags inside of the area of your document.

Attached: 32.jpg (625x340, 44K)

testing

Attached: 1484205636367.jpg (700x968, 587K)

You got some code embedded in that image there buddy

it doesn't matter much unless you're a perfslut who prefers just before the body closes amd you're doing some heavy js

Nah, I tried to reply to the guy asking about putting scripts on and got connection error few times in a row, seemed like Sup Forums shit itself like it did few days ago.

I remember you used to be able to upload images with "hidden content" and download them, like rename and open them as a .rar file and see a set of images inside it, is that even still possible?

Dunno, but posting images like Sup Forums.js (which was a decade ago, where did the time go) does not work anymore from what I know.

function whaleSounds(str) {
str = str.toLowerCase().split('');
str.forEach(function(entry) {
if (entry.charCodeAt() === 97 || entry.charCodeAt() === 101 || entry.charCodeAt() === 105 || entry.charCodeAt() === 111 || entry.charCodeAt() === 117) {
str.splice(str.indexOf(entry), 0, entry);
}
})

return str.join('').toUpperCase();
}

console.log(whaleSounds('hello world')); // "HEEEEEEEEEEELLO WORLD"

Why does it not affect the O vowel /wdg/, my brain's all levels of fucked up from this

you're meant to pass a number to charCodeAt

pass it into the function itself? oh shit

nope, tried it, got an error

oh dude I get what you mean. you're saying charCodeAt isn't a string method right.

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt

you should probably use charAt instead so it's clearer what your code actually does

>you should probably use charAt instead so it's clearer what your code actually does
How would that work? I'm extending the vowels to turn the string into a noise a whale would make, if I use charAt that wouldn't be flexible at all with whatever string is passed into the function

sorry, i looked at the code some more and i don't think charCodeAt is the problem

i think it's that you're modifying the array while looping over it

you could create a second array for the result and just .push() characters into it (a few times if it's a vowel) and .join() that at the end

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors#Bracket_notation

The function you pass to Array.forEach can take up to 3 arguments. If it takes 2 or more, the second argument will be the index of the current item, which lets you do entry[index] === "a".

Ayy, good idea. I think that will do it. Thanks!

Thank you for the info on forEach dude.

So I now have to make website for someone and I'd just go with wordpress since it's not very complex, but there's still going to be some backend stuff I will have to deal with and I promised to never touch PHP again.
Is django decent? Out of all the options Python is my favorite language so far so I thought I could try django a bit.

So I'm trying out the php captcha library found in:
labs.abeautifulsite.net/simple-php-captcha/

I just wanted to know what he means by:
"To verify the CAPTCHA value test against $_SESSION['captcha']['code']"

Does it mean that I just have to compare the captcha in the sessionstorage and the user input?
Is it really that simple? Is that how a basic captcha verification works? Just by comparing the 2 values?
ex:

if($_SESSION['captcha']['code'] == $_POST['userinput']) {
// correct
} else {
// wrong
}

New chrome dev tools are crazy good, that audit that just auto runs and shows all your problems is so useful wtf

they're still lagging behind on grid tools tho