Just a quick link back to a list DevDmBootstrap3 was featured on.

 

Leave a Comment

Jump to a section: Code Editor | Filesystem | FTP | Remote Desktop | SSH | Web Server | Images | Web Browsers
Screenshot_2014-05-30-20-58-54

Android does not have the App support to be 100% effective as a web developer. When I got my Transformer Pad Infinity I had this romantic idea that I was going to go full Android for everything!

“Kiss off Windows. My little Tablet and I are going to show the world it can be done!”

I tried and I got really close but not ALL the way there. The biggest bottle neck for using Android as web development environment is moving around the system quickly, working with funky file type extensions (it doesn’t quite know what to do with a *.sql file for example) and Photoshop.

All that being said- In a pinch and even for an overnight trip I’ll take the TF700t. It is totally capable of FTP, SSH, Skype (of course), Email, Remote Desktop, a local web server even and many of the other required tools for doing a web developers’ job. Let’s go through the apps I use.

Code Editor

droideditpro

DroidEdit Pro

DroidEdit Pro – I tried a few other Code Editors before I settled on DroidEdit. New stuff pops up all the time but I always come back to this one. The interface is very intuitive to what you would be used to on a PC so the transition was easy. Here is the list of features from the Playstore.

DroidEdit is a text and source code editor (similar to Notepad++ or gedit) for android tablets and phones with the following features:

  • Syntax Highlighting for several languages (C, C++, C#, Java, HTML, CSS, Javascript, Python, Ruby, Lua, LaTeX, SQL, …)
  • Several color themes
  • Infinite undo & redo
  • Search & replace
  • Auto & block indentation
  • Keep opened files and changes between sessions
  • Open files directly from dropbox or a file manager
  • Character encoding support
  • Keyboard shortcuts (List below)
  • Share documents with other services (dropbox, email, …)
  • Preview HTML files in browser
  • Bracket matching
  • Go to line
  • Run Scripts in SL4A directly
  • Configurable Shortcuts

Pro version only features:

  • SFTP/FTP support
  • Dropbox support
  • Custom themes
  • Run external commands through SSH
  • Root mode

Filesystem

filemanagerhd

File Manager HD (Explorer)

File Manager HD is what I use on all of my Android devices for moving around the Filesystem for a few simple reasons:

  1. File Manager HD has the best “Network” capabilities for me to move files around between the Tablet and my PC.
  2. The ability to zip/unzip archives. This is a big one for web developers.
  3. Favorite your file paths so they are easily accessible. Navigating around the whole Android directory tree to get to your “Work Files” folder can be a big pain in the butt when you have to do it EVERY single time you need to open something.
  4. Optimized for tablets. A pain point for using Apps to do a PCs job is finding an App with killer features that doesn’t rotate to Landscape because it was designed solely for a phone. Luckily you don’t encounter this as much anymore; a year ago it was still a big issue.
  5. Multiple File selection for copy/paste/delete.

FTP

FtpCafe FTP Client

FtpCafe FTP Client

FtpCafe FTP Client – Again there are a bunch of options on the Playstore for FTP with Android. It really all comes down personal preference about what you are looking for and what jives with your workflow. I like FtpCafe because it gives you the ability to save your connections like most PC clients do. I also just really like the way the interface works. It doesn’t feel nearly as clunky as the other solutions out there when uploading and downloading files. It is a simple app with this simple list of features:

File transfers using:

  • FTP
  • FTPS (Implicit and Explicit FTP over SSL).
  • SFTP (FTP over SSH). Login with password or RSA/DSA OpenSSL (Traditional SSLeay PEM) or ConnectBot (PKCS#8 PEM) private key.
  • multiple file and directory transfers
  • resume transfers support
  • clean and simple UI

Remote Desktop

 

2X Remote Desktop Client

2X Remote Desktop Client

2X Remote Desktop Client – I use a remote Windows terminal on a VPS to do a lot of my work for my stateside employer so having a remote desktop app is mission critical for me. There is a ton of customization options with 2X.  It is full screen and also has a virtual mouse that works with the mouse pad on the TF700t (Bonus Awesome!).

Seamless and secure remote desktop and application access from your Android device! Whenever you want, wherever you are!

Stay connected to your home or office PC with the 2X RDP / Remote Desktop Client for Android. The 2X Client allows you to simply, and securely, connect via Remote Desktop Protocol (RDP) to your remote Windows desktop and applications whenever you want, wherever you are.

Additionally, you can connect with 2X SecureRemoteDesktop which provides on-demand, proactive protection against both known and unknown attacks through remote desktop connections, ultimately securing access to your home Windows desktop or laptop.

You can also experience the full benefits of published remote Windows desktops and applications by connecting to 2X ApplicationServer XG. This way, the 2X Client seamlessly runs published Windows desktops and applications from Windows Terminal Server and all the major VDI Hypervisors including Microsoft Hyper-V, VMware or Citrix Xen.
Features
– Support for Android 1.6 onwards
– Unlimited connections
– Unique mouse with right click
– Full keyboard
– SSL security
– Full screen experience
– Minimal bandwidth usage
– Clipboard redirection
– Support for external Mouse & Keyboard
– Supports 2 & 3 finger gestures
– Support NLA

If you have any support related questions, please visit the product forum: http://www.2x.com/forums/

SSH

connectbotConnectBot – It is old and getting dated but I still love it. Just like FTPcafe you can save your connections. It also keeps your sessions alive in the background so you can do other things and come back to it.  SSH is a pretty simple concept and you are free to use whatever you want here. You don’t really even need to use an app for SSH. You can usually just use the default terminal in Android.

Web Server

Bit Web Server (Full)

Bit Web Server (Full)

Bit Web Server (Full) – This effectively turns your Android device into a full LAMP stacked server. I’ve ran Joomla installs and WordPress installs ON my TF700t. How crazy is that?

There is a free version if you want to try it out. I use the full one and it has been a very useful part of my toolkit. It is also just fun to mess around with if you want to fire up a quick hobby project using PHP.

Some specs here:

This application is a web server application for android, include:
– LIGHTTPD as Web Server ,
– PHP as PHP Server ,
– MYSQL as MySQL Server ,
– PhpMyAdmin as MySQL Client , and
– MSMTP as SMTP Client 
It all wrapped into one application called Bit Web Server. So easy to run on android device, just single click then you can run web dynamic scripts.
This application is specially designed for the mobile n tablet, so this application requires very small memory.

For running this application the first time after you download it from google play your internal memory in device requirements should not be less than 50MB. Because this application does not download any data on internet, all data is wrapped into a (apk). And this application can also be accessed from a computer network via wifi or tethering.

This application runs without an internet connection, requires internet only when first run to check the license, if you install the app from google play this otherwise licensed, then to run this application so it does not require internet access (OFFLINE Application).

BitWebServer can run a variety of CMS like WordPress, Joomla, Drupal, Prestashop, etc. Besides CMS can also run PHP frameworks like Code Igniter, YII, CakePHP, etc.
It is the same as WAMP or LAMP or XAMPP on your computer or laptop, but this is for android devices with lighttpd instead of apache.

Modules/extensions which compiled on PHP is:
– bcmath
– bz2
– calendar
– cgi-fcgi
– Core
– ctype
– curl
– date
– dom
– ereg
– exif
– fileinfo
– filter
– ftp
– gd
– gettext
– gmp
– hash
– http
– iconv
– json
– libxml
– magickwand
– mbstring
– mcrypt
– mhash
– mongo
– mysql
– mysqli
– openssl
– pcre
– PDO
– pdo_mysql
– pdo_sqlite
– Phar
– posix
– Reflection
– session
– shmop
– SimpleXML
– soap
– sockets
– SPL
– sqlite3
– ssh2
– standard
– sysvmsg
– sysvsem
– tokenizer
– wddx
– xdebug
– xml
– xmlreader
– xmlrpc
– xmlwriter
– xsl
– zip
– zlib
– and more libraries like as freetype, jpeg, png, openssl, etc.

Storage Engine support on MySQL is:
– MyISAM
– MRG_MYISAM
– BLACKHOLE
– CSV
– MEMORY
– INNODB
– ARCHIVE

Images

pstouch

Adobe Photoshop Touch

Adobe Photoshop Touch – There is no replacement for Photoshop on mobile. The fine tuning you need to do on image for web designers/developers just isn’t replicated yet in an App. One of the big things is image quality when editing. The rendering and clean up on images saved with any Android app just isn’t as clean as it is on a computer. But if you need to do something quick and dirty this is the best app for it. It has a lot of the core Photoshop features loaded so you can crop, recolor, layer, combine and re-size images.

Web Browsers

I use Chrome for nearly EVERYTHING because it is fast and has the REQUEST Desktop Site feature that remains persistent whenever you visit the site so you never have to check it again. You won’t really be doing any cross browser compatibility testing here but I’ve found it useful to have the most popular options available. Every once in a while you will hit a bug on a site that won’t work in Chrome but will work in another. Usually this is in the form of some Javascript being handled differently by the different apps.

Screenshot_2014-05-30-20-59-37

 

3 Comments

I made a “do it yourself” trivia game called kaBOOM! I built it on top of Angular over the last couple weeks. I learned a lot and I want to share it with you.

Why make a game with Angular when there are so many game-centric JS libraries available?

I was REALLY struggling to find projects to use Angular with that matter. I’ve built a silly masonry.js photo gallery and some RESTful API front ends but I was doing all of that with straight PHP/jQuery before.  Nothing was being made special by using Angular to do those things. It just… “wasn’t needed.” But I know Angular is the future. I know it is powerful. There has been this “thirst” within me to have a chance to work on something that would really let me get to know Angular and really build out a larger front end only application.

I wanted a project that had three things:

  1. It would let me build something with Angular that people would find useful.
  2. It would let me explore many DIFFERENT aspects of what Angular is capable of when you build something the “Angular” way.
  3. Fun!

My fiance is an ESL (English as a Second Language) teacher. She showed me a game she plays with her students where she would make up a list of questions from the lesson. On a piece of paper she would make a grid with the questions and some “bombs” in the squares. She would recreate this grid in a large scale on her whiteboard but only put numbers in the squares. Using her key she created earlier she lets her students pick the numbers and reads them the question or goes, “kaBOOM!” when there is a bomb.

Once she told me about it I instantly knew that it was something I wanted to try and make. I really want to learn more about making browser based games and I really want to learn more about Angular. So I sat to work.

 Where to begin?

Well first things are first. I needed to scaffold the thing. For the first couple days I think all I did was make directories and folders filling them with the different assets I thought I was going to need. It felt like I was buying all the lumber and sketching out plans for my own fort kick ass.

I used the standard bootstrap with a bootswatch to get a solid CSS grounding to stand on. I threw in some Font-Awesome for good measure.  I knew the game had to work on mobile devices. I don’t know why but it is carved into my soul to ALWAYS be programming for tablets and phones. I knew with those tools I would be able to do that easily.

Moving Parts

I decided on the popular Animate.css to handle most transitions and fancy interface moves. For sprite animation a jQuery plugin called jQuery.animateSprite.

Sound

I had never worked with sound like this before. I knew I needed something I could easily control and let users control. Something flexible that would play nice with Angular. Welcome howler.js to the kaBOOM! foundation.

Angular add-Ons

Local Storage: I knew I wanted to use browser local storage to keep the game data. If things get popular I can’t pay to store all of this data and handle the traffic. Plus the app needed to be “self sustaining.” I used Angular Local Storage by Greg Pike for this.

UI Router: A no brainer. I had never used it before but so many people are swearing by it I knew I had to give it a shot. I don’t 100% understand all its majesty but I got it to do what I needed.

Loader: Trying to call ng-show all the time was becoming a pain. I was glad for the auto loader provided by Mr. Fancy Pants.

[play kaBOOM!]

Resources and Credits

2 Comments

Finding resources for inspiration as an aesthetically challenged web developer is pretty easy. There are a billion resources out there. You can browse Dribble, Theme Forest or the Web Awwwards but a comprehensive list of good usable ones is hard to find. Finding things that you can drop into your project right away is what we are after here.

In this series of posts I’d like to share some of the different resources that I’ve used to get me through the mental road blocks that come with seeing the Matrix in code rather than in living color.

Let’s start with something easy that you can use RIGHT now.

pig

UI Kits

Let me paint you the mental picture of yourself. You have written your master app. Your perfectly coded magnum opus to the gods of the internet is efficient, elegantly coded and has perfectly crafted modular functionality for every aspect of user interaction. The only problem right now is that it looks like wire frames, white space and blue links. Time to put some lipstick on that pig and get some markup that you can drop into your views.

Pixelkit Bootstrap UI Kits

[Download]

Flat UI by Designmodo and Square UI by Designmodo

[Download Flat UI] | [Download Square UI]

flat-ui-free-6001 Square-UI-Free

Other Resources

Leave a Comment

smoothie

This was the smoothest theme update from end to end that I’ve ever had. We had no hiccups in review and no major problems.* Maybe I’ll get the hang of this after all.

Down to business.

Twitter Bootstrap was updated to v3.1.1 on February 13th and 3.1 on the 30th of January so I wanted to make sure we got all the latest and greatest included in our theme here. The js, LESS, and default bootstrap.css files were all updated. There were also some typos in my translation strings on a couple files. Thank you to WP user Dyskette for taking the time to point it out.

I’ve also updated the child theme with the updated LESS files.

What’s next?

Bootstrap 3.1 brought us the SASS port so I’m trying to figure out the best way to incorporate that into what we are trying to do here. I’m not sure if I should just make an “add-on” download type of thing or actually include it with the theme itself. Right now the thinking is that including both the SASS and the LESS is going to create too much bloat. In the end I might create an entirely new theme that uses the SASS way. I haven’t decided yet but I feel it is important to make this available.

The Bootstrap Component Plugin

I’ve also been kicking around the idea of creating a companion plugin that is full of shortcodes and template tags to help people use the Bootstrap javascript and css components easier within their content. I haven’t started anything but it has been on mind for a long while.

If you have translation files I want them!

I’d like to start compiling a list of translation resources. So if  you have taken the time to translate the theme please send them to me danny (at) devdm.com so that we can help the rest of the world and make them available for download.

Child Theme Gallery

I’ve used this theme in a few different production projects now so I’d like to create a “child theme” gallery. I’d like to show people what is possible using DevDmBootstrap3 as a starting point for projects. If you have a project you have made that I could showcase please let me know danny (at) devdm.com.

* So far…

Leave a Comment

Privacy Policy | Refund Policy | Contact