/wdg/ - Web Development General

inb4 some dumb april fools shit edition

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_spaceballs.jpg (640x480, 64K)

Other urls found in this thread:

flatpickr.js.org,
eonasdan.github.io/bootstrap-datetimepicker/,
pikaday.com/,
javascript.info/
eloquentjavascript.net/
stackoverflow.com/questions/9092762/why-is-my-onupgradeneeded-callback-never-called-when-connecting-to-indexeddb
redditinc.com/policies/privacy-policy
expressjs.com/)
npmjs.com/package/lowdb)
youtu.be/UmljXZIypDc
docs.npmjs.com/cli/link.html
doctrine-project.org/projects/doctrine-orm/en/latest/tutorials/pagination.html
stackoverflow.com/questions/15906051/doctrine2-paginator-getting-total-results
twitter.com/NSFWRedditImage

Like my post xD

Its not worth it

React is the only front end library you need

>react status: btfo
>angular status: btfo
>JS status: eternally btfo
stop using shitty JS frameworks that break on every update

Attached: 1554061380663.jpg (1599x868, 555K)

isn't that a desktop app?

that "blazorApp" doesn't look like a browser app

nw is a chromium instance and 'blazor' template is an asp core website with blazor frontend so the point is that it is easy as fuck to do anything using it.
No idea why the OP used nw though. maybe they wanted to piss off /dpt/

footer {
position: absolute;
bottom: 0;
width: 99%;
height: 5%;
text-align: center;
column-count: 3;
column-gap: 40px;
}

This is nice and all, but the columns aren't aligned to the same height, which looks weird. Is there a simple fix to this?

nvm, using columns for this is dumb.

Question(html, js):

How do make simple yet not ugly date time picker ? Is jquery necessary ? I heard bad things about jquery and dont really want to use it but can't find any tutorials without it.

Attached: d1.png (774x314, 49K)

Do you actually want to write your own picker?
Because there are various pickers that do not require JQuery
eg flatpickr.js.org, eonasdan.github.io/bootstrap-datetimepicker/, pikaday.com/, etc.

What are some good projects to do with MongoDB? Something that doesn't use too much relations, thought about a news site but those dont even need a database only a contentful CMS or some shit,

>inb4 MONGO SUCKS USE SQL

Already did, want to use more things

Attached: 1434214214.jpg (417x665, 47K)

I'm making a personal local website and I'd like to read/write from a json file. How do I go about this without having to set up a webserver?

Have you thought of having a child element with display grid in your footer?

I want to make a userscript that removes all tags that DON'T direct to I'm on, as a way to purge junk links.

Any ideas how? I'm using querySelectorAll right now.

jsfiddle?
jQuery isn't necessary for anything.
What exactly do you want from the date picker, that the default HTML input one doesn't give you? Just one that has a specific style or something that integrates well with a certain framework?
You can't interact with the local filesystem from a website like that.
Using Local Storage or Indexed DB might be your best option here.

How do you assert that all the configuration you have at the time of the deploy is proper? Do you unit test the configurations?

function removeA() {
var i;
var getA = document.querySelectorAll('a');
for (i = 0; i < getA.length; i++) {
if (getA[i].origin !== window.location.origin) {getA[i].remove()}
}}
removeA()

function removeP() {
var i;
var getP = document.querySelectorAll('img');
for (i = 0; i < getP.length; i++) {
if (getP[i].src !== window.location.origin) {getP[i].remove()}
}}
//removeP()
//broken for some reason, but I got all the adds with removeS() it looks like anyways

function removeV() {
var i;
var getV = document.querySelectorAll('video');
for (i = 0; i < getV.length; i++) {
if (getV[i].origin !== window.location.origin) {getV[i].remove()}
}}
removeV()

function removeS() {
var i;
var getS = document.querySelectorAll('script');
for (i = 0; i < getS.length; i++) {
if (getS[i].src !== window.location.origin) {getS[i].remove()}
}}
removeS()


function removeI() {
var i;
var getI = document.querySelectorAll('iframe');
for (i = 0; i < getI.length; i++) {
if (getI[i] !== document.querySelector('iframe#my_video_1')) {getI[i].remove()}
}}
removeI()


})();

Jow Forums X is bugged just fucking only posted what I had in my code brackets, BUT I had a long paragraph to go with that. Basically I asked how I could keep Disqus's iframe and JS in my if statements on removeS and removeI (one removes all scripts not from the site, the other removes all iframes outside of the video player area) so that I could keep the disqus comments while removing everything else not from the site. Here's my code.

function removeA() {
var i;
var getA = document.querySelectorAll('a');
for (i = 0; i < getA.length; i++) {
if (getA[i].origin !== window.location.origin) {getA[i].remove()}
}}
removeA()

function removeP() {
var i;
var getP = document.querySelectorAll('img');
for (i = 0; i < getP.length; i++) {
if (getP[i].src !== window.location.origin) {getP[i].remove()}
}}
//removeP()
//broken for some reason, but I got all the adds with removeS() it looks like anyways

function removeV() {
var i;
var getV = document.querySelectorAll('video');
for (i = 0; i < getV.length; i++) {
if (getV[i].origin !== window.location.origin) {getV[i].remove()}
}}
removeV()

function removeS() {
var i;
var getS = document.querySelectorAll('script');
for (i = 0; i < getS.length; i++) {
if (getS[i].src !== window.location.origin) {getS[i].remove()}
}}
removeS()


function removeI() {
var i;
var getI = document.querySelectorAll('iframe');
for (i = 0; i < getI.length; i++) {
if (getI[i] !== document.querySelector('iframe#my_video_1')) {getI[i].remove()}
}}
removeI()


})();

Yesterday I spend the whole day working around a solution that I thought wouldn't work.

Turns out, my initial solution was valid and can be accomplished in 10 minutes.

can't you also check the iframe src or what exactly is the issue?

How can I reach the Durga level of quality?

Attached: durgasoft.png (1584x751, 527K)

It's just something simple. I'm blocking all iframes that don't have the id #my_video_1, but I want to allow one more iframe from the origin of Disqus so I don't remove comments as well. Basically I'm nigrigging an adblock for a site that is against adblocks and crashes the video if you use ublock or adblock+

function removeI() {
var i;
var getI = document.querySelectorAll('iframe');
for (i = 0; i < getI.length; i++) {
if (getI[i] !== document.querySelector('iframe#my_video_1')) {getI[i].remove()}
}}
removeI()

it's kind of wasteful do repeat the same document.querySelector call on every comparison.
I would just make some kind of whitelist array (the iframe with that ID and the iframe with the Disqus origin) and then just kill all the other elements, that aren't whitelisted.

I always thought NagoorBabu Core Java was some kind of made up joke about Indian Java devs.

>2.4MB, 24k lines HTML doc
jeez

Attached: b.png (927x896, 75K)

>no dislike
Hirojewmoot sucks dick

Like Vue :DDD

Attached: vue.png (400x400, 3K)

Okay, I've figured everything out. I have a gallery object and a gallery items object (Doctrine ORM). I set them up to represent a gallery with images in it. I am able to get everything I need according to plan using innerJoin.

The call to the gallery is paginated and I can get the images inside the gallery through the ArrayCollection getter (which is not). Now, let's say I have 30 images inside the gallery, how the hell do I paginate that?

Can I do it inside the Gallery - GalleryItems relation, or should I get 10 images and then make a separate ajax call to get more of them? But why should I make the separate ajax call when all of the images are inside the ArrayCollection already. Can I paginate the ArrayCollection, or should I get all of the images and paginate them on client side, meaning, load them when I need them.

Sorry for not posting any code. My question is, how do I paginate an ArrayCollection that is nested inside an object using doctrine. I've found a function called paginate(1), but that one doesn't seem to work.

I'm working on a tiny web MMO project but coming from a purely programming background, all of this web stuff is new to me so I'm trying to plan out everything I'll need to learn. I've decided to go with LAMP since it's slightly more familiar to me, but I've been warned already that Node.JS/MongoDB is probably a better choice performance-wise.

The "game" is mostly just calls to an API that accesses a database with players' info and items. Basically, on the web page you would click "access inventory" which would make a call to the API which would grab your inventory as JSON and return it, which is then rendered on the page with javascript. When you click "go on quest", the API sends a request to the actual "World" server that stores player state and location (so multiple people on the same quest could passively give each other bonuses)

Pic related is a basic structure of the app I've come up with, but it seems too simple. Am I missing anything? I'm learning to use Docker so I can containerize & load balance everything (more just for experience, since it will just be me and some friends using this)

Attached: Capture.png (819x557, 24K)

Stackoverflow got me.

I googled my problem then was wondering what bullshit ass website I was on and how outdated the code to my problem would be.

Do you think we'll have native support for TypeScript in web browsers /wdg/? Microsoft tried to get JScript going back in the day, maybe now they have a winning hand.

from Quora

>Not a chance.

>First, TypeScript and JavaScript are fundamentally different things. There is no way to turn JS into TS by just “adding types.” As such, any engine would be necessarily tuned to TypeScript, along with a huge package of assumptions that don't apply to JavaScript. Browsers would thus need two separate engines for each language. The level of investment to make a browser fast is colossal. It is matched only by operating systems in complexity when talking about consumer-level software.

>If they were going to undertake such an immense task, they wouldn't bother with TypeScript at all, since it still has all of JavaScript's problems. They would instead choose a better language.

>Which is exactly what Google did with Dart. For a time, Chrome had a Dart engine planned for it, but this proved too much of a hassle for basically no benefit outside of escaping JavaScript. Instead, Google concentrated on a Dart-JavaScript transpiler.

>JavaScript will probably start to include some ideas from TS in the future, but not many. JS is proudly dynamic, TS is not. There's no way to resolve that conflict.

Say in PHP I have an field... How do I check what the user has typed inside that input box?

For example I only want to send the data if the user has typed "potato" in the field. But if they type anything else then just ignore it.

search for pattern matching with regex, or alternatively check if input String == "potato" no?

>if

Attached: index.jpg (550x366, 28K)

>mfw wanting to quote the post number but always clicking on the like button accidentally

well, seems alright so far.
I am sure things will become more clear and detailed once you started working on it.

Attached: whitepeopleface.png (364x458, 321K)

What's the best resource to fully learn javascript? No normie resources like java for dummies (unless they're actually legit).

same question over and over again

fuck off

liked

haven't used it, but the link in the OP seems good javascript.info/
If it's just purely syntax and algos, then I found sites like codewars and codesignal useful.
this free book is also often recommended but I haven't read it either: eloquentjavascript.net/
otherwise the "you dont know js" series for some more in-depth knowledge

But most important is to actually use JS and build things. If you do just that and aren't a retard when it comes to reading documentation, then that's pretty much the best thing to do imo.

Chrome says that onupgradeneeded is not seen, because request is undefined. I don't get why. Script in HMTL has attribute defer, so on load it should be initialized. Pls, help.

Attached: hacking4chan.png (475x255, 11K)

stackoverflow.com/questions/9092762/why-is-my-onupgradeneeded-callback-never-called-when-connecting-to-indexeddb

Thanks you. I thought that Chrome wouldn't be using any deprecated way of doing things and assumed that the way showed in Firefox tutorial will work on both Firefox and Chrome at least. Best wishes!

Of course post
was meant to answer to you.

all that code in your screenshot runs at once.
Line 15 won't wait till the window.onload event is triggered. You jsut define the onload event and then immediately try to access .onupgradeneeded, even though request is still undefined.
You should move the request.onupgradeneeded section into the window.onload block then.

Even if I wrote defer in script tag?
And what should I do if I don't want to move logic of entire IndexedDB into window.onload? What's the better way to do that?

I am trying to get into plotly.js and can't find a concrete answer on the question how plotly works under the hood. Is it mainly based on CSS, SVG or Canvas? Has anybody here experience with plotly? Many are recommending it for chart visualization but I am not sure yet.

I agree with this user. I actually learnt javascript through eloquentjavascript.net/ and it was great.

So I'm making a site which I want to market to people, and I figure I should include a notice like this on the register page. What do I actually do about these /wdg/?

Attached: notice.png (786x82, 14K)

did you finish the entire book or just part of it,I myself am on chapter 14 currently.

redditinc.com/policies/privacy-policy

I didn't finish the last 4 chapters because I thought I had already learnt that on my own before.

>You can't interact with the local filesystem from a website like that.
I've set up a webserver now and I could probably just use PHP since it's easy, but if I wanted to do it with either JS (server-side) or Python, how would I go about it? Is it worth it to use something like Django on a small project like this?

I wasn't planning on anything more complicated than making a simple form to store websites into a json file where I can also retrieve the sites in order to display them on a page.

Can someone walk me through the process of creating a site for tech illiterate people? How do i make them able to add/delete/change content from the site? Do i create pages for this that are only accesible with special credentials (like a login/password i make for the owners of the site) or what to do

Attached: 397885665632624.jpg (753x504, 47K)

the easiest way is wordpress

Yeah but fuck WordPress

Is it a too lazy solution to have the image path of the original file in the database and not the path to the thumbnail?

Basically, I have the thumbnails in the image path + "/thumbnails", figured I could not modify the already existing database structure and just add imagePath/thumbnails/filename.jpg to my JavaScript code.

It would save me 15 minutes.

building a frontend for my golang backend

thought I would use react but I want a css framework that doesn't look like the usual materialize/bootstrappy shit, something more stylish or unique/edgy, does a good one exist?

Attached: golang.jpg (840x593, 97K)

the language really shouldn't matter that much
> if I wanted to do it with either JS (server-side) or Python, how would I go about it?
for JS you would usually use something like Express to create a small API you can call from your website. (expressjs.com/)
To read from and write to JSON files as a kind of budget DB, lowdb is very convenient. (npmjs.com/package/lowdb)
>to store websites into a json file
what do you mean exactly though?
I wouldn't store whole websites in a JSON file, that doesn't seem like a good use case.

I am not sure here, but do you actually have to wait for the load event to be able to access indexedDB?
Have you tried just defining your request variable directly?

if (!$_POST['potato']) {
// do stuff
}

>what do you mean exactly though?
Relax, lol. I thought about maybe doing iframes for some of them, but I wasn't really thinking more than site address, name, and maybe an image (optional). There would be no point in actually storing entire websites.

fuck i am stupid
if ($_POST['potato'] != 'fuck) {
// do stuff
}

Bulma CSS

Best video course for learning Go for web dev? Any comparable to the quality of Laracasts?

Guys what is a neat way of injecting common dependencies? I can implement dependency class as a singleton or I also can just inject common class into every class that needs it

I'm a webdev noob but I got hired anyways
My boss just sent me a single .xml file and told me it was a website someone asked to reupload. Is this right? is a single .xml file enough for a website that isn't utter shit?

wtf i love erlang now

Attached: scaling.png (220x185, 5K)

maybe it's an april fools joke

How is the "Like" system implemented?

I hope it isn't
Is it possible tho? Maybe if it's text only or something? He said it was a blog about some lad's ramblings, I thought we'd need at least half a dozen files + a database for that but maybe not?

lol

elixir rocks amirite

Thanks anons, I'll get cracking on all those

Like this

Oh u

what does the content of the file look like?
Highly unlikely though, unless you have some kind of server setup that accepts XML files for some reason and turns them into websites?
You really should ask your boss, not random people here.

my boss just found this lad and said we could do it, he's not a programmer lmao
Also I got hired with 0 knowledge and learned 95% of it itt

What's the current best way to do CSS with React sites/apps? After going through some React tutorials it seems there are a lot of different ways (radium, emotion, styled components, css modules) but some of these guides are older than others. It seems like CSS modules is the best way and has no downsides, is that what new projects should be using now?

How did this happen? Why is gutenberg/block editor so completely different to the good ole wordpress? It's like they're from different planets.

I don't understand what the point of the wp.hooks system is. There's no examples, and what traditionally happened through hooks seems to be replaced by wp.data.subscribe. How do I even access my the options I'd access with get_options in php, from the javascript side? Localizing the script? What in the world is going on? Have the gutenberg devs not use wordpress or something? Or am I just an idiot?

can anyone give me a quick rundown on server side vs client side rendering? is it rood to send stuff to be rendered client side or is it expected?
Specifically, I mean stuff like some react-made transitions and shit

You can only became a Rockstar React Developer™ if you do client side rendering like all the cool kids nowadays

>there are various pickers that do not require JQuery
>two of the ones you posted use jQuery
Come on user

thanks senpai

Because they thought making PHP devs start being experts in ES6 JS was a great idea

I'm and have had some fun using Django by following this tutorial:
youtu.be/UmljXZIypDc

Should be tech illiterate friendly, but you should probably also know some HTML and CSS. Maybe also some JS. For that I'd recommend just following the mozilla dev links in the OP.

I need some css advice. How can I align this two rows ? One is called grid-container and the other one is grid-container-info

pic related

Attached: grid-containers.png (1135x35, 8K)

>is it rood to send stuff to be rendered client side or is it expected?
I'd rather have my page rendered clientside, than to wait for a server response every time I click something

display: flex; flex-direction: row; on the parent
flex: 1; on the children

Or just use a table

>or just use a table
for table things use tables tbqh, it's even recomended by SEO and it'll save you loads of headaches

I have a repo that is properly hot reloading JS and CSS, and I going with a new approach of putting our CSS on a second repo so it can be used by other projects.

But I would like to mantain hot reloading working on the dev environment while changing the CSS repo. It works if I copy the content from the CSS repo folder into the node_modules of the main repo folder. But I'm not sure this is a good approach. I would add a watcher to copy things from one folder into the other, for the development environment.

What do you think?

>I copy the content from the CSS repo folder into the node_modules
You do what now

I need to build a cloud web based interactive database that will use a ranking and comparision system.

I have prior knowledge of Matlab, VBA and html.
What would be the best way of going about this project? Shoud I learn Javascript and mysql? Or should I go about this some other way?

It works if I do it, it's not my workflow. I still have everything at the same repo.

if it's a web based application, then you probably want JS anyway.
JS and mysql is fine, but there are really a dozen ways you could go about it and few of them would be 'wrong'.
What kind of data are you going to store in the DB?♦️

I guess what I'm looking for is npm-link docs.npmjs.com/cli/link.html

Oh look, Doctrine shits the bed (returns only one result) when I perform a query that has a OneToMany and ManyToOne relationship that has more than one item on the Many side.

Give me a fucking break.

Attached: SLat401.png (995x718, 420K)

would i have a problem sending requests from multiple processes on the same computer to the same API endpoint on a remote computer? would i have a problem with multiple processes on the same computer trying to edit a database that is also on the same computer?

pic related

Attached: 60818c8931a4a1d311ce153962e44d30.png (956x540, 43K)

>would i have a problem sending requests from multiple processes on the same computer to the same API endpoint on a remote computer?
no, that's what the API is for. That everyone can send requests to it.
>would i have a problem with multiple processes on the same computer trying to edit a database that is also on the same computer?
uh, depends on the database I think. They probably shouldn't all have their own DB process, but talk to a single DB instance, that manages the access.
I don't know how all the different databases to it, but obviously there are solutions for different processes to interact with the same database without things getting corrupted.

doctrine-project.org/projects/doctrine-orm/en/latest/tutorials/pagination.html

if someone is wondering how to fix it or encounters it in the future, this helps too:

stackoverflow.com/questions/15906051/doctrine2-paginator-getting-total-results

I feel like I've run into every single doctrine error up until this point

so should i do #1 then?

Attached: design notes.png (1680x3000, 309K)

wtf man

anyway, I think in that graphic, the shards should be the API and the API should be a kind of load balancer.
What are you even building that it has to scale that crazy?

So my noobish guess is that multiple Clients connect to a Load Balancer, get assigned to a specific API-Bot-Shard which then connects to a dedicated DB-Server
And the DB-Server you can shard again I think if it's really necessary. At least that's how it can work with Couchbase for example as far as I know.

Or just do some cloud shenanigans on AWS or Google Cloud, which pretty much takes care of the scalable infrastructure for you.