Web Design
Let's talk about web design! Ask questions, share your work, and have fun!
@retrojoystick
GSAP has a new competitor. I've used motion.page for a while, and it's a great website animation tool. It started as a WordPress plugin, and now has its own standalone program that can load any site page and give you code to place on your site(s).
They put together their own SDK and you can check it out on the npmjs site, linked in this cast.
If you'd like to support the team, they still have LTD sales going on for the next couple days at https://motion.page
https://www.npmjs.com/package/@motion.page/sdk
0 reply
0 recast
2 reactions
@retrojoystick
Create Responsive Grid Layout in 1 Line by Theo Soti on YouTube
Stop fighting with breakpoints and utilize this nice piece of code.
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
0 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