DAPPCON 2025: Full Stack Devs Suck at Design. I Can Save Them - Pentacle

Transcript

Hello. It's still very bright, by the way, that light. It's still really, really bright. Hello. Um, I'm Pentacle and full stack dev stuck at design. Um, right. I'm just going to try and find this button here. It's the green button. I can save them. I have saved them in the past and I can save them again. So, the problem is that I can't see my slides down there because I don't have my glasses on. So, um, sometimes devs make design decisions just because they can or because they have to. Um, that can mean that your uh app's going to go completely off brandand looking at you, Lawrence, with your squashed logo. It's gone like that.

You can get weird UX patterns. Um, and when I worked with developers before, I heard this term bike shedding a lot. Didn't really know what it means, but now I do. Um, so you can go off brand when you have this many colors to choose from. It gets confusing. You have to remember them all. Um, this is a recent incident we had actually at work. Don't put form inputs below the submit button just because you can or because someone else did it. And I tried to get chat GPT to draw this up for me and he refused. So actually sometimes the AI is right at UX and your full stack devs aren't he who was trying to draw the form bits like below the submit button but refused to put it on the screen because it should never go below the submit button.

Um now here's a good story I heard yesterday as well. Uh UX to the developer. Here's my design. Uh, div, no, I think we need to move that icon UX. Well, this is the logical placement. Here's the design system that's in place. Um, and here's the reasoning behind it. And the div was like, well, let's get AI to make the final decision, not the designer. Why are they there? Um, how do I know this? So, in a previous life, I used to work in enterprise software and my job was to clean up divs. basically um I removed a lot of uh Bootstrap and I put in uh semantic HTML and handrolled CSS basically. And so what that did was we

were taking away all the design choices away from the developers so that they didn't have that cognitive overload. Um also so they didn't it up basically. Um and result people stick to their jobs. Designers do design, developers do the development. Um, and why does this happen? Well, just because you can, you control the code base, you know, you're the developers, doesn't mean you should. If this uh piece of graphic design here doesn't make any sense to you, um, then you're not a designer, basically, then don't do design. Um, so how did we get here?

Well, how did we get here? We have the tools. We just forgot how to use them. Um because HTML is only for junior devs. Um and real devs just use lots of divs, which is why God invented JavaScript. Uh and you can see here actually the HTML person is just the HTML guy. And to be a developer, you have to be full stack or better. Otherwise, you're just the guy. So click. Here we go. But where we're going, we do not need three UI libraries to build our apps. That's shad CN to do an accordion. Uh or actually you can make one with semantic markup and then you can put your styling in your global CSS and it makes your code a lot easier to read. Uh cognitive overload for

developers is massively reduced. You can see what you're doing. You don't have to scroll all over the bloody place. But also um CSS is also just for juniors. Um so God hatch styled components to make CSS difficult as well. um and things like CSS and JS because otherwise you're just the CSS guy, not the full stack developer who is more important. Um right. Yes. And this is I have seen so many code bases where you have your TypeScript files. Um oh sorry no I thought that was seconds. Um you know you've got all your TypeScript files nicely arranged and your big directories. Um and in all of it you've got your index.tsx. Lovely. All very

nice and organized. And in those you have a style.tsx file. And in each of those files, you have every piece of uh UI in there. So you could have one button in every single file. I've seen this happen because there's one on one page, they're like, well, we'll have 12 instances of our button styled components. And then you start getting drift and that's when your design starts cocking up basically. And so I'm here basically to make life easier for developers. If you make things less complicated, your design is going to look great and you don't actually have to design anything. And we also have a new entry in our full stack developer portfolio here, should we say, of uh devs. We have Claude, who loves to add lots and lots of markup to your

code. Uh so I have now trained Claude to it's illegal for Claude to add a font color, uh padding or anything like that. It's just pure semantic markup or JSX. I get a load less croft to my code. Um and it looks way better. I'm like, "Look, mate, look at the CSS. Don't touch it. we don't end up with lots of different designs. So, it's a global CSS or get out of here basically. Um, the design just happens. Uh, if you want fancy stuff, you can do your magic sparkles and your beautiful 3JS. That can all come later. But the way I design is I basically get a wireframe into my app, get people to test it. So, a little primer here. Um, if you're sort of a

developer, you don't have a designer, sometimes this is just a good little checkpoint to look at. As little design as possible is the main one. And everything else basically falls out of the back of that. So, excuse me. Just going to have a sip of water and shake like a leaf. Anyway, I'm fine. Um, yes. So, great little checklist here. if you're particularly a developer with no designer. But here's our CSS guy. Now, it's amazing what he can actually do. Um, so as I've said, I work purely with semantic markup and CSS. Um, global CSS means that the designers can take ownership of that or somebody who's

in charge of design. Um, the instant design comes out of the box basically. Wow, what's that? Um, lets the developers go fast. you don't have to wonder about overload of design choices. What's our brand color? I've forgotten which Tailwind blue it is. Um and then also on the design system that I'm building, I've put in minimal utility and layout classes so that we don't need um Tailwind. Tailwind has got very weird lately. I can't operate it anymore. Um it's very complicated and lots of different bits of code I have to add just to create my own classes. Um and then variables for app customization. So if you have a suite of apps for example uh you can change it pretty easily. So

we're going to go through this list of what is good design and how does CSS and HTML assist that. One moment caller a drink right that's better. So uh being innovative well what you want to do with your products is get PMF. basically was the mythical crypto PMF. Um, so in order to get that, you want to test early. And in order to test early, you want to get your app out fast instead of languishing over it and going, "Oh, it's not perfect." Um, this is what CSS can do for you. Um, I actually built these basic tabs out.

Sorry, I can't see that. My eyes are not very good. Um, but I built these tabs out just using CSS. They're actually radio buttons. A bit weird. Um, but it's super lightweight code. And you can see here the markup. It's not full of croft. There's not like a million Tailwind uh colors and shadows and drop downs and all sorts of that kind of thing. You can see what you're coding. It makes you fast. You get out to test early and you can embarrass yourself in front of your users. Um, so this is what I'm working on at the moment. Um, the old Pentacle um project has become searchable. If anybody knows of Pentacle, um, not just me, a project name too. So we have one minified CSS that rules them all. Um I haven't actually put it in here but the

CSS is broken down into element names and then it all gets bundled into one. And then each app um has theme variables so that we don't kill everybody with boredom having the same design for every single app. We can change things at this global level. um sorry and then at local level basically and also just really easy to do dark and light word which is normally really hard and complicated um but CSS if you're minimalistic with your CSS you can do it very quickly right sorry uh anyway quick tip for developers function first bring your code to the surface um I also do quite a bit of backend work as well with data um

and I just like to think about how that interfaces with my front end and how much front end I can actually get rid of uh to let the back end come through because that's actually what people are interacting with. Doesn't have to be all about design personality. Your brand can be very simple. Don't design it. Let it design itself. Here's an example of that. I mean, it didn't really, but it's about taking things away. Uh get your product working and then see what it's telling you and take away as much design as you possibly can. Um, so good design makes product useful. Uh, yes. So this is kind of referring to the product in the product. So I think about my CSS library as a product. So inside the product, it empowers devs like it gives

them more time. It's less confusing. You don't have to think about design. You don't have to think about centering divs horizontally and vertically. Uh, gives designers control over things like color palettes. Make it super simple. you can control like global uh border radiuses, global padding all in one place which then in turn tidies up your design. Um, and it's self-explanatory because even junior developers know HTML. So, uh, this is just a quick drive-thru slide. Uh, don't let your users get away. Uh, so make your product useful.

Um, put your information within your interface. Don't let this guy here go off to your marketing website or your getbook. Uh he'll get distracted because something's just happened in the group chat and he's gone. Bye. Um aesthetic talked about this. So that is basically how I control light and dark mode. Super minimal amount of colors. Your design will look way better. Uh make things minimal by default here. That's a card that's used across multiple apps. Um and it's you know few lines of code basically. Then you can add some chaos once you've got your wireframey grid stuff in. Then you can kind of add some swooshy animations and make it weird and interesting and a bit overloaded. That

one, right, this is an example of very simple design that had a bit of chaos added later. Uh, this actually took two weeks to build. And it's really simple. It's three pages. It's uh it's in Helvetica, but all the work went in and this was going to be animated, but that was too dangerous. So, but this is a piece of 3JS. It's quite a long animation and it's got a very specific film grain effect over it. So, that's where the energy went into after we really nailed the design down to literally nothing.

All right. Yep. So, making your product understandable again kind of product in the product with your code base being part of that. Make it understandable. It's a lot faster to be able to uh code semantic HTML. means you don't have to make up styled components and invent a new taxonomy that may not line up with what the business thinks and then everyone has to learn the new language. Um, you know, with all millions of divs as well, things just get confusing. So, semantic HTML actually gives you so much just out of the box. Uh, that's my continuation of the He-Man theme about brand colors got cropped off there. Um, and also with semantic HTML, you know, you just get accessibility out of the box as well. Uh and also for people who are using keyboards to navigate or site

impaired again their screen readers can read semantic markup uh they're not reading your divs. Uh yep quick tip also follow where's my screen? Oh sorry yes follow human patterns um eyetracking things like reading books is kind of a well-known design pattern. Start up there read down finish the page press the submit button at the end. Don't put the input after the submit button. Um, good design is unobtrusive. This is Viper that we did um, last year. And it's just very simple grid. It's got a simple animation in it.

Um, super old school uli for the footer navigation. And to give it that elegance, we um, just put a simple scroll behavior. Smooth, no JavaScript required. Um, good old HTML and it looks very, very nice. Um, keep your design honest. Uh, be upfront. Tell your people that you've all unsubscribed them, basically. Um, oh I'm running out of time. So, be upfront. Uh, don't hide information. Don't do dark UX patterns. Um, never pre-select a radio button. That's the worst UX crime. Uh, good design is long-lasting. This is from 1923.

And HTML also is never going to go out of fashion, as Tim has proved in his websites. Um, there's no dependencies. It's just going to run basically and it works. There's no buttons though. So, uh, good design is thorough down to the last detail. Again, just create a simple grid. Don't have millions of different paddings and alignments that Claude has given you. Just strip it all out. Basically, literally have nothing and it will look better. Here are some examples of that. Um, you can see where the H1s are. You can be a bit weird with design. Grid system is a good example here of just like design is lining up, right? uh be environmentally friendly.

You can have a small amount of code. Uh less is more. There's a tiny amount of elements on that design, but an element of being handmade makes it interesting. Um so this means that you can be consistent. Uh and as backend developers or whoever you are, uh you can just get away with a handful of colors and it looks freaking awesome really. And you can use your code to inspire your front end. Um but I have ideas. No, don't. Um just remember as little design as possible. Um but also uh as John Ma says great design makes things clear. Um but simplicity and complexity also need each other. So again that's back to that principle. Start with something really

simple and then add some beautiful design elements. This is something I did for Joseph. Sneak sneak preview. Um you can see just H2s and paragraphs in here. a bit of fiddly CSS for the borders so that it works and responsive so you don't get double borders. And again, this is all completely stripped back to absolutely nothing and a handful of uh uh CSS basically. So that's it. I finished early. I erased the last slides. Um yes, remember you can just not design things.