Web Development

Google Workbox – Preload vs Prefetch Audio

I wanted to preload audio for a page, I am using preload as oppose to prefetch. Many resources on the topic. If you have Google Workbox running as well then note, you need to use crossorigin=anonymous even if same domain, to ensure caching if you using runtimeCaching as I am. Links https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content https://developers.google.com/web/updates/2016/03/link-rel-preload https://en.wikipedia.org/wiki/Link_prefetching https://developers.google.com/web/fundamentals/media/fast-playback-with-video-preload#link_preload … Read more

Create React App – PWA Caching Challenge

In developing my latest Progressive Web App, I came across the following problem. Note I was using Create-React-App at at the time, it did not allow for modifying the workbox it used to generate its Service Worker. I found this article https://karannagupta.com/using-custom-workbox-service-workers-with-create-react-app/ which provides a way to create a custom SW without ejecting from CRA.  Challenge The … Read more

Deploying Akismet in a Contact Form 7 in WordPress

https://contactform7.com/spam-filtering-with-akismet/ Quick GUIDE Install Askimet and ensure it is working with API key Then ensure the following fields are updated accordingly. akismet:author You give this option to the field where submitters input their names. Example: [text* your-name akismet:author] akismet:author_email You give this option to the field where submitters input their email addresses. Example: [email* your-email akismet:author_email] akismet:author_url … Read more

Website Development Life Cycle

Step 1. Gathering Information: Purpose, Main Goals, and Target Audience This stage, the stage of discovering and researching, determines how the subsequent steps will look like. The most important task at this point is to get a clear understanding of your future website purposes, the main goals you wish to get, and the target audience … Read more

My ReactJS tools and development setup

Started working with ReactJS from late 2018 and these are some of tools, libraries I use. Create-React-App easy to get going and allows one to focus on the code https://create-react-app.dev/ – Docs CSS Framework Choosing a framework can be time consuming, but I chose MDB because for a little money you support and I don’t like wasting … Read more

Importing SVGs as Components in ReactJS

If you attempt to import a SVG as a Component in ReactJS, ensure that your SVG has viewBox values. Design tools would automatically include them. Lesson Learned!  I was trying to make a SVG responsive but no matter what I tried it did not work. I was optmizing the SVGs before using them in ReactJS, if … Read more

ReactJS – Common Project Tasks in my Web App Development

These are tasks/steps I follow in my current development process that is common among my front-end development in ReactJS. I mostly use create-react-app (CRA). Organisational Pages – try to make them “copy/paste” as possible between projects as it is the same organisation Create-React-App – default settings MDB React CSS React-Router-Dom (used MDB) Router setup with … Read more