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.

huytd

How to use:

./wordle.sh

Or try the unlimit mode:

tommyip

# Based on https://gist.github.com/bastibe/c0950e463ffdfdfada7adf149ae77c6f
# Changes:
# * Instead of overriding cd, we detect directory change. This allows the script to work
#   for other means of cd, such as z.
# * Update syntax to work with new versions of fish.
# * Handle virtualenvs that are not located in the root of a git directory.

function __auto_source_venv --on-variable PWD --description "Activate/Deactivate virtualenv on directory change"
  status --is-command-substitution; and return

jwalgran

// 1. Browse a waffle.io board where "Queue" and "In Progres" are the 2nd and 3rd columns.
// 2. Run this code in the developer console.
// 3. Copy the tab-separated data and paste into your spreadsheet of choice.

// Thanks to https://github.com/rajadain for the initial implementation

var rows = [];
$('#page > div > div.ng-scope > div > ui-view > div > div.board.js-board > span.ng-scope > div.board-body > div > div:nth-child(3) .card,#page > div > div.ng-scope > div > ui-view > div > div.board.js-board > span.ng-scope > div.board-body > div > div:nth-child(4) .card').each(function() {
    var card = $(this),
        url = card.attr('data-waffle-url').replace('api.github.com/repos', 'github.com'),

mvaneijgen

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>ANSIBlackColor</key>
	<data>
	YnBsaXN0MDDUAQIDBAUGKSpYJHZlcnNpb25YJG9iamVjdHNZJGFyY2hpdmVyVCR0b3AS
	AAGGoKcHCBMXGyImVSRudWxs1QkKCwwNDg8QERJcTlNDb21wb25lbnRzVU5TUkdCXE5T
	Q29sb3JTcGFjZV8QEk5TQ3VzdG9tQ29sb3JTcGFjZVYkY2xhc3NPECgwLjAyNzQ1MTAw
	NjcgMC4yMTE3NjQ3MjMxIDAuMjU4ODIzNDg0MiAxTxAoMC4wMzkzODA3NDc4MiAwLjE2

ryanflorence

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

niallobrien

Laravel & Angular

Overview

This setup involves creating a Laravel API and an Angular client-app with Gulp covering the asset pipeline.

Our Laravel API server will serve one view only and that is to simply load the Angular app.

First, create a new directory for your project. We're going to place the server and client directories in here. You'll need to install Laravel, Yeoman, generator-gulp-angular and any other dependencies.

Server

gruber

#!/usr/bin/env ruby

def e_sh(str)
	str.to_s.gsub(/(?=[^a-zA-Z0-9_.\/\-\x7F-\xFF\n])/n, '\\').gsub(/\n/, "'\n'").sub(/^$/, "''")
end

def find_headers(lines)
    in_headers = false
    lines.each_with_index {|line, i|
        if line =~ /^\S[^\:]+\:( .*?)?$/