/wdg/ Web Development General - "You can work on my back end whenever you lwant" edition

How to I get a navbar like on the image I posted ?
I can get a nav to work on top of an image, it's centered when viewed at the minimal size but floats towards the right when the screen size is increased.
What setting do I need to look at in order to get the navbar to stay at a certain position as the image resizes ?
I've also already tried using the image as a background inside of a div (just something I was wondering if it would work) and ended up with an image that was the correct width but only as high as the text.

Attached: navbar.jpg (2234x794, 512K)

test

you just needed to add a height to the div
try overflow:hidden; on the container of th eimage, by that I mean

>jsfiddle.net/j9xynogp/

How do I make it so that it updates the result instead of adding to it?

Right now it goes: 123
I want it to update the value as the user checks a box. Any help?

How could i make javascript run another language script, let's say python from a JBoss enviroment? I am learning to use a JBoss based framework named OpenUnderwriter and it's documentation it's all but clear, only thing i know it's how to install it and have access to some files from it but I would like to run certain scripts from the site it creates.

jsfiddle.net/5f8z069e/

I'm retarded. But thank you!

yw, I love learning js

you should probably use :

element.addEventListener("click", function(){ alert("Hello World!"); });

or

element.addEventListener("click", myFunction);

function myFunction() {
alert ("Hello World!");
}

Can't reply with my code for some reason, but overflow:hidden; didn't solve the issue.

try jsfiddle

I didn't know the code tags are broken, I would have used Jsfiddle much sooner.
jsfiddle.net/1umpew4x/
Is it because the nav links seem set to a certain place on the screen ?
Is there a way to make them move around in some way as the screen gets bigger ?

also sorry for having to pick a different banner, we need to have everything locally for the assignment and I couldn't remember where I even got the cheeto banner from.

tell me exactly what you want to acomplish, in a simple and detailed way, and then what happens now instead

>tell me exactly what you want to acomplish
I need the nav bar to scale with the top image till the screen gets to a width of 1280px, it needs to be centered at the bottom of it and 4 nav sections stretched across the length of it as the screen gets bigger.

>and then what happens now instead
I think I have a fixed position for the nav section since when the screen does get bigger it just stays in one place and doesn't seem to move in position so it's in the same place on the image.

The other things that are required I can figure out such as the breakpoints in the @media where it needs to morph into a different layout (flexbox does what I need for that) however I have no idea how to make the navbar do the same.

I hope that's detailed enough the get the idea across
I have the image added in this post how the navbar should be acting

The way you doing it, the new way of doing it, with felxbox is alien to me, what I would do is do it the old way, the only way I know

You already have the image scaling, so that's no biggie

.I would put the image as a div background,
.Make the bgimage scale with background size 100% auto (or the other way around)
I'd make the div that contains the image absolute
I'd make the navbar position relative
I'd make the div contain the navbar have a bottom attribute of 0
.and I'd place a left value on each one of the items of position relative left 0% 25% 50% and 100%

I don't know if all of this would work, but that would be my first attempt, I might give it a try

You could use dynamic import() syntax with Webpack.
Whatever you only import dynamically will end up in its own bundle. The import() expression gives a function that, when called, will start loading the bundle and returns a Promise that resolves into whatever the module exported.
It's not very hard to make a React component that takes such a function, only calls it when it's being mounted, and then renders the loaded component when it's ready.

thanks for the input, yes it is a new way of doing it, I had to read up on how flexbox would even work although if it's just boxes you need to move around it's a lot easier (for me at least) than using floats (which i find a pain in the ass).

Makes sense I'll look into that, thanks user

Where do you put your actions for getting stuff from your backend in React?

I usually put them in the didMount and/or didUpdate in my containers but it feels a bit tacky. I started putting that stuff in an own container instead which sends an action if an api request needs to be done, but I don't know if that is the correct way to do it.

Attached: 37723804_1802721509812148_4176562765705510912_o.jpg (1391x1640, 133K)

JS question.
Is it possible to add an event listener to all elements with a certain class?
I have two buttons with the same class so I presume I need to iterate through all them with querySelectorAll or is there a more elegant way to do this?

like this

Attached: likethis.png (1674x753, 21K)

I'm sure there is a more elegant way of doing it with flex, maybe some user here will help you

holy shit nigger can't you google your shit?
stackoverflow.com/questions/42080365/using-addeventlistener-and-getelementsbyclassname-to-pass-an-element-id/42080408

So I just got out of an interview with a big consulting company, mainly based in India, but they have offices in the US. I think it was a mistake to even take this interview.

Both the technical interviewers were indian, so I had trouble understanding them. At one point I thought they asked about pointers, and I gave them a basic description, and they just looked confused the whole time. Then they described what they were talking about, something to do with using CSV files and stuff, and I was super confused. Then one of them finally wrote out on a piece of paper "import pandas". Like the Python library. So TIL "pointers" and "pandas" sounds a lot alike in an indian accent.

Also, at one point they asked me what the meaning of '/' and '//' were in HTML. I asked if he meant within links (I figured he meant like root-relative URLs and protocol-relative URLs) but he said no. I said they had no real meaning in HTML that I knew of, and we moved on. Later, I asked what answer they were expecting there, and they told me it was for selecting elements like '//html/body/div/whatever'. I asked what API this was, and they didn't really give me an answer. I looked it up and it's apparently called xpath syntax, which I had previously said I didn't know.

And they asked me at one point if I had used "Appium" (which I guess is a cross platform mobile app framework), and I said no. And then they asked what I had used then, and it kind of felt like they didn't believe it was possible to develop mobile apps without a framework like that, and like they were accusing me of lying about having done mobile dev.

/rant

Right, thanks.

jsfiddle.net/nrvf71La/

codepen.io/user/pen/yRaYzo?editors=0100
is this what you wanted?

with image scaling
jsfiddle.net/7boz9v0c/

codepen.io/user/pen/zmKvpa?editors=0100

"fixed"

yeah I got it somewhat working with position relative and absolute, at least it stays at the bottom of the image now if I have it really small.
I just need to figure out how to center it now and make it fill out the width.
Can you wrap elements in div tags ?

what'd you do?

background-position:center;
check:
and:
we did his homework hardcore

you can use the li elements as divs with display:inline-block and avoid using float that way, you set the divs to 25% width

he better thank us for those free marks

how much do we charge the hour?
>tfw going to make just 270€ for redesigning CSS of a wordpress theme to a friend of my brother

I think the image is now centered where it would veer off into the right side before.

thank you guys so much for the help, this pretty much removed the one big roadblock I was stuck at for ages. Now I should be able to get past this pain the arse without too much trouble.

you forgot to quote flexman with his skills

>270€
that's CAD 402.87
I need to move

Samefag here, I have one more question.
I have a menu that is flexbox, flex-direction row, and I want to have know when the window size gets so small that it wraps to 2 rows, to render a dropdown instead of the original list.
I have successed with knowing when the screen goes from big to smaller by checking offsetTop, but when you resize the window to be bigger it does not snap back to the original list again.
Code for checking if it has wrapped once in pic related

Attached: Screen Shot 2018-10-05 at 22.31.00.png (1238x160, 39K)

> CAD 402.87
I don't know what that is

canadian dollars which is pretty much monopoly money at this point

I get it, kek, I feel like I should have gotten paid much more, like 250€ or so, but to be fair I failed to deliver plenty of features, fucking wordpress

*like 500€

can you post the design?

I'm affraid of doxing user, it was a good design, not made by me, the friend of my brother was the designer, I was but merely a CSS codemonkey, but anyways, Raleway everywhere, green accent instead of red, green logo, very bold letters in titles, activated the parallax of the image banners in the header mid and bottom and fixed some form with contactform 7

Almost $800 Canadian for a redesign alone?
fugg

damn, I'll take your word for how good it looks

>Almost $800 Canadian for a redesign alone?
it changes the face of the site completely, from a standard theme with no soul to a well designed product, worth that and more

plus I'm sure they charge a lot more than that in US

Fuck it, time to buckle down and learn a stack, this peasant life is not for me.

There used to be a discord for this general. Did it finally get destroyed?

discordapp.com/invite/wdg

Anybody here use Sentry and can share what it actually looks like and does? I tried reading through their website but it just keeps saying that it reports errors and that's it. What actually is it?

I miss phpfag

i think it grabs errors and context of those errors from the user and throws it back at the developers so they can stop fucking up and fix their broken piece of shit
i'm guessing it looks like crap if all you see are errors, but at least you know it's working

How is one supposed to use JWTs exactly ? I understand the logic behind them, but I'm not sure how to handle token expiration. Are we supposed to display a login form when that happens ? Or maybe make the front end automatically resend the refresh token ? But in this case, how is it different than just having a JWT with an infinite lifetime ?

>i think it grabs errors and context of those errors from the user
This part, how exactly? Does the user submit a bug report or what?

from what i've been told, it's middleware
it's probably a script that sits on the page somewhere out the way and only really flares up when there are problems
i'll be honest, i'm not sure how the magic works and i dont care enough to find out

Yes, show a login form just like you do when a session expires if you're using them in a webapp. For mobile apps its different, for those you would only need to revoke them when a user logs out or changes their password.

Give me one (1) reason why Angular is shit

It's not, but Vue isn't half bad either.

To add to my comment, JWT expiration is there in the case a JWT is stolen. Its there to prevent someone from abusing it indefinitely.

How does it feel knowing I make more money than you because you can't into backend dev

It's another layer of unnecessary complexity, dependencies, and shit that'll go through the motions of updated, deprecation, copying other standards, and inevitably be outclassed and die out.
The web breaks down into HTML mark-up, JS, CSS, and media. I think it's better to strictly work with the fundamentals when the project is simple, otherwise it's adding more overhead where none is needed.
Also, it's yet another JS library, so yay, more fucking bloat.

I'd argue that you wouldn't want to work on a large scale enterprise application in just HTML, JS, and CSS. Not only would it be a pain in the ass to maintain but even having simple things such as routing would be way more difficult than it would be with Angular. I agree with you though, if its a small app you might as well stick with the basics and if need be use something like Vue.

Why? He was cancer.

what's the point of having lamp on linux when I have to reinstall shit once in a while because it's the only sane way of getting rid of errors

>Jow Forumsuys how do i prevent scrolling to buttons on focus? i tried all of these. the last one gets offset top after the scroll has already taken place.
e.preventDefault()
e.target.focus({preventScroll: true})
$('html, body').animate({
scrollTop: $(this).offset().top
}, 0.1);

also tried these and listening for 'focusin'.
e.stopImmediatePropagation()
window.scrollX

scrollX is as expected when clicking the buttons, but it seems the event is too late when tabbing to them.

I have no idea what you're trying to do

literally was joking when I wrote this and reinstalling expecting nothing, fucked up my php dependencies for a brief moment, reinstalled it, tried to install what I wanted initially, same xml error, install php-xml, get php-curl error, install php-curl error, get php-zip error, install php-zip get it through

cool

I hope you're targeting 360x640 first user

Attached: 1537436212339.jpg (1312x774, 169K)

Update DotEnv File
In your root directory, there is a file called .env, you should see something similar to the following:

###> doctrine/doctrine-bundle ###
DATABASE_URL=mysql://{DATABASE_USER}:{DATABASE_PASSWORD}@{DATABASE_HOST}:{DATABASE_PORT}/{DATABASE_NAME}
###< doctrine/doctrine-bundle ###

I have no idea where the .env file is, it's for symfony 4.

nevermind, guide might not have been for symfony 4, I'll search for another tomorrow, going to sleep now

so i have a sticky 'header' with buttons and inputs. when scrolled away from the top of the page, if i tab through the elements, on focus of buttons, the page is scrolled back up to the top; however, if i click those same buttons while scrolled away from the top of the page, no scroll even takes place. i want to prevent the scrolling that occurs in the former condition described.

each line of code i posted was basically a separate attempt to accomplish what i want without any context. so i've tried using:
- preventDefault()
- focus() with a preventScroll option
- stopImmediatePropagation()
- scrolling the page back to its position before scroll to the focused button using the scrollX attribute

my only other idea is to listen to key downs and try to either prevent events or manually facilitate them, but that seems like overkill. i just don't want the page to jump around when navigating through a sticky element with the keyboard.

I am currently taking the Django Python Bootcamp course on Udemy. Do you guys have any other suggestions for webdev courses I can take online?

Also, just got to the bootstrap part. Is bootstrap used everywhere in the industry since it's so easy to build a nicer site with it?

so the keydown approach works but wtf i have to listen to every key and crawl through the html structure to switch between the subset of elements within the sticky element.

i tried to simplify it by acting on the keyup events where the target is the destination of the inevitable focus event, but its too late by then.

Is using node.js the most efficient way to make a real-time multiplayer browser game, considering you can write the game logic once and use the same code client- and server-side?

>use the same code client- and server-side
You shouldn't need to have the same logic on the frontend and the backend in the first place.

>God demanded 640 by 480

Attached: complete-gods-temple.jpg (350x350, 31K)

is that the old iphone resolution or something ?

how? he always responded to those with php questions and didn't shit on other people needlessly

Is this what you wanted?
codepen.io/user/pen/oazeQL?editors=0010

that's what everyone truly wants

What is the best way to learn html/css? I just need to learn to make my own startpage. Should I start with freecodecamp or I need to read something before?

Just start FCC
There is a lot of resources everywhere, try to remember stuff but don't be discouraged if you can't remember everything, you will be referencing a lot of material, and you'll get better through repetition. Focus on how things work together

Thanks user !
Although, wouldn't it be counter intuitive UX-wise to suddenly display a login form to the user because the token expired ?

is the sid in the cookie always the first 40 character, be careful with the info, my session login hangs on one split function line

What's a good domain name for a personal portfolio?

>FirstnameLastname
>LastnameFirstname
>FLastname
>FirstnameL

And what's a good domain suffix for a personal site, .com, .org, .net, .me, .info, etc?

Attached: akarin.gif (360x640, 403K)

no one gives a shit

i realize it doesnt make a big difference but i have a bunch of options available for registering a domain and might as well make the optimal choice

firstnamelastname.me i've seen used a lot for portfolios, and it looks good if you have a short/nice full name. .com would of course also be acceptable.
avoid .org, .net and especially .info

probably wouldn't use any of the other examples you posted.

>domain suffix
protip: it's a TLD (top-level domain)