/wdg/ - Web Development General

>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

Other urls found in this thread:

developer.chrome.com/apps/match_patterns
login.microsoftonline.com/common/discovery/v2.0/keys
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
pastebin.com/affnXMC3
pastebin.com/5xx1vjbA
docs.google.com/document/d/1WZH-b9PGbb7gdMYRhA65-Yn3oJvI8iAyZ_wz-weK9Yw/edit?usp=sharing
discord.gg/qsWAxsP
codepen.io/user/pen/zERdod
twitter.com/NSFWRedditVideo

what's the most secure way on implementing username/password protected pages in PHP/MySQL?

I'm creating an extension, and need a regex to match every url a person may visit.

Matching a single url via manifest.json:

"match": ["*://*.google.com/*"],
"js": ["script.js"]


Which will then run my script when google.com is visited. I want the script to run on all page visits. Can I just use the asterisk, like so:

"match": ["*://*/*"],
"js": ["script.js"]


Or something in a similar manner?

Thanks, Sup Forumseniuses!

Did you try "*" ?

Don't. Do. It. Yourself.

That's how you do it. Find some library that does it for you.

huh?

Not sure if that will actually work, but I guess I'll keep guessing shit. Search results weren't really helpful, either.

is it vitally important to learn the basics of OOP programming before getting into webdev?

Actually, according to this:
developer.chrome.com/apps/match_patterns
You should just use:
""

Oh, shit. Thank you very much, user, I appreciate it! :)

no
will it help? yes

no way, jose. oop is a dying trend. functional programming is taking the lead.

of course, it doesn't hurt to know what oop is, i.e. oop 101

>OOP
>FP
>mutually exclusive

U wot m8?

You should learn how to manipulate the DOM using JavaScript before OOP I'd say.

Ok which part is the key to verify the JWT?

login.microsoftonline.com/common/discovery/v2.0/keys

My 'kid' matches the top one.

I feel like I could spoof these...

Getting back into JS priogramming.

QUESTION:

I got a series of articles. For example


[{title: "Trump tweets in the morning", subtitle:"The world astonished once again!", date:"06/10", author:"Dan Berg"}, {title:"Taliban wants to ban PHP", subtitle: "The Gharqad tree of programming", date:"06/10", author:"Anonymous"} ... ]


AND SO ON

I want to return an array with only all titles and subtitles. [{title:'A', subtitle:'a'} ... and so on]

What's the BEST way to do this? Good, smooth one liner wanted.

Parse the json. For loop through it. Push title into temp array then subtitle into temp array. Push temp array into main array. Reset temp array. Return main array after for loop.

>Parse the json
>temp array
wtf

just use .map()
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Wtf yourself. Map is shorter but most likely takes longer to execute.

>Map is shorter but most likely takes longer to execute.
nice premature optimization

>oop is a dying trend
"no"

wat nao?

How is that even possible? Map does the same thing but takes more steps to get there.

I made a fool of myself on SO and now my answer is tormenting me. Should I delete it or let it stay?

learn from your mistake and let others learn from it too

Imperative will be faster for smaller arrays. This looks like Chrome running code optimizations.

I guess I'll have to. But the answer has been keeping me awake at night for a week. It makes me want to abandon internet and go on a deserted island where I'll never have to see the idiocy that has been engraved for eternity and signed by my name for others to see.

yeah well, then just do a for...of loop.
.map is clearer in reflecting the intended action and that doesn't seem like a particularly performance critical piece of code.

wtf in relation to exactly what I quoted
there was no talk of JSON or parsing anything and that user just wanted an array as output. No "temp array", "write to main", etc.

...

that was firefox before. here's chrome. loop is only faster for small arrays where it takes like 1 milisecond anyway so who gives a fuck
conclusion: just write clean code and only optimize after you've noticed that some part of the code is too slow

i have a bunch of moving divs (50% border-radius) with varying blur filter applied and get these thin line artifacts on Chrome.
FF renders ok.

Anyone know whats going on or how to fix this?

Its almost 2018.
Is it safe to use flexbox? Is it supported?

is this 2014 or something? bro, flexbox is widely supported. people are already using grid.

Can you explain what {a, b, ...rest} does in 1 short sentence?

can anybody help me understand why my getters don't work in PHP?


Class with getters
pastebin.com/affnXMC3

Class I'm trying to implement them in
pastebin.com/5xx1vjbA

Programmers are not supposed to call __constructor directly.
Also, you cannot convert an object into a string without a __toString() declaration

holy shit I'm an idiot fixed*

left off a set of ()

I have a __toString() that's how I'm printing what I have now

__constructor is what is generated when you have phpstorm auto generate your constructor

Should I rename __construct to buildCourse?

well the getter on test works but not the one in the schedule

Sorry, I didn't saw the __toString() declaration.
This would be the correct way to create an object based on a class declaration:

$course1 = new Course("Server Side Web Programming", "2910", "201", "Desjardins",
"M-W", "5:00pm", "6:50pm");

this is what I'm getting now

the one column is due to my __toString

my code is currently just this
$myString .="
{$course}"

but i'm trying to put it under the different headings using this

$myString .="
{$course->getCourseName()}
{$course->getCourseNumber()}
{$course->getSectionNumber()}
{$course->getInstructor()}
{$course->getDays()}
{$course->getStartTime()}
{$course->getEndTime()}";

Function interpolation does not work inside strings, I'm afraid.
If you want clean code (free of string concatenation), use a templating engine.

cucked again, thanks anyways user

I'm probably just going to make some Variables equal to the fields I need them have them echo to print in the format I need them.

> obj = {a: 3, b: 2, c: 1, d: 0}
Object { a: 3, b: 2, c: 1, d: 0 }
> let {a, b, ...rest} = obj
> a
3
> b
2
> rest
Object { c: 1, d: 0 }

that's p cool m8, make a code-pen?

The explanation about parameter destructuring in functions is missing. If you know your ways with ES6 it is cool, otherwise I would be patient with others.
Also, how many apps have lists with more than 100 contacts? :^)

Well, people at least weren't repulsed by the idea, so I guess I'll make the pitch here regarding the pro bono project from the previous thread. Maybe someone will get interested.

I'm looking for people who'd be interested in doing pro bono work for a relatively interesting project in their free time.

It's a community-based project aimed at creating a perfect website for a niche hobby (questing).
We've already managed to attract several cool programmers, have a clear image of what we need from the feature and technical standpoint. We are, however, a bit it short on frontend people, but any help on the backend would be appreciated as well.
Keywords: Cassandra, gRPC, java, html, js, css, node.js. If you have experience or want to get some learning and working with this stuff, welcome aboard!

So if you are interested, the design socument with more detailed info can be found here:
docs.google.com/document/d/1WZH-b9PGbb7gdMYRhA65-Yn3oJvI8iAyZ_wz-weK9Yw/edit?usp=sharing
And the project's discord server for coordination here:
discord.gg/qsWAxsP

I'm into web dev but progress is very slow. I want to have a job now. Just venting /wdg/, just wishing I had a job right now so I could move out from my parents' place...

it takes time my friend. though to be honest you could be doing any job right now to earn some cash and move out by yourself. I worked in bars since I was like 19, the same year i moved out

please don't use that image ever again

>JavaScript allows for dynamic typing, meaning variables can hold values of any type without any type enforcement.
Seems like a bad practice to me.

posting random weeaboo images is bad practice

I don't really have time to take up 'any job' any more, I'm 25.

So what's the deal with Java? why does it seem to get so much hate? is it just my autism picking up meaningless shitposting on the internet or are their some serious flaws with it, I should know about?

If I put my php site for a school project with a horrible file structure and security methods from a textbook published in 2011 online, will my database get destroyed by hackers?

Nope. But be sure to post the link here when you've uploaded it. I'll make sure nobody fucks your shit up.

JS part is a bit all over the place since I was nonstop tweaking things
codepen.io/user/pen/zERdod

Thought I would replace the orbs with some underwater bacteria looking things, slowly floating around... some calm music in the background. You get the idea

> be me starting to learn java
> need to create a basic java app that accepts user input and outputs some results
> have to import a library just to accept user input
> then have to create an object to actually accept user input
> have to specify what type of data is coming up next from the user
> have to clear the scanner before switching from receiving int inputs to string inputs
> user input still get eaten due to the scanner being so picky

At least C# fixed this mess with the console read and write methods

>codepen.io/user/pen/zERdod
raping my cpu lmao
is it just looping as fast as it can, or is it limited?
also I have no idea why it's got those fuzzy edges

Sure thing, I'll post my database username and password for you guys too

>cpu 97%
Absolute S T A T E of browsers. I don't understand how people can develop software that can render ten things before your computer melts and feel like they did a good job.

Not that user, but that's really nice! I like it.

Pretty cool user. How are your html canvas skills so far?

at the start it's doing some intense work, but after that it's just creating floaters every 4 seconds + CSS animations for the 60-80 or so divs.

lel, sry about the cpu.
I know on webkit even translate transforms trigger layout recalculation, which normally should be avoided, but what else is there to move elements around.
I use an i7-3770k and see my cpu% in chrome at 2-3% with that pen open.
So no idea why it's so high for you.. would fix it if I knew.

dont really have experience with canvas. I looked up some benchmarks of css animations vs canvas before doing this and css seemed to be a bit faster in general. Since I just move simple shapes around I went with that.

what's the superior operating system enviroment for web dev?

Linux or Mac OS?

damn bro im in the same exact position, except that i'm one year younger. Fucking university didnt teach me to code for shit, now i gotta do it all on my own, so now im broke and stuck with my parents

you can check the console.. numbers in there are the amount of existing floater divs. This should be 60-80.
I guess it's different on 4k screens or something ??
Then it would surely kill performance.
Haven't taken many other screen configurations into consideration.

>lel, sry about the cpu.
It's not your fault mate, it's the shit cunts who are delusional enough to think their browsers are world class tech when all they really are are world class examples of development hell and feature bloat. But it's okay, because while my CPU is screaming and overheating in my little laptop the people who caused this are helping womyns fight the patriarchy or some shit. Being part of that just makes me feel warm inside.... or maybe it's the 70c CPU on my fucking lap.

I fucking hate the modern internet.

takes about 20% of my CPU but goddamn that looks neat

>60-80
That's nothing. Any modern renderer should be able to render thousands of circles without issue on a laptop as shit as mine, I know this because I've managed to render 180,000 cubes on screen at 30fps. I'm not exactly adept at rendering technologies either. So these companies that are swimming in money have no fucking excuse for the shite they release, it's disgraceful.
>60 circles
>97% cpu usage

Modern browsers are like Windows - built on top of decades of bollocks. Nobody can be arsed redesigning it so they just keep adding nonsense to it and hoping they can keep passing off what they're doing as a good thing.

lodash
const data = [{title: "Trump tweets in the morning", subtitle:"The world astonished once again!", date:"06/10", author:"Dan Berg"}, {title:"Taliban wants to ban PHP", subtitle: "The Gharqad tree of programming", date:"06/10", author:"Anonymous"} ... ]

const reducedData = _.flatMap(data, (a)=>{return {title:a.title, subtitle:a.subtitle})


This solution still parses the data and loops through it but uses the lodash util library and modern JS to do so beautifully

if you enable ES6 its even nicer
const data = [{title: "Trump tweets in the morning", subtitle:"The world astonished once again!", date:"06/10", author:"Dan Berg"}, {title:"Taliban wants to ban PHP", subtitle: "The Gharqad tree of programming", date:"06/10", author:"Anonymous"} ... ]
const reducedData = _.flatMap(data, {title, subtitle} =>{title, subtitle})

same situation and same age. we'll get there user, start doing some silly projects here and there and fill those green squares on github. it takes a few months for most people until they get a job.

You guys have it better than I did.
I live in London and had to work an internship 9-5 weekdays and then work double shifts as a motorcycle delivery driver on the weekends. 0 days off for 6 months.

This was 5 years ago though. Now I have 8 years development experience and can walk into a webdev job the next day.

Kinda nice, but I knew the struggle.
What im saying is, there is light at the end of the tunnel and be thankful you aren't in a worse situation

It moves the floaters from one side to the other and once they reached the end they are deleted.
I wasn't sure how hi-dpi works with html-elements and css animations. Whether the reported wrapper width gets automatically normalized or not... ?
If the screen is much much wider than 1920px, then there are probably more floaters on screen than intended since their movement speed is kinda set by pixels/sec.
Once I have good values figured out for everything I will make sure nothing is pixel-hardcoded and go relative to the size of the container instead.

Which one are you Sup Forums?

class Module {
constructor() {
this.something = document.querySelector('.something');
this._something();
}

_something() {

}
}

new Module();


const Module = (() => {
var something = 'something';

function _something() {

}

function init() {

}

return {
init
}

})();

Module.init();

Sounds very tedious, I can certainly understand why people woulda system like that. Any recommendations for a beginner? what makes C# special?

Anyone know Azure and OpenID connect?

Why can I only get user info on people in my Azure app that are tenants?

Im trying to get the email address of people that sign in to openid with a microsoft account like office365.

It just does nothing unless I use my azure account.

How can I just let people sign on with office365

I need a full stack web development course that isn't mind numbingly boring. Colt Steele's course is just becoming a code-along.

> Colt Steele's course is just becoming a code-along.

I'm glad that I'm not the only one that thinks that. I have no idea why his course is praised so much.

> have to import a library just to accept user input
> then have to create an object to actually accept user input
oy vey. two lines of code, that's unacceptable

> have to specify what type of data is coming up next from the user
yes, it's a typed language

> have to clear the scanner before switching from receiving int inputs to string inputs
> user input still get eaten due to the scanner being so picky
doesn't ring a bell. you must be doing something wrong

Do I finish my FCC first or my You Don't Know JS book?

Frontend is suffering

~8-10% cpu usage on a Ryzen 1600 with some other "intensive" tabs open (twitch + chat)

ignore the toasters

Well, by definition modules group class and function declarations. So...

you're supposed to try to do it yourself ahead of him, even if it's just a bit. i was paused the videos and looked at the docs before the code along to have an idea what to do before he says it.

always*

=3= if you haven't shipped something before finishing the book it's a bad book

So, after diving balls deep without a lifejacket into web dev because muh needs of the workplace, I found myself wit ha perplexing problem.

How the fuck do you know what are the correct CSS parameters for an element?
Is this what goes on in the average web developer's mind?
>Mmmh, this polymer element needs a box-sizing: border-box
>Now width: 100%
>Let's leave height to be default.
>Nice.

Is there a more rigorous way to develop the styles of an element than "I do what I feel"?
Some kind of decision tree that covers your ass and tells you what you might need in a given use case, and what you definitely do not need?

You want everyone visiting his website to think they have early stage cataracts?

Microsoft edge 20%, eat shit weblords

So i have
src/Middle/Checking.php
namespace Src\Middle;

use Src\DB\DatabaseConnector;
use Src\Helpers\DBQ;

class Checking
{

private function __construct()
{}

...

in root directory i have test.php


require __DIR__ . '/vendor/autoload.php';

\Src\Check\Checking::checkIfIsBanned(123);


composer.json looks like

{
"autoload": {
"psr-4": {
"Src\\": "/src/"
}
}
}


so when i start test.php i get that checking does not exist
what am i missing boys
>i did dump-autoload

Can you make money off web development as a side job/freelancer?

No, its forbidden

Two changes:
- Use App or something like that, instead of the Src namespace. You don't need to rename the src/ directory.
- \[namespace]\Middle\Checking::checkIfIsBanned(123);

Guys I'm having issues understanding what should be the simplest shit. Random lady hired me to make her a wordpress site for one of her iPage domains.

She already has one blog hosted with wp installed but apparently I need to download wp and web hosting software on my laptop. Do people host the site on their computers just to test? Why can't I just use the web based install that already exists?

Sorry for the stupid questions but I left engineering to do management for a while and now this is blowing my fucking mind.

Amateur webdev here.

I'm JUST starting with JS right now, and am trying to make a super simple thing. Everytime I load this HTML document with the following .js attached, nothing happens. I checked the console and it keeps telling me "Uncaught SyntaxError: missing )after argument list" on .js 7

What the FUCK am I doing wrong here?

var firstName = prompt("Please enter your name");
var lastName = prompt("Please enter your last name");
var age = prompt("Please enter your age");
var fullName = firstName + " " + lastName
console.log("You are " + fullName);
console.log("and you are " + age " years old.");

I can't figure out where the fuck it keeps throwing an error. Did i do something stupid? I swear I've read this script 1000x over

maybe a semicolon but I'm not an expert

You need a semicolon after the "var fullName" line.

is there something to space up git uploads over a couple days so it looks like you are doing it every day instead of all in one day?