Web Design
Let's talk about web design! Ask questions, share your work, and have fun!
@retrojoystick
My current frontend design stack consists of WordPress with Bricks Builder and Automatic.CSS, for quick design builds that can be wireframed on the fly. I've tried a few builders in the past, and this combination has ended up working pretty well for me.
What's everyone else working with?
0 reply
0 recast
0 reaction
@retrojoystick
The WordPress plugin repository just got a game changer added for free* use. Winden runs the Tailwind v4 compiler directly in the browser, eliminating the need for Node.js or local build pipelines. Write utility classes in the WordPress editor and they render instantly. Expand your client base/needs with this shit.
*Some builder integrations require a Pro license that is relatively affordable for smaller devs/agencies.
https://wordpress.org/plugins/winden-dplugins-tailwind-css-compiler/
1 reply
0 recast
1 reaction
0 reply
0 recast
0 reaction
@retrojoystick
anyone need a landing page or 20 hosted? hit me up for dirt cheap deals.
0 reply
0 recast
1 reaction
@retrojoystick
I think it's high time a spatial audio framework was put to use in accessible web design.
In a perfect world, haptic CSS, using a vibration api, would be a thing that @Apple doesn't block in Safari.
Anyway, here's a js audio framework that works, universally.
---
A=new AudioContext;
P=(f,x,o=A.createOscillator(),p=A.createStereoPanner(),g=A.createGain())=>{
o.connect(g).connect(p).connect(A.destination);
p.pan.value=x/innerWidth*2-1;
o.frequency.value=f;
g.gain.value=.1;
o.start();o.stop(A.currentTime+.2)}
onmouseover=e=>A.state=='running'&&(h=e.target.dataset.hz)&&P(h,e.clientX)
onclick=()=>A.resume()
---
frontend code example:
<!-- Just add data-hz="frequency" -->
<button data-hz="200">Left Bass</button>
<button data-hz="440">Center Mid</button>
<button data-hz="880">Right High</button>
Have fun!
0 reply
0 recast
0 reaction
@retrojoystick
If your components still live and die by viewport breakpoints, you’re falling behind.
Container queries are where it's at, regarding fluid responsiveness.
Get into it.
0 reply
0 recast
0 reaction
@retrojoystick
If you were tasked with a UI/UX redesign of https://www.berkshirehathaway.com/, how you make it better?
I'd add boobs everywhere.
0 reply
0 recast
0 reaction
@retrojoystick
This is a great write-up on native CSS physics, for anyone looking to add some razzle dazzle to their designs.
https://www.joshwcomeau.com/animation/linear-timing-function/?hl=en-US
0 reply
0 recast
1 reaction
@retrojoystick
I cannot stop building.
CutePages is something that some of y'all will find useful. If you're just getting into web design, or just want to build some quick landing pages or a site to use as a quick MVP, this tool is for you.
It's 100% free to use, and you can export each page as HTML, or zipped up in a package, ready to deploy.
https://cutepages.com/
1 reply
1 recast
1 reaction
@retrojoystick
How to build a WordPress-powered website, from start to finish, for beginners.
--
hunted @likesdotfun.eth, created by fronttobackdevelopment, powered by $likes
0 reply
0 recast
0 reaction
@retrojoystick
Who wants to dive head first into the world of building on WordPress with Web3 integration?
0 reply
0 recast
0 reaction
@retrojoystick
Here's a great article on the magic that is CSS, for everyone who wants to keep their code/framework as minimal as possible.
0 reply
0 recast
1 reaction
@retrojoystick
CSS custom properties are a great way to keep yourself organized when you're building out a website design. You can define pretty much anything you'd like, from colors, to weights, to borders, to border radii, to animations, etc. When you get to styling, you can reference these properties by using var(--custom-property) instead of constantly needing to type/paste your style code into your targets, which ends up creating a larger CSS file.
I'm sure that doesn't make much sense, so here's a great resource for anyone interested in learning how to define these variables.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties
0 reply
0 recast
0 reaction