Category Archives: HTML5

Chrome, HTML5, JavaScript, mobile, webdev

Building Better Mobile Web Apps

When we thinking on web apps and specially mobile web apps, we wish to make them smooth a responsive as possiable. The main problem is latency/network and luckily we have enough APIs in HTML5 to make sure we can achieve this goal. A good recent example is fastbook (yep… just like facebook but working FAST with HTML5). Here I’ll summaries some of the main points you wish to pay attention when you building your next amazing mobile web app. Start with ‘offline first’ (after all, you are on the right path with ‘mobile first’ already).

Coding

Offline First

  • You should store all the main assets of your application. There are several APIs you can use:
    • AppCache – for the main index.html page and all your JS, CSS code. You could also use it for images and other static data.
    • Filesystem – You have an option to work with files: text and binary data. This is a great option for cases where you have a lot of images/mp3/videos etc’. In order to manage the work with files there is a great library – filer.js
    • Storing state/data:
Standard
Chrome, HTML5, JavaScript, webdev

Web Components On Google Developers Live Israel (Part 1)

Google Developers Live Israel

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 →
Standard
Chrome, HTML5, JavaScript, webdev

GDL-IL On Bootstrap Chrome Extensions

GDL-IL on ExtensionsThis week we spoke with Alex Wolkov from extensionizr.com fame on Chrome extensions and how/when/why you should use them. During these 30min we covered these main points:

  • What is it an extension? If you wish to add functionality to the web app/sites you like? Well, this is the way to do it while using your front-end knowledge (HTML, JS, CSS) to add features to web app/sites that you are working with.
  • What about compatibility with other browsers? Crossrider.com (another startup from Israel) provide you wish this functionalty. We showed them in this GDL-IL Extension show
  • What are the best tools? Continue reading →
Standard
Chrome, HTML5, JavaScript, webdev

GDL Israel On Yeoman.io, AngularJS And Github Pages

GDL-IL with Ran Tavory

In this week episode of GDL-IL we talked with Ran Tavory on his new conference and how he built its website. Here are the main topics we covered:

  • Yeoman as the main built tool. We found out that is easy to start working with it. This powerful tool gives you a set of tools that any modern web developer should use. Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help you be more productive and use the best practices in modern web development. Give it a ride…
  • AngularJS – To add the dynamic part for our site. It’s very interesting to see how Ran used google spreadsheets as his database in the cloud and with the add angular he fetch the data and update the content automatically.
  • Github pages – As a free (and scalable) hosting service.
  • Twitter Bootstrap – Because it is saving you a lot of ‘leg work’ by using this powerful css framework. Ran didn’t start with it… but once he saw that the site doesn’t look good on mobile, he jump on this wagon and luckily for him it worked.
  • Google spreadsheet as a database and a simple database for our CMS in the cloud. Continue reading →
Standard
HTML5, JavaScript, life

Frontend Development Sources

Screen Shot 2012-12-18 at 10.34.00 AM

Here are a few new/cool sources I’ve bumped into during last week events (and meetings). It is always a great fun to talk with developers and learn on new tools that they are using in order to do their work. If you have something interesting, please don’t be a stranger and let me know…

HTML5

Standard
Chrome, HTML5, JavaScript

Barcelona GDG 2012 – Keynote On HTML5 APIs

Huge ice cream sandwitchLast month, I had the pleasure to be in Barcelona and talk with great developers on HTML5, JavaScript and the open web. The keynote cover new HTML5 APIs and If you wish to read some of the main points check out this blog post. During that day, I saw a cool start-up (e.g. Imira) which created html5 game: ‘Lucky Fred’ and use phone-gap to have it in iOS and Android market places.

After the keynote, I gave another talk on HTML5 and big data (with google cloud services). Overall, it was a great experience and the organizer did a great job. I hope to be able to make it again next year…

Standard
Chrome, HTML5, JavaScript

Chrome Extensions Updated Features

In this Google Developer Live episode I covered some of the new elements you wish to pay attention when you are starting to develop your Google Chrome Extension. If you don’t know what is an extension and why it’s great way to improve Chrome, try this true 101 tutorial first. As you (might) know, there is a new version for the manifest file that include few improvements. The first basic change is to add this simple declaration:

manifest_version: 2

This is a mandatory and if you have a current extension in the Chrome web store I suggest you update it to include it. The second bold change in the manifest file is the ability to make it more secure. For this we have to define what is our extension’s Contact Security Policy. In the demo case that I’ve showed, it will look like that: Continue reading →

Standard
Chrome, HTML5, JavaScript

My Talk At HTML5Fest Israel (In Hebrew)

https://i0.wp.com/www.w3c.org.il/HTML5fest/2012/images/html5-badge-h-solo.pngTwo week ago, I have the pleasure to take part in HTML5Fest Israel and give the keynote. It was a great event that the Israeli office of the W3C organize. If you wish to read some of the main points check out this blog post. It was a short talk because I thought I had 30min but in the end of the day… It was shorter.

http://www.w3c.org.il/HTML5fest/2012/lecturers.php?course_id=0&session_id=0&lecturer_id=5Nevertheless, I had great time having interesting conversations with lead developers in the crowds for the rest of the day. I can’t wait for next year event…

Standard
Chrome, HTML5, JavaScript, webdev

A Hangout On HTML5 APIs And CSS3 (New) Layouts

TALLINN Map

Last night, I gave this talk to Google Developer Group Tallinn about the new APIs that we have today in HTML5 and CSS3. It was (another) great hangout where you can ‘touch’ people that are quite far from your location and speak with them about mutual interest.

Some of the topics that I covered during the talk where: Continue reading →

Standard
Chrome, HTML5, JavaScript, webdev

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 →

Standard