design patterns
SVN GIT
XML
testing
nodeJS
exit console ctrl+c twice || or ctrl +d
process.exit()
npm install node-dev -g (global)
npm update (-g)
npm prune - dellete unused modules
npm search
npm init - new project
nvm ls
{
"name": "project",
"version": "1.0.0",
"main": "script.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"dependencies" : {
"node-markdown": "0.1.0"
},
"author": "Joe LeBlanc",
"license": "BSD"
}
npm
should.js
should.js+jasmine
TDD JavaScript
JsTestDriver
Start the Server
1. You can check if Java is installed by opening a shell and issue the java
-version command. If you don’t have Java installed, you will find instructions on java.com.
2. Once Java is set up, download the most recent JsTestDriver jar file from
http://code.google.com/p/js-test-driver/downloads/list.
3)
I suggest ~/bin
Setting the $JSTESTDRIVER HOME environment variable
export JSTESTDRIVER_HOME=~/bin
Set the environment variable in a login script, such as .bashrc or .zshrc
(depends on the shell—most systems use Bash, i.e., ~/.bashrc, by default).
Windows users can set an environment variable in the cmd command line by issuing
the set JSTESTDRIVER_HOME=C:bin command. To set it permanently, rightclick
My Computer (Computer in Windows 7) and select Properties. In the System
window, select Advanced system properties, then the Advanced tab, and then click
the Environment Variables . . . button. Decide if you need to set the environment
variable for yourself only or for all users. Click New, enter the name (JSTESTDRIVER
HOME) in the top box, and then the path where you saved the jar file in
the bottom one.
To run tests through JsTestDriver, we need a running server to capture browsers
with. The server can run anywhere reachable from your machine—locally, on a
machine on the local network, or a public facing machine. Beware that running
the server on a public machine will make it available to anyone unless the machine
restricts access by IP address or similar. To get started, I recommend running the
service locally; this way you can test while being offline as well. Open a shell and issue
the command in either Listing 3.4 or Listing 3.5 (current directory is not important
for this command).
Starting the JsTestDriver server on Linux and OSX
java -jar $JSTESTDRIVER_HOME/JsTestDriver-1.2.1.jar --port 4224
Starting the JsTestDriver server on Windows
java -jar %JSTESTDRIVER_HOME%JsTestDriver-1.2.1.jar --port 4224
http://localhost:4224/
Running Tests
Tests can be run from the command line, providing feedback in much the same way
a unit testing framework for any server-side language would. As tests are run, a dot
will appear for every passing test, an F for a failing test, and an E for a test with
errors. An error is any test error that is not a failing assertion, i.e., an unexpected
exception. To run the tests, we need a small configuration file that tells JsTestDriver
which source and test files to load (and in what order), and which server to run tests
against. The configuration file, jsTestDriver.conf by default, uses YAML syntax,
and at its simplest, it loads every source file and every test file, and runs tests at
http://localhost:4224, as seen in Listing 3.6.
server: http://localhost:4224
load:
- src/mylib.js
- src/*.js
- test/*.js
Listing 3.10 Running tests with JsTestDriver on Linux and OSX
java -jar $JSTESTDRIVER_HOME/JsTestDriver-1.2.1.jar --tests
all
Listing 3.11 Running tests with JsTestDriver on Windows
java -jar %JSTESTDRIVER_HOME%JsTestDriver-1.2.1.jar--tests
all
The default configuration file name is jsTestDriver.conf, and as long
as this is used we don’t need to specify it. When using another name, add the
--config path/to/file.conf option.
When running tests, JsTestDriver forces the browser to refresh the test files.
Source files, however, aren’t reloaded between test runs, which may cause
errors due
to stale files. We can tell JsTestDriver to reload everything by adding the --reset
option.
describe('Rectangle', function() {
var rectangle;
beforeEach(function() {
rectangle = new app.Rectangle();
});
describe('with length 7 and width 4', function() {
it('should have an area of 28', function() {
expect(rectangle.area()).toBe(28);
});
it('should have a circumference of 22', function() {
});
});
});
jasminehttp://www.joezimjs.com/javascript/setting-up-a-jasmine-unit-testing-environment-with-testem/
Listing 3.8 Date.prototype.strftime test with JsTestDriver
TestCase("strftimeTest", {
setUp: function () {
this.date = new Date(2009, 9, 2, 22, 14, 45);
},
tearDown: function () {
delete this.date;
},
"test %Y should return full year": function () {
var year = Date.formats.Y(this.date);
assertNumber(year);
assertEquals(2009, year);
},
"test %m should return month": function () {
var month = Date.formats.m(this.date);
assertString(month);
assertEquals("10", month);
},
"test %d should return date": function () {
assertEquals("02", Date.formats.d(this.date));
},
"test %y should return year as two digits": function () {
assertEquals("09", Date.formats.y(this.date));
},
"test %F should act as %Y-%m-%d": function () {
assertEquals("2009-10-02", this.date.strftime("%F"));
}
});
In QUnit asynchronous tests look like this:
asyncTest( "asynchronous test: one second later!", function() {
expect( 1 );
setTimeout(function() {
ok( true, "Passed and ready to resume!" );
start();
}, 1000);
});
QUnithttp://qunitjs.com/
PhantomJS
HTML
<!-- blocking stylesheet, nothing renders until it is downloaded and parsed -->
<link href="main.css" rel="stylesheet">
<!-- non-blocking, low download priority because of the evaluated media query -->
<link href="i-want-a-monitor-of-this-size.css" rel="stylesheet" media="(min-width: 4000px)">
<!-- won't be downloaded at all, because it is marked as disabled -->
<link href="noop.css" rel="stylesheet" disabled>
<!-- print stylesheet is non-blocking -->
<link href="noop.css" rel="stylesheet" media="print">
webRTC
REFERENCE
Events
style
origin
Elems
Elems Attr
DOM
Exeptions
Categories
Enabling WebRTC in Firefox
The code is behind a pref for now, pending more testing. To enable
our WebRTC code in Firefox’s Nightly desktop build, browse to about:config
and change the media.peerconnection.enabled preference to true.
Here are the 3 relevant prefs to getUserMedia() and mozRTCPeerConnection():
media.navigator.enabled enables calls to mozGetUserMedia() only
media.navigator.permission.disabled automatically gives permission
to access the camera/microphone and bypasses the permission/selection dialog
media.peerconnection.enabled enables use of mozRTCPeerConnection()
Note: media.peerconnection.enabled implies media.navigator.enabled has been set to true.
http://www.simpl.info/getusermedia/
http://webaudiodemos.appspot.com/
http://www.simpl.info/peerconnection/
apprtc.appspot.com
Standard Web Browser Components
Let’s lay out a few components of the modern day web browser:
Parsing (HTML, XML, CSS, JavaScript)
Layout
Text and graphics rendering
Image decoding
GPU interaction
Network access
Hardware acceleration
HTML5
CSS3
mask
reflection
keyframe
-webkit-transition-property: (valid css property)
animation
gallery
transform
2D
3D
translate
-webkit-perspective: 800;
translate3d(x,y,z)
rotate3d(x,y,z, deg)
rotateX(deg)
translateY...
scale
rotate
transition
cubic-bezier
http://modernizer.com/
load
http://www.w3.org/TR/css3-mediaqueries/
Conditional loading of resources
with mediaqueries
background
boxshadowbackground-multilayers
background-size: 100% auto;
text-overflow: ellipsis(clip);
word-wrap: break-word;
cover
FONT TRUE TYPE
tr:nth-of-type(even){
background-color: #F3F3F3;
}
tr:nth-of-type(odd){
background-color:#ddd;
}
table tr:nth-child(n+2)
If we wanted to select every other row of our table, we’d use
a multiple,
or 2n.
table tr:nth-child(2n)
tr:last-child td:last-child{
font-size:24px;
}
tr:nth-last-child(-n+3) td{
text-align: right;
}
<!--[if (gte IE 5.5)&(lte IE 8)]>
<script type="text/javascript"
src="js/DOMAssistantCompressed-2.8.js"></script>
<script type="text/javascript"
src="js/ie-css3.js"></script>
<![endif]-->
2. http://www.keithclark.co.uk/labs/ie-css3/
3. http://www.domassistant.com/
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1.0);
}
30% {
-webkit-transform: scale(1.1);
}
100% {
-webkit-transform: scale(1.0);
}
}
.pulse {
-webkit-animation: pulse 1000ms infinite ease-in;
}
@-webkit-keyframes slide {
0% {
-webkit-transform: translateY(100px) rotate(-360deg);
opacity: 0;
}
60% {
-webkit-transform: translateY(-10px) rotate(0deg);
}
100% {
}
}
.loadicon {
-webkit-animation: slide 1000ms ease-in;
}
img {
-webkit-border-radius: 10px;
width: 77px;
}
<head>
<meta charset="utf-8" />
<title>Transitions</title>
<style>
.tap {
-webkit-transform: rotate(360deg) scale(1.5);
-webkit-transition: all 500ms ease-out;
}
.untap {
-webkit-transform: rotate(0px) scale(1);
-webkit-transition: all 500ms ease-in;
}
</style>
</head>
<body>
<img onclick="if (this.className!='tap') {this.className='tap'}
else {this.className='untap'}" src="images/tampa.jpg" />
</body>
var insertLocation=document.getElementById('overlay'); //create
a variable to store the insertion point
var newimage=document.createElement('IMG');
newimage.src=highResImageURL; //create an image object
insertLocation.appendChild(newimage); //place the image in
the document at the insert location
window.setTimeout(function() {
newimage.className="showitthumbnail";
}, 100);
//Find the overlay
document.getElementById('overlay').className='fadein';
#overlay {
background-color: black;
/* cover whole page */
height: 100%;
width: 100%;
/* move to top */
position: absolute;
top: 0;
left: 0;
/* put it on top */
z-index: 5;
opacity: 0;
-webkit-transition: all 500ms ease-out;
-webkit-perspective:200;
}
#overlay.fadein {
opacity: 1;
z-index: 30;
}
#overlay.fadeout {
opacity: 0;
z-index: 5;
}
#overlay img {
-webkit-transform: translateZ(-1000px) rotateY(180deg)
translateZ(1000px);
-webkit-transition: all 1000ms ease-out;
opacity: 0;
}
#overlay img.showitthumbnail{
-webkit-transform: rotate(0) scale(1);
opacity: 1;
}
#overlay img.hideitthumbnail{
-webkit-transform: rotate(360deg) scale(0);
opacity: 0;
}
#overlay img.hideitleft{
-webkit-transform: translate(-100%);
opacity: 0;
}
#overlay img.hideitright{
-webkit-transform: translate(+100%);
opacity: 0;
}
img {
float: right;
-webkit-box-reflect: below 4px
-webkit-gradient(linear,
left top,
left bottom,
from(transparent),
color-stop(.7, transparent),
to(rgba(255,255,255,.5)));
-webkit-border-radius: 15px;
}
#text-dropshadow {
text-shadow: 2px 2px 3px #000;
}
#text-glow {
text-shadow: 0px 0px 100px #FC0;
}
#text-emboss {
text-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 3px rgba(0,0,0,.6);
}
#text-outline {
-webkit-text-stroke: 2px rgba(255,255,255,.8);
}
.box {
width: 150px;
height: 150px;
background: #f00;
}
.imagemask {
-webkit-mask-image:url(images/rip.png);
}
.svgmask {
-webkit-mask-image:url(images/star.svg);
}
.gradientmask {
-webkit-mask-image:-webkit-gradient(radial, 50% 50%, 50, 50%
50%, 75, from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
}
.textmask {
font-size: 130px;
font-family: Myriad Pro;
font-weight: bold;
background: url(images/tampa.png);
-webkit-background-clip:text;
color: transparent;
}
#pictures {
-webkit-perspective:200;
}
#pictures ul {
-webkit-transform: rotateY(45deg);
-webkit-transform-style:preserve-3d;
padding: 0px;
}
#pictures li {
list-style: none;
float: left;
}
#pictures ul li img {
width: 75px;
height: 75px;
}
#spoon {
-webkit-transform: rotateY(20deg);
}
@media only screen and (max-device-width: 480px) {
body{
width:460px;
}
section#sidebar, section#posts{
float: none;
width: 100%;
}
}
<link rel="stylesheet" type="text/css"
href="CSS/mobile.css" media="only screen and (max-device-width: 480px)" >
1. It tests for over 20 next-generation
features, all in a matter of milliseconds;
2. It creates a JavaScript object (named
Modernizr) that contains the results of
these tests as boolean properties;
3. It adds classes to the html element
that explain precisely what features are
and are not natively supported
<html lang="ru" dir="ltr" class="no-js">
<script language="JavaScript" type="text/javascript" src="Scripts/modernizr-1.7.min.-
js" ></script>
/*
Hardboiled CSS3 Media Queries by Andy Clarke:
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_me-
dia_queries/
Author: Andy Clarke
Web site: http://stuffandnonsense.co.uk
Twitter: http://twitter.com/malarkey
Hardboiled Web Design
Web site: http://hardboiledwebdesign.com
Twitter: http://twitter.com/itshardboiled
Version date : 30th September 2010
Version: 0.9
License: Creative Commons CC Zero Declaration. No Rights Reserved.
*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and
(max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
CSS3 pseudo-classes
a:after {
content: " (" attr(href) ") ";
}
http://selectivizr.com/
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid
script
pointer
hover
luminosity
skew
-webkit-animaton: spin 8s infinite linear;
<link rel="stylesheet"
media="screen and (min-width: 600px)"
href="small.css">
<link rel="stylesheet"
media="screen and (min-width: 4000px)"
href="big.css">
if (window.matchMedia('screen and (min-width: 600px)')){
document.write('<link rel="stylesheet"
href="small.css">');
}
<link rel="stylesheet" class="mediaquerydependent"
data-media="screen and (min-width: 600px)"
data-href="green.css">
<link rel="stylesheet" class="mediaquerydependent"
data-media="screen and (min-width: 4000px)"
data-href="blue.css">
<img data-src="http://placekitten.com/500/500"
data-alt="kitten"
class="mediaquerydependent"
data-media="screen and (min-width: 600px)">
(function(){
var queries = document.
querySelectorAll('.mediaquerydependent'),
all = queries.length,
cur = null,
attr = null;
while (all--) {
cur = queries[all];
if (cur.dataset.media &&
window.matchMedia(cur.dataset.media).matches) {
for (attr in cur.dataset) {
if (attr !== 'media') {
cur.setAttribute(attr, cur.dataset[attr]);
}
}
}
}
}());
Here is what it does:
We use querySelectorAll to get all the elements that need the
mediaquery check and loop over them (using a reverse while loop).
We test if the element has a data-media property and if the query
defined in it is true
We then loop through all data-prefixed attributes and add a
non-prefixed attribute with its value (omitting the media one)
sacale3d(height,depth,scale-factor)
Andrii Trybynenko®