/wdg/ - Web Development General

nice
can you send me the code?
Do the needful
thanks

and this is why webdevelopment will implode soon. who needs a 100.000$ software-engineers with design patterns when they can get code bootcamp monkeys for 1/3 the wage?

Its not like you need a $100k software engineer for Node/Express or .net-core

>I've got access to a decent chuck of courses for free.
lol, good for you. too bad most of those udemy courses are rip-offs of you tubers. Some of them even complain to udemy for allowing this.

Also, everything of it is on torrent sites.

free market bitch

I wish I had studied data science so I don't have to hang out with you plebs :/

everyone and their mother is doing "data science" these days, kid.

Jokes on you, I'm not doing anything worthwhile.

define worthwhile.

Assuming you're only need to host an Angular app, literally any web host will work.
However, if you have a backend that uses shit like Node, get a VPS. Try Low End Box
Someone needs to add a Hosting guide in OP.

Just use Heroku

Can someone help me understand client side and server side url/routes. Like most people do for example /login client side that calls a /login route server side but it doesnt have to be the same right? Like the /login client side could call /unicors and it would still work right?

yes. client makes a request to the back end with a specific url (can be anything), then a function tied to that route is executed (can be anything)

i heard once about a youtube open source clone that some people were making with python, anybody knows the name of that project? it was pretty famous

What (if any) opinions do you have on the hgroup element?

What's the best practice around having a single point of truth for validating both backend (Laravel) and client (Vue)? i.e No duplication of rules.

I am trying out node.js, I installed it on my computer and I'm doing the tutorial from w3schools.
I do my line breaks not work?

Attached: notepad++_2019-03-25_01-00-50.jpg (779x328, 100K)

I made an app to store passwords, pretty basic so far until I add other features. It is functional, but I can't figure out a good way to improve the user interface.

Attached: SS.png (1647x852, 20K)

There's nothing to improve in that UI.

content-type text/html might need to be text/plain

Ty, but it feels like there's something missing. Maybe I'll fuck around with the fonts a bit. I plan on making this public eventually (doubt anyone will use it but whatever lol)

Oh sheit I don't even know why I changed it but thanks.

what the FUCK?
I just pushed my shit to my gitlab like many times before, but this time some pipeline shit I didn't set up triggered and failed and my push didn't go through. How in the fuck do I disable this thing? Why would such a thing run when I've done nothing about it?

I have some thoughts, but they're really more UX than UI.

Consider adding some kind of visual indication to separate rows from one another; when you have a lot of passwords it could get hard to tell which things line up.

The gear icon implies 'settings', when what you probably want is 'edit'.

What does the green dot next to "General" signify? The fact that that category is currently opened? In any case, it looks a bit out of place.

>Consider adding some kind of visual indication to separate rows from one another
Yeah I was thinking about this. At the moment they're spaced out a bit so it's not exactly hard to see how things line up, but it might be a waste of space if the user has, lets say, 30 passwords saved. Will add.

>The gear icon implies 'settings', when what you probably want is 'edit'.
The button toggles a drop-down. Originally, I only had one button (the copy option was in the dropdown) but I moved it outside since that's gonna be used a lot.

>What does the green dot next to "General" signify? The fact that that category is currently opened?
Yes, that's exactly it. I realize how un-necessary it is now because the all the other categories are collapsed anyway so there is no need for the indicator.

I'll make a few changes, thanks for the feedback.

Attached: SS2.png (1364x654, 24K)

I'm learning about git and some git workflows like git-flow.

atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow

When I finish a feature branch and merge it into the develop branch, does the feature branch just sit there forever?

>encrypted with AES-256

This is basically the hardest thing ever to get right.

(1/?)

(can't use 3v4l.org because my shit uses a database)
So I'm trying to get something to work, it worked fine on my local server but when I pushed it to bluehost I got all kinds of shit on phpMyAdmin about apparently using 2.0TB of traffic and every fucking client crapping out and disconnecting or something???

I can't figure out what's going wrong, the expected behavior is that I click on #chat and type into it and my keystrokes get sent to a PHP script that logs them in a MySQL table and then the strokes logged therein get queried and sent back to the client and my keystrokes appear in the element #chat-contents. Actual behavior: whatever I type just disappears as if the MySQL server is sending empty result sets.

I can't even figure out how to debug the PHP because I can't log in over SSH, when I try it says something like "SSH isn't enabled on your account, contact bluehost support." So I have absolutely NO idea what could be going wrong, and basically no way to find out. As such, I was hoping someone here might be able to look at my code and clue me in. I'm a complete novice at these things and learned everything I know from college courses so you can expect to see some pretty retarded shit here.

(2/?)

Here's my CREATE TABLEs and my CREATE PROCEDUREs:

CREATE TABLE Message (
ID BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT,
Item CHAR(1) NOT NULL,
Color CHAR(6) NOT NULL,
PRIMARY KEY (ID)
)

CREATE PROCEDURE pushmessage(IN i CHAR(1), IN c CHAR(6)
BEGIN
DECLARE num INT;
INSERT INTO Message (Item, Color) VALUES (i, c);
SELECT count(*) INTO num FROM Message;
IF num > 40 THEN
DELETE FROM Message ORDER BY ID ASC LIMIT 1;
END IF;
END

CREATE PROCEDURE popmessage()
BEGIN
DELETE FROM Message ORDER BY ID DESC LIMIT 1;
END

The purpose of Message is to store individual characters and associate them to colors and an order with respect to each other. The idea of that is to create a deliberately rudimentary chat system where there are no discrete 'posts' and instead people just talk over each other like assholes. And, just like in real life, there's a very strict limit to how much semantic content can fit into the discussion at once; that is, after 40 characters, you can't look back at what people have typed, just like in real life you can't listen back on what people have said.

>CREATE PROCEDURE pushmessage(IN i CHAR(1), IN c CHAR(6)
Sic. The argument list is properly closed in the actual code, I must have accidentally hit backspace after pasting.

Anyway, (3/?): This file is dbconn.php.

Obviously this is for controlling what can be done with the database connection. open() tries to connect to the database and returns a class instance if so or false if it can't, close() obviously closes the connection, push() inserts to the database but it does it through the pushmessage() stored procedure so that old characters are pruned if the limit is reached, pop() proactively prunes off the newest character instead in order to simulate backspace, pull() is supposed to retrieve the chat contents.

(4/?): This file is ifacefuncs.php. It provides higher level functions for interfacing with the database as a client.

>I can't log in over SSH, when I try it says something like "SSH isn't enabled on your account, contact bluehost support."

Honestly, get off shared hosts.Everything in your post tells me you're too advanced for Bluehost.

(5/?): This file is iface.php. All it does is pull in functions from ifacefuncs.php and call ifacedisplay(). This should be enough to fulfill its purpose, which is to provide the actual interface between the client and the database, as opposed to just the functions for one. The reason I don't just define the functions in iface.php in the first place and cut out ifacefuncs.php altogether is because I am a slobbering idiot and am unsure as to what I'm actually doing.

Thanks I will try that as a last resort but I still have a feeling it might actually be the other way around and I might just be missing something here. If I had to guess, there seems to be a database authentication problem. In phpMyAdmin it looks like my database is being accessed by a user other than the one I try to access it as, which I don't really understand at all why that's happening, but if that is actually what's happening, it would certainly explain why the password I supply isn't working.

Anyway (6/?): This file is index.php. It's the homepage. The JS file it pulls in does ajax to work with iface.php. The reason iface.php is also included directly into index.php is so that something shows up in chat even before JS runs and/or if it doesn't.

YammerMachine

(7/8) This is the script.js referenced by index.php. It does the key tracking and corresponding ajax to iface.php mentioned above.

$(() => {

let usercolor = $('#usercolor').val();
let chat = (options) => {
$.ajax({
method: 'GET',
url: './iface.php' + options,
dataType: 'html',
success: (data) => {
$('#chat-content').html(data);
}
});
}
let putitem = (c) => {
$('#chat-content').html(
$('#chat-content').html() +
'' +
c + ''
);
chat('?i=' + c + '&c=' + usercolor);
}
setInterval(() => {chat('');}, 250);
$('#chat').keydown((e) => {
if (e.which == 8) {
chat('?i=pop');
}
});
$('#chat').keypress((e) => {
if (e.which == 32) {
putitem('_');
} else if (e.which == 127) {
chat('?i=pop');
} else {
let s = String.fromCharCode(e.which);
putitem(s);
}
});

});

(8/8) Lastly, this is the stylesheet. I highly doubt the problem lies here, but may as well post it just in case.
body {
color: #888888;
background-color: #000000;
font-family: monospace;
text-align: center;
font-size: 18pt;
}
#chat {
color: #888888;
display: block;
margin: 2em auto;
width: 26em;
padding: 1em;
text-align: left;
border: 0.17em dotted #888888;
border-radius: 2em;
font-weight: bold;
text-decoration: none;
}
#chat:hover:not(:focus) {
border-color: #cccccc;
}
#chat:focus {
border-color: #ffffff;
}
@keyframes blinker {
0% {background-color: #888888;}
50% {background-color: #888888;}
51% {background-color: #000000;}
100% {background-color: #000000;}
}
#chat:focus #blinker {
animation-name: blinker;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.error {
background-color: #880000;
color: #ffffff;
}

And, one more thing: here's the website itself, though I realize there's only so much you'll be able to tell from the client side, even given what else I've posted.

yammermachine.com

Also I just noticed the chat is no longer blank. It shows some stuff I typed awhile ago, and whenever you type anything new into it, it only shows up for a split second before reverting to the stuff that was typed in before. It almost looks like the database might be giving back really outdated results for some reason.

Okay holy shit, whatever this problem is, phpMyAdmin is REALLY not happy about it. I have no idea what ANY of this shit means. I mean I know what it means, but I have no idea what it could mean in reference to my code, because I can't fucking debug it because I have no SSH, reeeeeeeeeeeeeeee.

Attached: jfc.png (1059x700, 263K)

good thread

What is the fourth line doing here?
class Base {
constructor(
source,
{ defaultValue = {}, serialize = stringify, deserialize = JSON.parse } = {}
) {
this.source = source
this.defaultValue = defaultValue
this.serialize = serialize
this.deserialize = deserialize
}
}

module.exports = Base

Whats the correct way of doing authorization in 2019? Set the cookie to a token? Use that session shit online? Which one do you guys use?

Attached: 131342535.jpg (1106x1012, 70K)

Yeah I am interested in this as well. Can't find good information about this.

So i am planning on creating a portfolio but i don't know which technologies to use, for now something that i thought about is
>A React news site with a firebase/firestore database
>A forum using .net-core as the backend and React frontend
>And something using Express and maybe gatsby

I know all of these technologies above but i don't know which one to use

Attached: 367373467.jpg (477x477, 41K)

So Heroku Free has no traffic limitation, it just gets slow if you use it too much or too little? Or am I missing something here?
>Free
>Ideal for experimenting with cloud applications in a limited sandbox.
>CORE PLATFORM FEATURES
>SLEEPS AFTER 30 MINS OF INACTIVITY
>USES AN ACCOUNT-BASED POOL
>OF FREE DYNO HOURS
>CUSTOM DOMAINS
>512 MB RAM 1 web/1 worker

What about CI-Pipelines? I want to run Lint, Unit and E2E tests prior do deployment. On GitHubPages I have set this up already and it works flawlessly; but it seems I really do need a backend now.

Either Basic Auth for simplicity (simple machine-to-machine communication where you have a known number of servers which are all under your control), otherwise, especially when user-clients are involved, use Oauth2/OIDC

Hey guys, Is there a brainlet way to create and share a file on the fly?

What i wanna do is if you open example.com/data, the server creates data through a script/program then pushes it.

I've already looked into this
expressjs.com/en/guide/using-middleware.html
But that i feel like that's already to complex/overkill for what i wanna do.

Attached: 1492360776489.jpg (800x800, 134K)

What are the levels of profficiency in HTML, JS and CSS?
As in, what is considered an expert in JS? Experience or knowledge? Is async...await basic knowledge? What would be counted as advanced?

I thought postgre was the best SQL version and MySQL was shit?

Attached: 25325253253.jpg (941x647, 113K)

Creating React-Redux boilerplate without watching it up online

This should work, WHY DOESNT IT FUCKING WORK

Attached: 2352352535.jpg (1216x456, 72K)

MySQL is for beginners, Postgres is for pros.

new?

new

what do you mean with create on the fly?
I think that's not how you use createContext. Same with the value of the Provider.
What guide are you following for this?
es6-features.org/#ObjectAndArrayMatchingDefaultValues
>setInterval(() => {chat('');}, 250);
Is this intentional to send data to the server 4 times a sec?
>there's a very strict limit to how much semantic content can fit into the discussion at once; that is, after 40 characters, you can't look back at what people have typed, just like in real life you can't listen back on what people have said.
Why the need for a mysql database here?
sry, haven't read through it all

How can you afford Firebase? Their pricing model seems to be ok only for small projects

bump

Attached: DFmlZAQXkAMtBio.jpg (1200x627, 80K)

>Is this intentional to send data to the server 4 times a sec?
Yeah, it needs to be really fast so it can feel like you're just typing in a text field instead of sending and receiving data.
>>there's a very strict limit to how much semantic content can fit into the discussion at once; that is, after 40 characters, you can't look back at what people have typed, just like in real life you can't listen back on what people have said.
>Why the need for a mysql database here?
It's because of the pacing of the application. If I just used a file, then users would probably lock each other out of that file by trying to type at the same time. I need to be able to handle queries from a lot of clients approximately simultaneously, and order the data received according to the tiny differences in time of receipt.

>becoming a software engineer with Laura Medalia

Attached: 1553288150915.jpg (209x242, 6K)

I'm doing a project and I'm stuck on something stupid. I want my collapsable menu to transition smoothly but for some reason, it only does that when going up but not when actually collapsing.

I've googled and there are lots of people with a similar problem (CSS transitioning working in only one direction) but I haven't found the solution yet.

>Yeah, it needs to be really fast so it can feel like you're just typing
But you have it call chat() on input *and* also on an interval? Not sure if I follow why.
Seems like you would only ever need to respond to keyboard inputs.
And in the case of sending a message for every input, you would be much better served with a persistent socket connection, rather than sending individual AJAX request.
>If I just used a file, then users would probably lock each other out of that file by trying to type at the same time.
I rather meant, why not store that little information in a simple variable in memory? With such little and possibly short lived information it seems like a much better choice.
Even if you need persistency, you can still dump it to a file during times of inactivity or certain maximum intervals and save on a lot of complexity by not putting everything through a full blown database.

do you maybe only apply the transition property in the class that gets applied, when the menu is supposed to open?
Then when the class is removed and the menu is supposed to collapse, the transition property is also missing again.
Post a fiddle otherwise.

my guess is you put the animation in the class that gets toggled when it should be in the superclass or some shit like that, if what I said is bullshit then just copy this:
jsfiddle.net/9ccjE/
:^)

>>Yeah, it needs to be really fast so it can feel like you're just typing
>But you have it call chat() on input *and* also on an interval? Not sure if I follow why.
>Seems like you would only ever need to respond to keyboard inputs.
This is a good point, I need chat() on interval so that users can see when other people type even if they themselves are not typing, but as long as I also have chat() on input, it might be okay to increase the interval latency.
>And in the case of sending a message for every input, you would be much better served with a persistent socket connection, rather than sending individual AJAX request.
This is also a good point, and I do know what a socket connection is, but I've no idea how to set one up in PHP. I'll have to study that a bit, thanks.
>>If I just used a file, then users would probably lock each other out of that file by trying to type at the same time.
>I rather meant, why not store that little information in a simple variable in memory? With such little and possibly short lived information it seems like a much better choice.
>Even if you need persistency, you can still dump it to a file during times of inactivity or certain maximum intervals and save on a lot of complexity by not putting everything through a full blown database.
I don't think I could store it in a variable in memory, because it has to be shared between clients. Unless there's a way to run a single instance of a server script forever and have it serve multiple clients instead of each client spawning a server script. I'd imagine if such a thing did exist, it would relate to your previous suggestion re. sockets. I guess one solution I could imagine (if I had shell access) would be to write something in C to replace the MySQL, run it as a daemon, and rewrite my PHP to communicate with that daemon instead of with MySQL.

thank you guys, was right, I didn't target the superclass. lol I'm dumb

Is there any book or guide on how to improve my debugging skills? Or is this something that I must learn through experience?

I'm good at building things and following web standards, however when it comes to reading another person's code sometimes I have trouble with understand everything that is going on. A combination of poor documentation and it wasn't my code originally.

So to account for that, is there anything I can do to improve things on my side and be able to recognise those hints better? Like a design pattern for debugging so to speak.

How can a I send data from a stored procedure to an AngularJs app? Im trying to create reports. My backend is in Java Maven and I dont know if I have to request the data as an API call or to the database ;_;

Anyone know how to vertically align line numbers with the text next to them? MDN (developer.mozilla.org/en-US/docs/Web/CSS/line-height) said this should work but I'm not having any luck in even a single browser. Beyond that my already incorrect results vary from browser to browser, which is another problem in itself. Any ideas?

jsfiddle.net/m60agdts/

Firefox

Attached: Screenshot_2019-03-25 Screenshot.png (1913x1056, 101K)

And Chrome

Attached: _home_taargus_pleading%20test.html.png (1905x1056, 216K)

Oh, and I'd also like the 28 lines to fit consistently within the white space, which represents the page's content boundaries. If it matters, I won't be targeting multiple browsers in the end, so I guess I could just use whatever value works for my use case, but then I still have my first issue, which from what I understand should be solvable for at least a single browser.

for this you would need the exact same font-size, margin, padding, line-height, etc. on both your content and the numbers.

jsfiddle.net/6q43jc71/

though I don't think writing out the line numbers in HTML is the best way for this.

now your list is all fucked up and I don't know why :^), you're welcome

jsfiddle.net/ja9bycmv/

>what do you mean with create on the fly?
Basically it gets created just when you open the link, making the data in the file as current as possible.

=SUM(('4'!AU6+'4'!AU32+'4'!AU58+'4'!AU84+'5'!AU6+'5'!AU32)-(IF('4'!D6="S",('4'!G6-'4'!E6),"0"))-(IF('4'!J6="S",('4'!M6-'4'!K6),"0"))-(IF('4'!P6="S",('4'!S6-'4'!Q6),"0"))-(IF('4'!V6="S",('4'!Y6-'4'!W6),"0"))-(IF('4'!AB6="S",('4'!AE6-'4'!AC6),"0"))-(IF('4'!AH6="S",('4'!AK6-'5'!AI6),"0"))-(IF('5'!J32="S",('5'!M32-'5'!K32),"0"))-(IF('5'!P32="S",('5'!S32-'5'!Q32),"0"))-(IF('5'!V32="S",('5'!Y32-'5'!W32),"0"))-(IF('5'!AB32="S",('5'!AE32-'5'!AC32),"0"))-(IF('5'!AH32="S",('5'!AK32-'5'!AI32),"0"))-(IF('5'!AN32="S",('5'!AQ32-'5'!AO32),"0")))

I need some help with TinyMCE.

I created a custom unordered list, which inserts `>>` intead of a bullet point, it works, however, i cannot recreate the same functionality as the default lists, that is, when i make a new line and then hit the tab button or another list item, the arrows should disappear or become a bullet point by default, but they stay arrows, and i cannot change that. Any hint?

what language is it even, it looks a bit like sql for the sum() but then you got those ugly IF and then the !AE6 and then'4'... is this MSAccess?

As someone with no webdev experience aside from messing around with html and css files, how difficult would it be to make a page with a search function that allows me to look up youtube videos, then open them within mpv?

Attached: wow.jpg (433x482, 65K)

fucking weeb placebo fags, double cancer, once that said that'd be quite a project, so medium hard to say the least, but go for it if you are really hard working and have a wild research spirit, you won't know where to start to though, so maybe this thread can give you some tips, I myself would be lost at even searching withing youtube, after checking though, that doesn't seem to be that hard if you just go by the url, what I'd do is I'd take the keywords, reformat it into a youtube url, pull the data from the youtube url page, insert it back to my feed and then trigger the mpv video "somehow" (no idea how to do this tbqh). Godspeed

what the heck

Attached: ss_2019-03-25_at_18.44.53.png (1279x925, 1.4M)

Babby's first website here. I'm trying to create a timer. It should start with a dropdown list box for how many seconds it should run for. Should I start by creating an HTML form for the dropdown selector or write it all in JS?

Attached: Screen Shot 2019-03-25 at 2.49.07 PM.png (166x103, 21K)

I guess some things you would need:
- Basic page structure/layout (html/css)
- YouTube API Key (js/google)
- YT API documentation (google)
- Implementation/MPV (js/library maybe?)

I'd categorise it as a medium-level project and you would probably learn a lot if you finish it.

It gets worse

Attached: ss (2019-03-25 at 18.50.52).png (840x426, 50K)

Attached: ss (2019-03-25 at 18.52.41).png (852x812, 336K)

Aye, I figured the search functionality would be the hardest part. So I'll probably start by seeing if I can create a working search bar that takes key words, seems like it'd be a pretty neat project. Thanks for the encouragement user.

Right, I'll get started with the tutorials then until things get too difficult.

>Babby's first website here.
It really doesn't matter. Even if you 'write it all in JS', you still write the template for the exact same elements.
Just the way you check which value is selected is likely to be different.
alright, I have no clue about PHP admittedly. Pretty sure there must be some way to share variables, like some kind of simple in-memory DB, that doesn't need to interact with the filesystem constantly.

because I'm a backend boi and my company needs some front-end stuff that I honestly don't know how to/can't/won't do, we're going to hire someone to do it, because we need someone full time doing that anyway
obviously, because I'm the only person in the whole company with any technical background, I have to do the technical interviews and whatnot
given that I'm hiring someone to do something I'm not good at, are there any tips and/or life hax to do the interviews? like what kind of challenges could I make them do and whatnot? fizzbuzz equivalent for javascript?
we're after someone who knows vue and d3 if that helps
thanks wdg

>some front-end stuff that I honestly don't know how to/can't/won't do
how are you going to judge someones Vue skills, if there is no one familiar with it in the company?

Anyway, would probably give them some data and ask them to build a simple UI to display everything. Nothing major that takes days or hours.
>here is some data
>make it show in a list
>make it sortable, searchable/filterable
>make it non-eye-cancer even if you only have a short amount of time
>something that shows they can use Vuex and that their state management isn't a complete clusterfuck
stuff like that, depending on what you actually need I guess.
just google Vue interview questions or something idk

Not that I have a clue on how to do interviews, so don't take my uninformed guess here as reliable help.

>how are you going to judge someones Vue skills, if there is no one familiar with it in the company?
that's basically the question that I'm asking, I know a little bit of vue+vuex (been building the front end until now) but shit's getting too complex for me and I despise frond end to be honest, that's why I want to get someone else to do this
>Anyway, would probably give them some data and ask them to build a simple UI to display everything.
cool stuff, will try that, also maybe ask how they'd implement auth and whatnot?

Why isn't materialize CSS more popular if Material-UI is so popular, is it just shit?

Attached: 25232352352.jpg (580x435, 25K)

>es6-features.org/#ObjectAndArrayMatchingDefaultValues
Thank you so much, the link is awesome!