|
MREBoy posted:Soliciting help with CSS ok in here or is there another suggested thread ? has to do with width/placing of something on a page CSS is part of web dev, so ask away.
|
#
?
Sep 11, 2023 01:35
|
|
|
|
| # ? Apr 30, 2024 03:51 |
|
|
ok so - I try to maintain a 2+ year old abandon-ware'd Node.js app related to a game I play (https://forums.somethingawful.com/showthread.php?threadid=3893821). It's a type of real-time collaborative map surface you can do stuff on. In the upper right corner is a button you can click that drops down a menu that lets you click an area name to move to it w/o having to zoom/scroll. Game is going to be updated in about a month and the # of things in this drop down box is going to have to be expanded so that what is now 7 columns will become 9. Based on previous attempts at messing with things I know this drop down box is a fixed width. I have a general idea on how to add the new info but not how to expand the box width.  I poked around in Firefox F12/element inspection and from what I can see the following bits of code "covers" this box when I mouse over it: code:  I have a copy of the source for this site and searching through it for dropdown or panbody or btn-group has hits in 3 different CSS files. No idea where to start. If needed/wanted I can give you access to the working site and/or the github repo for the source. Feel free to DM me here or on Discord:just "mreboy"
|
|
#
?
Sep 11, 2023 03:48
|
|
|
Not sure how it works in FF but in chrome if you look at the computed styles tab it will show you which CSS rules it used. I'm sure FF has something similar
|
|
#
?
Sep 11, 2023 05:18
|
|
|
I want to build a site for a fledgling sportswear brand of mine and get better at webdev. I've been playing around with this template , and I can work with it on my local machine, but it's been a huge pain in the rear end to deploy. I'm trying to get the medusa back-end to run on AWS via Microtica, but I had to dig into Microtica's discord to find a fix for build failure. At this point, the deployment is stuck on "creating," and documentation is sparse. Any other free ways to host this backend? I plan on hosting the frontend and possibly the admin panel on netlify, where I currently have the domain parked. I'm also open to rethinking the stack. For reference, I have some familiarity with React and would like to stick with that, and the company will most likely be using Shopify logistics for shipping/returns etc.
|
|
#
?
Sep 12, 2023 00:12
|
|
|
Head Bee Guy posted:I'm also open to rethinking the stack. For reference, I have some familiarity with React and would like to stick with that, and the company will most likely be using Shopify logistics for shipping/returns etc. not to blow up what you've got so far, but shopify has their own react-based framework called hydrogen, might be worth taking a look: https://shopify.dev/docs/custom-storefronts/hydrogen they have been investing big in it over the last year or two and are doing a lot of cutting edge react-y things, but i have no experience with it myself so can't actually vouch for it. just always seemed like a neat thing if you're already invested in that world
|
|
#
?
Sep 12, 2023 00:52
|
|
|
Shopify bought Remix last year and they're going all in on that (as mentioned at the start of the Hydrogen docs). Remix is a loving awesome framework imo, they've gotten a lot of things right that NextJS got wrong https://remix.run/ https://kentcdodds.com/blog/why-i-love-remix If you want to run it on AWS I would look into deploying it with SST: https://sst.dev/ and https://docs.sst.dev/start/remix
|
|
#
?
Sep 12, 2023 01:48
|
|
|
prom candy posted:Not sure how it works in FF but in chrome if you look at the computed styles tab it will show you which CSS rules it used. I'm sure FF has something similar Poked around a bit more with the Firefox inspector - Yay: found an entry in a CSS file that controls the box width, changing a 100% to 150% expands the box nicely. Boo: Half the box is now cut off to the right. Yay: Found another line that reads "position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(-316px, 29px, 0px);", changing the -316px in the inspector to about -490 drags the box over to the left enough that you can see it again. Boo: This -319px line is in something called "inline" and appears to be generated automagically somehow so IDK how to change this. 
|
|
#
?
Sep 12, 2023 03:29
|
|
|
That means the style is on the HTML tag itself via the style attribute, and is often changed/set with JavaScript.
|
|
#
?
Sep 12, 2023 04:31
|
|
|
Guys, I just completed my web dev bootcamp. I feel empowered and accomplished but also completely drained, lol. I appreciate all the support from you guys. It's also been really interesting going back and rereading through this thread now that I understand a bunch of it. I'm looking for a junior role now too, If you guys know of anything out there: https://forums.somethingawful.com/showthread.php?threadid=3875694&pagenumber=2#post534526009
|
|
#
?
Sep 12, 2023 16:16
|
|
|
Anyone have a CDN recommendation for designers on my team to use when creating marketing emails? Apparently they've just been uploading them to a client's WordPress site and it's resulted in some Bad Times. I'm mainly interested in something that takes the least amount of my time as possible to set up, and is simple enough to interact with that designers' heads won't explode when they need to upload/edit images.
|
|
#
?
Oct 3, 2023 16:31
|
|
|
Sounds like Fastly? That's supposed to be the near zero config CDN.
|
|
#
?
Oct 3, 2023 17:10
|
|
|
I'm creating a new website for a business I've created. It's been about 15 years since I've touched anything directly in regards to creating a website and there's a lot of information out there which is a bit overwhelming. I just want to have a dynamic page set up at abcxyz.com (have someone else desgining) and then a shopify storefront at abcxyz.com/shop (which I've already created) but right now nothing is pointing anywhere relevant. I have the domain purchased through IONOS, a shopify account and have been looking at using AWS for the rest but the domain management settings are confusing. To get my domain set up in AWS it's asking me to "configure the following CNAME record associated with your domain and verify that the CNAME record exists in your Domain Name Server (DNS) file". Do I do this on Ionos's side in their DNS settings page? I can see some CNAME records as "_domainconnect" and "autodiscover" but I don't know what I'm meant to change. Do I delete this and add in the CNAME record from AWS? I then want to make sure my shopify page points to the right place but most of that seems to suggest moving my domain over to Shopify itself which doesn't sound like what I want to do.
|
|
#
?
Oct 25, 2023 13:37
|
|
|
Don't use AWS. Sure it's a great service, but you do not sound like the target audience – it's intended to be used by devs/IT and is not easy to set up or configure if you don't do this sort of thing all the time. With the way you've described this: quote:a dynamic page set up at abcxyz.com (have someone else desgining) and then a shopify storefront at abcxyz.com/shop (which I've already created) but right now nothing is pointing anywhere relevant. You want your homepage and your storefront on the same server since they both share the same domain and the shop is just in a subdirectory. Shopify can handle non-shopping-related pages, so I don't see any reason why you and your designer couldn't just use Shopify for everything, I've certainly done so in the past. Having a single domain name point to two different servers (AWS for one page, Shopify for everything else) is technically very complicated to achieve. If you go this route you can just follow Shopify's directions for everything, and if you're confused about DNS records you can ask their tech support for help. They work with astoundingly non-technical people all the time, so they should be able to help out.
|
|
#
?
Oct 25, 2023 14:15
|
|
|
kedo posted:Don't use AWS. Sure it's a great service, but you do not sound like the target audience – it's intended to be used by devs/IT and is not easy to set up or configure if you don't do this sort of thing all the time. That answered a bunch of my questions so thanks. I just thought AWS was fairly ubiquitous in the industry so was the default. Didn't realise Shopify could host other pages too.
|
|
#
?
Oct 25, 2023 14:53
|
|
|
Fists Up posted:That answered a bunch of my questions so thanks. I just thought AWS was fairly ubiquitous in the industry so was the default. Didn't realise Shopify could host other pages too. If for some reason you really need to go down the route of having the website and store front disconnected, putting it on a subdomain (store.abcxyz.com) would probably be a lot easier path. But with what everyone else said, just use shopify since you're already there. It will make your life easier to only have a single point of entry to manage it.
|
|
#
?
Oct 25, 2023 15:02
|
|
|
Alright, so I'm making a goofy web-1.0 site. Literally just at one html and one css file stage. I want a pixel art background image. I've set image-rendering to pixelated for the html element, which works in firefox for both background-image and <img> elements. In safari, it renders <img> elements like I want but it does not render the background how I want. So basically: code:
|
|
#
?
Oct 28, 2023 22:27
|
|
|
Eeyo posted:Alright, so I'm making a goofy web-1.0 site. Literally just at one html and one css file stage. If the image is not being scaled at all, it won't pixelate. Not sure if that is what happening, but that's what should happen (which is nothing.)
|
|
#
?
Oct 29, 2023 01:24
|
|
|
Yeah, maybe scale with something like code:
|
|
#
?
Oct 29, 2023 02:35
|
|
|
image-rendering does nothing unless the image is scaled in some way. It sets the scaling algorithm, it's not a visual filter for the image in general.
|
|
#
?
Oct 29, 2023 02:43
|
|
|
Hmm it’s probably something hosed up with the way my MacBook is trying to render it then. The background image isn’t scaled, it’s just set as the background image with tiling. Same with the test image I’m including. But it’s still blurry. The image-rendering has some effect on how the page looks. I agree that it should not though, so I’m probably asking the wrong question.
|
|
#
?
Oct 29, 2023 03:47
|
|
|
I should clarify that I already have the pixel art background and image. They’re pngs and I know that they are low resolution, have small palettes and no transparency (other than 100% transparency of the background). It’s just that it looks blurry when I include those things, except in Firefox when I include the image-rendering: pixellated. So it’s probably fundamentally something to do with the high-dpi display I have.
|
|
#
?
Oct 29, 2023 03:55
|
|
|
If you're using a hi-dpi display then things are getting scaled even when you're not explicitly scaling them yourself. It's kind of weird if browsers are ignoring image-rendering in that scenario.
|
|
#
?
Oct 29, 2023 11:59
|
|
|
Ok found a decent fix: just used image-set() with a 2x pre-scaled version. https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set
|
|
#
?
Oct 29, 2023 21:21
|
|
|
I've read many articles but I could use ya'lls opinions – are there any good and, more importantly, standards compliant ways to omit a label on a text input field while still adhering to WCAG 2.2 AA? The designers on my team are loath to ever include a label on a text input, they always want to use placeholders. I do my best to keep the fields as compliant as possible (ie. aria-label, hidden screen reader labels, etc.) but based on my experience and everything I've read suggests that, no, there still needs to be a visible label on each input. Most of our clients care about accessibility, and I'm in a position where I can make a blanket rule about how fields should be approached, so I'm looking for thoughts before I go and start an argument. Can anyone with a better brain for accessibility than me confirm that visible labels are, in fact, an absolute requirement? I've thought about going the moving label/fake placeholder route (where the label pretends to be a placeholder and then, upon field focus, it moves up and out of the way of the field which was all the hotness maybe 5-10 years ago), but most of the forms I deal with allow for non-devs to edit the label text, so there's a distinct possibility of someone putting 200 characters into a label or something like that.
|
|
#
?
Nov 13, 2023 16:18
|
|
|
As a general rule, you should always include a text label on your inputs. The only time you can reasonably exclude them is if there are other context clues that make it clear what the intent of the input is, such as submit buttons that are paired exclusively with that input, or iconography. For example, google's homepage doesn't put a label on their search field, because the icon on the input and labels of submit buttons make it obvious what that input is for. You should still include an aria label for screen readers even if you find a case where you can exclude the visual label though. kedo posted:I've thought about going the moving label/fake placeholder route (where the label pretends to be a placeholder and then, upon field focus, it moves up and out of the way of the field which was all the hotness maybe 5-10 years ago) This is what Material Design does. It's fine, but it still requires that designers accommodate for the space of the label when the field is populated by a value. kedo posted:most of the forms I deal with allow for non-devs to edit the label text, so there's a distinct possibility of someone putting 200 characters into a label or something like that.
|
|
#
?
Nov 13, 2023 18:38
|
|
|
Thanks, I appreciate the input! 
|
|
#
?
Nov 14, 2023 15:35
|
|
|
I see what you did there (assuming it was intentional).
|
|
#
?
Nov 14, 2023 18:58
|
|
|
I wish. I am constantly congratulated on my great puns and I never know I'm making them. My wife claims I have an excellent brain for puns but I'm just not in control of it, which, I guess, okay...?
|
|
#
?
Nov 14, 2023 19:03
|
|
|
I have a bulky xml file, which is the source of my data for a react web app. Is there a good way to render xml data with react that doesn’t involve converting the data to a JavaScript object or otherwise doing a whole bunch of processing work in the browser (eg, parsing the xml and translating tags and attributes into react elements)? I have control over the data source, and I’ve already written a script to convert to json, so whether the backend delivers xml or json is up to me at this point…but I’m not a full time developer and want to make sure I’m not missing something fundamental about working with xml in react. I’m vaguely familiar with xslt, but I’m trying to do more than generate a static page that displays the data.
|
|
#
?
Dec 2, 2023 20:33
|
|
|
Any of ya'll worked with the Google Maps API and custom marker images recently? I'm experiencing this really dumb bug and I can't for the life of me figure it out. I have a bunch of map markers with custom images. They need to be animated, so I have a different animated PNG image for the default (non-animated) state, the mouseover state, and the mouseout state. I swap icons based on mouse events, as per Google's recommendation. However when I mouseout of one marker, it triggers the animation on all markers that share that same icon. See this video as an example. The code (with some unnecessary parts removed): JavaScript code:Any ideas? I'm going nuts over here. kedo fucked around with this message at 20:51 on Dec 5, 2023 |
|
#
?
Dec 5, 2023 20:27
|
|
|
kedo posted:Any ideas? I'm going nuts over here. Most likely the issue is being caused by a shared reference to an object somewhere where there shouldn't be, but I wasn't able to identify the origin of it, based on your modified code sample. Does anything change if you call marker.setIcon() instead of this.setIcon() I would also try attaching the event directly to the marker (which looks like it should be supported, according to the docs) JavaScript code:
|
|
#
?
Dec 5, 2023 22:45
|
|
|
Thanks for the input! I tried everything both I and copilot could think of and eventually gave up and converted the whole project over to use Google’s newer AdvancedMarkerElement instead, which has the added benefit of being way more pleasant to style. So a win in the end, but what a waste of two days.
|
|
#
?
Dec 6, 2023 21:21
|
|
|
Mush Mushi posted:I have a bulky xml file, which is the source of my data for a react web app. You can just do something like code:I do this in my codebase. I've got a file structure code:code:huhu fucked around with this message at 06:36 on Dec 7, 2023 |
|
#
?
Dec 7, 2023 06:31
|
|
|
Does anyone have any experience with iframes and CSP? I'm having this issue at work and it's just driving me crazy. Our site has a pretty strict CSP, and it includes a list of frame-src entries for which domains can be embedded as iframes. We're switching over from stripe to an alternative payment provider. When you pay with a credit card, your bank's 3DS page gets shown by the payment provider (stripe, for example) in an iframe. Normally, your CSP would prevent these iframes, but stripe avoids this by first creating their own iframe (with no CSP), which our CSP allows, and then that iframe displays the 3DS iframes for various banks. The new payment provider (adyen) just tries to directly show the 3DS iframes within our page. Of course, our CSP blocks this. They've told us to either relax our CSP (no go) our keep our own list of bank domains and include them in our CSP (unrealistic). So our idea was to emulate stripe and create a subdomain of our own with no CSP that then displays the iframes for banks. Seems like it should work, and from what I've read, iframes shouldn't inherit the CSP of their parent frames. But when our iframe tries to load up the bank's iframe, those get blocked saying they violate the CSP, and then there's a list of the CSP entries of the parent frame. We've even tried setting frame-src to * in the child frame, but to no avail. Also tried using a different tld, same thing. So should iframes inherit the CSP of their parent frames or not? Lots of docs online (although they're pretty scarce about the topic) say they shouldn't, but to me it seems like they do. Is there a way around this? If you've come this far reading thank you. I don't really expect people here to waste a lot of time on this issue without being paid, I'm just wondering if maybe someone has had a similar experience and can point me in the right direction.
|
|
#
?
Dec 7, 2023 14:40
|
|
|
So what's exactly going on with React? I tried to figure out earlier as to why there weren't any releases since mid-2022. Turns out the core dev team hosed off from Facebook to go work at Next.js. What does that mean for React? I've seen they're working on server component support, but a) I don't care for that, and b) why does it take that long?
|
|
#
?
Dec 7, 2023 19:46
|
|
|
The people who work at Vercel are still React Core Team members I'm pretty sure. Aside from RSC they're supposedly working on React Fiber but everyone inside React is super hyped on RSC at the moment.
|
|
#
?
Dec 7, 2023 23:02
|
|
|
Looking up React Fiber, it’s already in React 16. 
|
|
#
?
Dec 8, 2023 08:07
|
|
|
They're working on React Forget I think, which would make it so you don't have to use carefully use useMemo and useCallback for render optimization, which would be great
|
|
#
?
Dec 8, 2023 14:53
|
|
|
Oh right, React Forget. I keep getting those mixed up.
|
|
#
?
Dec 8, 2023 15:38
|
|
|
|
| # ? Apr 30, 2024 03:51 |
|
|
Guys I need some help. My project eCommerce website is almost complete but my github is messed up and I dont know how to fix it. My frontend branch is the one I've been pushing to but it says its 3 commits behind main, and 3 commits ahead of main. I don't understand why its like this. I just need the most recent frontend branch commit (added search bar functionality) to overwrite everything and become the main, if that makes sense. Could one of you take a quick look at my repo and offer some guidance? I'm not 100% on what git commands I need to fix this and I dont want to mess up my progress. https://github.com/dave4283/ecom_personal_project/tree/frontend
|
|
#
?
Jan 4, 2024 19:57
|
|