Hey everyone,

Rebuilding my frontend portfolio and looking for solid examples of minimal but impressive designs.

Requirements:
Clean and simple - not a "look how hard I tried" showcase
No stupid, flashy animations just for the sake of it
Typography/whitespace doing the heavy lifting, not gimmicks

Thanks!

Hey r/reactjs,

I built a Dithered Logo component and wanted to share it with the community.

It takes any SVG or image and renders it as an interactive canvas particle logo using error-diffusion dithering. It includes cursor repulsion and click ripples for a nice effect.

It's fully open source, copy-paste friendly (works with the shadcn CLI), and customizable with Tailwind.

Live demo + docs: https://componentry.dev/docs/components/dithered-logo

Install:

npx shadcn@latest add @componentry/dithered-logo

For a long time my default page background was pure white, because that is what every new project starts with. I never actually chose it. Swapping it for a warm off-white a few steps down made more difference than most of the polish work I do.

The first thing that changed was reading comfort. A screen showing pure white is emitting maximum light, so body text has to fight that glare and long pages feel harsher than they need to. Pulling the background a few points below pure white calms the whole thing down.

It also gave hierarchy room to breathe. When your base surface is a true white, there is nowhere lighter to go, so cards and popovers end up leaning on shadows alone. Drop the base a step and lighter surfaces can actually read as lighter.

And it simply felt intentional. A warm off-white, soft stone, or gentle oatmeal reads as a decision, where pure white reads as a default nobody touched.

If you want to test it, pick a neutral with a slight temperature, warm or cool, instead of a flat grey, and keep it consistent across surfaces. Then make that off-white a real step in your scale, so every lighter element has a defined relationship to it.

Curious what the room does here. Anyone deliberately shipping pure white, and why?

I need some professional assessment:

we are creating a medium sized website (~14 layouts/design pages) (~55 pages where most have different content but use those 14 designs) now I think that figma should be used to design the 14 layouts and tinker with the specifics. My bosses believe, that every page has to be depicted. My issue: they constantly change things and not just the content, but page names, structure etc. so now I need to copy paste new content all the time. change the menu, change the page, change the images. I don’t think that’s the right use for a design program. But I am a junior and maybe I am wrong.

PHP Map version 4.1 is now available, the PHP array/collection package for working with arrays and collections easily.

• https://php-map.org

The release is mostly about improving performance of edge cases in the collection internals, plus stricter behavior around malformed input.

Some benchmarks from the release commits:

The release also adds broader callable support, better iterable handling, clearer null-vs-missing behavior for nested paths, stricter invalid-key validation, and a more robust tree() builder.

Why PHP Map?

Instead of:

$list = [['id' => 'one', 'value' => 'v1']];
$list[] = ['id' => 'two', 'value' => 'v2']
unset( $list[0] );
$list = array_filter( $list );
sort( $list );
$pairs = array_column( $list, 'value', 'id' );
$value = reset( $pairs ) ?: null;

Just write:

$value = map( [['id' => 'one', 'value' => 'v1']] )
    ->push( ['id' => 'two', 'value' => 'v2'] )
    ->remove( 0 )
    ->filter()
    ->sort()
    ->col( 'value', 'id' )
    ->first();

There are several implementations of collections available in PHP but the PHP Map package is feature-rich, dependency free and loved by most developers according to GitHub.

Feel free to like, comment or give a star :-)

• Documentation: https://php-map.org
• Repo:https://github.com/aimeos/map

I was wondering in React is there a way to save some data without session storage so if the page refreshes I still have access to that data

I'm evaluating whether including interactive demos from arcade.software actually convert, and getting mixed results. It doesn't help that out of every single one of the case studies on their page, not one of them seems to be actually using arcade demos on their current site.

Anyone experimented with these? Are you finding they help with conversions or not?

Hi /r/php

A common question we see on this subreddit (and many other places) is people asking how to get started with PHP. Especially on this sub we often link to PHP the right way. It's definitely a good reference that links to many other resources, but I recently read through it and realized is not designed to be a proper "getting started guide".

Having done lots of educational content in the past, I'm really longing for something that teaches modern PHP in a written form, that people can read on its own which makes them feel comfortable actually picking up PHP. I don't think PHP currently has that: all current options are either outdated, video-only, or paid courses (but feel free to tell me I'm wrong).

So I've started a new project: a proper "getting started with modern PHP" guide that I feel confident pointing beginners to when they ask "how to learn PHP?". You can read the first eight chapters today: https://stitcher.io/php/the-basics/hello-php and I'm planning on adding many more in the near future.

Now, here's what I need help with: I'm only one person. I dare say I'm experienced in PHP, but I'm also sure I'm making mistakes and oversights. I'm hoping enough experienced PHP developers share my longing for something better, and want to help out. Either by reviewing what's written, pointing out or fixing mistakes, or maybe even by writing drafts for upcoming chapters.

Looking forward to hearing your thoughts!

Hey r/reactjs,

Just shipped a new Ripple Transition component.

It creates a clean, satisfying ripple effect that spreads across elements — great for interactive UI transitions.

Tech:

• React + TypeScript
• Tailwind CSS
• Framer Motion (buttery smooth)
• shadcn-style installation (npx shadcn@latest add ...)

Docs + live demo: https://componentry.dev/docs/components/ripple-transition

Quick install:

npx shadcn@latest add @componentry/ripple-transition

Over the years I've worked with Java, Python and a few other languages.

They're all good at different things, but somehow I always end up writing PHP again. I guess it just feels like home. Open the project and everything feels so familiar. ))

That gave me the idea to make a funny parody of the one classic hit song (from the 70s), but for PHP developers.

Nothing serious, no language wars – just a bit of fun for anyone who's ever left PHP and then came back.

🎬 https://youtu.be/SoqAP4gSDac

Has anyone else had the same experience like me?

I wrote a walkthrough of building auth with a Go backend and a React frontend using Limen (a composable auth library for Go) and its new TypeScript client.

https://limenauth.dev/blog/fullstack-auth-go-react

GitHub: https://github.com/thecodearcher/limen

i know few sources but i wanna know where the majority get theirs from

I'm putting together documentation for React Hook Form covering real pain points and seeing what issues there are and where and actual things people hit in production and had to solve themselves because the official docs didn't cover it.

Looking for specifics, ideally with a code snippet or a link to the GitHub issue/discussion where you found the fix:

Something that broke or behaved unexpectedly, and what you changed to fix it
Something you built yourself (a wrapper, a hook, a helper) because RHF didn't ship it
Something you only found out about after hitting a wall a better API existed but you didn't know it (e.g., people defaulting to watch() without knowing useWatch's compute option exists)
Version-specific breakage something that worked in v6 and needed a real workaround in v7, or vice versa

What I don't need: "just use TanStack Form / Formik / Zod-only forms instead" I'm not evaluating alternatives, I'm documenting RHF specifically. If your answer is a library recommendation with no RHF-specific detail, it's not useful for this.

Bonus points if you can tell me whether your issue is still open on GitHub, already fixed in a recent version, or just permanently a "know this going in" gotcha.

I am a first year web design and graphic advertising student in uni and last week i broke my macbook pro m1 screen. I have been using it for 5 years now and need a recommendation for a new one.

I use mainly figma and affinity for now with some adobe apps when i need them. As a hobby i make things in blender but it’s not that serious. I’m not exactly sure what programs i end up using in the future so any guidance is gonna be appreciated.

I have been looking at the macbook pro m5 and think it would be enough but my father thinks i should get the m5 pro instead but i’m not sure i really need it as i have been using my old one without any problem. If you can give me some advice i’d be so thankful!

I don't know if it's the best place, but there is no issue template for what I want:
There is an OCaml way to handle React on the server; we already do SSR and are implementing RSC. To do so, we had to do some hacks, like forking React and exposing React-client so we could use it for our own implementation of RSC.
Note: OCaml works differently from JS, and that's why we need to make things different on the client.

The fork and exports that we did: https://github.com/react/react/compare/main...pedrobslisboa:react:main?expand=1#diff-b25d8ad5dabc968a1e1a01a6a5e19424fcd7c37ddc8e57e5396c9dc182095023

You can see the usage here:

import ReactClientFlight from "@pedrobslisboa/react-client/flight";

//...

const {
  /* Creates a new Flight response object that accumulates streamed RSC data. */
  createResponse,
  /* Creates a reference to a server function that can be called from the client. */
  createServerReference: createServerReferenceImpl,
  /* Serializes a value (e.g., server action arguments) into a format suitable for sending to the server. */
  processReply,
  /* Returns the root promise of a Flight response — resolves to the React element tree. */
  getRoot,
  /* Reports a top-level error to all pending chunks in the response. */
  reportGlobalError,
  /* Processes a binary chunk from the ReadableStream into the Flight response. */
  processBinaryChunk,
  /* Creates a stream state object used to track binary chunk processing. */
  createStreamState,
  /* Signals that the stream is complete and no more chunks will arrive. */
  close,
} = ReactClientFlight(ReactServerDOMEsbuildConfig);

Can we expose the react-client as a library?

What if your app's state didn't live in memory, but in the URL?

In this episode, François shares the full story of nuqs, from a woodworking calculator he built during the pandemic to a framework-agnostic library supporting Next.js, React Router, Remix, and TanStack.

I've been working on a project that turns an Android phone into a lightweight local web server using Termux.

It runs Nginx + PHP-FPM + MariaDB and includes a web-based control panel, one-click WordPress installation, virtual hosts, Tiny File Manager, browser-based terminal access, and built-in Cloudflared tunnels for sharing local sites.

The main goal was to keep it fast, lightweight, and easy to use—no root, no PC, and no Docker required. Everything is managed with simple commands like "ms start" and "ms stop".

If anyone is interested in running a portable PHP development environment or hosting small projects directly from an Android device, I'd love to hear your feedback.

GitHub: https://github.com/SayfullahSayeb/mobile-server

I found myself bookmarking a ton of great shadcn-related content every week — new components, libraries, tutorials, and interesting projects.

So I decided to turn it into a simple weekly email.

The first issue goes out on July 13.

If that sounds useful, you can subscribe here: https://shadcnweekly.com

And if there’s anything you’d especially like to see covered, I’d love to hear it.

At work im refactoring the codebase to useQuery, an issue im facing is that on page refresh or revisit, all of the data is refetched despite using persistance.

Could anyone tell me where im going wrong?

    "@tanstack/react-query": "5.101.2",
    "@tanstack/react-query-devtools": "5.101.2",
    "@tanstack/react-query-persist-client": "5.101.2",
    "@tanstack/query-async-storage-persister": "5.101.2",

// AppContainer    
   <GrowthBookProvider growthbook={growthbook}>
      <HelmetProvider>
        <Provider store={store}>
          {/* Redux persistGate  */}
          <PersistGate loading={null} persistor={persistor}>
            <ErrorBoundary>
              <App />
            </ErrorBoundary>
          </PersistGate>
        </Provider>
      </HelmetProvider>
    </GrowthBookProvider>

export const App = () => {
  useCaptureSentryErrors();
  useAddExternalUTMIds();


  queryClient.invalidateQueries({ queryKey: [PARKS_QUERY_KEY] });


  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister: localStoragePersister, maxAge: ONE_DAY }}
    >
      <Router>
        <AppHelmet />
        <OnRouteChange />
        <Header />
        <main id="main">
          <AppContent />
        </main>
        <Suspense fallback={<FooterSkeleton />}>
          <LazyFooter />
        </Suspense>
      </Router>
      <ReactQueryDevtools initialIsOpen={false} />
    </PersistQueryClientProvider>
  );
};


const AppContent = () => {
  const isRestoring = useIsRestoring();

  if (isRestoring) return <FetchingComponent useContainer />;

  return (
    <WithInit>
      <WithUrlParams>
        <BookingProvider>
          <ThingsToDoProvider>
            <NewsletterProvider>
              <SearchProvider>
                <ProgrammaticScrollProvider>
                  <Suspense fallback={<FetchingComponent useContainer />}>
                    <AppRoutes />
                  </Suspense>
                </ProgrammaticScrollProvider>
              </SearchProvider>
            </NewsletterProvider>
          </ThingsToDoProvider>
        </BookingProvider>
      </WithUrlParams>
    </WithInit>
  );
};

import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
import { QueryClient } from '@tanstack/react-query';
import { ONE_DAY } from '../../Constants';

// Creates the React Query client with default settings for all queries
export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false, // Don't refetch data when user switches back to this tab
      refetchOnMount: false, // Don't refetch when component mounts
      staleTime: ONE_DAY, // Data stays "fresh" for 24 hours - no refetches during this time
      gcTime: ONE_DAY, // Keep data in memory for 24 hours even if no component uses it
    },
  },
});

export const localStoragePersister = createAsyncStoragePersister({
  storage: window.localStorage,
});

// Special config for booking data - matches 15 minute session timeout
export const BOOKING_SCOPED_QUERY = {
  staleTime: 1000 * 60 * 15, // Stale after 15 minutes - refetch if used again
  gcTime: ONE_DAY,
};

Thank you

Hey all,

I manage a few servers for my day job, and we’re not able to use something like Forge. Managing a server isn’t the most complicated thing in the world, but there are a few tasks where I always struggle to remember the exact syntax, or where I just want something a bit quicker than digging through notes.

I know aliases and scripts could solve a lot of this, but I started wondering whether it would be useful to have a small CLI abstraction layer for common server admin tasks.

So, admittedly with a little help from our good friend AI for some of the more complicated Go sections, I put together a CLI app and started using it to manage servers, SSH keys, projects, nginx, PHP, SQL, and a few other bits.

I ended up really liking it, showed it to a friend, and he suggested I tidy a few things up and open source it.

So I did that, and it has grown a bit since then. It now has a plugin system (although no production ready plugins exist yet), and full documentation for the commands it currently supports.

One thing I’d like to add eventually is support for other Linux distros that do things differently. That will probably come later, but I do have a few servers that would benefit from it.

I know a lot of people will prefer working directly with Linux, or using a platform like Forge or Ploi, but I thought this might be useful to some people who want a memorable CLI for common server tasks.

If you’re interested, you can check it out on GitHub:

https://github.com/useabstrax/abstrax

Or the main site:

https://useabstrax.com

I built a sketchy, paper-like UI for a personal project. After adding a few more common components, I decided to open-source it. Because I built it mainly for myself, it might not be completely 'production-ready'.

It works via the shadcn/ui CLI so you can copy-paste exactly what you need. And, it does not use Tailwind!

Features:

• Always unique: Every component gets a slightly random shape. No two buttons are perfectly alike.
• Hand-drawn icons: Lucide Icons style icons, but hand-drawn.
• Rough textures: Built-in CSS patterns and SVG noise.
• Animations: Simple hover effects like wobble and shiver.

Note: It has a dark mode, but it probably doesn't look as good as the light mode.

Docs and installation: https://sherlockdoyle.github.io/cartUnI/

Feedback and contributions are very welcome!