gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

syhily

#!/usr/bin/env bash

# Download metadata, modify these as your needs.
## The directory to save the downloaded files.
download_directory="/volume1/Download/EPUB"
## The website you want to visit.
calibre_site="http://soulseeker.myds.me:25788"
## The formats you want to download. We only download the first present format.
## All the formats should be upper case.
allow_formats=( EPUB MOBI AZW3 )

DavidWells

/* Using a JavaScript proxy for a super low code REST client */
// via https://dev.to/dipsaus9/javascript-lets-create-aproxy-19hg
// also see https://towardsdatascience.com/why-to-use-javascript-proxy-5cdc69d943e3
// also see https://github.com/fastify/manifetch
// also see https://github.com/flash-oss/allserver
// and https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb

const createApi = (url) => {
  return new Proxy({}, {
    get(target, key) {

merlinmann

Merlin's Wisdom Project

Or: “Everybody likes being given a glass of water.”

By Merlin Mann.

It's only advice for you because it had to be advice for me.

rishitells

Configuring Jest Tests in GitLab CI

1. Add GitLab CI configuration file in the root

In the root of your project, add .gitlab-ci.yml with the configuration below.

image: node:latest

stages:

aessing

#!/bin/bash
# =============================================================================
# Install AzCopy on Linux
# https://docs.microsoft.com/en-us/azure/storage/common/storage-use-azcopy-v10
# https://github.com/Azure/azure-storage-azcopy
# -----------------------------------------------------------------------------
# Developer.......: Andre Essing (https://www.andre-essing.de/)
#                                (https://github.com/aessing)
#                                (https://twitter.com/aessing)
#                                (https://www.linkedin.com/in/aessing/)

Venryx

import {forwardRef, useImperativeHandle, ForwardRefExoticComponent, RefAttributes, Ref} from "react";

export type Handle<T> = T extends ForwardRefExoticComponent<RefAttributes<infer T2>> ? T2 : never;

export const Parent = (props: {})=> {
  let childHandle: Handle<typeof Child>;
  return (
    <div onClick={()=>childHandle.SayHi()}>
      <Child name="Bob" ref={c=>childHandle = c}/>
    </div>

joshuacerbito

/**
 * useScroll React custom hook
 * Usage:
 *    const { scrollX, scrollY, scrollDirection } = useScroll();
 */

import { useState, useEffect } from "react";

export function useScroll() {
  const [lastScrollTop, setLastScrollTop] = useState(0);

jonjack

Using an Access Token for the first time

Follow the instructions on Github to Create an Access Token in Github

Configure Git to use the osxkeychain

By default, git credentials are not cached so you need to tell Git if you want to avoid having to provide them each time Github requires you to authenticate. On Mac, Git comes with an “osxkeychain” mode, which caches credentials in the secure keychain that’s attached to your system account.

You can tell Git you want to store credentials in the osxkeychain by running the following:-

philipstanislaus

# Sample Nginx config with sane caching settings for modern web development
#
# Motivation: 
# Modern web development often happens with developer tools open, e. g. the Chrome Dev Tools. 
# These tools automatically deactivate all sorts of caching for you, so you always have a fresh 
# and juicy version of your assets available.
# At some point, however, you want to show your work to testers, your boss or your client. 
# After you implemented and deployed their feedback, they reload the testing page – and report 
# the exact same issues as before! What happened? Of course, they did not have developer tools 
# open, and of course, they did not empty their caches before navigating to your site.