jboner

Latency Comparison Numbers (~2012)
----------------------------------
L1 cache reference                           0.5 ns
Branch mispredict                            5   ns
L2 cache reference                           7   ns                      14x L1 cache
Mutex lock/unlock                           25   ns
Main memory reference                      100   ns                      20x L2 cache, 200x L1 cache
Compress 1K bytes with Zippy             3,000   ns        3 us
Send 1K bytes over 1 Gbps network       10,000   ns       10 us
Read 4K randomly from SSD*             150,000   ns      150 us          ~1GB/sec SSD

morajabi

import { useLayoutEffect, useCallback, useState } from 'react'

export const useRect = (ref) => {
  const [rect, setRect] = useState(getRect(ref ? ref.current : null))

  const handleResize = useCallback(() => {
    if (!ref.current) {
      return
    }

dillingham

Converting Tailwind UI Alpine transitions to Vue transitions

After you copy a component from the Tailwind UI library and begin to adapt it from Vue JS to Alpine JS .. you may wonder what to do about the transitions. As I'm exploring this myself, I am documenting it for others in the same boat.

Things to be aware of:

• Alpine calls the beginning and ending states "start" & "end"
• Vue calls the beginning and ending states "from" and "to"
• Alpine has inline "directives" ie x-transition:enter="classes"
• Vue has a wrapper component that applies classes to the child
• Alpine applies the classes you pass it for each state, :enter-start="class"

gvdonovan

import React, { Component } from "react";
import UserProfileMenu from "./UserProfileMenu";

function classNames(...classes) { return classes.filter(Boolean).join(" "); }

class App extends Component {  
  constructor(props) {
    super(props);
    this.state = { isToggleOn: false };       
  } 

d1820

using System.Security.Claims;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Moq;

namespace Infrastructure.Testing.Builders
{
    public class BuilderResult : HttpContextBuilderResult
    {

alexanderbluhm

export const Testimonial = () => (
  <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
    <div>
      <img
        className="mx-auto h-12 w-12 object-cover rounded-full"
        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
        alt="John"
      />
      <div className="pt-2 pb-4 px-4 -mt-6 flex flex-col justify-between bg-gray-50 rounded-md space-y-2">
        <div className="mt-6 space-y-2 text-center">

CodebyOmar

<button class="py-4 px-1 relative border-2 border-transparent text-gray-800 rounded-full hover:text-gray-400 focus:outline-none focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Cart">
  <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
    <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
  </svg>
  <span class="absolute inset-0 object-right-top -mr-6">
    <div class="inline-flex items-center px-1.5 py-0.5 border-2 border-white rounded-full text-xs font-semibold leading-4 bg-red-500 text-white">
      6
    </div>
  </span>
</button>

tannerlinsley

Replacing Create React App with the Next.js CLI

How dare you make a jab at Create React App!?

Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.

Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.

So why

tannerlinsley

export default function createCrudHooks({
  baseKey,
  indexFn,
  singleFn,
  createFn,
  updateFn,
  deleteFn,
}) {
  const useIndex = (config) => useQuery([baseKey], indexFn, config)
  const useSingle = (id, config) =>

arkada38

Using Tailwind CSS v3.2 with Blazor (.Net 6 or above)

This method works for Blazor Server and Blazor WebAssembly with hot reload, style isolation and tailwind jit compilation.

Setup with using Standalone Tailwind CSS CLI without Node.js

For this method you need added to path Tailwind CSS CLI binary. Read more about Standalone CLI.

Just create a StaticAssets folder in the root of your project with next structure.