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.

Great concise video on Laravel actions, how to create them and how to test them.

Another handy little Laravel helper, abort_if. Perfect little helper inside actions when things go wrong. 

Great little Laravel model tip. Use the "wasRecentlyCreated" model attribute to check if your model was created or found 👍

You can use the Section Rendering API to request the HTML markup for theme sections using an AJAX request. This can allow you to update page content without reloading the entire page by fetching and dynamically replacing only certain elements 🤯. More details here, https://shopify.dev/docs/api/a... Skip to 2:40 in the video to see Wes Bos explain in.

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 🌶️