Am.zharfan

I used to think implementing swipe gestures had to be very difficult, but I have recently found myself in a situation where I had to do it and discovered the reality is nowhere near as gloomy as I had imagined.

This article is going to take you, step by step, through the implementation with the least amount of code I could come up with. So, let's jump right into it!

The HTML Structure

We start off with a .container that has a bunch of images inside:

<div class='container'>
  <img src='img1.jpg' alt='image description'/>
  ...
</div>

Basic Styles

We use display: flex to make sure images go alongside each other with no spaces in between. align-items: center middle aligns them vertically. We make both the images and the container take the width of the container's parent (the body in our case).

.container {
  display: flex;
  align-items: center;
  width: 100%;
  
  img {
    min-width: 100%; /* needed so Firefox doesn't make img shrink to fit */
    width: 100%; /* can't take this out either as it breaks Chrome */
  }
}

The fact that both the .container and its child images have the same width makes these images spill out on the right side (as highlighted by the red outline) creating a horizontal scrollbar, but this is precisely what we want:

Given that not all the images have the same dimensions and aspect ratio, we have a bit of white space above and below some of them. So, we're going to trim that by giving the .container an explicit height that should pretty much work for the average aspect ratio of these images and setting overflow-y to hidden:

.container {
  /* same as before */
  overflow-y: hidden;
  height: 50vw;
  max-height: 100vh;
}

The result can be seen below, with all the images trimmed to the same height and no empty spaces anymore:

Alright, but now we have a horizontal scrollbar on the .container itself. Well, that's actually a good thing for the no JavaScript case.

Otherwise, we create a CSS variable --n for the number of images and we use this to make .container wide enough to hold all its image children that still have the same width as its parent (the body in this case):

.container {
  --n: 1;
  width: 100%;
  width: calc(var(--n)*100%);
  
  img {
    min-width: 100%;
    width: 100%;
    width: calc(100%/var(--n));
  }
}

Note that we keep the previous width declarations as fallbacks. The calc() values won't change a thing until we set --n from the JavaScript after getting our .container and the number of child images it holds:

const _C = document.querySelector('.container'), 
      N = _C.children.length;

_C.style.setProperty('--n', N)

Now our .container has expanded to fit all the images inside:

Switching Images

Next, we get rid of the horizontal scrollbar by setting overflow-x: hidden on our container's parent (the body in our case) and we create another CSS variable that holds the index of the currently selected image (--i). We use this to properly position the .container with respect to the viewport via a translation (remember that % values inside translate() functions are relative to the dimensions of the element we have set this transform on):

body { overflow-x: hidden }

.container {
  /* same styles as before */
  transform: translate(calc(var(--i, 0)/var(--n)*-100%));
}

Changing the --i to a different integer value greater or equal to zero, but smaller than --n, brings another image into view, as illustrated by the interactive demo below (where the value of --i is controlled by a range input):

See the Pen by thebabydino (@thebabydino) on CodePen.

Alright, but we don't want to use a slider to do this.

The basic idea is that we're going to detect the direction of the motion between the "touchstart" (or "mousedown") event and the "touchend" (or "mouseup") and then update --i accordingly to move the container such that the next image (if there is one) in the desired direction moves into the viewport.

function lock(e) {};

function move(e) {};

_C.addEventListener('mousedown', lock, false);
_C.addEventListener('touchstart', lock, false);

_C.addEventListener('mouseup', move, false);
_C.addEventListener('touchend', move, false);

Note that this will only work for the mouse if we set pointer-events: none on the images.

.container {
  /* same styles as before */

  img {
    /* same styles as before */
    pointer-events: none;
  }
}

Also, Edge needs to have touch events enabled from about:flags as this option is off by default:

Before we populate the lock() and move() functions, we unify the touch and click cases:

function unify(e) { return e.changedTouches ? e.changedTouches[0] : e };

Locking on "touchstart" (or "mousedown") means getting and storing the x coordinate into an initial coordinate variable x0:

let x0 = null;

function lock(e) { x0 = unify(e).clientX };

In order to see how to move our .container (or if we even do that because we don't want to move further when we have reached the end), we check if we have performed the lock() action, and if we have, we read the current x coordinate, compute the difference between it and x0 and resolve what to do out of its sign and the current index:

let i = 0;

function move(e) {
  if(x0 || x0 === 0) {
    let dx = unify(e).clientX - x0, s = Math.sign(dx);
  
    if((i > 0 || s < 0) && (i < N - 1 || s > 0))
      _C.style.setProperty('--i', i -= s);
	
    x0 = null
  }
};

The result on dragging left/ right can be seen below:

The above is the expected result and the result we get in Chrome for a little bit of drag and Firefox. However, Edge navigates backward and forward when we drag left or right, which is something that Chrome also does on a bit more drag.

In order to override this, we need to add a "touchmove" event listener:

_C.addEventListener('touchmove', e => {e.preventDefault()}, false)

Alright, we now have something functional in all browsers, but it doesn't look like what we're really after... yet!

Smooth Motion

The easiest way to move towards getting what we want is by adding a transition:

.container {
  /* same styles as before */
  transition: transform .5s ease-out;
}

And here it is, a very basic swipe effect in about 25 lines of JavaScript and about 25 lines of CSS:

Sadly, there's an Edge bug that makes any transition to a CSS variable-depending calc() translation fail. Ugh, I guess we have to forget about Edge for now.

Refining the Whole Thing

With all the cool swipe effects out there, what we have so far doesn't quite cut it, so let's see what improvements can be made.

Better Visual Cues While Dragging

First off, nothing happens while we drag, all the action follows the "touchend" (or "mouseup") event. So, while we drag, we have no indication of what's going to happen next. Is there a next image to switch to in the desired direction? Or have we reached the end of the line and nothing will happen?

To take care of that, we tweak the translation amount a bit by adding a CSS variable --tx that's originally 0px:

transform: translate(calc(var(--i, 0)/var(--n)*-100% + var(--tx, 0px)))

We use two more event listeners: one for "touchmove" and another for "mousemove". Note that we were already preventing backward and forward navigation in Chrome using the "touchmove" listener:

function drag(e) { e.preventDefault() };

_C.addEventListener('mousemove', drag, false);
_C.addEventListener('touchmove', drag, false);

Now let's populate the drag() function! If we have performed the lock() action, we read the current x coordinate, compute the difference dx between this coordinate and the initial one x0 and set --tx to this value (which is a pixel value).

function drag(e) {
  e.preventDefault();

  if(x0 || x0 === 0)  
    _C.style.setProperty('--tx', `${Math.round(unify(e).clientX - x0)}px`)
};

We also need to make sure to reset --tx to 0px at the end and remove the transition for the duration of the drag. In order to make this easier, we move the transition declaration on a .smooth class:

.smooth { transition: transform .5s ease-out; }

In the lock() function, we remove this class from the .container (we'll add it again at the end on "touchend" and "mouseup") and also set a locked boolean variable, so we don't have to keep performing the x0 || x0 === 0 check. We then use the locked variable for the checks instead:

let locked = false;

function lock(e) {
  x0 = unify(e).clientX;
  _C.classList.toggle('smooth', !(locked = true))
};

function drag(e) {
  e.preventDefault();
  if(locked) { /* same as before */ }
};

function move(e) {
  if(locked) {
    let dx = unify(e).clientX - x0, s = Math.sign(dx);

    if((i > 0 || s < 0) && (i < N - 1 || s > 0))
    _C.style.setProperty('--i', i -= s);
    _C.style.setProperty('--tx', '0px');
    _C.classList.toggle('smooth', !(locked = false));
    x0 = null
  }
};

The result can be seen below. While we're still dragging, we now have a visual indication of what's going to happen next:

Fix the transition-duration

At this point, we're always using the same transition-duration no matter how much of an image's width we still have to translate after the drag. We can fix that in a pretty straightforward manner by introducing a factor f, which we also set as a CSS variable to help us compute the actual animation duration:

.smooth { transition: transform calc(var(--f, 1)*.5s) ease-out; }

In the JavaScript, we get an image's width (updated on "resize") and compute for what fraction of this we have dragged horizontally:

let w;

function size() { w = window.innerWidth };

function move(e) {
  if(locked) {
    let dx = unify(e).clientX - x0, s = Math.sign(dx), 
        f = +(s*dx/w).toFixed(2);

    if((i > 0 || s < 0) && (i < N - 1 || s > 0)) {
      _C.style.setProperty('--i', i -= s);
      f = 1 - f
    }
		
    _C.style.setProperty('--tx', '0px');
    _C.style.setProperty('--f', f);
    _C.classList.toggle('smooth', !(locked = false));
    x0 = null
  }
};

size();

addEventListener('resize', size, false);

This now gives us a better result.

Go back if insufficient drag

Let's say that we don't want to move on to the next image if we only drag a little bit below a certain threshold. Because now, a 1px difference during the drag means we advance to the next image and that feels a bit unnatural.

To fix this, we set a threshold at let's say 20% of an image's width:

function move(e) {
  if(locked) {
    let dx = unify(e).clientX - x0, s = Math.sign(dx), 
        f = +(s*dx/w).toFixed(2);

    if((i > 0 || s < 0) && (i < N - 1 || s > 0) && f > .2) {
      /* same as before */
    }
		
    /* same as before */
  }
};

The result can be seen below:

Maybe Add a Bounce?

This is something that I'm not sure was a good idea, but I was itching to try anyway: change the timing function so that we introduce a bounce. After a bit of dragging the handles on cubic-bezier.com, I came up with a result that seemed promising:

transition: transform calc(var(--f)*.5s) cubic-bezier(1, 1.59, .61, .74);

How About the JavaScript Way, Then?

We could achieve a better degree of control over more natural-feeling and more complex bounces by taking the JavaScript route for the transition. This would also give us Edge support.

We start by getting rid of the transition and the --tx and --f CSS variables. This reduces our transform to what it was initially:

transform: translate(calc(var(--i, 0)/var(--n)*-100%));

The above code also means --i won't necessarily be an integer anymore. While it remains an integer while we have a single image fully into view, that's not the case anymore while we drag or during the motion after triggering the "touchend" or "mouseup" events.

We then update the JavaScript to replace the code parts where we were updating these CSS variables. First, we take care of the lock() function, where we ditch toggling the .smooth class and of the drag() function, where we replace updating the --tx variable we've ditched with updating --i, which, as mentioned before, doesn't need to be an integer anymore:

function lock(e) {
  x0 = unify(e).clientX;
  locked = true
};

function drag(e) {
  e.preventDefault();
	
  if(locked) {
    let dx = unify(e).clientX - x0, 
      f = +(dx/w).toFixed(2);
		
    _C.style.setProperty('--i', i - f)
  }
};

Before we also update the move() function, we introduce two new variables, ini and fin. These represent the initial value we set --i to at the beginning of the animation and the final value we set the same variable to at the end of the animation. We also create an animation function ani():

let ini, fin;

function ani() {};

function move(e) {
  if(locked) {
    let dx = unify(e).clientX - x0, 
        s = Math.sign(dx), 
        f = +(s*dx/w).toFixed(2);
		
    ini = i - s*f;

    if((i > 0 || s < 0) && (i < N - 1 || s > 0) && f > .2) {
      i -= s;
      f = 1 - f
    }

    fin = i;
    ani();
    x0 = null;
    locked = false;
  }
};

This is not too different from the code we had before. What has changed is that we're not setting any CSS variables in this function anymore but instead set the ini and the fin JavaScript variables and call the animation ani() function.

ini is the initial value we set --i to at the beginning of the animation that the "touchend"/ "mouseup" event triggers. This is given by the current position we have when one of these two events fires.

fin is the final value we set --i to at the end of the same animation. This is always an integer value because we always end with one image fully into sight, so fin and --i are the index of that image. This is the next image in the desired direction if we dragged enough (f > .2) and if there is a next image in the desired direction ((i > 0 || s < 0) && (i < N - 1 || s > 0)). In this case, we also update the JavaScript variable storing the current image index (i) and the relative distance to it (f). Otherwise, it's the same image, so i and f don't need to get updated.

Now, let's move on to the ani() function. We start with a simplified linear version that leaves out a change of direction.

const NF = 30;

let rID = null;

function stopAni() {
  cancelAnimationFrame(rID);
  rID = null
};

function ani(cf = 0) {
  _C.style.setProperty('--i', ini + (fin - ini)*cf/NF);
	
  if(cf === NF) {
    stopAni();
    return
  }
	
  rID = requestAnimationFrame(ani.bind(this, ++cf))
};

The main idea here is that the transition between the initial value ini and the final one fin happens over a total number of frames NF. Every time we call the ani() function, we compute the progress as the ratio between the current frame index cf and the total number of frames NF. This is always a number between 0 and 1 (or you can take it as a percentage, going from 0% to 100%). We then use this progress value to get the current value of --i and set it in the style attribute of our container _C. If we got to the final state (the current frame index cf equals the total number of frames NF, we exit the animation loop). Otherwise, we just increment the current frame index cf and call ani() again.

At this point, we have a working demo with a linear JavaScript transition:

However, this has the problem we initially had in the CSS case: no matter the distance, we have to have to smoothly translate our element over on release ("touchend" / "mouseup") and the duration is always the same because we always animate over the same number of frames NF.

Let's fix that!

In order to do so, we introduce another variable anf where we store the actual number of frames we use and whose value we compute in the move() function, before calling the animation function ani():

function move(e) {
  if(locked) {
    let dx = unify(e).clientX - x0, 
      s = Math.sign(dx), 
      f = +(s*dx/w).toFixed(2);
		
    /* same as before */

    anf = Math.round(f*NF);
    ani();

    /* same as before */
  }
};

We also need to replace NF with anf in the animation function ani():

function ani(cf = 0) {
  _C.style.setProperty('--i', ini + (fin - ini)*cf/anf);
	
  if(cf === anf) { /* same as before */ }
	
  /* same as before */
};

With this, we have fixed the timing issue!

Alright, but a linear timing function isn't too exciting.

We could try the JavaScript equivalents of CSS timing functions such as ease-in, ease-out or ease-in-out and see how they compare. I've already explained in a lot of detail how to get these in the previously linked article, so I'm not going to go through that again and just drop the object with all of them into the code:

const TFN = {
  'linear': function(k) { return k }, 
  'ease-in': function(k, e = 1.675) {
    return Math.pow(k, e)
  }, 
  'ease-out': function(k, e = 1.675) {
    return 1 - Math.pow(1 - k, e)
  }, 
  'ease-in-out': function(k) {
    return .5*(Math.sin((k - .5)*Math.PI) + 1)
  }
};

The k value is the progress, which is the ratio between the current frame index cf and the actual number of frames the transition happens over anf. This means we modify the ani() function a bit if we want to use the ease-out option for example:

function ani(cf = 0) {
  _C.style.setProperty('--i', ini + (fin - ini)*TFN['ease-out'](cf/anf));
	
  /* same as before */
};

We could also make things more interesting by using the kind of bouncing timing function that CSS cannot give us. For example, something like the one illustrated by the demo below (click to trigger a transition):

See the Pen by thebabydino (@thebabydino) on CodePen.

The graphic for this would be somewhat similar to that of the easeOutBounce timing function from easings.net.

The process for getting this kind of timing function is similar to that for getting the JavaScript version of the CSS ease-in-out (again, described in the previously linked article on emulating CSS timing functions with JavaScript).

We start with the cosine function on the [0, 90°] interval (or [0, π/2] in radians) for no bounce, [0, 270°] ([0, 3·π/2]) for 1 bounce, [0, 450°] ([0, 5·π/2]) for 2 bounces and so on... in general it's the [0, (n + ½)·180°] interval ([0, (n + ½)·π]) for n bounces.

See the Pen by thebabydino (@thebabydino) on CodePen.

The input of this cos(k) function is in the [0, 450°] interval, while its output is in the [-1, 1] interval. But what we want is a function whose domain is the [0, 1] interval and whose codomain is also the [0, 1] interval.

We can restrict the codomain to the [0, 1] interval by only taking the absolute value |cos(k)|:

See the Pen by thebabydino (@thebabydino) on CodePen.

While we got the interval we wanted for the codomain, we want the value of this function at 0 to be 0 and its value at the other end of the interval to be 1. Currently, it's the other way around, but we can fix this if we change our function to 1 - |cos(k)|:

See the Pen by thebabydino (@thebabydino) on CodePen.

Now we can move on to restricting the domain from the [0, (n + ½)·180°] interval to the [0, 1] interval. In order to do this, we change our function to be 1 - |cos(k·(n + ½)·180°)|:

See the Pen by thebabydino (@thebabydino) on CodePen.

This gives us both the desired domain and codomain, but we still have some problems.

First of all, all our bounces have the same height, but we want their height to decrease as k increases from 0 to 1. Our fix in this case is to multiply the cosine with 1 - k (or with a power of 1 - k for a non-linear decrease in amplitude). The interactive demo below shows how this amplitude changes for various exponents a and how this influences the function we have so far:

See the Pen by thebabydino (@thebabydino) on CodePen.

Secondly, all the bounces take the same amount of time, even though their amplitudes keep decreasing. The first idea here is to use a power of k inside the cosine function instead of just k. This manages to make things weird as the cosine doesn't hit 0 at equal intervals anymore, meaning we don't always get that f(1) = 1 anymore which is what we'd always need from a timing function we're actually going to use. However, for something like a = 2.75, n = 3 and b = 1.5, we get a result that looks satisfying, so we'll leave it at that, even though it could be tweaked for better control:

This is the function we try out in the JavaScript if we want some bouncing to happen.

const TFN = {
  /* the other function we had before */
  'bounce-out': function(k, n = 3, a = 2.75, b = 1.5) {
    return 1 - Math.pow(1 - k, a)*Math.abs(Math.cos(Math.pow(k, b)*(n + .5)*Math.PI))
  }
};

Hmm, seems a bit too extreme in practice:

Maybe we could make n depend on the amount of translation we still need to perform from the moment of the release. We make it into a variable which we then set in the move() function before calling the animation function ani():

const TFN = {
  /* the other function we had before */
  'bounce-out': function(k, a = 2.75, b = 1.5) {
    return 1 - Math.pow(1 - k, a)*Math.abs(Math.cos(Math.pow(k, b)*(n + .5)*Math.PI))
  }
};

var n;

function move(e) {
  if(locked) {
    let dx = unify(e).clientX - x0, 
      s = Math.sign(dx), 
      f = +(s*dx/w).toFixed(2);
    
    /* same as before */
		
    n = 2 + Math.round(f)
    ani();
    /* same as before */
  }
};

This gives us our final result:

There's definitely still room for improvement, but I don't have a feel for what makes a good animation, so I'll just leave it at that. As it is, this is now functional cross-browser (without have any of the Edge issues that the version using a CSS transition has) and pretty flexible.

The post Simple Swipe With Vanilla JavaScript appeared first on CSS-Tricks.

Sekiranya anda di Twitter, mendambakan akaun yang disahkan (verified account) adalah perkara normal. Platform media sosial ini mempunyai ratusan juta pengguna namun kurang daripada 200000 pengguna memiliki akaun yang disahkan ini. Ia terhad kepada jenama, kelab sukan, selebriti, ahli politik, ahli sukan dan wartawan ternama. Twitter memilih individu yang layak secara rawak sehinggalah sekarang.

Hari ini mereka mengumumkan sistem yang membolehkan pengguna memohon akaun mereka disahkan. Mereka hanya perlu mengisi borang khas di atas talian dan memberikan sebab mengapa mereka layak disahkan. Maklumat yang diperlukan ialah

1. Nombor telefon
2. Alamat emel
3. Bio pendek
4. Gambar profil
5. Gambar header
6. Tarikh lahir  (untuk akaun individu sahaja)
7. Alamat laman web
8. Akaun dibuka untuk dibaca kepada semua.

Dengan menambah jumlah akaun yang disahkan Twitter berharap pengguna akan lebih mudah mencari akaun rasmi sekaligus memastikan kicauan yang dibaca adalah dari saluran rasmi. Sistem memohon ini diaktifkan hari ini di Amerika Syarikat sebelum dibuka kepada seluruh dunia menjelang hujung minggu. Kepada kaki Twitter yang merasakan mereka #Tweetfamous, silalah memohon pengesahan dengan segera.

Laman mendapatkan akaun yang disahkan di Twitter

Kamera 360-darjah telah menjadi salah satu trend akhir-akhir ini, apatah lagi dengan peningkatan penawaran set realiti-maya, serta sokongan yang hadir terbina pada YouTube dan Facebook. LG hari ini turut mengambil pentas utama dalam memperkenalkan kamera 360-darjah mereka tersendiri dinamakan LG 360 Cam.

LG 360 Cam membolehkan pengguna merakamkan gambar 360-darjah dengan mudah, dan ia turut menawarkan sokongan rakaman gambar pada resolusi sehingga 2K – selain pada masa yang sama turut digunakan untuk merakamkan audio 5.1 surround sound menggunakannya.

Dari segi spesifikasi, ia dilengkapi dua kamera 13-megapixel dengan rakaman luas 200-darjah, bateri berkapasiti 1200mAh, dan memori terbina 4GB yang boleh diperluaskan menggunakan kad mikro-SD.

LG turut bekerjasama dengan Google, dimana gambar yang dirakamkan boleh turut dimuat-naik terus ke Google Street View untuk dikongsi bersama dengan yang lain.

Buat masa ini, pihak LG tidak berkongsi mengenai tarikh penawaran dan harga jualannya.

Today we are very happy to introduce you to Land.io – a beautiful landing page UI kit designed in Sketch, yours absolutely free.

Land.io makes designing a component based landing page simple with its intuitive and thoughtfully crafted design, featuring elements such as:

• Fullscreen/modular hero image section
• Filled, stroked and ghost styled buttons
• Intro section with device showcase (device available as free download below)
• Video player
• Pricing table
• Testimonial slider
• News/blog section with featured article
• Sign up/login section
• Profile card
• Social profile card
• Analytics card
• Social sharing buttons
• Light and dark style header
• Light and dark style footer

The possibilities are endless with Land.io. Included in this freebie is a beautifully crafted landing page to help guide your design, fully customizable in Sketch. Take your product landing page, or portfolio to the next level with Land.io.

Preview

Have a look at all of Land.io’s UI kit elements:

View the real pixels preview of the UI Kit.

…and the exclusive landing page design made with Land.io:

View the real pixels preview of the landing page.

Free resources used in the design

• iPad Air Perspective Mockup from Pixeden
• Images from Unsplash & Startup Stock
• Icons by Streamline Icons

Download Land.io for free:

You can download the ZIP file of the template and the design file here:

• Download Land.io (Sketch file 77.4 MB)

The license for Land.io is the Creative Commons Attribution 4.0 International License with the restriction that you can’t redistribute/sell it as-is or create a template out of it and sell it. You are of course free to use it for commercial client work.

We hope you enjoy this freebie and find it useful!

If you’d like to contribute and publish your freebie on Codrops just drop us a line.

Freebie: “Land.io” UI Kit + Landing Page Design (Sketch) was written by Peter Finlan and published on Codrops.

JavaScript is eating the world! With it we can build web apps, desktop apps, mobile apps, games, robots, backends and more. Lots of software supports JS as an extension language for writing addons or manipulating data.

Even though it has its quirks, JavaScript is here to stay, and now is a good time to learn it! This is why we’ve collected for you our 15 favorite free books that will help you learn and sharpen your skills.

Basics

If you are novice programmer, or if you have never dealt with JavaScript before, these books are for you. You might also want to look at Codecademy’s great JavaScript course to get a bit of a hands on experience.

1. JavaScript For Cats

A great introduction to JavaScript. It shows you how to write code in the browser console and teaches you the basic language constructs. An essential book for teaching your cat (or yourself, if a cat is reading this) how to write JavaScript.

2. Learn JavaScript

This book is for beginners only as it covers the very basics of JavaScript. Its format is really simple with a short passage on every subject, followed by an example and an exercise. A nice quick resource for becoming acquainted with the language. After finishing this book, we recommend reading through Mozilla’s reintroduction to JavaScript tutorial.

3. Eloquent JavaScript

This is the second edition of the great book which teaches you how to write precise, elegant and practical code. It starts off with the basics of programming but as you go deeper you’ll get into topics like object-oriented JS and higher-order functions. After you’ve learned all that, the book will show you how to build an HTML game and some example apps with Node.js.

4. JavaScript Garden

A vast collection of examples for the most quirky parts of the language, which are the most likely cause of bugs. This book/guide explains bad practices, issues and other JS gotchas that don’t work as people usually expect them to.

5. JavaScript Allongé

JavaScript Allongé is a book about programming that covers everything from the basics, with values and expressions, to more complex concepts such as types, identity, functions, closures, scopes, and many more subjects up to working with classes and instances. This book is suitable for developers from all skill ranges, as it takes care to explain exactly how things work and what to do when you encounter a problem.

Advanced

Knowing how to code is one thing, but knowing how to design software is another. The books listed in this section will teach you how to write beautiful code.

6. Learning JavaScript Design Patterns

An in depth look at both classical and modern design patterns that help us structure our code in the most optimal way. This book is targeted mostly at professional developers as it looks at advanced JS concepts like closures and prototypal inheritance, that require a certain level of basic prior knowledge and understanding of the language.

7. Understanding ECMAScript 6

The JavaScript community is obsessed over the cool new features that we will see in ES6, the next version of the language. This book studies closely the differences between ECMAScript 5 and 6, the new additions and how to make the best use of them. Understanding ECMAScript 6 is aimed at intermediate-to-advanced JavaScript developers.

8. Human JavaScript

Code is run by machines, by written by humans. This book covers how to write simple and maintainable code. It discusses routing, views and templates, event handling, configuration, testing and more. If you wish to write modular and bug free code with your team, give this one a read.

9. Speaking JavaScript

A book targeted at people who are already familiar with other programming languages and want to learn JavaScript. If you know Java, PHP, C++, Python or any other mainstream language, consider this your quick start guide to the wonderful world of JS.

10. Programming JavaScript Applications

A book for JavaScript programmers with experience. It’s full of practical design patterns and architecture that will help you write more flexible and reusable code. If you have a large JavaScript code base, there is a good chance you’ll find valuable insight in this book.

11. JavaScript Spessore

JavaScript Spessore is a book focused on a technique for developing JavaScript apps using objects and metaobjects. Only experienced JavaScript devs should approach this book. It builds upon the techniques which were covered in this author’s other book, JavaScript Allongé.

Frameworks and libraries

Writing complex applications is difficult, which is why the community has created a growing number of robust frameworks and libraries. Here are a few books that will make developing with frameworks easier.

12. HTML 5 Shoot ‘em Up in an Afternoon

A book that guides readers through the process of making a shoot-em-up game similar to the classic video game 1942 using Phaser. Although this workshop is totally doable with the mighty copy & paste technique, we advise people going into this book to be prepared with some knowledge of JavaScript and basic trigonometry.

 

13. Developing Backbone.js Applications

A great guide for creating JavaScript MVC applications using Backbone.js. Start with the fundamentals, work your way through the exercises, and learn how to build an application that is both cleanly organized and maintainable. This book is targeted at novice to intermediate developers wishing to learn how to better structure their client-side code.

14. Your First Meteor Application

A book on Meteor.js, full of practical examples, suitable for beginners. It won’t make you a full-fledged developer by the final page but you will, however, understand the core concepts that will make your future education in Meteor a lot more approachable. Readers should consider acquiring basic JavaScript and database skills before going into this book or Meteor.

15. jQuery Trickshots

This is our very own jQuery book! It is full of practical advice and techniques about jQuery. You will learn neat tricks, find out about awesome plugins, and discover how to use (and abuse) our favorite library to your advantage. It is remarkable how much jQuery has done to simplify client-side development.

It’s reading time!

We hope that you enjoy our little collection of books. Did we miss your favorite? Tell us in the comment section.

Big Ass Fans ialah syarikat yang terkenal dengan kipas gergasi mereka. Di sekitar Selangor kami sedari banyak masjid diberikan dana untuk memasang kipas dari mereka yang mempunyai diameter 24 kaki. Kami difahamkan harga sebuah kipas gergasi ini mencecah RM 47 000. Ketika tarawikh tahun ini kami memang nampak mengapa pelaburan membeli kipas ini berbaloi. Tidak seperti tahun lalu kami tidak lagi basah ketika solat kerana jumlah makmum yang banyak.

Big Ass Fans kini menghasilkan produk baru dan ianya sebuah kipas siling kecil yang pintar. Kipas yang diberi nama Haiku ini boleh dikawal dengan menggunakan aplikasi telefon pintar. Ianya selebar 1.5 meter dan dilengkapi pengesan kelembapan udara serta suhu bagi mengawal kelajuan bilah kipas secara automatik. Sistem kawalan aplikasi dilakukan dengan menggunakan teknologi WiFi dan dengan aplikasi khas ini juga membolehkan anda menetapkan waktu penggunaan secara automatik. Kami sangat tertarik dengan kipas ini kerana kami sebenarnya sudah bosan dengan masalah alat kawalan jauh kipas kami yang mudah rosak, hilang dan cepat kehabisan bateri. Dengan aplikasi telefon sudah pastinya ketiga-tiga masalah ini dapat diselesaikan secara serentak. Masalah yang ada sekarang ialah harga satu set kipas pintar lengkap dengan LED terbina ini mencecah RM 3000. Pada harga sebegini lebih berbaloi membeli sebuah penyaman udara sahaja!

Sumber Big Ass Fans

 

With its next venture into the gadget world, Nissan wants to get on your face. Ahead of the Tokyo auto show, the automaker has released a David Fincher-esque teaser video for its head-mounted HUD, the 3E. Given how its smartwatch is specifically tailored for race car drivers -- displaying vehicle performance analysis, the driver's vital signs and social media presence -- we don't expect much different from this wearable. In theory, this could be a cheaper way to implement heads up displays that are better at keeping you in tune with your ride than traditional dashboard systems. Worried you won't find this gizmo on the the auto show's floor? We're betting it won't be too far away from the equally futuristic Batmobile knock-off.

Filed under: Transportation, Wearables, Mobile

Comments

Via: CNET

Source: YouTube, Nissan (Japan)

Keindahan Mavericks dikecapi dengan hasil pemodenan California dalam menongkah arus zaman. Indahnya Mavericks turut diserikan pada sistem operasi Apple yang kini ditampilkan dengan perubahan signifikan menjadikan ia salah satu sistem operasi OS X terbaik sehingga hari ini. OS X kini tidak lagi tampil menggunakan nama yang berasaskan harimau seperti sebelum ini dan mula mengambil nama tempat menarik di sekitar California sebagai nama utama versi OS X.

Apple memilih Mavericks kerana indah alam semula jadinya selain ketinggian ombaknya yang menjadi destinasi idaman para peluncur di serata dunia. Sekiranya ini diterjemahkan dalam bahasa misi Apple, syarikat gergasi ini ingin membawa ‘aura’ yang dikecapi Mavericks ke dalam versi OS X mereka. Nama Mavericks dilihat mempunyai nilai tersendiri di dalamnya dan kini hanya terletak pada Apple sahaja yang menentukan sejauh mana OS X 10.9 ini beroperasi. Mampukah OS X 10.9 mencerminkan imej yang dibawa Mavericks ini? Ikuti ulasan penulis di bawah.

Pemasangan

Sama seperti Mountain Lion, penaik tarafan ke Mavericks turut diedarkan melalui App Store. Cuma apa yang membezakannya dengan Mountain Lion, penaik tarafan ke sistem operasi versi baru tidak lagi dikenakan bayaran $19.99 USD seperti sebelum ini dan Mavericks boleh didapati secara percuma tanpa sebarang caj tambahan. Selepas memuat turun fail pemasangan Mavericks sebesar 5.29GB, ia mengambil masa lebih kurang 30 minit untuk proses pemasangan pada Macbook White Early 2009 yang menampilkan spesifikasi Intel Core 2 Duo 2.0GHz dengan muatan memori RAM sebanyak 4GB dan cakera keras SATA 120GB.

Selepas proses pemasangan, pengguna akan dibawa ke paparan desktop yang kelihatan sudah biasa dilihat pada sebelum ini melainkan latar belakang sahaja yang menampilkan perubahan. Seperti namanya, Mavericks membawakan latar belakang desktop berasaskan ombak dengan elemen warna hijau sebagai teras utama.

Aplikasi dan Fungsi

Calendar
Aplikasi Calendar kini tidak lagi hadir dengan paparan kulit dan helaian kertas skeumorphism malah digantikan dengan paparan ringkas serta minimalist seperti antara muka Google Calendar. Kini anda boleh meletakkan nota dan orang yang anda akan ajak ke sesuatu acara terus melalui Week atau Month view. Anda juga boleh membuat klik pada sesuatu acara pada kalendar dan mengemas kini data daripada Facebook Events sekiranya anda telah log masuk akaun Facebook anda pada menu tetapan jaringan sosial dalam OS X Mavericks.

Notes dan Contacts
Aplikasi Notes dan Contacts juga turut menerima perubahan antara muka seperti Calendar yang mana tidak lagi menggunakan antara muka berasakan skeumorphism. Contacts kini kelihatan lebih seperti aplikasi e-mail dengan paparan kolum yang menampilkan senarai nama pada sebelah kiri dan maklumat tentang sesuatu kenalan pada bahagian utama dan tidak lagi menggunakan antara muka berasaskan buku seperti sebelum ini. Notes juga turut menampilkan antara muka minimalist berbanding sebelum ini menggunakan elemen kertas kuning realistik sebagai tunjang utama antara muka. Melalui Notes pada Mavericks, ia hadir dengan dua kolum yang menempatkan senarai nota pada bahagian sidebar dan paparan utama yang membolehkan pengguna menulis padanya.

Dengan menampilkan perubahan antara muka pada dalaman aplikasi, Apple dilihat masih tidak mengubah reka bentuk ikon yang hadir bersama aplikasi-aplikasi ini. Ikon Notes masih lagi menggunakan buku nota kuning realistik apatah lagi ikon Calendar dan Contacts yang masih tidak menerima perubahan sejak bertahun lamanya. Aplikasi-aplikasi yang kini telah menerima perubahan antara muka seharusnya juga menerima perubahan ikon pada aplikasi dan hasilnya, Mavericks masih kelihatan tidak diberikan identiti tersendiri.
Aplikasi teras juga tidak banyak berubah di dalam Mavericks. Aplikasi Mail dan Messages dilihat tidak dihadirkan sebarang perubahan dan pembaharuan malah merupakan aplikasi yang sama seperti yang ada di Mountain Lion. Ini sepatutnya tidak berlaku kepada Mavericks memandangkan Mavericks merupakan sistem operasi ‘major’ di dalam versi OS X.

iBooks
iBooks antara salah satu aplikasi baru yang turut hadir bersama Mavericks. Aplikasi ini sudah sedia hadir pada platform iOS dan nampaknya Apple turut tidak ketinggalan untuk membawanya pada platform desktop. Melalui iBooks, pengguna boleh menjadikan ia sebagai hub untuk buku digital dengan beberapa kelebihan yang tersedia padanya seperti kebolehan sync antara peranti. Walau bagaimanapun, fungsi App Store di dalam iBooks masih lagi dilihat tidak lagi hadir secara sepenuhnya untuk pengguna tempatan. Untuk menjadikan iBooks lebih berguna buat masa ini, fungsi import pada iBooks membolehkan anda membawa masuk file .epub dan .pdf ke dalam iBooks tanpa sebarang masalah.

Anda juga boleh menggunakan trackpad untuk mengawal halaman pada iBooks dan seiring dengan rekaan minimal yang dibawa oleh Apple, iBooks juga tidak lagi membawakan animasi selakan kertas skeumorphism pada iBooks untuk OS X Mavericks. Melalui trackpad juga anda boleh mengawal zoom pada halaman buku selain turut didatangkan bersama beberapa kawalan seperti mengubah warna tema dan kawalan mengubah jenis dan saiz font. Walaupun ia hadir dengan kebolehan yang serupa sama seperti aplikasi iOS, ia masih tidak dapat membawakan keseronokan ketika membaca menggunakan iBooks pada iPad. Secara peribadi, membaca buku elektronik pada paparan komputer dilihat agak tidak efisien malah menjadikan buku yang dibaca suatu alat untuk melelapkan mata.

Maps
Selain aplikasi iBooks yang dilihat satu aplikasi yang kurang berkesan pada Mavericks, aplikasi Maps juga bakal menerima reaksi yang sama. Saya sendiri tidak pasti sama ada aplikasi ini berguna untuk anda memandang aplikasi Apple Maps sudah sedia terkenal dengan kelemahan sistem pemetaan yang kurang tepat pada sebelum ini. Jika dibandingkan dengan maps.google.com, ia masih tidak memberi sebarang kelebihan malah masih sukar untuk membuatkan pengguna beralih menggunakan Apple Maps ini.

Namun begitu, aplikasi Maps yang dibina di dalam Mavericks masih dikira agak baik dari segi pengalaman pengguna. Rekaan antara mukanya juga kemas dan mudah untuk digunakan bagi pengguna biasa. Ia juga turut didatangkan dengan kebolehan sync yang membolehkan anda menghantar senarai tempat dan navigasi ke peranti iOS anda. Cuma saya kira aplikasi Maps di dalam desktop dilihat agak tidak perlu buat masa ini memandangkan maps.google.com dilihat masih menjadi keutamaan sebagai rujukan untuk navigasi dan alat pemetaan.

Reminders dan Games Center
Aplikasi Reminders dan Games Center masih lagi mengekalkan rekabentuk yang sama malah aplikasi yang sama seperti yang terdapat pada Mountain Lion. Ia tidak berubah dari segi kawalan dan antara muka dan masih lagi mengekalkan elemen skeumorphism. Ia menjadikan seolah-olah memberi gambaran Mavericks sebuah suatu sistem operasi yang tidak siap pada pandangan penulis dan sepatutnya Apple mengemaskini aplikasi ini seperti mana yang dilakukan pada aplikasi Notes, Contacts, dan Calendar. Yang lebih menghairankan, aplikasi Reminders telah diberi pembaharuan pada iOS 7, sama seperti Games Center yang telah diberi nafas baru pada ikon serta antara muka dan premis ini meninggalkan tanda tanya ‘kenapa’ dan ‘mengapa’ Mavericks tidak dihadirkan perkara yang sedemikian rupa.

Sync
Bercakap mengenai sync, OS X Mavericks dilihat cukup sempurna menjalankan fungsi ini dan saya tidak mempunyai sebarang masalah mengenainya. Melalui Mavericks, ia membolehkan anda sync beberapa maklumat seperti Contacts dan Calendar melalui iCloud dan sekiranya anda menggunakan pelayan sync seperti Google, proses untuk mengaktifkan fungsi sync ini dilihat sangat mudah dengan hanya membuat log masuk akaun Google anda pada tetapan sync di dalam Mavericks. Sama seperti OS X sebelum ini, ia juga menampilkan protokol sync CardDAV dan CalDAV yang membolehkan anda menambah tetapan sync Contacts dan Calendar sekiranya tetapan sync yang sedia ada tidak menepati pilihan anda.

Safari
Bersama-sama Mavericks, Apple turut menambah baik aplikasi pelayar web Safari. Safari kini dilihat berfungsi dengan lebih pantas, lebih ringan, dan lebih responsif hasil daripada optimasi kelajuan JavaScript dan pengurusan memori yang lebih baik di dalam Mavericks. Sama seperti Google Chrome, setiap laman web yang dibuka melalui tab ataupun dalam window baru kini menjalankan system process yang tersendiri untuk memastikan sesi pelayaran tidak terkandas (crash) apabila salah satu laman web atau plug-in dilihat tidak beberapa responsif.

Melalui Safari, Apple juga turut menambah baik sokongan jaringan sosial bersama-sama dengannya. Sekiranya anda telah mengaktifkan tetapan sosial seperti LinkedIn dan Twitter pada Mavericks, Safari akan membawakan kemaskini pada halaman Shared Links yang terletak pada bahagian sidebar Safari, menempatkan senarai laman web yang telah dikongsi oleh rakan-rakan anda melalui kedua-dua laman sosial tersebut. Integrasi laman sosial ini sangat menarik apabila pengguna tidak mempunyai sebarang idea untuk membuka laman web yang menarik untuk dibuka dan fungsi ini dilihat sangat membantu bagi mengatasi masalah ini.

iCloud Keychain
Satu fungsi yang dikira menarik di dalam Mavericks adalah kehadiran fungsi pengurusan kata laluan, iCloud Keychain. Melaluinya, iCloud Keychain, anda boleh menyimpan kata laluan dan nombor kad kredit pengguna di dalam OS X dan seterusnya menghadirkan maklumat yang berkaitan dengannya pada peranti iOS melalui fungsi sync. Pengguna perlu menyediakan 4-digit PIN keselamatan, nombor telefon dan kemudian iCloud Keychain akan menyenaraikan kata laluan 256-bit AES yang telah di-encrypt secara selamat ketika kali pertama mengaktifkan fungsi ini. Sekiranya anda bersetuju dengan kata laluan yang diberi, iCloud Keychain akan menyimpan kata laluan tersebut secara automatik dan akan sync ke semua peranti iOS anda. iCloud Keychain turut melakukan perkara yang sama sekiranya anda menyimpan maklumat berkaitan dengan kad kredit.

Namun begitu, iCloud Keychain masih tidak lagi menepati standard seperti mana aplikasi pihak ketiga seperti aplikasi 1Password yang membolehkan anda menggunakannya bukan sahaja pada Safari malah boleh digunakan juga pada Google Chrome. Kelemahan iCloud Keychain adalah anda tidak boleh menggunakannya di luar aplikasi dan peranti Apple dan sekiranya anda menggunakan peranti Android, anda perlu memasukkan kata laluan 256-bit AES satu per satu ketika membuat log masuk sesuatu akaun. Ini sangat tidak efisien sekiranya anda menggunakan peranti bukan keluaran Apple dan dari sudut positif, fungsi ini sememangnya dapat memudahkan anda sekiranya anda menggunakan peranti Apple sahaja malah menjimatkan anda daripada menggunakan servis 1Password yang dikenakan caj sebanyak $49.99 USD untuk setiap pembelian aplikasi.

Finder
Fungsi Finder kini mempunyai sistem pengurusan fail seperti Gmail dan Evernote yang mana kini anda boleh meletakkan tag untuk menjadikan fail disusun atur mengikut tag yang anda telah tetapkan. Terdapat enam pilihan warna dan anda juga boleh menggunakan label anda sendiri termasuk teks dan emoji untuk digunakan pada tag.

Finder juga kini menyokong sokongan tab yang berfungsi lebih kurang sama seperti yang digunakan pada pelayar web. Fungsi ini membolehkan anda membuka sesuatu direktori tanpa perlu membuka window baru. Sama seperti Safari, pengguna boleh menggunakan Command-T untuk membuka tab baru atau dengan membuat klik-kanan pada file dan pilih Open in New Tab terus dari Finder.

Notifikasi
Sekiranya penaik-tarafan ke Mavericks hanya untuk penambah baikan sistem notifikasi OS X, ia dilihat masih lagi berbaloi dengan file sebesar 5.29GB untuk proses pemasangan. Pengguna kini boleh berinteraksi dengan notifikasi yang mana anda kini boleh membuat klik pada notifikasi Messages untuk membalas mesej atau memadam e-mel tanpa perlu membuka aplikasi utama.

Notifikasi OS X kini lebih tepat dan lebih pantas, walaupun ia tidak seperti aplikasi Growl yang boleh diubah kawalannya. Sekiranya anda tidak mahu sebarang notifikasi mengganggu anda, Mavericks kini juga didatangkan dengan fungsi Do Not Disturb yang mana membolehkan anda menyahaktifkan sebarang notifikasi seperti e-mel daripada muncul pada paparan Mavericks.

Sokongan Multi-Paparan
Secara peribadi, OS X tidak pernah bagus ketika dijalankan pada multi-paparan sebelum ini. Sekiranya anda menggunakan aplikasi ketika dalam skrin penuh, monitor yang satu lagi akan menjadi tidak berguna sepenuhnya. Dengan Mavericks, sokongan ini dilihat telah ditambah baik yang mana anda boleh menjalankan aplikasi skrin penuh dalam setiap paparan yang sepatutnya fungsi ini perlu berada buat sekian lama dalam OS X.

Setiap menu bar kini telah pun berada pada setiap skrin, dock juga boleh digerakkan kepada paparan lain mengikut kesukaan anda dan fungsi Expose hanya akan memaparkan aplikasi yang berjalan mengikut paparan yang terlibat sahaja. Tambahan lagi, fungsi AirPlay juga kini membolehkan Apple TV menjadi paparan tanpa wayar kedua berbanding sebelum ini yang hanya menjalankan fungsi mirror dengan resolusi terhad.

Prestasi dan Kompatibiliti

Senarai Mac yang menyokong OS X Mavericks
iMac (Pertengahan 2007 dan ke atas)
Macbook (Lewat 2008 Aluminum atau awal 2009 dan ke atas)
Macbook Pro (Pertengahan/Lewat 2007 dan ke atas)
Macbook Air (Lewat 2008 dan ke atas)
Mac mini (Awal 2009 dan ke atas)
Mac Pro (Awal 2008 dan ke atas)
Xserve (Awal 2009)

Agak sukar sebenarnya untuk menentukan kepantasan sesuatu sistem operasi, tapi secara keseluruhannya Mavericks terasa lebih lancar berbanding Mountain Lion. Walaupun Macbook yang digunakan ketika ini merupakan sebuah Macbook lama, ia terasa pantas ketika melakukan tugasan dan amat jarang sekali menerima sebarang “slow down” secara tiba-tiba, tidak seperti Mountain Lion. Membangunkan Macbook daripada mod “sleep” juga agak lancar dan dari segi masa penggunaan bateri juga dilihat ada penambah-baikan berbanding menggunakan Mountain Lion sebelum ini.

Dari segi kompatibiliti, aplikasi yang boleh dijalankan pada Mountain Lion tidak menjadi masalah pada Mavericks malah aplikasi dapat dijalankan dengan lebih responsif lagi. Saya tidak mempunyai sebarang masalah mengenai kompatibiliti aplikasi. Apa yang saya mula risau pada mulanya adalah ketika Apple mengumumkan senarai model komputer Mac yang menyokong pemasangan Mavericks. Saya mula risau adakah Macbook Early 2009 saya akan menyokong Mavericks atau akan bersama Mountain Lion buat selamanya?

Melalui kenyataan rasmi daripada Apple, Mavericks menyokong sebarang peranti Mac yang dapat menjalankan Mountain Lion. Sekiranya Mac anda menggunakan Mountain Lion, tidak menjadi masalah untuk mengemaskini ke Mavericks, malah sangat disyorkan untuk mengemaskininya ke sistem operasi versi baru ini. Sekiranya anda tidak menggunakan Mountain Lion dan menggunakan model peranti Mac yang disenaraikan, anda diperlukan untuk menaik taraf ke OS X Snow Leopard 10.6.8 terlebih dahulu sebelum menaik taraf ke Mavericks.

Konklusi

Mavericks yang sedia sinonim dengan kecantikannya di California tidak mampu diilustrasikan serinya ke dalam versi OS X terbaru ini. OS X Mavericks masih kelihatan lebih kurang sama seperti OS X sebelum ini malah ada sesetengah fungsi tidak diberi sebarang pembaharuan dari segi fungsi baik dari segi antaramuka. Ia kelihatan tiada sebarang perubahan yang besar dilakukan pada antaramuka Mavericks dan cuma ada sedikit penambah-baikan pada aplikasi asas yang kini tampil dengan antaramuka minimalis tanpa elemen skeumorphism.

Namun begitu, prestasi dan perkara di belakang tabir pada Mavericks tidak seharusnya dipandang enteng kerana ia didatangkan dengan Timer Coalescing yang dapat menjadikan peranti Mac beroperasi lebih pantas berbanding sebelum ini. Beberapa aplikasi iOS seperti iBooks dan Maps kini turut didatangkan bersama Mavericks yang mungkin dapat membantu anda sekiranya iPad atau iPhone anda kehabisan bateri. Dari segi penjimatan pula Mavericks turut menampilkan pengurusan memori yang lebih baik dan ia dilihat dapat membantu untuk membawa jangka penggunaan bateri yang lebih lama.

Bagi pengguna yang layak menggunakan Mavericks, anda sangat disyorkan menaik taraf ke sistem operasi ini. Tiada sebarang sebab kenapa anda tidak menaik taraf ke Mavericks kerana ia ditawarkan secara percuma dan Mavericks akan menambahkan lagi kelajuan selain didatangkan dengan pembaharuan dan penambahbaikan pada keseluruhan sistem operasi.

Bersama-sama dengan kemaskini Android 4.4 KitKat yang telah diperkenalkan pada minggu lepas, pihak Google turut sama telah mengemaskini halaman rasmi Android mereka dan menambah beberapa gambar berbentuk promosi yang baru.

Menariknya, salah satu gambar yang hadir memfokuskan kepada aplikasi memperlihatkan sebuah tablet baru yang tidak pernah diumumkan oleh Google sebelum ini.

Secara kasarnya, ia membawakan Android 4.4 KitKat, serta bahagian kerangka tepi yang amat nipis berbanding kebanyakkan tablet hari ini. Dari segi saiz, ia dianggarkan sekitar 8-inci.

Ia mungkin juga sekadar sebuah tablet untuk tujuan gambaran sahaja. Tetapi, Google sebelum ini telah terlebih dahulu memperlihatkan telefon pintar Nexus pada video rasmi pengumuman KitKat, dan kini ramai membuat spekulasi yang mana berkemungkinan ini adalah salah satu tablet Nexus yang turut akan diumumkan Google tidak lama lagi.

Jadi, apa kata anda?

Microsoft's plan to supercharge Xbox as an entertainment brand means that, no matter which ecosystem you live in, you'll have access to some of the company's first-party titles. In the same way that Kinectimals came to Android and iOS, today's free-to-play launch of Wordament sees another proprietary feature opening up: Xbox Live Achievements. Anyone with at least an Android 4.0 handset and a few friends should now be able to add up to 50G to their Gamerscore. Meanwhile, Windows Phone users should be happy to see that their version of the app has been re-written for WP8, banishing those odd letterboxing issues forever.

Filed under: Cellphones, Software, Mobile, Microsoft, Google

Comments

Via: Android Central, The Verge

Source: Wordament, Google Play

Though we haven't received any ChatOn messages ourselves lately, Samsung says that its messaging service has caught on with some. In fact, it's just chalked up a "global subscriber base" of 100 million folks in around two years, thanks to its availability on diverse platforms like iOS, Android, Bada, the web and Windows Phone. Samsung singled out China and India as key markets for the service and touted features like drag-and-drop media sharing and the ability to hand-write messages with an S Pen-equipped device. Though the numbers sound good, we're not sure if the Korean company is counting active users or just those who registered out of curiosity because it came pre-installed on their phones. By contrast, WhatsApp counts 300 million subscribers who use the service monthly. We've reached out to Samsung to confirm and maybe we'll get around to registering for the service ourselves, some day.

Filed under: Internet, Software, Samsung

Comments

Source: Samsung

Seperti diwar-warkan sebelum ini, Samsung akhirnya melancarkan Galaxy Gear dan Galaxy Note III dalam sidang akhbar mereka pada 4 September 2013. Galaxy Gear merupakan jam tangan pintar buatan Samsung dikeluarkan sebagai aksesori untuk pengguna telefon pintar khususnya rangkaian telefon pintar berjenama Galaxy dibawah keluaran Samsung. Galaxy Gear dibina berasaskan sistem operasi Android, memiliki skrin sesentuh Super AMOLED bersaiz 1.63 inci...

The post Samsung Melancarkan Galaxy Gear appeared first on iAwani.

Pada aplikasi YouTube untuk Android dan juga iOS yang terbaru, pihak Google dilihat menggantikan gambar ikon dengan versi baru. Terkini, pada laman Twitter dan juga Facebook rasmi YouTube, ia kelihatan mereka menggantikannya dengan gambar logo baru.

Melalui rekabentuk baru ini, ia memperlihatkan penggunaan rekabentuk logo yang menjadi trend akhir-akhir ini, selain selari dengan penggunaan logo pihak Google pada beberapa perkhidmatan mereka yang lain.

Seperti biasa, ia tidak diketahui sama ada ia akan menjadi logo baru YouTube dan digunakan pada halaman rasminya ataupun tidak.

Jadi, apa kata anda berkenaan logo ini berbanding versi lama?

There are plenty of Chinese quad-core, 1080 phones on the market now, but each one costs considerably more for international buyers than they do for Chinese customers, until today! Dinobulk are offering Gizchina readers their...

Visit Gizchina.com for full article!