This shows the execution order given JavaScript's Call Stack, Event Loop, and any asynchronous APIs provided in the JS execution environment (in this example; Web APIs in a Browser environment)
Given the code
| #!/bin/bash | |
| # | |
| # Convert ssh-agent output to fish shell | |
| # | |
| eval "$(ssh-agent)" >/dev/null | |
| echo "set SSH_AUTH_SOCK \"$SSH_AUTH_SOCK\"; export SSH_AUTH_SOCK" | |
| echo "set SSH_AGENT_PID \"$SSH_AGENT_PID\"; export SSH_AGENT_PID" |
| .rounded-corners-gradient-borders { | |
| width: 300px; | |
| height: 80px; | |
| border: double 4px transparent; | |
| border-radius: 80px; | |
| background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff); | |
| background-origin: border-box; | |
| background-clip: padding-box, border-box; | |
| } |
| /**************************\ | |
| Basic Modal Styles | |
| \**************************/ | |
| .modal { | |
| font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; | |
| } | |
| .modal__overlay { | |
| position: fixed; |
| const cons = (x, y) => (m) => m(x, y) | |
| const car = (z) => z((p, q) => p) | |
| const cdr = (z) => z((p, q) => q) | |
| const someLinkedList = cons(1, cons(2, cons(3 , null))) | |
| // iterating |
See how a minor change to your commit message style can make a difference.
git commit -m"<type>(<optional scope>): <description>" \ -m"<optional body>" \ -m"<optional footer>"
| import * as React from 'react' | |
| import { Link as GatsbyLink, GatsbyLinkProps } from 'gatsby' | |
| interface Props extends GatsbyLinkProps<HTMLAnchorElement> { | |
| to: string | |
| className?: string | |
| target?: string | |
| } | |
| const checkLinkType = (to: Props['to']) => { |
| import * as React from "react"; | |
| import { useMousePosition } from "~/hooks/useMousePosition"; | |
| /** Component to cover the area between the mouse cursor and the sub-menu, to allow moving cursor to lower parts of sub-menu without the sub-menu disappearing. */ | |
| export function MouseSafeArea(props: { parentRef: React.RefObject<HTMLDivElement> }) { | |
| const { x = 0, y = 0, height: h = 0, width: w = 0 } = props.parentRef.current?.getBoundingClientRect() || {}; | |
| const [mouseX, mouseY] = useMousePosition(); | |
| const positions = { x, y, h, w, mouseX, mouseY }; | |
| return ( | |
| <div |
| import React, { useState } from "react"; | |
| import ReactDOM from "react-dom"; | |
| const style = { | |
| table: { | |
| borderCollapse: "collapse", | |
| }, | |
| tableCell: { | |
| border: "1px solid gray", | |
| margin: 0, |
| const cons = (x, y) => (m) => m(x, y) | |
| const car = (z) => z((p, q) => p) | |
| const cdr = (z) => z((p, q) => q) | |
| const someLinkedList = cons(1, cons(2, cons(3 , null))) | |
| // iterating |