/wdg/ - Web Development General

lazy fucks not making threads and only eager to shitpost
this is probably the worst general on Sup Forums
Even that thread about literally wrist-watches probably has more posters
>hurrrr how do I flexbox
>hurrr I learned HTML and jQuery, what now?
>hurrr whats MDN, whats a google?
>user can you please google for me?
>retards shilling their discord server and splitting up the thread even further
like half of these threads don't even make it to 310 and just die in the night

>Previous Thread
>Free 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)
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
freecodecamp.com/
codecademy.com/
bento.io/

>Further resources
github.com/iRaul/awesome-portfolios - Portfolio examples
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:

community.nightdev.com/t/kapchat-only-want-subscribers-displayed-on-stream/7930
jsfiddle.net/16xohwzp/
github.com/istarkov/google-map-clustering-example
appendto.com/2017/01/google-maps-in-react-redux-interactivity-across-different-components/
stackoverflow.com/questions/44390123/react-google-maps-markerclusterer-multiple-markers-at-same-location
github.com/googlemaps/js-marker-clusterer
developer.mozilla.org/en-US/docs/Web/API/Document/enableStyleSheetsForSet
github.com/AzuraCast/AzuraCast
hastebin.com/uhamedequb.pl
hastebin.com/dizigejapa.http
getbootstrap.com/docs/4.0/components/list-group/#javascript-behavior),
getbootstrap.com/docs/4.0/components/collapse/#example
developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
reactjs.org/docs/components-and-props.html#functional-and-class-components
w3schools.com/jsref/prop_node_nodename.asp
github.com/jquery/sizzle/blob/master/src/sizzle.js#L125
twitter.com/NSFWRedditVideo

Fpbp

I wrote up a SQL database design plan for my website but instead of making one like a normal person I just wrote up all the columns and tables basically.

How do I actually implement this?

set up a db server and build the tables? If they have relations make sure you're using a relational db

I mean in my Java code...and SQL is relational.

Can you help me here?
>
Basically, I want to show only one user in that line.
Editing CSS in Kapchat (yes, I don't know CSS)
community.nightdev.com/t/kapchat-only-want-subscribers-displayed-on-stream/7930
I want the opposite of that, tried :not()
.chat_line[data-nick=:not("username")] {
display: none;
}

but doesn't work ;_;

What is a good beginner-ish web app to make? I want to do it in Angular2, and i just finished a basic task-list app. Dunno where to go from here though.

user who has been asking for help for days with his final project. If anyone has any experience with using google map marker clustering and knows how to implement it please help me.

I have to present my project to everyone on Friday and right now it's nothing but a some divs. Alternatively if anyone can point me to some resources that basically hold your hand on setting up googlemap marker clustering for react using redux please direct me there.

install a SQL server and make the db files

What software do you use?

I said in the old thread I'm using adobe dreamweaver and people asked if it's a bait. I don't understand why this could be a bait but ok, it isn't a bait, the software license expired and I don't have money or crack to it, so what do you use?
I read good recommendations about notepad ++.

Extend what you already did, by adding a due date to the task and when it's only 1 hour until the date is due, send an email to the person alerting him/her.

think the not has to go before the attribute like this
jsfiddle.net/16xohwzp/
something involving a backend is interesting for learning purposes.
Like a simple chat app, where the backend forwards messages to other clients via sockets or something like that.
Tried freelance sites? Upwork, etc.
because wysiwyg editors never let you create stuff to your full potential.
Any editor you commonly see will do. VS Code is good, but other people like Atom, Sublime or whatever else.

yea i tried hackhands. Blew a shit ton of cash and got almost nowhere. If any anons want to look at my code please let me know. I'll take any help I can get honestly.

I'm googling to figure out what to do but really can't get anywhere. I was close earlier today but it all got fucked up now.

maybe this:

github.com/istarkov/google-map-clustering-example

?

or maybe this:

appendto.com/2017/01/google-maps-in-react-redux-interactivity-across-different-components/

yea that's pretty much exactly what i have in my code right now and I have my long and lat coordinates as well for all markers I want to render. The problem is that I need to get them into the map component and I'm not sure how. Also i have no clue how to work react-compose.

I think I'm pretty dang close but I just can't make some connections

search everywhere for your problem:

stackoverflow.com/questions/44390123/react-google-maps-markerclusterer-multiple-markers-at-same-location

stackoverflow has a section on the right side "related" that has question that might help with your problem

this one is pure JS i think

github.com/googlemaps/js-marker-clusterer

i saw that but not sure what to think of it.
maybe I just worded my problem incorrectly but I don't think those related questions are relevant. I'm rendering out my map and even got it to start at my desired location. At this point it's all about importing the coordinates and setting them as markers with state. Which is fucking confusing because of react-compose
thanks but I think i'm going to try and stick with what user linked since I already have it in my code and all.

I really do appreciate all ya'lls help desu it might be the most help I've ever gotten on this site. I'm going to pull an all nighter and try to figure out react-compose and hopefully have some marker clusters on my map by 7am. If anyone has anymore ideas, examples etc please link me. Or if you want to be a kind soul in 2018 and actually talk me through some code on skype i'm fucking down. I'll monitor this and future threads if anyone responds

jsfiddle.net/16xohwzp/
.chat_line:not([data-nick="username"]) {
display: none;
}

Thanks bro!!!!
I'm so fucking happy right now

Why won't my first callback invocation ever be invoked? I've checked with the debugger, user is indeed null, but i can't get the first call to callback to fire.

User.prototype.init = function (callback) {
dbAccess.findUser({emailAddress: this.emailAddress}, (user) => {
if (user === null)
callback(user); // this will never fire
this.salt = user.salt;
this.hash = user.hash;
this.alerts = user.alerts;
this.updates = user.updates;
this.settings = user.settings;
this.isVerified = user.isVerified;
callback(this);
})
};

Say I have an active discord server. What would be the best way to store all the message data (author, message, reactions, etc.)? I'm trying not to have to rely on JSON, but that seems like the easiest.

>callback a null object

shiggy diggy

>I'm trying not to have to rely on JSON
why? you gotta a lot of time to waste?
> but that seems like the easiest
no shit

I've got logic to check the null in the callback's scope. If it's null I'm returning 401. Is it not possible to callback a null value or something?

>By convention in Node, the first argument to a callback is usually used to indicate an error. If it's something other than null, the >operation was unsuccessful for some reason -- probably something that the callee cannot recover from but that the caller can recover >from. Any other arguments after the first are used as return values from the operation (success messages, retrieval, etc.)

>This is purely by convention and there is nothing to stop you from writing a function that passes success as the first argument to a >callback. If you plan to write a library that is adopted by other node users, you will probably want to stick with convention unless you >have a very good reason not to.

Preferably I'd like to use some sort of database software because I want to learn it for data analytics. Json can be passed into Tableau though so that works too I guess.

use XML then

I want to make something like:

>[Light] [Dark]

Buttons, and when you click on either of those it displays different content. Nothing much, just a different background and some content.

How would I go about achieving that? Do I need Ajax for it? Can it be done in pure HTML/CSS?
I know how to achieve it by simply creating another page and linking to it... but can it be done in a style like hide content 1 and display 2; vice-versa?

Then again I'd like to change the background.... maybe I really should just create a new page and do a page loader with a nice transition or something. I guess it's not that bad.

If anyone has ever done anything like this and has any tips/videos/etc I'd appreciate it.

I tried putting a string in place of the null user object and it still passes right over it on execution, even if I remove the second callback invocation.

create a separate stylesheet and onclick set the stylesheet?
developer.mozilla.org/en-US/docs/Web/API/Document/enableStyleSheetsForSet

Thanks, I'll check it out

I have a goal for tonight: before I go to sleep, I'm going to figure out how to have these two nginx configs coexist and have both be served correctly.

Fucking hate this dockershit, really having a hard time with getting it to proxy correctly. I changed the ports in the setup as recommended on the git page, since you use docker-compose to get things going, but I still can't get the radio program to show up properly if I have my other stuff running (since I already have binds to ::443 and 80).

The repo for reference:
github.com/AzuraCast/AzuraCast

And the nginx config:
hastebin.com/uhamedequb.pl

And the playbook/compose file I changed (from port 80 to 9080, 443 to 8443, and one of the stations was bound to 8096->8097 due to it being in use as well):
hastebin.com/dizigejapa.http

Couldnt you just do something like this (getbootstrap.com/docs/4.0/components/list-group/#javascript-behavior), except replace the listgroup with buttons and make the background color of the divs whatever color you wanted?

This guy here,

This might be something more of what you were looking for, just a collapsible area. So you could have 2 buttons next to each other, one light one dark, and show different content based on what button they clicked.

getbootstrap.com/docs/4.0/components/collapse/#example

This is what I ended up with.
User.prototype.init = function (callback) {
dbAccess.findUser({emailAddress: this.emailAddress}, (user) => {
if (user === null) {
callback(new Error());
} else {
this.salt = user.salt;
this.hash = user.hash;
this.alerts = user.alerts;
this.updates = user.updates;
this.settings = user.settings;
this.isVerified = user.isVerified;
callback(null, this);
}
})
};


If I didn't include an else statement the first callback would fire and then all the rest of the code in the callback's scope THEN return to where the first callback was called initially and continue to run until the second callback.

I don't understand why it behaves that way but thanks to for putting me on the right path

>kill nginx service
>remove all images
>install and start it all up again
>changed the compose ports to 9080:80 and 8443:443 per the docs
>even less works now, but at least I can login to the admin panel
>stream portion of it via icecast works perfectly, as always, but I can't add any media because the media page outputs unhandled JSON that should point to a 404 page
>just wanted to self host a radio stream with a playlist module with easy configuration, instead of this abstracted turn key bullshit

Docker was a fucking mistake. Really just thinking about having a playlist creation script that feeds into liquidsoap into icecast or nginx directly or something.

Being an ignorant brainlet is suffering, but at least I'm learning something so far I guess.

>abstracted turn key bullshit

truly cancer
nothing is worse to me
>just don't worry about it senpai :^)
>it just werks

This.

"Declarative infrastructure" is a fucking meme that should have died back in 2012 with the puppet/chef faggotry.

That's just the normal flow of code execution. Callbacks aren't magic, they're just functions. Execute one, carry on. Whenever functions return, the call stack unwinds. In the case of JS, all the way back to the point of the polling of the event queue

Even worse is that the manual installation shit is still handled by a script that ONLY targets Ubuntu xx.xx LTS. Might look into the script, take it apart, and make it target stretch instead.

The suite is honestly really nice to work with from what I can use, but all of the setup shit is terrible. And the worst part is that it would work perfectly if this were a fresh VPS instead of a dedi with a bunch of pre-installed shit/nginx configs on it. Makes me want to grab another cheap VPS to dick around on, but I'm not really interested in dealing with 1-3TB/month limits when I'm streaming at 320kbps or lossless (since it would double fuck me, as the new VPS would feed from a read only sshfs mount).

At least it's not libretime, I guess. :^)

Those will be pretty useful, thanks!

newbie making a chat app in react that uses set interval. I have my backend linked up and working with my front end and have api routes for chats between two users. I can render out the messages in what I believe to be the correct order. All thats left is displaying a users name next to their text and also using set interval to fetch POST new messages that a user sends.

The problem is i'm already fetching to display all the messages between two users. I don't want to repeat displaying messages and have a bunch of duplicates. how do i handle this?

would a format like

{ id: [timestamp, author, content, embeddedLinks, attachments, channel, reactions[] ]}

be good? i've never created JSON data before, so I don't know the best practices.

Do you people seriously think I'm going to manually perform each modificaiton to the DB?

Well, basically from what I can see in the code I've been trying to glean from, POST requests etc. are rarely used in actual source code. But I'm too lazy to actually read like 30000 lines of code or whatever to find where the hell these variables and shit go. So what do I do?

Ok guys. I'm an old webdev but its been like 4 years since I've done any. It seems like these Node.js frameworks have actually matured to the point of usability. Back in my day they were memey dogshit that had everyone excited because the names ended in .js.

I'm looking at express.js right now. Seems simple, lightweight, and unimposing on its implementation of MVC, which is what I want. Any other recommendations?

an object with only one key (id) with an array as its value?
At that point you could as well just use an array directly.
I am still not sure I know what MVC is supposed to mean exactly.
I mean I know the definition, but it seems like you can just slap the term onto anything. It's just data and methods on a remote end somewhere...
Feels like its one of those terms like "Cloud".
Never did I think when writing code "Aha yes, this is my controller. And here is my model. Now lets make them interact, so I can send the data to my view."
>Any other recommendations?
Not directly Node related but have you also looked at the big 3 SPA frameworks yet?
React, Vue, Angular
It's definitely valuable to know at least one.

Learning about SMACSS and BEM, using SASS.

Is this the correct way to set a modifier? My card--login class will just have a larger and more opaque shadow.

//module.scss

.card {

// --- borders & white space
border-radius: 25px;
padding: 60px 50px;

// --- color & shadow
background-color: $lighter-color;
box-shadow: 0px 0px 16px 0px rgba(20, 140, 210, .25);

// --- text & font
text-align: center;

&--login {

@extend .card;

box-shadow: 0px 16px 32px 0px rgba(20, 140, 210, .5);

}
}


I watched a video saying how something like this

I'm making two fetch requests to my api, one to get messages a user has received and another to get messages a user has sent. I can make the request of my api but I need to sort it all on the backend because it's way easier to sort datetime in rails than it is to in javascript which is my front.

example of the datetime i'm trying to sort
"created_at": "2018-01-03T09:23:18.701Z"

and what are you stuck at?
>it's way easier to sort datetime in rails than it is to in javascript
why is that?
>"2018-01-03T09:23:18.701Z"
that iso datetime string seems very suitable for sorting purposes

looks right, although are you sure the convention isn't double underscore?

nvm i was thinking of sorting everything in a class. That would be something like Class.order(:created_at)

which apparently doesn't work with a regular old variable. On the plus side I realized i don't need to make two fetch requests since I can just use the id's i sent to the backend to find both ends of the sent and received messages.

Now i just need to sort "created_at": "2018-01-03T09:23:18.701Z" with ruby on rails which shouldn't be that hard if i just think

I think BEM convention is

module__child ie card__button
module--modified-module ie card--login

how do i do this shit like Sup Forums and many other sites where you can type something, refresh the page, and its still there when you come back?

localstorage

"b" + "a" + + "a" + "a"

What's a good way to generate responsive, sortable tables very quickly? I need to be able to post updates from an Excel spreadsheet. Each daily update will be a seperate table with anywhere from 1000 to 15000 cells with data (although I can definitely reduce that). I do not want to share my document / use something like google docs.

I guess Vue could be an easy option, if you need sortable elements.
What should be responsive about a table?

>Never did I think when writing code "Aha yes, this is my controller. And here is my model. Now lets make them interact, so I can send the data to my view."

You'd be surprised. Some frameworks are actually quite imposing on this design pattern. ASP.NET MVC for example.

>tfw to dumb too understand frameworks

which one?

Why do websites keep requesting desktop notifications?? This is the most annoying thing in the fucking world. They're trying to treat my laptop as a cellphone, or something.

Who the fuck would ever allow this?! Why is it even a thing? No one is allowing desktop notifications. How can I block websites from even asking?

same senpai, React is a fucking nightmare. It's seemingly simple, but the way things are structured just blow my fucking head off.

You've got
>components(a hundred folders/files within)
>reducers
>actions
>etc.
>etc.
>etc.

And everything is all over the fucking place. That's the only thing I think is confusing. But creating everything in one file is pretty damn easy, but that's not "best practices", or the "react way", I'm told.

>senpai
forgot about le epic troll fammmm*

Might want to give Vue with single-file-components a try.
I used React one time and didn't enjoy it that much either in comparison.

Some kind of retarded marketing decision. From the same people, that think you will sign up for their newsletter by entering your address into the modal, that pops up, when your mouse leaves the window.
Pretty sure there is a browser setting to block it by default

Reducers and actions are not part of ReactJS, that is redux which adds a bunch of complexity and boilerplate. First learn React and when you are fully comfy with that add Redux. Learning the two at the same time will be harder and you won't be able to understand which parts belong to which framework/library/design pattern

Recommend me a project in Javascript for my resume

Is it possible to create a website that interacts with a user's local files without the need to upload it?

For example, creating an in browser video editor / image editor / etc.

I don't want the user to need to upload their files for privacy reasons.

Hey react anons!
Do I have to extend the `React.Component` everytime?
Can I use functional patterns?

Yes
developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Is this supposed to look like a weird Sup Forums critique meme?

No, it's just some random image in a google search

Django

django is fucking annoying to set up it kept throwing errors for obscure packages that i needed to download. fuck off with that shit.

+"a"+"i?"

behind every dumb website is an even dumber management major who somehow got a position in managing developers

What's your stack, user?

Is it possible to use a scanner in Javascript without using DWT or Scanner.js?

My front end and back end are separate and I need the website to use a scanner.

reactjs.org/docs/components-and-props.html#functional-and-class-components

Look at the first example

>Scanner.js
github repo looks like it's also involving .jar files.
And there is no source apparently. Only the minified js output.

I like Vue on the front- and Node for the backend.
LevelDB if I need an embed-able long term storage.

Yeah, there's some magic fuckery going on with Scanner.js. You also need to download and install a program to use it.

What really bugs me is the price tag on the license. I'm looking for a cheap/free alternative, but everywhere I look scanner.js and DWT are the only solutions. They can't be the only ones, right?

Which RDBM's are you going to use? probably worth remembering that SQL syntax differs sometimes between vendors.

What technology are you using backend? is it a simple Ajax chat that uses a timer to constantly fetch new messages or is it something more sophisticated like using node with web sockets etc?

>chat app in react that uses set interval.

Guessing it's a simple Ajax chat system. Best thing to do is have a field in your DB table that called "seen" or something, when you call your backend script it updates the retrieved records to true for "seen". Then your query for retrieving new messages will only select unseen messages is "seen" is false.

Convince me I shouldn't mix promises and callbacks

How do I know if a DOM Element is an input?
And by input I mean the equivalent of a $(elem).is(":input").

I'm assuming any element that contains defaultValue must be an input, since tags have values, but are not considered inputs. Is there a better way to check this?

this tests if the parent of the input is a form element.
var isFormParent = $( "input[type='checkbox']" ).parent().is( "form" );

But then I'm using jQuery. The whole point was doing it without jQuery, that's why I asked for an equivalent.

w3schools.com/jsref/prop_node_nodename.asp

Simple google search would of done

github.com/jquery/sizzle/blob/master/src/sizzle.js#L125
looks like jquery just checks for input,select,textarea,button

>would of

How liable are you for the shit your users post?
For example if a user posts an illegal image which is hosted elsewhere but displayed on your site, where would you stand legally?

How come hardly anyone posts in webdev general?

Arent webdevs probably the most populous group on this site?

How do I learn how to use d3.js?

I'm a beginner to programming with zero web development experience

that being said, html and CSS aren't really that hard to use

>Arent webdevs probably the most populous group on this site?
not even close
you would think that chans naturally attract people interested in technology, but that's not necessarily the case. Sup Forums is still more popular than a bunch of other boards but also less so than music, sports and comics on here.
>How do I learn how to use d3.js?
>I'm a beginner to programming with zero web development experience
Hope you didn't expect anything other than people telling you to learn JavaScript then.
What are you interested in using D3 for?

MySQL

I'm not familiar with JSON objects at all. Would I be able to sort by that?

Natively you can't sort an array of objects. Make your own function or Google some.
With loDash you could use _.sortBy(myArray, "id");

Is there an easy and painless way of learning react or angular without having a mac? (win10 here)

can i use a VM without problems?

can i just do everything on linux?

Of course you can. You pass a function to Array.sort() and have it sort whatever you want.
By the same logic you could say, that you can't natively sort an array of numbers.
>I'm not familiar with JSON objects
Just be familiar with JS objects. Read up on it on MDN if you need to. (technically the same)
What I meant was, that in your example, the object only had one single key, which didn't make it very useful as an object.

windows also supports text editors and node.js

this, i have been looking a way to block notifications, i already blocked the cookies notifications

So just install node.js?