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
HaB
Jan 5, 2001

What are the odds?

dupersaurus posted:

Yeah there's no appetite for stuff like that. If we do a test I'd argue for giving them a small app that functions but violates good practices in places, and have them work/talk through identifying and fixing them.

Yeah this. Even better - find examples of actual bugs you have found in your production code, and sprinkle a few in.

Adbot
ADBOT LOVES YOU

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
Has anyone generated PDFs from React with the following parameters:

- all client side
- the PDF will contain things not on screen (a header and so on)
- the PDF will contain certain elements that are on screen, but are not in the same part of the DOM

My initial thought is to use vanilla JS to create a DOM node, create the "new" stuff, then clone the React nodes I want into it, then use html2canvas -> jsPDF but I would love to hear from anyone who has done such a thing before. All my other PDFing was either done server-side or just exported either the entire page or a single element as-is.

go play outside Skyler
Nov 7, 2005


Lumpy posted:

Has anyone generated PDFs from React with the following parameters:

- all client side
- the PDF will contain things not on screen (a header and so on)
- the PDF will contain certain elements that are on screen, but are not in the same part of the DOM

My initial thought is to use vanilla JS to create a DOM node, create the "new" stuff, then clone the React nodes I want into it, then use html2canvas -> jsPDF but I would love to hear from anyone who has done such a thing before. All my other PDFing was either done server-side or just exported either the entire page or a single element as-is.

What we did for that was to have print-only css rules and just pop up the print dialog with JS. I think both windows and MacOS have the capacity to print to pdf now.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

go play outside Skyler posted:

What we did for that was to have print-only css rules and just pop up the print dialog with JS. I think both windows and MacOS have the capacity to print to pdf now.

That will not work for my use-case, unfortunately.

go play outside Skyler
Nov 7, 2005


Lumpy posted:

That will not work for my use-case, unfortunately.

In that case I'm not sure I would recommend html2canvas. It's an extremely hacky library, that basically reimplements the entire DOM ... it's a browser in a browser and it's terrible.

Also, it's going to render a rasterised version of the page, which kind of defeats the point of having a PDF.

In your case then, I would straight-up implement everything directly with jspdf.

e: sorry, i feel like I'm not being helpful. Obviously, the fastest solution for you is to straight up use this library: https://www.npmjs.com/package/html2pdf.js/v/0.9.0

To have stuff appear only in the PDF and vice-versa, your solution of creating a virtual DOM node that's hidden is the best way to go. But as I've said, with this library, your PDF will basically be 100% raster ... basically a PNG inside a PDF file.

go play outside Skyler fucked around with this message at 21:28 on Apr 22, 2020

Joda
Apr 24, 2010

When I'm off, I just like to really let go and have fun, y'know?

Fun Shoe
That pipeline operator better hurry up and get added to the standard so I can make the full switch to functional when writing javascript.

marumaru
May 20, 2013



Joda posted:

That pipeline operator better hurry up and get added to the standard so I can make the full switch to functional when writing javascript.

it'll probably be added really soon (next 3-5 years)

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself

Lumpy posted:

Has anyone generated PDFs from React with the following parameters:

- all client side
- the PDF will contain things not on screen (a header and so on)
- the PDF will contain certain elements that are on screen, but are not in the same part of the DOM

My initial thought is to use vanilla JS to create a DOM node, create the "new" stuff, then clone the React nodes I want into it, then use html2canvas -> jsPDF but I would love to hear from anyone who has done such a thing before. All my other PDFing was either done server-side or just exported either the entire page or a single element as-is.

ugh yes and it's about as awful as you can imagine.

I was only converting invoice/payment CSVs to tables and adding headers/footers billing info and address information, but yeah like you mentioned I used jsPDF and

https://github.com/simonbengtsson/jsPDF-AutoTable

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Grump posted:

ugh yes and it's about as awful as you can imagine.

I was only converting invoice/payment CSVs to tables and adding headers/footers billing info and address information, but yeah like you mentioned I used jsPDF and

https://github.com/simonbengtsson/jsPDF-AutoTable

Yep, messed around yesterday and got something that looked right, but was a ~14M raster PDF :ohdear:

What I think I'm going to do is clone nodes and build an HTML string, then POST that to a server which will use puppeteer to create a PDF from it and it will send that blob back. We email out reports every week that are similar to what we want, and we do them that way and it works fine. Was hoping to skip a trip to the server, but oh well.

uncle blog
Nov 18, 2012

I've tried publishing my React app to GH pages (following this guide: https://github.com/gitname/react-gh-pages/tree/master), like I've done several times before. The app builds and gets pushed to a gh-pages branch on the repository. The homepage field in package.json is filled out, the repository is public (as I'm a free user). But when accessing the page I get the message: "There isn't a GitHub Pages site here."

Are there any common pitfalls I might've stumbled into?

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself

uncle blog posted:

I've tried publishing my React app to GH pages (following this guide: https://github.com/gitname/react-gh-pages/tree/master), like I've done several times before. The app builds and gets pushed to a gh-pages branch on the repository. The homepage field in package.json is filled out, the repository is public (as I'm a free user). But when accessing the page I get the message: "There isn't a GitHub Pages site here."

Are there any common pitfalls I might've stumbled into?

This is a wild guess, but I'm assuming you need to add a /public to the end of your homepage string in package.json.

or this:



Post the repo

teen phone cutie fucked around with this message at 23:22 on Apr 24, 2020

uncle blog
Nov 18, 2012

I tried adding the public part to the path, redeployed and the page was blank. The console reported it couldn't load some scripts. I removed the public part and redeployed, and was about to post the repo here. But now, for some reason, the page loads as it should. I have no idea why, and that's kind of aggravating. But thanks for your help!

uncle blog
Nov 18, 2012

What are y'alls approach to making a responsive site that needs to adapt to 2+ sizes? Do you use css grids, a framework like bootstrap or hardcoded media queries with custom sizes?

The Fool
Oct 16, 2003


uncle blog posted:

What are y'alls approach to making a responsive site that needs to adapt to 2+ sizes? Do you use css grids, a framework like bootstrap or hardcoded media queries with custom sizes?

I just did this for my personal site using semantic/fomantic ui

It was super easy to do separate layouts for mobile/tablet/desktop breakpoints.

However, I think there’s a good argument for using flexbox and just letting your layout reflow as needed.

go play outside Skyler
Nov 7, 2005


Bootstrap is only really useful if you need all the typography, controls and navigation stuff. If you don't plan to use any of that, then just use flexbox with sane screen widths (which you can steal from bootstrap).

Summit
Mar 6, 2004

David wanted you to have this.
Bootstrap 4 has a very nice set of utility classes and there’s no reason not to snipe them into your own css file if you don’t want the components/typography/etc.

prom candy
Dec 16, 2005

Only I may dance
I just use flexbox

OtspIII
Sep 22, 2002

So I'm an indie game dev who generally pays rent by teaching programming at various colleges, but both the teaching and games markets are absolutely brutal right now (and honestly aren't really financially sustainable even at the best of times). I figure that this is a good time to self-teach a new set of skills, so I'm going to be starting a sort of living-RPG-rulebook project to get myself familiar with modern dev work and get something for my portfolio.

The issue is that front end dev is just horrific ever-shifting quicksand. I've dipped my toe in a few times over the years, making projects using ugly-rear end PHP, node.js, and Ruby on Rails, but I don't have a good sense of what frameworks/etc are actually useful to know at the moment (and likely to stay useful over the new few years), and doing research online is tough since it feels like anything written more than a few months ago is probably outdated and misleading.

What frameworks/IDEs/etc do people suggest I use? I can give more details on the project itself (think lots of modular little windows and user text entry), but I'm almost more interested in understanding the modern dev environment than in getting project-specific advice.

barkbell
Apr 14, 2006

woof
React is a good bet. Look at local job postings.

Vincent Valentine
Feb 28, 2006

Murdertime

OtspIII posted:

So I'm an indie game dev who generally pays rent by teaching programming at various colleges, but both the teaching and games markets are absolutely brutal right now (and honestly aren't really financially sustainable even at the best of times). I figure that this is a good time to self-teach a new set of skills, so I'm going to be starting a sort of living-RPG-rulebook project to get myself familiar with modern dev work and get something for my portfolio.

The issue is that front end dev is just horrific ever-shifting quicksand. I've dipped my toe in a few times over the years, making projects using ugly-rear end PHP, node.js, and Ruby on Rails, but I don't have a good sense of what frameworks/etc are actually useful to know at the moment (and likely to stay useful over the new few years), and doing research online is tough since it feels like anything written more than a few months ago is probably outdated and misleading.

What frameworks/IDEs/etc do people suggest I use? I can give more details on the project itself (think lots of modular little windows and user text entry), but I'm almost more interested in understanding the modern dev environment than in getting project-specific advice.

"I just want to build my first website and have it on the internet where a potential employer can look at it" starter pack:

Front end:
React

Back end:
NodeJS/Express

DB:
MongoDB
(please don't fight over this mongoDB is just super easy to get set up with a sandbox and it probably won't matter in the long run)

Docker:
Docker

Deployment and hosting(pick one AWS is a lot harder but more rewarding, Heroku is piss easy and that's perfectly fine too):
AWS
Heroku


IDE:
Atom


Each section could have at least 2 more choices but this set here is going to be your best bet. I super strongly recommend learning docker but it is not required.

OtspIII
Sep 22, 2002

Thanks, that's super helpful! I actually already have an AWS EC2 that I use for game analytics and error reports, so I'll probably just stick with that for hosting

marumaru
May 20, 2013



Vincent Valentine posted:

DB:
MongoDB
(please don't fight over this mongoDB is just super easy to get set up with a sandbox and it probably won't matter in the long run)

Deployment and hosting
Heroku

IDE:
Atom

i disagree very strongly but because your comment applies to everything else and not just mongo i'll just leave this post here to get it out of my system

marumaru
May 20, 2013



it's 2020 please don't use atom

OtspIII
Sep 22, 2002

Inacio posted:

it's 2020 please don't use atom

Is WebStorm good? I use Rider for gamedev so I already have a basic understanding of the logic behind how it's set up

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Inacio posted:

it's 2020 please don't use atom

Indeed. Use vim. Or VSCode if you must.

Anony Mouse
Jan 30, 2005

A name means nothing on the battlefield. After a week, no one has a name.
Lipstick Apathy

OtspIII posted:

So I'm an indie game dev who generally pays rent by teaching programming at various colleges, but both the teaching and games markets are absolutely brutal right now (and honestly aren't really financially sustainable even at the best of times). I figure that this is a good time to self-teach a new set of skills, so I'm going to be starting a sort of living-RPG-rulebook project to get myself familiar with modern dev work and get something for my portfolio.

The issue is that front end dev is just horrific ever-shifting quicksand. I've dipped my toe in a few times over the years, making projects using ugly-rear end PHP, node.js, and Ruby on Rails, but I don't have a good sense of what frameworks/etc are actually useful to know at the moment (and likely to stay useful over the new few years), and doing research online is tough since it feels like anything written more than a few months ago is probably outdated and misleading.

What frameworks/IDEs/etc do people suggest I use? I can give more details on the project itself (think lots of modular little windows and user text entry), but I'm almost more interested in understanding the modern dev environment than in getting project-specific advice.

For the frontend:

1. Install VSCode.

2. Install Parcel bundler.

... and you're done. Parcel requires virtually zero configuration, will automatically install dependencies for you when you import them in JS, and supports dev server and production builds out of the box. Webpack is more of an "industry standard" but incites configuration hell and Parcel has their number IMO.

React is the most popular FE framework right now for a reason, and has been for years, which is practically an eternity in web dev land - start there.

For the backend, if you want a lot of control and something "industry standard" I'd go for Java or NodeJS plus mongoDB, popular choices at my workplace. But you'll be doing a lot of work just for basic static file serving and/or APIs - tedious stuff that can be done better and faster with a cloud based approach. For small personal projects I'd encourage something like Firebase/Firestore or Google Cloud Platform in general. It will give you file hosting, user authentication, and database storage (think a cloud based equivalent to localStorage) dead simple.

Anony Mouse fucked around with this message at 02:50 on Apr 26, 2020

marumaru
May 20, 2013



OtspIII posted:

Is WebStorm good? I use Rider for gamedev so I already have a basic understanding of the logic behind how it's set up

should work for you. my coworkers use it with minimal complaints.

i'd personally recommend VSCode - for JS/TS it's got the best ecosystem.

Vincent Valentine
Feb 28, 2006

Murdertime

I use WebStorm as well, the only reason I recommended Atom is because it's free.

Gildiss
Aug 24, 2010

Grimey Drawer
VSCode is also free.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Gildiss posted:

VSCode is also free.

So is vim. :colbert:

prom candy
Dec 16, 2005

Only I may dance

Lumpy posted:

So is vim. :colbert:

Only if you don't value your time

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

prom candy posted:

Only if you don't value your time

Jokes on you, I spent the 15 years it took to learn vim 20 years ago!





:cry:


Stockholm Syndrom Intensifies

prom candy
Dec 16, 2005

Only I may dance
Well with the minute or two it saves you every day you'll have that time back in a couple hundred years!

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Over many years I swapped to a new IDE or text editor every 3-8 months. I'd become comfortable with everything about the IDE and then there'd be something new and shiny to try out.

Then, several years ago I started using Jetbrains IDEs (webstorm/pycharm/Idea. They're basically all the same) and haven't switched again even though I still continue to try and supplant them with something new.

I can't really say if that's because their IDEs are just perfect for me, or if I've just gotten older and more set in my ways. I can just say that I'm really happy with them.


(slight hiccup in that little story...I added VS Code to my repertoire awhile back because it's nice for editing little single file scripts and whatnot)

Spime Wrangler
Feb 23, 2003

Because we can.

Jetbrains’ vim emulation is also pretty good if your brain is broken

MrMoo
Sep 14, 2000

Edit: wrong thread, editor chat in YOSPOS too.

MrMoo fucked around with this message at 02:37 on Apr 27, 2020

gbut
Mar 28, 2008

😤I put the UN🇺🇳 in 🎊FUN🎉


Sublime Text here with that Vim syndrome. I just love configuring that broken syntax highlighting every few months. Oh, buy also paying for software.

Honestly, it's all about the speed, and Jetbrains stuff feels like molasses.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

gbut posted:

Sublime Text here with that Vim syndrome. I just love configuring that broken syntax highlighting every few months. Oh, buy also paying for software.

Honestly, it's all about the speed, and Jetbrains stuff feels like molasses.

Yeah, I work on a very beefy machine specifically so I can't tell the difference between Jetbrains and Notepad in the speed department. I also always keep my IDE running (yay 32GB RAM) so I don't have to deal with the startup time.

However, when I talk about speed, I'm mainly talking about everything except the typing experience. Nowadays, Jetbrains has the lowest typing latency of almost any GUI editor.



more info

marumaru
May 20, 2013



i'm not delusional enough to say vscode is fast, but it is definitely faster than atom (lol) and it's fast enough when all's said and done.
the thing just has every feature i could hope for and extensions for everything else.

i do miss sublime's speed though - it started up on a hdd as fast as vscode starts on an ssd (both fast)

Adbot
ADBOT LOVES YOU

prom candy
Dec 16, 2005

Only I may dance
just lol if your editor doesn't occasionally get your laptop fans spinning at full speed

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