Step-by-step guide of how to create a dropdown share button for all of the top social media sites with Material-UI. See final codesandbox below ⬇️ Originally posted on https://snappywebdesign.net/blog/ Social share buttons are a must-have element of every website with a blog or article outlet. Social share buttons allow users…

Visit this website and you’ll be infiltrated by three separate popup modals and two banners urging you to sign up for something. You’ll be forced to sequentially close the popups and banners to actually see the text on the page. One modal, fine — but three of them? And two…

You’re hiring a freelancer or agency to build your company’s website and considering your options — WordPress, Squarespace, Wix — and then, someone mentions Gatsby.js. You learn that it’s used by many of the largest companies across the globe — but you’ve never heard of it, and don’t know what…

Wondering how to set or style the active link in Material-UI? This Material-UI tutorial will teach you how to style an active drawer / tab item with simplest code possible. The Mui AppBar and Drawer provide a great starting point — but they don’t provide a solid foundation for highlighting…

A good landing page should clearly reflect your company’s brand and values. You only have a few seconds to communicate the value you provide to potential customers. You also have to consider usability and accessibility — is your site easy to navigate? Does it flow logically from section to section…

Modern web apps are now thought of as bundles of modules interacting with each other to create functions/features. Bundling is the process of merging code into one “bundle” (think: script/file) to deliver to the user. Code Splitting converts these ‘bundles’ from one file to many, which can further dramatically improve…

Providing your users an easy way to share your blog posts is an SEO no brainer. Using the default Navigator api [navigator.clipboard.writeText] is a common approach, but lacks mobile support. The best way to copy selected text to the clipboard is by creating a hidden textarea. Luckily, all you need…

Turn your Gatsby website from light mode to dark mode and back with Material-UI Dark mode is a feature that users can’t get enough of. It saves battery life, reduces eye strain, and minimizes blue light emissions. It’s a simple feature that as a developer (all else equal), will set…

Onesnappy is a beautiful template that will provide you with a great foundation for your next static site. Onesnappy is a Gatsby.js port of the Material-UI + React template “Onepirate.” Looking for a free Gatsby + Material-UI template to help you get started building your app? Onesnappy is a beautiful…