Tag: javascript

Chrome DevTools – Quickly use currently selected element in console

kyriakos

I am sure like me, there’s been many times when using Chrome Developer Tools you selected an DOM element in the Elements panel and wished you could easily get a reference for it so you can use it in the console. It turns out it was possible and super-easy all along by using the $0 magic variable in Console. $0 automatically holds a reference to the currently selected element in the Elements panel. As a bonus the using $_ instead you get access to the last evaluated expression whether its an object or a scalar. Here’s how it looks:

$0 and $_ in Chrome Developer Tools

$0 and $_ in Chrome Developer Tools

 

 

Source: DevTips Daily

Typescript compiler got a re-write and is now 5 times faster

kyriakos

According to Typescript’s blog on MSDN, they’ve rewritten its compiler from scratch and surprisingly also moved the compiler’s repository to GitHub. The new version which from a feature point of view identical to the previous version, generates Javascript code 5 times faster. For those who don’t know what Typescript is, its an attempt by Microsoft to make Javascript better, especially for large scale projects. Technically you can write pure Javascript and the compiler will just let is pass through but it will enforce variable types and declarations. So if you are already familiar with Javascript, it just ads a safety net layer for data types and some utility syntax for writing human-readable object oriented Javascript.

I still haven’t tested the new version but I can assure you the original one is noticeably slow. Running the compiler automatically through PHPStorm I found myself many times saving the .ts file then switching to the browser to test only to realize that compilation is still not done and had to switch back to confirm its done before re-refreshing the page. Hopefully this is now a thing of the past.

The announcement can be found here.

Recent Good CSS / Javascript Videos (July 2014)

kyriakos

More JSConf 2014 US edition were posted online a few hours ago. I didn’t have the time to watch them all yet but I’ll keep this post updated as I watch them.

 

Mark DiMarco: User Interface Algorithms

 

A very good talk about two algorithms and how they can be used in Web UI (he also makes some pretty funny Game of Thrones jokes). The talk focuses on two cases, one is how to increase the hit-state of elements on the page using Voronoi (quite complicated algorithm, but thankfully its already implemented in Javascript in D3, find out about it here). The other case is about menus with sub-menus, explains how to solve the problem we all faced in the past, having to move the mouse precisely horizontally on the popup sub-menu in order for the sub-menu to remain open. The solution is not that complicated and according to the video is used by Amazon’s mega menu. You can find a good explanation by Ben Kamens here.

Angelina Fabbro: CSS In Your Pocket – Mobile CSS Tips From The Trenches

 

Skip the first 4-5 (mostly introductory) minutes to get to the juicy stuff. Some good points about mobile web performance and compatibility are raised but the most interesting parts are about the cutting edge updates in Firefox DevTools including the CSS Coverage Report (which works for multiple pages showing you what entries in your stylesheets are unused). There is more information about it on https://developer.mozilla.org/en-US/docs/Tools/CSS_Coverage”>MDN here. Currently only works on Nightly builds of Firefox but hopefully will make it to Aurora soon (the channel I use).

 

G C Marty: Play DVDs in JavaScript for the sake of interoperability

 

G C Marty explains his quest to play his huge collection of DVDs on his mobile phone directly in the browser. His aim was to replicate the full DVD experience including menus, chapters, multiple angles, audio tracks and subtitles. He tried several methods, including using a proxy server to decode the video in real time and send it to the mobile browser via WebRTC which failed with sync issues and high hardware requirements and pre-converting DVDs into WebM using a Raspberry Pi running nginx to do the streaming. He released his project in open source on github.

Optical Character Recognition (OCR) in Javascript in your browser

kyriakos

Like everything else becoming available in the browser, now there’s OCR for Javascript. The demo which you can try our here captures documents from the user’s webcam, then applies image processing to convert the image to machine readable black and white bitmap and then uses the Javascript implementation of Orcad (an GNU licensed open source OCR program), called Orcad.js to convert the processed image into text.

Even though I called it implementation before, Orcad.js was created using Emscripten, a trans-compiler which turns C or C++ code into web browser compatible Javascript (not the most accurate description of the process but that’s the general idea). Looks like an awesome tool, which I hope to have the time to play with some day. You can check it out here.

If you missed the link, demo here. Read/download Orcad.js here. The image processing is applied using glfx.js which used WebGL to accelerate image processing on the client.

There’s also a video demonstration:

x86 Emulator in your Browser

kyriakos

For me, this one-man project is like magic. A fully-blown x86 emulator which runs a real-world BIOS (SeaBIOS). This means it can run regular x86 16bit OS’s as long as the browser allows it enough resources. It goes a long way to show what’s possible in the browser these days (well to be honest, this could have been done 3-4 years ago if Javascript was taken as seriously as it is today). It obviously runs slower than native performance but it is quite usable, especially with command line interface. There is no real practical use at the moment but maybe with further development something similar can be used to emulate x86 on ARM based devices in the future.

Take a look for yourself at http://copy.sh/v24/. There’s 4 OS images you can load directly from the page, including FreeBSD, Linux, FreeDOS and KolibriOS which is GUI based. You can also load your own ISO images to boot in the emulator. KolibriOS works fine so does FreeDOS, which even has some playable DOS games like Tetris and Snake which brought back memories of my MS-DOS days.

For experimental purposes only I also downloaded a Windows 3.1 ISO CD image off piratebay and tried to run it but it didn’t really work (I think the problem was with the image not being properly bootable rather than the emulator – after all Windows prior XP was first booting MS-DOS and then running Windows). I also attempted to load TinyCore Linux but I didn’t get far with that one either. TinyCore’s ISO is just under 15MB with GUI included. It took around 10 minutes to boot on an i7 laptop but never made it into the GUI.

Anyway if you don’t have the time to fiddle around you can view the following 5 min video I made running the emulator in Chrome: