J. Pedro Ribeiro

J. Pedro Ribeiro

Hello!
I’m a Brazilian front-end developer living in London. This website features some of my latest projects and my thoughts on anything web related.
You can find me on Twitter, Instagram, and LinkedIn

React Amsterdam 2019

April 14, 2019

This weekend I had the privilege to attend the biggest ReactJS conference in the world - React Amsterdam . Day 1 - Meetup Fail My trip…

Back to Basics

March 30, 2019

It’s been a long time since I wrote anything on this site. So, as any web developer would do, I decided to rewrite the whole site instead…

Fun with Browser APIs: Speech Synthesis

May 09, 2018

On the previous post, I showed how you can use the Web Speech API to translate speech to text using Speech Recognition. Today, I’m going…

Fun with Browser APIs: Speech Recognition

March 04, 2018

On this third post about browser APIs we’re gonna talk about audio, or more specifically, speech. The Web Speech API is compromised of…

Fun with Browser APIs: Shape Detection

February 03, 2018

This is the second instalment of Fun with Browser APIs , and today I’m going to talk about Shape Detection . Spec in draft stage This is a…

Fun with Browser APIs: Media Stream Image Capture

January 26, 2018

Fun with Browser APIs is a series of posts in which I introduce one or more APIs that you might not heard about or used. This first one…

Accessibility Tests with Pa11y & Node

January 10, 2018

In this article I’m going to show you how to automate your accessibility testing with just a little amount of JavaScript and a great library…

Book Review: Web Performance In Action

August 20, 2017

For the past 2 years, my work has had a focus on delivering fast experiences on the web. I’ve also kept an eye on any article, tweet or…

Progressive Web Apps

December 29, 2016

In the past couple of months I’ve been reading quite a lot about Progressive Web Apps. The term is getting very popular especially due to…

Book Review: Using WebPageTest

August 29, 2016

You can’t start talking about performance without hearing about WebPageTest . It’s by far the most complex and useful synthetic tool…

What's the deal with renaming files in Git?

June 11, 2016

If you try renaming a file in your project, you might notice this weird behaviour when checking its status : `$ git status On branch…

Understanding Bandwidth vs Latency Through An Analogy

May 14, 2016

To understand how performance can affect your website, it’s important to understand common terms and which part they play in a network…

request anim frame

May 08, 2016

request animation frame JSJ web performance 18:00 const foo = function (bar) { let baz = 2; for (baz ; baz++ ; baz <10){ console.log…

Web Education

April 23, 2016

It’s Sunday morning. I’ve just read some articles on CSS and for some reason started browsing Stack Overflow on that subject, specifically…

Aggregating Google Analytics Browser Statistics with r2d2

March 27, 2016

I love Google Analytics but the browser usage stats always annoyed me. Since modern, evergreen browsers release features very frequently…

Web Ethics

March 20, 2016

Once again Start Your Shift brought me another puzzling topic to write about: Web Ethics. It’s in the news It took me a while to come up…

Thoughts on Front-end Tooling

February 28, 2016

Being a front-end developer means keeping up with current trends. It doesn’t mean you have to master them all, however you are expected to…

Compromise - Balancing Project Needs with Internal Ideals

February 20, 2016

Every new project is a new opportunity. It’s when you use your past experience and have the chance to build something better than you did…

How to Make the Web Better

January 29, 2016

When #startYourShift asked us to write about how to make the web better I could not help but think about my own journey on the web. In…

Workflow: From Design to the Browser

October 04, 2015

What is the best way to code a design piece to the browser? Lately, I’ve been questioning myself if the process I use is the proper one or…

Baseliner: My First Chrome Extension

August 30, 2015

I’ve build a small tool a while ago to help me align elements on a page and keep the baseline consistent. It adds a customisable horizontal…

Being a Technical Book Reviewer

July 05, 2015

A couple months ago I was approached by a book publishing company. They found this website through one of my book review posts and wanted…

Book Review: Expert JavaScript

October 26, 2014

Being a frontend developer means not only knowing your tools pretty well but also understanding how and why they behave the way they do…

Book Review: The Mobile Book

December 25, 2012

Mobile development, responsive web design, flexible layouts for devices. There are so many posts, articles and books coming out about this…

Finding a job in web design and development

November 18, 2012

Searching for a new job is a stressful and time-consuming task. When I moved to London a couple of months ago I had this experience once…

Done Is Beautiful

October 14, 2012

Side projects are important for every professional. It takes your mind away from day-to-day work and let you explore and go further without…

Vertically Centering Images with HTML & CSS

August 03, 2012

Here is a quick trick whenever you need to vertically centre an image (or paragraph, or any other element) inside its parent container…

What Is Media Queries And How To Use Them

July 07, 2012

Mobile, tablets, netbooks… today people access websites using a variety of computers and gadgets and that is great, it enable us to reach…

Book Review: Smashing Book 3

June 20, 2012

Well, I guess third time’s the charm because Smashing Magazine finally made it. Their third volume hits the nail on all chapters and it’s…

HTML5 & CSS3 Curriculum Vitae (Résumé) Template

May 09, 2012

I was tired of my old CV and lately I was using the LinkedIn auto generated PDF CV, which is quite nice and handy but it lacks…

HTML5 and CSS3 Boilerplate files

February 28, 2012

Boilerplate is a set of files composed to be used over and over again. In front-end development (any area actually), starting from…

CSS Only Drop Down Menu

February 01, 2012

Drop Down menu is an excellent alternative for complex menus, the ones with a variety of categories and subcategories to choose from. In…

Book Review: Smashing Book 2

January 18, 2012

A couple months ago I finished reading The Smashing Book 2 from the popular web design blog Smashing Magazine . Just like with the first…

So... I Finally Redesigned My Site

January 13, 2012

Nearly 4 years ago, back in 2008, I decided to create a blog and write about all the stuff I was reading and doing, mostly web related…

PSD To HTML - Step By Step

December 13, 2011

get psd write html first to ensure semantics (or bit by bit for testing purposes / create styleguide first) write css for most updated…

HTML Coding For E-mail Marketing

July 21, 2011

Creating a successful e-mail marketing campaign requires several items: a valid product or service to offer, selected target audience and…

Book Review: Hardboiled Web Design

June 16, 2011

Andy Clarke’s long-waited book, Hardboiled Web Design , brings new ideas on website development. It’s packed with HTML5 and CSS3 but with a…

Creating Expandable Banners with Flash and Javascript

June 04, 2011

A very popular ad type in portals and blogs, the expandable banner is a useful technique to display more content to a banner. It’s a very…

Please Start From The Beginning...

February 20, 2011

A couple of weeks ago I had the pleasure of doing some transcription work for the podcast called ” Please start from the beginning… ”, a…

Photoshop: Quick Guide to Smart Object & Smart Filters

January 18, 2011

Smart Object and Smart Filter are two extremely useful features in Photoshop that will boost your design productivity. This is an easy…

Cross Browser Testing Resources

June 15, 2010

Following up on my article about using or not IE6 , I’ve selected a few tools to help you test your website on different browsers. Most…

Book Review: Logo Design Love

March 30, 2010

If you are into branding and logos then you probably know David Airey . His knowledge in the graphic design field has generated two…

How to Make the Most of Design Tutorials Without Losing Your Soul

February 25, 2010

Design blogs are a great source of articles, news and resources - specially if you use mainstream softwares like Photoshop and…

Know Your Type: Part 2 – Type Categories

December 31, 2009

In this second part of typography articles we are going to learn the categories in which a type can be classified. Knowing the terms and…

Book Review: Making and Breaking the Grid

December 16, 2009

Making and Breaking the Grid , by Timothy Samara , is an analysis of the construction and deconstruction of grid-based designs . Featuring…

Portfolio: Hooke & MacDonald

November 04, 2009

Hooke & MacDonald is one of the major real estate agencies in Ireland, specially in the new homes market. They requested 4pm to come up…

Why Should I Care About IE6?

October 27, 2009

Firefox, Chrome, Safari, Internet Explorer, Opera. Developing websites to match all these browsers is no easy job. And don’t even start…

Know Your Type: Part 1 - Anatomy

October 14, 2009

Typography is a field that is quite new to me. Coming from a developer background, I did not study type the way graphic designers do…

3 Image Techniques To Speed Up Your Website

September 29, 2009

In this post I’ll show you 3 useful techniques to speed up the display and download of images on your website: Css Sprites , Image Maps…

Book Review: Don't Make Me Think!

September 22, 2009

What comes to your mind when you think about usability in web design ? “Less clicks is better” ? “Design to the average user…

Portfolio: Coldwell Banker Ireland

September 15, 2009

Coldwell Banker is a world wide known real estate company with a wide range of property markets such as Residential Homes, Apartments, Land…

How to Photograph Textures For Websites

September 08, 2009

It’s great to see how much the use of textures in websites has increased in the past months. They are an effective way of adding flavour…

15 Amazing Beer Bottle Designs

August 29, 2009

From all the different fields of print design the one that always gets my attention is the beer bottles design. It’s a saturated market…

Portfolio: iWord

August 24, 2009

In this project I was requested to not only redesign their current page but to come up with 2 animated banner ads, which will be…

Book Review: Sexy Web Design

August 15, 2009

Have you ever wondered if your design process is the right one for your projects? Have you ever thought that maybe there’s a step missing…

Random Illustrations: Part 1

August 12, 2009

Random Illustrations is going to be a series of posts featuring my drawings on random subjects. Hope you enjoy it! Today’s drawing…

Great Websites for Vintage Resources & Inspiration

August 06, 2009

Vintage - or Retro - design is the style that uses techniques, colours or shapes used in the past. I am a big fan of this style and in…

Book Review: Thinking with Type

July 25, 2009

I must admit that typography wasn’t always my favourite field in design. Until a couple years ago fonts and texts were mere supporting…

Creating Your Own Portfolio Website - Single Page, Full Site or Blog style?

July 18, 2009

After spending several months developing this website and facing different issues throughout the project, I’ve learnt a few things about the…

Book Review: The Brand Gap

July 04, 2009

Branding books don’t have to be huge or full of complicated theories, they can be fun, practical and inspiring. The Brand Gap , by Marty…