Web Workers is a good way to improve the performance of your web applications. It’s not a new HTML5 API but for some reason not too many front end developers are using it. This short episode will give you the intro to why and how you can leverage this simple and powerful API to enter the world of multi threads in the browser. Continue reading
Tag Archives: web apps
Mobile Web Apps On Google Developers Live Israel
This is the talk I did in Google Developers Live Israel. It’s a weekly show that we have every WED at 14:00 (Israel time). You are most welcome to hangout with us in the future and ask questions or comments on anything that is related to startups, technology and (of course) Chrome/HTML5.
For more information about the talk you can read in the last post on mobile web apps.
Mobile Web Apps
Last week I had the pleasure to give this talk in Multi Screen-X event we had in Campus TLV. Mobile web apps are built using web technologies: HTML5, Javascript and CSS. The main advantage is that you write your application once (e.g. one source code) and deploy it on every platform: Android, Chromebook, Chromebox, Chrome and ya… even iPhone and iPad. Why it’s important today?
Well… as we know, the web is a huge platform and the one common application in any platform is the browser. One look at this set of devices (which is just the tip of the iceberg) will tell the story:
On mobile devices the browsers’ current state, in terms of HTML5 support is (even) better then on desktops. You can see it per API in CanIUse.com or mobilehtml5.org Continue reading
Web Components Talk At HTML5-IL Meetup
Last week I had the pleasure to take part in the first HTML5-IL meetup. If you are a front-end developer that live in Israel you should try and come to this group events. Lots of great developers, designers and others that share the same passion for the web. Great stuff. Unfortunately I didn’t have more then 30min for this new, hot, complicated topic. So I hope to have more time to cover some of the aspects during the next meetup. From the four main aspects we touched only on the first two: Continue reading
Web Components On Google Developers Live Israel (Part 1)
Today, in our weekly Google Developers Live Israel show we spoke about HTML5 and web component. It was a macro level overview on this new edge of front-end development. This new project is composed of a group of technologies that should help us (web developers) create moderan web apps using HTML, CSS and JS. They do this by allowing toolkit makers to encapsulate their widgets and UI elements as easily reusable components.
We covered the main players:
- Templates – We can think on it as a new HTML element. It allow us to inert chunks of clonable DOM that can be activated for later use (e.g MDV). You can think of it as objects you creating out of your class definition. This new ‘object’ can contain markup (=CSS) and script (=JS) so it’s much more powerful from the ‘just’ CSS that we have today. We can use it as a decorator to give new style and functionality to our custom (new) HTML element.
- Custom elements – which can be looked as our toolbelt when we are coming to build a new web app and we wish to reuse ‘wheels’ and not reinvent them. We showed how to create new HTML elements by expanding HTML’s existing vocabulary.
- Shadow DOM – It’s like the regular DOM you know (and love) but it’s down in the ‘shadows’ hidden from our eyes. It’s main goal is to give us encapsulations. It’s the glue that let us insert and work with our components. Think of a ‘tab’ component that you don’t need to ‘know’ about it’s style, functionality etc’. It will work for you and you can’t break it from your JS code because you forgot to use a namespace for your app logic.
- Mutation Observers – and how to watch for changes in the DOM in the most efficient way. Continue reading
HTML5 New APIs In ILTechTalks (Hebrew)
Last week, I’ve went to live person HQ to give a talk in ILTechTalks on HTML5 and how you can use some of its new APIs in order to build you next web app. Today, web apps like: gmail, maps, google docs etc’ are consider to be modern web apps. They are rich, interactive applications that users spend long hours with them. There are few features that distinguish modern (or great) web apps from sites: Continue reading
How To Use IndexedDB – Simple(st) Example
In the past few months, I’ve saw many developers that use local storage for ‘big data’ on the client side. Local storage is a powerful API that let developer save key-value data on the browser. However, it’s got some limitation like: synchronize operation that make it less efficient when it’s heavily used. Moreover, it should replace simple cases (e.g. saving the user state) and not in scenarios where you wish to save lots of data and then have the ability to ‘slide and dice’ it base on your needs with effiency. For that, we used to have WebSQL (which as you know is deprecated from 2010) and the new cool kid in town – IndexedDB. Here I will try to give you a short example that will run nicly both on IE10, Firefox (that match the spec) and Chrome (which need to tune a bit the setVersion update to call onupgrade). IE10 will support IndexedDB as well – so it’s great news to web developers in terms of ‘wild’ support for this important API in browsers. I wish we will see soon Safari (specially, on the mobile) match Chrome for android and give us the ability to leverage indexedDB both on Android and iOS.
Ok, as Linus said: “talking is cheap, show me some code”… Let’s go over the example code. In this example we will save todos to keep things simple. Classic, no? In the end of the post, I will also give two other examples of a ‘todo app’ the use indexedDB, WebSQL and jQueryMobile.
Top Android Apps You Want On Your Phone
What are the ‘must have’ apps you would install on a new Android device?
I’m sure you all got to this spot when a good friend and/or brother, sister, mom, dad or “dear” neighbor is coming to you (=the “guru”) with their new smartphone with the request: “Make it useful for me” or “Put some games and apps for the kids”. Well, after few (OK, maybe just 17) times I got this request, I decided to document a list of great apps that I’ll install in such a case. It is similar to a post I’ve wrote in the past about ‘Great Web Apps For Your Chromebook‘. The list is a combination of powerful apps that help people (who are not necessarily technical) in their daily tasks.
Here is my little list:
-
Google+ – Well, even if your friend doesn’t use this powerful social network. I would install this app because – on top of many other great features like: local, hangout, messenger and more – it will back up all her photos to the cloud!
-
Waze social GPS – This navigation app bring the ‘wisdom of the crowds’ into your car. It’s very powerful to direct you on the shortest path based on traffic in real time.
-
Gmail – Well… How can we have a list without THE email tool? This is going to be the app the will consume most of your friend’s time.
-
Skype / Viber / Google Talk – you can call and message for free. I know lots of friends that use them when you are abroad. It’s useful to find a good wi-fi connection so the quality of the call with be good.
-
WhatsApp Messenger – one of the best messaging apps (think on sms but much better and for free). It’s working on many different devices so you can be sure most of your friends can enjoy it.
-
Chrome – Get the the security, speed and simplicity of Chrome to your mobile device. All your links, open tabs, passwords will sync like magic. Plus, you will enjoy many wonderful web apps that will work very fast.
-
Evernote – Organize your life and take notes using your mobile. This app is a powerful tool to keep your notes/recipes/photos/todo lists etc in the cloud. It’s also synced notes across devices so you can reach them from anywhere. Btw, their tablet version is gorgeous.
-
Flipboard / Google Currents / Pulse News – All are great apps to read your favorite magazines, blogs, newspapers etc.
-
Google Drive / Dropbox – access all your docs, photos, videos, files from your mobile device.
-
Instagram – A good app to improve your native camera pictures and share your photos with the world.
-
TripIt Travel Organizer – This is a great app for anyone that travel. It will give you a great way to stay on top of things like: flight schedule changes, hotel reservations and car rentals.
-
Facebook / Twitter – so you could keep in touch with the rest of the ‘social’ world. btw, both of these app got a very nice mobile web app as well. There are also options to have these type of apps as widgets so you could be more productive on certain functions of the app.
-
Foursquare – explore a new city with this powerful app. Ohh… yes, you can ‘check-in’ and share your location with friends but even if you don’t part of the ‘social animals’ you will find this app very useful. Another option to check quickly where to go and what to eat is Yelp.
-
GroupMe / Google+Messanger – both will give you a great way to have group chats and organize friends/team quickly.
-
VLC – Be able to watch any type of video on your Android. Another option to stream video is with Dropbox app – yep, it let you do that as well.
And some extra fun one
UTILS/TOOLS
- Barcode Scanner – To be able to scan some barcodes like all the cool kids on the block.
- Flashlight HD LED – When there is no other option
- Google Translate – Think on a case where you want to order a good wine in france and you can’t say it.
- Any.DO To Do List – Great to do list app. It also got a nice chrome extension that keep your tasks sync and fresh.
- Wheres My Droid – for anyone that lost his phone more than once or twice. This one is a life saver. It will let you find it even if the phone is in silent mode.
- AVG Antivirus – After all it’s better to be safe then sorry, no?
- Key Ring Reward Cards – Keep all your loyalty/reward cards in one place.
Reading / Education
- Kindle – Read book, pdf and anything else. I found that I’m using this app quite a lot on my phone (and not only on my tablet).
- Google Reader – To keep up with your world of interest. This is a great rss reader.
- TED – Ideas that worth your time. If you have 20min of free time, this might be the perfect solution to put them into good use.
Sport / Outdoor / Health / Fitness
Anything for bikers, runners, athletes and hikers.
- My Tracks – Record and share your GPS tracks with friends.
- MapMyRUN GPS Running – You can have MapMyRide verison as well in case you are mostly on your bike.
- Strava Cycling – Analyze your performance and see how you stack up against friends and locals
- StopWatch & Timer – In so many cases you wish to time something…
Last but not least, some apps for the dudes in Israel
- Pango for parking – Park with no fear of reports.
- Morfix dictionary – Translation and a dictionary.
- Channel 2 news – Watch the news/updates live.
- Mako VOD – Watch videos in hebrew from the leading media companies.
We can’t finish without the #1 mobile game of all time (this time for Curiosity)
Drive safely and if you have some more (great) suggestion – please share them…
Here are the top apps in the Israeli Android Play Store (Aug 2012)
HTML5 Modern Web App and Google Cloud Endpoints (Part 2 Of 3)
Brad Abrams and I had a great time doing this session: “HTML5 and App Engine: The Epic Tag Team Take on Modern Web Apps at Scale” at Google I/O 2012. Here is a little walkthrough on ‘how to built it’ from zero to hero in less then 60 minutes.
- Slides: http://ido-green.appspot.com
- Code: https://github.com/greenido/backbone-bira
- Video: http://www.youtube.com/watch?v=v9TG7OzsZqQ
Pre-reqs
User Experiences demands are pushing modern web apps to a more distributed architecture. A pattern many developers have used is using a MVC framework on the client and communicate to the server with REST. Google App Engine’s easy to build, easy to manage environment makes it ideal for REST APIs for Web backends. At Google IO 2012, we made it much easier to build REST APIs on App Engine with Cloud Endpoints.
Cloud Endpoints enables you to build REST and RPC APIs in App Engine. It leverages the same infrastructure Google uses for its own API and as such, you get strongly typed clients for Android, and IOS as well as a lightweight client for JavaScript which we will be walking through in this presentation.
In getting ready for IO, Ido and I thought we’d build a modern web application using Cloud Endpoints. We decided on a topic that would be relevant to both App Engine and the general web developer community, something we both have some interest in and something generally useful…. a Beer rating and review web application.
Try it out yourself at: http://birra-io2012.appspot.com/
Mobile Web App Stack (Hebrew)
Here is short talk I gave in DevCon 2012. I’ve spoke about four topics:
- The State of the mobile web
- Design philosophy
- How to build mobile web app
- Tips and some knowledge from my (short) experience.
If you think about this situation:
You realize that there is no choice to stand on the side and not create a ‘mobile first’ approach to your business/organization. In a world where mobile devices are going to pass desktop users and keep the ‘up and to the right’ line even steeper there is no option not to be there. It’s going hand in hand with ‘offline first’ approach and the (huge) amount of JS MVC frameworks that let us create modern web apps. We wish to provide users with great web apps and offline is one critical factor.
Some of the main tips to be more productive when you develop your web apps are:
- Try full tech stack like: thorax.js
- When you aim to iOS its Safari console can be used for logging (Settings -> Safari -> Developer)
- Simulate touch events on desktop with MagicTouch.js OR try the new feature we have in Chrome DevTools (only on Canary for now). You can simulate touch event.
- Remote debugging hack with jsconsole.com or if you have Chrome on Android you can do remote debugging
Feel free to browse the slides of my talk. When you see a dot in the bottom left corner – just click on N and you will get some more information on the current slide.
Ido Green 