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

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Is there a mobile framework/library with nice looking page transition effects? All the ones I've found look like crap, or don't support swiping, or are too slow on mobile

I made this demo of the kind of thing I'm looking for

http://static.holloway.co.nz/catalyst/swipe-pages/

# ¿ Apr 29, 2014 23:43

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 09:53

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

I'm about to do an presentation about browser layout algorithms (single-threaded era vs. Blink/Servo) and how to make things go close to 60fps (minimise reflow, js tips). Some feedback would be appreciated http://holloway.nz/what-a-browser-is/

# ¿ Mar 8, 2015 05:48

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Not sure how relevant this is but I wrote a blog post about browser engines and front-end animation.

# ¿ Jun 2, 2015 04:29

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

I don't know but https://github.com/kauffecup/react-native-web-hello-world has an example of shared code but platform-specific entry points

# ¿ Mar 16, 2016 09:56

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Noam Chomsky posted:

Is Bower still OK to use or does it make me an oldie and a baddie?

it's ok, but it's slowly dying. here's a bower dev DeSandro

bower seem to not letting their ego get in the way very much. good on them :thumbsup:

N.Z.'s Champion fucked around with this message at 03:43 on Jun 10, 2016

# ¿ Jun 10, 2016 03:41

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Forgall posted:

I'm trying to use Fields component of redux-form, but can't get validation to work. Format and normalize functions do get called for each name in names array, but validate function doesn't get called at all. Can't seem to find any examples of Fields with validation, just Field.

Edit: Actually I'm not even sure if Fields is the right tool for the job. I want to make a small component that can be reused in multiple forms, and it contains a few inputs inside it with some interdependencies (like showing text field only if checkbox is checked etc) and formatting/validation logic. Fields seems suitable for that because values of all fields are available on props passed into it, but maybe I'm wrong.

Judging from the docs it seems like Fields doesn't support validation directly, but you can always just do regular sync form validation.

You can just provide a validation callback on the validate property on your reduxForm wrapper to check your form as a whole. Then if you want to reuse validation logic it's just a matter of providing the same validation callback, or if you want to reuse the form layout then just reuse that too (e.g. export from a common file and import it from multiple places).

The SyncValidation example shows how to wrap a component as a ReduxForm instance

code:

export default reduxForm({
  form: 'unique form name',
  validate, // <--- validation function given to redux-form
})(SyncValidationForm)

N.Z.'s Champion fucked around with this message at 13:20 on Jun 27, 2017

# ¿ Jun 27, 2017 10:08

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Hey I made a code generator for React and Vue and Angular (etc)

https://springload.github.io/metacomponent/

It's an interactive REPL so you can type code and it show you the generated template, kinda like codepen.

The reason I made it is because I was making a pattern library for my government and every government department has different front-end tech, but they all wanted tooling in their language of choice, so I made this thing. it's up on npm too if you want a package.

# ¿ Jun 15, 2020 06:52

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

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

(as others said) beautiful-dnd is good and accessible. it's by Atlasian/Jira who need accessible products for government, and if you want a tree view version there's also @atlaskit/tree.

Opulent Ceremony posted:

We need to make a sort of multi-selector component whose selections will filter data on the rest of the pages, and it will appear on almost every page visibly outside of the pages themselves [... ]
- Place it outside of the page routes in the main App component since it will appear so frequently, but what about the pages it doesn't appear on? I would have to pass along a method for toggling it's visibility I imagine.

Toggling its visibility would (presumably) be route-based so it's probably simpler/clearer to just include the filter component on the page routes that need it

Opulent Ceremony posted:

- How would I get the needed data to the page routes? Pass the selected data and the toggle function as props to each route, or make a context for it?

Considering how distant you make the components sound then using Context is almost certainly the right choice rather than prop drilling

Rendering to another part of the page via Portals only affects rendering but events and context etc are all the same so context would still work

but I wouldn't recommend Portals unless you're really sure you need that. It would be more conventional to lift the state to surround the components that need to set/get that state. This would probably be a 'filter Context Provider' to propagate filter/setFilter, with your filter UI using both, and your children components using that context to read the filter

Dominoes posted:

https://github.com/David-OConnor/seed

github dark mode logo support please

maybe a white outline would fix it?

# ¿ Oct 4, 2021 05:37

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

teen phone cutie posted:

This might be a dumb question but is there a way to console log the source file from where something is being imported?

You can debug how Node itself resolves modules like this,

code:

NODE_DEBUG=module ts-node yourcode.ts

It will print a lot of debug like,

code:

MODULE 162331: looking for ["/home/(me)/(project)/node_modules/@aws-sdk/client-s3/dist/cjs/models"]
MODULE 162331: Module._load REQUEST ./models_1 parent: /home/(me)/(project)/node_modules/@aws-sdk/client-s3/dist/cjs/models/index.js
MODULE 162331: RELATIVE: requested: ./models_1 from parent.id /home/(me)/(project)/node_modules/@aws-sdk/client-s3/dist/cjs/models/index.js
MODULE 162331: looking for ["/home/(me)/(project)/node_modules/@aws-sdk/client-s3/dist/cjs/models"

I'd guess that bundlers like Webpack could be configured to override conventional node module resolution though (eg, for CSS imports)

# ¿ Nov 3, 2021 05:55

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Oh wait you can just do

code:

console.log(require.resolve('your-import'));

# ¿ Nov 3, 2021 05:58

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

prom candy posted:

The file system stuff is pretty important too

Yep and consider colocation for styles too (keeping style files nearby in the filesystem; near where they're used).

To help enforce style modularity you can use tech, like styled-components or css modules, or you can use a naming convention, like namespacing your css with the component name, but obviously tech will be more robust

Style modularity matters more on large sites so that you don't end up with a monolithic style bundle with lots of unrelated styles to the route the user is on.

# ¿ May 20, 2022 08:21

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Just use Next. It's simpler than a Vite build unless you have a need a custom config (ie, focus on your app logic not the build tooling, unless necessary),

The boilerplate is pretty good

JS:

code:

npx create-next-app@latest

TS:

code:

npx create-next-app@latest --ts

# ¿ May 30, 2022 00:38

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

the new React docs beta site is good

# ¿ Jul 17, 2022 20:56

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

I don't know about Remix but usually you can indicate that a component should only be used client-side with React.lazy and the import function import('a.tsx').then(module => ...) (not to be confused with the import statement import a.tsx). This might be relevant https://github.com/remix-run/remix/discussions/2936

# ¿ Jul 18, 2022 10:35

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Could be a performance problem rerendering the whole list. See this blog on React devtool's support for showing rerenders

To reduce rerenders you'd usually memoize the reactdnd item, and make sure each item doesn't depend on frequently changing state (global or local).

# ¿ Oct 10, 2023 00:58

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

maybe generate MPEG-DASH files

# ¿ Dec 21, 2023 03:15

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 09:53

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

fuf posted:

I can actually reference preset.tags in the same component as the prisma call, because like you say prisma is composing the right type based on what I've asked for. The issue comes when I try to pass the preset to a child component and reference its tags in there:

I put some Prisma calls individually in functions and then use the TS helper ReturnType and Awaited to extract the Prisma type and keep it in sync with the query.

TypeScript code:

export async function findUniquePresetIncludeTags(presetId: string) {
  return prisma.preset.findUnique({
    where: {
      id: presetId,
    },
    include: {
      tags: true,
    },
  });
}

type PresetWithTags = Awaited<ReturnType<typeof findUniquePresetIncludeTags>>


export default function SinglePreset({ preset }: { preset: PresetWithTags }) {
  console.log(preset.tags.length);
}

N.Z.'s Champion fucked around with this message at 12:07 on Mar 11, 2024

# ¿ Mar 11, 2024 10:03

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