/wdg/ - Web Development General

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_95.jpg (1280x720, 108K)

Other urls found in this thread:

w3schools.com/tags/canvas_getimagedata.asp
humblebundle.com/books/web-programming-oreilly-books?hmb_source=navbar&hmb_medium=product_tile&hmb_campaign=tile_index_2
developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases
fading.blue
twitter.com/NSFWRedditGif

const generateIds = (i => () => i++)(0)

what does that do?

it's a Closure. it generates ids
> generateIds(0)
0
> generateIds(0)
1
> generateIds(0)
2
> generateIds(0)
3


it's the same as
var generateIds = function (i) {
return function () {
return i++;
};
}(0);

>(i => () => i++)(0)

Attached: 1537731050098.gif (275x275, 713K)

Gonna try and build a PWA using Go & React.
Go will be completely new to me, hopefully get the hang of it quite quickly.
Ditching PHP for performance benefits.

>Ditching PHP for performance benefits.
you don't know what you're talking about.

Repost since new thread

Is there any actual shame involved in just grabbing shit like navbars from sites like w3 and just copy pasting? It's been fun doing it myself and learning but it just feels unnecessary now

>go
>not using elixir

what did he mean by this

that I don't understand a single bit of that particular code, don't bother explaining btw, I'll get to arrow function and other fuckery one day

see

ok
>(0);

what does that even do there?

Reminder that silverlight is dead and that you need to stop using it

(i => whatever) creates a function that returns whatever with i as an input parameter
() => i++ creates a function that returns i++

(i => () => i++) creates a function that returns a function that returns i++

that's simple. it calls the function with 0 as an argument.
note that the function takes "i" as an argument, and then returns an increment of that "i".
the zero is just the initial id

stop posting this in every thread retard
no uses silver light

Sorry, another brainlet question incoming,
I get everything but the notify method. We didn't declare a sub function anywhere so how come this works?

class Dep {
constructor() {
this.subscribers = [];
}
depend() {
if (target && !this.subscribers.includes(target)) {
this.subscribers.push(target);
}
}
notify() {
this.subscribers.forEach(sub => sub());
}
}

so it's equivalent of calling the function like funcionname(0); ?

yes

thank you very much

I don't know what that code is, but sub is just the name of the variable that references the subscriber array items.
Instead of sub => sub(), you could use anything else here and it wouldn't make a difference.

can someone explain to me what does the following PHP code do? cant find the explanation anywhere
[ $a , $b ] = [ 1 , 2 ];

Yeah, but that confuses me, how can you just give it any name and make it a function without declaring it first?

I know the forEach function and that the first sub is the variable that represents each array item, however, the sub() is what confuses me yet it works.

I don't know PHP but I think it just declares two variables $a and $b with the values of 1 and 2 respectively.

the first argument of the function passed to forEach is the array item, which is then also called in this case (where the item is some object, that actually can be called)
myArray.forEach(arrayItem => arrayItem())

or to make it more detailed
myArray.forEach(function(item,index,array){
item()
})

Oh, now I get. So, an item can be called?
I had no idea, thank you!

depending on what it is.
In this case it seems to be an object representing a subscriber

so something like this
const subscriber = function(name){
this.name = name
return function(){
console.log("Hello "+name)
}
}
const allSubs = [new subscriber("user"),new subscriber("moot")]
allSubs.forEach(sub => sub())
// Hello user
// Hello moot

It's all crystal clear to me now.
Once again, thanks!

Today I did my js test, I was really nervous and I though I was gonna flop, but I did great, aspiring to 7 / 10, I even did a bit more thant the required I think, but needed an extra hour or half an hour at least to complete the last 3 points. All in all based and redpilled teacher even if she is into some ancient as fuck js.

Attached: Coligny_Calendar.jpg (4800x2904, 3.07M)

>teacher

You have tests in js..? What school has tests in syntax?

no you have to build some shit from scratch that's the test, she shows you a working example but not the code, and provides you with 2 or 3 methods you didn't know previously that help you achieve the functionality

sort of like a white board test, but a bit more complex and with 2 hours

What's the best e-commerce platform around?
I just want a payment intermediary + an interface to keep an eye on the website's performance, but that's about it.
Whenever I google for e-commerce platform I just get shilled the same big companies like woocommerce and magento which unironically sponsor articles saying they're the best

shopify

how old r u gayzor?

2 old, 2 fucking old, kill me, 32 already

if i kill you you'll never know how much did you score on the test

What was the task?

oh you are at some gay code academy doing tests?

one more hour then I get to go home

Is there a workaround to save a dirty canvas anyway as a blob?
The browser disallows it because of CORS, but my script runs through the console.
Is there a setting to allow it anyway? Or a different environment?

Another question tho
I wanna handmake my website - they're designed by an amazing team, I don't wanna use the standard templates.
Do all plaftorms allow me to upload custom website and integrate their payment intermediary inside my website? Unfortunatelly, once again, google only recommends me links for brainlets and I find it hard to find this "technical" informations

Attached: brain-teaser-number-maths-puzzles-brain-teasers-20624678595a8abeb0d64697.60737983.png (803x803, 87K)

I dunno what you mean with a "dirty canvas" but you can save your canvas using this w3schools.com/tags/canvas_getimagedata.asp

no, it's a proper "trade" in web dev, first year is generic year for everyone doing a computeer related field, it's pretty solid course, they push us fucking hard with homework though, and databases is fucking INSANE

build a turn based guess the word, introducing letters and displaying the letters that match in a row of inputs, displaying the errors in another input and entering the leters in a nother input, final part was to place another input in which you'd enter the word to guess in a password type input and that would just hide the extra inputs if the word was shorter than 12 characters and you'd just enter the characters in the enter characters input, but the displaying characters of the newly generated row wouldn't work for me just the 12 characters word statically chosen where you'd enter the characters and it would display the ones you guessed in the correct order in the inputs forming the word. She even made us do an incomplete tetris for a practice in class (not in the test), pretty cool shit

>no, it's a proper "trade" in web dev
i dont get it, u at university?

351?

How would you guys rate these books for someone who knows nothing about web development?
humblebundle.com/books/web-programming-oreilly-books?hmb_source=navbar&hmb_medium=product_tile&hmb_campaign=tile_index_2

lemon: 92
apple: 5

done in head, am i rite?

the lower tier below university, that's why we call it a "trade". It's 2 years, when uni is 4, but most people will get rekt and do it in like 3 years or so

My bad, the correct term would've been tainted.
Sadly getImageData is also blocked.
developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases

I have no access to the webserver or the ajax calls being made, so I need to get it from the canvas.

understood
what did u do before u started that since you are 32?

NEET life for 3 straight years, and before that work internships (shit tier web master and designer and video editor) for 2 years, and before that study multimedia at uni for 4 years

damn dude, i would've stayed with video editing
pretty much anything is better than this webdev cancer javascript ridden hell

how long have you webdeving?
6 months here and I want out
not even working full time
no wonder there's a million web frameworks in every language, every web developer just wants to do anything that is not making websites

problem was not even interviews as video editor, when I know how to special effects, illustration and animation, which was my passion, killed by the market and lazyness

it was killed by lazyness

'You don't know js' any good?

Around 10 years now.
Still like it.

ahahhahaah

and I agree, but fuckers wouldn't even give me an interview, what was I supposed to do?

Nearly two years professionally, even more if you count internship. Tbh, it's okay for hobby stuff, but I really don't feel like a full programmer half the time. Actually planning on teaching Japanese for a year and figure out heat I want to do next.

>but my script runs through the console
What do you mean through the console? What are you trying to do?

Redpill me on Symfony.

It's a melody

It's not my website, trying to scrape some images off some sites. A lot started using this canvas method to make it harder.
The images are coming scrambled from the server, some script puzzles it back together and draws it into a canvas.
Most are using some JS frameworks now and it's quite hard to figure out which part is responsible for what because of the hundreds of nested calls.

Through the console as in I just paste my script into the developer console and run it.

That would be a symphony.

How the fuck do i make my sites not look like shit?

Html? Piss easy, JS? Lmao baby shit, React? Cakewalk CSS? FUCKING HELL

Attached: 325352325.jpg (700x400, 93K)

Coming up with good designs is hard.
Hire someone to do it instead.

Once you have a good design it's easy to "convert" it into CSS.

i want to dance

You can dance if you want to

NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

jk

Use Materialize CSS

Vue niggas. I have a component here in a file called Register.vue:


Where I'd like the inputElements and customElements values to refer to these computed properties, in Register.vue:

computed: {
customElements() {
return formElements.filter(entry => entry.html);
},
inputElements() {
return formElements.filter(entry => !entry.html);
}
}


However I'm getting two identical "property or method x is not defined on the instance but referenced during render" errors for inputElements and customElements respectively. How do I pass computed props down as properties?

jsfiddle

whats formElements?
Are you sure it shouldn't be this.formElements ?

If I order a pending delete domain, is the whois creation date still in tact? Like if someone had it since 2001, and I successfully backordered it, will it still say 2001?

body
{
font-size: 0.95em;
line-height: 2;
margin: 0.9em 0;
letter-spacing: 0;
font-family: Verdana, arial, sans-serif;
font-size: 1em;
color: #222;
}

Attached: 1547874961720.jpg (1083x459, 44K)

Is there a difference for the performance required of clients to play ultra fast vs very slow/placebo encoded h264 videos ?
I can't seem to find any benchmarks that take a look at the minimum requirements to play a certain preset.

After 27 days, the whois record is deleted from their db, including the original creation date.

i'm very new to front-end, but i've been tasked with fixing some unit tests on a UI for work.

I have to check to ensure that a dropdown menu contains the correct elements/keys, but the menu itself is part of a library in my node_modules folder, and there's no css or html or anything native to the project itself that I can query to pull a nativeElement from.

Here's a chunk of code from when the menu wasn't a part of an eternal library's built in header/toolbar:

it('should get configured environment', (done => {
fixture.detectChanges();

fixture.whenStable().then(() => {
fixture.detectChanges();
de = fixture.debugElement.query(By.css('mat-menu-item-submenu-trigger'));
el = de.nativeElement;
let content = el.textContent;
expect(content).toContain("xxxx");
done();

that 'mat-menu-item' used to be the old variable array that contained what i should be checking for, but 'mat-menu-item' is the only new html i can find that's related to the dropdown and that isn't dynamically generated upon interaction. Is there any way to get around this? this is using jest, btw, and i apologize for any misused terms (i'm really only used to backend). also sorry to ask people to do my job for me, but i've been banging my head against the wall for a couple of days now

even this site looks better with this css

Attached: 1543031924468.jpg (940x876, 96K)

Does anyone here use prettier? Is it any good?

There seems to be a Chrome extension that adds "access-control-allow-origin: *" to all web responses. I think that should allow you to build a non-tainted canvas.

You set font size twice, which one did you mean? And it's weird to use em at the body level anyway.

imo 2 is too much line height; there's a happy medium between readable and compact around 1.6

Also consider not compressing your image to shit when you're trying to demonstrate how good your styles are.

I have a work issued 13" maxed out 2017 MPB but I want something for my own personal use.

I was thinking of maybe getting a 2015 macbook and maxing it out but I also kinda want a windows laptop. Does anyone here recommend any good laptops for webdev that's not a Macbook? I was thinking maybe a Dell XPS or maybe the Hp Spectre 360x which is a 2 in 1?

Obviously what makes a laptop good for webdev is screen quality imo. That's about the only real standard I think for shopping for a laptop for web dev

Stop using silverlight. It’s dead.

Thought about playing around with MERN but can't come up with anything to build with it

I want to create a small react app that dynamically creates static html with classes and attributes, I don't really know how else to explain it. Basically a sort of page builder like with wordpress but that allows you to copy the outputed clean html. I think I have an idea of how to do most of the stuff except the actual html output

Attached: 73.png (607x319, 51K)

Yes exactly. Go rather than a poorly designed hard to deploy meme language derived from a brazillian onions boy's college thesis.

pretty sure you can call a react components render method a certain may to get raw html from it or something

Attached: 100K-cpu.png (4031x2267, 276K)

>Both Go and Elixir can handle 100k requests, with Node.js choking at 25k
>But Go uses a fraction of the CPU utilization as Elixir

Oh no no Elixir and Node.js blown the fuck out

Attached: 100K-rps.png (4031x2267, 270K)

Anyone have an alternative to ELK for log aggregation? The stack seems nice enough but the memory requirements are a little too much to run in one VPS alongside my web application.

Had to dive in a react + redux (with java spring in the backend) with barely any exp , besides react and js.
It's such a fuckery , gotta change like 4 files to assign a function to a container (action , actiontype , reducer , container , component).
At least for comps you dont have to connect to the store and just work with the props.
Its confusing at first , but so worth it. Managing state is a breeze.

fading.blue

My progressive web app in php and js. It looks like an app if you add it to the home screen on iOS and on the desktop. The process is easy once you got the service worker in place
React and go are memes

39 bucks a month plus a percentage of your sales? That’s gonna be a hard pass for me, how do people accept this rape?

Video editing is one of the few jobs more tedious than web dev

Attached: 511A44F6-1509-4FCC-95EB-0821C33EF27D.jpg (4032x3024, 2.73M)

The "no file selected" breaks in other languages when it's longer. Its set to textOverflow : ellipsis i think , but it looks bad.
Also , style that upload file button dude , it sticks out so much.
The add to desktop thing is interesting , gotta check out PWA , i've only done native and hybrid.

>fading.blue
Frickin' noice m8

Elixir's memory/CPU usage is because it has a lot of additional features, phoenix (and ecto) by default will do a lot of caching and optimisations, for example in a typical go/express app you'd have 20ms requests every time, with phoenix you'd get a 20ms request followed by it being automatically cached and then 0ms from there.
If you add in redis, the memory usage would even out entirely I assume, but you'd have to be running redis.

It also obviously needs to run the entirety of BEAM, others don't have a VM to run.


At the end of the day I'd rather just use rails and get shit done in 1/50th the time by using gems and the huge stdlib, and years of maturity.
>implying your shitty todo/blog app needs to handle 25kreq/sec, let alone 100k