Greenlight, QbQbQb
I am in top 100 games on GREENLIGHT
Could you vote or reblog it - so I can get it to Steam - earn like thousand million dollars and finally start a small studio? Love.
tumblr dot com

Discoholic 🪩
AnasAbdin

Kiana Khansmith
$LAYYYTER

祝日 / Permanent Vacation

No title available
occasionally subtle
🪼

roma★
"I'm Dorothy Gale from Kansas"

Janaina Medeiros
Stranger Things
almost home

JVL
cherry valley forever
No title available
2025 on Tumblr: Trends That Defined the Year

@theartofmadeline
Peter Solarz

seen from Malaysia

seen from Russia
seen from United States
seen from Australia
seen from United States
seen from Lebanon
seen from Italy
seen from United States
seen from United States

seen from United States
seen from Greece
seen from United Arab Emirates

seen from Germany
seen from South Korea
seen from United States

seen from France
seen from United States

seen from United States
seen from Malaysia
seen from Lebanon
@ngryman-blog
Greenlight, QbQbQb
I am in top 100 games on GREENLIGHT
Could you vote or reblog it - so I can get it to Steam - earn like thousand million dollars and finally start a small studio? Love.
lol of LoL
Simulate mouse / touch events with jQuery in PhantomJS and the browser
For my little project jQuery Finger, I wanted to be able to continuously test it while coding. This can be easily achieved using the magic combo of Grunt, Mocha (with Chai) and PhantomJS.
I just had to launch grunt watch and listen to the evil bip telling me "test have failed, you suck nooby noob!".
This is what I wanted, but things became more complicated when I wanted to run tests with more advanced user inputs such as tap, double tap, long tap, drag and swipe, across multiple elements.
I have tried to use MouseEvents and TouchEvent to simulate it, but I couldn't make it work properly with PhantomJS. If somebody has successfully achieved this, I'm interested in!
The code of this article is hosted here. Use it, fork it!
jQuery is your best friend
For jQuery Finger, I must use jQuery as a direct dependency. That's convenient I guess because jQuery has the ability to trigger events, and particulary mouse/touch events. It adds an abstraction above native events which was very handy for me.
The caveat of using jQuery to trigger events is that you must register jQuery events specifically. You can't trigger a jQuery click and hope catching it if you registered your listener with addEventListener. jQuery simply triggers an event using its own internal sugar. If this is a blocker for you, this article might still be interesting because the global idea remains the same.
Manage your virtual pointer
So how can we try to simulate pointer events ?
We can use the magic of the document.elementFromPoint function. It tells which DOM element lives at the given position. AFAIK it is supported since quite a long time.
All we have to do, is to keep track of coordinates. When we want to trigger an event, we retreive the DOM element, and call jQuery.fn.trigger on it. Simple as pie.
Here is the first draft of our virtual pointer:
With this first version, we can easily:
change the position of the pointer with x and y.
simulate a click.
simulate a mousedown mouseup / touchstart touchend by calling tap, assuming we register events with VirtualPointer.START_EVENT or VirtualPointer.STOP_EVENT.
A classic jQuery event is built on top of a native event that you can access with the originalEvent property. Some handy properties are directly copied to the jQuery event object.
pageX and pageY are one of these. They give the pointer absolute coordinates when the event is fired. jQuery tries to unify these properties accross every browser. But, on some mobile browsers, such as Mobile Safari, pageX and pageY stay to 0. The only trustable source for coordinates resides in the event.originalEvent.touches[0] properties.
The problem is when you manually trigger a jQuery event, it is created from scratch. So pageX, pageY and originalEvent are missing. We have to create them manually and forward our virtual pointer's coordinates.
Let's add press and doubletap event
press event is an alias for a long tap event.
Here is the updated version of our initial virtual pointer:
The code is pretty self explanatory.
I will just explain the security multiplier. setTimeout is a cool bro, but he is not very punctual. So, if your code really depends on a time threshold, you should never put the setTimeout value to that threshold, or near it. By applying a +0.5/-0.5 security multiplier, you are always sure that you will be either on one or the other side.
Now let's add some motion
To handle motion, we will have to pretend that the cursor is ... moving, woot!
We will need destination coordinates and a duration. Our job will be to interpolate coordinates between current and destination, and call the mousemove/touchmove event at a given interval.
In real life, motion events may be triggered at a very, perhaps sometimes too high rate (i.e. *Chrome's rate is around every 2ms). We won't be able to be so precise, but who cares? We will just use our good old friend setTimeout with a 0 timeout to simulate AMAP fake moves.
Here is the update:
Now, we can call move to simulate motion, and tapStart, move, tapEnd sequence to simulate some kind of drag. Great!
Let's finish him!
With those three utility functions, we are now able to simulate gestures.
Right of the Batman, here is our final code:
That's it! This is a basic implementation of our virtual pointer. It should allow us to simulate mouse/touch events in the browser and in PhantomJS.
As a side note, PhantomJS is detected as a touch device because window.ontouchstart is defined. This appears to be something common with some WebKit forks.
Bonus: prevent user interaction
During the simulation we don't want any real event messing around with our tests. Well, keep your hand away from your mouse, that's it!
No, you can't? Ok...
When you trigger an event with jQuery, it comes with an additional property isTrigger. So, basically, in your event handlers you can tell if this is a fake or a real event. In our case, we are only interested in fake events, not real ones.
The only satisfying solution I found is proxying each jQuery event handlers and skipping real ones.
We could just prepend our event listeners with something like this:
But do we? Not really... Let's use jQuery.event.special in our test environment to proxy every jQuery event handler dynamically:
Just be sure you execute this code before running your tests and registering your events. You will then be able to harlem shake your mouse / fingers without any side effect.
Finally
Everything in this article is included in the Github version, plus some additional bonuses:
an example of Mocha integration in the very simple test suite.
the possibility to specify a custom scope for callbacks.
the possibility to auto reset coordinates on each tapStart.
Also, you can take a look at jQuery Finger :-)
Several months ago I started a project named Rework, a very fast, simple, flexible, and modular CSS preprocessor. The biggest and most obvious question I get is how this tool compares to something like Stylus, LESS, or Sass, and why would you want to use it.
The simple answer is that...
Imgur is used to share photos with social networks and online communities, and has the funniest pictures from all over the Internet.
System V with forever for your node.js application
The alternative to its *Upstart* [brother](http://ngryman.tumblr.com/post/32830060834/upstart-with-forever-for-your-nodejs-application) on a **Debian** system with the same use case. Here it is: https://gist.github.com/3834896 To enable your boot script: - Remove the `.sh` extension from the *gist*. - Move it into the `/etc/init.d` directory. - Make it executable by running `sudo chmod 755 /etc/init.d/service`. - Register the script for (re)boot by running `update-rc.d service defaults`. ## See also - [Upstart with forever for your node.js application](http://ngryman.tumblr.com/post/32830060834/upstart-with-forever-for-your-nodejs-application) - [Making scripts run at boot time with Debian](http://www.debian-administration.org/articles/28) - [How to LSBize an Init Script](http://wiki.debian.org/LSBInitScripts)
Upstart with forever for your node.js application
Servers reboot while you are sleeping, it happens ... So you already are using the great *[forever](https://github.com/nodejitsu/forever)* tool. No? take a look [here](http://blog.nodejitsu.com/keep-a-nodejs-server-up-with-forever)!. But something is missing: **automatic startup of your application when the machine (re)boots**. ## The use case Multiple options are available to you, and quite a lot of resources on the subject too. But I really want to focus on a tricky use case (mine): - You want to use **forever** to **daemonize**, **manage** and **monitor** your application. - You want something simple to **start automatically** your application when the server (re)boots. - Your application is located in the **home directory** of a **dedicated user**. - It **does not** run on the port **80**. - You **don't want** to start it as **super user**. ## Upstart Basically you need to set up your own Linux service. I will only focus on *upstart* which is a *"replacement for the venerable System-V init"*. As a vast majority of Linux services, you can **start**, **stop** and **restart** your application. These features are already provided by *forever*. We will only provide a way to **start automatically** your application. The newly crafted service will only have that purpose. To manage your application, use *forever* as usual. We could probably **wrap** *forever* behaviour in the service, but this really not the aim of this article. ## The upstart script Right of the bat, here is the script:
Worst movie death scene ever (par plantyzombie) thx @SarahPwn
Steve Jobs: Resurrection (iPhone 5 Parody) (by MondoMedia)
acrobatic ninja action heros
To blog or not to blog
From now on, and I take the universe as a witness (probably my unique reader for now), I will **also** blog about my developer stuff here. This is kind of a dilemna for a while now. I love gathering a lot of Internet stupidy in my **Tumblr** but I also want to write geeky stuff. As I'm a going into the adult wild, I need to share less stupidity and more awesomeness. In what proportions? I don't know yet... Maintaining two different blogs would be too much pain, so let's mix stupidity with awesomeness! If I feel that I really need to get serious stuff here, I will open a dedicated blog. ## Developer and Tumblr Ok, *Tumblr* is probably not the best blogging platform for a web nerd. But I'm used to it now and with some adjustments it can do the job for a while. ### Post editing To write my future articles, I won't use the basic *WYSWYG* of *Tumblr* as it is too ... basic :) As a big [github](http://github.com) user and fan, I like markdown, Yay, *Tumblr* supports it! Let's use it in a decent editor. After searching and testing some online ones, I think [dillinger](http://dillinger.io) is the one for me. ### Code formatting To put some code with highlighting, let's make the cloud work for me. I will simply use [gist](http://gist.github.com) as it can be easily integrated and provide a way to view, fork or download the code for the reader. If I want to put more complex code with an associated demo, I will use: - [jsfiddle](http://jsfiddle.net) for general purpose code. - [codepen](http://codepen.io) for more artistic code. - [dabblet](http://dabblet.com) for CSS focused code. That's it for now :) `ngryman.out();`
GIF Sound the Video (by JamaicanBaconify)
Your options according to Yoda
Internet addict?