pedrocorreia.net - myNews

MongoDb Architecture

pc@pedrocorreia.net (pedrocorreia.net) — Mon, 14 May 2012 20:43:42 +0100

NOSQL has become a very heated topic for large web-scale deployment where scalability and semi-structured data driven the DB requirement towards NOSQL. There has been many NOSQL products evolving in over last couple years. In my past blogs, I have been covering the underlying distributed system theory of NOSQL, as well as some specific products such as CouchDB and Cassandra/HBase. Last Friday I was very lucky to meet with Jared Rosoff from 10gen in a technical conference and have a discussion about the technical architecture of MongoDb. I found the information is very useful and want to share with more people. ...

RouterJs: easy routing for your ajax Web applications

pc@pedrocorreia.net (pedrocorreia.net) — Mon, 14 May 2012 20:43:08 +0100

RouterJs is a simple router for your ajax web apps. It's build upon History.js which means that RouterJs supports the HTML5 History Api with a fragment fallback for HTML4 browsers. Highly inspired by the Backbone Router it also supports passing parameters with :param and splat parts with *splat ...

Adobe Photoshop CS6: Improvements for Web and UI Designers

pc@pedrocorreia.net (pedrocorreia.net) — Mon, 14 May 2012 20:17:49 +0100

Photoshop CS6 has been hailed as a huge improvement for web and UI designers. I'm going to share with you some of the features that Photoshop CS6 Beta has to offer and demonstrate how they can help you in your web or UI design workflow. ...

Backbone computed properties

pc@pedrocorreia.net (pedrocorreia.net) — Sun, 13 May 2012 20:42:11 +0100

This gist shows one way to implement read- and write-enabled computed properties on a Backbone Model, without polluting the attributes hash of the Backbone Model. It works with Backbone.ModelBinding, so computed properties may be bound to form elements. ...

A Hopefully Fair and Useful Comparison of Haskell Web Frameworks

pc@pedrocorreia.net (pedrocorreia.net) — Sun, 13 May 2012 20:41:26 +0100

Recently there has been a lot of discussion and questions about the differences between the big three Haskell web frameworks: Happstack, Yesod, and Snap. Different pieces of the answer have been discussed in a number of places. In this post, I'd like to try to give a more complete comparison. Hopefully it will be relatively unbiased, but without being too watered down to be useful. I've succeeded if you can't tell which framework I'm a major contributor to based solely on the text of this post. ...

Camera Exposure Modes Explained

pc@pedrocorreia.net (pedrocorreia.net) — Sun, 13 May 2012 20:10:50 +0100

If you're just getting started with photography, the letters on your camera's dial might feel like hieroglyphics. With a variety of modes, it can be hard to pick what's right for the current shooting situation. Today, we're going to explain common camera modes so that you can pick the right one for any situation and grow out of using auto mode. ...

HTML5 jQuery Paint Plugin

pc@pedrocorreia.net (pedrocorreia.net) — Sat, 12 May 2012 20:38:45 +0100

Websanova Paint is a HTML5 canvas based jQuery plugin. It allows you to free paint on a canvas area with various shapes and colors including an eraser. It also features the fantastic Websanova Color Picker allowing you to set both border and fill colors. The canvas area can be set to any size you like and perhaps it's greatest feature is the ability to save your drawing as an image and then load it back in later. In fact you can load any image in as your drawing as long as it is a base64 encoded PNG image. ...

Android Query

pc@pedrocorreia.net (pedrocorreia.net) — Sat, 12 May 2012 20:38:15 +0100

Android-Query (AQuery) is a light-weight library for doing asynchronous tasks and manipulating UI elements in Android. Our goal is to make Android coding simpler, easier, and more fun! ...

Create Instagram Filters With PHP

pc@pedrocorreia.net (pedrocorreia.net) — Sat, 12 May 2012 20:09:42 +0100

In this tutorial, I'll demonstrate how to create vintage (just like Instagram does) photos with PHP and ImageMagick. Wait? What? Yes, you can do this very thing with PHP and ImageMagick, and that's just scratching the surface! ...

Retina graphics for your website

pc@pedrocorreia.net (pedrocorreia.net) — Fri, 11 May 2012 20:37:35 +0100

retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays. When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place. ...

Real-time Applications With Node.js and Socket.IO

pc@pedrocorreia.net (pedrocorreia.net) — Fri, 11 May 2012 20:36:30 +0100

Hey everyone! Sorry about the long pause since the last blog post, life has been quite hectic for the past little while. Today we'll be looking at developping collaborative web applications, that is applications which more than one person can interact with the data at the same time. However, we'll be spicing it up a little bit by making it real time, so no need to refresh the page every time you want to see the new data! In order to do this, you'll be needing Node.js and the Socket.IO module (easily installable via the npm tool. Although I don't like having too many requirements for a post, I'll also be using jQuery 1.7.2 in order to facilitate DOM manipulation. Finally, you'll also need some kind of web server (try and implement it in Node for fun!) as we'll encounter some cross-domain constraints if we don't. So what will we be building today? We'll be building an application which shows a simple task tracking application, which will contain a master list of tasks to be done. We'll also be keeping it simple, so people will be able to add tasks and mark tasks as done. It will update real time, so therefore we will have to make a system which allows us to notify everyone watching the list when a task is added or completed. The list will also have to be sent whenever there is a new visitor for the page in order to make sure they also see all the current tasks. For simplicity's sake, we will be storing the tasks in memory on the server side, however I encourage you to use it as an experiment for connecting Node to a number of different persistence services. In case you've never worked with Socket.IO before, it is a library which allows us to have two-way real-time communication on a web page. It makes use of a variety of techniques in order to increase the browser compatibility, making use of WebSockets if available and falling back to techniques such as AJAX polling and a Flash socket. If you've ever done socket programming for desktop applications, working with Socket.IO will feel very familiar. If you haven't, have no fear! Messages (packets) are sent back and forth with an identifier. Callbacks for a given identifier are implemented on the receiving end which works with the data. The nice thing about this is that we are using Javascript for both the sending and receiving data. Think of sending a packet like leaving a voicemail: you have a phone number and a message, and if the receiver chooses to receive messages for that phone number, he can work with the message. ...

Sass vs. LESS vs. Stylus: Preprocessor Shootout

pc@pedrocorreia.net (pedrocorreia.net) — Fri, 11 May 2012 20:09:08 +0100

CSS3 preprocessors are languages written for the sole purpose of adding cool, inventive features to CSS without breaking browser compatibility. They do this by compiling the code we write into regular CSS that can be used in any browser all the way back to the stone ages. There are thousands of features that preprocessors bring to the table, and in this article we will cover some of the publicized ones, and some of the not-so-publicized ones. Let's get started. ...

What every programmer should know about memory, Part 1

pc@pedrocorreia.net (pedrocorreia.net) — Thu, 10 May 2012 20:35:35 +0100

In the early days computers were much simpler. The various components of a system, such as the CPU, memory, mass storage, and network interfaces, were developed together and, as a result, were quite balanced in their performance. For example, the memory and network interfaces were not (much) faster than the CPU at providing data. This situation changed once the basic structure of computers stabilized and hardware developers concentrated on optimizing individual subsystems. Suddenly the performance of some components of the computer fell significantly behind and bottlenecks developed. This was especially true for mass storage and memory subsystems which, for cost reasons, improved more slowly relative to other components. The slowness of mass storage has mostly been dealt with using software techniques: operating systems keep most often used (and most likely to be used) data in main memory, which can be accessed at a rate orders of magnitude faster than the hard disk. Cache storage was added to the storage devices themselves, which requires no changes in the operating system to increase performance. {Changes are needed, however, to guarantee data integrity when using storage device caches.} For the purposes of this paper, we will not go into more details of software optimizations for the mass storage access. ...

15 Handpicked jQuery Drop Down Menus Tutorials

pc@pedrocorreia.net (pedrocorreia.net) — Thu, 10 May 2012 20:14:34 +0100

Here we are presenting another brilliant collection of 15 jQuery navigation menu that you can download for free and use for your next projects. Navigation menu plays a crucial role in any web design and a well designed, functional and visually appealing navigation menu truly adds beauty to the overall design and feel. So, feel free to browse through this collection of ready to use navigation menu and make your website easy to navigate. With these functional navigation menus, you will also make browsing your site easier for your visitors. So, enjoy looking into this collection of good looking and appealing jQuery Navigation Menu Plugins. ...

Gettings to know Backbone.ks

pc@pedrocorreia.net (pedrocorreia.net) — Thu, 10 May 2012 20:07:05 +0100

In this series, we're going to learn how to build a fully functional contacts manager using Backbone.js, Underscore.js, and jQuery. This is perfect for someone who has just finished learning the basics of JavaScript and jQuery and is looking to take their front end chops to the next level! ...

CSS Sprites Revisited

pc@pedrocorreia.net (pedrocorreia.net) — Wed, 09 May 2012 20:16:32 +0100

I'm pretty confident that I won't surprise anyone here by saying that CSS sprites have been around for quite a while now, rearing their somewhat controversial heads in the Web development sphere as early as 2003. Still, the CSS sprite hasn't truly found its way into the everyday toolkit of the common Web developer. While the theory behind CSS sprites is easy enough and its advantages are clear, they still prove to be too bothersome to implement, especially when time is short and deadlines are looming. Barriers exist to be breached, though, and we're not going to let a couple of tiny bumps in the road spoil the greater perks of the CSS sprite. If you want more background information on best practices and practical use cases, definitely read "The Mystery of CSS Sprites: Techniques, Tools and Resources." If you're the defensive type, I would recommend "CSS Sprites: Useful Technique, or Potential Nuisance?," which discusses possible caveats. I won't take a stance on the validity of CSS sprites. The aim of this article is to find out why people still find it difficult to use CSS sprites. Also, we'll come up with a couple of substantial improvements to current techniques. So, start up Photoshop (or your CSS sprite tool of choice), put on your LESS and Sass hats, and brush up your CSS pseudo-element skills, because we'll be mixing and matching our way to easier CSS sprite implementation. ...

45 Fresh Collection of High Quality Free PSD Files

pc@pedrocorreia.net (pedrocorreia.net) — Wed, 09 May 2012 20:13:16 +0100

What else can be so great for a designer than finding out high quality Photoshop PSD files? This is because PSD file format allows designers to add their own personal touch to an already designed work while saving loads of time that will be required to create that work from the scratch. PSD files not only save the time but also the effort and complete the job quite easily. This is the reason why they are of such a hot commodity for the designing community. ...

CSS Refreshers: Borders

pc@pedrocorreia.net (pedrocorreia.net) — Wed, 09 May 2012 20:06:04 +0100

Sure, we're all familiar with borders. Is there anything new that could possibly be introduced? Well, I bet there's quite a few things in this article that you never knew about! Not only can CSS3 be used to create rounded corners, but plain-ole' CSS can also be wrestled into displaying custom shapes. That's right; in the past, before these techniques were discovered, we might have resorted to using absolutely positioned background images to display circles or arrows. Thankfully - as we gleefully take one more step away from Photoshop - this is no longer the case. ...

Decoupling HTML From CSS

pc@pedrocorreia.net (pedrocorreia.net) — Tue, 08 May 2012 20:15:36 +0100

For years, the Web standards community has talked about the separation of concerns. Separate your CSS from your JavaScript from your HTML. We all do that, right? CSS goes into its own file; JavaScript goes in another; HTML is left by itself, nice and clean. CSS Zen Garden proved that we can alter a design into a myriad of permutations simply by changing the CSS. However, we've rarely seen the flip side of this - the side that is more likely to occur in a project: the HTML changes. We modify the HTML and then have to go back and revise any CSS that goes with it. In this way, we haven't really separated the two, have we? We have to make our changes in two places. ...

7 iPad Apps For Productivity And Project Management

pc@pedrocorreia.net (pedrocorreia.net) — Tue, 08 May 2012 20:12:33 +0100

With the plethora of iPad apps available in the market, it has become quite easy to manage your work and improve your productivity. Although people working in the web design and development field spend most of their time on their PCs and laptops and they would hardly get time to check their iPads. But having some handy iPad apps without doubt help them to become more productive by managing their work in a better way. Here we have put together some useful and extremely helpful iPad applications that will enhance your productivity and let you manage your work quite easily. Some of them are free to download while some of them are paid. ...

Toying With the HTML5 File System API

pc@pedrocorreia.net (pedrocorreia.net) — Tue, 08 May 2012 20:05:31 +0100

HTML5 provides us with a whole crop of new possibilities, such as drawing with canvas, implementing multimedia with the audio and video APIs, and so on. One of these tools, which is still relatively new, is the File System API. It gives us access to a sandboxed section of the user's local file system, thus filling the gap between desktop and web applications even further! In today's tutorial, we'll go through the basics of this new and exciting API, exploring the most common filesystem tasks ...

A Pure CSS3 Cycling Slideshow

pc@pedrocorreia.net (pedrocorreia.net) — Mon, 07 May 2012 20:15:16 +0100

Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers. But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. In any case, we all see the potential of CSS3, and in this article we'll discuss how to create an infinitely looping slider of images using only CSS3 animation. ...

15 Free High Quality ToolTip PSD's

pc@pedrocorreia.net (pedrocorreia.net) — Mon, 07 May 2012 20:11:41 +0100

A tooltip or infotip can be defined as a graphical hint that is incorporated with the website design element usually with the cursor or a pointer and provides some information when a website user hovers the pointer over that particular item without even clicking it. Or in simple words, it is a small hover box with brief information that appears when the item is being hovered over. For today's assortment, we have put together 15 high quality and absolutely free tooltip PSD files for you to download. We hope that this collection proves to be the best and you will get what you need to create visually appealing and fully functional tooltips ...

Closures: Front to Back

pc@pedrocorreia.net (pedrocorreia.net) — Mon, 07 May 2012 20:04:35 +0100

Closures are often viewed as an arcane art in the land of JavaScript. Once mastered, they allow you to write some truly amazing JavaScript. This article will get you up to speed on the magic of JavaScript closures. ...

The Essentials of Zepto.js

pc@pedrocorreia.net (pedrocorreia.net) — Sun, 06 May 2012 20:02:55 +0100

See, the internet, and the technology that powers it, has grown in leaps and bounds over the past years. We moved from static sites to web applications to dynamic web applications and then to real time, hyper responsive, thingamabob apps of today. One thing that has snuck past most radars has been the rise of mobile devices. Think about it: a lot of us use smart phones and use it for browsing on a constant basis. Even at home, a non-trivial portion of my circle has adopted a tablet device for casual surfing and email. While this influx of devices is good from an exposure point of view, it isn't without its caveats. Instead of thinking of these devices as display constrained like consumers do, we, as developers, need to think of them in terms of resources and bandwidth. Not all them sport a hyper quad gajillion Ghz CPU or come with oodles of memory. And let's not even get started with the bandwidth. A big portion of the browsing population is still stuck on these infernal excuses for a mobile internet connection. I think you see where I'm going with this. Big, monolithic libraries like jQuery or Prototype definitely have their place but for this mobile era, I think there's a place for something that's a lot more nimble. And a lot of developers seem to agree with me. ...

Asynchronous Programming using C# 4.5 and Visual Studio 2011

pc@pedrocorreia.net (pedrocorreia.net) — Sun, 06 May 2012 20:02:16 +0100

As a developer, I often do File Operations like writing and reading to and from a file, performing file Uploads and Downloads to and from a file server and so on. In such scenarios, if the size of the file is huge and if number of files to be uploaded and downloaded are more than what can be managed by the application, I go in for Asynchronous programming using BeginInvoke() method of the delegate. In this case, it is necessary for me to implement complex threading mechanisms which can at times make my code complex and a difficult to maintain. ...

Google+ Platform

pc@pedrocorreia.net (pedrocorreia.net) — Sat, 05 May 2012 20:01:44 +0100

Here are our first integration points we are making available for you to sample. This initial set is focused on providing read access to public data. We'll be adding more APIs over time to build on this foundation and help you create more types of integrations. This initial release is intended for feedback and learning - they are restricted to a courtesy usage quota and some functionality is disabled. This should provide enough access for you to check out the APIs and to start integrating Google+ with your apps. You can request more quota at the Google+ API Console. We'll keep a close eye on feedback, and will release more APIs into production as soon as they're ready. So go ahead and start building! ...

Getting Started with ASP.NET 4.5 Web Forms - Introduction - 1 of 5

pc@pedrocorreia.net (pedrocorreia.net) — Sat, 05 May 2012 19:59:07 +0100

This series of tutorials guides you through the steps required to create an ASP.NET Web Forms application using Visual Studio 11 Express Beta for Web and ASP.NET 4.5 Beta. The application you'll create is named the Wingtip Toys. It's a simplified example of a store front web site that sells items online. This tutorial series highlights several of the new features available in ASP.NET 4.5 Beta. This tutorial series is the first installment of two. Comments are welcome, and we'll make every effort to update this tutorial series based on your suggestions. ...

A Faster Emulator with Better Hardware Support

pc@pedrocorreia.net (pedrocorreia.net) — Sat, 05 May 2012 19:58:37 +0100

The Android emulator is a key tool for Android developers in building and testing their apps. As the power and diversity of Android devices has grown quickly, it's been hard for the emulator keep pace. Today we're thrilled to announce several significant improvements to the emulator, including a dramatic performance upgrade and support for a broader range of hardware features, notably sensors and multi-finger inpu ...

Visual Studio 11 - Awesome New Features for Web Developers

pc@pedrocorreia.net (pedrocorreia.net) — Fri, 04 May 2012 19:58:05 +0100

The Visual Studio 11 Beta along with the latest .NET framework 4.5 has been out for about two months now and there are a slew of really good features that aligns with Microsoft's goal of 'Developer Happiness and Productivity'' In this article we will focus on the Web Developer specific functions in the release that promise to make day to day developer life much easier. ...