Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
MrMoo
Sep 14, 2000

PDF is what Gmail and Google Docs presents, no need to try to be smarter.

Adbot
ADBOT LOVES YOU

Combat Pretzel
Jun 23, 2004

No, seriously... what kurds?!

Tei posted:

Using html to print is always going to run in problems, but theres things you can do to *influence* that the result is better. Things like hinting page changes.

HTML is not designed to be printer friendly, you have PDF for that. PDF have full control of the printing and can solve most egregious problems. You can render a PDF using PDF based primites, but you could have sections rendered from a HTML using a library that do the conversion from HTML to PDF, usually that saves time and don't break layouts. Generally doing so mean you can't use all the CSS, but a limited set the library can understand. And/or like in emails, rely on dumb DHTML 4.0 syntax or even HTML 3.0 syntax to get things trough.
What I'd typically want is a single chart, maybe with a small datagrid with detail values, on a single page, and it be minimally reactive to changes in the print preview, but none of that ever really works right. Except for Firefox. Probably doesn't help that I'm using display:flex for layout and to maximize space usage of the page.

(Nevermind I'm still stuck to that loving ECharts component resizing properly to the available layout surface, say in a flex box. :[ )

I'd really love for what's on screen (minus UI stuff) to translate mostly 1:1 to paper. I guess I'll look into the PDF stuff over the weekend.

Tabular reports using old school tables works just fine, tho.

Combat Pretzel fucked around with this message at 13:24 on Aug 19, 2021

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Combat Pretzel posted:

What I'd typically want is a single chart, maybe with a small datagrid with detail values, on a single page, and it be minimally reactive to changes in the print preview, but none of that ever really works right. Except for Firefox. Probably doesn't help that I'm using display:flex for layout and to maximize space usage of the page.

(Nevermind I'm still stuck to that loving ECharts component resizing properly to the available layout surface, say in a flex box. :[ )

I'd really love for what's on screen (minus UI stuff) to translate mostly 1:1 to paper. I guess I'll look into the PDF stuff over the weekend.

At work we have a "download PDF" button that renders the page (which is charts and tables) on the server via puppeteer, PDFs it, and sends it back as a file. Took 1/100th the time of trying to do print CSS with charts and tables.

barkbell
Apr 14, 2006

woof
i use a media query to specifically target print to create a separate print stylesheet.

i display: none a bunch of extra stuff that doesn't need to be printed. base 12px for font size.

flex and grid are meant to be responsive to different screen widths. the printed page is predictable in comparison and you should try setting up rules with % widths and whatnot.

there are also a bunch of css rules specifically for print, make sure to check browser support for these different rules

good link i just found
https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/

alternatively, use an html to pdf lib

Data Graham
Dec 28, 2009

📈📊🍪😋



Still remember printing a white-text-on-black-background page in 90s-era Netscape or something and it used all the lab's toner

barkbell
Apr 14, 2006

woof
oh ya, ur background images will not print so i hope u made ur poo poo a11y in terms of text color on the background

Violator
May 15, 2003


Lumpy posted:

At work we have a "download PDF" button that renders the page (which is charts and tables) on the server via puppeteer, PDFs it, and sends it back as a file. Took 1/100th the time of trying to do print CSS with charts and tables.

Yeah, in the past I’ve found out what the print out was going to be used for and then generated a PDF of only the needed data formatted specifically for a PDF to saved/archived/printed. Saved a bunch of time made and more sense for the client’s workflow than making the entire site or all pages generically printable since they only printed very specific data.

Not really applicable to this issue but it was a nice change of perspective for me at the time.

Combat Pretzel
Jun 23, 2004

No, seriously... what kurds?!
I suppose if you can open a PDF into a new window via <a href>, I guess why not.

Bruegels Fuckbooks
Sep 14, 2004

Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

Combat Pretzel posted:

How does everyone go about making things printable?

I'm trying to design the report pages to be reactive to screen and print, but every browser has its quirks in how it handles printing. What pissed me off yesterday was when I describe the page format in CSS, Microsoft ChrEdge for instance reacts to it in the print preview and adjusts parameters, whereas Chrome, which is almost the same browser, minus MS modifications, shits all over it (and looking for the cause of it leads to an "active" entry on Google's bugtracker that goes 9 years back). Means if I say the page is A4 portrait, ChrEdge selects said paper format (if the driver/printer supports it) and locks out the orientation setting, whereas Chrome picks the default letter format of the default print driver, last used orientation and also fucks up the layout royally. Firefox also ignores the page (and orientation) format, but at least they have the courtesy of rearranging the page layout to look proper.

I mean what in the gently caress.

When I look somewhat deeper into things, I keep running into PDF generators, that forcibly rerender all the HTML in background(?). How does that work? I want the pages to be printable out of the browser, not make users download a PDF instead. Will the generated PDF be opened directly in print preview?

yeah i've gotten burned by not having media query css work right cross platform and went with PDF instead. ends up being a lot easier.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
Just making sure you know that you can target printing specifically with media queries. That includes hiding stuff you don’t want to print with display: none

Eezee
Apr 3, 2011

My double chin turned out to be a huge cyst

Combat Pretzel posted:


When I look somewhat deeper into things, I keep running into PDF generators, that forcibly rerender all the HTML in background(?). How does that work? I want the pages to be printable out of the browser, not make users download a PDF instead. Will the generated PDF be opened directly in print preview?

No, it will just give you the PDF as a download, which is great if you just need to save reports or something. It also loving sucks to properly do. We had to implement that feature for a client recently for printing out some rather complicated pages and the only way we managed to make it not look like poo poo was using Chrome in headless mode to print the page and then make it available for download to the user. Every library we tried before had some bad rendering issues.

worms butthole guy
Jan 29, 2021

by Fluffdaddy
Is react native still the best way to make a "app" version of a website?

CarForumPoster
Jun 26, 2013

⚡POWER⚡

Fixins posted:

Is react native still the best way to make a "app" version of a website?

Depends. There are progressive web app builders that have a lot of features like glideapps.com, but progressive web app is probably the term to Google for a trade study.

Combat Pretzel
Jun 23, 2004

No, seriously... what kurds?!
Thanks for all the printing tips, guess I have plenty of things to try come Monday.

Also, I start to notice not caring about anything web coding for the last decade. So much things. I was trying random things this weekend to ease my poo poo at work. Eventually I notice somewhere in the devtools a notice that my test pages run in quirks mode. I figure I shouldn't want that, so I add the doctype and everything goes to poo poo. More reading up about things ensued. :(

Jolo
Jun 4, 2007

ive been playing with magnuts tying to change the wold as we know it

I'm pretty new to learning javascript and html, but generally I've been testing everything by putting all of the javascript between html tags and running tests in the console of a webpage using the live server plugin in Visual Studio Code.

Is it possible to run tests directly from a javascript file? That seems like something that is possible and the class I'm following online says it is using the Javascript Debug Terminal in Visual Studio, but I haven't had any luck. I figure I'm not typing the correct thing in the terminal window to do what I'm trying to do. Here's what I'm looking at:



I expect "add(1,2)" to execute the function and give me a "3" but there's a syntax error there instead. The calculator.js file that is open there is located inside the odin../exercises.../calculator folder listed down below. What am I missing here? Thanks.

Impotence
Nov 8, 2010
Lipstick Apathy
You are in terminal, not debug console, presumably (see tabs)

Jolo
Jun 4, 2007

ive been playing with magnuts tying to change the wold as we know it

Biowarfare posted:

You are in terminal, not debug console, presumably (see tabs)

I see. I'm unable to type anything in the Debug Console. The text input field says "Please start a debug session to evaluate expressions" I'm not really sure how to start a debug session. I thought clicking the run and debug option on the side would kick that off but it doesn't seem to actually run it. When I click any of the run options the page doesn't stop so that I can test out add() even if I put in breakpoints.

fawning deference
Jul 4, 2018

Jolo posted:

I see. I'm unable to type anything in the Debug Console. The text input field says "Please start a debug session to evaluate expressions" I'm not really sure how to start a debug session. I thought clicking the run and debug option on the side would kick that off but it doesn't seem to actually run it. When I click any of the run options the page doesn't stop so that I can test out add() even if I put in breakpoints.

You can use dev tools in your browser and run/test a lot of stuff. If you use the Open in Live Server extension for VS Code, you can keep your browser open that way, run your stuff, and open your dev tools to see what's going on/if it worked. I console log and look at dev tools all the time, step by step, to make sure everything is cracking.

Impotence
Nov 8, 2010
Lipstick Apathy
I think your debug might not really be debuggable because you just have a bunch of function definitions, running it would step through to the end instantly and exit.

If you want to be able to just do add(x,y) manually you might want something more like a REPL (just type `node`)

Jolo
Jun 4, 2007

ive been playing with magnuts tying to change the wold as we know it

fawning deference posted:

You can use dev tools in your browser and run/test a lot of stuff. If you use the Open in Live Server extension for VS Code, you can keep your browser open that way, run your stuff, and open your dev tools to see what's going on/if it worked. I console log and look at dev tools all the time, step by step, to make sure everything is cracking.

I'd been using that for a bit but it seemed like for something really simple like filling in these functions that I could get away with not opening a browser console like that. After trying out the REPL suggestion below though, I might just go back to doing that because you can save changes and go right back into the console and see if they work whereas with node you have to exit node and load the whatever.js file again for changes to work.

Biowarfare posted:

I think your debug might not really be debuggable because you just have a bunch of function definitions, running it would step through to the end instantly and exit.

If you want to be able to just do add(x,y) manually you might want something more like a REPL (just type `node`)

Thanks for this. The comment about it ending instantly makes perfect sense because it's not actually doing anything. I tried out that node suggestion but I might just go back to using the live server because it saves the changes instantly on the console you're using.

If I define the subtract function on that .js file, I have to type .exit, node, .load calculator.js, before trying subtract(3,1) while the live server is just ctrl-s and then try it in the web console.

Thanks to both of you for taking a sec to help me out. Sometimes I end up wasting a bunch of time trying to get something like this to work the way I think it should work instead of just using the way that has been working consistently already.

HappyHippo
Nov 19, 2003
Do you have an Air Miles Card?

Data Graham posted:

Still remember printing a white-text-on-black-background page in 90s-era Netscape or something and it used all the lab's toner

I remember hitting a chrome bug about ten years ago where every page was printed as a totally black square

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
I have a theoretically question. Our product at work lets people set up a modal to display on their website and the way it works in our SDK we provide is, we get the HTML from the API and paint it as an iframe with that HTML as the inner content. The catch is that this iframe could be any width they want, so if the customer is also adding <style /> tags to their markup, the media queries they may write are relative to the iframe width, not the native browser.

So my question is, what's the best way to approach this? My best idea is just lock them into widths we defined (for example 50% by default, then grow the iframe to 100% at smaller sizes) and then they write percentage based CSS from that. That way they don't really have to write responsive CSS at all.

The other annoying thing is that iframes default to 300px wide, so unless they specify a px size for their content, the iframe is going to stay 300px wide.

kedo
Nov 27, 2007

Here's a question for the thread at large – how do you pronounce WCAG when you have to speak the acronym out loud? I've been calling it "double-u cag" for a long time, and I often hear people just spell it out ("W. C. A. G."), but I had a client today call it "we cag" and I was stumped as to what she was talking about.

Impotence
Nov 8, 2010
Lipstick Apathy
i just say w c a g

my favourite is a previous freelance client that would call sql 'squeal' and try to work it in every possible sentence

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
I've only heard it out loud once during a conference and the speaker was saying "wuh-cag"

CarForumPoster
Jun 26, 2013

⚡POWER⚡

kedo posted:

Here's a question for the thread at large – how do you pronounce WCAG when you have to speak the acronym out loud? I've been calling it "double-u cag" for a long time, and I often hear people just spell it out ("W. C. A. G."), but I had a client today call it "we cag" and I was stumped as to what she was talking about.

We litigate website ADA cases (defense side of course). I believe the proper pronunciation is double U-kag (as in bag)

timp
Sep 19, 2007

Everything is in my control
Lipstick Apathy
I'm trying to communicate an issue to my site's web developer, but I guess I haven't found the exact right way to ask for what I actually want yet. Here's a small example of some of our problems:

- Our H1 color is white, the same color as our background.
- Our H3 tag is much smaller than our H4 tag
- Trying to make two columns in the Wordpress page editor literally never works and always leaves us with the text in the 2nd column wrapping down below the first column instead of next to it
- Padding/margins are all generally wonky
- Padding/margins/captions around images look pretty bad too

Another issue is, in the past when we've asked for some of these small changes, the change is made on that specific page (or type of page), but not on others. For example, the blog pages will look better, but the change won't apply to our regular pages.

I'm like 99% sure this all amounts to "All elements in our Global CSS template need to be thoroughly defined" but I must be wrong, because I've asked for that and he doesn't understand. I thought I could meet him more than halfway by defining these all for him on my end and then giving him the code so he can just do...whatever needs to be done to apply them in the backend (some sort of magic? idk), but I can't even find a list that's like "here are the 15 things you need to define for every website CSS template". Something like that must exist, right?

I'm at my wits end here. What should be my next move in getting our website to not look like poo poo anymore?

barkbell
Apr 14, 2006

woof
it sounds like you have multiple issues and just try to work on communicating each one individually with specific examples. im guessing it should be the web devs job to identify where the failure is coming from and fix it

timp
Sep 19, 2007

Everything is in my control
Lipstick Apathy

barkbell posted:

it sounds like you have multiple issues and just try to work on communicating each one individually with specific examples. im guessing it should be the web devs job to identify where the failure is coming from and fix it

I was actually trying to look out for him by bundling all of this up and saying "here ya go, please install that in the code or w/e" instead of saying "Okay, fix our H1 tags. *waits 3 days* "Okay that's done, great job! Now fix our H3 tags. *waits three days*"

But if it actually makes more sense to tackle these on a case-by-case basis, I can certainly structure it that way. I assumed they were all kind of related issues, no?

kedo
Nov 27, 2007

timp posted:

I'm trying to communicate an issue to my site's web developer, but I guess I haven't found the exact right way to ask for what I actually want yet. Here's a small example of some of our problems:

- Our H1 color is white, the same color as our background.
- Our H3 tag is much smaller than our H4 tag
- Trying to make two columns in the Wordpress page editor literally never works and always leaves us with the text in the 2nd column wrapping down below the first column instead of next to it
- Padding/margins are all generally wonky
- Padding/margins/captions around images look pretty bad too

Another issue is, in the past when we've asked for some of these small changes, the change is made on that specific page (or type of page), but not on others. For example, the blog pages will look better, but the change won't apply to our regular pages.

I'm like 99% sure this all amounts to "All elements in our Global CSS template need to be thoroughly defined" but I must be wrong, because I've asked for that and he doesn't understand. I thought I could meet him more than halfway by defining these all for him on my end and then giving him the code so he can just do...whatever needs to be done to apply them in the backend (some sort of magic? idk), but I can't even find a list that's like "here are the 15 things you need to define for every website CSS template". Something like that must exist, right?

I'm at my wits end here. What should be my next move in getting our website to not look like poo poo anymore?

Get a new theme and/or a new developer.

A lot of these sound like the byproducts of a poorly made theme, which usually means it was made by a bleh developer. For example, why would an H1 be white? Probably because it's used on top of a background image/color in a header somewhere important on the site, and the developer said ":downs: hurr durr, I make all H1s white instead of just this one." The other items all sound similar, someone who doesn't know or care enough to make things look nice is just applying styles hodgepodge to satisfy your (or whoever's) requests, or the needs of the theme, without giving them much thought or testing.

timp
Sep 19, 2007

Everything is in my control
Lipstick Apathy

kedo posted:

Get a new theme and/or a new developer.

A lot of these sound like the byproducts of a poorly made theme, which usually means it was made by a bleh developer. For example, why would an H1 be white? Probably because it's used on top of a background image/color in a header somewhere important on the site, and the developer said ":downs: hurr durr, I make all H1s white instead of just this one." The other items all sound similar, someone who doesn't know or care enough to make things look nice is just applying styles hodgepodge to satisfy your (or whoever's) requests, or the needs of the theme, without giving them much thought or testing.

1000%, you're spot on. The H1 is actually a solved case; I believe in early style guides they were supposed to always appear with a colored banner behind them. At some point somebody didn't like the color of that banner, and now here we are.

The developers who made the site are no longer in the picture, so we have to utilize web dev companies to do the work now. I've already bitched about our current web dev up thread but it seems like we're stuck with him for the foreseeable future, so I'm trying to find the clearest way to communicate what I want to him.

I guess the approach of just handling each of these issues one at a time as they arise is probably the least complicated way to go. Unfortunately I imagine it will probably also be the slowest and most expensive way to go as well.

frogbs
May 5, 2004
Well well well

timp posted:

1000%, you're spot on. The H1 is actually a solved case; I believe in early style guides they were supposed to always appear with a colored banner behind them. At some point somebody didn't like the color of that banner, and now here we are.

The developers who made the site are no longer in the picture, so we have to utilize web dev companies to do the work now. I've already bitched about our current web dev up thread but it seems like we're stuck with him for the foreseeable future, so I'm trying to find the clearest way to communicate what I want to him.

I guess the approach of just handling each of these issues one at a time as they arise is probably the least complicated way to go. Unfortunately I imagine it will probably also be the slowest and most expensive way to go as well.

As someone who gets these kind of requests (and hopefully deals with them well!) i'd vastly prefer to get one email with a list of requests, vs. one email that I solve, then another immediately after it. Obviously people are different, but i'd rather tackle a bunch of stuff at once, vs. little things one by one. At one place I worked we started billing a minimum of 15 minutes per email/ticket, because some clients were sending literally 50 emails per month each with an individual change in it, which became completely overwhelming.

Another thing that comes to mind, have you tried seeing if they'd be up for a call/screen-share to go over everything all at once instead of by email? Sometimes I find that's a lot easier and sets everyone up better for future communication/changes when there's a lot of things that need work.

In any case, hopefully they actually fix your problems this time!

commie kong
Mar 7, 2019

Maybe copy your earlier post into a word doc, reword it and add screenshots and URLs with hard examples.

Add notes in bold that you suspect similar issues are likely affecting other pages too, so any fixes should be applied across the entire site. Make it really clear in writing that these are only examples of specific places you’ve noted occurrences of the issue. Also tell them that any headings that *should* be white (because they have a background) should remain as-is.

Keep that doc to yourself and book a screen share meeting. Don’t mention the doc, but demonstrate the issues and try for as much understanding as possible. Use it as a reference for yourself so you cover everything.

Then after the meeting send a followup email with the doc attached. Say “as discussed, blah blah blah. I have collected samples of issues across the site for easy reference. Please note that these are examples only. The issues are to be resolved site-wide. Please determine all affected pages and resolve accordingly”

If you’re feeling particularly bossy, ask for a deliverable: evidence that the entire site has been checked for your noted issues.

Copy in anyone who cares and hope for the best. What more can you do? You’ve at least demonstrated that you’ve done all you can and ensured that what you’ve asked for is very clear.

(I am not in this industry but it’s what I reckon)

kedo
Nov 27, 2007

Definitely provide all of the edits in one request, don't send them in piecemeal. Be as explicit as you can about what the problem is, where they can find it (URL + screenshot if possible), and what the fix should be. If the same problem exists in multiple locations, try to flag the different spots for the dev. Do you know if the dev has any designers on staff? If so, it might be worth asking them to run the whole site past a designer with an eye towards fixing the site-wide spacing issues, that way you don't have to be on the hook for finding each and every one.

Since you're working with a developer who didn't code this thing in the first place you're in tricky territory. That's almost the worst type of project possible in web dev land (HTML emails are the only thing worse, and then only slightly), so your dev A) may not be all that amazing, and B) is already starting with a tremendous disadvantage because they likely have no clue how the theme was built and are figuring things out as they go along which is a frustrating and slow process. So be patient and err on the side of over communicating.

LifeLynx
Feb 27, 2001

Dang so this is like looking over his shoulder in real-time
Grimey Drawer
I installed Strapi and was messing around with it with NextJS, and now I've gotten good at fetching API data. But I have questions about deploying it to a non-local server.

Strapi comes with SQLite by default. It does what I want it to on my local machine. There's a .tmp directory with a .db file in it, but I think from what I'm reading, if I host it on Vercel, the .db file either won't always sync properly because it might be on a separate "shard" or whatever if there's too much traffic.

The app is a basic event calendar for art shows. Strapi.io is the back-end, which has a data structure of "Art Show" with a date picker and a database table full of artists (with name, social media links, etc.) The idea is I could hand this off to the client and say "Here, you can enter more events and add artists". Which is what I have right now, but I my on my local machine.

Would I be good with SQLite for this or would that not work because of the limitations of writing to it? The biggest issue is that Strapi announced it wasn't going to support MongoDB until a little after Strapi 4.0, which is still at least two months away.

Of course I could always go with WordPress + Advanced Custom Fields + WPGraphQL for this because I know Wordpress like the back of my hand, but I'd like to go full Node.js + MongoDB (because MongoDB is so popular in the industry) instead of a Node.js frontend with a PHP/MySQL CMS/backend. I also have a tendency to overthink things.

worms butthole guy
Jan 29, 2021

by Fluffdaddy
I don't think Vercel can host the database, but I don't see why it couldn't access a SQLite db file. Have you tried uploading it to Vercel to just test it?

LongSack
Jan 17, 2003

I hope this is the spot for css questions.

Does "mix-blend-mode" not work for text in <option> elements?

I have a color picker select and the background of each option is set to the matching color. I'd like the text to stand out from the color (especially for the very dark ones, like black), so I tried mix-blend-mode of "screen". It does not change the text color at all, in any of the browsers I've tried. Developer tools does show that the mix-blend-mode is set on each element.

Here is the code (server-side Blazor):
code:
<div class="cbitem">
	<div class="cbilabel">
		Background
	</div>
	<select class="cbivalue" @onchange="BackgroundChanged">
		<option value="0">Select a Color</option>
		@foreach (var color in _colors)
		{
			@if (color.Name.ToLower() == _selectedCategory?.Background?.ToLower())
			{
				<option class="coloroption" value="@color.Name.ToLower()" selected
						style="background-color: @_colorService.GetHexString(color.Name);">
					@color.Name
				</option>
			}
			else
			{
				<option class="coloroption" value="@color.Name.ToLower()"
						style="background-color: @_colorService.GetHexString(color.Name);">
					@color.Name
				</option>
			}
		}
	</select>
</div>
And here is the css:
code:
.coloroption {
    mix-blend-mode: screen;
}
I've also tried .cbivalue option with no changes.

Is this just something that doesn't work? Is there another way to achieve this? TIA

kedo
Nov 27, 2007

Option elements accept little to no CSS depending on the browser you’re using. Your best bet is to leave them default styled, or use a library like Select2 to provide a complete replacement that can be styled.

LongSack
Jan 17, 2003

kedo posted:

Option elements accept little to no CSS depending on the browser you’re using. Your best bet is to leave them default styled, or use a library like Select2 to provide a complete replacement that can be styled.

Thanks, that’s what i figured. I ended up pulling the selected color out into a separate element outside the select. Not as slick, but it works.

Adbot
ADBOT LOVES YOU

Paul MaudDib
May 3, 2006

TEAM NVIDIA:
FORUM POLICE
what's considered gold-standard for a password hashing algorithm these days? salt per-user+argon2+pbkdf2?

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply