/wdg/ - Web Development General

"Who let the thread die?" edition.
Previous thread: >COMPLETE BEGINNERS GUIDE
github.com/kamranahmedse/developer-roadmap

>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 (independent of your browser choice)
freecodecamp.org
codecademy.com
hackr.io

>Further resources
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
github.com/kamranahmedse/developer-roadmap - Frontend+Backend learner-path suggestions
youtube.com/watch?v=Zftx68K-1D4

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

>PHP resources
pastebin.com/gfBPg24A

Attached: wdg.png (822x552, 814K)

Other urls found in this thread:

greasyfork.org/en/scripts/33819-url-conversion-youtube-hooktube
youtube.com/*
github.com/kamranahmedse/developer-roadmap/blob/master/readme.md
yle.fi/uutiset
systemspace.link/
twitter.com/NSFWRedditImage

Book recommendations for someone learning Javascript? It's also my first programming language.

Just do a online course, like the freecodecamp one.
If you really want a book, get the Eloquent JavaScript book by Marijn Haverbeke. It's supposed to be good for an intro to programming, never used it myself tho.

Theoretical and in depth: YDNJS,
More programming focused: Eloquent JS,
A little more broad: JS Definitive Guide (I've read it myself, but wouldn't really recommend it)

What's the secret for responsive text in CSS? I saw a site use:

calc(1.10181rem + .9639700000000002 * ((100vw - 20rem) / 80))

but it doesn't work on my site like it does on theirs, am I missing something?

> You don’t know JavaScript

the book is free, it’s on GitHub, if you don’t want to buy it on paper.

It’s well explained, starts with the basics of programming and moves on to explain in great detail the most advanced and intricate JavaScript

Attached: 4L_Q46JjfE6.jpg (520x539, 62K)

Thanks will check these out. Been doing FreeCodeCamp's stuff but I think I'd like having a book at hand to supplement it.

maybe you're putting it in the wrong place?

Attached: 3333333333.png (479x487, 23K)

wtf is "responsive text"? Text is already responsive unless you're using nowrap

font size

rem depends on the html(tag) font-size

Chances are you're trying something terribly wrong and dangerous. Please just stop.

there's an element in the footer of my website I want to remove but I don't know how to locate it

it's not in the footer.php file and I already deleted what traces of it were in the CSS, but it's still there

any ideas?

>"Who let the thread die?" edition.
We actually hit bump limit last thread. The only issue was not creating a new one a bit sooner.

I'm just a beginner, so I shouldn't be answering this, but this is common sense, search for job offers that are interesting for you (pay or stack wise) and then choose your move from there, that should tell you what stack/piece of tech to get your hands on.

You have completed 77 of 1409 coding challenges.

You have built 0 out of 30 projects.

You have earned 0 out of 6 certifications.

1,332 more challenges to go.

look for an ID or anything unique in the footer, then cntrl + F your wordpress theme folder files for that thing

Well the 'rem' units are based on the HTML element's font size, so maybe check what they set that to.

But for real though, that looks like a mess. Just use 'em' units and then find a media query breakpoint that works for switching to a larger font size on smaller displays, and set HTML's font size to a slightly larger value.

php, Writing classes do i need to write public before functions(methods) if it's getting assigned anyways?

Notepad ++ has this neat feature of search for a String in multiple files (or a folder containing all files)

I've seen a site use the font size set to a size based on the width of the page, pretty neat, it was done in js

Probably a stupid question:
What can I use to have a base HTML page template which others use?
i.e. base will have banner, home button etc. which others will use coupled with their own content.

php includes, include header.php

best way to get a job?

is it to become a front end dev?

Redpill me on MongoDB.
Is it just databases for brainlets who can't do SQL?

it's NOSQL, Not Only SQL. So theorically it holds more advanced queries than SQL. It also "theorically" handles big queries of multiple fucktons of entities at once better (but as I've heard in this particular it's the other way around, anyone has any idea on this?), it's supposed to be more sophisticated than SQL, but in most cases it perfroms poorly when compared to SQL, just watch statistics and benchmarks on different darabases.

Theoretically MongoDB and NoSQL in general can fulfill a different set of requirements than regular relational DBs. Some companies actually use MongoDB successfully, I think Stripe is one.

But relational DBs have a much wider net of usefulness, are easier to maintain at a smaller scale (a scale that most businesses fall under), and generally already have pretty good support in most existing systems (through ORMs and the like).

I think MongoDB gained traction because it uses JavaScript for querying and JSON for document storage, and therefore was the obvious choice for a full-JavaScript stack. And it is pretty easy to get started with. It's mostly just when you try to scale that you run into issues.

do these links in the OP provide a good starting point for someone aspiring for a freelance webdev position? I only know html & css right now (also Java but that's kind of irrelevant for the most part)

what should I be learning and from where?

>It's mostly just when you try to scale that you run into issues.
My teacher said that NoSQL was better for bigger queries, why isn't that the case with Mongo? What am I missing here?

Do the MDN intro to Web Development (HTML CSS JS, then your choice of Node or Python). I like that one the best

Why would any average sized company use it then, other than going full javascript?
PostgreSQL and MySQL have JSON types.

It can work well at scale, see Stripe, but it's more work to do so. You have to deal with sharding and stuff.

I'm not really sure why it's so hyped, it might just be startup culture memes.

>sharding
wots dis?

Is there such a thing as open source websites?
I can only learn so much from "help world" level tutorials.
I want to see how React is used in real life.

digg through githubs with react on them

So I just applied for a full stack position which required no previous experience.

I kind of fullfilled the requirements, which were just a high level of JS (maybe not so much my case) and fundamental knowledge of web technologies as well as fluency in relational databases.

I've honestly never worked with a database before, would codeacademy's mysql tutorial cover me here?

how fucked am I? I've never done full stack before.

SQL can do:
.Create tables
.Define the type of variable each field is
.Regular queries (like select field from table)
.Define primary keys
.Set keys as auto increment
.Define foreign keys
.Joints
.Some advanced stuff that Idk about goes here
.create users
.restrict views/permissions
.same as all the above but with delete

And I'd say (I'm probably worng) that that's it. Well there is the part of combining this with ajax or whatever is used nowdays.

>I've honestly never worked with a database before, would codeacademy's mysql tutorial cover me here?

Eh, I'd probably spend at least a few hours on youtube tutorial on top of that, but it's pretty much what said. It's piss easy, you'll be fine.

create a CRUD app and that's something

Could someone please spoonfeed me with a js code that redirects from youtube channel main page to /videos counterpart? What I wrote doesn't seem to work.

var url = window.location.toString();

// youtube channel -> videos redirect
if (url.match(/youtube.com\/channel|user\/(.+?)/) && !url.match(/youtube.com\/channel|user\/(.+?)\/videos/)) {
window.location += '/videos';
}

Use
window.location.href

I believe that this part works, I took it from some other userscript. The regex is what I'm struggling with.

I think the issue is that the '|' operator has higher precedence than you think.

Put parentheses around that part: (channel|user)
It's only necessary for the second regex, but you should include it in the first anyway.

Sometimes it does work, sometimes it doesn't. On the same url. Also, it takes a good 3 to 5 seconds for it to execute. All of this, yet the script I'm trying to base on works always and in an instant.
What the hell.
"Base" script: greasyfork.org/en/scripts/33819-url-conversion-youtube-hooktube
My script:
// ==UserScript==
// @name redirects
// @namespace Violentmonkey Scripts
// @match youtube.com/*
// @grant none
// ==/UserScript==

var url = window.location.toString();

// youtube channel -> videos redirect
if (url.match(/youtube.com\/(channel|user)\/(.+?)/) && !url.match(/youtube.com\/(channel|user)\/(.+?)\/videos/)) {
window.location += '/videos';
}


Failed captchas: 10
HIROOOOOOOO

y this?
>\/
>(.+?)

Is it an issue that you're having it run on www.youtube.com instead of just youtube.com, or *.youtube.com?

I don't understand what you're trying to do, why do you have two regexes?

Also I think it might be like said, you can even use a non-capturing group with (?: channel|user)

i want to start learning about web development. what's best for an absolute begginer. freecodecamp or codeacademy?

nope, violentmonkey shows whether script is active or not

>>\/
to escape /
>>(.+?)
no idea honestly

I want to build an userscript with a bunch of various redirects. There are some websites with parts that are annoying as hell.

I got it to work now, but apparently youtube seems to be using some jewish magic instead of hyperlinks on their website - it doesn't work on urls clicked on yt. I need to refresh the page.
// @grant none
// @run-at document-start
// ==/UserScript==

var url = window.location.toString();
if (url.match(/www\.youtube\.com\/(channel|user)/) && url.indexOf('/videos') === -1) {
window.location = url + (url.slice(-1) === '/' ? 'videos' : '/videos');
}

MDN

>====>/youtube.com
the why is not escaped?

In CSS, is there a way to add to a value of a parent attribute?

Let's say I have some nested bulletin lists:

foo

bar

baz
and another one


Is there a way for me to indent the s based on their nested level?

Pseudo CSS of what I'm asking for:
ul {
margin-left: 3em; /* top level margin */
}
ul > ul {
margin-left: calc( parent(margin-left) + 2em ); /* additional margin per level */
}

ul{margin-left:3em;}
ul > ul{margin left:2em;}

Tbh I have no idea what does and what does not have to be escaped / captured in js / js regex engine. I don't use either on daily basis, and each implementation seems to be a bit different (why tf is this a thing in 2k18, regex implementations should be standardized)

if I recall correct ul elements nested must be inside of a li not a ul, does anybody know if that's true?

Attached: 1531854344405.jpg (288x175, 9K)

But how do you do it for N levels?

You are correct.

ul > ul > ul

Yo, finally got a sick ass interview. 3 step interview process:
>phone interview (completed)
>project (working on now)
>final step

I probably should have asked what the third step was. He mentioned we'd discuss money and shit then(50-80k/yr.). My question is, what is commonly the third step? Will we just settle in, after discussing money and what not? Or am I going to be assigned some dreadful fucking algorithms to solve in front of someone? That shit makes me think I'll never get a job in tech. I'm nervous just speaking on the phone to them, to write an algorithm in front of people would probably make me collapse.

I just want to thank whoever made that simple 150-step roadmap to being a web developer. Really made everything clear.

what's the job position and what's the project about?

>that simple 150-step roadmap
poast?

github.com/kamranahmedse/developer-roadmap/blob/master/readme.md

it's in the OP dolt

>youtube seems to be using some jewish magic instead of hyperlinks on their website
Found the event'yt-navigate-finish' via chrome dev tools:
document.addEventListener('yt-navigate-finish', function() {
console.log('navigated to a new url');
// here's where you can check the url matching
});


The dot character matches any single character, so it works, but technically it would also match a lot of other things like youtube/com or youtube&com.

Pretty sure that's a standard feature.

If you were to set font size to 2em and then margin-left to 1em, it would double the margin every time, for n levels of depth. But you could probably also do some shit with calc in order to add say 4pt every time: font-size: calc(1em + 4pt)

Of course, the downside of this is that the font size increases with every level of depth. So this wouldn't actually be very useful in practice. Sorry.

Web developer, focusing primarily on the front-end(using React). Which is why I'm thinking the third step will be pretty simple, yet I'm unsure. The project is cloning a section of their website. It's a pretty big company, the biggest company in fact for what they're about.

>github.com/kamranahmedse/developer-roadmap/blob/master/readme.md
thx m8
I didn't know lol

>PHP uses interfaces and abstract classes, which are both 100% the same exact thing
Let's all laugh at PHP /wdg/, share the worst things about it

Guys seriously how do I git gud at React really fast?
I've been reading the official docs but I don't think it's enough to bs my way through my interview on Wednesday.

>difference between props and state
>how to update state
>how to pass props to other components
>knowing when renders occur and how to control when renders happen (shouldComponentUpdate)
>knowing the purpose of the lifecycle methods (constructor, componentDidMount, componentDidUpdate, getDerivedStateFromProps, componentWillUnmount)
>importing/exporting your component
>Using JSX

Programmers
Hate
PHP

which java frameworks should I learn if I want to get a job?

Spring

Any particularly good places to learn it from?

what am i, fucking google?

yes

There's literally zero good resources for learning Spring. The best you can do is 240p tutorial videos on YouTube of pajeets with bad mics and unlicensed screen capture software.
Oh and you also need to learn Hibernate, and it's the same deal.

>pajeet's responsive design

Does anyone know any good resources for learning good design/UI practices?

I can do all of the technical stuff, but actually making a site that looks GOOD is what I'm hung up on.

Attached: 1523474696267.jpg (1080x1350, 129K)

it was actually from a western site, no pajeets in the dev team

>what is outsourcing
might as well write "poo wuz here" in a comment

>Found the event'yt-navigate-finish' via chrome dev tools:
This is nice, could you also find me something like 'yt-navigate-begin'? There are some cases where I'd like to block this shit. Sorry for being a beggar, but I've no idea how to use browser's dev tools.

copy sites as fuck, this will help you understand some things, use raleway as font, for everything, study typography, study colors, study composition. All in all, study design, come with cool designs in photoshop or AI, and try to implement them in web, but all in all get inspired by top site, I'll share my humble list with you, some of which come from /gd/'s user suggestion:
Stripe, Zero Financial, Crypton Trading, KIKK, Epicurrence. yle.fi/uutiset , systemspace.link/

Ok, I have a interview with the webdev lead for my university next monday. They pretty much expect me to be completely entry level but I would like to at least spend some time this next week learning enough HTML information to pass as someone who looks promising. I do have some decent Java experience, and I've heard webdev is much simpler than OOP.
What would you guys do if you had no previous knowledge and an interview in a week?

Attached: Dl70TQxUUAAzhic.jpg (634x624, 87K)

do you know what tech stack they're using?
read up on everything mentioned in the job description

don't try to learn HTML/JS in a week or whatever, just know what every noun in the ecosystem means.
e.g. PHP vs react vs apache vs sql vs git ... etc

just know that the structure is:
1.html
2.css
3.js
4.php(or other back end language)
5.Mysql (or other database languages)
6. JS front end framework (vue,react,angular from new to old)

Attached: 1540055003944.png (1332x3790, 963K)

oh and a jewel for you, you know firefox and chrome have that thingy... press F12, there you can inspect the html and css properties of a page, edit the css values, edit the html values, edit the CSS sheets (and save them if you have the files locally) and all of this in real time, such a fucking amazing source of knowledge

It's called 'yt-navigate-start'

In the inspect-element view, there's a section listing all events and the listeners associated with them. See pic related.

Attached: Screen Shot 2018-10-29 at 6.02.00 PM.png (1664x832, 602K)

>They pretty much expect me to be completely entry level
>entry level
This just means, pretty much, that don't have professional experience. Someone could be entry level even though they've been into web dev for 4 years, creating their own shit. You're pretty much fucked unless they're going to train you while you learn.

// special case for youtube
if(window.location.toString().indexOf('www.youtube.com') !== -1) {
window.addEventListener('yt-navigate-start', function (event) {
alert('jewish tricks');
event.stopPropagation();
}, true);

return;
}

Alert shows up, but the redirect does it's job anyways.
God, modern web makes me want to kill myself rather than use it.

fixed it, but still wanna kms

window.addEventListener('yt-navigate', function (event) {
event.preventDefault();
event.stopPropagation();
return false;
}, true);

I have a XAMPP webserver that I created today. I have one php file that runs perfectly and one that acts up. They are identical code files stored in the same directory but with different names.

I have attached a picture of the problem. Any help would go a long way. Thanks

Attached: Not-Working.png (1234x471, 68K)

This is the university webtech we're talking about, my friend who referred me said he knew absolutely nothing when he got the job. It's like a paid internship.
I just want to appear like someone who could pick it up quickly.

If you have access to the source code, grep it. For example, cd to the root directory of the project and run grep -rnw 'ID or code snippet' '.'

Pretty sure abstract classes can contain implementation details as opposed to interfaces. IIRC, you can implement multiple interfaces but you can only extend one class since there's no multiple inheritance in PHP, unless you count traits.

What if you rename home.php to something else, would it still work ?

I renamed home.php to index.php just there and it still wouldn't work.

The way I got phpinfo.php to work originally was I took the old php files from the XAMMP dashboard and added my new content

Still having the same problem though

It looks like it doesn't interpret PHP for whatever reason. It may have something to do with the opening tag, but I'm not sure. Maybe there are hidden characters that screw it up, like a different encoding or something. Try copying the

So I wrote a front end in react, set up a MySQL thing on my laptop, have a backend that does logic with flask.

Now what? How do I actually put it on the internet? Things have changed a lot from the last time I launched a site (2005).

Attached: 1522067326156.jpg (530x800, 77K)

namecheap or google domains.
hosting from digitial ocean or vultr. set up your server through SSH.
get nameserver from host, give it to your domain provider.