Frontend

Discussions about frontend development, HTML, CSS, JavaScript, browser APIs, web standards, component frameworks, rendering libraries, UI/UX patterns, and tools and technologies used to build websites and web apps!

Darryl Yeo 🛠️

@darrylyeo

Component Party: compare and contrast syntaxes for different frontend frameworks. https://component-party.dev

3 replies

9 recasts

48 reactions

pugson

@pugson

you can get native liquid glass with css https://alastair.is/apple-has-a-private-css-property-to-add-liquid-glass-effects-to-web-content/

4 replies

0 recast

31 reactions

Darryl Yeo 🛠️

@darrylyeo

My personal approach for managing CSS styles: • Global CSS file with reasonable defaults for `*` (`margin`, `transition-duration`, `inherit`), `:root` (`font-size`, CSS variables), semantic HTML elements, form elements, global layout classes (`.stack`, `.row`, `.column`) • Scoped component-level styles (just the `<style>` tag built into many modern frameworks like Svelte, Astro, Vue, Ripple, ...) • Nested CSS rules (`&:hover`, `&[open]`, `> *`, `@media` / `@container` / `@supports` queries, `@starting-style`, ...) • Style variants: define TypeScript enum, apply enum value to `[data-*]` attribute on container element, then define local nested CSS rules (`&[data-layout="inline"]`) that only override local custom CSS variables • Overall layout: `grid-template` defined at multiple breakpoints using shared `grid-area` names • General layout: reuse global layout classes and prefer `display: grid;` / `gap` over `display: flex;` / `margin`

3 replies

2 recasts

15 reactions

Darryl Yeo 🛠️

@darrylyeo

Syntax: first look at Ripple https://youtube.com/watch?v=PG_PCGjfFto

0 reply

0 recast

3 reactions

Darryl Yeo 🛠️

@darrylyeo

Cool breakdown of the three.js scene embedded in Apple's product page for the iPhone 17 Pro. https://x.com/hybridherbst/status/1966996773672808578

1 reply

1 recast

6 reactions

Darryl Yeo 🛠️

@darrylyeo

TIL `styled-components` is no longer being maintained. Opportunity to practice some dependency minimalism. Never really liked CSS-in-JS libraries – they're less performant, limited to a subset of CSS features, and are just a constant burden to migrate. Plain old (nested, component-scoped) CSS is good enough for me. https://www.sanity.io/blog/cut-styled-components-into-pieces-this-is-our-last-resort

3 replies

0 recast

7 reactions

Complexlity

@complexlity

How I show love to the world? Find random streamers with no viewers and become an active viewer. Compliment whenever they’re doing, ask questions whether I know the topic or not. You can just see the joy on their face

1 reply

1 recast

3 reactions

Darryl Yeo 🛠️

@darrylyeo

Ripple looks AWESOME. It has all of the state management and lifecycle primitives of Svelte, but instead of JavaScript-like syntax sprinkled within HTML, it's HTML sprinkled into JavaScript-like syntax (without any of the annoying parts). Learning curve should be much easier if you're used to React/Solid.js.

6 replies

1 recast

24 reactions

Arti Villa

@artivilla.eth

thoughts on ripple? https://github.com/trueadm/ripple I haven't tried enough fe frameworks outside react to be able to make any valid arguments for/against it.

3 replies

2 recasts

8 reactions

Johnson

@johnson86tw

DApp developers can now use the Smart Account Manager to build applications. It supports batch transactions via EIP-5792 and allows DApps to provide paymaster services. Check out this demo!

2 replies

0 recast

1 reaction

Daniel Lombraña

@teleyinex.eth

X-casting

0 reply

0 recast

0 reaction

antimo

@antimofm.eth

Frontend + solidity dev required here https://x.com/camduncalfe/status/1963978409907781709

1 reply

0 recast

3 reactions

Jeremy

@samedayjeremy

Does anything feel as good as refactoring code and removing a bunch of unneeded lines and imports?

2 replies

0 recast

3 reactions

Adam

@adamhurwitz.eth

Do any frontend developers want to make crowdfunding easy for people around the world with @juicebox? 🧃🌐🏦 - The juicebox.money app team is looking for a JavaScript dev to build multi asset payments with Next.js - It's possible on the protocol and needs integration into the app - Right now people can donate in ETH. Donating in your asset of choice including stablecoins will greatly increase usability. I'm happy to introduce anyone to the team on Discord! cc Who may know people @darrylyeo, @rookiecol, @salviega https://farcaster.xyz/adamhurwitz.eth/0xe336ec36

0 reply

1 recast

2 reactions

Darryl Yeo 🛠️

@darrylyeo

Oh boy, a new web3 frontend app template CLI wizard to try out! **runs `pnpx [create-app-template-wizard-command]`** • React • Next.js • files unrelated to Next.js routes in `app` directory • Tailwind v3 • more than one UI component library • more than one React classname helper library • automatically installs everything with `npm` without asking • takes more than five minutes to install • “37 deprecated subdependencies found” • `react-native` is in the lockfile somehow I don’t want to use your app template anymore.

3 replies

0 recast

19 reactions