HOME / Web Development

Blog Redesign, Part II

// I’ve been refining the redesign of this blog (see previous post about it for a screenshot of how it looked in the past) and here is the summary of recent changes: All pages: Full page width! Home page: – More space between boxes – Very very white background on boxes instead of gray – [Continue reading]

Newton’s playground: Javascript physics engines

The awesome animation below is actually the recorded output of a real-time #Javascript-powered physics engine. There has been quite a lof of progress in this field lately using technologies like #canvas and #WebGL, here are some recent developments: The “dragable/tearable cloth” demo comes from lonely-pixel.com. Play with it live and get the code here http://bit.ly/15wyK0F There are more demos on the developer’s website, [Continue reading]

Blogger and the Holy Grail of unified comments

// So yesterday Google announced  a further integration of Google+ comments and Blogger. If you enable the related setting, if your Blogger post is shared on G+, any comment on the G+ post with your post will also be shown in the page of the Blogger post in the comments section. This is a Holy [Continue reading]

Now this IS parallax!

// I’m not a big fan of parallax scrolling sites. Mainly because it is CPU-intensive which means that you will have people with a bad experience and by definition you are constrained to a small number of "pages" which means that you can only use it for small sites and you can’t upgrade such a [Continue reading]

This is not how HTML and CSS should be used!

// Some fun coding by Peter Westendorp: "Tunnel vision 3D" with CSS. As Peter writes: "This is an experiment to demonstrate the power of CSS and modern browsers. This is not how HTML and CSS should be used." :D See it live here http://bit.ly/10SvqbK

This is the Internet!

// Openly accessible data + open source development + open technologies = awesome :)The people at Teehan+Lax have developed a method to create timelapse videos using imagery from Google Street View. They call it Google Street View Hyperlapse and you can see the amazing video that you can produce as well, along with links to [Continue reading]

Just because you can: GUI icons with pure CSS

// Inspired by an elegant piece of CSS code by +Lea Verou, creating the WiFi code (see it here http://bit.ly/wificss), I searched for other examples of this and found this little gem: A demo of 84 icons created with just CSS by +Nicolas Gallagher. Nicolas calls it’s a "technical exercise" but given that this was [Continue reading]

Charts with Javascript: even more ways to kill Flash

// Javascript-powered chart solutions is a favorite topic of mine, so here are a few more options for you- NVD3 (http://nvd3.org/) builds upon the powerful D3 library and currently supports 11 different interactive chart types – Rickshaw (http://code.shutterstock.com/rickshaw/) also built on D3, can be used for live-data time graphs with 4 customisable chart types _ [Continue reading]

Draft: cloud text-editing for any anything anywhere

// I’ve written about #Draft already a few days ago http://bit.ly/g-draft when it was “just” a web-based text #editor for #Dropboxand Google Drive with version control and collaboration features.But I need to write again as a #Chrome extension was released that redefined how you can use Draft. I’ll just copy the developer’s (+Nathan Kontny) description: [Continue reading]

Twitter Cards: Engage!

// Just 6 days after my submission for inclusion on the #TwitterCards program, I got in and in the screenshot you can see the result: whenever someone tweets a URL of my blog, an “expanded view” will be available with a title, short description, thumbnail, my name and #Twitter handleIt also works on the mobile (iOS [Continue reading]

Improve links to your site on Twitter with Twitter Cards

// Announced since last July, Twitter Cards is Twitter’s equivalent (or “answer” if you like tech drama) to the Open Graph. By defining a set of #meta #tags in your #HTML code you can provide instructions to #Twitterin order to display an “expanded” preview of your page, when your page’s URL is included in a [Continue reading]

Tracking shares before they happen (or even if they don’t happen)?

// A tricky question poped up in my Quora home page: Is it possible to check, if somebody requested your site’s #meta #tags ?The logic behind this is that you could track social shares even if the user doesn’t complete the process (load’s up the URL on Facebook or a sharing widget) and then quits. [Continue reading]

How to create an infographic from your Google Analytics data

// Well, there’s not much to say here. People love #infographics for visualising information and numbers in an easy to consume manner. People also love #GoogleAnalytics for an endless amount of #statisticsabout their website.Now you can combine both with a few clicks on the free tool by Visual.ly. The process is relatively simple, you connect [Continue reading]

Does your company know what the internet is?

//_UPDATE_: The situation has been sorted out, the project is back online normally http://bit.ly/chartjs // Yesterday I wrote (http://bit.ly/g-chartjs) about Chart.js, a new library for javascript/canvas-based charts. A day later, the site is down with a note shown in the screenshot, basically explaining how the developer’s employer doesn’t like the idea of #OpenSource. Here’s the outcome [Continue reading]

Chart.js: cross-browser, animated, HTML5 charts

//Non-Flash charts is a favourite topic of mine (see more here http://bit.ly/g-chart), basically because charts have been one of the last things Flash could do that HTML couldn’t. This of course has been changing a lot the last few years.  Another very recent (released yesterday!) example of is Chart.js. It packs: – 6 animated chart types: [Continue reading]

Blog redesigned – comments?

// I hadn’t touched my blog’s design for a bit over year, so I thought it was time for a refresh. Yes, In case you haven’t noticed, I have a blog at which contains a full (an indexed) archive of all my Google+ posts.  So over the last 20 months I have ended up writing [Continue reading]

Add icons to your links with CSS3

// A lovingly quick way to add icons next to your links that I just saw in +Lea Verou’s (of W3C) site: all you need is a simple line of #CSS3 code. a[href^="http://twitter.com"]::before { content: url("twitter.png"); } See it live at http://lea.verou.me/

The Ultimate Browser Detection Fail

// So here’s a screenshot from #Google #Nexus , running Google’s #Android browser, showing a page on a Google service (Google Groups). We notice two things happening:  1) Google’s page can’t identify Google’s browser correctly and instead mistake it for #Safari2) Google engineers can’t (or wont?) make a page of relatively simple (in terms of [Continue reading]

CSS Paint times and a Faster Web Experience

// At a perhaps an alarming rate, web sites are becoming more and more like complete applications, see for example the refreshed +The Next Web or +Mashable). This means that looking into initial page loading times is not enough. We need to monitor how the web page reacts at user input.  +Addy Osmani has been posting a [Continue reading]

Change your scrollbars with jQuery NiceScroll 

// For some time changing the look of #scrollbars has been quite tricky but the last couple of years this has become easier. Probably one of the best is a #jQuery  plugin call NiceScroll. Now in version 3 it features: – simple installation with just a line of code for any div or the whole [Continue reading]

Finally, an awesome UX tutorial

// Answering the question "What are the best resources for learning bleeding-edge web, UI and UX design?" on Quora, Colm Tuite, UI/Visual Designer & Developer, decided to write one of this own. The result was an extensive post / #tutorial  with 10 steps to a decent (if not great) start in learning about #UX. To sum [Continue reading]

History: G+ Activity Log for the rest of the Web

// I recently wrote http://bit.ly/Vx6wiE asking for a #Google+ activity log, a page where you could see all the posts you +1ed or commented on. The problem is, if someone doesn’t interact with the post after you, you can’t easily find it.  It turns out something like this is on the works. +Shamil Weerakoon pointed me to [Continue reading]

Photobox: CSS3/jQuery image gallery

// There are probably thousands of #lightbox  solutions but here is fancy one, straight from the refreshed #jQuery   #plugins  site (http://bit.ly/YBFQye): Photobox promises to be a lightweight image gallery modal window script which uses only #CSS3 for silky-smooth animations and transitions. The goal was to create an image #gallery script that uses GPU rendering [Continue reading]

15 Years of Apple.com

// A collection of #Apple ’s home page layouts since 1997!http://www.slideshare.net/choehn/15-years-of-applecom-15990876

Going Fullscreen with HTML5

// Up until recently, having a web page running in full screen was not possible, left only for #Flash -based sites. The best you could do was remove the menu/location bars but still the window frame remained. This has changed with the #HTML5 #Fullscreen API which allows handling full-screen capability of the browser via #javascript [Continue reading]

Tinycon: favicon alert bubbles

// If you are building a web application, here’s a nifty solution for alerting the your user of something new, like a new message or a reminder:  Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browsers that don’t support canvas [Continue reading]

Coming soon: Where your browser memory goes

// Currently available as part of the #devtools of the "early adopters" Canary version of #Chrome is a new feature that allows you to check what takes up the #memory that is allocated for your browser. This will certainly allow for more efficient #javascript  programming.  Read more about it in +Addy Osmani’s post http://bit.ly/101e2P9

How to start writing secure PHP code

// Some basics of writing #secure   #code  from Nathan Good at IBM 1) Validate input2) Guard your file system3) Guard your database4) Guard your session data5) Guard against Cross-Site Scripting (XSS) vulnerabilities6) Verify form posts7) Protect against Cross-Site Request Forgeries (CSRF) Kind of seem obvious, but they are not to a lot of people. The [Continue reading]

No-Flash Maps with jQuery

// There are tons of Flash-based map solutions and there is always Google maps integration, but what if you want a more visually simplified, tablet-ready solution that will not depend on external sources?  JQVMap is a #jQuery plugin that renders #Vector #Maps.  It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, [Continue reading]

Reminder: People come to your site to consume content

// They do not come to see ads or others links to other pages to your site, or navigation links or social media buttons. So it is a bit counter-productive if the first 800 (probably more) pixels of your page do not have a single line of text from your content. The example below is [Continue reading]