Articles by Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.

Introducing PhysicsJS

A lot of us create JavaScript animations in our projects, these animations are usually simple and require no physics whatsoever. PhysicsJS aims to change that by making it easy for us to add physics to our JavaScript animations without slowing download time. This library is modular, that means you only need to load what you want to use, and the core files are just 31kb. Why use this library ? ... One of the reasons is its modular workflow. This has the advantage of removing the clutter you don’t need and...
CSS

Introducing Recess

We all make mistakes when creating our code, it’s part of being a programmer and having a linter that pulls us up when we make errors is always a great idea. We already have a famous one for JavaScript, JSLint, and now Twitter has given us one for CSS. It’s called Recess and it can help us keep our CSS code clean and super manageable. Installation ... In order to install this linter you’ll first need to have node and npm installed on your computer. If you have that installed then installing recess is as...
CSS

How to use CSS filters

CSS Filters are a powerful tool that allow us to achieve some amazing visual effects with our elements; they are especially great for hover effects. Filters provide us with a method for modifying the rendering of a basic DOM element. They allow you to do things like blur, modify contrast, even the color of your element. Creating filters ... When I think about image filters, the first thing that comes to mind is the black and white filter; taking a full-color image and turning that image into a monochrome...

Getting started with PhoneGap, part 3

With the first and second parts of this tutorial we have gotten pretty far when it comes to understanding PhoneGap and in this last part we will take a look at some more device API’s that we can make use of when creating our mobile applications with PhoneGap. The Contacts API ... The name in this API is pretty self explanatory , with this API we can access the device’s contacts database and it allows us to either create , find , clone or delete a contact. To create a contact we need to use the contacts.create...

How to migrate from Bootstrap 2 to Bootstrap 3

Bootstrap is without a doubt the most widely used front-end framework, it's thought to power 1% of all websites currently on the web and if we look at how Bootstrap is built it's easy to see why, it simply makes development so much easier for us. Now the RC2 of Bootstrap 3 is out and they have completely redone the framework from top to bottom. Let's now see what has changed to help your migration a little. The grid ... The grid is one of the biggest changes and has been completely rebuilt for a mobile-first approach...

Getting started with PhoneGap, part 2

The first part of this mini-series showed you what PhoneGap is, and how it can help you develop mobile applications with familiar technologies. In this second part we’ll look at some more device APIs. The geolocation API ... This API is used on a variety of websites to make the site (or in this case the mobile application) location aware. A simple example that would get you the user’s latitude, longitude and altitude coordinates and show them on the screen would look something like: document.addEventListener("deviceready",...

Getting started with PhoneGap

Creating Mobile applications is something a lot of web developers are keen to get into. The problem with creating these applications when coming from a web background is that new languages need to be learned. With PhoneGap that need is gone, PhoneGap allows you to build web applications with languages you are already familiar with like HTML, CSS and JavaScript. What is PhoneGap ? ... PhoneGap is an open source framework that aids in the development of cross-platform applications with languages familiar...
CSS

How to change text selection color with CSS

If your website has a lot of text, at some point or another people will more than likely want to select it to copy, or search on Google. Changing the text selection color is always a nice touch, it shows that you're paying attention to the finer details of the site. Today I'm going to share a quick tip that will allow you to achieve some different looks for your selected text. Browser support ... The browser support for this selector is pretty good nowadays, it's supported by all the latest versions of the most...
Load more
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress