willnguyen1312

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

willnguyen1312

#  GitHub Action that will run prettier on the whole repo and commit the changes to the PR.
name: Prettier

on:
  pull_request:
    branches: [main]

jobs:
  prettier:
    runs-on: ubuntu-latest

willnguyen1312

How React Fast Refresh works

Implementations:

• https://github.com/facebook/react/blob/master/packages/react-refresh/src/ReactFreshBabelPlugin.js
• https://github.com/swc-project/swc/blob/master/ecmascript/transforms/react/src/refresh/mod.rs

Additional reading:

• facebook/react#16604 (comment)
• https://github.com/facebook/react/blob/master/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js

willnguyen1312

Markdown Text 101

Want to inject some flavor into your everyday text chat? You're in luck! Discord uses Markdown, a simple plain text formatting system that'll help you make your sentences stand out. Here's how to do it! Just add a few characters before & after your desired text to change your text! I'll show you some examples...

What this guide covers:

• Text Formatting
• Organizational Text Formatting
  • Headers
• Masked Links

willnguyen1312

This middleware does a few interesting things:

• Ensures a url shape in the zustand store, where we'll store URL information.
• Assumes we will be storing our url state slice in the ?state search parameter after it has been stringified and base 64 encoded.
• On creation, decodes stores state from the ?state search parameter into the url slice of our store.
• After each state update, updates the ?state search parameter with the new url state slice.
• Sets up an event listener that listens for popstate and re-decodes the state from the URL into our store.

willnguyen1312

function formatBytes(bytes,decimals) {
   if(bytes == 0) return '0 Bytes';
   var k = 1024,
       dm = decimals || 2,
       sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
       i = Math.floor(Math.log(bytes) / Math.log(k));
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

// Usage:

willnguyen1312

import { reactive } from '@vue/reactivity' 

function switchboard(value) {
    let lookup = {}

    let current

    let get = () => current

    let set = (newValue) => {

willnguyen1312

fnMayI=function(intPerms,strPerm){
    //intPerms is an dec number that conatins all of the permissions
    //set these to your permissions map these are the binary positions of intPerms
    var objPerms={
       "read":1
      ,"update":2
      ,"create":4
      ,"props":16
      ,"delete":64
      ,"perms":65536

willnguyen1312

GitHub GraphQL API Starred Repositories Examples With Pagination

You can play with the GraphQL API live here. It's pretty nice and has autocompletion based on the GraphQL schema.

The first example gets your first 3 starred repos, the cursor values can be used for pagination.

Here's an example response from the first query:

{

willnguyen1312

import 'nprogress/nprogress.css'

import NProgress from 'nprogress'
import axios from 'axios'

const calculatePercentage = (loaded, total) => (Math.floor(loaded * 1.0) / total)

const setupUpdateProgress = () => {
  axios.defaults.onDownloadProgress = e => {
    const percentage = calculatePercentage(e.loaded, e.total)