Bookmarks

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.

Shopify Sections API

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.

#Shopify

Laravel + React

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.

#JS
#Laravel

Utopia Font Scaling

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

https://utopia.fyi/type/calculator

#CSS
#Design

Fetch PHP

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

#PHP
#Laravel

Flexbox text wrapping

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

#CSS

HTML Datalist

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

#HTML

No more containers

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 💰💰💰

#CSS

If Vanna White becomes AI ...

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

#JS
#CSS

Disable Craft Plugins

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

#Craft

Gradient Borders Exploded

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

#CSS

AlpineJS Mask

🥸 Alpine Plugin: Mask

One directive: x-mask

Easy, powerful and elegant input masking.

#JS

Scribbles

Vector Scribbbles are FREE 🥳

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

#Design

Tabular Numbers

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 👍

#CSS

Make Waves

Make some waves! 🏄‍♂️

https://getwaves.io

#Design

Typography

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

#Design

Interface design

🔥 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.

#Design

Gradient Border Effect

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

#CSS

CSS Pie Chart

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
);

#CSS

Spread Operator

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

#JS