-
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
Below is the list of modern JS frameworks and almost frameworks – React, Vue, Angular, Ember and others.
All files were downloaded from https://cdnjs.com and named accordingly.
Output from ls
command is stripped out (irrelevant stuff)
$ ls -lhS
566K Jan 4 22:03 angular2.min.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Building a router</title> | |
<script> | |
// Put John's template engine code here... | |
(function () { | |
// A hash to store our routes: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Set up factories, then create them in tests with (for example): | |
* | |
* LineItemFactory(); | |
* | |
* Or with attributes / overrides: | |
* | |
* LineItemFactory({ | |
* "id": 123, | |
* "order": OrderFactory({"firstName": "Example Associated Record Override"}), |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
* backbone.collectioncache.js v0.0.2 | |
* Copyright 2012, Tim Branyen (@tbranyen) | |
* backbone.collectioncache.js may be freely distributed under the MIT license. | |
*/ | |
(function(window) { | |
"use strict"; | |
// Dependencies |
- There are some situations that are difficult to distinguish mechanically, so I now consider all of those cases problematic, even when they are not obviously wrong.
- You should be coding for readability and error resistance.
- The place to express yourself in programming is in the quality of your ideas, and the efficiency of execution. The role of style is the same as in literature. A great writer doesn't express himself by putting the spaces before his commas instead of after, or by putting extra spaces inside his parentheses.
- Many people think they have good reasons for doing things badly.
- [The purpose of JSLint is not to make you feel good about inadequate coding standards.](http://tech.groups.y