A collection of web development related tips, tricks and snippets that I wanted to remember for myself and share with others. Hopefully you find them as useful as I have.

It's hard to beat Laravel for backend development and React is a force for front end development. Inertia.js is the little bridge flowing the traffic between the two. This YouTube series does a 🧨 job of explaining how to make it happen. 

An elegant way to scale fonts and spacing for responsive designs. A generated example with 8 scales 

https://utopia.fyi/type/calculator

FetchPHP is a PHP library that mimics the behavior of JavaScript’s fetch API using the powerful Guzzle HTTP client. 🐕

A super flexy way to wrap button text when a row has multiple buttons/options. 

Discovered a new HTML element `datalist`. Adds a dropdown autocomplete option to input fields. Finding features like this in native HTML is 🧨

Tired of using containers and wrapper divs? Struggling with how to breakout sections that need to go wider than the container width? This video is 💰💰💰

A modern "twist" on a Solari board using AlpineJs and Css. 

In Craft 4, the environmental config override for disabledPlugins is CRAFT_DISABLED_PLUGINS.

This was really cool demo on CSS gradient borders but the eye catcher is the 3d exploding layers. 2 🔥 tips for the price 1.

🥸 Alpine Plugin: Mask

One directive: x-mask

Easy, powerful and elegant input masking.

Vector Scribbbles are FREE 🥳

Go grab them right now! https://scribbbles.design

If you're animating numbers, use this line of CSS

.numbers {
   font-variant: tabular-nums;
}

It will make sure your numbers don't jump around like this 👍

Make some waves! 🏄‍♂️

https://getwaves.io

For anyone who loves typography, this little gem 💎 from @mikemai2awesome is one of my favorites. Clear, concise, actionable, and beautifully designed:

🔥 Design tip for developers

A good way to make your interface look “designed” is to use a consistent space scale

It's not art, it's science 🧬

With TailwindCSS this is so easy.

Really cool CSS gradient border effect I recreated after seeing it on the warp website. Props to Wes Bos for this one.

Demo: https://htmlpreview.github.io/?https://raw.githubusercontent.com/wesbos/hot-tips/main/warp-card.html…

Code: https://github.com/wesbos/hot-tips/blob/main/warp-card.html

With a few simple lines of CSS you can create a beautiful 🥧 chart 

background:conic-gradient(
   #a78bfa 0deg 45deg,
   #fb923c 45deg 90deg,
   #a3e635 90deg 225deg,
   #22d3ee 225deg 0deg
);

The spread operator [...] is a handy way to convert iterable item(s) like strings, arrays and node lists into arrays. Converting node lists from querySelectorAll statements into arrays is 🌶️