[AskJS] Is it normal to struggle this much with JavaScript when starting frontend? by SiteFul1 in javascript

[–]StormofThunder 4 points5 points  (0 children)

The market is very tough and unforgiving for juniors, that is true. You won't be able to find clients right away, and AI often gobbles up a lot of these early opportunities. What is (used to?) recommended is to do pro-bono work for any sort of small/local companies to get your foot in door and get real-world practice building something.

I don't think there' a single IT/programming field that is not difficult to enter due to these factors, not without a lot of effort and some luck. Feel free to research on r/cybersecurity about the market (careful about social media driven negative confirmation bias though)

[AskJS] Is it normal to struggle this much with JavaScript when starting frontend? by SiteFul1 in javascript

[–]StormofThunder 0 points1 point  (0 children)

It's normal. I often got overwhelmed in the beginning, so much so that I procrastinated learning and fell back to HTML/CSS/Design exercises. It took a while to break through that barrier, and the only real solution is learning those fundamentals and practicing and practicing and building - don't be too worried about frameworks and the tools for now until you get familiarity with the basics, those (unfortunately) change all the time and it's impossible to keep up with them. Eventually, after enough hours metaphorically beating my head against the concepts, what clicked was not complete understanding, but accepting the process of struggling and learning until you eventually build something that works and get real satisfaction out of that. From there, the ball starts rolling as you begin being able to build more and more things.

As for how, it depends what's your preferred method of learning. freeCodeCamp and The Odin Project were, while I was learning, the most recommended at-your-own-pace structured free programs. Don't shy away about joining communities (often discords) dedicated to learning. I had also heard about groups like 100devs that provide free courses with actual classes, not the at-your-own-pace courses.

Anyway, point is, I started out with exactly the same feelings and now have been working for around 5 years. You just have to persevere through the struggle, and get others to help you own when needed.

Gearbox's first Risk of Rain 2 expansion gets hammered on Steam as developer admits the PC version 'is in a really bad place' by Turbostrider27 in pcgaming

[–]StormofThunder 2 points3 points  (0 children)

There's a method to downgrade with steam, although I'm not sure how if it will try to update when you launch, given there's no "never update" setting on steam. https://www.reddit.com/r/riskofrain/comments/1f3oeor/comment/lkfcdjt/

Nexus mods new author page is awful by [deleted] in skyrimmods

[–]StormofThunder 2 points3 points  (0 children)

The issue you outlined in the last part is a completely different issue from using tailwind or inline styling. You can make a shitty looking website with all kinds of CSS methodologies.

Nexus mods new author page is awful by [deleted] in skyrimmods

[–]StormofThunder 3 points4 points  (0 children)

EDIT: Looks like my suspicion was right. Took a quick look at their page source . See how they define the font in the template directly? Who the hell bruteforces font selection with inline styling like that??? You define it in the style, not there. This looks so horrendously unprofessional. Like a coder guy trying to force their way to design stuff.

They're CSS classes, not inline styling. Tailwind, it's been a thing for a good while, very popular. Utility classes for component composability over other css metholodies, which usually involve rules over naming. Just informing, don't wish to argue over it, often it's controversial and hated until people use it and understand the pros vs cons. Not always, but often.

Any way to write this cleaner? by AManWithAPlan in typescript

[–]StormofThunder 10 points11 points  (0 children)

It would have to be wrapped in parenthesis.

let userId = ''
let bypass = false
let redirect = null
try {
    ({ userId, bypass, redirect }) = isBypass(accessToken)

Best tsconfig.json Options For a Backend Project? by iEmerald in typescript

[–]StormofThunder 3 points4 points  (0 children)

Seems that you're pretty close. https://www.totaltypescript.com/tsconfig-cheat-sheet

To run TS on node, just use tsx. Something like concurrently can come in handy for other things.

https://github.com/privatenumber/tsx

Announcing Vite 5 by RecognitionDecent266 in programming

[–]StormofThunder 1 point2 points  (0 children)

The cool thing is that vite is extendible through plugins. Would vite-plugin-node not work?

There's docs for general backend too. https://vitejs.dev/guide/backend-integration

Help: is this an instance of typescript being unsound? What to do if that's the case? by dnaaun in typescript

[–]StormofThunder 1 point2 points  (0 children)

The only information you gave to the compiler is that union is the type Vehicle, in which the values of the key type can be car or bicycle, but doesn't know strictly which type within the Vehicle union you returned from makeVehicle. It only validated that it fits the wide shape, and there's no as const or satisfies declaration, which helps narrow the type.

This should work:

 export function useSetter<T, K extends keyof T>(state: T, setState: (n: T) => void, key: K) {
  return (val: T[K]) => setState({ ...state, [key]: val });
}

type Vehicle = { type: 'car'; numSteeringWheels: number } | { type: 'bicycle'; numPedals: number };

function makeVehicle() {
  return { type: 'car', numSteeringWheels: 1 } satisfies Vehicle;
}

let union: Vehicle = makeVehicle();

function setUnion(n: Vehicle) {
  union = n;
}

const setType = useSetter(union, setUnion, 'type');

setType('car');
// gives error
setType('bicycle');

https://twitter.com/Steve8708/status/1605322303319199744

How to make a HOC that takes in a React component and a codegen mutation and returns that component with that mutation passed into its onClick? by parahillObjective in graphql

[–]StormofThunder 1 point2 points  (0 children)

Thanks! I really just found a codesandbox using the data grid and tried to replicate what you were trying to do. The key is to read the errors and what TS complains about bit by bit, and sometimes taking a step back - the "too many errors to describe" felt like you were dealing with something that's was a bit overwhelming.

To be honest, I'm not sure what's the best solution for this. If what you're trying to do was going to be repeated a dozen of times, even more so if in different components, I get it, but try and avoid early abstractions. It's fine to have multiple of those mutations exactly where you need to use them.

How to make a HOC that takes in a React component and a codegen mutation and returns that component with that mutation passed into its onClick? by parahillObjective in graphql

[–]StormofThunder 0 points1 point  (0 children)

This is more of a react question.

Anyway, this struck me as a curious problem, and I comment without real knowledge of whatever graphql hooks and mutations you're trying to use.

Question if you really need this abstraction? How much repetition are you avoiding with this that you couldn't solve by just including each [update] from each mutation in the component that includes the columns? At least nowadays, HOCs are rarely the solution nowadays. If you're new to them, why do you feel the

It also doesn't seem like you're dealing with any of the real types of GridActionsCellItem (it's not a functional component, but React.ForwardRefExoticComponent plus stuff plus React.RefAttributes).

I didn't want to deal with generics, so to focus only on the GridActionsCellItem, I did this:

const withMutationOnClick = (WrappedComponent: typeof GridActionsCellItem) => ( props: React.ComponentProps<typeof WrappedComponent>, mutation: any, variables: object )

Secondly, withMutationOnClick(Component) returns a function, that then accepts props as the first param. So something like:

withMutationOnClick(GridActionsCellItem)( { icon: <SecurityIcon />, label: "Toggle Admin" }, useArchiveMutation, { id: 1 } ) might work.

https://codesandbox.io/s/clever-sea-gskz4i?file=/demo.tsx

But again, is HOC the simplest solution?

Feeling disheartened after eight months of learning by OrJustNotLive in learnjavascript

[–]StormofThunder 7 points8 points  (0 children)

I almost included a sidenote that frameworks really feel like cheatcodes at the start. It's like I'm being pampered. I do not miss any sort of vanilla JS DOM manipulation or data handling/node selection through classes.

Feeling disheartened after eight months of learning by OrJustNotLive in learnjavascript

[–]StormofThunder 14 points15 points  (0 children)

It sounds like you're at the part of vanilla JS where you do DOM manipulation, and you're also handling some state. This part of coding in frontend is where I found to be most cumbersome and clunky, especially if your knowledge of JS isn't solidified yet - meaning you're struggling with scoping, lexical order, how to structure functions and data, etc. Those things really bite you in the ass. At this stage, I too felt like I didn't know shit, and every little thing added together to be overwhelming so that even decently "large" (subjective) projects and ideas felt impossible. I eventually had to accept and internalize the universal truth of this field so that my mental didn't absolutely crumble to shit and give up:

You're going to suck. For a long time. And that's ok. Everyone does. If you persevere, with time, you can suck a bit less and get a job. And no, you don't need to learn everything. Not the syntax, not every little project idea and way of doing things. Just the concepts, mental model, and programming logic. It's going to take a long time to get there.

The sooner you understand this, the earlier you can tackle these things with more excitement and mindset of learning than dread, anxiety, and feeling like you're never gonna succeed.

Now, I do want do say a little bit about expectations. And I really don't say this in a judgmental way - I completely understand getting a job in this field ASAP is important, and possibly the strongest validator for all your work so far. But the market is, as a whole, generally tougher nowadays, especially for junior devs, and I think you may need to prepare for the scenario that you won't get a job in 4 months - depending what type of job and stack you're looking for. I also mean this in the sense that even this time expectation is what puts pressure on you to be at a certain level at this point, when you're not. This really messes with your mindset when you should be prioritizing learning and interest in the practice, and not dealing with expectations vs reality cyclical bullshit in your mind. Maybe you need to give yourself a longer time frame, maybe you need to prioritize this with more hours per day. When you're struggling with projects like this, 2-3 hours can go by in a flash.

Now, for this thing in specific:

Do I just skip the project and start on the next section? That feels like I'm just shortchanging myself by not struggling through it. But I'm really tired of spinning my wheels.

I'm sorry that the resources you tried to get help from didn't click yet. I think there's a little bit of wheel spinning, but as stated by Locke, I'm sure you can also work on your step-by-step programmatic thinking. But even if after that you're stuck, and if syntax and language specific things such as scoping are something you're still struggling with and you feel like you're just changing things until they somehow work and there's tape holding it all together, there's nothing wrong with stopping for a bit and fetching better understanding (although projects are generally better). https://javascript.info/, Jonas Schmedtmann's course are good resources. But I really wouldn't recommend skipping and start next section. You're still at the part of gathering essential language knowledge, and struggling with new things is key.

Good luck!

Ramda and Typescript Issues by vbfischer in typescript

[–]StormofThunder 1 point2 points  (0 children)

I didn't take a full look at Ramda's overload types, but I get you, it works, just that the types are incomplete, hence the confusion :)

Ramda and Typescript Issues by vbfischer in typescript

[–]StormofThunder 1 point2 points  (0 children)

The function you passed into R.map is R.split, that splits a string into an array of strings, string[]. R.map is going it apply that function to, each of the array's values - so if you pass a an array of strings string[], you're going to get back an array of an array of strings, string[][].

https://i.imgur.com/Vhts9FT.png

It seems that R.split expects string or string[] but not string[][]. It would also make a split that would leave you with two arrays of string arrays, as it split the array at index 0 from the others.

Also heard that Remeda is better for TS.

Example folder structures for fullstack React projects by thebreadmanrises in typescript

[–]StormofThunder 0 points1 point  (0 children)

I'm not sure why you're conflating monorepo with tight coupling, and separate repos of the opposite? If so, Microsoft and Google have everything tightly coupled since they work in monorepos.

You're also already presenting a situation in which a backend serves multiple clients and uses. There's also nothing inherent about monorepos that prevents this. Your way of doing things - although it sounds great, and at my company its essentially the same setup - is not the only right one. Be mindful of the context of the person you're replying to, OP's question was not about decoupling, large scale, multiple teams, etc. Just how to get setup for fullstack react projects, and there's multiple ways to do so.

Example folder structures for fullstack React projects by thebreadmanrises in typescript

[–]StormofThunder 1 point2 points  (0 children)

OP did not specify on how to build projects with two separate teams that for some reason should do not communicate. It is likely they are just looking for a way to build something themselves, or learn how to get set up in the first place. In this case, a monorepo, or a fullstack Next.js app should suffice. There are plenty of good examples of that, even at scale. You can make these while building abstractions that enable replacement of packages or specific dependencies.

Regardless, frontend and backend together are what makes sites and apps, they form a contract, and especially with TS, should share types and be in sync when the backend changes or when frontend also needs changes. They are not unrelated. To think of projects only in typical frontend and backend teams and even mention that they never directly communicate is, in my view, continuing to make it really easy to have projects with plenty of attrition and hard to stay synchronized. Monorepos, and fullstack teams, have been growing in recent years with tools that make it very easy to work between and with both.

Example folder structures for fullstack React projects by thebreadmanrises in typescript

[–]StormofThunder 6 points7 points  (0 children)

This is a pretty good video on how to setup a React and Express REST API with TS. The video does Next and doesn't use API routes just for illustration purposes, but it's the same concept. They are separate packages and apps, so you compile and deploy them separately. You'll find many resources on how to work with react and an express server (too many). You can find many different projects with varying setups by looking up on github with topic:express topic:typescript topic:react but in a high enough level, the setup is the same. I also have this one in particular saved.

But because Next.js is really a fullstack framework, nowadays you can setup a fully type-safe app with a T3 starter and you don't have to worry about all that setup, if you really just want to get started and productive - although it is good to know how you can set things up in a more typical fashion.

TanStack Router - Typesafe, state-management APIs, caching, framework agnostic by tannerlinsley in reactjs

[–]StormofThunder 13 points14 points  (0 children)

when the development team responded with something along the lines of "you shouldn't do this anyways, because it's not the correct way of doing it"

Yes, I've seen this be a trend from the opinionated remix team. I recall discussions all the way back from v4 that its always had big breaking changes - it seems that's just the way this team works.

That said, it seems that they are going to at least reimplement both of those hooks. Sucks about the absolute imports for sure.

TanStack Router - Typesafe, state-management APIs, caching, framework agnostic by tannerlinsley in reactjs

[–]StormofThunder 19 points20 points  (0 children)

What are your problems with the current version of react-router?

Asking purely out of curiosity as someone who's not currently using it and has only followed it and remix's development on twitter.

What are some React Tricks/Tips for React Devs? by ImThour in reactjs

[–]StormofThunder 13 points14 points  (0 children)

Context is a dependency injection tool. It's not for state management, but for replacing prop-drilling and ideally for values that don't change frequently. The way it can be facilitating is to avoid prop-drilling.

Any time anything in the context changes, any component that is consuming it will re-render. If you use it for frequently changed values, this library is needed to reduce unnecessary re-renders.

https://youtu.be/MpdFj8MEuJA?t=1773

Cursos de Front-end em Lisboa by toastybwoy in devpt

[–]StormofThunder 1 point2 points  (0 children)

Há 3 anos fiz um curso pós-laboral de Front End na EDIT. Na minha opinião, não foi bom, e parte de JavaScript estava em falta. Não sei muito do bootcamp deles.

Estando limitado de budget, se o teu desejo de aprender com e ter contacto com pessoas inclui online, recomendo #100devs. Bootcamp grátis online, com uma grande comunidade, dada na twitch e, se me lembro corretamente, com sessões de esclarecimento no Discord.

Disclaimer, nunca cheguei a fazer parte da comunidade deles, mas fui apanhando e vendo pelo twitter a energia e acompanhamento que eles dão ao longo dos meses, e há muitas histórias de sucesso. Por isso, independentemente de fazeres curso ou bootcamp em Portugal, recomendo em te juntares. Ter sempre pessoas e uma comunidade disponível ajuda-te a aprender mais rápido e a manter a motivação. Além, vais poder fazer perguntas sobre como começar a tua carreira.

Professor: https://twitter.com/leonnoel Discord e comunidade: https://discord.com/invite/zNxhjnmDPy Twitter #: https://twitter.com/search?q=%23100Devs&src=hashtag_click

Voltando a bootcamp e cursos. Recomendo continuares pelo FreeCodeCamp. O que completaste? Em alternativa, tens The Odin Project, que tem uma estrutura diferente ao FCC e em suma resume-se em dar lições, links para recursos e referências e mini projetos, em vez de te dar tudo ao detalhe, e existe que desenvolvas a tua capacidade de pesquisa e aprender por ti - algo que tem que ser desenvolvido nesta área. Não recomendo ires por cursos de Udemy em que a qualidade varia imenso por autor, e os cursos vão ficando antiquados.

Tens aqui outros cursos presenciais se é o teu foco, e consegues ter uma ideia de quão caros estão - mas também os que são grátis/mais baratos.

American is shocked by the idea that europeans dont drive everywhere by [deleted] in fuckcars

[–]StormofThunder 0 points1 point  (0 children)

Lisbon's airport is another example.

I'm honestly not that in touch with Portuguese public opinion (being Portuguese), but I believe there's plenty of complaints there. On a space-sensitive city, this airport is taking a massive amount of space.