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.
CSS

Introducing the calc function

Math is a necessary (if not always welcome) tool in our programming languages. We use it constantly to make all kinds of dynamic decisions. Until recently, it wasn’t available in CSS without a pre-processor; however the introduction of the calc function to CSS3 provides a way of running Math calculations natively which increases performance and even enables mixed units. Browser support ... Unusually, in the case of the calc function browser support is actually pretty good: on the desktop it’s...

Introducing Snap.svg

One of the best ways of presenting graphics online is as scaleable vector graphics. That’s because SVG can adapt to any screen size, without losing quality. The increased demand for the format has lead to the open source Snap.svg library. What is Snap.svg? ... Snap is a JavaScript library that aims to help web developers bring advanced SVG features to the Web. This library can load, animate or even create SVG graphics right in the browser. Snap was written by Dmitry Baranovskiy who was also the writer...
CSS

How to create a flip effect with CSS3 transforms

Over the last couple of years CSS has evolved more than we could ever imagined. Styling and layout are now entirely in our hands, although the best thing about CSS3 in my eyes are the Transforms, particularly the 3D ones. With transforms we can move elements through a 3D world, and today I’ll demonstrate this by creating a flip effect. Browser support ... The browser support for 3D transforms is a little lacking, but on the whole not too bad. It’s supported by all webkit browsers using the webkit prefix,...

How to use the File Reader API

HTML5 has brought a lot of new features to HTML and whilst we all concentrate on the big advances like canvas, and audio & video, some of the simpler improvements get overlooked. This is the case with the File Reader API, which although not glamorous, is an excellent addition to our toolbox. In terms of browser support the File Reader API is supported by everything modern with the exception of Opera Mini, so you can be confident using it right now. What this new API does is read the contents of a file on...

Introducing touchSwipe

There are jQuery plugins for every type of interaction we have with the browser and they are much appreciated, but one thing that has been lacking when it comes to interactions is the type of interaction we have with our mobile devices. We can now create full blown mobile apps using only HTML, CSS and JavaScript but in order to make a fully functional app we need to be able to listen for the swipes and pinches of the user, and that’s where touchSwipe comes in. Using the plugin ... The first we need to do in order...

How to create a filterable gallery with jQuery

We see filterable galleries in plenty of portfolios, they're a nice and tidy way of showing off different categories of work without forcing the user to review everything. We're going to build a filterable gallery using the data attribute that came with HTML5, this way we don't have to tie everything up with classes. If you want a better idea of what we will be creating, here's a demo. The data attribute  ... I mentioned in the introduction that in this tutorial we will be using the data attribute,...

Introducing Grunt

When you’re developing a large-scale project you always want to use some kind of task runner, in order to automate your workflow. Grunt is exactly that, a JavaScript task runner. It can prepare your code for production with one simple command. What can Grunt do ? ... Grunt is a JavaScript task runner and it’s able to compile your CoffeeScript, Less or Sass files , lint all your JavaScript, minify it or even put all of it in one file by concatenating them. Grunt is an amazing automation tool that allows...

Introducing Yeoman

Web developers all have different ways of working, but there’s always that set of frameworks and libraries we install on each project no matter what. With this comes the tedious work of downloading each one and placing them in our project folder; this doesn’t sound like much if done once or twice but when it’s necessary almost everyday it becomes a tedious task. If you share this opinion Yeoman is right up your alley. What is Yeoman ? ... Yeoman is a workflow, it’s not just a tool but a collection...
Load more
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress