DEV Community: Mike Haslam

How To Use Firebase Authentication With Gatsby

Mike Haslam — Wed, 27 Oct 2021 23:57:29 +0000

I have been working on a new project. And I wanted to share my journey of implementing Firebase Authentication on a Gatsby site. Hope this can be helpful to others. I always appreciate any feedback or questions.

https://ongomobile.medium.com/how-to-use-firebase-authentication-with-gatsby-ad4a5cdcb295

Learning SwiftUI, MVVM and Firebase

Mike Haslam — Sun, 09 May 2021 23:00:18 +0000

SwiftUI is such a pleasure for a new iOS developer like myself. When you combine it with Firebase, it’s so much easier now to build robust apps. I want to share my journey in building a simple social media app.

Here are the details, including a GitHub repository:

https://ongomobile.medium.com/learning-swiftui-mvvm-and-firebase-bbc3e5073a25?sk=2209e869c02840ead810a83724cb6b59

Update I added a few more features, updated like button.

Ben Awad is building an open-source app similar to ClubHouse

Mike Haslam — Sun, 14 Mar 2021 19:43:20 +0000

It looks pretty cool. It's live, works in the browser.

Here is a video
https://lnkd.in/gKMnWPJ

Here is website
https://dogehouse.tv/

Here is repo
https://lnkd.in/gEmSnnC

clubhouseapp #startup #opensource #yourdevguy

Design thinking for developers

Mike Haslam — Thu, 18 Feb 2021 02:06:49 +0000

In wanting to get better at design. I came across this interview of David Kelley the founder of IDEO pals with Steve Jobs. What an amazing man that helped so many people. After watching the biggest takeaway for me about Design Thinking is to have empathy for the user and understand their problems. Hope this is helpful for you too.

https://www.youtube.com/watch?v=GYkb6vfKMI4

How To Build A Custom Image Picker In React Native & Expo

Mike Haslam — Thu, 11 Feb 2021 19:43:04 +0000

https://ongomobile.medium.com/how-to-build-a-custom-image-picker-in-react-native-expo-afcbf7c0c5a7

I am working on a React Native app. So I thought I would share some struggles that I found a solution for when dealing with static and user images.

In the article, I wrote you can try out the code live on different devices in the browser, using Expo Snack it's kinda fun. Let me know what you think?

How To Open Apple Maps From An Address In SwiftUI

Mike Haslam — Wed, 27 Jan 2021 22:28:41 +0000

In an iOS app I am working on I need to show a map from an address.
But after researching and asking some questions I was able to get it to work.

I must admit I struggled quite a bit with how to show an alert if the address string was invalid In hindsight, the solution is pretty straightforward. It comes down to just Observing a published property in an Observable Object Class.

I am finding that SwiftUI has really made things a lot simpler.
I put up a small repository using this feature maybe it would be helpful to others.

Open Apple Maps In SwiftUI

Here are some resources I used in my research.

Apple docs

Ray Wenderlich Tutorial

Hacking With Swift

# Create a Tags UI Component in React With Styled Components

Mike Haslam — Tue, 26 Jan 2021 21:27:13 +0000

Try it here

I need to make a React component that enables users to create tags on their profile.

So I went looking to see if anyone had already created such a component. I did find this component on CodePen by Fabio here is a link to his pen
Codepen

I decided instead of Willy Nilly cutting and pasting into my project, I would instead refactor to use Functional Components managing state with Hooks and styling with Styled Components.

I have found that refactoring other people’s code really forces you to understand how the code actually works instead of just following along.

Here is a Code Sandbox of my refactor have a look let me know what you think or if you have any optimization suggestions.

My Code Sandbox

#UI
#ReactComponents
#ReactComponents
#StyledComponents

Fun with React and Styled Components

Mike Haslam — Mon, 04 Jan 2021 03:51:26 +0000

I need to make a React component that enables users to create tags on their profile. It's for a React project of mine, still a work in progress.

So I went looking to see if anyone had already created such a component. I did find this component on CodePen by Fabio here is a link to his pen  

I decided instead of Willy Nilly cutting and pasting into my project, I would instead refactor to use Functional Components managing state with Hooks and styling with Styled Components.

I have found that refactoring other people’s code really forces you to understand how the code actually works instead of just following along.

Here is My CodeSandbox of my refactor have a look let me know what you think or if you have any optimization suggestions.

Here is a link to my repository with a few other styled-components would be cool if others wanted to contribute I could add some more also.

How To Built A Chrome Extension

Mike Haslam — Thu, 31 Dec 2020 21:15:19 +0000

My inspiration was my Love of Thailand and curiosity about a new rabbit hole.

I was doing my normal routine when I came across the Momentum Chrome extension. It was very inspiring and totally worth the pro price.
So my analytical mind said it would be fun to reverse engineer this.

So I did what most people do and did a search on google. My first query was how to create a chrome extension. What I found initially that caught my attention was a post on Medium by Andrei Elekes it got me started and was very helpful. But I wanted to learn more so I went to the Google docs

Having not built a Chrome Extension before, I did what most developers do to get familiar and I started to build the Hello World version from the docs.

I got into the first couple of steps then encountered my first error, hey no problem I thought let's just read it?

“The “background.scripts” key cannot be used with manifest_version 3. Use the “background.service_worker” key instead.”

What I found after researching and banging around a bit was google is in the process of implementing V3 that uses services workers instead of background.

This is one of V3 changes, but in the getting started tutorial in the manifest file it says “manifest_version”: 3 but it still had the V2

background”: {
    “scripts”: [“background.js”],
    “persistent”: false
  },

Seeing that as of 12/29/20 the getting started tutorial has not been updated, I decided just to go forward with the getting started tutorial in manifest V2 The answer to the initial error for me is just declaring “manifest_version”: 2

After finding focus again and wanting to close this rabbit hole. I decided I wanted to create a basic Chrome Extension using manifest V3 that would load a random background Image in the chrome browser tab. Details Below To continue to get familiar I continued with the getting started tutorial in the docs It’s actually quite good and easy to follow in the context of manifest V2.

Rather than re-creating each step, this is what I found it gives you the fundamentals and is not hard to implement. In the end, it has a popup and has a button you can change colors in options this is great to understand the fundamentals.

I was hungry for more so in my digging I discovered this file in google docs.
GitHub - GoogleChrome/chrome-extensions-samples: Chrome Extensions Samples

In the tutorials section, the get_started_complete file you can see the popup.js has a variation where the onclick listener can change the background color of the URL that is listening for the message in background.js

So how did I make my simple extension that adds a random background image on chrome browser?

First I did what most developers do I googled. In the end, what I found was if I asked the right question sooner it would have been much quicker to find the solution.

It was actually quite simple in that I had already written the code for setting a random Image on the body tag in the first single-page JavaScript app I built Thailand explorer

What was the right question? How to create a chrome extension to change the default tab

Steps to create random image background extension version1.0

Set up file structure root directory folder, images folder, manifest.json, newTab.html, newTab.css, newTab.js. Optional Files to use later options.html, options.js, popup.html, popup.js

Create the initial manifest

{
  “name”: “Random Image”,
  “version”: “1.0”,
  “description”: “A random  background image generator”,
  “manifest_version”: 3
}

Add Your directory as an extension in developer mode

Open the Extension Management page by navigating to
chrome://extensions

Enable Developer Mode by clicking the toggle switch
next to Developer mode.

Click the LOAD UNPACKED button and select the
extension directory.

Add icons You can create your own or grab these from the Google getting started tutorial. Here is a link to docs on sizes and what they are for. Icon Docs

Update manifest.json

{
  “name”: “Random Image”,
  “version”: “1.0”,
  “description”: “A random  background image generator”,
  “chrome_url_overrides”: {
    “newtab”: “newtab.html”
   },
   “action”: {
    “default_icon”: {
      “16”: “images/icon16.png”,
      “32”: “images/icon32.png”,
      “48”: “images/icon48.png”,
      “128”: “images/icon128.png”
    },
    “default_title”: “Random Image”,
    “default_popup”: “popup.html”
   },
   “icons”: {
    “16”: “images/icon16.png”,
    “32”: “images/icon32.png”,
    “48”: “images/icon48.png”,
    “128”: “images/icon128.png”
   },
    “manifest_version”: 3
}

Create newTab.html

<!DOCTYPE html>
<html lang=“en”>
  <head>
    <meta charset=“UTF-8” />
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
    <title>Thailand Images</title>
    <link rel=“stylesheet” href=“newTab.css” />
  </head>
  <body class=“pageBody”>
    <script src=“newTab.js”></script>
  </body>
</html>

Create newTab.css

body {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(“https://thailand-exp-images.s3-us-west-2.amazonaws.com/komloy.jpg”);
  background-repeat: no-repeat;
  background-size: cover;
}

Create newTab.js

const pageBody = document.body;
const ready = (callback) => {
  if (document.readyState != “loading”) callback();
  else document.addEventListener(“DOMContentLoaded”, callback);
};

// TODO: Add images dynamically from extension settings
const setRandomImage = () => {
  const IMG_URL = “https://thailand-exp-images.s3-us-west-2.amazonaws.com/“;
  const backgroundImages = [
    “riceLady.jpg”,
    “raileyBeach.jpg”,
    “monksTemple.jpg”,
    “monkeys.jpg”,
    “manChang.jpg”,
    “maeYai.jpg”,
    “girlsWater.jpg”,
    “girlChang.jpg”,
    “floatingMarket.jpg”,
    “buddha.jpg”,
    “boyBudah.jpg”,
    “ancient.jpg”,
    “thaiBackground.jpg”,
    “Yipeng.jpg”,
    “islands.jpg”,
    “Loy_Krathong.jpg”,
    “thaiBudah.jpg”,
    “komloy.jpg”,
  ];

  const randomImage =
    backgroundImages[Math.floor(Math.random() * backgroundImages.length)];
  pageBody.style.backgroundImage = `url(${IMG_URL}${randomImage})`;
};

ready(() => {
  setRandomImage();
});

Optional files for later options & popup

If you like to see code here is my repo’s
GitHub - Ongomobile/random-bg-extension

GitHub - Ongomobile/change-bg-color-chrome-extension

The next challenge is to add images in options or popup and not be dependent on hardcoded images.

I hope this has been helpful please feel free to reach out with feedback or questions.

If you would like to learn more you can find me on:
LinkedIn, Twitter, Facebook, Medium

Cheers,
Mike Haslam