Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

Chas McGill: Oct 29, 2010; loves Fat Philippe

Dan is a legend and a good guy.

I wish (this is in general rather than just about that useEffect article) that tutorial examples would show slightly more complex common use cases like making an async call that updates state when the component mounts etc. I don't think I've ever written a component that just increments a counter...

# ¿ Jun 23, 2019 21:54

Adbot: ADBOT LOVES YOU

# ¿ May 5, 2024 23:14

Chas McGill: Oct 29, 2010; loves Fat Philippe

Try making the call in the useEffect.

# ¿ Apr 6, 2020 11:34

Chas McGill: Oct 29, 2010; loves Fat Philippe

I found Netlify CMS kinda nice for blogs etc out of the box, but it's a pain in the rear end if you need to do text formatting beyond what markdown provides, eg: if users want to align text, images etc in the WYSIWYG editor.

# ¿ Dec 8, 2020 19:22

Chas McGill: Oct 29, 2010; loves Fat Philippe

uncle blog posted:

I prefer to keep a bunch of constants like colors, fonts and what not in its own js file, that I then import the different values from when creating new components. This is super easy when I use styled-components in a js file. But is there an easy way to import them into a scss file?

CSS variables?

# ¿ Mar 19, 2021 18:50

Chas McGill: Oct 29, 2010; loves Fat Philippe

neurotech posted:

I'm currently weighing up two different solutions for drag-and-drop in React land:

https://github.com/clauderic/dnd-kit
and
https://github.com/atlassian/react-beautiful-dnd

Has anyone had any experience working with either of these two libraries? I'd be keen to hear your thoughts on what they are like to work with.

I've used beautiful dnd a couple times and it has worked well for vertical lists and such. It's also keyboard accessible which is a nice bonus.

# ¿ Aug 16, 2021 11:12

Chas McGill: Oct 29, 2010; loves Fat Philippe

This is probably a long shot, but has anyone got the latest react-markdown/unified etc packages to work with Jest? They were recently updated to use ESM. I guess, more broadly, has anyone got jest working properly with ESM? Everything I've tried so far:

using jest-node-exports-resolver

using enhanced-resolve

running jest in the experimental vm-modules mode (node --experimental-vm-modules node_modules/jest/bin/jest.js)

Using the next version of ts-jest and configuring it to useESM. Unfortunately, this spawns a variety of different errors.

At this point I'm close to just skipping the remark related tests so we can move on.

# ¿ Sep 6, 2021 16:56

Chas McGill: Oct 29, 2010; loves Fat Philippe

I like zustand a lot as a lighter alternative to redux these days as well.

# ¿ Sep 16, 2021 00:17

Chas McGill: Oct 29, 2010; loves Fat Philippe

What's the state of localisation libraries? If I just want to be able to switch strings with a dropdown, what's the most lightweight thing? I kinda like the look of https://github.com/ivanhofer/typesafe-i18n.

Chas McGill fucked around with this message at 17:33 on Nov 12, 2021

# ¿ Nov 12, 2021 17:22

Chas McGill: Oct 29, 2010; loves Fat Philippe

Vite is very good. I'd choose it for a new project now.

# ¿ Jan 14, 2022 10:50

Chas McGill: Oct 29, 2010; loves Fat Philippe

I'll pay attention to solid when recruiters start mentioning it in stacks. Same attitude I have toward svelte, really.

# ¿ Mar 1, 2022 17:00

Chas McGill: Oct 29, 2010; loves Fat Philippe

React conventions and antipatterns are always changing so it's tricky to point to a canonical resource. I'd approach it from the usual PR review standpoint - look for consistency, possible bugs, possible refactors, does it do what it's meant to etc? If you can pull it and look at it in vscode you might be able to see any obvious errors/mistypings etc.

The useEffect hook is a common source of bugs and unnecessary rerenders, so pay close attention to those to ensure the dependencies are correct etc.

Here's my own google-able question - Heroku has shat the bed and netlify is becoming more expensive. What's the current best solution for serving a js frontend and backend (with postgres) with minimal faff? We've been looking at Render

# ¿ May 4, 2022 15:00

Chas McGill: Oct 29, 2010; loves Fat Philippe

I don't find tailwind too offensive for prototyping etc, but the mindset of folk unwilling to learn CSS and pushing these libraries is pretty irritating to me. Possibly because I have a lot of hard won CSS experience. If I had to be frustrated, you do too!

# ¿ May 20, 2022 16:44

Chas McGill: Oct 29, 2010; loves Fat Philippe

The frameworks/libraries we like are the ones we've learned first usually. I look at angular and vue and don't like what I see, but I've been doing react for 5 years now.

React is so non prescriptive that its readability is really dependent on how the dev decides to structure their code. You shouldn't need to write multi line ternaries in the jsx.

We're spoilt af compared to the olden days of jQuery. Stuff like Svelte and Solid coming up are exciting although I've only seen one Svelte job so far in LinkedIn spam.

# ¿ Jun 4, 2022 11:08

Chas McGill: Oct 29, 2010; loves Fat Philippe

Zustand is great, I wouldn't go back to redux

# ¿ Jun 12, 2022 20:26

Chas McGill: Oct 29, 2010; loves Fat Philippe

HaB posted:

So good options for app hosting these days?

Needs:

- my own domain name
- ability to run node apps
- if I can use sqlite, preferred, if not a suitable postgres/mysql/whatever will work
- terminal access would be nice?
- hopefully free, or very cheap

Suggestions?

We're using Render after the Heroku GitHub authentication fiasco and it's been good so far.

# ¿ Jun 15, 2022 15:19

Chas McGill: Oct 29, 2010; loves Fat Philippe

I've had a couple of recruiters message me about jobs that use Svelte recently, so that seems a good sign. I quite like it, but I still prefer React because I'm so used to it.

# ¿ Aug 1, 2022 23:07

Chas McGill: Oct 29, 2010; loves Fat Philippe

Try googling for linear partition image gallery.

# ¿ Sep 19, 2022 14:20

Chas McGill: Oct 29, 2010; loves Fat Philippe

I have a budget from work to spend on learning materials, courses etc. Anyone done any interesting courses on AI/ML or visual programming stuff?

# ¿ Feb 9, 2023 20:57

Chas McGill: Oct 29, 2010; loves Fat Philippe

What's the go-to thing for SSO nowadays? I used Auth0 in the past but I remember it becoming super expensive as it scaled.

# ¿ Sep 26, 2023 11:36

Chas McGill: Oct 29, 2010; loves Fat Philippe

Things to try:
* Delete node_modules in your project and rerun npm i
* try npm list to see what version of react is actually there
* Make sure other packages aren't bringing in react 18 as a dependency

Also, remove the ^ if you want it to be pinned that exact version (the ^ allows compatible versions, so it doesn't explain why you're getting an error about a major version)

# ¿ Nov 3, 2023 15:47

Chas McGill: Oct 29, 2010; loves Fat Philippe

Trying out solidjs for a small project. People bitch about React all the time, but I'm finding solid fiddlier from a typescript perspective, particularly around conditional rendering.

Here's a snippet where some stuff is rendered if a signal called lesson is defined:

code:

      
const [lesson, setLesson] = createSignal<LessonModel>()

<Show when={lesson()}>
        {(lessonState) => ( // lessonState is the value returned by lesson(). If I were to try and just use lesson(), TS doesn't have a way of knowing that the result is defined, even though the condition has already been checked.
          <div class="lesson-container">
           // All the stuff that uses lessonState to render
          </div>
        )}
      </Show>

In the <Show> I use the value lessonState that is the result of calling the lesson() signal accessor, which TS knows is defined. But what if I wanted to make the condition more complex? Like lesson() && someOtherCondition. If I try and do that, the value returned is just a boolean, since that's what it would be. I could create a variable like const lessonState = lesson() in the block and check it there, but it feels redundant given that it's already been checked.

There's also the annoyance of not being able to destructure reactive props in components without an extra plugin. Currently not really seeing the benefits over ol' React, though maybe it's more apparent from a performance perspective. For small projects I'm much more inclined to value ease of use. I thought about using Svelte for this as well, but I'm a weirdo who actually likes JSX.

e: I just realised I misread the docs and I don't need to use their <Show> component - a simple condition should work, although I'd still have the same problem of needing to evaluate the result of the signal.

Chas McGill fucked around with this message at 18:55 on Dec 18, 2023

# ¿ Dec 18, 2023 18:48

Chas McGill: Oct 29, 2010; loves Fat Philippe

I've been trying a few different frameworks for a small personal app. Svelte is the weirdest and most interesting to me, having worked with React for years. It has a bunch of magic and neat bindings etc that I'm still getting used to. The transition directives are very handy.

Solid was very similar to React. Maybe too similar to be interesting to learn. I found it a little awkward in some ways, what with not being able to destructure props and some typescript weirdness that I couldn't be bothered figuring out.

I haven't seen a single job ad here in the UK for Svelte, so I'm not counting on it being useful on the CV.

# ¿ Jan 2, 2024 20:05

Adbot: ADBOT LOVES YOU

# ¿ May 5, 2024 23:14

Chas McGill: Oct 29, 2010; loves Fat Philippe

What's the state of offline web apps lately? I'd like to make something that can work offline or connected through the browser. I'm wondering if I should take the react native route to begin with, since I think the main use case will be on mobile. I'm a little reluctant to do that since I don't think messing with app stores and such is worth it for what I want to deliver, though.

# ¿ Apr 13, 2024 16:15

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT