Author: TheSmithy

Vega-Lite – A Grammar of Interactive Graphics

TheSmithy

Vega-Lite is a high-level grammar of interactive graphics. It provides a concise, declarative JSON syntax to create an expressive range of visualizations for data analysis and presentation.

Vega-Lite specifications describe visualizations as encoding mappings from data to properties of graphical marks (e.g., points or bars). The Vega-Lite compiler automatically produces visualization components including axes, legends, and scales. It determines default properties of these components based on a set of carefully designed rules. This approach allows Vega-Lite specifications to be concise for quick visualization authoring, while giving user control to override defaults and customize various parts of a visualization. As we also designed Vega-Lite to support data analysis, Vega-Lite supports both data transformations (e.g., aggregation, binning, filtering, sorting) and visual transformations (e.g., stacking and faceting). Moreover, Vega-Lite specifications can be composed into layered and multi-view displays, and made interactive with selections.

Design Beautiful Focus States

TheSmithy

https://thegymnasium.com/take5/designing-beautiful-focus-states

completed project on codepen

Control your focus styles for people that access the website using a keyboard or similar:

Link outline: 

  • style it to override browser defaults
    • Color
    • 2px dotted outline (instead of 1px) 
a:focus {
  outline: 2px dotted;
}
a:hover, a:focus {
  color: orangered;
  text-decoration: none;
}
a {
  color: #a6540b;
  transition: color 0.15s, outline 0.15s;
}

Forms:

  • box-shadow to let the focused input pop up
  • override default outline styles of browser
  • Transition if you want
input[type="text"]:focus, input[type="email"]:focus {
  outline: 2px solid rgb(135, 205, 226);
}

input:focus {
  box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.5);
}

input {
  border: none;
  display: block;
  font-size: inherit;
  transition: outline 0.2s ease-in, box-shadow 0.2s ease-in;
}

Image/ gallery

  • override default outline
  • box-shadow
  • scale
  • optional: saturation filter
.gallery-link:focus {
  outline: 3px solid rgb(42, 147, 181);
}

.gallery-link:hover, .gallery-link:focus {
  box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.25);
  transform: scale(1.025);
  filter: saturate(1);
}

.gallery-link {
  display: flex;
  filter: saturate(0.15);
  transition-duration: 0.15s;
  transition-property: box-shadow, filter, transform;
  transition-timing-function: ease-in;
}

Temporary Containers – a FireFox addon

TheSmithy

https://addons.mozilla.org/en-US/firefox/addon/temporary-containers/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search
Open tabs, websites, and links in automatically managed disposable containers. Containers isolate data websites store (cookies, storage, and more) from each other, enhancing your privacy and security while you browse.

Tip: bind CTRL + click to open a link in temporary container in Settings > Isolation >Global: set Ctrl/Cmd+Left Mouse to ‘Different from Tab domain (& subdomains)’

Hugo – static site generator

TheSmithy

https://gohugo.io/
How to start a blog using Hugo (HN comments)
Hugo and IPFS: how this blog works (and scales to serve 5,000% spikes instantly!) (HN comments)

Blistering Speed

What’s modern about waiting for your site to build? Hugo is the fastest tool of its kind. At <1 ms per page, the average site builds in less than a second.

Robust Content Management

Flexibility rules. Hugo is a content strategist’s dream. Hugo supports unlimited content types, taxonomies, menus, dynamic API-driven content, and more, all without plugins.

Read More