DEV Community: Ben Douglas

Bounie Launching On Product Hunt Tomorrow

Ben Douglas — Thu, 30 Mar 2023 14:11:01 +0000

Todays a very exciting day for me as my new website Bounie will be launching on Product Hunt! So first of all, what is Bounie? Bounie is a news website where anyone can contribute. It all starts with a good headline. Users can then contribute related information, images, links and opinions to build out a full story. This results in articles that are dynamic feeds of engaging content instead of traditional walls of text.

I give a full demo of Bounie in the video below, check it out if you want to learn more:

Please sign up for Bounie and let me know what you think of it! And keep an eye out for it on Product Hunt tomorrow. I greatly appreciate it!

Since this is dev.to you're probably curious about the technology I used for Bounie. Here is a breakdown of the technology I used to Build it:

Codebase:

Next.js: I really enjoy working with this framework and the ease of deploying both the frontend and backend on Vercel
NextAuth: A great user authentication library, currently I only support signing in with Google
MUI: This is a new favourite of mine. I used to be all about writing pure custom scss for my websites but recently I discovered MUI and have fallen in love with it. No more class names! I strongly suggest you check it out if you are looking for a great way to style your components.
Prisma: This is my goto library for querying my DB. It reminds me of working with Laravel query builder back in the day.

Infrastructure:

PostgreSQL: The DB I decided to go with. I love working with SQL queries.
Render: The platform I use to host my DB. I really like Render, its super easy to get up and running with.
Vercel: Since this is a Next.js site it made sense to go with Vercel for hosting. I love their UI and they have pretty generous pricing for new websites with a moderate amount of traffic.
Backblaze B2: A much cheaper S3 compatible file hosting service. Its been a breeze to work with and they even offer free downloads if you use Cloudflare DNS for serving the files.
Cloudflare: The DNS choice I decided to go with to setup a Proxy for Backblaze. Cloudflare is full of rich features, although many of them I can't take advantage of since they require setting up a Proxy, which Vercel recommends not doing with there service since it can cause some big issues, especially with your cache.

That sums up the technology I used at a high level, please let me know if you have any questions!

Thanks for reading this post and once again, please sign up for Bounie and let me know what you think. Together we can reinvent the news!

bounie.com

Creating a Provider to share state between components in React

Ben Douglas — Sat, 19 Feb 2022 19:57:02 +0000

Step 1: Create a new component to define your Provider and Consumer

In this step we are going to define a custom provider and consumer. We export two things here.

First we export CustomProvider, we will use this to wrap our application at the root of our component stack. Within this component we define our state. Its important we pass both customValue and setCustomValue in the value attribute of our provider so we can both access the value AND set the value from within child components.

Secondly, we define the function useCustom which will provide a clean way to consume our state from child components.

import React, { useContext, useState } from 'react'

const CustomContext = React.createContext();

export function CustomProvider({ children }) {

    const [ customValue, setCustomValue ] = useState(false);

    return (
        <CustomContext.Provider
            value={{
                customValue, setCustomValue
            }}
        >
            { children }    
        </AboutToggleStatusContext.Provider>
    )
}

export function useCustom() {
    return useContext(AboutToggleStatusContext)
}

Step 2: Wrap the root of your component stack with our new CustomProvider component

...
import { CustomProvider } from './components/CustomContext'

ReactDOM.render(
    <CustomProvider>
        <App />
    </CustomProvider>,
    document.getElementById('root')
);

Step 3: Consume our state from any child component of our provider

Now that we are wrapping the base of our application with our CustomProvider we can access the state we defined in CustomContext using the function we defined useCustom.

import { useCustom } from '../components/CustomContext'

export default function App() {
    const { customValue, setCustomValue } = useCustom();

    return (<>      
        Custom Value = { customValue ? 'True' : 'False' }
        <br/>
        <button onClick={() => setCustomValue(!customValue)}>
            Toggle Custom Value
        </button>
    </>)
}

Thats it we're done! We can now access and update the value we defined customValue from within any child component of our provider and the state will be updated accross the rest of our app.

Coding the Smash Bros Ultimate Character Select Screen in HTML & CSS in 2 hours

Ben Douglas — Thu, 27 Feb 2020 20:41:52 +0000

About the series: In this video series, I try to create high quality "clones" of existing UI's from scratch using web technologies. To make it more of a challenge, I set a goal of finishing the "clone" in 1 hour!

In this video, I code the Smash Bros Ultimate Character Select Screen using html, css and jekyll in 2 hour.

Demo (Desktop only): https://bendy.dev/projects/clones/smash-bros-character-select
Code: https://github.com/bendygit/smash-bros-character-select
Website: https://bendy.dev

I hope you enjoy the video! I would really appreciate it if you subscribed. :)

Let me know what other UI's you would like to see me recreate in this format.

Coding the Fortnite Item Shop in HTML & CSS in 1 hour (x5 speed) - video

Ben Douglas — Sun, 23 Feb 2020 18:34:09 +0000

In this video, I code the Fortnite Item Shop using html and css in 1 hour.

Demo (Desktop only): https://bendy.dev/projects/clones/fortnite-item-shop
Code: https://github.com/bendygit/fortnite-item-shop
Website: https://bendy.dev

I hope you enjoy the video! I would really appreciate it if you subscribed. :)

Let me know what other UI's you would like to see me recreate in this format.

Coding the Google Search homepage in HTML & CSS in 40 minutes (x5 speed) - video

Ben Douglas — Sun, 23 Feb 2020 18:11:57 +0000

Back in October I started a series on youtube where I make a clone of a UI in a short period of time. The main reason I created this video series was because I thought it would be a good way to showcase the magic of coding to non-programmers, where you can build something out of nothing.

In this video, I code the google search homepage in 40 minutes.

Demo (Desktop only): https://bendy.dev/projects/clones/google-search
Code: https://github.com/bendygit/google-search
Website: https://bendy.dev

I hope you enjoy the video! I would really appreciate it if you subscribed. :)

Let me know what other UI's you would like to see me recreate in this format.

My coding playlist

Ben Douglas — Sun, 23 Feb 2020 13:28:37 +0000

The Playlist

I've been making a coding playlist for the last couple of months and I thought it may be of interest to other devs out there.

The playlist is mostly electronic with lyrics, so if that distracts you then this is probs not the playlist for you. I find this genre of music helps me code for much longer periods of time.

I update the playlist pretty frequently so give it a follow if you like it!

https://open.spotify.com/playlist/4HAXjLcuA4VT13MT9kSCQ3?si=RTB_J6VdRo61WkGtTxlg2A

Creating a Simple Multi Click Button in Javascript

Ben Douglas — Sat, 22 Feb 2020 14:52:17 +0000

What we are making

Note: Hey! This is my first post on dev.to :) I would appreciate a follow if you like the post and want more!

Recently I was thinking about how common the action of tapping something a certain number of times on mobile apps triggers an action (ex. double click), but I have never seen that method being used on the web.

So I thought it would be interesting to implement a multi click button for fun in javascript.

Demo

https://glitch.com/edit/#!/multi-click?path=public/client.js:1:0

The process

Essentially instead of having an action trigger immediately, you wait a small amount of time, and if the button is pressed again before the timer runs out the, you count another click and restart the timer.

The JavaScript

// total number of clicks in a sequence of button presses
var clicks = 0;

// speed in ms of how long the space between clicks can be
// the lower the number, the more responsive clicks will feel
var wait = 300;

const trigger = document.getElementById("trigger");
const response = document.getElementById("response");

var timer = null;

trigger.onclick = function() {
  response.innerHTML = "waiting...";
  clicks++;

  clearTimeout(timer);

  timer = setTimeout(function() {
    response.innerHTML = "Clicks: " + clicks;
    clicks = 0;
  }, wait);
};

Conclusion

The real challenge of developing a multi click button is finding the perfect timeout between clicks. If the delay is too long, the button will feel unresponsive. If the delay is too short, then it may be too fast for the user and cause them to trigger the wrong action.

The default response time on windows is 500ms, but I found 300ms was more than enough time between clicks.

I hope you enjoyed my first tutorial! I would appreciate a follow if you like the post and want more.