denk0403/mocking-spongebob

An over the top generator for the Mocking SpongeBob meme

Mocking SpongeBob Meme Generator

This website provides an over the top generator for the Mocking SpongeBob meme that became popular around 2017.

Features!

• Automatically sizes and balances captions using an efficient binary search algorithm.
• Choose from multiple different mocking styles or patterns.
• Also supports uploading other images and ^[1]inputting TeX typesetting for the caption.
  • ^[2]Built-in camera app for taking pictures even faster!
• Includes quick actions for copying text and links, saving images, and sharing images via the Web Share API.
• Compatible with all mobile devices featuring a modern web browser.
• Offers a toggleable dark mode 🌓 style of the website based on your device preferences and preferences between sessions.
• ^[3]Use your voice to write the caption in a variety of languages using the Web Speech API.
• Implements Open Graph protocol for generating shareable cards on various social media sites.
• Audited for performance, accessibility, and best practices using Google Lighthouse.
• Pairs well with "Mocking Spongebob Selection Shortcut" Chrome extension to generate memes faster from other online content.
  • View on GitHub
• Available as a Progressive Web App (PWA) that can be installed from most modern browsers onto most devices and accessed offline (after loading the page at least once).
  • From Safari on iOS: Go to the website and open the Share options , and then select "Add to Home Screen" .
  • From Google Chrome on Desktops: Go to the website and watch for a plus icon on the address bar. Click on it and then simply select "Install".

Try It Out!

^{[1][2][3] Features may be disabled under compatibility issues.}

Built With

• Technologies: HTML, CSS, JavaScript, and various Web APIs
• Libraries: MathJax

License

Mocking SpongeBob Meme Generator is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

• My friends who had to endure probably hundreds of versions of this meme while I was building and testing the website.
• Writers of SpongeBob SquarePants for creating this pillar of television history.

mocking-spongebob's Issues

Long captions in one browser may exceed input limit of another browser.

Due to the nature of the text formatting algorithm and the implementation differences of Web APIs across browsers, some very long captions can be displayed just fine on certain browsers, but exceed the input limit on other browsers. This potentially breaks the link-sharing feature with these long captions.

Safari 13.0.5:

Chrome 83.0.4103.61:

Add translucent full size image option

• add checkbox to enable image to "cover" the full meme area and become visually translucent.
• potentially double resolution of image memes

Fix math captions being affected by image options

• Image options (cover, and opacity) affect rendering of math captions
  • These settings should be distinct
• This also affects math shareable links, which no longer work. Investigate why and fix it.

Add a PWA splash screen