tag:blogger.com,1999:blog-73242476558509907742024-03-13T01:41:32.788+01:00Frontend BlogBlog about new web technologies like:
Node.js, AngularJS, websockets, requirejs. Tutorials and basic information about angular and node applications.Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.comBlogger13125tag:blogger.com,1999:blog-7324247655850990774.post-42860224160718792312014-06-23T00:05:00.001+02:002014-06-23T00:05:55.176+02:00Why and when use createDocumentFragment instead of createElement<div dir="ltr">
<br /></div>
<div dir="ltr">
<br /></div>
<div dir="ltr">
In this post I will try explain you why you should learn about <b>createDocumentFragment() </b>and why you should use it.</div>
<div dir="ltr">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjC2AdRYcCUM5g38oFTRfXgwQ6ReNaQgMl0HLRHkNYBHUMYoeHCAbuClYGrOUY0j_nusm_DvmioW0879DryucRSsYQhoiC5-bfImR_8bzHGLHvTSUFQoL0d6bL6yLuRlIvM5VUwW7rF86A/s1600/document.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjC2AdRYcCUM5g38oFTRfXgwQ6ReNaQgMl0HLRHkNYBHUMYoeHCAbuClYGrOUY0j_nusm_DvmioW0879DryucRSsYQhoiC5-bfImR_8bzHGLHvTSUFQoL0d6bL6yLuRlIvM5VUwW7rF86A/s1600/document.PNG" height="66" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><h3>
<span style="text-align: left;">Theory</span></h3>
<div>
<b><span style="text-align: left;">document.</span>createDocumentFragment() </b>is method which create empty document fragment which is not part of main DOM tree. It's stored in memory and operations on it doesn't make changes in main document. By using them isntead of creating many new document elements we can get better page/application <b>performance</b>.</div>
<div>
<br /></div>
<h3>
Practice</h3>
<div dir="ltr">
To prove this theory let's write some easy test. Let's say that we want get all texts from each a elements on page and write them on end of page. With standard method we can do this:<br />
<br />
<pre class="prettyprint linenums lang-js">elemA = document.getElementsByTagName('a');
body = document.getElementsByTagName('body')[0];
for(var i = 0; i < elemA.length; i++){
var span = document.createElement('span');
span.textContent = elemA[i].textContent;
body.appendChild(span);
}</pre>
</div>
<div dir="ltr">
<br />
Like you can see in each iteration we create new element and append it to the body. It's cause recalculation of DOM in each step. To prevent this we can create <b>documentFragment</b> and in each step append element to this fragment. Then, after the loop we append fragment to body.<br />
<br />
Result will be the same but performance and time execution will be faster in second case. Here is example of second case:<br />
<br />
<pre class="prettyprint linenums lang-js">elemA = document.getElementsByTagName('a');
body = document.getElementsByTagName('body')[0];
fragment = document.createDocumentFragment();
for(var i = 0; i < elemA.length; i++){
var span = document.createElement('span');
span.textContent = elemA[i].textContent;
fragment.appendChild(span);
}
body.appendChild(fragment);</pre>
<br />
<hr />
By using <b>console.time()</b> and <b>console.timeEnd() </b>methods we can check the execution time of both scripts. In my case it's <b>7ms</b> for documentFragment and <b>43ms </b>for loop with appending each time to body.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuH5BntvVHoV72vLTw9XcKhLH1-TLwv2xT5udFhBHPTgatZh5I8e8pWvBnvpBURvvKXocN_I3UYPqyi78R1P5Om_AFO8vUx_buj-qtxKhHUAmbrG8itx6TqvQuW0mzRBChzdhZqX1dxHuL/s1600/createDocumentFragment.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuH5BntvVHoV72vLTw9XcKhLH1-TLwv2xT5udFhBHPTgatZh5I8e8pWvBnvpBURvvKXocN_I3UYPqyi78R1P5Om_AFO8vUx_buj-qtxKhHUAmbrG8itx6TqvQuW0mzRBChzdhZqX1dxHuL/s1600/createDocumentFragment.PNG" /></a></div>
<br />
So like you can see <b>createDocumentFragment()</b> method is <b>6 times</b> <b>faster</b> than standard method.<br />
<br />
Gist for these tests you can find here: <a href="https://gist.github.com/lukasz-zak/48486ab35f7ea4bc1ba4" target="_blank">https://gist.github.com/lukasz-zak/48486ab35f7ea4bc1ba4</a></div>
<div dir="ltr">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.com2tag:blogger.com,1999:blog-7324247655850990774.post-2115470922473002812014-04-30T00:27:00.000+02:002014-04-30T00:39:45.638+02:00ECMAScript 6 - What's new in JavaScript - part 3 - let<meta itemprop="image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDisp8iiFXE8B_7uPZgjVDM83Ncrf67zJPX6oQmDKjNvmlRq0ufWpVFXEnx3cXs95wZ4Ysw52ef96DtqbOR1aV2Z7z1PVC94J1i6W5PBujvZCXQZ_sJinYIMHeeG83HMF6h_xq3uvySp9/s1600/ES6.png">
Like I mentioned here: <a href="http://frontenddevs.blogspot.com/2013/09/ecmascript-6-whats-new-in-javascript.html">http://frontenddevs.blogspot.com/2013/09/ecmascript-6-whats-new-in-javascript.html</a> I preparing series of posts about coming ECMAScript version 6.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDisp8iiFXE8B_7uPZgjVDM83Ncrf67zJPX6oQmDKjNvmlRq0ufWpVFXEnx3cXs95wZ4Ysw52ef96DtqbOR1aV2Z7z1PVC94J1i6W5PBujvZCXQZ_sJinYIMHeeG83HMF6h_xq3uvySp9/s1600/ES6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDisp8iiFXE8B_7uPZgjVDM83Ncrf67zJPX6oQmDKjNvmlRq0ufWpVFXEnx3cXs95wZ4Ysw52ef96DtqbOR1aV2Z7z1PVC94J1i6W5PBujvZCXQZ_sJinYIMHeeG83HMF6h_xq3uvySp9/s1600/ES6.png" /></a></div>
<br />
<br />
Today I will write about <b>let</b>.<br />
<br />
<a name='more'></a><br />
<h3>
Let keyword.</h3>
Let's start from definition of what <i>let</i> is:<br />
<br />
<blockquote class="tr_bq">
let allows you to declare variables, limiting its scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.</blockquote>
<br />
Basically it's work like var keyword for global scope and function scope <b>BUT</b> there is difference in block scope. Here are two examples. First one with var keyword:<br />
<br />
<pre class="prettyprint linenums lang-js">console.log("foo", foo);
if(true){
var foo = 'foo';
console.log("foo", foo);
}
console.log("foo", foo);
</pre>
<br />
In <i>console</i> we will receive '<i>undefined</i>' then '<i>foo</i>' and next '<i>foo</i>'. What if will use <b>let</b> instead of <b>var</b> in similar example:<br />
<br />
<pre class="prettyprint linenums lang-js">console.log("bar", bar);
if(true){
let bar = 'bar';
console.log("bar", bar);
}
console.log("bar", bar);
</pre>
But now instead of undefined result for first console.log() we will get error:<br />
<pre class="prettyprint linenums lang-js">ReferenceError: bar is not defined</pre>
<br />
This is the main difference between <b>var</b> and <b>let</b> keywords. For block scope (if, for, while loops) if you put var declaration inside it will be <b>hoisted</b> on top of the <i><b>function scope</b></i>.<br />
<br />
That's why in first example we see '<i>undefined</i>' for first <i>console.log()</i>. In second example <b>let</b> declaration is also hoisted but only on top of <i><b>block scope</b></i> (in this example on top of <i>if loop</i> scope).<br />
<br />
<h3>
Real life usage.</h3>
<br />
You should probably meet problem with for iteration inside which you add events click for each button:
<br />
<pre class="prettyprint linenums lang-js">for (var i = 0; i <= 10; i++) {
var btn = document.createElement('button');
btn.textContent = "Element with number " + i;
btn.addEventListener('click', function(){
console.log("button number is:", i);
})
document.body.appendChild(btn);
document.body.appendChild(document.createElement('br'));
};</pre>
<pre class="prettyprint linenums lang-js"></pre>
But what's happen when you click on any of buttons? You will get message in console "<i><b>button number is: 10</b></i>" for every click.<br />
<br />
To prevent this you can wrap this into function where pass i parameter but instead of this you can use new learned <b>let</b> keyword:<br />
<br />
<pre class="prettyprint linenums lang-js">for (var i = 0; i < 10; i++) {
var btn = document.createElement('button');
btn.textContent = "Another element with number " + i;
let j = i;
btn.addEventListener('click', function(){
console.log("button number is:", j);
})
document.body.appendChild(btn);
document.body.appendChild(document.createElement('br'));
};</pre>
<br />
If you learn something new by this post click on + in comments bellow and wait for next article from ES6 series.<br />
<br />
<h3>
Sources</h3>
<div>
<br /></div>
<div>
All examples you can find on mine gist: </div>
<div>
<a href="https://gist.github.com/lukasz-zak/18dfbd7a4e2a34011cd9" target="_blank">https://gist.github.com/lukasz-zak/18dfbd7a4e2a34011cd9</a></div>Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.com0tag:blogger.com,1999:blog-7324247655850990774.post-48786889896685362002013-12-08T04:00:00.002+01:002013-12-08T04:00:55.533+01:00Radio player with command line for geeks.If you like listen music from SoundCloud and You like also write commands in console there is radio for you.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOxGQoR784bJMs7EYY9xcpqWbWwr1oJk8jHYBiUyw3XRMFCzZNA0dSAcONUrRKyP_B9I30mcMNlNDHozF8hyjjGbWe_WCs-II81JBnVpzpFoy16YyCTawKX32BON_ithAsnnY3uPKFNiwd/s1600/cmdFM.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOxGQoR784bJMs7EYY9xcpqWbWwr1oJk8jHYBiUyw3XRMFCzZNA0dSAcONUrRKyP_B9I30mcMNlNDHozF8hyjjGbWe_WCs-II81JBnVpzpFoy16YyCTawKX32BON_ithAsnnY3uPKFNiwd/s400/cmdFM.PNG" width="297" /></a></div>
<br />
<h4>
This is how author describe his radio:</h4>
<blockquote class="tr_bq">
Cmd.fm is a command-line radio player for computer geeks.<br />
<br />
We will continue working on this project. Any help will be appreciated.</blockquote>
<br />
<a name='more'></a><br />
You can listen it via browser using many commands. From simple <i>play</i>, <i>stop</i>, <i>pause </i>to little more complicated like commands for creating playlist.<br />
<br />
Full command lists you can find below or after write <i>help </i>command.<br />
<br />
<b>Enjoy! <a href="http://cmd.fm/">http://cmd.fm/</a></b><br />
<br />
<blockquote class="tr_bq">
<b>Music Commands..................................................................</b><br />
genres..........................................................Lists all genres<br />
play <genre>..............................Play genre, for example: play chillout<br />
comments <on|off>..........................To hide comments, use: comments false<br />
comments manage.....................................Show or manage your comments<br />
comments remove <comment id>.................................Remove your comment<br />
comment <your comment>......................................Add comment to track<br />
info....................................Get more information about current track<br />
pause, resume...........................................Pause or resume playback<br />
back, next OR skip.........................................Go back or next track<br />
loop, unloop..................................................Loop current track<br />
forwards <miliseconds>..........................Go forwards, Ex.: 5000 for 5 sec<br />
backwards <miliseconds>........................Go backwards, Ex.: 5000 for 5 sec<br />
volume <number>..............................................Manage volume level<br />
mute, unmute....................................................Volume shortcuts<br />
<br />
<br />
<b>Playlist Commands...............................................................</b><br />
playlists OR playlists <username>............List your playlists or browse users<br />
playlist new........................................Create a new public playlist<br />
playlist add|remove <playlist name>............Add or remove track from playlist<br />
playlist show <playlist name>.........................Show your playlist details<br />
playlist play <playlist name>.................................Play your playlist<br />
playlist show <username>/<playlist name>.............Show users playlist details<br />
playlist play <username>/<playlist name>.....................Play users playlist<br />
playlist edit <playlist name>......................................Edit playlist<br />
playlist manage <playlist name>..................................Manage playlist<br />
playlist destroy <playlist name>.................................Delete playlist<br />
<br />
<br />
<b>Social Commands.................................................................</b><br />
news.................................................Tiny news feed from cmd.fm!<br />
share............................................Get share link of current track<br />
like..........................................................Like current track<br />
unlike OR unlike <track id>.....................Unlike current track or track id<br />
likes OR likes play......................................Show or play your likes<br />
<br />
<br />
<b>User Commands...................................................................</b><br />
login, signup, logout....................................Login, signup or logout<br />
retrieve <email> OR resend <email>...........Reset password or resend activation<br />
profile OR profile <username>.......................Leave blank for self profile<br />
edit profile OR edit password...............Edit your profile or change password<br />
<br />
<br />
<b>View Commands...................................................................</b><br />
layouts.............................................................Layouts list<br />
layout <layout name>.......................................Change current layout</blockquote>
<blockquote class="tr_bq">
<b>Other Commands..................................................................</b><br />about.....................................................................Hello?<br />donate <amount>..............................................Support cmd.fm team<br />contact <message>....................................We'd love to hear from you!<br />clear...........................................................Refresh terminal</blockquote>
Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.com0tag:blogger.com,1999:blog-7324247655850990774.post-52517942752187972412013-11-07T00:36:00.000+01:002013-11-07T00:36:40.212+01:00ECMAScript 6 - What's new in JavaScript - part 2 - constLike I mentioned here: <a href="http://frontenddevs.blogspot.com/2013/09/ecmascript-6-whats-new-in-javascript.html">http://frontenddevs.blogspot.com/2013/09/ecmascript-6-whats-new-in-javascript.html</a> I preparing series of posts about coming ECMAScript version 6.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDisp8iiFXE8B_7uPZgjVDM83Ncrf67zJPX6oQmDKjNvmlRq0ufWpVFXEnx3cXs95wZ4Ysw52ef96DtqbOR1aV2Z7z1PVC94J1i6W5PBujvZCXQZ_sJinYIMHeeG83HMF6h_xq3uvySp9/s1600/ES6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDisp8iiFXE8B_7uPZgjVDM83Ncrf67zJPX6oQmDKjNvmlRq0ufWpVFXEnx3cXs95wZ4Ysw52ef96DtqbOR1aV2Z7z1PVC94J1i6W5PBujvZCXQZ_sJinYIMHeeG83HMF6h_xq3uvySp9/s1600/ES6.png" /></a></div>
<br />
<br />
Today I will write about <b>const</b>.<br />
<br />
<a name='more'></a><br />
<br />
Some of you probably will know this special keyword from other languages. For people who don't know yet here are some explanations from <a href="http://msdn.microsoft.com/en-us/library/e6w8fe1b(v=vs.90).aspx" target="_blank">MSDN</a> page about const in C#:<br />
<br />
<blockquote class="tr_bq">
The const keyword is used to modify a declaration of a field or local variable. It specifies that the value of the field or the local variable is constant, which means it cannot be modified. </blockquote>
<br />
End of theory. Let's check it. First very basic example:<br />
<br />
<pre class="prettyprint linenums lang-js">(function () {
var foo = 'foo';
const bar = 'bar';
buzz = 'buzz';
console.group('Before changes');
console.info("inital value of foo:", foo);
console.log("inital value of bar:", bar);
console.log("inital value of buzz:", buzz);
console.groupEnd('Before changes');
foo += buzz;
bar += buzz;
buzz = null;
console.group('After changes');
console.log("here is foo:", foo);
console.log("here is bar:", bar);
console.log("here is buzz:", buzz);
console.groupEnd('After changes');
})();</pre>
<br />
and here is the output of console:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLXPqX-kYikIIC_bkmSaBefRSRx-dsjaK45wCofiFIO6GhgW5vKC3msa5X3ItxcHmCBaTOH7unyySAQ3jPaXD80H9Yd2dcT_ArbuNHljaHQrKMYgV8NPo8B6vHqEf5t2tjeHazzEDyl5NC/s1600/ecma6-const-1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLXPqX-kYikIIC_bkmSaBefRSRx-dsjaK45wCofiFIO6GhgW5vKC3msa5X3ItxcHmCBaTOH7unyySAQ3jPaXD80H9Yd2dcT_ArbuNHljaHQrKMYgV8NPo8B6vHqEf5t2tjeHazzEDyl5NC/s1600/ecma6-const-1.PNG" /></a></div>
<br />
Like you can notice we can change value of <i>foo </i>which is local variable, <i>buzz</i> which is global variable but cannot change value of <i>bar</i> because it <b>const</b>.<br />
<br />
Here are another tries to change <i>bar</i> variable:<br />
<pre class="prettyprint linenums lang-js"> bar = 'foo';
console.log('Re-assign try: ', bar);
const bar = 'foo';
console.log('Re-initialize try: ', bar);
var bar = 'foo';
console.log('Re-declare try: ', bar);
</pre>
<br />
and the output:<br />
<span style="background-color: #222222; box-sizing: border-box; color: #ff6666; font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; line-height: 12px; white-space: pre-wrap;">Uncaught TypeError: Variable 'bar' has already been declared</span><span style="background-color: #222222; color: #ff6666; font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; line-height: 12px; white-space: pre-wrap;"> </span><br />
<br />
It's caused by trying of re-initialize and re-declare variable <i>bar</i>. So 2nd and 3rd try throw error but 1st still not changing value of <i>bar</i>.<br />
<br />
<b>And that's the point. </b>Because const mean something constant it cannot be changed in scope where const value was declared.<br />
<br />
Here you can find more examples of const:<script src="https://gist.github.com/lukasz-zak/7346121.js"></script>Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.com0tag:blogger.com,1999:blog-7324247655850990774.post-9937812058100777642013-09-08T21:35:00.002+02:002015-01-21T21:49:40.365+01:00ECMAScript 6 - What's new in JavaScript - Part 1<h3>
<b>Introduction</b></h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJrKJkHbAc7zqJ5vHqLX_p24RaOEZFTmwtNxtSa32sjfm8RftEU5H3hJ6_EwrkIAYPZr0mQUAYswfm_zs66ebzMhKKA4AE_aKn-ZD_lVdyzuoRg7GOZUx_TQQANE88MYlTR0WAlBFEqnr/s1600/ES6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJrKJkHbAc7zqJ5vHqLX_p24RaOEZFTmwtNxtSa32sjfm8RftEU5H3hJ6_EwrkIAYPZr0mQUAYswfm_zs66ebzMhKKA4AE_aKn-ZD_lVdyzuoRg7GOZUx_TQQANE88MYlTR0WAlBFEqnr/s1600/ES6.png" /></a></div>
<br />
<br />
On this series I'm planning write posts about new features in incoming ECMAScript version 6. Here is definition from Wikipedia:<br />
<br />
<blockquote class="tr_bq">
<b>ECMAScript</b> is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the web, in the form of several well-known implementations such as JavaScript, JScript and ActionScript.</blockquote>
<br />
<a name='more'></a><br />
At the moment all of popular browsers like <i>Chrome</i>, <i>Firefox</i>, <i>Internet Explorer</i> and <i>Opera</i> have included the latest stable edition of ECMAScript version 5.1. Also for the moment only(?) Firefox have implemented most features of new ECMAScript and I will try show you examples using this browser [<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla" target="_blank">source</a>].<br />
<br />
Here is a list with news from ES6 which I'm going to describe one by one in next parts:<br />
<br />
<ul>
<li><a href="http://frontenddevs.blogspot.com/2013/11/ECMAScript-6-Whats-new-in-JavaScript-part-2-const.html" target="_blank">const</a></li>
<li><a href="http://frontenddevs.blogspot.com/2014/04/ecmascript-6-part-3-let.html" target="_blank">let</a></li>
<li>Destructuring assignment</li>
<li>for...of statement</li>
<li>Iterators and generators</li>
<li>Default parameters</li>
<li>Spread operator of Array</li>
<li>Arrow functions</li>
<li>Array comprehensions</li>
</ul>
<div>
Actual versions of draft you can find here: <a href="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts">http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts</a>. Official release date is not known .I can only find some information that it can be released in December 2013 or 1st half of 2014. </div>
Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.com0tag:blogger.com,1999:blog-7324247655850990774.post-3788040071558983652013-08-13T04:39:00.001+02:002013-08-13T04:39:25.423+02:00How to fix issue with "Nothing to compile." message<br />
<h3>
</h3>
<h3>
The problem:</h3>
<hr />
If you using <b>yeoman</b> and <b>grunt</b> and compile your stylesheets with <b>compass</b>, you can come across the message:<br />
<br />
<blockquote class="tr_bq">
"Nothing to compile. If you're trying to start a new project, you have left off the directory argument.<br />
Run "compass -h" to get help."</blockquote>
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCdY52-gzTEkP3c_HAky3bHEOyAhgXFTdbQGjr28UtB8Hd_iWYcmWf4ar_pgus2-VzmxWe6GTB_4yYICmj-q2hpd8mQtdtAEjUKf2E0Nc9RKXzXWAj2SGhe0gCVpdQYLRnqAqB_pQo2QTL/s1600/compass.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCdY52-gzTEkP3c_HAky3bHEOyAhgXFTdbQGjr28UtB8Hd_iWYcmWf4ar_pgus2-VzmxWe6GTB_4yYICmj-q2hpd8mQtdtAEjUKf2E0Nc9RKXzXWAj2SGhe0gCVpdQYLRnqAqB_pQo2QTL/s640/compass.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<a name='more'></a><div style="text-align: left;">
Even if message says: <i>"Done, without errors",</i> you probably get not compiled sass or scss files. This situation happened to me. Like always in that case I've start googling. I found some solution but each doesn't help me well.</div>
<div style="text-align: left;">
<br />
<br /></div>
<h3>
Solution for problem.</h3>
<hr />
<div style="text-align: left;">
Because I can't find solution I'm trying to ask people in this issue on GitHub:</div>
<div style="text-align: left;">
<a href="https://github.com/yeoman/yeoman/issues/1092">https://github.com/yeoman/yeoman/issues/1092</a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
After asking I'm still not give and searching for solution. I found thread on StackOverflow which was correct answer for my problem here:</div>
<div style="text-align: left;">
<a href="http://stackoverflow.com/questions/11262335/compass-and-sass-nothing-to-compile-error">http://stackoverflow.com/questions/11262335/compass-and-sass-nothing-to-compile-error</a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
The solution is <b>removing or changing path</b> if it includes "<b>[</b>" and "<b>]</b>" characters in name.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Like always <i><b><a href="http://stackoverflow.com/" target="_blank">StackOverflow</a></b></i> and them community helped me. So if you don't know SO yet You should remember this site fast.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
P.S. Few minutes later author of issue on GitHub answer to me. He had the same problem with brackets in project path :)</div>
Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.com0tag:blogger.com,1999:blog-7324247655850990774.post-19677196013178579822013-08-12T03:50:00.001+02:002013-08-12T03:50:16.324+02:00How to make aside menu with nice effect on showing.<br />
In this tutorial I will show You how create aside menu with interesting flip effect for main content of page. It uses CSS3 <b>transition</b> and <b>transform</b>. Javascript is used for manipulate classes.<br />
<br />
On this screenshoot below you can find how it looks like:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCf0VZJFR2Pu39S79YALyJTsMIruy-Sk6OP0jY3Qr3jQAiZfc0CPDvK9GRx-jEsPLgGhdjFrvoE-ayJm9jgy_IEfG1IkpAfFggoAURUEQrjEGcQEP9s5K3gJai4giY8YzOKT5SxF0524Hc/s1600/Menu-side-effect.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Aside menu in use" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCf0VZJFR2Pu39S79YALyJTsMIruy-Sk6OP0jY3Qr3jQAiZfc0CPDvK9GRx-jEsPLgGhdjFrvoE-ayJm9jgy_IEfG1IkpAfFggoAURUEQrjEGcQEP9s5K3gJai4giY8YzOKT5SxF0524Hc/s320/Menu-side-effect.PNG" title="Aside menu in use" width="315" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Aside menu in use</td></tr>
</tbody></table>
<br />
<div>
<blockquote class="tr_bq" style="text-align: left;">
To see this in action just scroll to end of post and watch demo.</blockquote>
<a name='more'></a><br />
<h3>
Main content:</h3>
<div>
As a example content I used sample page from <b><a href="http://examples.getbootstrap.com/" target="_blank">Bootstrap 3 RC1</a> </b>(more about news from Bootstrap 3 you can read <a href="http://frontenddevs.blogspot.com/2013/07/new-version-of-twitter-bootstrap-3-0.html" target="_blank">here</a>).<b> </b>Whole content is wrapped by div with id <b style="font-style: italic;">content</b> which is also wrapped by div with id <b><i>main</i></b>.</div>
<div>
<br /></div>
<div>
For aside menu we need create new container. For me it's div with id <b>asideMenu</b>. There I put example navigation founded on twitter bootstrap.</div>
<div>
<br /></div>
<h3>
Style time:</h3>
Ok, we created content but now we need add style for this. To do this I used <a href="http://sass-lang.com/" target="_blank">Sass</a>, which I also want to learn in the middle of doing this <b>aside menu</b> demo. We need hide menu on start, so I set position absolute and move menu <b>-40%</b> in right side. Exaclty this same dimension need to be set also for width of menu.<br />
<br />
Second step is settings for aside menu when it is showed. For this I using class <i>moved</i>. It's simple, You need just move position from right -40% to 0. To make this move smoothly I add CSS transition property. Here are CSS rules for aside menu:<br />
<br />
<pre class="prettyprint linenums lang-css"> #asideMenu
@include posAbsolute(right, top, -40%)
width: 40%
height: 100%
padding-left: 10px
background-color: #eee
@include transition(all, .2s)
&.moved
background-color: #fff
width: 40%
right: 0
#buttonOpen
@include posAbsolute(left, top, -100px, 15px)
#buttonClose
@include posAbsolute(right, top, 10px, 10px)</pre>
<div>
<div>
<br /></div>
Rest of rules for page content you can find here:</div>
<pre class="prettyprint linenums lang-css">body
background-color: #222 !important
font: 15px Tahoma
height: 100%
width: 100%
#main
overflow: hidden
@include posAbsolute
@include maxSize
@include transition(all, .2s)
#content
text-align: center
background-color: #fff
box-shadow: 0 0 20px 30px #ccc
@include transform
@inclide posAbsolute
@include maxSize
@include transition(all, .4s)
&.moved
background-color: #ccc
@include transform(-45deg, -40%)
</pre>
<div>
<br />
I use mixins because it's supports <b>DRY</b>. You don't need repeat each time whole properties, like transition, for each browser. Definition for <i>transition</i>, <i>transform</i>, <i>maxSize</i>, <i>posAbsolute</i> mixins you can find below:<br />
<br />
<pre class="prettyprint linenums lang-css">@mixin transition($property: all, $time: .2s)
transition-duration: $time
-o-transition-duration: $time
-ms-transition-duration: $time
-moz-transition-duration: $time
-webkit-transition-duration: $time
transition-property: $property
-o-transition-property: $property
-ms-transition-property: $property
-moz-transition-property: $property
-webkit-transition-property: $property
transition-timing-function: ease-in-out
-o-transition-timing-function: ease-in-out
-ms-transition-timing-function: ease-in-out
-moz-transition-timing-function: ease-in-out
-webkit-transition-timing-function: ease-in-out
@mixin transform($rotateY: 0deg, $translateX: 0%, $perspective: 900px)
-webkit-transform: perspective(900px) rotateY($rotateY) translateX($translateX)
-moz-transform: perspective(900px) rotateY($rotateY) translateX($translateX)
-ms-transform: perspective(900px) rotateY($rotateY) translateX($translateX)
-o-transform: perspective(900px) rotateY($rotateY) translateX($translateX)
transform: perspective(900px) rotateY($rotateY) translateX($translateX)
-webkit-transform-style: preserve-3d
-moz-transform-style: preserve-3d
-ms-transform-style: preserve-3d
-o-transform-style: preserve-3d
@mixin maxSize
width: 100%
height: 100%
@mixin posAbsolute($side: left, $level: top, $sideVal: 0, $levelVal: 0)
position: absolute
#{$side}: $sideVal
#{$level}: $levelVal</pre>
<br />
<h3>
...and some Javascript for end</h3>
<div>
Because I need add class to some DOM elements on page, when button "Options" is pressed, I included some javascript. Otherwise I make it working on mobile devices. To open aside menu You need swipe your finger from right to left side. To close the menu just move your finger from left to right.</div>
<div>
<br /></div>
<div>
Javascript code:</div>
<div>
<br /></div>
<pre class="prettyprint linenums lang-js">(function(document, undefined){
var asideMenu = document.getElementById('asideMenu'),
content = document.getElementById('content'),
buttonOpen = document.getElementById('buttonOpen'),
buttonClose = document.getElementById('buttonClose'),
startTouchPos = 0, endTouchPos = 0,
openMenu = function(){
content.className = asideMenu.className = 'moved';
buttonOpen.style.visibility = 'hidden'
},
closeMenu = function(){
content.className = asideMenu.className ='';
setTimeout(function(){
buttonOpen.style.visibility = ''
}, 200);
};
document.addEventListener('touchstart', function(e){
startTouchPos = parseInt(e.touches[0].clientX,10);
});
document.addEventListener('touchmove', function(e){
e.preventDefault();
endTouchPos = parseInt(e.touches[0].clientX, 10);
});
document.addEventListener('touchend', function(e){
if(endTouchPos < startTouchPos && (startTouchPos - endTouchPos > 50) ){ openMenu() }
else if(endTouchPos > startTouchPos && (endTouchPos - startTouchPos > 50)){ closeMenu() }
startTouchPos = endTouchPos = 0;
});
buttonClose.addEventListener('click', function(){ closeMenu() });
buttonOpen.addEventListener('click', function(){ openMenu() });
})(document)
</pre>
<h3>
Demo:</h3>
Enjoy: <a href="http://codepen.io/lukasz-zak/full/hioAy">http://codepen.io/lukasz-zak/full/hioAy</a></div>
</div>
Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.com0tag:blogger.com,1999:blog-7324247655850990774.post-1338370895301021372013-07-30T16:16:00.000+02:002013-07-30T16:16:57.627+02:00New reload types in Chrome<div dir="ltr">
<br />
<br />
As frontend developer you probably has often problem with cache. As you should
know standard refreshing page won't clear pages cache. You can set option <b>Disable Cache</b> in devtools, but it works only with opened this tools.</div>
<div dir="ltr">
<br /></div>
<div dir="ltr">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTBz1uxUzNVI0ehAnSFWlf1Dk-mvnqSDs8SJhEUra9CpH01m4bH8mV-8vrIbuMckj5doz-wy0ZBB1WCTPYVXGfpbxxZ04OuPLFH79L4S0QY5j6xkYqo5xDlZeydkIG9zShqdwhE-19jtcY/s1600/Chrome+reload.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTBz1uxUzNVI0ehAnSFWlf1Dk-mvnqSDs8SJhEUra9CpH01m4bH8mV-8vrIbuMckj5doz-wy0ZBB1WCTPYVXGfpbxxZ04OuPLFH79L4S0QY5j6xkYqo5xDlZeydkIG9zShqdwhE-19jtcY/s1600/Chrome+reload.PNG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">New options for reload in Google Chrome 28.</td></tr>
</tbody></table>
<br />
<br />
<a name='more'></a><br />
<br />
<h2>
How to get it</h2>
<br />
Now in Chrome you can find new option. By long pressing refresh button or right clicking on it in Google Chrome you can call a context menu where you can find 3 types of reloading page:<br />
<br />
<ul>
<li>Normal Reload (Ctrl + R)</li>
<li>Hard Reload (Ctrl + Shift + R)</li>
<li>Empty Cache and Hard Reload</li>
</ul>
<div>
<br /></div>
<div>
<b>But for this you have to had opened devtools too.</b></div>
</div>
Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.com0tag:blogger.com,1999:blog-7324247655850990774.post-27689994526953284372013-07-29T03:43:00.000+02:002013-07-29T03:43:08.944+02:00New Twitter Bootstrap 3.0<div dir="ltr">
<br /></div>
<div dir="ltr">
Few days ago new version of most popular frontend framework - <b>Twitter </b><b>Bootstrap</b> was released. It's first release candidate so be aware if you want use it on production.</div>
<div dir="ltr">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXyd_NQWBp18jUuxqzxeTOnGNj7KkeIhuKLXIhzpLmQYIiC6CLEqCGOnWyQdNWKmniYXtISprgkc8IrKlbSIYCc8tR_usgXe02zXlPWOCp8Iw9CRla_bRwWN7qKeOwtc4aiXRcm_rVR7dz/s1600/twitter+bootstrap.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXyd_NQWBp18jUuxqzxeTOnGNj7KkeIhuKLXIhzpLmQYIiC6CLEqCGOnWyQdNWKmniYXtISprgkc8IrKlbSIYCc8tR_usgXe02zXlPWOCp8Iw9CRla_bRwWN7qKeOwtc4aiXRcm_rVR7dz/s640/twitter+bootstrap.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a name='more'></a><br />
<br />
<div dir="ltr">
Like author wrote there is many changes in ~1600 <b>commits</b>!<br />
<br /></div>
<h2>
<b>The</b><b> </b><b>most</b><b> </b><b>important</b><b> </b><b>change</b></h2>
<div dir="ltr">
This framework was rewritten for mainly one reason: to be framework with <b>mobile-first</b> design.</div>
<div dir="ltr">
<br /></div>
<div dir="ltr">
</div>
<h2>
<b>Few</b><b> </b><b>other</b><b> important </b><b>changes</b></h2>
<br />
<ul>
<li><b>Repository switched from Makefile to Grunt</b></li>
<li><b>Droped support for IE 7 and FF 3.6</b></li>
<li><b>Simplify grid system</b></li>
<li>News like:</li>
<ul>
<li><b>list groups</b> ("...<i>for creating simple and complex series of components. Perfect for more complex implementations like email inboxes, or simple ones like a list of options</i>.")</li>
<li><b>panels</b> ("...<i>for easily containing content within a box with an optional heading. Also included are contextual state classes for success, warning, danger, and info."</i>)</li>
</ul>
</ul>
<div>
<br /></div>
<div>
<br /></div>
<h4>
Full change log you can find here: </h4>
<div dir="ltr">
<a href="https://github.com/twbs/bootstrap/pull/6342">https://github.com/twbs/bootstrap/pull/6342</a>.</div>
<div dir="ltr">
<br /></div>
<div dir="ltr">
</div>
<h4>
And here is homepage for new version:</h4>
<a href="http://twitter.github.io/bootstrap/">http://twitter.github.io/bootstrap/</a>Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.com0tag:blogger.com,1999:blog-7324247655850990774.post-72675513410560591822013-07-28T08:00:00.000+02:002013-07-28T08:17:21.954+02:00How to build Rubik's Cube using CSS3 and HTML<div>
<br />
In this post I will try to show you how create 3D Rubkik's Cube using only CSS3 and HTML. On the picture below you can see effect of my work.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNDWCKVu9hUqaNLXQZTeoQrwJbF_eNCGtHNz8UK32LVtiIVNjQ-vKrzhIrQEvSVjkMJ2kTYx2Yp9qCO8kka9NmjzWYkhaHpNNlWK-lByuOwsChNC0IUNUibh1YfoF0xD6YeA_0XW47j4Nm/s1600/rubik's+cube.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="289" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNDWCKVu9hUqaNLXQZTeoQrwJbF_eNCGtHNz8UK32LVtiIVNjQ-vKrzhIrQEvSVjkMJ2kTYx2Yp9qCO8kka9NmjzWYkhaHpNNlWK-lByuOwsChNC0IUNUibh1YfoF0xD6YeA_0XW47j4Nm/s320/rubik's+cube.PNG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Screenshot of code result.</td></tr>
</tbody></table>
<br />
<a name='more'></a><br /></div>
<div>
<h2>
</h2>
<h2>
Theory</h2>
</div>
<div>
First you should know how look X Y Z axis in web. Look on this picture below. Z axis is not visible here because when we look on page it's like arrow for this axis comes from page to user. You can ask why I mention about this. Well it very helps me to imagine and write code for <b>Rubik's Cube.</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbME-o3IYgiacCJOId6NyUK-2LqaPtZX7JUTrHzs9WCErwSZTx9WisTFgOCBS3RUuK7GxNhySA1bmFwBNE_b6psG6YHLT899Mc8q1W41O2M_7Yk7pxJsDwRTS1HqsABhX7gEJcsb1X64r/s1600/Axis+(1).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="409" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbME-o3IYgiacCJOId6NyUK-2LqaPtZX7JUTrHzs9WCErwSZTx9WisTFgOCBS3RUuK7GxNhySA1bmFwBNE_b6psG6YHLT899Mc8q1W41O2M_7Yk7pxJsDwRTS1HqsABhX7gEJcsb1X64r/s640/Axis+(1).png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div>
<h2>
</h2>
<h2>
Time for practice.</h2>
</div>
Rubik's Cube is made from 27 smallest cubes. So first we need create our first cube. For this I make one dive with class <i><b>cube</b></i> and inside it I put 6 div's where each will be a cube's face. Using<b> <i>nth-child</i></b> pseudo-classes and <b><i>transform</i> </b>property I set each faces:<br />
<pre class="prettyprint linenums lang-css">.cube div:nth-child(1){ /*front*/
transform: translateZ(50px);
background-color : #fff;
}
.cube div:nth-child(2){ /*top*/
transform: rotateX(90deg) translateZ(50px);
background-color : yellow;
}
.cube div:nth-child(3){/*bottom*/
transform: rotateX(-90deg) translateZ(50px);
background-color : orange;
}
.cube div:nth-child(4){ /*left*/
transform: rotateY(-90deg) translateZ(50px);
background-color : red;
}
.cube div:nth-child(5){ /*right*/
transform: rotateY(90deg) translateZ(50px);
background-color : green;
}
.cube div:nth-child(6){ /*back*/
transform: translateZ(-50px);
background-color : blue;
}
</pre>
<br />
<br />
To see cube in 3D we need add <i> <b>preserve-3d</b></i> as a parameter of<b> <i>transform-style</i></b> property. To do this I add div with id <b><i>main</i> </b>and set these style for this div.<i> </i>Then I put our .cube div inside it #main. Our html should look like this:<br />
<pre class="prettyprint linenums"><div id="main">
<div class="cube">
<div></div><div></div><div></div><div></div><div></div><div></div>
</div>
</div></pre>
<br />
<br />
To see effect I also rotate our cube: <i><b>transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);</b></i> and add some css rules for better view of result:<br />
<pre class="prettyprint linenums lang-css">body {
background: #333;
}
#main{
width: 300px;
height: 300px;
margin: 0 auto;
margin-top: 150px;
transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
transform-style: preserve-3d;
transform-origin: 50% 50%;
}
.cube{
opacity: 1;
position: absolute;
height: 100px;
width: 100px;
}
.cube div{
position: absolute;
height: 60px;
width: 60px;
padding: 18px;
border: 3px solid #000;
border-radius: 5px;
}</pre>
<br />
<h2>
Now just 26 cubes more to finish...</h2>
<div>
<br />
Not exactly. It will be easy if we group our cubes into groups.<br />
<br />
<h3>
Columns</h3>
I start by adding 2 more cubes and also adding to each class <i style="font-weight: bold;">col</i> as a column and to each individually classes <b>col1</b>, <b>col2</b> and <b>col3</b>. Now time to set each of this item (col1 in default is set in start position):</div>
<div>
<pre class="prettyprint linenums lang-css">div.col2{
transform: translateX(100px);
}
div.col3{
transform: translateX(200px);
}</pre>
</div>
<div>
and again <b style="font-style: italic;">preserve-3d</b> to get 3D effect for <b>col</b> class:</div>
<div>
<pre class="prettyprint linenums lang-css">div.col{
transform-style: preserve-3d;
}</pre>
</div>
<h3>
</h3>
<h3>
Rows</h3>
<div>
This 3 columns makes a row. So we wrap our html code into new div with class <b><i>row</i></b>. Then we copy this row with content twice time more and name each row also individually (row1, row2 and row3). Now let's write CSS code for each row:</div>
<div>
<pre class="prettyprint linenums lang-css">div.row1{
transform: translateZ(-150px);
}
div.row2{
transform: translateZ(-50px);
}
div.row3{
transform: translateZ(50px);
}</pre>
</div>
and don't forget to make it 3D!<br />
<div>
<pre class="prettyprint linenums lang-css">div.col, div.row{
transform-style: preserve-3d;
}</pre>
</div>
<h3>
</h3>
<h3>
Levels</h3>
<div>
And next step is wrapping rows into levels. Like before for columns that now for rows we wrap them into new div with class <i style="font-weight: bold;">lvl</i> copy them twice time more<i style="font-weight: bold;"> </i>and name each level also individually (lvl1, lvl2, lvl3). And again we add CSS rules for new classes:</div>
<div>
<pre class="prettyprint linenums lang-css">div.lvl2{
transform: translateY(100px);
}
div.lvl3{
transform: translateY(200px);
}</pre>
</div>
<h4>
</h4>
<h3>
</h3>
<h3>
Demo</h3>
And now you should see 3D Rubik's Cube. You can manipulate transform values for <b><i>#main</i></b> to see each side of your cube. I prepare some Javascript code to do this and also small CSS3 animation which spin cubes in all axis. Below you can see my demo and here <a href="https://github.com/lukasz-zak/rubik-cube-in-css3" target="_blank">(https://github.com/lukasz-zak/rubik-cube-in-css3).</a><br />
<br />
<div>
<div class="codepen" data-default-tab="result" data-height="825" data-slug-hash="tfDHq" data-theme-id="208" data-user="lukasz-zak">
See the Pen <a href="http://codepen.io/lukasz-zak/pen/tfDHq">Rubik's Cube in CSS3</a> by Łukasz Żak (<a href="http://codepen.io/lukasz-zak">@lukasz-zak</a>) on <a href="http://codepen.io/">CodePen</a></div>
<script async="" src="http://codepen.io/assets/embed/ei.js"></script>
</div>
Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.com0tag:blogger.com,1999:blog-7324247655850990774.post-5677778753773289692013-07-14T07:30:00.003+02:002013-07-14T07:42:12.635+02:00My simple chat application uses Node.js and Angular.js<br />
Because I like learning new things some times ago I decided to create project where I can learn new technologies like:<br />
<ul>
<li><b>AngularJS -</b> [<a href="http://angularjs.org/" target="_blank">http://angularjs.org/</a>]</li>
<li><b>NodeJS -</b> [<a href="http://nodejs.org/" target="_blank">http://nodejs.org/</a>]</li>
<li>Websockets - by using socket.io library [<a href="http://socket.io/" target="_blank">http://socket.io/</a>]</li>
<li>Browser notification (at the moment not working :) )</li>
<li>Authentication via node.js (I'm using Passport library [<a href="http://passportjs.org/">http://passportjs.org/</a>])</li>
<li>Jade - as a node template engine [<a href="http://jade-lang.com/">http://jade-lang.com/</a>]</li>
</ul>
<div>
<a name='more'></a><br /></div>
<div>
These things are implemented (or partly implemented like notification) already in this application. I'm trying learn mainly <b>Angular</b> by step by step adding new part of this framework. Yesterday I read little about directives in Angular and it's allow me to create my first working directive.</div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://angularjs.org/img/AngularJS-large.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="112" src="http://angularjs.org/img/AngularJS-large.png" width="400" /></a></div>
<br />
<h3>
What more?</h3>
</div>
<div>
I planing also include RequireJS into this project. It should allow me to organize better code. I think in future for more complicated application it will be very helpful.</div>
<div>
<br /></div>
<div>
Because tests are very important I wish learn one of tests library and write test for my application.</div>
<div>
<br /></div>
<div>
For css I mainly use style from twitter bootstrap but in future I plan play with SASS/Compass libraries. I already have experience with LESS but want check another ways.</div>
<div>
<br /></div>
<h3>
Here you can find code:</h3>
<div>
My code is available on github (link bellow) so you can easily check my application. To play with it just fork and using `cmd` (you must have installed node.js) type:<br />
<pre class="prettyprint linenums">npm install</pre>
<br />
to install all necessary libraries and then to start application type:<br />
<pre class="prettyprint linenums">npm start</pre>
<br />
<h4>
Link to project:</h4>
</div>
<div>
<a href="https://github.com/lukasz-zak/FunWithAngular">https://github.com/lukasz-zak/FunWithAngular</a><br />
<br />
<h4>
Link to live demo (I will try keeping it online):</h4>
</div>
<div>
<a href="http://funwithangular.w00cash.c9.io/#/">http://funwithangular.w00cash.c9.io/#/</a></div>
Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.com0tag:blogger.com,1999:blog-7324247655850990774.post-65855047491064071432013-07-09T01:42:00.001+02:002013-07-14T06:35:51.055+02:00Basics of RequireJS<br />
I hear a lot of about RequireJS and today I decided to learn this. So for start let's read what is RequireJS.<br />
<br />
<h2>
What is it?</h2>
<div>
We can read from <a href="http://requirejs.org/" target="_blank">documentation</a> that RequireJS is:</div>
<div>
<br /></div>
<blockquote class="tr_bq">
<span style="color: #444444; font-family: Courier New, Courier, monospace;">... a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.</span></blockquote>
<br />
<a name='more'></a><br /><br />
Because I'm not so good with theory let's practice. We gonna create simple calculator application which allows to do simple things like:<br />
<br />
<ul>
<li>addition,</li>
<li>sustraction,</li>
<li>multiplication,</li>
<li>division</li>
<li>and calculating the square of numbers.</li>
</ul>
<div>
<br /></div>
<h2>
Let's begin</h2>
<div>
First we need include requirejs file into our html file for example using url from documentation:<br />
<pre class="prettyprint linenums">src="http://requirejs.org/docs/release/2.1.7/comments/require.js"
</pre>
<br />
<div>
Now let's create our first method of calculator add. How we can do that. Normally we create new file for example: "scripts.js" where we creates functions needed to our application. Then in this file we can create this simple function:<br />
<br />
<pre class="prettyprint linenums">function add (x, y) {
return x + y;
}</pre>
<br /></div>
</div>
<div>
It's look ok right? No! because in this case add scope is global what mean that goes into window scope. We can easily lose control on our variables. Let's imagine that we use some external library where someone too define method add. What it mean? In this case one of add function override another and application will not work.<br />
<br />
To solve this problem we gonna use <b>Asynchronous Module Definition (<a href="https://github.com/amdjs/amdjs-api/wiki/AMD" target="_blank">AMD</a>) </b>mechanism.<br />
<br />
<h4>
Step 1. Define</h4>
</div>
First we create new file. Let's call it <i>add.js</i> and there put addition function which return result of add:<br />
<i><br /></i>
<br />
<pre class="prettyprint linenums">define(function(){
return function(x, y){
return x + y;
};
});</pre>
<div>
<br />
<h4>
Step 2. Using</h4>
<br />
Now if we want use this module we need add require to file where we need this. Let's create next file (<i>app.js</i>) which we include into our html file and write that code:<br />
<br />
<pre class="prettyprint linenums">require(['add'], function(Add){
console.log(Add(1,1));
});</pre>
In first line as first parameter of require method we pass array of javascript file names. You must know that if we put add file into folder for example <i>js</i> then we need write <i>'js/add' </i> instead of <i>add</i>.<br />
Second parameter is a function where as params we write variable names which we gonna next use as module. In this case I simply write <i>Add</i>.<br />
In function body I just log into console result of add method from our first module.<br />
<br />
<h2>
What now?</h2>
Now in the same way we create modules and files for sustraction, multiplication and division. To use all of modules we will need modify our <i>app.js</i> file:<br />
<br />
<pre class="prettyprint linenums">require(['add', 'substract', 'multiply', 'divide'],
function(Add, Sub, Multi, Div){
console.log(Add(1,1));
console.log(Sub(3,1));
console.log(Multi(2,3));
console.log(Div(10,5));
});
</pre>
<br />
Instead of including new file into our html document we can add <i>data-main</i> attribute to script tag where we include requireJS file. In this way we define our main application file.<br />
<br />
Now little reorganize our structure of application. Let's put all modules into js folder and leave app.js file in main directory of our application. Now let's create <b>calculator</b> module which will be used to do calculations.<br />
<br />
<pre class="prettyprint linenums">define(['js/add', 'js/substract', 'js/multiply', 'js/divide'],
function (Add, Substract, Multiply, Divide) {
return {
add : function(a,b) {
return Add(a,b);
},
sub : function (a,b) {
return Substract(a,b);
},
multi : function (a,b){
return Multiply(a,b);
},
divide : function (a,b) {
return Divide(a,b);
},
square : function (a) {
return Multiply(a,a);
}
};
});
</pre>
<br />
Like you can notice I also add here square method which use multiply module to return result. We also using here dependency in define. So our simple modules are called by <i>calculator</i> which is called by our main application file:<br />
<br />
<pre>require(['js/calculator'], function (Calc) {
console.log(Calc.add(1,1));
console.log(Calc.sub(3,1));
console.log(Calc.multi(2,3));
console.log(Calc.divide(10,5));
console.log(Calc.square(5));
});
</pre>
<br />
<b>Full code you can find on GitHub:</b><br />
<a href="https://github.com/lukasz-zak/requireJS-training">https://github.com/lukasz-zak/requireJS-training</a><br />
<br />
<h2>
Summary</h2>
</div>
<div>
Like you can see it's easy and very useful. It's allows us to organize our code into reusable modules. There is also easier for developers who work together on the same project to work on different files which are modules. Normally they would work on one file where then this can cause some problems with versioning.</div>
<div>
<br /></div>
<div>
This is my first big post so be nice for me and don't shy to correct me or help to improve this post. If something isn't clear I will try help.</div>
Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.com0tag:blogger.com,1999:blog-7324247655850990774.post-83299166012719549912013-06-30T04:59:00.000+02:002013-07-14T06:37:04.004+02:00First post on new blog!<br/>
<h2>
Welcome Everybody</h2>
<div>
This is my first post like you can notice.</div>
<div>
<br /></div>
<div>
Here you will find information about new technologies and examples of usage them. By new technologies I mean:</div>
<div>
<ul>
<li><b>CSS3</b>, </li>
<li><b>HTML5</b>, </li>
<li><b>AngularJS</b>, </li>
<li><b>NodeJS</b>, </li>
<li><b>Websockets </b>etc.<a name='more'></a></li>
</ul>
<div>
General most things related with nowadays Web and Frontend.</div>
<div>
<br />
I like gifs and memes so here is first:</div>
<div>
<br /></div>
<div style="text-align: center;">
How many of you looks that when goes through loop to find something?</div>
<div style="text-align: center;">
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://media.tumblr.com/2d901656c495ba7d1292eb980914b0e6/tumblr_inline_moihx0yGsx1qz4rgp.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="178" src="http://media.tumblr.com/2d901656c495ba7d1292eb980914b0e6/tumblr_inline_moihx0yGsx1qz4rgp.gif" width="320" /></a></div>
</div>
</div>
Łukasz Żakhttp://www.blogger.com/profile/04955359858891779789noreply@blogger.com0