I’ve meet with a very cool startup over the weekend. It was interesting to listen and learn from them what is ‘cool’ in their technology world. However, I got the feeling that they are missing some of the new capabilities that the web platform has to offer. I’ve pointed them to some known resources like: html5rock.com , MDN site etc’. But it seems better to try and get a list of tools or pointers that any developer could browse and pick from. So here is an alpha version of the list. It’s split to subjects like: design phase, testing phase etc’ just to keep it a bit more useful.
Tag Archives: open web platform
Chrome And HTML5 Updates
There are some very interesting technologies that are now available in Chrome. In this post I will try to cover some of them.
We know that Google started the Chrome project on the three ideas of speed, simplicity, and security. It’s still focusing on these important aspects while keep moving forward (fast) on implementation of many other HTML5 features. You can find Chrome on mobile, desktop, Chromebook and Chromecast. Let’s see what are the new, improved features we got these days as developers in Chrome platform:
Focus areas Chrome is moving forward
Mobile and Open Web Platform
We’re investing a lot of time to make sure mobile web experiences improve and that they are easier to develop!
- Build amazing mobile web apps
- WebGL, Web Audio, WebRTC, Web Speech and many more APIs that give you ‘native’ capabilities inside your browser.
- Vibration
- Device Motion
- WebRTC code lab (link) to check the new world of media (video/audio) in Chrome without plugins.
Raspberry Pi And Google Coder #socool
The Web is awesome and this week I had the pleasure to play with a new ‘face’ of the web platform. It’s built for Raspberry Pi and you can take it as far as your imagination will let you.
Coder
Coder is a very cool project that aim to be a simple way to make web stuff on Raspberry Pi. Short and sweet. It is also an experiment for Raspberry Pi that give you a free piece of software that turns a Raspberry Pi into a simple, personal web server and web-based development environment. Basically, all that you need, for crafting HTML5, CSS, and JavaScript. Plus, it’s an open-source project so you could fork it and learn from the source on http://googlecreativelab.github.io/coder/ Continue reading
Google I/O 2013 – Mobile, Web and Cloud – The Triple Crown of Modern Applications
Can we had a better title for our talk? I’m not sure… But the description was along the lines of “…Ready to rock the world with your next application? Odds are you are thinking about mobile, web and the cloud.” So far… so good.
In this session we talked about building a modern mobile web application that takes advantage of the Google Cloud Platform. We touch on the powerful combination of the “mobile web AND the cloud” and in the process we tried to show the power of Google cloud endpoints and modern HTML5 apis. We built a fun little mobile web app “Pictureque” that give you the options to take photos (even on airplanes) and then share them with the world. Continue reading
Web Development – Some ‘Good To Great’ Tools
I’ve started to create a list of some great online tools that will help you (and me) in the next project. Some of the tools are helping to achive a certain effect (=gradients) while others are more a ‘hello world’ examples to hack around it in order to understand a new HTML5 API (e.g. HTML5 File API) and then harness it to your next web app. You might say it’s not a tool and you might be right. I guess it is more a list of resources that might help you get better at what you do.
If you got some other good sources please let me know… Here is the list:
Browser capability
Before you start your project you need to check what is the set of features and which browser will support them. There are few sites that will give you good answers. The lastest one is: html5please.us and other good sources are caniuse.com which include mobile browsers as well and mobilehtml5.org that is all about capability for mobile browsers.
JavaScript MVC frameworks
There is a new kid on the block – Thorax I like that fact that it is an opinionated backbone application framework. It is a combination of several tools:
- Backbone – the core framework
- Underscore – JavaScript utility belt with you
- Zepto – jQuery DOM goodness for mobile
- Handlebars – mustache for movember
- Stylus – Good and clean CSS experience
- Lumbar – packaging utility
Another framework that is worth the time to look into is: emberjs and Trello tech stack that is coming from the great dudes of ‘Fog Creek’.
If you wish to check what other options you have today – I would go to this site and check some of the most popular MVC framework that are out there.
Work and share javascript online
- Jsbin.com
- jsfiddle.net
-
Google code playground – which include some good examples of Google and JavaScript APIs.
I also found myself using Simple JSON viewer in cases you wish to find out a specific parameter in a large JSON object.
Playing with CSS3
- Nice html5 app to play with gradients and of course http://css3please.com that let you tune your styles online.
- http://westciv.com/tools/ – Great collection of tools to improve your CSS/CSS3 capabilities.
- http://pageblox.com/ – A tool to help you build your next grid online.
- Examples for CSS3 usage: CSS3 Patterns Gallery
- CSS3 Gradient Generator – The CSS3 Gradient Generator is a showcase for the power of CSS gradients.
- CSS Gradient Generator – a powerful Photoshop-like CSS gradient editor from ColorZilla.
Libraries for Fonts
- Google Web Fonts API – Google Web Fonts makes web fonts quick and easy to use for everyone, including professional designers and developers. We believe that there should not be any barriers to making great websites.
- TypeKit – Simple, bulletproof, standards compliant, accessible, and totally legal fonts for the web.
Offline Libraries & Frameworks
For Mac Web Developers
- LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. When you change a CSS file or an image, the browser is updated instantly without reloading the page.
- CodeKit automatically compiles Less, Sass, Stylus & CoffeeScript files. It effortlessly combines, minifies and error-checks Javascript. It even optimizes images, auto-reloads your browser and lets you use the same files across many projects.
Mobile web development – Some good reads
- The mobile web application tech stack – Good post by @borismus on the best tools today for developing mobile web app.
- Rethinking the mobile web: a good presentation which take a slightly different slant on the responsive web design ethos for mobile devices.
- CSS media query for mobile is fool’s gold – Cloud Four’s article sets the record straight regarding claims that responsive web design is perfect for producing mobile-optimised websites.
It is far from being a full list – just a beach-head to start have a source for some tools that will make you more productive.
HTML5 Training Day (Mountain View) – Summary
Well, in the past month I was busy organizing this HTML5 Training Day for business web developers. You may want to stop and ask:
What Is HTML5 Training Day? So, our main goal is to have an open conversation with business web developers and to provide them with tools and knowledge to implement HTML5 features into their web apps. In this one day event, world-class experts talk about tools, tips and best practices in web development with focus on business.
It was a lot of fun and last week, we had in Google more then 24 companies that came to learn about the latest and greatest in the open web technologies.
We started the day with a short presentation that I gave on ‘The State of ChromeOS’. It’s amazing to see how fast is the pace and I suspect we are going to have a great 2012. After that (and two more cups of coffee) we got Pete LaPege (an excellent speaker, if I may) talking about: “HTML5 and new breed of web application” which aim to cover what defines a great Web App and show you how you can use HTML5 to create a new breed of web application that will delight and amaze your users.
Another cup of java and another web ninja: Mr. Eric Bidelman gave great talk with lots of demo on the ‘bleeding edge features in Chrome and the open web platform“.
and some HTML5 offline features.
For the developers who wish to do ‘mobile first’ – we had a surprise from the snow country. Mr. Boris Smus (that build web stuff that make you – wow! for real) talking about A mobile web app technology stack. Here in his own words: “…Learn what it takes to build modern mobile web apps. We will start with the ideas of “adaptive apps” and “offline first”. Next, we’ll dive into some of the technologies, including MVC frameworks, templating engines, CSS frameworks, laying out views and multi-touch input. Finally, we’ll close off with mobile-specific tips and sweet demos.”
After Boris we had the pleasure to host David Kaneda (for the few that don’t know, David Kaneda is a creative web technologist. He created jQTouch, a jQuery plugin for mobile web development, and Outpost, the original iPhone app for Basecamp.) David gave another great talk on “Abstracting CSS for Complex Theming Systems.”
In the afternoon, Mr. Seth Ladd (The Michael Jordan of Dart) spoke about Dart and how it is a comprehensive effort to help app developers build complex, full featured, high fidelity apps for the modern web. He gave some nice short demos that showed the language, libraries, and editor of Dart.
Last but not least, Mr. Christos Apartoglou (The Chrome Web Store Chief) spoke about Success stories in CWS. He talked about some bold success stories and showed what makes apps in the Chrome Web Store successful.
You can see the format of the day with the full descriptions of the talks over the public schedule that we kept for that day. It was a good tool to have a back channel (using the chat feature on the document) and to allow everyone to keep updated with the last minute changes. I hope to have some videos from that day public… I will post them here and on my G+ page.
See you all in our next Training day.
Ido Green 