/wdg/ - Web Development General

Previous
>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.com
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: web.jpg (300x278, 22K)

Other urls found in this thread:

marketplace.visualstudio.com/search?target=VSCode&category=Linters&sortBy=Downloads
jsbin.com/gedaroduta/edit?js,output
jsbin.com/latecofiru/edit?js,output
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#Chaining
twitter.com/SFWRedditVideos

answering php related questions

>
but i needed that shit to expose all my undefs at least
is that not a point of a linter?

>mfw I introduced spiderman to /wdg/

Attached: 1527441579808.jpg (480x534, 30K)

I need the enforce company coding standards for our ASP.Net site in SCSS / LESS, is there something i can use e.g. a Visual Studio plugin for this?

marketplace.visualstudio.com/search?target=VSCode&category=Linters&sortBy=Downloads

Tell me about Java in web development, and about MongoDB, and PostgreSQL.

Attached: 1533399816962.png (774x809, 736K)

>mongodb deprecated "count" and replaced it with "estimatedDocumentCount"

ah yes I hate it when simple commands were possible to remember

elm and elixir guy checking in.
What's up, normies?

MongoDB is a monument to terrible engineering, don't use it.

To start off with it has three ways to access data, each cobbled together in a desperate attempt to patch up problems with the others, each broken in its own way, and each incompatible with the other two. And that's before you get to the (bad) performance and (poor) safety.

elm sucks dick. can't even sanely perform http requests in parallel and merge the results.

Cmd.batch?

that's not equal to a simple Promise.all. the results arrive at their own times, you can't wait until they're both ready and then get the joint result. it's probably doable in elm, but you have to fuck around with tasks, which is messy, and when you have an even more complicated use case you're just out of luck.

so shill mongo and harvest all that sweet insecure data?

>tfw you made a Celsius to Fahrenheit converter and it is just the darn coolest thing ever
jsbin.com/gedaroduta/edit?js,output

Everything is going to be okay, anons.

Attached: 20170424-4O1GHDF3vyAAcQfG8B1r.jpg (1280x1290, 119K)

as a js brainlet I'm impres'd

How did you learned js ES6? I'm constantly being mindfucked by it' sintax

How can I remove the event listener for click events if it was defined with a anonymous function?

give the anonymous function a name

there's a book called 'you don't know js' written by a puritan who swears you should always give a name to functions since that will help to see you from a stacktrace where something went wrong though I personally never do this

I know but I have no control over the page, it's a userscript, I can't just edit the function
so far I've tried:
element.parentNode.replaceChild(element.cloneNode(1), element;
and
element.outerHTML = element.outerHTML;
but it won't get rid of the event, it's added like this in the page itself
$("element").click(function(){
doshit()
return false;
});

this.removeEventListener('click', arguments.callee);

though it wont work in strict mode, also this binding rules need to apply as usual, make sure the calling site is binding the 'this' you need

Trying to make a fast glass absorption shader in three.js

Attached: gscreen.png (1074x667, 1.1M)

??? the other thread isn't even at bump limit

Serious question, can assembly be used for web development?

wow that looks nice. except for the edges lol.

try /3/ anyways

yeah edges would require much more work that I can give now

can't you just you output a clear fragment color if the ray does not intersect?

"dependencies": {
"babel-polyfill": "6.26.0",
"chalk": "2.4.1",
"compression": "1.7.2",
"cross-env": "5.2.0",
"express": "4.16.3",
"fontfaceobserver": "2.0.13",
"history": "4.7.2",
"hoist-non-react-statics": "2.5.5",
"immutable": "3.8.2",
"intl": "1.2.5",
"invariant": "2.2.4",
"ip": "1.1.5",
"lodash": "4.17.10",
"minimist": "1.2.0",
"prop-types": "15.6.1",
"react": "16.4.1",
"react-dom": "16.4.1",
"react-helmet": "5.2.0",
"react-intl": "2.4.0",
"react-loadable": "5.4.0",
"react-redux": "5.0.7",
"react-router-dom": "4.3.1",
"react-router-redux": "5.0.0-alpha.9",
"redux": "4.0.0",
"redux-immutable": "4.0.0",
}
/code]

there's no ray-intersections, the problem is rooted in a tecnique called depth peeling and in not having multisampled render buffers in webgl1
good try though

>fucked up tags
jesus christ user you really are a brainlet

what is yall's opinion on material-type inputs where only the bottom border is visible? I like the clean design but I'm afraid some users might find them too unintuitive

Attached: DtJwz.png (1520x816, 24K)

so I've got json objects I construct in my server (PHP), and I use them over the wire in my client code. how do I ensure that my client code is using those server objects correctly? do you use documentation, laying out how the json responses are formatted and how it should be used?

> do you use documentation, laying out how the json responses are formatted and how it should be used?
yes

I hate material design as it's currently used. But anyways, personal thing, it shouldn't be unintuitive for users, google uses it for all their forms and im sure people have come across them once.

any way to do text.split('\n') but ignore empty lines?

>not commenting the code so js brainlets can understand

okay, cuck

What is the purpose of a config file? Is it just for deployment-related settings? If I make an app that will never go into QA or production, is there a point in making one?

I would buy the fuck out of a statue like this.

Some concepts can be difficult to grasp, I agree; so if you're ever confused, just go to MDN, they have great examples and explanations. One big thing I can help you with is arrow functions.

// Arrow functions can be used to replace normal function declarations in **most** (read the end of the post) cases Ex:
const foo = function(bar) {
console.log(bar);
}

const foo = bar => console.log(bar);

// There are some features unique to arrow functions though, such as implicit returns if there are no curly brackets...

const foo = function(number) {
return bar * 2;
}
bar = foo(123);

const foo = number => number * 2;
bar = foo(123);

const foo = number => {
return number * 2;
};

// ...and the need to wrap parameters in parentheses only if there's more than one

const foo = bar => console.log(bar);
const foo = (bar, baz) => console.log(bar, baz);


I left out the fact that arrow functions aren't complete closures, since the value of , "this," doesn't change when using them, but they do maintain a lexical scope, so you can use them in higher order functions. Good luck, man, make sure you go over destructuring, spread and rest, and promises.

i have a web scraper that queries a few sources in async functions.
but I want to space out the queries so it's no more than 1 per second
how do i do this?

Put them all into a function which, instead of calling those functions it will use setTimeout and call them 1 by 1 every 1000ms.

> hurr durr I'm too dumb to understand elm
> therefore elm is bad
brainlets ruin everything

>can't provide a simple example of elm's equivalent for Promise.all([])
>calls other people brainlets

Assuming you're chaining them

async function timeString() { console.log(new Date().toTimeString());
}
function delay1s() { return new Promise(function(resolve, reject) {
setTimeout(() => resolve(), 1000);
});
};
timeString().then(delay1s).then(timeString).then(delay1s).then(timeString)

text.split("\n").filter(s => s.length > 0) ?

I'm trying to make something like a console in the DOM which prints out statements on a single line as progress on something reaches 100%.

jsbin.com/latecofiru/edit?js,output

Is there a way to have each timing event follow on after each other rather than all be run at the same time?

I'm trying to store some shit through the webstorage api. I store it like this, and it works:
var key = "_Whatever";
var value = false;
browser.storage.local.set({key: value}, function() {
console.log('Value is set to ' + value);
});
But when I try to recover it, and store it:
var out;
browser.storage.local.get([key], function(result) {
console.log(result.key);
out = result.key;
});
out and result.key are undefined. Why? And why is Javascript still allowed in 2010+8?

Apparently it gets the value from storage.local AFTER what I do with out:console.log(out)
Alright. So I did
browser.storage.local.get([key]).then((result) => {
console.log(result[key]);
out = result[key];
});
console.log("Out: " + out);

Out still undefined, result gets printed fine inside but after out. What the hell am I supposed to do to store the result outside?

>put it works
>host a Web server and do the same with Ajax by calling another link that returns the images previews links
>images not cached by the browser therefore not loaded
>the links fully works when you click them and get cached.
What should I add? What am I doing wrong?
t.front end brainlet.

Attached: help.jpg (348x354, 28K)

read your console to see what the error is, obviously

Storage API is asynchronous.
The value of result is only accessible in the scope of your then() callback.
Read up on promise n shiet

what do you guys think about laravel? seems to be the most popular framework to use right now.

it's atrocious. full of retarded design decisions, magic methods and tons of stuff going on behind the developer's back with no control over it, retarded import system (never know where a variable comes from), shitty documentation

but it still seems to be quite popular. Most php job applications in my region have it as a requirement.

it's popular, but so is Java.

thank you my man

Yeah, but what the hell. How am I supposed to change the value of a button, and a key in the browser storage, according to the latter value? It doesn't let me set something in a get call. What the fuck, writing in ASM is fucking easier.

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#Chaining
Alternatively async/await makes this a lot cleaner, depending on which browsers you have to support.

Thanks user, I don't know what exactly was the issue but I managed to get it working, before it wasn't storing properly in the get chain. I'm just not for webdev'ing and javascript, I guess.

Anyone know how to get the text to go in the space next to the picture, rather then below it? thanks! :)

Attached: dims.png (750x257, 80K)

try:
img{
float:left;
}
p:after{
float:none;
clear:both;
}

ehem, add
img{
display:block;
}

Going to sound like an idiot, but I am confused why the img is there, shouldnt I put the class of the image I am styling?

i.4cdn.org/g/1537715764840.png" />

Anyone know how to get the text to go in the space next to the picture, rather then below it? thanks! :)


div {
display: flex;
}

img {
flex: 0 750px;
}

span {
flex: 1;
}

Thanks guys! Ill try them out!

because the image has to float for the text to follow it, this way you send the image to the left and all content after it to the left as well, placing it right next to the right of the image, like if you have 3 elements, you float the first one and the second a nd third follow it, like so:
Element1 Elment 2 Element 3
If you want the element 1and two to be next to eachother but the element 3 to be in his own line you clear the float right after element 2 with:
element1{
float:left;
}
element2:after{
clear:both;
float:none;
}

so the elements will now be displayed as follows:
Element 1 Element2
Element3

You can float elements to the right and the left , google it

If you are starting a new web project, which technologies would you use, to make sure it's as scalable as possible?

And for the sake of the argument, let's assume, hypothetically, that your web platform will have 1 Billion users (and that they will all come along in a period of 6 months). And lets assume that the platform doesn't have much functionalities - so just simple user registering, and maybe allowing the users to do one thing, like post notes, or whatever.

How would you approach this?

Let's say you want to start a web development company in 2018. What language and framework do you pick? Is node.js going to die anytime soon?

btw, while you are it you should really learn what the buddy mentioned:
it's the new way of doing things, google gird and flex +CSS

Java or C# maybe? But you aren't gonna get 1 billion users so I wouldn't worry about performance right from the start.

>Is node.js going to die anytime soon?
Definitely not. I'm not sure what tech to pick for the backend since all the options seem a bit shitty in some way. Node is nice but surprisingly the ecosystem is not very idiot-proof. Stuff like Laravel is idiot-proof, but also extremely shitty. Same goes for databases, mysql is just crufty, but postgresql has less dev support. I say just pick something.

> But you aren't gonna get 1 billion users so I wouldn't worry about performance right from the start.
No, of course not, I am just interested in what scalability actually means.
That why I asked if, hypothetically, you need to endure an income of 1B users during the course of a couple of months, and you want make sure you stay operational during all that time, what to actually start with in the beginning, so you don't have to have major architectural changes at some point, potentially suffering user discontent because you badly designed your platform.
All hypothetically, of course

Tech doesn't matter, what matters is that you can scale horizontally which means don't lock yourself into having everything on one server, assume every request can be assigned to a random instance and should still work.

yes this is exactly what I wanted to know more about

You retarded cunt, you read my shitpost, obviously. No errors were reported. No nothing

Interesting, somebody like Google or Faceberg would know that best. Usually things have the chance to scale gradually so the ones with the knowledge are the ones who gradually got big.

Where does Twitter stand there, regarding the complexity of the platform and the effort to be scalable? It's got a lot of users, but rather few functionalities - just users posting short messages, sometimes with images in them. Did they have to deal with this in some special way, or just made sure that every request can be assigned to a random instance, as the previous poster said?

why can't my brain understand promises

Attached: 1528089019872.png (790x354, 24K)

Got a couple of questions to you guys, hope anyone wiser than me can help.
First, the short one, what MySQL GUI for Linux do you recommend? I've been using DBeaver but just wanted to know if I should consider something else.
Second, do any of you know a good templates websites for portfolios and personal (static) websites? A couple of friends want a website for their business and I thought it could be a good way for me to practice, show my work and save them some bucks.

Cool read if you're into books.
Obviously there's no answer to your question, it depends on many factors.

Attached: designing-data-intensive-applications-181800594.jpg (494x648, 63K)

Appreciate it!

how do I make my local website js free? currently the only js line I'm using is something to make all the links open in new tabs. I used js because I didn't want to add target="_blank" to every single link.. there isn't much to do here right..?

>how can I make it js free
>I only use one line of js and I already know what to replace it with
What kind of reply were you expecting here exactly?

How do I get a comfy fullstack dev job?

>comfy
>job
Pick one, unless you can manage to work remote in which case there's a small chance.

some black magic trickery

I require MOAR imputs on this

Attached: 1536407364675.png (478x456, 407K)

mongo is garbage, use mysql like a decent human

the teacher said it is good for extra specific queries and with massive data sets

//Replaces the user input in quill editor with something epic if he types "despacito"
//must be called by the (change) event of the ngx-quill-editor component
public onContentChanged({quill, html}) {
if (html.includes("despacito")) {
this.formGroup.controls.editorData_fr.patchValue("Ok now this is epic");
let mus = new Audio();
mus.src = "my.mixtape.moe/ekjazx.mp3" //This is the default dance sound
mus.load();
mus.play();
}
}

Attached: 1536520771498.jpg (396x263, 13K)

>java
Java is here to stay for server side enterprise development. Unmatched supply of high quality, open source libraries for anything related to web tech.
As client side applications grow in complexity, more and more business logic will move client side, but checks still have to be performed server side if you want any guarantee on data integrity.

>mongodb
Personally don't really see the point, most mainstream databases have some proprietary support for querying json blob at this point, so you can treat them as json stores and gradually move to a relational model as your application evolve. With mongo you're stuck with the document model and it's not a matter of if but of when your data becomes relational.

>postgresql
Gold standard for open source databases afaic. Sqlite for small applications and postgresql for more complex backend servers is pretty much all you need.

neat explanation, thx man that's what I'm going to study in my trade school

installing javac (notice javac not java) in fedora 27 from terminal anyone? without going to the webpage to download it first

Attached: 1518442603945.jpg (346x500, 59K)

sudo dnf install java-1.8.0-openjdk-devel
java-1.8.0-openjdk = jre
java-1.8.0-openjdk-devel = jdk
java-1.8.0-openjdk-headless = jre without the swing stuff, iirc

so dnf install on all of them right? I'm already logged in as root

openjdk-devel should be enough, it will put the dependencies it needs, if any. Pretty sure the jre headless is installed by default anyway.

it werkd thx my man

Attached: 1536700398093.jpg (400x324, 23K)

You can write a script that does a find and replace on all the links.

use notepad ++ there is replace all if you open the search tab