-
When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!
-
Always use fewer utility classes when possible. For example, use
mx-2
instead ofml-2 mr-2
and don't be afraid to use the simplerp-4 lg:pt-8
instead of the longer, more complicatedpt-4 lg:pt-8 pr-4 pb-4 pl-4
. -
Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use
block lg:flex lg:flex-col lg:justify-center
instead ofblock lg:flex flex-col justify-center
to make it very clear that the flexbox utilities are only applicable at the
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>CodePen - Datepicker with TailwindCSS and AlpineJS</title> | |
<link | |
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" | |
rel="stylesheet" | |
/> | |
<script |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Document</title> | |
<link rel="stylesheet" href="./build.css" /> | |
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script> | |
</head> | |
<body class="p-12 m-12"> |
Seven different types of CSS attribute selectors | |
// This attribute exists on the element | |
[value] | |
// This attribute has a specific value of cool | |
[value='cool'] | |
// This attribute value contains the word cool somewhere in it | |
[value*='cool'] |
using Owin; | |
namespace WindowsAuthAppToAADDemo | |
{ | |
public partial class Startup | |
{ | |
public void Configuration(IAppBuilder app) | |
{ | |
ConfigureAuth(app); | |
} |
// ==UserScript== | |
// @name Reformat Printing for Local | |
// @namespace http://tampermonkey.net/ | |
// @version 0.45 | |
// @description Native language might get a lot of foreign addresses, this reformats the print page to use less pages | |
// @author Richard Scoop <richard.scoop@gmail.com> | |
// @match https://www.mcmxiv.com/alba/territory-mk?* | |
// @grant none | |
// ==/UserScript== |
As the number of different possible states and transitions between states in a user interface grows, managing styles and animations can quickly become complicated. Even a simple login form has many different "user flows":
https://codepen.io/davidkpiano/pen/WKvPBP
State machines are an excellent pattern for managing state transitions in user interfaces in an intuitive, declarative way. We've been using them a lot on the Keyframers as a way to simplify otherwise complex animations and user flows, like the one above.
So, what is a state machine? Sounds technical, right? It’s actually more simple and intuitive than you might think. (Don’t look at Wikipedia just yet… trust me.)
Let’s approach this from an animation perspective. Suppose you’re creating a loading animation, which can be in only one of four states at any given time:
MIT License | |
Copyright (c) 2018 Noel Bundick | |
Permission is hereby granted, free of charge, to any person obtaining a copy | |
of this software and associated documentation files (the "Software"), to deal | |
in the Software without restriction, including without limitation the rights | |
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
copies of the Software, and to permit persons to whom the Software is | |
furnished to do so, subject to the following conditions: |
# Backup files | |
#https://explainshell.com/explain?cmd=rsync+-azuv+--delete+--progress+--exclude+%27node_modules%27 | |
rsync -auvhp --delete --exclude=node_modules [source] [destination] | |
# Remove all node_modules folders | |
# https://explainshell.com/explain?cmd=find+.+-name+%22node_modules%22+-type+d+-prune+-exec+rm+-rf+%27%7B%7D%27+%2B | |
find . -name "node_modules" -type d -prune -exec rm -rf '{}' + |
/** | |
* Take an array of objects of similar structure and convert it to a CSV. | |
* @source https://halistechnology.com/2015/05/28/use-javascript-to-export-your-data-as-csv/ | |
* @modifiedBy sators | |
* @param {Array} options.data Array of data | |
* @param {String} options.columnDelimiter Column separator, defaults to "," | |
* @param {String} options.lineDelimiter Line break, defaults to "\n" | |
* @return {String} CSV | |
*/ | |
export default ({data = null, columnDelimiter = ",", lineDelimiter = "\n"}) => { |