HTML5, JavaScript, php, webdev

Sublime Text 2/3 – Packages And Shortcuts

subl-icon-512

I always start with the one package that allow to stay in sublime and improve it quickly: packagecontrol.io

Next on the line is the option to make our editor a bit more friendly with: SublimeCodeIntel It’s A full-featured code intelligence and smart autocomplete engine for Sublime Text. Few of the technologies that are supported:
JavaScript, SCSS, Python, HTML, Ruby, Python3, XML, HTML5, Perl, CSS, Node.js, Tcl, TemplateToolkit and (of course) PHP.
From here there are many options.
Few the I’ve found useful:

  • Git
  • Emmet
  • Terminal
  • ColorPicker
  • SublimeREPL
  • LiveReload – Make your life easier with this live reload ability. It will save you a lot of clicks on the ‘reload’ button (or cmd+r).
  • MarkdownPreview – I love markdown and this one is making me more productive with it.
  • JSLint – If you are writing some javascript, this one is a must.
  • DocBlockr – Create a new documentation block with a quick click. And yes, it will extract that function’s parameter information and pre-fill it in your documentation block. nice, no?
  • Soda Theme – just to keep up with the cool kids on the block.

Continue reading

Standard
Chrome, HTML5, JavaScript, php, webdev

How To Implement Web Payments

One aspect for Monetization on the web is the simple action – BUY.
In this method, the user will pay and only then, she could ‘use’ the application or service. There are several providers that offer developers an efficient ways to lead users through the checkout process. In the image below you can see an example of such usage when the user got the option to ‘Pay with Card’ in one-click.

pay-ex-1 2015-02-11 16.56.42

After you will click on this button you will get a dialog that ask for your credit card details. In this example, we are using Stripe. It’s a good option that works in many countries around the globe. Moreover, you are getting for ‘free’ all the best practices of client-side validation for the credit card details. In the image below, you can see an example of buying “one hour with Ido”, it’s looking like a bargain. Continue reading

Standard
cloud, HTML5, JavaScript, mobile, php

Google Cloud Platform Update

Google cloud platform updateYesterday we had a very cool event at Google’s offices. There were many mobile and web developers that came to hear what is new with Google cloud technologies (among other thing). I’ve used this set of slides because I knew they will be useful to many more developers that miss the event. That is the reason, I’ve used ‘a lot’ of words on each slide.

The event was recorded and I will update this post with the video soon. Have a great 2014! Continue reading

Standard
HTML5, JavaScript, php, webdev

Git 101 – Useful Commands

Github link cat A few commands I found myself using daily… Well, it might be a good idea to share it with others and see what can be done better. If you like to get out of the command line, I found Source Tree to be a powerful free application that give you many options to see the code, changes and flow. You might want to check it out. Another good option is the GitHub official client app. Ok, let’s jump into the list of git commands. Continue reading

Standard
Chrome, JavaScript, php, webdev

Google APIs On GDL Israel

Google APIsIn this week we spoke about Google APIs and how you can work with them from the client (e.g JavaScript) and from the server (in this case, it was with PHP but there are many more options).

The main link that you will want to start with is: code.google.com/apis/console/ which give you the option to ‘activate’ which APIs you are going to use and later on each and every one of them you can click on the ‘question mark’ and jump to a starting guide. Another good tool is the API-Explorer which give you the option to test APIs quickly and see what each end-point will return. Continue reading

Standard
Chrome, HTML5, JavaScript, mobile, php, webdev

HTML5 APIs On Google Developers Live Israel

html5-cakeThis week we spoke about “Modern Web Applications Utilizing HTML5 APIs“.
Some of the things we covered:

  • Defining the modern web app
  • Designing a web app with a thought on all devices out there.
  • HTML5 Power tools/APIs
  • Google cloud endpoints and why it’s a great option to built your next powerful API.

Continue reading

Standard
Chrome, HTML5, JavaScript, php

Java Posse Podcast Episode On Great Web Apps

In the last Java Posse Roundup (=the best unconference you can attend) we had many very interesting meetings. In this one hour conversation we were talking about modern great web apps and what does it means to different developers. Some of the topics we spoke about where around new JavaScript MV* frameworks (ember, backbone, spine, angular etc’). What we used to do 35 years ago (main frames days!) and what is similar (or not) today. Thanks to @joelneely for correcting me with the title by making a great point on replacing the word ‘modern’ with ‘great’. Some of the topics that were discussed:

Since we had no-snow and free time, we did few ‘rolling’ hackathons in the afternoons. You can browse the coding projects on GitHub JavaPosseRoundup. Checkout, some cool Scala, Android, HTML5 apps that are there. Lastly, I also gave a talk about this topic before the conference at a Google developer meetup. Here are the “Modern Web Apps slides from my talk that contain more good information about the subject.

Standard
Chrome, HTML5, JavaScript, mobile, php, webdev

Modern Web Apps at Scale With Google App Engine (Part 1 Out Of 3)

modern web apps exampleThere is no secret that today any developer that wish to built the next G+Path, Instagram etc’ must think on two major aspects:

  • Server Side / Cloud Service that she is going to use in order to create the API. Here we must answer some important questions like:
          1. What will I do if I get a huge spike in traffic?
          2. Will I need to manage it? Do I have to do it?
          3. How will I communicate with different clients?
          4. Which technology to use in order to store: data, state etc’
  • Client side technology
    • Web technologies: HTML5, CSS3
    • Mobile native app: Android, iOS and Windows.
In this post I’ll be focusing on the client side (and later this summer I’ll have another few posts on the server side) and what we should use in order to build a modern web application.

Modern Web App

It’s not an easy definition since web technology is running very fast. Nevertheless, we can find certain features across successful web apps:

  • Self Contained & Functional– They all have one specific goal and they do their best to provide the users the functionality to get to her goal. Few examples:
    • New York Times – Consume news.
    • Hipmunk – Find a flight that is the ‘perfect’ for your needs.
    • Gojee – Find the recipe you would taste and say WOW after it.
  • “Offline first” – You will want your web app to work offline. It’s an important feature that will let your users be productive on places like: planes, subways and on spots like: Starbucks when you don’t have (always) good connection. Another very important benefit will be the improve in performance. Since the app will work locally (first) and then sync the state/data the users will get responsiveness that are far better from an app that need to ‘wait’ for network on every action that the user does.
  • Client Side Architecture – Since we are moving big parts of our ‘logic’ to the client we need to think about methods that will keep our code readable and maintainable. I guess this is the main reason why we see so many MVC Frameworks. The only advice I can give here is to try few of the popular ones and see how they approach the separation between the data and the UI. If you have some time go over The Top 10 Javascript MVC Frameworks Reviewed. Then, after you try ‘some’ you will be able to pick the one that fit the bill in the best way. For the busy developer (I know… most of us don’t have too much free time 🙂 – Go and play with these three MVC (some will say it should be MV* because it’s not really MVC more MVVM, MVP):
ember.jsEmber.js – Don’t waste time making trivial choices angular.js Angular.js -Lets you extend HTML vocabulary for your application backbone.jsBackbone.js – gives structure to web applications by providing models with binding, collections and views
  • Device Aware – We all know that mobile is going ‘up and right’. So when you design your web app you should think on progressive enhancement and how it will fit  to different screen sizes. Good examples to look at are: Gmail, Flipboard and Twitter. If you want to go deeper on this interesting subject there is a webcast on ‘mobile web apps’ I did with Oreilly three weeks ago. You can go over the slides as well.

Challenges and Solutions

Challenge: What to do first (mobile app, web app, both). Focus is the most important thing for a startup so what should we do?
Solution: Built on the server a RESTful API that allow you to consume it from any platform. The way to work with an API is similar (more or less) to all the platforms although in the web we have some interesting new tools that we can use. If you are working with Google APIs here is a new API Explorer that is very useful to browse the capabilities of each API and to try it live.
Challenge: How to make the web app functional with clear goal?
Solution: Invest time and effort in your UX (and later the UI). Some taking it a step further and say that you should focus only on great UX and all the rest will follow. Who said apple?
Challenge: How should I work with RESTful APIs (in our case – google ones)
Solution: The first excellent tool will be Google JavaScript Client Library  Why it’s so powerful?
  1. It save us the trouble to reinvent the wheel and built simple functionality like: CRUD operations, list, order, search etc’. It’s all baked in it.
  2. It provide us some powerful new features:
    1. RPC Batch
    2. CORS
    3. Authentication out of the box
    4. Version control
    5. Super Simple
Challenge: How to make my application ‘offline first’?
Solution: With HTML5 we have few APIs that let us create web apps that will work great when there is no connection. The first step is to pretend that there’s no internet connection. It will force you to implement a sync layer that works only when online. So you will give the users the ability to add/edit/remove data and when the connection is online your app logic will do the syncing with the server. In order to have our app offline we should use two important features:
  1. Storing (static) assets: we can use AppCache. It’s our ability to save locally our html, js, css files and all the images, sound files etc’.
  2. Storing data: localStorage, IndexedDB, File API. This is a hot (and large) topic. I would suggest to read deeper on when and where to use each over at html5rock.com

webIntent

Challenge: There are so many web services I would love to hook into my app – How can I do it without reinventing the wheel each time? In other words, I want to give my users the ability to edit photos, share on twitter, g+ and Linkedin (just to name few).
Solution: WebIntent! If you are familiar with the intent system that is flourishing in Android you know what I’m talking about. We now have a powerful solution for the web. Web Intents is a framework for client-side service discovery and inter-application communication. The code you need to add to your app is as simple as:

var sharingDetails = "Check out my....";
var intent = new Intent(
            "http://webintents.org/share",
            "text/uri-list",
             beerDetails);
window.navigator.startActivity(intent);

The best part is that it will work on most browsers with JavaScript shim and in Chrome (19+) it’s built into the browser natively!

Google Chrome FrameChallenge: What can I do on old browsers that do not support HMTL5 very well?
Solution: Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome’s open web technologies and speedy JavaScript engine to IE. You can add it to your web app with one line of meta tag: <meta http-equiv=”X-UA-Compatible” content=”chrome=1″> or configure the server to send this http header: X-UA-Compatible: chrome=1 in both scenarios your users will enjoy the wonderful world of chrome (v8, HTML5, CSS3, WebGL etc’) inside their IE. Important fact to remember is that your users do not need admin rights (on their windows PC) in order to install it.

I hope this gave you some points to think about during the planning and designing phase of your next web app. For startups and developers that have an app in production, I would suggest to check what are the building blocks that will make sense to implement first (e.g. web intent, clean the client code by refactoring it to an MVC framework etc’).
This is the first post in a series of posts, I hope to cover Google App Engine in the next one and then combine the two worlds in the last post that will be more of a ‘cookbook’ to best practices of leveraging Google App Engine and HTML5.
Standard