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
Vincent Valentine
Feb 28, 2006

Murdertime

The wand chooses the wizard and who are we to question the fate of others.

Adbot
ADBOT LOVES YOU

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

AlphaKeny1 posted:

lol thanks, I have "research vue npm components" on my list of things to do for my team and it looks like I'll avoid that
Well, the 4th time I tried it worked. Though I feel the import is a little odd.

blue squares
Sep 28, 2007

Got a question. I'm not looking for all the answers, just some help.

I want to change my career, from SEO to front end dev. I have worked on websites for 3 years and know the basics of HTML, CSS, and some JavaScript, plus a lot of WordPress stuff like configuring advanced custom fields plugin.

My question is the best way to research front end web development bootcamps and choose an option. I am overwhelmed by all of the options.

marumaru
May 20, 2013



blue squares posted:

Got a question. I'm not looking for all the answers, just some help.

I want to change my career, from SEO to front end dev. I have worked on websites for 3 years and know the basics of HTML, CSS, and some JavaScript, plus a lot of WordPress stuff like configuring advanced custom fields plugin.

My question is the best way to research front end web development bootcamps and choose an option. I am overwhelmed by all of the options.

i will never not shill https://www.freecodecamp.org/

The Fool
Oct 16, 2003



I went through FCC a few years ago and was very happy with the content. A+ would recommend to anyone.

blue squares
Sep 28, 2007


Thanks! I'm working through the HTML section now. I already know almost all of it, but its good to start at the beginning to make sure I don't miss anything.

Splinter
Jul 4, 2003
Cowabunga!
For a NextJS app that is highly DB driven and doesn't require any SEO (a business tool where everything is behind a login) and doesn't need to handle huge scale, should I just use SSR (getServerSideProps) for everything to keep things simple, or are there other approaches to consider?

For some data/pages I'm thinking doing static generation (getStaticProps) with a revalidate value set could work (pages that show the same data for every user with data that isn't likely to be updated that often), but still in rare cases could open the door to more sync related errors that would need to be handled (and/or provide a poor user experience), making the code more complex for what may be minimal benefit (as this won't be a high traffic site).

Another approach I could see is to have some pages that need dynamic data to have skeletons statically generated server side, then fetch the data (or at least some of the data) client side via an API server. In some cases the client side code for fetching data from the API server may need to exist anyway, so this wouldn't necessarily be extra work/complexity in some cases, but it other cases it would be.

Finally, is there a Next approach for not loading all dynamic data on a page at request time when doing SSR, or is that something that should just be handled via client side code? For example, an item detail page is going to have multiple tabs to show different sets of data related to that item. At first load of the detail page, only the initially visible tab really needs to have its data populated. Data for the non-visible tabs could be fetched in the background after the initial request. Off the top of my head I'm thinking the way to accomplish this in Next would be to have each tab be a separate route page, with the tab headers being 'next/link's, as I from the documentation I believe this will result in Next prefetching all the non-visible tab content. Will that accomplish what I'm expecting (with no hit to UX)? Might just end up fetching all needed data at request time at least initially, but I want to know what my options are if that ends up being too slow.

marumaru
May 20, 2013



if you dont need seo, what do you need SSR for? (havent used Next much)

Splinter
Jul 4, 2003
Cowabunga!

Inacio posted:

if you dont need seo, what do you need SSR for? (havent used Next much)

I don't need SSR, but it essentially comes free w/ Next (and if anything makes SSR less complex code wise than CSR) and I believe still has other benefits outside of SEO (e.g. less code sent to and run on the client), so my thought is why not use it.

Macichne Leainig
Jul 26, 2012

by VG
There are performance benefits for SSR, sure, but there are some tradeoffs like larger pages (by a few KB) and a (more than likely unnoticeably) delayed TTFB. There are so many factors that go into site performance these days, I think it's a wash if you don't really need the SEO benefits of SSR, really.

prom candy
Dec 16, 2005

Only I may dance
If everything is behind a login and especially if it's a b2b app you probably don't need to be assed about squeezing the tiniest bits of performance out of your app. Like yeah if it starts to feel sluggish your users will complain and eventually the decision makers might switch to a competitor but it's not like large-scale public-facing stuff where every 25ms you add to page load times can increase your bounce rate by a significant number. If you're gonna have the kind of slowness that users actually perceive and are annoyed by it's probably going to come from database operations.

smackfu
Jun 7, 2004

I’ve definitely seen people just use SSR for everything and it’s not a great experience if you have typical slow enterprise APIs. People expect rendered spinners now, not the browser to just “hang” after clicking a link for five or ten seconds.

Splinter
Jul 4, 2003
Cowabunga!

prom candy posted:

If everything is behind a login and especially if it's a b2b app you probably don't need to be assed about squeezing the tiniest bits of performance out of your app. Like yeah if it starts to feel sluggish your users will complain and eventually the decision makers might switch to a competitor but it's not like large-scale public-facing stuff where every 25ms you add to page load times can increase your bounce rate by a significant number. If you're gonna have the kind of slowness that users actually perceive and are annoyed by it's probably going to come from database operations.

This is what I'm thinking and why I've been leaning toward just using getServerSideProps() (SSR) for everything initially (as it seems like this is the quickest approach development time wise) and only worrying about moving some fetching to the client if any issues actually come up in use. SWR (vercel's hook for client side fetching) was just brought to my attention, so I may look into that too as it seems like it takes care of much of the additional code that would come with fetching everything client side.


smackfu posted:

I’ve definitely seen people just use SSR for everything and it’s not a great experience if you have typical slow enterprise APIs. People expect rendered spinners now, not the browser to just “hang” after clicking a link for five or ten seconds.

If we were talking long page loads like that I'd definitely be looking into a different approach, but that's not what I'm anticipating (we're building the API/DB as well). I should note that at least with NextJS, using SSR for everything doesn't prevent showing an app based loading indicator or progress bar while a new page is being rendered server side. I'm still obviously new to Next, but my understanding is that while it can render pages server side, it still has a client side component that is doing some magic to make routing and page transitions feel more like an SPA than say an old school backend MVC style webapp (e.g. I don't think it ends up re-rendering parts of the new page that are identical to the old page, but I could be wrong).

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
Something that used to work is a notification would come in from the connected socket and it'd trigger a notification, but this doesn't work anymore without user interaction?

https://developer.mozilla.org/en-US/docs/Web/API/notification

quote:

Note: In the above example we spawn notifications in response to a user gesture (clicking a button). This is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notifications not triggered in response to a user gesture. Firefox is already doing this from version 72, for example.

Notifications stopped showing up on mobile too.

No, it's not a permissions thing. Is there any way to get this to work anymore, or are pressures that be making me switch to google's desktop push notifications thing.

AlphaKeny1
Feb 17, 2006

The Merkinman posted:

Well, the 4th time I tried it worked. Though I feel the import is a little odd.

Hey, thanks for this! I saved it to look at after my deadlines for the first few weeks of Jan.

Dunno if you already said it but may I ask what your use case is?

For my team I'm trying to find ways to import our own components into other team's repos and still have access to their vuex store, ideally so that we don't have to follow their release schedule or anything. I'd prefer not to build our components directly into their code and deal with so much bureaucracy. From my limited understanding, npm component libraries is my answer. Am I on the right track?

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

AlphaKeny1 posted:

Hey, thanks for this! I saved it to look at after my deadlines for the first few weeks of Jan.

Dunno if you already said it but may I ask what your use case is?

For my team I'm trying to find ways to import our own components into other team's repos and still have access to their vuex store, ideally so that we don't have to follow their release schedule or anything. I'd prefer not to build our components directly into their code and deal with so much bureaucracy. From my limited understanding, npm component libraries is my answer. Am I on the right track?

Yeah.
We have a project that is the style guide that a number of other projects use. Originally this was just the CSS, but over time it involved functionality so, like you said rather than "build our components directly into their code", it's in a separate project.
Of course you'd have to be aware of npm versioning to make sure the other teams are using the version you'd want.

AlphaKeny1
Feb 17, 2006

Excellent, thanks!

gbut
Mar 28, 2008

😤I put the UN🇺🇳 in 🎊FUN🎉


Does anyone here use a nice headless CMS?

I'm looking for something that is not wordpress-like, but insteawd allows me to create my own schema via GUI. I've tried Strapi, but the Digital Ocean instance crashed and burned while I was playing with content types. What is similar, but maybe more stable? SaaS solutions work too. I just need a fine grained control over the input fields and data relations, and Strapi seemed to be doing that fine.

About to investigate:
- agilitycms
- prismic
- umbraco
- buttercms

Any pointers would be greatly appreciated.

Twerk from Home
Jan 17, 2009

This avatar brought to you by the 'save our dead gay forums' foundation.

gbut posted:

Does anyone here use a nice headless CMS?

I'm looking for something that is not wordpress-like, but insteawd allows me to create my own schema via GUI. I've tried Strapi, but the Digital Ocean instance crashed and burned while I was playing with content types. What is similar, but maybe more stable? SaaS solutions work too. I just need a fine grained control over the input fields and data relations, and Strapi seemed to be doing that fine.

About to investigate:
- agilitycms
- prismic
- umbraco
- buttercms

Any pointers would be greatly appreciated.

My employer has had some big sass success with Contentful, but our applications are only reading from it, with the content team using Contentful’s interface for authoring.

blue squares
Sep 28, 2007

I mentioned earlier that I am looking at switching from SEO to Web Development. I'm sure a lot of you work in some capacity with SEOs. Any wisdom to impart? Things you wish you knew when you were getting started? Good websites to read to learn more about a career in web dev?

I'm doing Free Code Camp, and as I encounter terms I am not familiar with I am doing supplementary research and taking notes on paper

blue squares fucked around with this message at 13:33 on Dec 28, 2020

Summit
Mar 6, 2004

David wanted you to have this.
I learned everything I know trying to turn my dumb ideas into reality.

smackfu
Jun 7, 2004

If you have already worked in the industry, you are already way more competent than any college new hire.

fsif
Jul 18, 2003

Free Code Camp is excellent, but I did have friends go through it recently and felt like parts of the curriculum was either a bit dated or not particularly relevant to my day-to-day. Don't break your brain trying to master recursion in JavaScript or floats in CSS.

Once you have the foundations from FCC, I generally recommend consuming Wes Bos-related things, particularly his (free) JavaScript 30 class and the back catalog of his Syntax podcast. I think his teaching style is pretty universally liked, but there are thousands of other online video instructors you can also try to discover via YouTube, Udemy, Lynda, or more premium sites like Level Up Tutorials, Front End Masters, and egghead.

Finally, one of the bigger obstacles I encountered before I formally broke into the industry was trying to learn sone of the supporting technology. Learning "just" HTML, CSS, and JavaScript is probably inadequate for most jobs, unfortunately. Make sure to take some time to learn about terminal commands, Git, npm, bundlers, and at least a high level overview of a JS framework like React.

prom candy
Dec 16, 2005

Only I may dance

Summit posted:

I learned everything I know trying to turn my dumb ideas into reality.

Yes, don't spend too long in "learning" mode, you need a healthy mix of that along with just trying to make poo poo and figuring out why it doesn't work.

smackfu
Jun 7, 2004

Is there any fast command you can run that checks that the node_modules directory is in sync with the package-lock file?

Working in a team, it’s easy to pull down a package-lock update and not realize it, and then be running with old package versions accidentally. npm ci fixes it but is a bit brute force and takes 30-60s.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

smackfu posted:

Is there any fast command you can run that checks that the node_modules directory is in sync with the package-lock file?

Working in a team, it’s easy to pull down a package-lock update and not realize it, and then be running with old package versions accidentally. npm ci fixes it but is a bit brute force and takes 30-60s.

rm -rf ./node_modules && npm install

:colbert:

Bonus: you get a free coffee break every time you run it!

gbut
Mar 28, 2008

😤I put the UN🇺🇳 in 🎊FUN🎉


This.

Npm is trash, and you should never trust it. Nor yarn.

E: or force the team to use nix packages

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

gbut posted:

This.

Npm is trash, and you should never trust it. Nor yarn.

E: or force the team to use nix packages

I don’t see how this is an npm problem

gbut
Mar 28, 2008

😤I put the UN🇺🇳 in 🎊FUN🎉


Npm, while improving, still feels unfinished. It took ages to add some sort of reproducible builds, and the whole ecosystem is a bit of dumpster fire--remember the whole leftpad fiasco? Having it be my main tool for the job makes me a bit jaded, so I tend to hate on it. And there's that relatively recent npm inc poop-soup and that left a bitter taste in my mouth, metaphorically speaking.

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
The primary reason I'm excited about https://deno.land/ is to get away from npm. I've never had any project I've worked on go smoothly with npm, not even small projects. Big projects forget about it, have it pop up in nightmares instead.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
Yarn solved the reproducible build thing for my team, and yeah npm itself (the tool, not the ecosystem) has a number of flaws. There are for sure issues with node's package management but I don't think any package manager has a perfect solution yet. Rust's solution is quite similar to node's, and deno's bigger standard library is nice but you'll still eventually need to import external modules, at which point you have the same problem as npm users.

smackfu
Jun 7, 2004

Other build platforms like Gradle seem to do a decent job of making sure your dependencies match what you specify before running so doesn’t seem like any technical reason npm couldn’t do it. Come to think of it, Webstorm does tell you if the package.json doesn’t match what is installed but no obvious way to automate that.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
Sure, you could do that by making a prebuild npm script that rimrafs node_modules and installs deps. Npm isn’t a build system so I’m not sure why you would expect that out of the box.

smackfu
Jun 7, 2004

I mentioned “npm ci” in my original question, which is a one-step faster version of what you describe. It’s just slow, and I only want to do it if necessary.

smackfu
Jun 7, 2004

On another topic, does anyone have any good YouTube subscriptions for front-end stuff? Subscriptions so I can just see new videos come up rather than searching for one off videos.

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
I've got a page with a persistent websocket connection to the server. On mobile if I navigate away from my browser it'll disconnect eventually. When I come back, since it's configured to, it'll eventually reconnect which is all fine.

Is there a way to detect that I've come back, and have it try to reconnect immediately?

MrMoo
Sep 14, 2000

In Cordova land the Internets say to use the “pause” and “resume” events.

Normally you could probably try “visibilitychange” per MDN and test for visibilityState becoming visible and hope that it is reliable.

RobertKerans
Aug 25, 2006

There is a heppy lend
Fur, fur aw-a-a-ay.
Ok, so say I have a context in React, and I'm using TypeScript. Issue I've got is. If I type the context like this:

code:
React.createContext<FooStuff>({ ...a_load_of_default_values})
That works, but the issue is that often I don't have default values -- for example, the values may be calculated before being added to context, or there may be a large number of them, or they may be highly context [heh] sensitive. atm I'm writing a small graphing package for the app I'm working on, and I can't have a default graph, it entirely depends on data that isn't there to start off with. Aaanyway, I can't do this:

code:
React.createContext()
Because createContext takes one argument. I could do this:

code:
React.createContext<FooStuff | null>(null)
But that's wrong because then null then goes and poisons the rest of my code (it's never going to be null except for when it's first instantiated). I can do this:

code:
React.createContext<Partial<FooStuff>({})
But that's also wrong, because now I have to put guards in any time I want to access properties held in context in case they're undefined.

And this is static, mainly primitive, read-only properties. When I have functions held in context it generally gets substantially more complicated and annoying.

This is driving me slowly insane, I use context quite a bit and most of the time I use it I spend a half hour or so googling solutions to above issue. Is there a sensible way to do this in TS that I'm just missing here

prom candy
Dec 16, 2005

Only I may dance
Can you mark the FooStuff interface to indicate which fields are optional? Or can you just use default values that conform to the type but are otherwise nonsense (i.e. if it expects a number just pass in -1)?

Alternately can you make a custom hook to use your context that coerces the result into a different type? i.e. you initialize the context with FooStuff | null but your custom hook casts the result as just FooStuff?

This is just one of those annoying cases where you have to tell typescript "no I know better than you." Normally that's accomplished with the bang operator but obviously you don't want that littering your code.

edit: vvv yeah that

prom candy fucked around with this message at 23:08 on Jan 7, 2021

Adbot
ADBOT LOVES YOU

Aquarium of Lies
Feb 5, 2005

sad cutie
:justtrans:

she/her
Taco Defender

RobertKerans posted:

Ok, so say I have a context in React, and I'm using TypeScript. Issue I've got is. If I type the context like this:

code:
React.createContext<FooStuff>({ ...a_load_of_default_values})
That works, but the issue is that often I don't have default values -- for example, the values may be calculated before being added to context, or there may be a large number of them, or they may be highly context [heh] sensitive. atm I'm writing a small graphing package for the app I'm working on, and I can't have a default graph, it entirely depends on data that isn't there to start off with. Aaanyway, I can't do this:

code:
React.createContext()
Because createContext takes one argument. I could do this:

code:
React.createContext<FooStuff | null>(null)
But that's wrong because then null then goes and poisons the rest of my code (it's never going to be null except for when it's first instantiated). I can do this:

code:
React.createContext<Partial<FooStuff>({})
But that's also wrong, because now I have to put guards in any time I want to access properties held in context in case they're undefined.

And this is static, mainly primitive, read-only properties. When I have functions held in context it generally gets substantially more complicated and annoying.

This is driving me slowly insane, I use context quite a bit and most of the time I use it I spend a half hour or so googling solutions to above issue. Is there a sensible way to do this in TS that I'm just missing here

Assuming you're using the useContext hook to get to the context later, I wrap the hook to "fix" the TS declaration.

code:
const fooContext = React.createContext<FooStuff | null>(null);
function useFooStuff(): FooStuff {
  return useContext(fooContext)!; // if you haven't seen the ! before, it's a shortcut to tell TS "this isn't null/undefined/"empty""
}

// later on

const fooStuff = useFooStuff() // not null!;

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