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.

hirbod

How to Successfully Publish Your App on the App Store or Google Play

As someone who has released many apps starting in 2015 using frameworks such as Cordova and Ionic, and more recently using React Native and Expo, I have learned that the rules for publishing apps can change frequently and can sometimes be challenging to navigate. With that in mind, I want to provide a brief guide to help others navigate the process. While this guide may not cover every aspect of publishing an app, it does cover general tips and information that should be useful for anyone looking to release their app on the App Store or Google Play.

Metadata

Keywords, Description, Screenshots, App Name, Promo Videos

There are significant differences between Apple and Google when it comes to metadata. Apple is generally stricter than Google, so it is advisable to follow Apple's guidelines to ensure the best chances of success on both platforms. Here are some tips to keep in mind:

1. Keep your screenshots and promo videos separat

ryanflorence

import React, { useState, useMemo } from "react"
import { calculateTotals } from "./utils"

export default function SelectTickets({
  context: { workshopData, subscriberCode },
  send
}) {
  let initialTicketsToPurchase = useMemo(
    () =>
      workshopData.ticketTypes.reduce((ticketsToPurchase, type, index) => {

matijagrcic

Beers

Beer Temple - https://goo.gl/maps/CyZdYPaXedo
Proeflokaal Arendsnest - https://goo.gl/maps/DQp4UgbsYJ42 , https://www.tripadvisor.com/Attraction_Review-g188590-d523492-Reviews-Beer_Tasting_Room_Arendsnest-Amsterdam_North_Holland_Province.html
Brouwerij (Modern brewery next to a windmill producing organic blonde & dark beers & running short tours. ) - https://goo.gl/maps/8Ff7BAs7aVD2, http://www.brouwerijhetij.nl/
Bunkerbier - http://www.bunkerbier.org/
Distilleerderij 't Nieuwe Diep - https://goo.gl/maps/kQGW9k7VSL62 Bierfabriek - https://goo.gl/maps/jQo94L8HPiz

Coffee places

Bocca Coffee - https://goo.gl/maps/PpcoZFrVeM52

mnsami

#!/bin/bash

usage() { echo "usage: --coursename [--coursename \"build-a-react-app-with-redux\"] --type [--type \"courses|lessons\"]" 1>&2; exit 1; }

OPTS=$(getopt -o c:t: --long coursename:,type: -n 'download_egghead_videos.sh' -- "$@")

if [ $? != 0 ] ; then echo "Terminating..." >&2 ; exit 1 ; fi

eval set -- "$OPTS"

diegochavez

/**
 * Multi-filter an array of objects
 * @param  {Array}  array  : list of elements to apply a multiple criteria filter
 * @param  {Object} filters: Contains multiple criteria filters by the property names of the objects to filter
 * @return {Array}
 */
function multiFilter(array, filters) {
  let filterKeys = Object.keys(filters);
  // filters all elements passing the criteria
  return array.filter((item) => filterKeys.every((key) => (filters[key].indexOf(item[key]) !== -1)));

jherax

type FilterOperator = 'AND' | 'OR';
type FiltersBy<T> = {
  [K in keyof T]?: (value: T[K]) => boolean;
};

/**
 * Factory function that creates a specialized function to filter
 * arrays, by validating all filters (AND operator),
 * or validating just one of the filters (OR operator).
 * @param operator Method to validate all filters: AND, OR

thegitfather

Vanilla JavaScript Quick Reference / Cheatsheet

Just migrated it from Codepen.io to markdown. Credit goes to David Conner.

Working with DOM	Working with JS	Working With Functions
Accessing Dom Elements	Add/Remove Array Item	Add Default Arguments to Function
Grab Children/Parent Node(s)	Add/Remove Object Properties	Throttle/Debounce Functions
Create DOM Elements	Conditionals

chantastic

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version