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.

threepointone

On implementing a client for feature flags in your UI codebase

This document isn't an explainer on Feature Flags, you can find that with my amateur writeup, or literally hundreds of better writeups out there.

This document is also agnostic to the choice of service you'd use: LaunchDarkly or split.io or optimizely or whatever; that's orthogonal to this conversation.

Instead, this document is a list of considerations for implementing a client for using Feature Flags for User Interface development. Service providers usually give a simple fetch and use client and that's it; I contend that there's a lot more to care about. Let's dive in.

To encourage usage, we'd like for the developer experience to be as brutally simple as possible. So, this should be valid usage:

jaredpalmer

/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.

getify

What Hiring Should Look Like

This is definitely not the first time I've written about this topic, but I haven't written formally about it in quite awhile. So I want to revisit why I think technical-position interviewing is so poorly designed, and lay out what I think would be a better process.

I'm just one guy, with a bunch of strong opinions and a bunch of flaws. So take these suggestions with a grain of salt. I'm sure there's a lot of talented, passionate folks with other thoughts, and some are probably a lot more interesting and useful than my own.

But at the same time, I hope you'll set aside the assumptions and status quo of how interviewing is always done. Just because you were hired a certain way, and even if you liked it, doesn't mean that it's a good interview process to repeat.

If you're happy with the way technical interviewing currently works at your company, fine. Just stop, don't read any further. I'm not going to spend any effort trying to convince you otherwise.

sibelius

import React, { useContext, useCallback } from 'react';

export const FeatureFlagContext = React.createContext<string[]>([]);

export const useFeatureFlag = () => {
  const features = useContext<string[]>(FeatureFlagContext);

  const hasFeature = useCallback(
    (feature: string) => {
      return features.includes(feature);

busypeoples

// TypeScript Fundamentals For JavaScript Developers

/*
  Tutorial for JavaScript Developers wanting to get started with TypeScript.
  Thorough walkthrough of all the basic features.
  We will go through the basic features to gain a better understanding of the fundamentals.
  You can uncomment the features one by one and work through this tutorial.
  If you have any questions or feedback please connect via Twitter:
  A. Sharif : https://twitter.com/sharifsbeat
*/

ryanflorence

// how do I write this:
const Profile: React.FunctionComponent<ProfileProps> = ({ userId, navigate }) => {
  console.log(navigate);
  return <div>{userId}</div>;
}

// as this:
function Profile({ userId, navigate }) {
  console.log(navigate);
  return <div>{userId}</div>;

threepointone

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

markerikson

const createMySocketMiddleware = (url) => {
    return storeAPI => {
        let socket = createMyWebsocket(url);

        socket.on("message", (message) => {
            storeAPI.dispatch({
                type : "SOCKET_MESSAGE_RECEIVED",
                payload : message
            });
        });

-

System:    Host: pavan-computer Kernel: 4.4.0-112-generic x86_64 (64 bit gcc: 5.4.0)
           Desktop: Cinnamon 3.2.8 (Gtk 3.18.9-1ubuntu3.2) dm: gdm3 Distro: Ubuntu 16.04 xenial
Machine:   System: Gigabyte product: N/A
           Mobo: Gigabyte model: B150M-D3H-CF v: x.x Bios: American Megatrends v: F6 date: 03/14/2016
CPU:       Quad core Intel Core i5-6600 (-MCP-) cache: 6144 KB
           flags: (lm nx sse sse2 sse3 sse4_1 sse4_2 ssse3 vmx) bmips: 26495
           clock speeds: min/max: 800/3900 MHz 1: 830 MHz 2: 1867 MHz 3: 1921 MHz 4: 913 MHz
Graphics:  Card: Intel Sky Lake Integrated Graphics bus-ID: 00:02.0 chip-ID: 8086:1912
           Display Server: X.Org 1.18.4 drivers: intel (unloaded: fbdev,vesa)
           Resolution: 1920x1080@60.00hz