konrad-gibaszewski

Keybase proof

I hereby claim:

• I am konrad-gibaszewski on github.
• I am octocat (https://keybase.io/octocat) on keybase.
• I have a public key ASCBMm8Dr2xmDTMZoVf5qgeXwPfecxnboVKwwM93G4ynwAo

To claim this, I am signing this object:

konrad-gibaszewski

Problem: What does a Modern Front-End Development Workflow Look Like?

I want to start writing libraries and large applications using the JavaScript language. However, I don't know how to setup the project and which build tools to use. What I do know is that the JavaScript community has moved way beyond using browser developer tool plugins and strategically-placed console.log() statements to debug, test, and build code.

I need help.

Below, I will keep track of articles, tutorials and tools I come across as I search for a way to bring my front-end development chops up-to-date.

The Ultimate Resource

konrad-gibaszewski

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

/* https://developer.mozilla.org/en-US/docs/CSS/user-select */

konrad-gibaszewski

/* linear-gradient( [ [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) */

background-color: #EDEDED;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EDEDED));
background-image: -webkit-linear-gradient(top, #FFF, #EDEDED);
background-image:    -moz-linear-gradient(top, #FFF, #EDEDED);
background-image:     -ms-linear-gradient(top, #FFF, #EDEDED);
background-image:      -o-linear-gradient(top, #FFF, #EDEDED);
background-image:         linear-gradient(to bottom, #FFF, #EDEDED);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#EDEDED');

konrad-gibaszewski

(onclick="return _clk\(')[a-zA-Z0-9_.*]{77}('\)" )

# Link: http://www.jetbrains.com/phpstorm/webhelp/regular-expression-syntax-reference.html

konrad-gibaszewski

/* appearance: normal|icon|window|button|menu|field; */

-moz-appearance:button;    /* Firefox1+ */
-webkit-appearance:button; /* Safari3+, Chrome1+, WebKit522+ */

/* http://www.w3schools.com/cssref/css3_pr_appearance.asp
   https://developer.mozilla.org/en/CSS/-moz-appearance */

konrad-gibaszewski

/* -webkit-tap-highlight-color: <color>; */

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* iOS 1.1.1+ */

/* http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/articles/standardcssproperties.html */

konrad-gibaszewski

/* transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ] */

-webkit-transition: opacity 500ms linear; /* Chrome1+, Safari3+, Safari Mobile 3.2+, Android2.1+ */
-moz-transition: opacity 500ms linear;    /* Firefox4+ */
-ms-transition: opacity 500ms linear;     /* IE10+ */
-o-transition: opacity 500ms linear;      /* Opera11.6+, Opera Mobile10+ */
transition: opacity 500ms linear;         /* W3C */
-webkit-transform-style: preserve-3d;

/* https://developer.mozilla.org/en/CSS/transition (experimental) */

konrad-gibaszewski

/* box-shadow:  none | <shadow> [,<shadow>]* where <shadow> is defined as: inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] */

-webkit-box-shadow: 0 1px 2px 0 #4A4A4A;
   -moz-box-shadow: 0 1px 2px 0 #4A4A4A;
        box-shadow: 0 1px 2px 0 #4A4A4A;

/* https://developer.mozilla.org/en/CSS/box-shadow */

konrad-gibaszewski

/* opacity:  <number> | inherit */

zoom: 1; /* Required for IE 5-7, or something to trigger hasLayout, like width: 100%; */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8-9, always before filter */
filter: alpha(opacity=25); /* IE5+ */
-khtml-opacity: 0.25;      /* Safari 1.x (pre WebKit) */
-moz-opacity: 0.25;        /* Older than Mozilla 0.9 */
opacity: 0.25;             /* Mozilla0.9+, Chrome, Safari2+, Opera9+, IE9+ */

/* https://developer.mozilla.org/en/CSS/opacity */