Author Archives: Adam Lusted
Chrome Developer Tools CSS Animation Editor
Slow down CSS animations in Chrome dev tools
Slow down CSS animations in Chrome dev tools #css #html #javascript pic.twitter.com/AVJ1rc8vqB
— Adam (@etoxin) January 7, 2015
Desktop Keyboard Input for Android Chrome via Chrome Developer Tools(OSX)
As a web developer or a QA Tester there will come a time when you need to run a web form on mobile multiple times. This becomes quite laborious as mobile keyboards are not the most efficient bits of software.
Below i’ll show you the steps to use your desktop keyboard via Chrome Developer Tools on your mobile/tablet while also having full developer access to the webpage on the Android device.
Requirements:
- A usb cable
- Chrome 32 or later
- An android device with Android 4.0+
Note: A small note. Remote debugging requires your desktop Version of Chrome to be a newer version Android Chrome. To resolve this just ensure you run Chrome Canary.
Step 1. Enable remote debugging on your Android Device.
On your Android phone goto: Settings > Developer Options and Tap the “Build Number” Seven times. Then check the “USB debugging” option in the menu (Developer Options).
(An in depth guide from Google)
Step 2. Connect your Android Device to your computer via USB cable.
Step 3. Open “Inspect devices” in Chrome Canary.
Step 3. Open Chrome on your Android device
A notification will appear on your Android device asking to “Allow USB debugging?” Tap OK. If this is your Developer machine check “Always allow from this computer”
Step 4. Inspect a website.
In the below image you will see that I am opening a web page on the android device without needing to use the Android Keyboard.
You can simply enter your ultra long developer url in here. Some developer urls are by no means nice urls so this is a extremely handy feature.
After that Click “Inspect”
Tip: If you have a single server that you hit quite a bit maybe you should place a NFC tag on your screen so you can open the url on any number of NFC enabled android devices.
Step 5. hit the Screencast Icon.
Once in Developer tools, click the screencast Icon. This will mirror the Android website to your desktop. Kinda like Remote Desktop. The transparent sections are the Android user interface.
You will now be able to fill in forms with your desktop keyboard hopefully saving you many hours in development.
The Back, Forward and Refresh icons are now available on your desktop as well as a url box. This will hopefully allow you to perform hands free mobile development.
This will also allow you to test situations where the devices keyboard will cover half your web page, something that cannot be emulated right now with desktop chrome.
Tip: Instead of selling your old phones or giving them away, create your own personal device testing station. You can build your own or buy one. I use the Vanamco Device Lab which is pretty neat. I bought an 8 port USB dongle and connect that to my computer.
I also have a few NFC tags for websites I am currently developing.
Google Chrome gets element change animations in Dev tools.
Dev Tweets
Isomorphic JavaScript apps are #JavaScript applications that can run both client-side and server-side. http://t.co/HXqF55xvfo #isomorphic
— 9heroes (@9heroesStartups) December 20, 2014
Firefox Developer Edition – Event Browsing
Events in Mozilla Firefox Developer Edition are shown next to the elements they are listening to with a “ev” tag. You can browse the various events and see the code that they will run. You can also setup breakpoints and see what events are bubbling.
I’m pretty sure this is also in the standard Firefox.
JavaScript Application Architecture On The Road To 2015 – Addy Osmani
A great in depth article on the future of JavaScript Application Architecture by Addy Osmani.
https://medium.com/@addyosmani/javascript-application-architecture-on-the-road-to-2015-d8125811101b
Mozilla is dropping HTML Imports from Firefox.
mozilla have revealed in a blog post (http://hacks.mozilla.org/2014/12/mozilla-and-web-components/) that it “will not ship an implementation of HTML Imports”. They then go on to say that polyfills should provide that functionality.
Wintersmith.io – Static site generator built with node.js.
Static site generators seem to be all the rage at the moment. Wintersmith.io is built on top of node.js. It’s flexible too. Allowing various templating engines like jade, liquid, handlebars and many others.
It uses markdown for its content. It also allows you to bundle JavaScript with Browserify and compile CSS with any popular CSS pre compiler.
Quick-start
First install wintersmith using npm:
$ npm install wintersmith -g
This will install wintersmith globally on your system so that you can access the wintersmith
command from anywhere. Once that is complete run:
$ wintersmith new <path>
Where <path>
is the location you want the site to be generated. This creates a skeleton site with a basic set of templates and some articles, while not strictly needed it’s a good starting point.
Now enter the directory and start the preview server:
$ cd <path> $ wintersmith preview
At this point you are ready to start customizing your site. Point your browser tohttp://localhost:8080
and start editing templates and articles.
When done run:
$ wintersmith build
This generates your site and places it in the build/
directory – all ready to be copied to your web server!
Boom!!!
Chat connected to Github Repositories
gitter.im is a chat room that uses github repositories as rooms. Below is the Marionette room. A great communication tool for popular open source repositories.
Rollin’ On – Eleanor Dunlop
Dev Tweets
The ultimate popularity proof of #JavaScript pic.twitter.com/nY9pin0TQt
— Benjamin Winterberg (@benontherun) November 26, 2014
Orange Goblin – A Eulogy For The Damned
BINKBEATS: Windowlicker by Aphex Twin
Dev Tweets
Programming would be a little bit more fun if whenever you broke a production build, gold rings would fly out of your machine like in Sonic.
— I Am Devloper (@iamdevloper) September 4, 2014