Web 16

How to serve a local development environment over https using pnpm and webpack

Issue #976

When developing locally, especially when interacting with third-party services that have CORS restrictions, serving your development environment over a custom domain with HTTPS can be crucial. Let’s walk through the steps to achieve this …

How to get Supabase user token from server API

Issue #947

Sometimes Row Level Security is not enough and we want to do all logic server side, then we need a way for the server to get hold onto current user token.

Send JWT token in Authorization header

From client, we can get session from supabase …

How to mirror auth.users on Supabase

Issue #946

For security purposes, the auth schema is not exposed on the auto-generated API. We can make a profiles table in public namespace and mirror data from auth.users when user signs up.

I need id, username and raw_user_metadata so I will …

How to use Supabase auth with React Context

Issue #942

Expose supabase with createClient

useSupabase.ts

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.SUPABASE_URL
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY

export const supabase = …

How to create React app with Parcel

Issue #941

In this tutorial we will be creating a React app with Parcel 2 with Typescript and Tailwind

Install the following dependencies. Parcel supports TypeScript out of the box without any additional configuration.

npm install --save-dev parcel …

How to make Chrome extension with Nextjs 13

Issue #940

We can develop Nextjs 13 apps and export it to a Chrome extension.

Start by init the project

npx create-next-app@latest

Here is the project structure with app router and not using src directory. I put an extension to the root of the …

How to make reusable Button component in React

Issue #936

From https://github.com/antonioerdeljac/next13-spotify

import { forwardRef } from "react";
import { twMerge } from "tailwind-merge";

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement …

How to use FontAwesome 5 in Nextjs

Issue #802

npm i --save @fortawesome/fontawesome-svg-core \
             @fortawesome/free-solid-svg-icons \
             @fortawesome/free-brands-svg-icons \
             @fortawesome/react-fontawesome
import { faApple, faGithub, faTwitter } from …

How to use Bulma in Nextjs

Issue #801

Read

npm install bulma sass

In styles/index.scss

@import '~bulma/bulma';

In _app.tsx

import '../styles/index.scss'

How to show img tag from GitHub markdown in Hugo

Issue #788

I just convert my blog https://onmyway133.com/ from Hexo.js back to Hugo again. Hugo now uses goldmark as the default markdown processor instead of blackfriday

All works well, except that I use GitHub markdown to write articles, which use …

How to sign in with apple for web with firebase

Issue #668

Authenticate Using Apple with JavaScript

Use Firebase JS SDK

Configure Sign in with Apple for the web

Go to Certificates, …

How to use webpack to bundle html css js

Issue #645

Install webpack

npm init
npm install webpack webpack-cli --save-dev
vim webpack.config.js
module.exports = {
    entry: "./index.js",
    mode: 'production',
    output: {
        filename: "./index.js"
    }
}

To …

How to add independent page in hexo

Issue #641

Create a new page

hexo new page mydemo

Remove index.md and create index.html, you can reference external css and js in this index.html. Hexo has hexo new page mydemo --slug but it does not support page hierarchy

Specify no layout so it is …

How to use custom domain for GitHub pages

Issue #423

In DNS settings

Add 4 A records

A @ 185.199.110.153
A @	185.199.111.153
A @	185.199.108.153
A @	185.199.109.153

and 1 CNAME record

CNAME www learntalks.github.io

In GitHub

  • Select custom domain and type learntalks.com

In source …

App backed by website in iOS 9

Issue #32

iOS 9 introduces new ways for your app to work better, backed by your websites

Smart App Banners

If the app is already installed on a user’s device, the banner intelligently changes its action, …