Show HN: FIFA Interactive Bracket (World Cup)

worldcup.cole.ws

Match #{{details.id}} {{details.home_team.name}}({{details.home_team.penalties}} penalties) {{details.home_team.goals}}-{{details.away_team.goals}} vs. {{details.away_team.name}}({{details.away_team.penalties}} penalties) {{(new Date(details.datetime)).toLocaleString()}}{{details.venue}}, {{details.location}}({{details.attendance}} attendees) Event List: (none yet) {{event.time}} {{event.type_of_event}}{{event.player}} {{event.type_of_event}} {{event.time}}{{event.player}} Players: (g:goalkeeper, d:defender, m:midfielder, f:forward, u:unknown) {{String(player.shirt_number).padStart(2,0)}} {{player.name}} {{player.position[0].toLowerCase()}} {{player.position[0].toLowerCase()}} {{player.name}} {{String(player.shirt_number).padStart(2,)}} substitutes {{String(player.shirt_number).padStart(2,0)}} {{player.name}} {{player.position[0].toLowerCase()}} {{player.position[0].toLowerCase()}} {{player.name}} {{String(player.shirt_number).padStart(2,0)}} Officials: … Read more

An Interactive Guide to Flexbox

joshwcomeau.com
an-interactive-guide-to-flexbox

Introduction Flexbox is a remarkably powerful layout mode. When we truly understand how it works, we can build dynamic layouts that respond automatically, rearranging themselves as-needed. For example, check this out: This demo is heavily inspired by Adam Argyle’s incredible … Read more

Interactive Docs with Markdoc

stripe.com
interactive-docs-with-markdoc

At Stripe, our product docs are designed to feel like an application rather than a traditional user manual. For example, we incorporate a user’s own API test key into code samples, making it possible to copy and paste code that … Read more