You have a software product and you want to make a website for it. The conventional wisdom would be to hire a web developer. However, if you want to save money, and have more control over the outcome of the project, you can also build your own site. Building a…

What is Supabase? Supabase is an open-source alternative to Google’s Firebase. It’s currently free to use, supporting PostgreSQL databases and authentication tools. It relies on existing open-source projects and a serverless solution will be released soon. React + Supabase Tutorial Create a Supabase account

Django ModelForms is a helper class that allows you to create a Form class from an existing Django model. It honestly sounds more complicated than it actually is to implement. Create a Django Model Add a model to models.py mysite > main > models.py from django.db import models # Create your models here. class…

A Bootstrap modal is a component that’s positioned over everything else in the HTML document. Bootstrap modals by default place a transparent, darkened background over all elements behind the modal. React is an open-source JavaScript library for user interface components. When combined, React and Bootstrap modals can quickly create a…

Adding a React “Copy to Clipboard” function is easy enough. It can be done inline or called as a method. Basics of the React Copy to Clipboard event handler onClick React event onClick={} Start with a onClick React event. Inline event handler onClick={() => {navigator.clipboard.writeText("http://localhost:3000/")}} The arrow function is the…

A favicon or favorite icon is the icon located on the left side of a browser tab. The generic favicon for Google and Firefox browser tabs is a globe icon. Websites often override this generic favicon and use their logo or an image associated with their site. Favicons are typically…

Tailwind CSS currently does not have documentation on how to integrate the Tailwind CSS download with a Django project. Luckily there is a package designed for this exact integration. Note: I’ll name my environment, project, and app env, project and app to keep things simple. Install Node.js and npm

Many websites list their contact email address in the footer where it is up to the user to send an email. While this is by no means a bad way for users to contact staff, it requires more work and effort on the user’s side than what’s necessary. So let’s…

Here are 7 examples of basic Tailwind CSS buttons. These buttons examples were added to a React Tailwind project, but the Tailwind class attribute values work with HTML as well. Check out the TailwindCSS section of Top 3 CSS Frameworks for Front-end Development if you are new to Tailwind. TailwindCSS Buttons Tailwind…